Merge pull request #803 from open-formulieren/chore/445-upgrade-utrecht-components

Upgrade to @utrecht/components v7

Author: sergei-maertens

.storybook/decorators.jsx .storybook/decorators.tsx

@@ -1,10 +1,13 @@
+import type {Decorator} from '@storybook/react';
+import {Document} from '@utrecht/component-library-react';
+
 /**
  * Storybook does not have a before/after cleanup cycle, and localStorage would in
  * these situations break story/test isolation.
  *
  * This decorator is applied to every story to reset the storage state.
  */
-export const withClearSessionStorage = Story => {
+export const withClearSessionStorage: Decorator = Story => {
   window.sessionStorage.clear();
   return <Story />;
 };
@@ -17,7 +20,7 @@ export const withClearSessionStorage = Story => {
  * 'e450890a-4166-410e-8d64-0a54ad30ba01'. You can specify another key via parameters
  * or args.
  */
-export const withClearSubmissionLocalStorage = (Story, {args, parameters}) => {
+export const withClearSubmissionLocalStorage: Decorator = (Story, {args, parameters}) => {
   const formId =
     args?.formId ?? parameters?.localStorage?.formId ?? 'e450890a-4166-410e-8d64-0a54ad30ba01';
   window.localStorage.removeItem(formId);
@@ -28,10 +31,13 @@ export const withClearSubmissionLocalStorage = (Story, {args, parameters}) => {
  * This decorator wraps stories so that they are inside a container with the class name "utrecht-document". This is
  * needed so that components inherit the right font.
  */
-export const utrechtDocumentDecorator = Story => {
-  return (
-    <div className="utrecht-document utrecht-document--surface">
-      <Story />
-    </div>
-  );
-};
+export const withUtrechtDocument: Decorator = (Story, {parameters}) => (
+  <Document
+    className="utrecht-document--surface"
+    style={{
+      '--utrecht-space-around': parameters?.utrechtDocument?.spaceAround ?? 0,
+    }}
+  >
+    <Story />
+  </Document>
+);

.storybook/main.mts

@@ -7,6 +7,7 @@ import type {StorybookConfig} from '@storybook/react-vite';
 const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
+    disableWhatsNewNotifications: true,
   },
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [

.storybook/preview.js

@@ -21,9 +21,9 @@ import OFLibrary from 'formio/templates';
 import {withModalDecorator} from 'story-utils/decorators';
 
 import {
-  utrechtDocumentDecorator,
   withClearSessionStorage,
   withClearSubmissionLocalStorage,
+  withUtrechtDocument,
 } from './decorators';
 import {allModes} from './modes.mjs';
 import {reactIntl} from './reactIntl.mjs';
@@ -53,7 +53,7 @@ export default {
     withClearSessionStorage,
     withClearSubmissionLocalStorage,
     withModalDecorator,
-    utrechtDocumentDecorator,
+    withUtrechtDocument,
   ],
   parameters: {
     viewport: {

design-tokens

@@ -30,8 +30,8 @@
     "@floating-ui/react": "^0.27.5",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@open-formulieren/design-tokens": "^0.55.0",
-    "@open-formulieren/formio-renderer": "^0.2.0",
+    "@open-formulieren/design-tokens": "^0.57.0",
+    "@open-formulieren/formio-renderer": "^0.3.0",
     "@open-formulieren/formiojs": "^4.13.14",
     "@open-formulieren/leaflet-tools": "^1.0.0",
     "@sentry/react": "^8.50.0",
@@ -127,7 +127,7 @@
     "@types/react-dom": "^18.3.5",
     "@typescript-eslint/parser": "^8.26.0",
     "@utrecht/component-library-react": "1.0.0-alpha.353",
-    "@utrecht/components": "1.0.0-alpha.565",
+    "@utrecht/components": "^7.4.0",
     "@utrecht/design-tokens": "^2.5.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-istanbul": "^3.0.7",

package-lock.json

@@ -31,10 +31,10 @@ export const MultipleCandidates = {
     const canvas = within(canvasElement);
     await expect(canvas.queryByText('Open Gem')).not.toBeInTheDocument();
     const dropdown = canvas.getByLabelText('Locatie');
-    await userEvent.click(dropdown);
+    dropdown.focus();
     await userEvent.keyboard('[ArrowDown]');
-    await expect(await canvas.findByText('Open Gem')).toBeVisible();
-    await expect(await canvas.findByText('Bahamas')).toBeVisible();
+    expect(await canvas.findByRole('option', {name: 'Open Gem'})).toBeVisible();
+    expect(await canvas.findByRole('option', {name: 'Bahamas'})).toBeVisible();
   },
 };
 
@@ -52,7 +52,7 @@ export const SingleCandidate = {
     await expect(canvas.queryByText('Bahamas')).not.toBeInTheDocument();
 
     const dropdown = canvas.getByLabelText('Locatie');
-    await userEvent.click(dropdown);
+    dropdown.focus();
     await userEvent.keyboard('[ArrowDown]');
 
     // wait for locations to be loaded
@@ -61,8 +61,8 @@ export const SingleCandidate = {
       expect(textNodes.length).toBeGreaterThan(0);
     });
 
-    await expect(canvas.queryByText('Bahamas')).not.toBeInTheDocument();
+    expect(canvas.queryByText('Bahamas')).not.toBeInTheDocument();
     await userEvent.keyboard('[Escape]');
-    await expect(await canvas.findByText('Open Gem')).toBeVisible();
+    expect(await canvas.findByText('Open Gem')).toBeVisible();
   },
 };

package.json

@@ -1,6 +1,6 @@
 import {expect, userEvent, waitFor, within} from '@storybook/test';
 
-import {ConfigDecorator, withUtrechtDocument} from 'story-utils/decorators';
+import {ConfigDecorator} from 'story-utils/decorators';
 
 import {
   mockBAGDataGet,
@@ -12,7 +12,7 @@ import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Custom / Address NL',
-  decorators: [withUtrechtDocument, ConfigDecorator],
+  decorators: [ConfigDecorator],
   args: {
     type: 'addressNL',
     key: 'addressNL',

src/components/appointments/fields/LocationSelect.stories.jsx

@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Custom / BSNField',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'bsn',
     extraComponentProperties: {},

src/formio/components/AddressNL.stories.js

@@ -1,6 +1,6 @@
 @use 'microscope-sass/lib/bem';
 
-@import '@utrecht/components/dist/custom-checkbox/css/index.css';
+@import '@utrecht/components/custom-checkbox/';
 
 // Design tokens: see src/components/checkbox-field.tokens.json
 

src/formio/components/BsnField.stories.js

@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Vanilla / Checkbox',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'checkbox',
     extraComponentProperties: {},

src/formio/components/Checkbox.scss

@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {MultipleFormioComponents, SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Vanilla / Columns',
-  decorators: [withUtrechtDocument],
   args: {
     evalContext: {},
   },

src/formio/components/Checkbox.stories.js

@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Vanilla / Content',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'content',
     extraComponentProperties: {},

src/formio/components/Columns.stories.jsx

@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Custom / Cosign',
-  decorators: [withUtrechtDocument],
   args: {
     key: 'cosign',
     type: 'cosign',

src/formio/components/Content.stories.jsx

@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Vanilla / Currency',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'currency',
     extraComponentProperties: {

src/formio/components/Cosign.stories.js

@@ -1,6 +1,5 @@
 import {expect, userEvent, within} from '@storybook/test';
 
-import {withUtrechtDocument} from 'story-utils/decorators';
 import {sleep} from 'utils';
 
 import {SingleFormioComponent} from './story-util';
@@ -24,7 +23,6 @@ const waitForFlatpickr = async node => {
 
 export default {
   title: 'Form.io components / Custom / DateField',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'date',
     extraComponentProperties: {

src/formio/components/Currency.stories.js

@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Vanilla / DateTimeField',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'datetime',
     extraComponentProperties: {

src/formio/components/DateField.stories.js

@@ -1,6 +1,6 @@
 import {expect, userEvent, waitFor, within} from '@storybook/test';
 
-import {ConfigDecorator, withUtrechtDocument} from 'story-utils/decorators';
+import {ConfigDecorator} from 'story-utils/decorators';
 import {sleep} from 'utils';
 
 import {mockBAGDataGet, mockBAGNoDataGet} from './AddressNL.mocks';
@@ -40,7 +40,6 @@ const defaultNested = [
 
 export default {
   title: 'Form.io components / Vanilla / EditGrid (Repeating group)',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'editgrid',
     groupLabel: '',

src/formio/components/DateTimeField.stories.js

@@ -1,12 +1,9 @@
 import {fn} from '@storybook/test';
 
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Vanilla / Email',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'email',
     extraComponentProperties: {},

src/formio/components/EditGrid.stories.jsx

@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Vanilla / Fieldset',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'fieldset',
     extraComponentProperties: {

src/formio/components/Email.stories.js

@@ -1,7 +1,6 @@
 import {expect, userEvent, within} from '@storybook/test';
 import {getWorker} from 'msw-storybook-addon';
 
-import {withUtrechtDocument} from 'story-utils/decorators';
 import {sleep} from 'utils';
 
 import {
@@ -38,7 +37,6 @@ const MIME_TO_LABEL = {
 
 export default {
   title: 'Form.io components / Vanilla / FileUpload',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'file',
     extraComponentProperties: {},

src/formio/components/Fieldset.stories.js

@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Custom / IBANField',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'iban',
     extraComponentProperties: {},

src/formio/components/FileField.stories.js

@@ -1,10 +1,7 @@
-import {withUtrechtDocument} from 'story-utils/decorators';
-
 import {SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Custom / LicensePlateField',
-  decorators: [withUtrechtDocument],
   args: {
     type: 'licenseplate',
     extraComponentProperties: {},