Skip to content

Commit 188b143

Browse files
thrownullexceptionthrownullexception
committed
♻️ refactor(icons): move to system icons
1 parent 89f3120 commit 188b143

File tree

98 files changed

+469
-407
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+469
-407
lines changed

‎.lintstagedrc

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"src/**/*.{json,ts,tsx}": [
3-
"node ./scripts/ci",
4-
"npm run lint:fix"
3+
"npm run lint:fix",
4+
"node ./scripts/ci"
55
]
66
}

‎scripts/ci/check-file-segments.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,7 @@ for (const fileName of files) {
4040
if (errors.length > 0) {
4141
console.error(`${errors.length} files not placed in the correct folders`);
4242

43-
errors.forEach((error) => {
44-
console.error(error);
45-
});
43+
console.error(errors.join(","));
4644

4745
process.exit(1);
4846
}

‎src/frontend/_layouts/app/LayoutImpl/Profile.tsx

+11-7
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { SYSTEM_COLORS } from "frontend/design-system/theme/system";
77
import { Typo } from "frontend/design-system/primitives/Typo";
88
import { ILabelValue } from "shared/types/options";
99
import { DropDownMenu } from "frontend/design-system/components/DropdownMenu";
10+
import { SystemIconsKeys } from "shared/constants/Icons";
1011
import { useConstantNavigationMenuItems } from "./portal";
1112

1213
const ProfileRoot = styled(Stack)`
@@ -25,12 +26,14 @@ interface IProps {
2526
isFullWidth: boolean;
2627
}
2728

28-
const constantNavigation: ILabelValue[] = [
29-
{
30-
label: "My Account",
31-
value: NAVIGATION_LINKS.ACCOUNT.PROFILE,
32-
},
33-
];
29+
const constantNavigation: Array<ILabelValue & { systemIcon: SystemIconsKeys }> =
30+
[
31+
{
32+
label: "My Account",
33+
systemIcon: "User",
34+
value: NAVIGATION_LINKS.ACCOUNT.PROFILE,
35+
},
36+
];
3437

3538
export function ProfileOnNavigation({ isFullWidth }: IProps) {
3639
const currentUser = useAuthenticatedUserBag();
@@ -53,9 +56,10 @@ export function ProfileOnNavigation({ isFullWidth }: IProps) {
5356
ellipsis
5457
ariaLabel="Toggle Profile Menu"
5558
menuItems={[...constantNavigation, ...constantNavigationMenuItems].map(
56-
({ label, value }) => ({
59+
({ label, value, systemIcon }) => ({
5760
id: label,
5861
label,
62+
systemIcon,
5963
onClick: () => router.push(value),
6064
})
6165
)}

‎src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx

+6-21
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
SystemLinks,
88
} from "shared/types/menu";
99
import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
10-
import { systemIconToSVG } from "shared/constants/Icons";
1110
import { ChevronRight } from "react-feather";
1211
import { SYSTEM_COLORS } from "frontend/design-system/theme/system";
1312
import { Typo } from "frontend/design-system/primitives/Typo";
@@ -16,6 +15,7 @@ import { Stack } from "frontend/design-system/primitives/Stack";
1615
import { useThemeColorShade } from "frontend/design-system/theme/useTheme";
1716
import { useNavigationStack } from "frontend/lib/routing/useNavigationStack";
1817
import { ActionIntegrations } from "shared/types/actions";
18+
import { SystemIcon } from "frontend/design-system/Icons/System";
1919
import { PORTAL_SYSTEM_LINK_CONFIG_LINKS } from "./portal";
2020

2121
const SYSTEM_LINKS_CONFIG_MAP: Record<
@@ -71,24 +71,14 @@ const LeftSideNavMenuListAnchor = styled.a<{
7171
}
7272
`;
7373

74-
const IconRoot = styled.span<{ $isFullWidth: boolean }>`
75-
color: ${SYSTEM_COLORS.white};
76-
width: 20px;
77-
height: 20px;
78-
display: inline-block;
79-
svg {
80-
vertical-align: initial;
81-
}
82-
`;
83-
8474
const LeftSideNavMenu = styled.ul<{}>`
8575
padding: 0;
8676
margin-bottom: 0;
8777
`;
8878

8979
const NavLabel = styled(Typo.XS)<{ $isFullWidth: boolean }>`
9080
color: ${SYSTEM_COLORS.white};
91-
margin-left: 20px;
81+
margin-left: 8px;
9282
transition: all 0.3s;
9383
${(props) =>
9484
!props.$isFullWidth &&
@@ -173,13 +163,8 @@ export function RenderNavigation({
173163
{navigation.map(({ title, icon, type, link, id, children }) => {
174164
const isActive = activeItem[depth] === id;
175165

176-
const iconComponent = (
177-
<IconRoot
178-
$isFullWidth={isFullWidth}
179-
dangerouslySetInnerHTML={{
180-
__html: systemIconToSVG(icon, isActive ? 2 : 1),
181-
}}
182-
/>
166+
const menuIcon = depth === 1 && (
167+
<SystemIcon strokeWidth={isActive ? 2 : 1} icon={icon} size={20} />
183168
);
184169

185170
return (
@@ -200,7 +185,7 @@ export function RenderNavigation({
200185
setActiveItem(depth, isActive ? "" : id);
201186
}}
202187
>
203-
{iconComponent}
188+
{menuIcon}
204189
{isFullWidth && (
205190
<Stack justify="space-between" spacing={0} align="center">
206191
<NavLabel ellipsis $isFullWidth={isFullWidth}>
@@ -241,7 +226,7 @@ export function RenderNavigation({
241226
}
242227
hoverColor={getBackgroundColor("primary-color", 45)}
243228
>
244-
{icon && iconComponent}
229+
{icon && menuIcon}
245230
<NavLabel ellipsis $isFullWidth={isFullWidth}>
246231
{title}
247232
</NavLabel>

‎src/frontend/_layouts/app/LayoutImpl/portal/main.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
2+
import { SystemIconsKeys } from "shared/constants/Icons";
23
import { PortalSystemLinks } from "shared/constants/portal/menu/main";
4+
import { ILabelValue } from "shared/types/options";
35

4-
export const useConstantNavigationMenuItems = () => {
6+
export const useConstantNavigationMenuItems = (): Array<
7+
ILabelValue & { systemIcon: SystemIconsKeys }
8+
> => {
59
return [
610
{
711
label: "Menu Settings",
812
value: NAVIGATION_LINKS.SETTINGS.MENU,
13+
systemIcon: "List",
914
},
1015
];
1116
};

‎src/frontend/_layouts/app/constant.ts

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
1-
import { GitHub, Globe, Twitter, Users } from "react-feather";
1+
import { SystemIconsKeys } from "shared/constants/Icons";
22

3-
export const DEMO_LINKS = [
3+
export const DEMO_LINKS: {
4+
id: string;
5+
systemIcon: SystemIconsKeys;
6+
label: string;
7+
description: string;
8+
link: string;
9+
}[] = [
410
{
511
id: "github",
6-
IconComponent: GitHub,
12+
systemIcon: "Github",
713
label: "Star us on Github",
814
description: `Tell us DashPress is a useful project by dropping us a star`,
915
link: "https://github.com/dashpresshq/dashpress",
1016
},
1117
{
1218
id: "twitter",
13-
IconComponent: Twitter,
19+
systemIcon: "Twitter",
1420
label: "Follow us on Twitter",
1521
description: `Tweet at @dashpressHQ if you know others will benefit using DashPress`,
1622
link: "https://twitter.com/dashpressHQ",
1723
},
1824
{
19-
id: "users",
20-
IconComponent: Users,
25+
id: "discord",
26+
systemIcon: "Discord",
2127
label: "Join our Discord community",
2228
description: `Ask your questions here`,
2329
link: "https://discord.gg/aV6DxwXhzN",
2430
},
2531
{
2632
id: "website",
27-
IconComponent: Globe,
33+
systemIcon: "Link",
2834
label: "Visit our website",
2935
description: `For more links on documentation, roadmap, blog etc`,
3036
link: "https://dashpress.io",

‎src/frontend/components/IconInputField/IconInputField.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function TestComponent({
2424

2525
<FormButton
2626
text={() => "Save"}
27-
icon="add"
27+
systemIcon="Plus"
2828
isMakingRequest={false}
2929
disabled={pristine}
3030
/>

‎src/frontend/components/IconInputField/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export function IconInputField({ value }: { value: string }) {
2121
input={input}
2222
rightActions={[
2323
{
24+
systemIcon: "ToggleLeft",
2425
label: "Use SVG",
2526
action: () => input.onChange(""),
2627
},
@@ -36,6 +37,7 @@ export function IconInputField({ value }: { value: string }) {
3637
input={input}
3738
rightActions={[
3839
{
40+
systemIcon: "ToggleRight",
3941
label: "Use Icon",
4042
action: () => input.onChange(SystemIconsList[0]),
4143
},

‎src/frontend/components/SchemaForm/SchemaForm.spec.tsx

+15-15
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ describe("<SchemaForm />", () => {
6464
<SchemaForm<IAccount>
6565
onSubmit={mockOnSubmit}
6666
buttonText={buttonText}
67-
icon="save"
67+
systemIcon="Save"
6868
fields={BASE_FIELDS}
6969
/>
7070
</ApplicationRoot>
@@ -90,7 +90,7 @@ describe("<SchemaForm />", () => {
9090
<SchemaForm<IAccount>
9191
onSubmit={mockOnSubmit}
9292
buttonText={buttonText}
93-
icon="save"
93+
systemIcon="Save"
9494
fields={BASE_FIELDS}
9595
resetForm
9696
/>
@@ -114,7 +114,7 @@ describe("<SchemaForm />", () => {
114114
<SchemaForm<IAccount>
115115
onSubmit={mockOnSubmit}
116116
buttonText={buttonText}
117-
icon="save"
117+
systemIcon="Save"
118118
fields={BASE_FIELDS}
119119
formExtension={{
120120
beforeSubmit: "",
@@ -140,7 +140,7 @@ describe("<SchemaForm />", () => {
140140
<SchemaForm<IAccount>
141141
onSubmit={mockOnSubmit}
142142
buttonText={buttonText}
143-
icon="save"
143+
systemIcon="Save"
144144
fields={BASE_FIELDS}
145145
action="custom-action"
146146
formExtension={{
@@ -169,7 +169,7 @@ describe("<SchemaForm />", () => {
169169
<SchemaForm<IAccount>
170170
onSubmit={mockOnSubmit}
171171
buttonText={buttonText}
172-
icon="save"
172+
systemIcon="Save"
173173
fields={BASE_FIELDS}
174174
formExtension={{
175175
beforeSubmit: "sm ks ks dsldm sl dm",
@@ -195,7 +195,7 @@ describe("<SchemaForm />", () => {
195195
<SchemaForm<IAccount>
196196
onSubmit={mockOnSubmit}
197197
buttonText={buttonText}
198-
icon="save"
198+
systemIcon="Save"
199199
fields={BASE_FIELDS}
200200
action="custom-action"
201201
formExtension={{
@@ -223,7 +223,7 @@ describe("<SchemaForm />", () => {
223223
<SchemaForm<IAccount>
224224
onSubmit={mockOnSubmit}
225225
buttonText={buttonText}
226-
icon="save"
226+
systemIcon="Save"
227227
fields={BASE_FIELDS}
228228
action="edit"
229229
initialValues={{
@@ -259,7 +259,7 @@ describe("<SchemaForm />", () => {
259259
<SchemaForm<IAccount>
260260
onSubmit={mockOnSubmit}
261261
buttonText={buttonText}
262-
icon="save"
262+
systemIcon="Save"
263263
fields={{
264264
...BASE_FIELDS,
265265
}}
@@ -290,7 +290,7 @@ describe("<SchemaForm />", () => {
290290
<SchemaForm<IAccount>
291291
onSubmit={mockOnSubmit}
292292
buttonText={buttonText}
293-
icon="save"
293+
systemIcon="Save"
294294
fields={{
295295
...BASE_FIELDS,
296296
}}
@@ -321,7 +321,7 @@ describe("<SchemaForm />", () => {
321321
<SchemaForm<IAccount>
322322
onSubmit={mockOnSubmit}
323323
buttonText={buttonText}
324-
icon="save"
324+
systemIcon="Save"
325325
fields={{
326326
...BASE_FIELDS,
327327
}}
@@ -353,7 +353,7 @@ describe("<SchemaForm />", () => {
353353
<SchemaForm<IAccount>
354354
onSubmit={mockOnSubmit}
355355
buttonText={buttonText}
356-
icon="save"
356+
systemIcon="Save"
357357
fields={{
358358
...BASE_FIELDS,
359359
}}
@@ -395,7 +395,7 @@ describe("<SchemaForm />", () => {
395395
<SchemaForm<{ name: string }>
396396
onSubmit={mockOnSubmit}
397397
buttonText={buttonText}
398-
icon="save"
398+
systemIcon="Save"
399399
fields={{
400400
name: {
401401
type: "text",
@@ -424,7 +424,7 @@ describe("<SchemaForm />", () => {
424424
<SchemaForm<{ hello: string }>
425425
onSubmit={mockOnSubmit}
426426
buttonText={buttonText}
427-
icon="save"
427+
systemIcon="Save"
428428
fields={{
429429
...BASE_FIELDS,
430430
hello: {
@@ -447,7 +447,7 @@ describe("<SchemaForm />", () => {
447447
<SchemaForm<{ name: string }>
448448
onSubmit={mockOnSubmit}
449449
buttonText={buttonText}
450-
icon="save"
450+
systemIcon="Save"
451451
fields={{
452452
name: {
453453
type: "text",
@@ -473,7 +473,7 @@ describe("<SchemaForm />", () => {
473473
onSubmit={jest.fn()}
474474
onChange={onChangeMock}
475475
buttonText={buttonText}
476-
icon="save"
476+
systemIcon="Save"
477477
fields={{
478478
...BASE_FIELDS,
479479
}}

‎src/frontend/components/SchemaForm/index.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ import { ToastService } from "frontend/lib/toast";
88
import { resetFormValues } from "frontend/lib/form/utils";
99
import { FormButton } from "frontend/design-system/components/Button/FormButton";
1010
import { userFriendlyCase } from "shared/lib/strings/friendly-case";
11-
import { ButtonIconTypes } from "frontend/design-system/components/Button/constants";
1211
import styled from "styled-components";
1312
import { gridItem, gridRoot } from "frontend/design-system/constants/grid";
1413
import { GridSpanSizes } from "shared/types/ui";
14+
import { SystemIconsKeys } from "shared/constants/Icons";
1515
import { RenderFormInput } from "./_RenderFormInput";
1616
import { IFormExtension } from "./types";
1717
import { runFormBeforeSubmit, runFormFieldState } from "./form-run";
@@ -23,7 +23,7 @@ interface IProps<T> {
2323
initialValues?: Partial<T>;
2424
buttonText?: (submitting: boolean) => string;
2525
action?: string;
26-
icon: ButtonIconTypes | "no-icon";
26+
systemIcon: SystemIconsKeys;
2727
onChange?: (data: T) => void;
2828
resetForm?: true;
2929
formExtension?: Partial<IFormExtension>;
@@ -46,7 +46,7 @@ export function SchemaForm<T extends Record<string, unknown>>({
4646
onChange,
4747
buttonText,
4848
initialValues,
49-
icon,
49+
systemIcon,
5050
action,
5151
formExtension,
5252
resetForm,
@@ -138,7 +138,7 @@ export function SchemaForm<T extends Record<string, unknown>>({
138138
text={buttonText}
139139
isMakingRequest={submitting}
140140
disabled={pristine}
141-
icon={icon === "no-icon" ? undefined : icon}
141+
systemIcon={systemIcon}
142142
/>
143143
)}
144144
</form>

0 commit comments

Comments
 (0)