fix: switch to new js import

momentum-design · Feb 25, 2025 · d421a38 · d421a38
1 parent f8a6ec4
commit d421a38
Show file tree

Hide file tree

Showing 13 changed files with 21 additions and 94 deletions.
diff --git a/.gitignore b/.gitignore
@@ -150,7 +150,4 @@ charts/es/
 charts/lib/
 charts/css/
 charts/yarn.lock
-.swc
-
-
-config/storybook/public
+.swc
diff --git a/config/storybook/cjs/theme.decorator.jsx b/config/storybook/cjs/theme.decorator.jsx
@@ -18,7 +18,6 @@ const theme = (Story, { globals }) => {
     <ThemeProvider
       id="theme-provider"
       theme={theme}
-      iconUrl="/icons/svg"
       style={{
         backgroundColor: 'var(--mds-color-theme-background-solid-primary-normal)',
         height: '100vh',

diff --git a/config/storybook/esm/theme.decorator.jsx b/config/storybook/esm/theme.decorator.jsx
@@ -18,7 +18,6 @@ const theme = (Story, { globals }) => {
     <ThemeProvider
       id="theme-provider"
       theme={theme}
-      iconUrl="/icons/svg"
       style={{
         backgroundColor: 'var(--mds-color-theme-background-solid-primary-normal)',
         height: '100vh',

diff --git a/config/storybook/generateMain.js b/config/storybook/generateMain.js
@@ -20,7 +20,6 @@ const generateMain = (dir) => {
     typescript: {
       reactDocgen: 'none',
     },
-    staticDirs: ['../public'],
     webpackFinal: (config) => {
       config.resolve.alias['@momentum-ui/react-collaboration'] = path.resolve(
         REPO_ROOT,

diff --git a/config/storybook/src/theme.decorator.jsx b/config/storybook/src/theme.decorator.jsx
@@ -18,9 +18,6 @@ const theme = (Story, { globals }) => {
     <ThemeProvider
       id="theme-provider"
       theme={theme}
-      iconUrl="/icons/svg"
-      iconCacheStrategy="in-memory-cache"
-      iconCacheName="momentum"
       style={{
         backgroundColor: 'var(--mds-color-theme-background-solid-primary-normal)',
         height: '100vh',

diff --git a/package.json b/package.json
@@ -77,8 +77,7 @@
     "storybook:start": "yarn storybook:start:src",
     "storybook:start:docs": "serve ./docs",
     "storybook:start:src": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -c ./config/storybook/src -p 6006",
-    "start": "yarn start:copy:icons && yarn storybook:start",
-    "start:copy:icons": "node ./scripts/copyIconsStorybook.js",
+    "start": "yarn storybook:start",
     "start:components": "yarn storybook:start",
     "start:examples": "yarn examples:start:src",
     "start:watch": "run-p lint:watch test:watch start",
@@ -100,14 +99,14 @@
   "resolutions": {
     "@react-aria/button": "3.4.3",
     "@types/node": "22.7.4",
-    "@momentum-design/icons": "0.9.1"
+    "@momentum-design/icons": "0.10.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@momentum-design/animations": "^0.0.4",
-    "@momentum-design/components": "0.25.3",
+    "@momentum-design/components": "0.27.3",
     "@momentum-design/fonts": "0.0.8",
-    "@momentum-design/icons": "0.9.1",
+    "@momentum-design/icons": "0.10.0",
     "@momentum-design/tokens": "0.1.2",
     "@momentum-ui/design-tokens": "^0.0.63",
     "@momentum-ui/icons": "8.28.4",

diff --git a/scripts/copyIconsStorybook.js b/scripts/copyIconsStorybook.js
diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx
@@ -16,7 +16,6 @@ import {
   ThemeProvider as MdcThemeProvider,
   IconProvider as MdcIconProvider,
 } from '@momentum-design/components/dist/react';
-import { inMemoryCache, webAPIIconsCache } from '@momentum-design/components';
 
 import {
   DEFAULTS,
@@ -27,23 +26,10 @@ import {
 import { Props } from './ThemeProvider.types';
 import './ThemeProvider.style.scss';
 
-interface ThemeProviderExtension {
-  inMemoryCache: typeof inMemoryCache;
-  webAPIIconsCache: typeof webAPIIconsCache;
-}
-
 /**
  * Provides a collection of CSSVariables based on a ThemeToken to all child elements inside of a rendered `<div />` element.
  */
-const ThemeProvider: FC<Props> & ThemeProviderExtension = ({
-  children,
-  id,
-  style,
-  theme,
-  iconUrl,
-  iconCacheName,
-  iconCacheStrategy,
-}: Props) => {
+const ThemeProvider: FC<Props> = ({ children, id, style, theme }: Props) => {
   // TODO: get rid of legacy theme
   const themeClass = `${THEME_CLASS_PREFIX}-${theme || DEFAULTS.THEME}`;
   const themeClassStable = `${THEME_CLASS_PREFIX_STABLE}-${theme || DEFAULTS.THEME}`;
@@ -53,7 +39,7 @@ const ThemeProvider: FC<Props> & ThemeProviderExtension = ({
       themeclass={themeClassStable}
       className={classNames(themeClass, STYLE.typography)}
     >
-      <MdcIconProvider cache-strategy={iconCacheStrategy} cache-name={iconCacheName} url={iconUrl}>
+      <MdcIconProvider>
         <div className={`${STYLE.wrapper} ${STYLE.globals}`} style={style} id={id}>
           {children}
         </div>
@@ -62,7 +48,4 @@ const ThemeProvider: FC<Props> & ThemeProviderExtension = ({
   );
 };
 
-ThemeProvider.inMemoryCache = inMemoryCache;
-ThemeProvider.webAPIIconsCache = webAPIIconsCache;
-
 export default ThemeProvider;
diff --git a/src/components/ThemeProvider/ThemeProvider.types.ts b/src/components/ThemeProvider/ThemeProvider.types.ts
@@ -49,19 +49,4 @@ export interface Props {
    * The theme name to provide styles from to all child components.
    */
   theme?: ThemeNames | MDTheme;
-
-  /**
-   * The URL from where to fetch icons.
-   */
-  iconUrl?: string;
-
-  /**
-   * The icon cache strategy to use.
-   */
-  iconCacheStrategy?: 'in-memory-cache' | 'web-cache-api';
-
-  /**
-   * The icon cache name to use.
-   */
-  iconCacheName?: string;
 }
diff --git a/src/components/ThemeProvider/ThemeProvider.unit.test.tsx b/src/components/ThemeProvider/ThemeProvider.unit.test.tsx
@@ -3,7 +3,6 @@ import { mount } from 'enzyme';
 import ThemeProvider from './ThemeProvider';
 
 import {
-  DEFAULTS,
   STYLE,
   THEME_CLASS_PREFIX,
   THEME_CLASS_PREFIX_STABLE,

diff --git a/src/components/ThemeProvider/ThemeProvider.unit.test.tsx.snap b/src/components/ThemeProvider/ThemeProvider.unit.test.tsx.snap
@@ -12,11 +12,8 @@ exports[`<ThemeProvider /> snapshot should match snapshot 1`] = `
       class="md-theme-darkWebex mds-typography"
       suppressHydrationWarning={true}
     >
-      <IconProvider
-        shouldCache={true}
-      >
+      <IconProvider>
         <mdc-iconprovider
-          shouldCache={true}
           suppressHydrationWarning={true}
         >
           <div
@@ -45,11 +42,8 @@ exports[`<ThemeProvider /> snapshot should match snapshot with style 1`] = `
       class="md-theme-darkWebex mds-typography"
       suppressHydrationWarning={true}
     >
-      <IconProvider
-        shouldCache={true}
-      >
+      <IconProvider>
         <mdc-iconprovider
-          shouldCache={true}
           suppressHydrationWarning={true}
         >
           <div

diff --git a/src/legacy/Lightbox/tests/index.spec.js.snap b/src/legacy/Lightbox/tests/index.spec.js.snap
@@ -72,9 +72,7 @@ exports[`tests for <Lightbox /> should match SnapShot 1`] = `
                 <mdc-themeprovider
                   class="md-theme-darkWebex mds-typography"
                 >
-                  <mdc-iconprovider
-                    shouldcache="true"
-                  >
+                  <mdc-iconprovider>
                     <div
                       class="md-theme-provider-wrapper md-theme-provider-globals"
                     >
@@ -303,11 +301,8 @@ exports[`tests for <Lightbox /> should match SnapShot 1`] = `
                       class="md-theme-darkWebex mds-typography"
                       suppressHydrationWarning={true}
                     >
-                      <IconProvider
-                        shouldCache={true}
-                      >
+                      <IconProvider>
                         <mdc-iconprovider
-                          shouldCache={true}
                           suppressHydrationWarning={true}
                         >
                           <div

diff --git a/yarn.lock b/yarn.lock
@@ -2876,9 +2876,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@momentum-design/components@npm:0.25.3":
-  version: 0.25.3
-  resolution: "@momentum-design/components@npm:0.25.3"
+"@momentum-design/components@npm:0.27.3":
+  version: 0.27.3
+  resolution: "@momentum-design/components@npm:0.27.3"
   dependencies:
     "@lit/context": ^1.1.2
     "@lit/react": ^1.0.5
@@ -2888,7 +2888,7 @@ __metadata:
     "@tanstack/lit-virtual": ^3.11.3
     lit: ^3.2.0
     uuid: ^11.0.5
-  checksum: 6f7bc6581a39f7c9fdd9d635401ed154e6447935a7440984f9bcc77680e8328ffc6e945bce4e21a2c4387f04565a73d84bf82c3af2a78449c811d839791d1870
+  checksum: 7ae448142896cf89d8904e0a3d47ecb9f1e56582c4e0927945898064e50534fd34e92b6c48f047da99eb235a85406a8df9c3cac4b3e97a983b5ae0bab395c51a
   languageName: node
   linkType: hard
 
@@ -2906,10 +2906,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@momentum-design/icons@npm:0.9.1":
-  version: 0.9.1
-  resolution: "@momentum-design/icons@npm:0.9.1"
-  checksum: 8aedbad85e5e1c72f794f3f656ab1a5125dee31078c3c13d755da36eeddf9f19656cc6d366ab482ffcc8eb6edf893b825d8107469ad80b98e56b3aa7bc0f3fd5
+"@momentum-design/icons@npm:0.10.0":
+  version: 0.10.0
+  resolution: "@momentum-design/icons@npm:0.10.0"
+  checksum: 9695f817a4bebc88428a72201ae0d10bab18e279bf479142775f1b6bb0a3ddb36b4068940eedc81a98ae8a9d41ccfe8ef2c458f0910c24f314f76d22688430de
   languageName: node
   linkType: hard
 
@@ -2964,9 +2964,9 @@ __metadata:
     "@commitlint/config-conventional": ^12.0.1
     "@hot-loader/react-dom": ~16.8.0
     "@momentum-design/animations": ^0.0.4
-    "@momentum-design/components": 0.25.3
+    "@momentum-design/components": 0.27.3
     "@momentum-design/fonts": 0.0.8
-    "@momentum-design/icons": 0.9.1
+    "@momentum-design/icons": 0.10.0
     "@momentum-design/tokens": 0.1.2
     "@momentum-ui/design-tokens": ^0.0.63
     "@momentum-ui/icons": 8.28.4