From abda5c14829412a70b7fdf1de51ad9cc2406324e Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Mon, 11 Nov 2024 00:14:24 +0100 Subject: [PATCH] refactor: switch to `@utrecht/select-combobox-react` --- packages/storybook/package.json | 3 +- .../src/theme-builder/ColorPicker.stories.tsx | 10 +-- .../src/theme-builder/FontFamily.stories.tsx | 18 ++--- pnpm-lock.yaml | 77 +++++++++++++++++++ 4 files changed, 89 insertions(+), 19 deletions(-) diff --git a/packages/storybook/package.json b/packages/storybook/package.json index d6dfab0b8..48ffd25a8 100644 --- 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 index ede6be6ac..cb1b479c6 100644 --- 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: ( <> {String(getTokenValue(token as any))} @@ -27,7 +27,7 @@ const ColorPickerCombobox = ({ tokens, ...restProps }) => { ...restProps, }; - return ; + return ; }; const ColorPickerPoc = ({ tokens }) => { @@ -94,7 +94,7 @@ const ColorPickerPoc = ({ tokens }) => { /> - + ); }; diff --git a/packages/storybook/src/theme-builder/FontFamily.stories.tsx b/packages/storybook/src/theme-builder/FontFamily.stories.tsx index 784d8fa22..e9edaacfd 100644 --- 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:
{fontFamily}
, + children:
{fontFamily}
, }; }), ...restProps, }; - return ; + return ; }; const FontFamilyPoc = ({ tokens }) => { @@ -72,12 +69,7 @@ const FontFamilyPoc = ({ tokens }) => { - + ); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fb9815695..22ad150c3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -351,6 +351,9 @@ importers: '@utrecht/icon': specifier: 1.1.0 version: 1.1.0 + '@utrecht/select-combobox-react': + specifier: 1.0.1 + version: 1.0.1(@babel/runtime@7.25.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@utrecht/web-component-library-stencil': specifier: 1.4.0 version: 1.4.0 @@ -4314,6 +4317,13 @@ packages: '@utrecht/button-link-css@1.1.0': resolution: {integrity: sha512-XW0llqu7Tin9lGuXWHpylGHmthVYAXLkae460G34sKqlPYh7FI9ilzq9KXnuBCJjccQP0AnJNjJtyGJKaOxyBQ==} + '@utrecht/button-react@2.0.1': + resolution: {integrity: sha512-i82z1a96vVFwMCh/m1a88LRn2TZWrifTaP1LP0+R4MdXIfJBfXMwnwzHWi4W1DeVDLMqyiLxCUIXwwsKiSZBxA==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + '@utrecht/calendar-css@1.1.0': resolution: {integrity: sha512-ZPJEWFCC0ObKHppK2f79Vuo6hnc+KcS6qRjAxUYOzjYwtYJp5lw+yjqsBLUgdcqOEMogj9cez6xGF+2gT2kkVw==} @@ -4332,6 +4342,13 @@ packages: '@utrecht/combobox-css@1.2.0': resolution: {integrity: sha512-qlsLpYq1Q0k7QD2MHh1QZxjvKjgCIdDxMQ18YLfScpx9nxUzyj8CEgkPXMk2MIfBHKY5QYIf1LR8otqechg+RA==} + '@utrecht/combobox-react@0.0.2': + resolution: {integrity: sha512-wbmYXqJtIG8exgZ5WlaE15ZacMqNGLVk4n67C20nPoBa2LRB2bJMjhOzkna27h6ULFQ/b/KoN9RRe8Cq3qoNQA==} + peerDependencies: + '@babel/runtime': ^7.23.6 + react: '18' + react-dom: '18' + '@utrecht/component-library-css@4.2.0': resolution: {integrity: sha512-QvN0QEfVF9KJh8WD7gKJPhxMO1Eq8leB/x6h0JdkDrK7iRP+bceQtV74tn3JzkeP5LGZUsYulWXPhb6Hk6NKdw==} @@ -4454,6 +4471,13 @@ packages: '@utrecht/listbox-css@1.1.0': resolution: {integrity: sha512-mX/ECg7kgWc286vK7SxlEtbuBQiEMeJVgZ9mAWtexDv9LD6zdc2RH6JR2dJ4EEtnCAHrey+JOHY2yBtuVLpOag==} + '@utrecht/listbox-react@1.0.2': + resolution: {integrity: sha512-xInqmgHIzKj+YkLjk4m5gRfOcjxzc6sasFiEGZIiKe6fmOub1eRL59d22/gA3pmGqVPTn1C7IRhnPrlRU39mWQ==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + '@utrecht/logo-button-css@1.1.0': resolution: {integrity: sha512-TukvjjrQv7J9/BzNgRmczdkRPjsBLkxoVEfQMCI5GtiU1+Ho+ZqSlEdBPqMQLzasBA21yLkqfVsLNdZHVQOPWQ==} @@ -4508,6 +4532,13 @@ packages: '@utrecht/search-bar-css@1.1.0': resolution: {integrity: sha512-cIq0Gca8DpjlGoBUzF0Lq73tOwzhpNQhTHvUPv/+a9DHqt864A/nBG9F9juiMOqlXa+PmomLzLvAdndz4nTXAg==} + '@utrecht/select-combobox-react@1.0.1': + resolution: {integrity: sha512-DWaAS8TBjwddykR6M28yyYuhMfb5I5oTX8ny0/XHw0H4PyCwYgFjbVKXuM6EzfqyKhozLPwTNt/ht/xUopCN/A==} + peerDependencies: + '@babel/runtime': ^7.23.6 + react: '18' + react-dom: '18' + '@utrecht/separator-css@1.1.0': resolution: {integrity: sha512-nszlcy9AlUaF1rZ7m7TfXwkB7TOuTrlOVQ2eZhSONe67y6uI+5Uushc81/pODfYDPUiqmKXpr5ifE/Lfvvirsg==} @@ -4526,6 +4557,13 @@ packages: '@utrecht/textbox-css@1.2.0': resolution: {integrity: sha512-b7bfn3Vo/iSepcglS1+jGyoUMpSfL0N7Dc0J8HKpAZSm8452I5s3SUHJyCiB/fsbM2F4ZFafwYT5n0rKucKZLQ==} + '@utrecht/textbox-react@1.0.1': + resolution: {integrity: sha512-kJPcxVz2k3fkSbr0RPz/14EF7ktLlLyH83bJl5autWvBYW3fqsIq9ZklIMMf30uErBWVvvdKWrl3KNGUQko5hQ==} + peerDependencies: + '@babel/runtime': ^7.23.6 + react: '18' + react-dom: '18' + '@utrecht/top-task-link-css@1.1.0': resolution: {integrity: sha512-oBzYDd5syw6sQmPlLElx0yq1dPx+4WRP4Xu6I5barqL+B36vcnUgZ2Sb5iBnceCuo8YISFzrrp4BW1cu39aSzA==} @@ -11734,6 +11772,13 @@ snapshots: '@utrecht/button-link-css@1.1.0': {} + '@utrecht/button-react@2.0.1(@babel/runtime@7.25.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.7 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/calendar-css@1.1.0': {} '@utrecht/checkbox-css@1.2.0': {} @@ -11746,6 +11791,13 @@ snapshots: '@utrecht/combobox-css@1.2.0': {} + '@utrecht/combobox-react@0.0.2(@babel/runtime@7.25.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.7 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/component-library-css@4.2.0': {} '@utrecht/component-library-design-tokens@1.0.0': {} @@ -11836,6 +11888,13 @@ snapshots: '@utrecht/listbox-css@1.1.0': {} + '@utrecht/listbox-react@1.0.2(@babel/runtime@7.25.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.7 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/logo-button-css@1.1.0': {} '@utrecht/logo-image-css@1.1.0': {} @@ -11872,6 +11931,17 @@ snapshots: '@utrecht/search-bar-css@1.1.0': {} + '@utrecht/select-combobox-react@1.0.1(@babel/runtime@7.25.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.7 + '@utrecht/button-react': 2.0.1(@babel/runtime@7.25.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/combobox-react': 0.0.2(@babel/runtime@7.25.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/listbox-react': 1.0.2(@babel/runtime@7.25.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/textbox-react': 1.0.1(@babel/runtime@7.25.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/separator-css@1.1.0': {} '@utrecht/skip-link-css@1.1.0': {} @@ -11884,6 +11954,13 @@ snapshots: '@utrecht/textbox-css@1.2.0': {} + '@utrecht/textbox-react@1.0.1(@babel/runtime@7.25.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.7 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/top-task-link-css@1.1.0': {} '@utrecht/top-task-nav-css@1.1.0': {}