♻️ refactor(icons): move to system icons

dashpresshq · Jan 16, 2024 · 188b143 · 188b143
1 parent 89f3120
commit 188b143
Show file tree

Hide file tree

Showing 98 changed files with 469 additions and 407 deletions.
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -1,6 +1,6 @@
 {
   "src/**/*.{json,ts,tsx}": [
-    "node ./scripts/ci",
-    "npm run lint:fix"
+    "npm run lint:fix",
+    "node ./scripts/ci"
   ]
 }
diff --git a/scripts/ci/check-file-segments.js b/scripts/ci/check-file-segments.js
@@ -40,9 +40,7 @@ for (const fileName of files) {
 if (errors.length > 0) {
   console.error(`${errors.length} files not placed in the correct folders`);
 
-  errors.forEach((error) => {
-    console.error(error);
-  });
+  console.error(errors.join(","));
 
   process.exit(1);
 }
diff --git a/src/frontend/_layouts/app/LayoutImpl/Profile.tsx b/src/frontend/_layouts/app/LayoutImpl/Profile.tsx
@@ -7,6 +7,7 @@ import { SYSTEM_COLORS } from "frontend/design-system/theme/system";
 import { Typo } from "frontend/design-system/primitives/Typo";
 import { ILabelValue } from "shared/types/options";
 import { DropDownMenu } from "frontend/design-system/components/DropdownMenu";
+import { SystemIconsKeys } from "shared/constants/Icons";
 import { useConstantNavigationMenuItems } from "./portal";
 
 const ProfileRoot = styled(Stack)`
@@ -25,12 +26,14 @@ interface IProps {
   isFullWidth: boolean;
 }
 
-const constantNavigation: ILabelValue[] = [
-  {
-    label: "My Account",
-    value: NAVIGATION_LINKS.ACCOUNT.PROFILE,
-  },
-];
+const constantNavigation: Array<ILabelValue & { systemIcon: SystemIconsKeys }> =
+  [
+    {
+      label: "My Account",
+      systemIcon: "User",
+      value: NAVIGATION_LINKS.ACCOUNT.PROFILE,
+    },
+  ];
 
 export function ProfileOnNavigation({ isFullWidth }: IProps) {
   const currentUser = useAuthenticatedUserBag();
@@ -53,9 +56,10 @@ export function ProfileOnNavigation({ isFullWidth }: IProps) {
         ellipsis
         ariaLabel="Toggle Profile Menu"
         menuItems={[...constantNavigation, ...constantNavigationMenuItems].map(
-          ({ label, value }) => ({
+          ({ label, value, systemIcon }) => ({
             id: label,
             label,
+            systemIcon,
             onClick: () => router.push(value),
           })
         )}

diff --git a/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx b/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx
@@ -7,7 +7,6 @@ import {
   SystemLinks,
 } from "shared/types/menu";
 import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
-import { systemIconToSVG } from "shared/constants/Icons";
 import { ChevronRight } from "react-feather";
 import { SYSTEM_COLORS } from "frontend/design-system/theme/system";
 import { Typo } from "frontend/design-system/primitives/Typo";
@@ -16,6 +15,7 @@ import { Stack } from "frontend/design-system/primitives/Stack";
 import { useThemeColorShade } from "frontend/design-system/theme/useTheme";
 import { useNavigationStack } from "frontend/lib/routing/useNavigationStack";
 import { ActionIntegrations } from "shared/types/actions";
+import { SystemIcon } from "frontend/design-system/Icons/System";
 import { PORTAL_SYSTEM_LINK_CONFIG_LINKS } from "./portal";
 
 const SYSTEM_LINKS_CONFIG_MAP: Record<
@@ -71,24 +71,14 @@ const LeftSideNavMenuListAnchor = styled.a<{
   }
 `;
 
-const IconRoot = styled.span<{ $isFullWidth: boolean }>`
-  color: ${SYSTEM_COLORS.white};
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  svg {
-    vertical-align: initial;
-  }
-`;
-
 const LeftSideNavMenu = styled.ul<{}>`
   padding: 0;
   margin-bottom: 0;
 `;
 
 const NavLabel = styled(Typo.XS)<{ $isFullWidth: boolean }>`
   color: ${SYSTEM_COLORS.white};
-  margin-left: 20px;
+  margin-left: 8px;
   transition: all 0.3s;
   ${(props) =>
     !props.$isFullWidth &&
@@ -173,13 +163,8 @@ export function RenderNavigation({
       {navigation.map(({ title, icon, type, link, id, children }) => {
         const isActive = activeItem[depth] === id;
 
-        const iconComponent = (
-          <IconRoot
-            $isFullWidth={isFullWidth}
-            dangerouslySetInnerHTML={{
-              __html: systemIconToSVG(icon, isActive ? 2 : 1),
-            }}
-          />
+        const menuIcon = depth === 1 && (
+          <SystemIcon strokeWidth={isActive ? 2 : 1} icon={icon} size={20} />
         );
 
         return (
@@ -200,7 +185,7 @@ export function RenderNavigation({
                     setActiveItem(depth, isActive ? "" : id);
                   }}
                 >
-                  {iconComponent}
+                  {menuIcon}
                   {isFullWidth && (
                     <Stack justify="space-between" spacing={0} align="center">
                       <NavLabel ellipsis $isFullWidth={isFullWidth}>
@@ -241,7 +226,7 @@ export function RenderNavigation({
                   }
                   hoverColor={getBackgroundColor("primary-color", 45)}
                 >
-                  {icon && iconComponent}
+                  {icon && menuIcon}
                   <NavLabel ellipsis $isFullWidth={isFullWidth}>
                     {title}
                   </NavLabel>

diff --git a/src/frontend/_layouts/app/LayoutImpl/portal/main.ts b/src/frontend/_layouts/app/LayoutImpl/portal/main.ts
@@ -1,11 +1,16 @@
 import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
+import { SystemIconsKeys } from "shared/constants/Icons";
 import { PortalSystemLinks } from "shared/constants/portal/menu/main";
+import { ILabelValue } from "shared/types/options";
 
-export const useConstantNavigationMenuItems = () => {
+export const useConstantNavigationMenuItems = (): Array<
+  ILabelValue & { systemIcon: SystemIconsKeys }
+> => {
   return [
     {
       label: "Menu Settings",
       value: NAVIGATION_LINKS.SETTINGS.MENU,
+      systemIcon: "List",
     },
   ];
 };

diff --git a/src/frontend/_layouts/app/constant.ts b/src/frontend/_layouts/app/constant.ts
@@ -1,30 +1,36 @@
-import { GitHub, Globe, Twitter, Users } from "react-feather";
+import { SystemIconsKeys } from "shared/constants/Icons";
 
-export const DEMO_LINKS = [
+export const DEMO_LINKS: {
+  id: string;
+  systemIcon: SystemIconsKeys;
+  label: string;
+  description: string;
+  link: string;
+}[] = [
   {
     id: "github",
-    IconComponent: GitHub,
+    systemIcon: "Github",
     label: "Star us on Github",
     description: `Tell us DashPress is a useful project by dropping us a star`,
     link: "https://github.com/dashpresshq/dashpress",
   },
   {
     id: "twitter",
-    IconComponent: Twitter,
+    systemIcon: "Twitter",
     label: "Follow us on Twitter",
     description: `Tweet at @dashpressHQ if you know others will benefit using DashPress`,
     link: "https://twitter.com/dashpressHQ",
   },
   {
-    id: "users",
-    IconComponent: Users,
+    id: "discord",
+    systemIcon: "Discord",
     label: "Join our Discord community",
     description: `Ask your questions here`,
     link: "https://discord.gg/aV6DxwXhzN",
   },
   {
     id: "website",
-    IconComponent: Globe,
+    systemIcon: "Link",
     label: "Visit our website",
     description: `For more links on documentation, roadmap, blog etc`,
     link: "https://dashpress.io",

diff --git a/src/frontend/components/IconInputField/IconInputField.spec.tsx b/src/frontend/components/IconInputField/IconInputField.spec.tsx
@@ -24,7 +24,7 @@ function TestComponent({
 
             <FormButton
               text={() => "Save"}
-              icon="add"
+              systemIcon="Plus"
               isMakingRequest={false}
               disabled={pristine}
             />

diff --git a/src/frontend/components/IconInputField/index.tsx b/src/frontend/components/IconInputField/index.tsx
@@ -21,6 +21,7 @@ export function IconInputField({ value }: { value: string }) {
             input={input}
             rightActions={[
               {
+                systemIcon: "ToggleLeft",
                 label: "Use SVG",
                 action: () => input.onChange(""),
               },
@@ -36,6 +37,7 @@ export function IconInputField({ value }: { value: string }) {
             input={input}
             rightActions={[
               {
+                systemIcon: "ToggleRight",
                 label: "Use Icon",
                 action: () => input.onChange(SystemIconsList[0]),
               },

diff --git a/src/frontend/components/SchemaForm/SchemaForm.spec.tsx b/src/frontend/components/SchemaForm/SchemaForm.spec.tsx
@@ -64,7 +64,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={BASE_FIELDS}
         />
       </ApplicationRoot>
@@ -90,7 +90,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={BASE_FIELDS}
           resetForm
         />
@@ -114,7 +114,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={BASE_FIELDS}
           formExtension={{
             beforeSubmit: "",
@@ -140,7 +140,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={BASE_FIELDS}
           action="custom-action"
           formExtension={{
@@ -169,7 +169,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={BASE_FIELDS}
           formExtension={{
             beforeSubmit: "sm ks ks dsldm sl dm",
@@ -195,7 +195,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={BASE_FIELDS}
           action="custom-action"
           formExtension={{
@@ -223,7 +223,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={BASE_FIELDS}
           action="edit"
           initialValues={{
@@ -259,7 +259,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={{
             ...BASE_FIELDS,
           }}
@@ -290,7 +290,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={{
             ...BASE_FIELDS,
           }}
@@ -321,7 +321,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={{
             ...BASE_FIELDS,
           }}
@@ -353,7 +353,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<IAccount>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={{
             ...BASE_FIELDS,
           }}
@@ -395,7 +395,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<{ name: string }>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={{
             name: {
               type: "text",
@@ -424,7 +424,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<{ hello: string }>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={{
             ...BASE_FIELDS,
             hello: {
@@ -447,7 +447,7 @@ describe("<SchemaForm />", () => {
         <SchemaForm<{ name: string }>
           onSubmit={mockOnSubmit}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={{
             name: {
               type: "text",
@@ -473,7 +473,7 @@ describe("<SchemaForm />", () => {
           onSubmit={jest.fn()}
           onChange={onChangeMock}
           buttonText={buttonText}
-          icon="save"
+          systemIcon="Save"
           fields={{
             ...BASE_FIELDS,
           }}

diff --git a/src/frontend/components/SchemaForm/index.tsx b/src/frontend/components/SchemaForm/index.tsx
@@ -8,10 +8,10 @@ import { ToastService } from "frontend/lib/toast";
 import { resetFormValues } from "frontend/lib/form/utils";
 import { FormButton } from "frontend/design-system/components/Button/FormButton";
 import { userFriendlyCase } from "shared/lib/strings/friendly-case";
-import { ButtonIconTypes } from "frontend/design-system/components/Button/constants";
 import styled from "styled-components";
 import { gridItem, gridRoot } from "frontend/design-system/constants/grid";
 import { GridSpanSizes } from "shared/types/ui";
+import { SystemIconsKeys } from "shared/constants/Icons";
 import { RenderFormInput } from "./_RenderFormInput";
 import { IFormExtension } from "./types";
 import { runFormBeforeSubmit, runFormFieldState } from "./form-run";
@@ -23,7 +23,7 @@ interface IProps<T> {
   initialValues?: Partial<T>;
   buttonText?: (submitting: boolean) => string;
   action?: string;
-  icon: ButtonIconTypes | "no-icon";
+  systemIcon: SystemIconsKeys;
   onChange?: (data: T) => void;
   resetForm?: true;
   formExtension?: Partial<IFormExtension>;
@@ -46,7 +46,7 @@ export function SchemaForm<T extends Record<string, unknown>>({
   onChange,
   buttonText,
   initialValues,
-  icon,
+  systemIcon,
   action,
   formExtension,
   resetForm,
@@ -138,7 +138,7 @@ export function SchemaForm<T extends Record<string, unknown>>({
                 text={buttonText}
                 isMakingRequest={submitting}
                 disabled={pristine}
-                icon={icon === "no-icon" ? undefined : icon}
+                systemIcon={systemIcon}
               />
             )}
           </form>