chore(monorepo): 🤖 make "assets" as package icons

.github/workflows/build-health-checkup.yml

@@ -25,6 +25,10 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Build icons package
+        working-directory: packages/icons
+        run: yarn build
+
       - name: Build
         working-directory: packages/click-ui
         run: yarn build

.github/workflows/chromatic-deployment.yml

@@ -24,6 +24,10 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Build icons package
+        working-directory: packages/icons
+        run: yarn build
+
       - name: Publish to Chromatic
         uses: chromaui/action@latest
         with:

.github/workflows/code-quality.yml

@@ -22,6 +22,10 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Build icons package
+        working-directory: packages/icons
+        run: yarn build
+
       - name: Typecheck
         working-directory: packages/click-ui
         run: yarn typecheck

.github/workflows/publish.yml

@@ -89,6 +89,9 @@ jobs:
         run: corepack enable
       - name: Install dependencies
         run: yarn install --immutable
+      - name: Build icons package
+        working-directory: packages/icons
+        run: yarn build
       - run: yarn test
         working-directory: packages/click-ui
       - run: yarn build

.github/workflows/release-publisher.yml

@@ -119,6 +119,11 @@ jobs:
         if: steps.verify-merge.outputs.is_release == 'true'
         run: yarn install --frozen-lockfile
 
+      - name: Build icons package
+        if: steps.verify-merge.outputs.is_release == 'true'
+        working-directory: packages/icons
+        run: yarn build
+
       - name: Build package
         if: steps.verify-merge.outputs.is_release == 'true'
         working-directory: packages/click-ui

.github/workflows/storybook-vercel.yml

@@ -46,6 +46,10 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Build icons package
+        working-directory: packages/icons
+        run: yarn build
+
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
 

.github/workflows/unit-tests.yml

@@ -23,6 +23,10 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Build icons package
+        working-directory: packages/icons
+        run: yarn build
+
       - name: unit tests
         working-directory: packages/click-ui
         run: yarn test

packages/click-ui/package.json

@@ -392,6 +392,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@clickhouse/icons": "workspace:^",
     "@h6s/calendar": "2.0.1",
     "@radix-ui/react-accordion": "1.2.12",
     "@radix-ui/react-avatar": "1.1.1",

packages/click-ui/src/components/Assets/Flags/system/Flag.tsx

@@ -2,21 +2,22 @@
 import { useTheme } from 'styled-components';
 import { getFallbackThemeName } from '@/theme/theme.utils';
 import { SvgImageElement } from '@/components/Icon/SvgImageElement';
