chore: 🤖 support asset aliases with centralised resolver configuration

src/components/Assets/Flags/system/Flag.tsx

@@ -3,27 +3,32 @@
 import { IconSize } from '@/components/Icon/types';
 import { FlagName } from './types';
 export type { FlagName, SVGAssetProps } from './types';
-import { resolveFlagName, DeprecatedFlagName } from './retroactiveNames';
 import FlagsLight from './FlagsLight';
 import FlagsDark from './FlagsDark';
 import { SvgImageElement } from '@/components/commonElement';
-import type { ThemeName } from '@/theme';
+import { type ThemeName, THEMES } from '@/theme';
+import {
+  createAssetResolver,
+  type AssetAlias,
+  type AssetDeprecatedName,
+} from '@/components/Assets/config';
+
+const resolveFlagName = createAssetResolver<FlagName>();
+
+export { resolveFlagName };
 
 export interface FlagProps extends SVGAttributes<SVGElement> {
-  name: FlagName | DeprecatedFlagName;
-  // TODO: The Light and dark theme should not be hard typed
-  // once https://github.com/ClickHouse/click-ui/pull/784
-  // is merged, update it
-  theme?: 'light' | 'dark';
+  name: FlagName | AssetAlias | AssetDeprecatedName;
+  theme?: ThemeName;
   size?: IconSize;
 }
 
 const Flag = ({ name, theme, size, ...props }: FlagProps) => {
   const { name: themeName } = useTheme();
   const resolvedName = resolveFlagName(name);
-  const resolvedTheme: ThemeName = theme ?? (themeName as ThemeName) ?? 'light';
+  const resolvedTheme: ThemeName = theme ?? (themeName as ThemeName) ?? THEMES.Light;
   const Component =
-    resolvedTheme === 'light' ? FlagsLight[resolvedName] : FlagsDark[resolvedName];
+    resolvedTheme === THEMES.Dark ? FlagsLight[resolvedName] : FlagsDark[resolvedName];
 
   if (!Component) {
     return null;

src/components/Assets/Flags/system/FlagsDark.ts

@@ -30,7 +30,7 @@ import { FlagName } from './types';
 import type { SVGAssetProps } from '../../types';
 import type { ComponentType } from 'react';
 
-const FlagsLight: Record<FlagName, ComponentType<SVGAssetProps>> = {
+const FlagsDark: Record<FlagName, ComponentType<SVGAssetProps>> = {
   australia: Australia,
   brazil: Brazil,
   canada: Canada,
@@ -54,4 +54,4 @@ const FlagsLight: Record<FlagName, ComponentType<SVGAssetProps>> = {
   'united-states': United_States,
 };
 
-export default FlagsLight;
+export default FlagsDark;

src/components/Assets/Flags/system/index.ts

@@ -1,6 +1,9 @@
-export { Flag, type FlagProps } from './Flag';
+export {
+  Flag,
+  type FlagProps,
+  resolveFlagName,
+} from './Flag';
 export { default as FlagsLight } from './FlagsLight';
 export { default as FlagsDark } from './FlagsDark';
 export type { FlagName } from './types';
 export type { SVGAssetProps } from '../../types';
-export { resolveFlagName, type DeprecatedFlagName } from './retroactiveNames';

src/components/Assets/Icons/system/Icon.tsx

@@ -2,24 +2,32 @@
 import { useTheme } from 'styled-components';
 import { IconSize } from '@/components/Icon/types';
 import { IconName } from './types';
-import { resolveIconName, DeprecatedIconName } from './retroactiveNames';
 import IconsLight from './IconsLight';
 import IconsDark from './IconsDark';
 import { SvgImageElement } from '@/components/commonElement';
-import type { ThemeName } from '@/theme';
+import { type ThemeName, THEMES } from '@/theme';
+import {
+  createAssetResolver,
+  type AssetAlias,
+  type AssetDeprecatedName,
+} from '@/components/Assets/config';
+
+const resolveIconName = createAssetResolver<IconName>();
+
+export { resolveIconName };
 
 export interface IconProps extends SVGAttributes<SVGElement> {
-  name: IconName | DeprecatedIconName;
-  theme?: 'light' | 'dark';
+  name: IconName | AssetAlias | AssetDeprecatedName;
+  theme?: ThemeName;
   size?: IconSize;
 }
 
 const Icon = ({ name, theme, size, ...props }: IconProps) => {
   const { name: themeName } = useTheme();
   const resolvedName = resolveIconName(name);
-  const resolvedTheme: ThemeName = theme ?? (themeName as ThemeName) ?? 'light';
+  const resolvedTheme: ThemeName = theme ?? (themeName as ThemeName) ?? THEMES.Light;
   const Component =
-    resolvedTheme === 'light' ? IconsLight[resolvedName] : IconsDark[resolvedName];
+    resolvedTheme === THEMES.Light ? IconsLight[resolvedName] : IconsDark[resolvedName];
 
   if (!Component) {
     return null;

src/components/Assets/Icons/system/index.ts

@@ -1,6 +1,9 @@
-export { Icon, type IconProps } from './Icon';
+export {
+  Icon,
+  type IconProps,
+  resolveIconName,
+} from './Icon';
 export { default as IconsLight } from './IconsLight';
 export { default as IconsDark } from './IconsDark';
 export type { IconName } from './types';
 export type { SVGAssetProps } from '../../types';
-export { resolveIconName, type DeprecatedIconName } from './retroactiveNames';