@clubmed/trident-ui 1.0.0-alpha.36 → 1.0.0-alpha.37

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # ClubMed React UI components changelog
 
+# [1.0.0-alpha.37](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.0.0-alpha.36...v1.0.0-alpha.37) (2024-04-09)
+
+
+### Bug Fixes
+
+* **icons:** use context to trigger change when icons are loaded ([4774acc](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/4774acc2b2da16bb85ad5ba88fec11e36f1f7a09))
+
 # [1.0.0-alpha.36](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.0.0-alpha.35...v1.0.0-alpha.36) (2024-04-08)
 
 

package/README.md

@@ -114,6 +114,8 @@ import App from './App';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { TridentUIConfigProvider } from '@clubmed/trident-ui';
+import { IconsProvider } from '@clubmed/trident-ui/atoms/icons/contexts/IconsContext.js';
+import Actions from '@clubmed/trident-ui/atoms/icons/svg/Actions';
 
 const baseName = (window as any).basename || '/';
 
@@ -124,7 +126,9 @@ createRoot(document.getElementById('root')!).render(
         locale: 'fr-FR',
       }}
     >
-      <App />
+      <IconsProvider icons={[Actions]}>
+        <App />
+      </IconsProvider>
     </TridentUIConfigProvider>
   </React.StrictMode>,
 );
@@ -164,31 +168,53 @@ By default, no icons provider is set. You have to import a subset icons in your
 Svg mode:
 
 ```tsx
-import '@clubmed/trident-ui/atoms/Icons/svg/Actions'; // load only the Actions subset using SVG mode
+import Actions from '@clubmed/trident-ui/atoms/Icons/svg/Actions'; // load only the Actions subset using SVG mode
+import { Icon } from '@clubmed/trident-ui/atoms/Icons/Icon';
+
+function App() {
+  return (
+    <IconsProvider icons={[Actions]}>
+      <Icon name="ArrowDefaultLeft" />
+    </IconsProvider>
+  );
+}
 ```
 
 Fonts mode:
 
 ```tsx
-import '@clubmed/trident-ui/atoms/Icons/fonts/Actions'; // load the Actions subset
+import Actions from '@clubmed/trident-ui/atoms/Icons/fonts/Actions'; // load the Actions subset
 import '@clubmed/trident-ui/fonts/tui-actions.css'; // load css rules for Actions
+import { Icon } from '@clubmed/trident-ui/atoms/Icons/Icon';
+
+function App() {
+  return (
+    <IconsProvider icons={[Actions]}>
+      <Icon name="ArrowDefaultLeft" />
+    </IconsProvider>
+  );
+}
 ```
 
 You can mix usage of SVG and fonts mode:
 
 ```tsx
-import '@clubmed/trident-ui/atoms/Icons/fonts/Actions'; // load the Actions subset
+import Actions from '@clubmed/trident-ui/atoms/Icons/fonts/Actions'; // load the Actions subset
 import '@clubmed/trident-ui/fonts/tui-actions.css'; // load css rules for Actions
-import '@clubmed/trident-ui/Icons/svg/Brand';
-```
+import Brand from '@clubmed/trident-ui/Icons/svg/Brand';
 
-In this case, Icon component will automatically use the appropriate IconResolver to load and display the icon.
-
-```tsx
-<Icon name="ArrowDefaultLeft" /> // use Font provider
-<Icon name="ClubMed" /> // SVG provider
+function App() {
+  return (
+    <IconsProvider icons={[Actions, Brand]}>
+      <Icon name="ArrowDefaultLeft" />
+      <Icon name="ClubMed" />
+    </IconsProvider>
+  );
+}
 ```
 
+> In this case, Icon component will automatically use the appropriate IconResolver to load and display the icon.
+
 ### Extra configuration for Svg use
 
 If you are using the `SvgUseIconProvider`, you have to instrument your bundler tool to resolve the url of the icons:
@@ -214,24 +240,26 @@ Trident UI provide function to register any external Svg icons (or font) without
 a custom Icon component. Just use `registerSvgIcon` or `registerFontIcon` to add your new icon:
 
 ```tsx
-import { registerSvgIcon } from '@/atoms/Icons/svg';
-registerSvgIcon({
-  name: 'MyCustomIcon',
-  group: 'custom',
-  element: lazy(() => import('./MyCustomIcon.svg?react')),
-  // viewBox: '0 0 30 30', // default '0 0 30 30'
-  // aspectRatio: 1, // default '1'
-  // orientation: 'left' // apply rotation to the icon
-});
-```
+import { resolver } from '@/atoms/Icons/svg/SvgIconResolver';
+
+const CustomIcons = resolver([
+  {
+    name: 'MyCustomIcon',
+    group: 'custom',
+    element: lazy(() => import('./MyCustomIcon.svg?react')),
+    // viewBox: '0 0 30 30', // default '0 0 30 30'
+    // aspectRatio: 1, // default '1'
+    // orientation: 'left' // apply rotation to the icon
+  },
+]);
 
