refactor: switch to @utrecht/select-combobox-react

nl-design-system · Nov 10, 2024 · abda5c1 · abda5c1
1 parent b01dc86
commit abda5c1
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 19 deletions.
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -59,8 +59,8 @@
     "@nl-design-system-unstable/stedebroec-design-tokens": "workspace:*",
     "@nl-design-system-unstable/theme-switcher": "workspace:*",
     "@nl-design-system-unstable/theme-toolkit": "workspace:*",
-    "@nl-design-system-unstable/tokens-lib": "workspace:*",
     "@nl-design-system-unstable/tilburg-design-tokens": "workspace:*",
+    "@nl-design-system-unstable/tokens-lib": "workspace:*",
     "@nl-design-system-unstable/tubbergen-design-tokens": "workspace:*",
     "@nl-design-system-unstable/venray-design-tokens": "workspace:*",
     "@nl-design-system-unstable/voorbeeld-design-tokens": "workspace:*",
@@ -89,6 +89,7 @@
     "@utrecht/components": "6.2.0",
     "@utrecht/design-tokens": "1.1.0",
     "@utrecht/icon": "1.1.0",
+    "@utrecht/select-combobox-react": "1.0.1",
     "@utrecht/web-component-library-stencil": "1.4.0",
     "clsx": "2.1.1",
     "lodash": "4.17.21",

diff --git a/packages/storybook/src/theme-builder/ColorPicker.stories.tsx b/packages/storybook/src/theme-builder/ColorPicker.stories.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
 import { Meta, StoryObj } from '@storybook/react';
 import purmerendScrapedTokens from './project-wallace-purmerend.tokens.json';
-import { getTokenValue, isDesignToken } from '@nl-design-system-unstable/theme-toolkit/src/design-tokens';
+import { getTokenValue, isDesignToken } from '@nl-design-system-unstable/tokens-lib/src/design-tokens';
 import { ColorSample } from '@utrecht/component-library-react/dist/css-module';
-import { ComboboxStory } from './Combobox';
+import { SelectCombobox } from '@utrecht/select-combobox-react/dist/css';
 import { useId } from 'react';
 
 const ColorPickerCombobox = ({ tokens, ...restProps }) => {
@@ -16,7 +16,7 @@ const ColorPickerCombobox = ({ tokens, ...restProps }) => {
         return {
           selected: index === 1,
           value: String(getTokenValue(token as any)),
-          label: (
+          children: (
             <>
               <ColorSample color={String(getTokenValue(token as any))} />
               {String(getTokenValue(token as any))}
@@ -27,7 +27,7 @@ const ColorPickerCombobox = ({ tokens, ...restProps }) => {
     ...restProps,
   };
 
-  return <ComboboxStory id={props.id || useId()} {...props} />;
+  return <SelectCombobox id={props.id || useId()} {...props} />;
 };
 
 const ColorPickerPoc = ({ tokens }) => {
@@ -94,7 +94,7 @@ const ColorPickerPoc = ({ tokens }) => {
       />
 
       <ColorPickerCombobox tokens={tokens} id="xxasdijdfpi54315jf5" label="basis.link.visited.color" />
-      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54d315jfg5" label="basis.primary.icon.color" expanded />
+      <ColorPickerCombobox tokens={tokens} id="xxasdijfpi54d315jfg5" label="basis.primary.icon.color" />
     </div>
   );
 };

diff --git a/packages/storybook/src/theme-builder/FontFamily.stories.tsx b/packages/storybook/src/theme-builder/FontFamily.stories.tsx
@@ -1,12 +1,10 @@
 /* eslint-disable react/prop-types */
 import { Meta, StoryObj } from '@storybook/react';
 import purmerendScrapedTokens from './project-wallace-purmerend.tokens.json';
-import { getTokenValue, isDesignToken } from '@nl-design-system-unstable/theme-toolkit/src/design-tokens';
+import { getTokenValue, isDesignToken } from '@nl-design-system-unstable/tokens-lib/src/design-tokens';
 // import {} from '@utrecht/component-library-react/dist/css-module';
-import { ComboboxStory } from './Combobox';
+import { SelectCombobox } from '@utrecht/select-combobox-react/dist/css';
 import { useId } from 'react';
-import { Heading } from '@utrecht/component-library-react';
-import { text } from 'stream/consumers';
 
 const projectWallaceWorkaround = (projectWallaceValue) => {
   let value = projectWallaceValue;
@@ -25,7 +23,6 @@ const sortByName = ([, a], [, b]) =>
   stringSort(unquote(projectWallaceWorkaround(getTokenValue(a))), unquote(projectWallaceWorkaround(getTokenValue(b))));
 
 const FontFamilyPickerCombobox = ({ tokens, ...restProps }) => {
-  console.log(Object.entries(tokens).map(unquote(projectWallaceWorkaround(getTokenValue(a))));
   const props = {
     defaultValue: '',
     expanded: false,
@@ -56,13 +53,13 @@ const FontFamilyPickerCombobox = ({ tokens, ...restProps }) => {
         return {
           selected: index === 1,
           value: String(getTokenValue(token as any)),
-          label: <div style={{ fontFamily }}>{fontFamily}</div>,
+          children: <div style={{ fontFamily }}>{fontFamily}</div>,
         };
       }),
     ...restProps,
   };
 
-  return <ComboboxStory id={props.id || useId()} {...props} />;
+  return <SelectCombobox id={props.id || useId()} {...props} />;
 };
 
 const FontFamilyPoc = ({ tokens }) => {
@@ -72,12 +69,7 @@ const FontFamilyPoc = ({ tokens }) => {
 
       <FontFamilyPickerCombobox tokens={tokens} id="xxasdijfpi54315jfg5" label="basis.typography.heading.font-family" />
 
-      <FontFamilyPickerCombobox
-        tokens={tokens}
-        id="xxasdijfpi54315jfg5"
-        label="basis.typography.input.font-family"
-        expanded
-      />
+      <FontFamilyPickerCombobox tokens={tokens} id="xxasdijfpi54315jfg5" label="basis.typography.input.font-family" />
     </div>
   );
 };

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml