fix: prevent loading barrel export of icons

.changeset/odd-needles-swim.md

@@ -0,0 +1,5 @@
+---
+"@frontify/fondue": patch
+---
+
+fix: prevent loading barrel export of icons

packages/fondue/src/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'>;
 

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';

packages/fondue/src/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';

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/custom1Plugin.tsx

@@ -3,9 +3,12 @@
 import { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/custom2Plugin.tsx

@@ -3,9 +3,12 @@
 import { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/custom3Plugin.tsx

@@ -3,9 +3,12 @@
 import { type PlatePlugin, type PlateRenderElementProps, createPluginFactory } from '@udecode/plate-core';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/heading1Plugin.tsx

@@ -3,9 +3,12 @@
 import { type PlatePlugin, type PlateRenderElementProps, createPluginFactory } from '@udecode/plate-core';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/heading2Plugin.tsx

@@ -3,9 +3,12 @@
 import { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/heading3Plugin.tsx

@@ -3,9 +3,12 @@
 import { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/heading4Plugin.tsx

@@ -3,9 +3,12 @@
 import { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/imageCaptionPlugin.tsx

@@ -3,9 +3,12 @@
 import { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin/utils/getColumnBreakClasses';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/imageTitlePlugin.tsx

@@ -3,9 +3,12 @@
 import { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/paragraphPlugin.tsx

@@ -4,9 +4,12 @@ import { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';
 import { createParagraphPlugin as createPlateParagraphPlugin } from '@udecode/plate-paragraph';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

packages/fondue/src/components/RichTextEditor/Plugins/TextStylePlugin/TextStyles/quotePlugin.tsx

@@ -3,9 +3,12 @@
 import { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';
 import { type CSSProperties } from 'react';
 
+import { defaultStyles } from '@components/RichTextEditor/utils/defaultStyles';
 import { merge } from '@utilities/merge';
 
-import { MarkupElement, Plugin, type PluginProps, defaultStyles, getColumnBreakClasses } from '../../..';
+import { getColumnBreakClasses } from '../../ColumnBreakPlugin';
+import { MarkupElement } from '../../MarkupElement';
+import { Plugin, type PluginProps } from '../../Plugin';
 import { alignmentClassnames } from '../../helper';
 import { type TextStyleRenderElementProps, TextStyles } from '../types';
 

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';

packages/fondue/src/components/ScrollWrapper/ScrollWrapper.tsx

@@ -3,7 +3,8 @@
 import { useFocusRing } from '@react-aria/focus';
 import { type ReactElement, useRef } from 'react';
 
-import { FOCUS_STYLE, merge } from '../..';
+import { FOCUS_STYLE } from '@utilities/focusStyle';
+import { merge } from '@utilities/merge';
 
 import { useScrollWrapper } from './hooks/useScrollWrapper';
 import { ScrollWrapperDirection, type ScrollWrapperProps, scrollWrapperDirections } from './types';

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: {