-```tsx
-registerFontIcon('MyCustomIcon', {
-  group: 'custom',
-  prefix: 'tui-custom', // or icon- if it's a third parties icons library
-  name: 'MyCustomIcon', // classname
-  // orientation: 'left' // apply rotation to the icon
-});
+function App() {
+  return (
+    <IconsProvider icons={[CustomIcons]}>
+      <Icon name="MyCustomIcon" />
+    </IconsProvider>
+  );
+}
 ```
 
 ### Generate fonts from icons (dev)

package/atoms/Icons/Icon.js

@@ -1,12 +1,13 @@
-import { jsx as e } from "react/jsx-runtime";
-import { getIcon as i } from "./IconsResolver.js";
-function f(n) {
-  const o = i(n.name, n.type);
+import { jsx as s } from "react/jsx-runtime";
+import { c as t } from "../../index-Cu0xwYjD.js";
+import { useIcon as e } from "./hooks/useIcon.js";
+function l(n) {
+  const o = e(n.name, n.type);
   if (o === void 0)
     return null;
-  const { component: t, ...c } = o;
-  return /* @__PURE__ */ e(t, { ...n, ...c });
+  const { component: m, ...c } = o;
+  return /* @__PURE__ */ s(m, { ...n, ...c, className: t(c.className, n.className) });
 }
 export {
-  f as Icon
+  l as Icon
 };

package/atoms/Icons/IconsResolver.d.ts

@@ -1,47 +1,8 @@
-import { FunctionComponent } from 'react';
-import type { CSS, Interpolation, SpringValue } from '@react-spring/web';
-import { IconOrientationProps } from './hooks/useIconOrientation.js';
-export interface IconProps extends IconOrientationProps {
-    name: string;
-    type?: string;
-    /**
-     * Width of the icon
-     */
-    width?: string | null;
-    /**
-     * Color
-     */
-    color?: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Additional styles
-     */
-    style?: {
-        [key: string]: string | number | SpringValue<string> | SpringValue<number> | Interpolation<string, string> | CSS.Properties;
-    };
-}
-export type IconResolverProps<Props extends IconProps = IconProps> = Props & {
-    name: string;
-    group?: string;
-    withOrientation?: boolean;
-    component: FunctionComponent<Props>;
-};
-export type IconsRegistryValue<Props extends IconProps = IconProps> = IconResolverProps<Props> & {
-    key: string;
-};
-/**
- * Register an icon in the registry
- */
-export declare function registerIcon<Props extends IconProps = IconProps>(props: IconResolverProps<Props>): void;
+import { IconProps, IconResolverProps } from './contexts/IconsContext.js';
+export * from './contexts/IconsContext.js';
 /**
  * create function to register multiple icons at once.
  * It generates also the orientation for each icon if withOrientation is true
- * @param register
+ * @param resolver
  */
-export declare function registerIconsFactory<Props extends IconProps = IconProps>(register: (props: Omit<IconResolverProps<Props>, 'component'>) => void): (group: string, icons: Omit<IconResolverProps<Props>, 'component'>[]) => void;
-export declare function getIcon<Props extends IconProps = IconProps>(key: string, type?: string): IconsRegistryValue<Props> | undefined;
-export declare function getIcons(type: string): IconsRegistryValue<IconProps>[];
-export declare function getIconsByType(type: string): Map<string, IconsRegistryValue>;
+export declare function resolverIconsFactory<Props extends IconProps = IconProps>(resolver: (props: Omit<IconResolverProps<Props>, 'component'>) => IconResolverProps<Props>): (group: string, icons: Omit<IconResolverProps<Props>, 'component'>[]) => IconResolverProps<Props>[];

package/atoms/Icons/IconsResolver.js

@@ -1,42 +1,19 @@
 import { ORIENTATIONS as a } from "./hooks/useIconOrientation.js";
-const o = /* @__PURE__ */ new Map();
-function I(t) {
-  const e = t.type || "default", n = c(e) || /* @__PURE__ */ new Map();
-  o.set(e, n);
-  const r = t.name + f(t.orientation);
-  n.set(r, { ...t, type: e, key: r });
-}
-function l(t) {
-  return (e, n) => {
-    n.flatMap(({ name: r, withOrientation: s, ...i }) => (s ? Object.keys(a) : [""]).map((u) => ({
-      ...i,
-      name: r,
-      orientation: u
-    }))).forEach((r) => t({
-      ...r,
-      group: e
-    }));
-  };
-}
-function m(t, e = "default") {
-  e === "default" && (e = o.keys().next().value);
-  const n = c(e);
-  return n == null ? void 0 : n.get(t);
-}
-function p(t) {
-  const e = c(t);
-  return e ? [...e.values()] : [];
-}
-function c(t) {
-  return o.get(t);
-}
-function f(t) {
-  return t ? t.charAt(0).toUpperCase() + t.slice(1) : "";
+import { IconTypesRegistry as f, IconsContext as y, IconsProvider as l, loadIcons as x } from "./contexts/IconsContext.js";
+function I(r) {
+  return (t, n) => n.flatMap(({ name: o, withOrientation: e, ...s }) => (e ? Object.keys(a) : [""]).map((c) => ({
+    ...s,
+    name: o,
+    orientation: c
+  }))).map((o) => r({
+    ...o,
+    group: t
+  }));
 }
 export {
-  m as getIcon,
-  p as getIcons,
-  c as getIconsByType,
-  I as registerIcon,
-  l as registerIconsFactory
+  f as IconTypesRegistry,
+  y as IconsContext,
+  l as IconsProvider,
+  x as loadIcons,
+  I as resolverIconsFactory
 };

package/atoms/Icons/contexts/IconsContext.d.ts

@@ -0,0 +1,43 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+import { IconOrientationProps } from '../hooks/useIconOrientation.js';
+import type { CSS, Interpolation, SpringValue } from '@react-spring/web';
+export interface IconProps extends IconOrientationProps {
+    name: string;
+    type?: string;
+    /**
+     * Width of the icon
+     */
+    width?: string | null;
+    /**
+     * Color
+     */
+    color?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Additional styles
+     */
+    style?: {
+        [key: string]: string | number | SpringValue<string> | SpringValue<number> | Interpolation<string, string> | CSS.Properties;
+    };
+}
+export type IconsRegistryValue<Props extends IconProps = IconProps> = IconResolverProps<Props> & {
+    key: string;
+};
+export type IconResolverProps<Props extends IconProps = IconProps> = Props & {
+    name: string;
+    group?: string;
+    withOrientation?: boolean;
+    component: FunctionComponent<Props>;
+};
+export declare const IconTypesRegistry: Map<string, Map<string, IconsRegistryValue<IconProps>>>;
+export declare function loadIcons<Props extends IconProps = IconProps>(icons: IconResolverProps<Props>[] | IconResolverProps<Props>[][]): Map<string, Map<string, IconsRegistryValue<IconProps>>>;
+export declare const IconsContext: import("react").Context<{
+    container: Map<string, Map<string, IconsRegistryValue>>;
+    updateContainer: (_: IconResolverProps[] | IconResolverProps[][]) => void;
+}>;
+export declare function IconsProvider<Props extends IconProps = IconProps>({ icons, children, }: PropsWithChildren<{
+    icons: IconResolverProps<Props>[] | IconResolverProps<Props>[][];
+}>): import("react/jsx-runtime").JSX.Element;

package/atoms/Icons/contexts/IconsContext.js

@@ -0,0 +1,46 @@
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as s, useState as u } from "react";
+const r = /* @__PURE__ */ new Map();
+function f(t) {
+  return t ? t.charAt(0).toUpperCase() + t.slice(1) : "";
+}
+function d(t) {
+  const e = t.type || "default", n = r.get(e) || /* @__PURE__ */ new Map();
+  r.set(e, n);
+  const o = t.name + f(t.orientation);
+  n.set(o, { ...t, type: e, key: o });
+}
+function c(t) {
+  return t.flat().forEach((e) => {
+    d(e);
+  }), r;
+}
+const p = s({
+  container: r,
+  updateContainer: () => {
+  }
+});
+function l({
+  icons: t,
+  children: e
+}) {
+  const [n, o] = u(() => c(t));
+  return /* @__PURE__ */ i(
+    p.Provider,
+    {
+      value: {
+        container: n,
+        updateContainer: (a) => {
+          o(c(a));
+        }
+      },
+      children: e
+    }
+  );
+}
+export {
+  r as IconTypesRegistry,
+  p as IconsContext,
+  l as IconsProvider,
+  c as loadIcons
+};

package/atoms/Icons/fonts/Actions.d.ts

@@ -1 +1,2 @@
-export {};
+declare const _default: import("..").IconResolverProps<import("./FontIcon").FontIconProps>[];
+export default _default;

package/atoms/Icons/fonts/Actions.js

@@ -1,106 +1,112 @@
-import { registerFontIcons as e } from "./FontIconResolver.js";
-e("actions", [
-  {
-    name: "ArrowDefault",
-    withOrientation: !0
-  },
-  {
-    name: "ArrowFilled",
-    withOrientation: !0
-  },
-  {
-    name: "ArrowOutlined",
-    withOrientation: !0
-  },
-  {
-    name: "ArrowTail",
-    withOrientation: !0
-  },
-  {
-    name: "CheckDefault"
-  },
-  {
-    name: "CheckFilled"
-  },
-  {
-    name: "CheckOutlined"
-  },
-  {
-    name: "Clipboard"
-  },
-  {
-    name: "Compare"
-  },
-  {
-    name: "CrossDefault"
-  },
-  {
-    name: "CrossFilled"
-  },
-  {
-    name: "CrossOutlined"
-  },
-  {
-    name: "Delete"
-  },
-  {
-    name: "Download"
-  },
-  {
-    name: "Edit"
-  },
-  {
-    name: "Error"
-  },
-  {
-    name: "Expand"
-  },
-  {
-    name: "HeartFilled"
-  },
-  {
-    name: "HeartOutlined"
-  },
-  {
-    name: "Information"
-  },
-  {
-    name: "MinusDefault"
-  },
-  {
-    name: "MinusFilled"
-  },
-  {
-    name: "MinusOutlined"
-  },
-  {
-    name: "New"
-  },
-  {
-    name: "PlusDefault"
-  },
-  {
-    name: "PlusFilled"
-  },
-  {
-    name: "PlusOutlined"
-  },
-  {
-    name: "Reduce"
-  },
-  {
-    name: "Reload"
-  },
-  {
-    name: "Search"
-  },
-  {
-    name: "Share"
-  },
-  {
-    name: "StarFilled"
-  },
-  {
-    name: "StarOutlined"
-  }
-]);
+import { resolver as e } from "./FontIconResolver.js";
+const n = e(
+  "actions",
+  [
+    {
+      name: "ArrowDefault",
+      withOrientation: !0
+    },
+    {
+      name: "ArrowFilled",
+      withOrientation: !0
+    },
+    {
+      name: "ArrowOutlined",
+      withOrientation: !0
+    },
+    {
+      name: "ArrowTail",
+      withOrientation: !0
+    },
+    {
+      name: "CheckDefault"
+    },
+    {
+      name: "CheckFilled"
+    },
+    {
+      name: "CheckOutlined"
+    },
+    {
+      name: "Clipboard"
+    },
+    {
+      name: "Compare"
+    },
+    {
+      name: "CrossDefault"
+    },
+    {
+      name: "CrossFilled"
+    },
+    {
+      name: "CrossOutlined"
+    },
+    {
+      name: "Delete"
+    },
+    {
+      name: "Download"
+    },
+    {
+      name: "Edit"
+    },
+    {
+      name: "Error"
+    },
+    {
+      name: "Expand"
+    },
+    {
+      name: "HeartFilled"
+    },
+    {
+      name: "HeartOutlined"
+    },
+    {
+      name: "Information"
+    },
+    {
+      name: "MinusDefault"
+    },
+    {
+      name: "MinusFilled"
+    },
+    {
+      name: "MinusOutlined"
+    },
+    {
+      name: "New"
+    },
+    {
+      name: "PlusDefault"
+    },
+    {
+      name: "PlusFilled"
+    },
+    {
+      name: "PlusOutlined"
+    },
+    {
+      name: "Reduce"
+    },
+    {
+      name: "Reload"
+    },
+    {
+      name: "Search"
+    },
+    {
+      name: "Share"
+    },
+    {
+      name: "StarFilled"
+    },
+    {
+      name: "StarOutlined"
+    }
+  ]
+);
+export {
+  n as default
+};

package/atoms/Icons/fonts/Activities.d.ts

@@ -1 +1,2 @@
-export {};
+declare const _default: import("..").IconResolverProps<import("./FontIcon").FontIconProps>[];
+export default _default;