diff --git a/packages/fondue/src/components/RichTextEditor/Plugins/EmojiPlugin/EmojiPicker/EmojiPickerSearchAndClear.tsx b/packages/fondue/src/components/RichTextEditor/Plugins/EmojiPlugin/EmojiPicker/EmojiPickerSearchAndClear.tsx index 6c31be8eb2..36729cd9e8 100644 --- a/packages/fondue/src/components/RichTextEditor/Plugins/EmojiPlugin/EmojiPicker/EmojiPickerSearchAndClear.tsx +++ b/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; diff --git a/packages/fondue/src/components/RichTextEditor/Plugins/MarkPlugin/CodePlugin/CodeButton.tsx b/packages/fondue/src/components/RichTextEditor/Plugins/MarkPlugin/CodePlugin/CodeButton.tsx index 33e970ac08..ec9a734584 100644 --- 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/packages/fondue/src/components/RichTextEditor/Plugins/MarkPlugin/StrikethroughPlugin/StrikethroughButton.tsx b/packages/fondue/src/components/RichTextEditor/Plugins/MarkPlugin/StrikethroughPlugin/StrikethroughButton.tsx index 73439f561c..b6f5b07c6e 100644 --- a/packages/fondue/src/components/RichTextEditor/Plugins/MarkPlugin/StrikethroughPlugin/StrikethroughButton.tsx +++ b/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'; diff --git a/packages/fondue/src/components/RichTextEditor/components/Toolbar/ToolbarButton.tsx b/packages/fondue/src/components/RichTextEditor/components/Toolbar/ToolbarButton.tsx index ffd90395cd..b4fa023a9e 100644 --- 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 index a57f3427d7..c24b20c808 100644 --- 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 index b4d3834201..17fbf1b7f2 100644 --- 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( ])} data-test-id="fondue-tree-item-drag-handle" > - + ); }, diff --git a/packages/fondue/src/components/Tree/TreeItem/TreeItemOverlay.tsx b/packages/fondue/src/components/Tree/TreeItem/TreeItemOverlay.tsx index 73c88ae5e9..4b7b4cac7e 100644 --- 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 = ( ); diff --git a/packages/fondue/src/components/Tree/TreeWithMultiselect.stories.tsx b/packages/fondue/src/components/Tree/TreeWithMultiselect.stories.tsx index b761abb4bd..647fefa9fa 100644 --- 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 deleted file mode 100644 index 8c23b0bb98..0000000000 --- a/packages/fondue/src/foundation/Icon/Icon.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -/* (c) Copyright Frontify Ltd., all rights reserved. */ - -import { type Meta, type StoryFn } from '@storybook/react'; - -import * as AllIcons from './Generated'; -import { IconEnum } from './IconEnum'; -import { type IconProps } from './IconProps'; -import { IconSize } from './IconSize'; - -/** - ### This component is deprecated, please import Icons from the icons package [new Text Input component](/story/icons_icons--default) instead. - */ -export default { - title: 'Foundation/Icon', - args: { - size: IconSize.Size16, - }, - argTypes: { - size: { - options: Object.keys(IconSize), - control: { type: 'select' }, - }, - }, - parameters: { - status: { - type: 'deprecated', - }, - }, -} as Meta; - -export const Icon: StoryFn = (args: IconProps) => ( -
    - {Object.values(IconEnum) - .filter( - (iconName) => - iconName.includes((args?.size || '16').replace('Size', '')) || - !['12', '16', '20', '24', '32'].some((item) => iconName.includes(item)), - ) - .map((iconName) => { - const Icon = AllIcons[`Icon${iconName}`]; - return ( -
  • - - {iconName} -
    • - ); - })} -
-); diff --git a/packages/fondue/vite.config.ts b/packages/fondue/vite.config.ts index fa59d48e90..e1bb83c1a2 100644 --- 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: {