feat: add react icons (#1710)

Frontify · Feb 9, 2024 · 9d97ec1 · 9d97ec1
1 parent 0afb3bb
commit 9d97ec1
Show file tree

Hide file tree

Showing 46 changed files with 652 additions and 213 deletions.
diff --git a/.changeset/chilly-ears-heal.md b/.changeset/chilly-ears-heal.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-icons": patch
+---
+
+Generate React components
diff --git a/.github/workflows/docs-pull-requests.yaml b/.github/workflows/docs-pull-requests.yaml
@@ -33,6 +33,9 @@ jobs:
             - name: Install npm dependencies
               run: pnpm i --frozen-lockfile
 
+            - name: Generate React icons
+              run: pnpm --stream --filter {packages/icons} build:generate-react-icons
+
             - name: Contentlayer build
               run: pnpm --stream --filter {docs} build:contentlayer
 
@@ -63,6 +66,9 @@ jobs:
             - name: Install npm dependencies
               run: pnpm i --frozen-lockfile
 
+            - name: Generate React icons
+              run: pnpm --stream --filter {packages/icons} build:generate-react-icons
+
             - name: Contentlayer build
               run: pnpm --stream --filter {docs} build:contentlayer
 

diff --git a/.github/workflows/fondue-pull-requests.yaml b/.github/workflows/fondue-pull-requests.yaml
@@ -38,9 +38,12 @@ jobs:
             - name: Install npm dependencies
               run: pnpm i --frozen-lockfile
 
-            - name: Generate icons
+            - name: Generate (old) icons
               run: pnpm --stream --filter {packages/fondue} generate:icons && pnpm --stream --filter {packages/fondue} generate:componentsEnum
 
+            - name: Generate React icons
+              run: pnpm --stream --filter {packages/icons} build:generate-react-icons
+
             - name: Lint code
               run: pnpm --stream --filter {packages/fondue} --filter {packages/components} --filter {packages/icons} lint
 
@@ -71,6 +74,9 @@ jobs:
             - name: Generate icons
               run: pnpm --stream --filter {packages/fondue} generate:icons && pnpm --stream --filter {packages/fondue} generate:componentsEnum
 
+            - name: Generate React icons
+              run: pnpm --stream --filter {packages/icons} build:generate-react-icons
+
             - name: Typecheck code
               run: pnpm --stream --filter {packages/fondue} --filter {packages/components} --filter {packages/icons} typecheck
 
@@ -118,6 +124,9 @@ jobs:
             - name: Generate icons
               run: pnpm --stream --filter {packages/fondue} generate:icons && pnpm --stream --filter {packages/fondue} generate:componentsEnum
 
+            - name: Generate React icons
+              run: pnpm --stream --filter {packages/icons} build:generate-react-icons
+
             - name: Component Tests
               run: pnpm run --stream --filter {packages/fondue} test --spec $(node ./.github/lib/cypress-matrix.mjs ${{ env.NUMBER_OF_RUNNERS }} ${{ matrix.containers }})
 

diff --git a/docs/.eslintrc b/docs/.eslintrc
@@ -1,7 +1,7 @@
 {
     "root": true,
-    "extends": ["@frontify/eslint-config-react", "plugin:jsx-a11y/recommended"],
-    "plugins": ["jsx-a11y", "notice"],
+    "extends": ["@frontify/eslint-config-react"],
+    "plugins": [ "notice"],
     "settings": {
         "react": {
             "version": "detect",

diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts
@@ -24,49 +24,11 @@ const Component = defineDocumentType(() => ({
     },
 }));
 
-const Icon = defineDocumentType(() => ({
-    name: 'Icon',
-    filePathPattern: '**/*.mdx', // To be changed with the package path
-    contentType: 'mdx',
-    fields: {
-        title: { type: 'string', required: true },
-    },
-    computedFields: {
-        url: {
-            type: 'string',
-            resolve: (doc) => doc._raw.sourceFileDir.toLocaleLowerCase(),
-        },
-        route: {
-            type: 'string',
-            resolve: (doc) => doc._raw.sourceFileDir.toLocaleLowerCase().split('/').at(-1),
-        },
-    },
-}));
-
-const Token = defineDocumentType(() => ({
-    name: 'Token',
-    filePathPattern: '**/*.mdx', // To be changed with the package path
-    contentType: 'mdx',
-    fields: {
-        title: { type: 'string', required: true },
-    },
-    computedFields: {
-        url: {
-            type: 'string',
-            resolve: (doc) => doc._raw.sourceFileDir.toLocaleLowerCase(),
-        },
-        route: {
-            type: 'string',
-            resolve: (doc) => doc._raw.sourceFileDir.toLocaleLowerCase().split('/').at(-1),
-        },
-    },
-}));
-
 const sources: ReturnType<typeof makeSource> = makeSource({
     contentDirPath: '.',
     contentDirInclude: [FONDUE_COMPONENTS_PATH],
     contentDirExclude: [...EXCLUDES, ...EXCLUDES.map((path) => `${FONDUE_COMPONENTS_PATH}/${path}`)],
-    documentTypes: [Component, Icon, Token],
+    documentTypes: [Component],
 });
 
 export default sources;
diff --git a/docs/package.json b/docs/package.json
@@ -18,19 +18,20 @@
     "dependencies": {
         "@frontify/fondue": "workspace:^",
         "@frontify/fondue-components": "workspace:^",
+        "@frontify/fondue-icons": "workspace:^",
         "@frontify/fondue-tokens": "^3.4.0",
         "@tailwindcss/forms": "^0.5.7",
         "mdx-bundler": "^10.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "vike": "^0.4.160",
+        "vike": "^0.4.161",
         "vike-react": "^0.4.4"
     },
     "devDependencies": {
         "@frontify/eslint-config-react": "0.17.0",
-        "@types/node": "^18.19.14",
+        "@types/node": "^18.19.15",
         "@types/react": "^18.2.55",
-        "@types/react-dom": "^18.2.18",
+        "@types/react-dom": "^18.2.19",
         "@vitejs/plugin-react": "^4.2.1",
         "autoprefixer": "^10.4.17",
         "concurrently": "^8.2.2",
@@ -42,6 +43,6 @@
         "prettier": "^3.2.5",
         "tailwindcss": "^3.4.1",
         "typescript": "^5.3.3",
-        "vite": "^5.0.12"
+        "vite": "^5.1.1"
     }
 }
diff --git a/docs/src/pages/+Layout.tsx b/docs/src/pages/+Layout.tsx
@@ -8,7 +8,7 @@ import fondueLogo from '../assets/images/fondue_logo.png';
 export const Layout = ({ children }: { children: ReactNode }) => {
     return (
         <main className="tw-h-dvh tw-flex tw-flex-col">
-            <header className="tw-px-4 tw-flex tw-items-center tw-h-16">
+            <header className="tw-px-4 tw-flex tw-items-center tw-h-16 tw-min-h-[4rem]">
                 <a className="tw-p-1 tw-h-8" href="/">
                     <img className="tw-h-full tw-object-contain" src={fondueLogo} alt="Fondue Logo" />
                 </a>

diff --git a/docs/src/pages/components/+Layout.tsx b/docs/src/pages/components/+Layout.tsx
@@ -21,13 +21,7 @@ export const Layout = ({ children }: { children: ReactNode }) => {
                     </ul>
                 </nav>
 
-                <div className="tw-p-8 tw-w-full tw-flex tw-justify-center">
-                    <div className="tw-max-w-[856px] tw-w-full">{children}</div>
-                </div>
-
-                <aside className="tw-p-8 2xl:tw-flex tw-hidden tw-flex-col tw-w-72 tw-shrink-0">
-                    <span className="tw-text-lg tw-font-bold">Table of content</span>
-                </aside>
+                {children}
             </div>
         </RootLayout>
     );

diff --git a/docs/src/pages/components/+Page.tsx b/docs/src/pages/components/+Page.tsx
@@ -1,20 +1,11 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { usePageContext } from 'vike-react/usePageContext';
-
-import { MdxContent } from '../../components/MdxContent';
-
 export const Page = () => {
-    const { data } = usePageContext();
-
-    if (!data) {
-        return <h1 className="tw-text-3xl tw-font-bold tw-mb-8">Components</h1>;
-    }
-
     return (
-        <>
-            <h1 className="tw-text-3xl tw-font-bold tw-mb-8">{data.component.title}</h1>
-            <MdxContent data={data.component.body.code} />
-        </>
+        <div className="tw-p-8 tw-w-full tw-flex tw-justify-center">
+            <div className="tw-max-w-[856px] tw-w-full">
+                <h1 className="tw-text-3xl tw-font-bold">Components</h1>
+            </div>
+        </div>
     );
 };
diff --git a/docs/src/pages/components/+onBeforePrerenderStart.ts b/docs/src/pages/components/+onBeforePrerenderStart.ts
diff --git a/docs/src/pages/components/+route.ts b/docs/src/pages/components/+route.ts
diff --git a/docs/src/pages/components/@componentId/+Page.tsx b/docs/src/pages/components/@componentId/+Page.tsx
@@ -0,0 +1,27 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { usePageContext } from 'vike-react/usePageContext';
+
+import { MdxContent } from '../../../components/MdxContent';
+
+export const Page = () => {
+    const { data } = usePageContext();
+
+    if (!data) {
+        return <h1 className="tw-text-3xl tw-font-bold tw-mb-8">Components</h1>;
+    }
+
+    return (
+        <>
+            <div className="tw-p-8 tw-w-full tw-flex tw-justify-center">
+                <div className="tw-max-w-[856px] tw-w-full">
+                    <h1 className="tw-text-3xl tw-font-bold tw-mb-8">{data.component.title}</h1>
+                    <MdxContent data={data.component.body.code} />
+                </div>
+            </div>
+            <aside className="tw-p-8 2xl:tw-flex tw-hidden tw-flex-col tw-w-72 tw-shrink-0">
+                <span className="tw-text-lg tw-font-bold">Table of content</span>
+            </aside>
+        </>
+    );
+};
diff --git a/docs/src/pages/components/+data.ts → ...rc/pages/components/@componentId/+data.ts b/docs/src/pages/components/+data.ts → ...rc/pages/components/@componentId/+data.ts
@@ -9,9 +9,7 @@ export type Data = Awaited<ReturnType<typeof data>>;
 export const data = (pageContext: PageContextServer) => {
     const { routeParams } = pageContext;
 
-    const component = allComponents.find((component) => {
-        return component.route === routeParams.pageUrl;
-    });
+    const component = allComponents.find((component) => component.route === routeParams.componentId);
 
     if (!component) {
         return null;

diff --git a/docs/src/pages/components/@componentId/+onBeforePrerenderStart.ts b/docs/src/pages/components/@componentId/+onBeforePrerenderStart.ts
@@ -0,0 +1,7 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { allComponents } from '#contentlayer/generated';
+
+export const onBeforePrerenderStart = (): string[] => {
+    return allComponents.map((component) => `/components/${component.route}`);
+};
diff --git a/docs/src/pages/icons/+Layout.tsx b/docs/src/pages/icons/+Layout.tsx
@@ -0,0 +1,17 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type ReactNode } from 'react';
+
+import { Layout as RootLayout } from '../+Layout';
+
+export const Layout = ({ children }: { children: ReactNode }) => {
+    return (
+        <RootLayout>
+            <div className="tw-h-full tw-flex tw-w-full">
+                <div className="tw-p-8 tw-w-full tw-flex tw-justify-center">
+                    <div className="tw-max-w-[856px] tw-w-full">{children}</div>
+                </div>
+            </div>
+        </RootLayout>
+    );
+};
diff --git a/docs/src/pages/icons/+Page.tsx b/docs/src/pages/icons/+Page.tsx
@@ -1,9 +1,31 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import { icons } from '@frontify/fondue-icons';
+
+import { kebabCase } from '../../utilities/kebabCase';
+
 export const Page = () => {
     return (
         <div className="tw-p-8">
             <h1 className="tw-text-3xl tw-font-bold">Icons</h1>
+
+            <div className="tw-mt-8 tw-gap-8 tw-grid tw-grid-cols-[repeat(auto-fill,minmax(56px,1fr))]">
+                {Object.keys(icons).map((icon) => {
+                    const IconComponent = icons[icon as keyof typeof icons];
+
+                    const iconPath = kebabCase(icon).replace(/^icon-/, '');
+
+                    return (
+                        <a
+                            href={`/icons/${iconPath}`}
+                            key={icon}
+                            className="tw-inline-flex tw-items-center tw-justify-center tw-aspect-square tw-rounded tw-bg-box-neutral hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed"
+                        >
+                            <IconComponent />
+                        </a>
+                    );
+                })}
+            </div>
         </div>
     );
 };
diff --git a/docs/src/pages/icons/@iconId/+Page.tsx b/docs/src/pages/icons/@iconId/+Page.tsx
@@ -0,0 +1,31 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { icons } from '@frontify/fondue-icons';
+
+import { kebabCase } from '../../../utilities/kebabCase';
+
+export const Page = () => {
+    return (
+        <div className="tw-p-8">
+            <h1 className="tw-text-3xl tw-font-bold">Icons</h1>
+
+            <div className="tw-mt-8 tw-gap-8 tw-grid tw-grid-cols-[repeat(auto-fill,minmax(56px,1fr))]">
+                {Object.keys(icons).map((icon) => {
+                    const IconComponent = icons[icon as keyof typeof icons];
+
+                    const iconPath = kebabCase(icon).replace(/^icon-/, '');
+
+                    return (
+                        <a
+                            href={`/icons/${iconPath}`}
+                            key={icon}
+                            className="tw-inline-flex tw-items-center tw-justify-center tw-aspect-square tw-rounded tw-bg-box-neutral hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed"
+                        >
+                            <IconComponent />
+                        </a>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
diff --git a/docs/src/pages/icons/@iconId/+data.ts b/docs/src/pages/icons/@iconId/+data.ts
@@ -0,0 +1,11 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type PageContextServer } from 'vike/types';
+
+export type Data = Awaited<ReturnType<typeof data>>;
+
+export const data = (pageContext: PageContextServer) => {
+    const { routeParams } = pageContext;
+
+    return { iconId: routeParams.iconId };
+};
diff --git a/docs/src/pages/icons/@iconId/+onBeforePrerenderStart.ts b/docs/src/pages/icons/@iconId/+onBeforePrerenderStart.ts
@@ -0,0 +1,11 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { icons } from '@frontify/fondue-icons';
+
+import { kebabCase } from '../../../utilities/kebabCase';
+
+export const onBeforePrerenderStart = () => {
+    const allIcons = Object.keys(icons);
+
+    return allIcons.map((icon) => `/icons/${kebabCase(icon).replace(/^icon-/, '')}`);
+};
diff --git a/docs/src/utilities/kebabCase.ts b/docs/src/utilities/kebabCase.ts
@@ -0,0 +1,5 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const kebabCase = (value: string): string => {
+    return value.replaceAll(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+};
diff --git a/packages/components/.eslintrc b/packages/components/.eslintrc
@@ -1,7 +1,7 @@
 {
     "root": true,
-    "extends": ["@frontify/eslint-config-react", "plugin:jsx-a11y/recommended"],
-    "plugins": ["jsx-a11y", "notice"],
+    "extends": ["@frontify/eslint-config-react"],
+    "plugins": ["notice"],
     "settings": {
         "react": {
             "version": "detect",