-import { FlagName, FlagProps } from './types';
 import {
+  FlagsLight,
+  FlagsDark,
   createAssetResolver,
+  type FlagName,
+  type FlagProps,
   type AssetAlias,
   type AssetDeprecatedName,
-} from '@/components/Assets/config';
-import FlagsDark from './FlagsDark';
-import FlagsLight from './FlagsLight';
+} from '@clickhouse/icons';
 
 const resolveFlagName = createAssetResolver<FlagName>();
 
 export { resolveFlagName };
 
 export interface FlagPropsWithAliases extends Omit<FlagProps, 'name'> {
   name: FlagName | AssetAlias | AssetDeprecatedName;
 }
 
 const Flag = ({ name, theme, size, ...props }: FlagPropsWithAliases) => {

packages/click-ui/src/components/Assets/Icons/system/Icon.tsx

@@ -2,21 +2,22 @@
 import { useTheme } from 'styled-components';
 import { getFallbackThemeName } from '@/theme/theme.utils';
 import { SvgImageElement } from '@/components/Icon/SvgImageElement';
-import { IconName, IconProps } from './types';
 import {
+  IconsLight,
+  IconsDark,
   createAssetResolver,
+  type IconName,
+  type IconProps,
   type AssetAlias,
   type AssetDeprecatedName,
-} from '@/components/Assets/config';
-import IconsDark from './IconsDark';
-import IconsLight from './IconsLight';
+} from '@clickhouse/icons';
 
 const resolveIconName = createAssetResolver<IconName>();
 
 export { resolveIconName };
 
 export interface IconPropsWithAliases extends Omit<IconProps, 'name'> {
   name: IconName | AssetAlias | AssetDeprecatedName;
 }
 
 const Icon = ({ name, theme, size, ...props }: IconPropsWithAliases) => {

packages/click-ui/src/components/Assets/Logos/system/Logo.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Logo } from './Logo';
-import LogosLight from './LogosLight';
+import { LogosLight } from '@clickhouse/icons';
 
 const meta: Meta<typeof Logo> = {
   component: Logo,

packages/click-ui/src/components/Assets/Logos/system/Logo.tsx

@@ -2,21 +2,22 @@
 import { useTheme } from 'styled-components';
 import { getFallbackThemeName } from '@/theme/theme.utils';
 import { SvgImageElement } from '@/components/Icon/SvgImageElement';
-import { LogoName, LogoProps } from './types';
 import {
+  LogosLight,
+  LogosDark,
   createAssetResolver,
+  type LogoName,
+  type LogoProps,
   type AssetAlias,
   type AssetDeprecatedName,
-} from '@/components/Assets/config';
-import LogosDark from './LogosDark';
-import LogosLight from './LogosLight';
+} from '@clickhouse/icons';
 
 const resolveLogoName = createAssetResolver<LogoName>();
 
 export { resolveLogoName };
 
 export interface LogoPropsWithAliases extends Omit<LogoProps, 'name'> {
   name: LogoName | AssetAlias | AssetDeprecatedName;
 }
 
 const Logo = ({ name, theme, size, ...props }: LogoPropsWithAliases) => {

packages/click-ui/src/components/Assets/Payments/system/Payment.tsx

@@ -2,21 +2,22 @@
 import { useTheme } from 'styled-components';
 import { getFallbackThemeName } from '@/theme/theme.utils';
 import { SvgImageElement } from '@/components/Icon/SvgImageElement';
-import { PaymentName, PaymentProps } from './types';
 import {
+  PaymentsLight,
+  PaymentsDark,
   createAssetResolver,
+  type PaymentName,
+  type PaymentProps,
   type AssetAlias,
   type AssetDeprecatedName,
-} from '@/components/Assets/config';
-import PaymentsDark from './PaymentsDark';
-import PaymentsLight from './PaymentsLight';
+} from '@clickhouse/icons';
 
 const resolvePaymentName = createAssetResolver<PaymentName>();
 
 export { resolvePaymentName };
 
 export interface PaymentPropsWithAliases extends Omit<PaymentProps, 'name'> {
   name: PaymentName | AssetAlias | AssetDeprecatedName;
 }
 
 const Payment = ({ name, theme, size, ...props }: PaymentPropsWithAliases) => {

packages/click-ui/src/components/ContextMenu/ContextMenu.tsx

@@ -5,7 +5,7 @@
 import { Icon } from '@/components/Icon';
 import type { IconName } from '@/components/Icon';
 import { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';
-import Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';
+import { Popover_Arrow } from '@clickhouse/icons';
 import { IconWrapper } from '@/components/IconWrapper/IconWrapper';
 import { useInputModality } from '@/hooks/internal';
 import type { ArrowProps, ContextMenuItemProps } from './ContextMenu.types';
@@ -123,9 +123,9 @@
   showArrow,
   // TODO: remove deprecated side and align
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   side,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   align,
   ...props
 }: ContextMenuContentProps | ContextMenuSubContentProps) => {
   const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;

packages/click-ui/src/components/Dropdown/Dropdown.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { styled } from 'styled-components';
 import { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';
 import { useInputModality } from '@/hooks/internal';
-import Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';
+import { Popover_Arrow } from '@clickhouse/icons';
 import { IconWrapper } from '@/components/IconWrapper';
 import { Icon } from '@/components/Icon';
 import type { IconName } from '@/components/Icon';

packages/click-ui/src/components/HoverCard/HoverCard.tsx

@@ -2,7 +2,7 @@ import * as RadixHoverCard from '@radix-ui/react-hover-card';
 import { ReactNode } from 'react';
 import { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';
 import { styled } from 'styled-components';
-import Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';
+import { Popover_Arrow } from '@clickhouse/icons';
 
 export interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {
   showArrow?: boolean;

packages/click-ui/src/components/Icon/Icon.stories.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import LogosLight from '@/components/Assets/Logos/system/LogosLight';
-import FlagsLight from '@/components/Assets/Flags/system/FlagsLight';
-import PaymentsLight from '@/components/Assets/Payments/system/PaymentsLight';
+import { LogosLight, FlagsLight, PaymentsLight } from '@clickhouse/icons';
 import { Icon } from '@/components/Icon';
 import { IconName, IconProps } from '@/components/Icon/Icon.types';
 import { ICONS_MAP } from '@/components/Icon/IconCommon';

packages/click-ui/src/components/Icon/Icon.tsx

@@ -3,14 +3,16 @@ import type { AssetSize } from '@/types';
 import { IconName, IconProps, IconState, ImageType } from './Icon.types';
 import { ICONS_MAP } from '@/components/Icon/IconCommon';
 import { Flag } from '@/components/Assets/Flags/system/Flag';
-import FlagsLight from '@/components/Assets/Flags/system/FlagsLight';
-import { FlagName } from '@/components/Assets/Flags/system/types';
 import { Logo } from '@/components/Assets/Logos/system/Logo';
-import LogosLight from '@/components/Assets/Logos/system/LogosLight';
-import { LogoName } from '@/components/Assets/Logos/system/types';
 import { Payment } from '@/components/Assets/Payments/system/Payment';
-import { PaymentName } from '@/components/Assets/Payments/system/types';
-import PaymentsLight from '@/components/Assets/Payments/system/PaymentsLight';
+import {
+  FlagsLight,
+  LogosLight,
+  PaymentsLight,
+  type FlagName,
+  type LogoName,
+  type PaymentName,
+} from '@clickhouse/icons';
 
 const SVGIcon = ({
   name,

packages/click-ui/src/components/Icon/Icon.types.ts

@@ -1,7 +1,12 @@
 import { SVGAttributes } from 'react';
-import { LogoProps, LogoName } from '@/components/Assets/Logos/system/types';
-import { FlagName, FlagProps } from '@/components/Assets/Flags/system/types';
-import { PaymentProps, PaymentName } from '@/components/Assets/Payments/system/types';
+import type {
+  LogoProps,
+  LogoName,
+  FlagName,
+  FlagProps,
+  PaymentProps,
+  PaymentName,
+} from '@clickhouse/icons';
 import type { AssetSize } from '@/types';
 import { ICON_NAMES } from './IconCommon';
 

packages/click-ui/src/components/Icon/IconCommon.tsx

@@ -1,4 +1,4 @@
-import IconsLight from '@/components/Assets/Icons/system/IconsLight';
+import { IconsLight } from '@clickhouse/icons';
 
 export const ICON_NAMES = Object.keys(IconsLight) as (keyof typeof IconsLight)[];
 

packages/click-ui/src/components/Popover/Popover.tsx

@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 import { ReactNode } from 'react';
 import { Icon } from '@/components/Icon';
 import { EmptyButton } from '@/components/EmptyButton';
-import Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';
+import { Popover_Arrow } from '@clickhouse/icons';
 
 export const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {
   return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;

packages/click-ui/src/index.ts

@@ -25,9 +25,37 @@ export type { AlertProps } from './components/Alert';
 // Assets (Flags, Logos, Icons)
 export { Flag as Flags } from './components/Assets/Flags/system/Flag';
 export { Logo } from './components/Assets/Logos/system/Logo';
-export { User as ProfileIcon } from './components/Assets/Icons/User';
-export type { FlagName, FlagProps } from './components/Assets/Flags/system/types';
-export type { LogoName, LogoProps } from './components/Assets/Logos/system/types';
+export type {
+  FlagName,
+  FlagProps,
+  LogoName,
+  LogoProps,
+  IconName,
+  PaymentName,
+  PaymentProps,
+} from '@clickhouse/icons';
+
+// Re-export from @clickhouse/icons
+export {
+  IconsLight,
+  IconsDark,
+  LogosLight,
+  LogosDark,
+  FlagsLight,
+  FlagsDark,
+  PaymentsLight,
+  PaymentsDark,
+  resolveAssetName,
+  createAssetResolver,
+  ASSET_NAME_MAPPINGS,
+} from '@clickhouse/icons';
+export type {
+  ThemeName,
+  AssetSize,
+  SVGAssetProps,
+  AssetAlias,
+  AssetDeprecatedName,
+} from '@clickhouse/icons';
 
 // AutoComplete
 export { AutoComplete } from './components/AutoComplete';
@@ -164,7 +192,7 @@ export { HoverCard } from './components/HoverCard';
 export { Icon } from './components/Icon';
 export { IconButton } from './components/IconButton';
 export type { IconButtonProps } from './components/IconButton';
-export type { IconName, ImageName } from './components/Icon/Icon.types';
+export type { ImageName } from './components/Icon/Icon.types';
 
 // Label & Link
 export { Label } from './components/Label';
@@ -299,7 +327,7 @@ export { ClickUIProvider, ThemeProvider } from './providers';
 // ================================================
 
 export { THEMES, themes } from './theme/theme.core';
-export type { ThemeName, Theme } from './theme/theme.types';
+export type { Theme } from './theme/theme.types';
 export {
   isValidThemeName,
   getFallbackThemeName,
@@ -313,7 +341,7 @@ export type { InitCUIThemeScriptProps } from './theme/InitCUIThemeScript/InitCUI
 // Global Types
 // ================================================
 
-export type { HorizontalDirection, Orientation, States, AssetSize } from './types';
+export type { HorizontalDirection, Orientation, States } from './types';
 
 // ================================================
 // Deprecated Radix UI Types

packages/click-ui/.scripts/js/convert-svg-to-react-component → packages/icons/.scripts/js/convert-svg-to-react-component

@@ -27,28 +27,28 @@ const toPascalCase = (str) => {
 
 const ASSET_TYPES = {
   logos: {
-    dir: path.join(__dirname, '../..', 'src', 'components', 'Assets', 'Logos'),
+    dir: path.join(__dirname, '../..', 'src', 'Logos'),
     typeName: 'LogoName',
     propsTypeName: 'LogoProps',
     registryName: 'LogosLight',
     defaultSize: 64,
   },
   icons: {
-    dir: path.join(__dirname, '../..', 'src', 'components', 'Assets', 'Icons'),
+    dir: path.join(__dirname, '../..', 'src', 'Icons'),
     typeName: 'IconName',
     propsTypeName: 'IconProps',
     registryName: 'IconsLight',
     defaultSize: 24,
   },
   flags: {
-    dir: path.join(__dirname, '../..', 'src', 'components', 'Assets', 'Flags'),
+    dir: path.join(__dirname, '../..', 'src', 'Flags'),
     typeName: 'FlagName',
     propsTypeName: 'FlagProps',
     registryName: 'FlagsLight',
     defaultSize: 30,
   },
   payments: {
-    dir: path.join(__dirname, '../..', 'src', 'components', 'Assets', 'Payments'),
+    dir: path.join(__dirname, '../..', 'src', 'Payments'),
     typeName: 'PaymentName',
     propsTypeName: 'PaymentProps',
     registryName: 'PaymentsLight',
@@ -58,7 +58,10 @@ const ASSET_TYPES = {
 
 const getAssetType = (args) => {
   const typeFlag = args.find(arg => arg && arg.startsWith('--type='));
-
+  if (!typeFlag) {
+    console.error('👹 Oops! --type=<logos|icons|flags|payments> is required');
+    process.exit(1);
+  }
   const type = typeFlag.replace('--type=', '');
 
   if (typeof ASSET_TYPES[type] === 'undefined') {

packages/click-ui/.scripts/js/shared/svg-converter-utils.mjs → packages/icons/.scripts/js/shared/svg-converter-utils.mjs

@@ -50,8 +50,7 @@ export const generateTypesContent = (sortedComponents, config) => {
   const propsName = config.propsTypeName || config.typeName.replace('Name', 'Props');
 
   return `import type { SVGAttributes } from 'react';
-import type { AssetSize } from '@/types';
-import type { ThemeName } from '@/theme/theme.types';
+import type { AssetSize, ThemeName } from '../../types';
 
 export type ${config.typeName} =
 ${names.join('\n')};
@@ -87,7 +86,7 @@ export const generateRegistryContent = (sortedComponents, config, assetFiles, is
 
 ${imports}
 import { ${config.typeName} } from './types';
-import type { SVGAssetProps } from '@/types';
+import type { SVGAssetProps } from '../../types';
 import type { ComponentType } from 'react';
 
 const ${config.registryName}: Record<