fix: prevent loading barrel export of icons

Frontify · Jan 10, 2025 · e12af98 · e12af98
1 parent 85c0267
commit e12af98
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 119 deletions.
diff --git a/...c/components/RichTextEditor/Plugins/EmojiPlugin/EmojiPicker/EmojiPickerSearchAndClear.tsx b/...c/components/RichTextEditor/Plugins/EmojiPlugin/EmojiPicker/EmojiPickerSearchAndClear.tsx
@@ -2,7 +2,8 @@
 
 import { type UseEmojiPickerType } from '@udecode/plate-emoji';
 
-import { IconCross20, IconMagnifier16 } from '@foundation/Icon';
+import IconCross20 from '@foundation/Icon/Generated/IconCross20';
+import IconMagnifier16 from '@foundation/Icon/Generated/IconMagnifier16';
 
 export type EmojiPickerSearchAndClearProps = Pick<UseEmojiPickerType, 'i18n' | 'searchValue' | 'clearSearch'>;
 

diff --git a/packages/fondue/src/components/RichTextEditor/Plugins/MarkPlugin/CodePlugin/CodeButton.tsx b/packages/fondue/src/components/RichTextEditor/Plugins/MarkPlugin/CodePlugin/CodeButton.tsx
@@ -4,7 +4,7 @@ import { getPluginType } from '@udecode/plate-core';
 
 import { MarkToolbarButton } from '@components/RichTextEditor/Plugins/MarkPlugin/MarkToolbarButton';
 import { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';
-import { IconTextBrackets16 } from '@foundation/Icon/Generated';
+import IconTextBrackets16 from '@foundation/Icon/Generated/IconTextBrackets16';
 
 import { ButtonWrapper, IconStylingWrapper } from '../../helper';
 import { type PluginButtonProps } from '../../types';

diff --git a/.../components/RichTextEditor/Plugins/MarkPlugin/StrikethroughPlugin/StrikethroughButton.tsx b/.../components/RichTextEditor/Plugins/MarkPlugin/StrikethroughPlugin/StrikethroughButton.tsx
@@ -4,7 +4,7 @@ import { getPluginType } from '@udecode/plate-core';
 
 import { MarkToolbarButton } from '@components/RichTextEditor/Plugins/MarkPlugin/MarkToolbarButton';
 import { getTooltip } from '@components/RichTextEditor/helpers/getTooltip';
-import { IconTextFormatStrikethrough } from '@foundation/Icon/Generated';
+import IconTextFormatStrikethrough from '@foundation/Icon/Generated/IconTextFormatStrikethrough';
 
 import { ButtonWrapper, IconStylingWrapper } from '../../helper';
 import { type PluginButtonProps } from '../../types';

diff --git a/packages/fondue/src/components/RichTextEditor/components/Toolbar/ToolbarButton.tsx b/packages/fondue/src/components/RichTextEditor/components/Toolbar/ToolbarButton.tsx
@@ -3,7 +3,7 @@
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import { type ElementRef, forwardRef } from 'react';
 
-import { IconCaretDown16 } from '@foundation/Icon';
+import IconCaretDown16 from '@foundation/Icon/Generated/IconCaretDown16';
 import { merge } from '@utilities/merge';
 
 import { withTooltip } from './Tooltip';

diff --git a/packages/fondue/src/components/Tree/Tree.stories.tsx b/packages/fondue/src/components/Tree/Tree.stories.tsx
@@ -1,5 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import { IconDocument } from '@frontify/fondue-icons';
 import { action } from '@storybook/addon-actions';
 import { type Meta, type StoryFn } from '@storybook/react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -26,7 +27,6 @@ import {
     useDynamicNavigationMock,
     useNavigationWithLazyLoadedItemsMock,
 } from '@components/Tree/utils';
-import IconDocument from '@foundation/Icon/Generated/IconDocument';
 
 import { Modality } from '../../types';
 

diff --git a/packages/fondue/src/components/Tree/TreeItem/DragHandle.tsx b/packages/fondue/src/components/Tree/TreeItem/DragHandle.tsx
@@ -1,8 +1,8 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import { IconGrabHandle } from '@frontify/fondue-icons';
 import { type ButtonHTMLAttributes, type DetailedHTMLProps, forwardRef } from 'react';
 
-import IconGrabHandle12 from '@foundation/Icon/Generated/IconGrabHandle12';
 import { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';
 import { merge } from '@utilities/merge';
 
@@ -33,7 +33,7 @@ export const DragHandle = forwardRef<HTMLButtonElement, DragHandleProps>(
                 ])}
                 data-test-id="fondue-tree-item-drag-handle"
             >
-                <IconGrabHandle12 />
+                <IconGrabHandle />
             </button>
         );
     },

diff --git a/packages/fondue/src/components/Tree/TreeItem/TreeItemOverlay.tsx b/packages/fondue/src/components/Tree/TreeItem/TreeItemOverlay.tsx
@@ -1,8 +1,8 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import { IconGrabHandle } from '@frontify/fondue-icons';
 import { Children, type ReactNode } from 'react';
 
-import IconGrabHandle12 from '@foundation/Icon/Generated/IconGrabHandle12';
 import { merge } from '@utilities/merge';
 
 import { INDENTATION_WIDTH } from '../helpers';
@@ -37,7 +37,7 @@ export const TreeItemOverlay = ({
 
     const dragHandler = (
         <button tabIndex={-1} className="tw-p-1 tw-touch-none">
-            <IconGrabHandle12 />
+            <IconGrabHandle />
         </button>
     );
 

diff --git a/packages/fondue/src/components/Tree/TreeWithMultiselect.stories.tsx b/packages/fondue/src/components/Tree/TreeWithMultiselect.stories.tsx
@@ -1,5 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import { IconDocument } from '@frontify/fondue-icons';
 import { type Meta } from '@storybook/react';
 import { useEffect, useState } from 'react';
 
@@ -15,7 +16,6 @@ import {
 } from '@components/Tree';
 import { type TreeItemStyling, type TreeNodeWithoutElements, type TreeProps } from '@components/Tree/types';
 import { type TreeItemMockMultiselect, treeItemsMockMultiseclect } from '@components/Tree/utils';
-import IconDocument from '@foundation/Icon/Generated/IconDocument';
 
 import { TreeItemMultiselect } from './TreeItem/TreeItemMultiselect';
 import { getNewSelectedItems } from './helpers';

diff --git a/packages/fondue/src/foundation/Icon/Icon.stories.tsx b/packages/fondue/src/foundation/Icon/Icon.stories.tsx
diff --git a/packages/fondue/vite.config.ts b/packages/fondue/vite.config.ts
@@ -1,8 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import react from '@vitejs/plugin-react';
-import { build } from 'esbuild';
-import { type Plugin, defineConfig } from 'vite';
+import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import tsConfigPaths from 'vite-tsconfig-paths';
 
@@ -18,60 +17,6 @@ export const globals = {
     'react/jsx-runtime': 'react/jsx-runtime',
 };
 
-export const bundleIconsInDevPlugin = (): Plugin => {
-    let command: string;
-    return {
-        name: 'bundle-icons',
-        config(_config, { command: _command }) {
-            command = _command;
-        },
-        async load(id: string) {
-            // Only bundle icons when running the dev server.
-            if (command === 'serve' && id.endsWith('/Icon/Generated/index.ts')) {
-                const { outputFiles } = await build({
-                    absWorkingDir: process.cwd(),
-                    entryPoints: [id],
-                    bundle: true,
-                    write: false,
-                    platform: 'browser',
-                    jsx: 'automatic',
-                    format: 'esm',
-                    plugins: [
-                        {
-                            name: 'externals',
-                            setup(build) {
-                                build.onResolve({ namespace: 'file', filter: /.*/ }, (args) => {
-                                    if (args.kind === 'entry-point') {
-                                        return null;
-                                    }
-
-                                    // If the file is in our icons, use standard resolution.
-                                    if (args.path.startsWith('./Icon')) {
-                                        return null;
-                                    }
-
-                                    // If vendors, mark as external
-                                    return {
-                                        path: args.path,
-                                        external: true,
-                                    };
-                                });
-                            },
-                        },
-                    ],
-                });
-
-                if (!outputFiles || outputFiles.length !== 1) {
-                    return null;
-                }
-
-                return outputFiles[0].text;
-            }
-            return null;
-        },
-    };
-};
-
 export default defineConfig({
     // needs to be defined here, such that it is not undefined in the tests.
     define: {
@@ -82,7 +27,6 @@ export default defineConfig({
         react(),
         tsConfigPaths(),
         dts({ insertTypesEntry: true, rollupTypes: true, exclude: ['**/*.stories.tsx'] }),
-        bundleIconsInDevPlugin(),
     ],
     build: {
         lib: {