diff --git a/.changeset/breezy-moles-flash.md b/.changeset/breezy-moles-flash.md new file mode 100644 index 00000000000..3cee2cb9d58 --- /dev/null +++ b/.changeset/breezy-moles-flash.md @@ -0,0 +1,107 @@ +--- +"@utrecht/accordion-css": minor +"@utrecht/alert-css": minor +"@utrecht/alert-dialog-css": minor +"@utrecht/alternate-lang-nav-css": minor +"@utrecht/article-css": minor +"@utrecht/backdrop-css": minor +"@utrecht/badge-counter-css": minor +"@utrecht/badge-css": minor +"@utrecht/badge-data-css": minor +"@utrecht/badge-list-css": minor +"@utrecht/badge-status-css": minor +"@utrecht/blockquote-css": minor +"@utrecht/body-css": minor +"@utrecht/breadcrumb-nav-css": minor +"@utrecht/button-css": minor +"@utrecht/button-group-css": minor +"@utrecht/button-link-css": minor +"@utrecht/calendar-css": minor +"@utrecht/checkbox-css": minor +"@utrecht/code-block-css": minor +"@utrecht/code-css": minor +"@utrecht/color-sample-css": minor +"@utrecht/column-layout-css": minor +"@utrecht/combobox-css": minor +"@utrecht/currency-data-css": minor +"@utrecht/custom-checkbox-css": minor +"@utrecht/data-list-css": minor +"@utrecht/data-placeholder-css": minor +"@utrecht/digid-button-css": minor +"@utrecht/document-css": minor +"@utrecht/drawer-css": minor +"@utrecht/emphasis-css": minor +"@utrecht/figure-css": minor +"@utrecht/flex-wrap-fallback-css": minor +"@utrecht/focus-ring-css": minor +"@utrecht/form-css": minor +"@utrecht/form-field-css": minor +"@utrecht/form-field-description-css": minor +"@utrecht/form-field-error-message-css": minor +"@utrecht/form-fieldset-css": minor +"@utrecht/form-label-css": minor +"@utrecht/form-toggle-css": minor +"@utrecht/heading-1-css": minor +"@utrecht/heading-2-css": minor +"@utrecht/heading-3-css": minor +"@utrecht/heading-4-css": minor +"@utrecht/heading-5-css": minor +"@utrecht/heading-6-css": minor +"@utrecht/heading-css": minor +"@utrecht/heading-group-css": minor +"@utrecht/html-content-css": minor +"@utrecht/iban-data-css": minor +"@utrecht/icon": minor +"@utrecht/img-css": minor +"@utrecht/index-char-nav-css": minor +"@utrecht/link-button-css": minor +"@utrecht/link-css": minor +"@utrecht/link-list-css": minor +"@utrecht/link-social-css": minor +"@utrecht/list-social-css": minor +"@utrecht/listbox-css": minor +"@utrecht/logo-button-css": minor +"@utrecht/logo-css": minor +"@utrecht/logo-image-css": minor +"@utrecht/map-control-button-css": minor +"@utrecht/map-marker-css": minor +"@utrecht/mark-css": minor +"@utrecht/multiline-data-css": minor +"@utrecht/nav-bar-css": minor +"@utrecht/nav-list-css": minor +"@utrecht/number-badge-css": minor +"@utrecht/number-data-css": minor +"@utrecht/ordered-list-css": minor +"@utrecht/page-body-css": minor +"@utrecht/page-content-css": minor +"@utrecht/page-css": minor +"@utrecht/page-footer-css": minor +"@utrecht/page-header-css": minor +"@utrecht/page-layout-css": minor +"@utrecht/pagination-css": minor +"@utrecht/paragraph-css": minor +"@utrecht/pre-heading-css": minor +"@utrecht/preserve-data-css": minor +"@utrecht/radio-button-css": minor +"@utrecht/rich-text-css": minor +"@utrecht/root-css": minor +"@utrecht/search-bar-css": minor +"@utrecht/select-css": minor +"@utrecht/separator-css": minor +"@utrecht/skip-link-css": minor +"@utrecht/spotlight-section-css": minor +"@utrecht/subscript-css": minor +"@utrecht/superscript-css": minor +"@utrecht/surface-css": minor +"@utrecht/table-css": minor +"@utrecht/table-of-contents-css": minor +"@utrecht/textarea-css": minor +"@utrecht/textbox-css": minor +"@utrecht/top-task-link-css": minor +"@utrecht/top-task-nav-css": minor +"@utrecht/unordered-list-css": minor +"@utrecht/url-data-css": minor +"@utrecht/vega-visualization-css": minor +--- + +Add `tokens.mjs` and `tokens.d.mts` files to CSS packages. diff --git a/.changeset/metal-mugs-join.md b/.changeset/metal-mugs-join.md new file mode 100644 index 00000000000..6c3dccaf4f1 --- /dev/null +++ b/.changeset/metal-mugs-join.md @@ -0,0 +1,5 @@ +--- +"@utrecht/icon": minor +--- + +Add `iconset.mjs` and `iconset.d.mts` files. diff --git a/.changeset/plenty-turtles-boil.md b/.changeset/plenty-turtles-boil.md new file mode 100644 index 00000000000..b765e735a5b --- /dev/null +++ b/.changeset/plenty-turtles-boil.md @@ -0,0 +1,5 @@ +--- +"@utrecht/design-tokens": minor +--- + +Add `list.mjs` and `list.d.mts` to the design tokens package. diff --git a/.changeset/selfish-pumas-enjoy.md b/.changeset/selfish-pumas-enjoy.md new file mode 100644 index 00000000000..d6c0e87fefb --- /dev/null +++ b/.changeset/selfish-pumas-enjoy.md @@ -0,0 +1,5 @@ +--- +"@utrecht/component-library-react": patch +--- + +Use correct `stroke-width` syntax in SVG icon of the Accordion, and avoid warning in logs. diff --git a/components/alternate-lang-nav/src/tokens.json b/components/alternate-lang-nav/src/tokens.json new file mode 100644 index 00000000000..928f19de494 --- /dev/null +++ b/components/alternate-lang-nav/src/tokens.json @@ -0,0 +1,5 @@ +{ + "utrecht": { + "alternate-lang-nav": {} + } +} diff --git a/components/body/src/tokens.json b/components/body/src/tokens.json new file mode 100644 index 00000000000..44314688a91 --- /dev/null +++ b/components/body/src/tokens.json @@ -0,0 +1,46 @@ +{ + "utrecht": { + "body": { + "font-family": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "*", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": true + }, + "type": "fontFamilies" + }, + "font-size": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": true + }, + "type": "fontSizes" + }, + "font-weight": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": true + }, + "type": "fontWeights" + }, + "line-height": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": ["", ""], + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": true + }, + "type": "lineHeights" + } + } + } +} diff --git a/components/combobox/src/tokens.json b/components/combobox/src/tokens.json new file mode 100644 index 00000000000..7ecd190217f --- /dev/null +++ b/components/combobox/src/tokens.json @@ -0,0 +1,18 @@ +{ + "utrecht": { + "combobox": { + "popover": { + "z-index": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": false + }, + "type": "other" + } + } + } + } +} diff --git a/components/heading/package.json b/components/heading/package.json index a8fd11a7767..2df41de2b9d 100644 --- a/components/heading/package.json +++ b/components/heading/package.json @@ -10,8 +10,13 @@ "src/", "*.md" ], - "scripts": {}, - "devDependencies": {}, + "scripts": { + "build": "build-css-package", + "clean": "rimraf dist" + }, + "devDependencies": { + "@utrecht/build-utils-css": "workspace:*" + }, "keywords": [ "nl-design-system" ], diff --git a/components/heading/src/index.scss b/components/heading/src/index.scss new file mode 100644 index 00000000000..ff7112406ea --- /dev/null +++ b/components/heading/src/index.scss @@ -0,0 +1 @@ +/* stylelint-disable no-empty-source */ diff --git a/components/html-content/src/tokens.json b/components/html-content/src/tokens.json new file mode 100644 index 00000000000..c14f546be56 --- /dev/null +++ b/components/html-content/src/tokens.json @@ -0,0 +1,5 @@ +{ + "utrecht": { + "html-content": {} + } +} diff --git a/components/icon/src/build.js b/components/icon/src/build.js index 6f77f0656a9..23574b839b0 100644 --- a/components/icon/src/build.js +++ b/components/icon/src/build.js @@ -93,7 +93,22 @@ writeComponentFile(); const generateIconsNameFile = async () => { const data = await getIconData(); await mkdir('dist', { recursive: true }); - await writeFile(path.resolve(process.cwd(), 'dist/index.json'), generateIconsName(data), 'utf-8'); + const json = generateIconsName(data); + await writeFile(path.resolve(process.cwd(), 'dist/index.json'), json, 'utf-8'); + await writeFile(path.resolve(process.cwd(), 'dist/iconset.mjs'), `export default ${json};\n`, 'utf-8'); + await writeFile( + path.resolve(process.cwd(), 'dist/iconset.d.mts'), + `export default iconset; + +declare interface Icon { + id: string; + src: string; + unicodeBidi?: boolean; +} + +declare const iconset: Icon[];\n`, + 'utf-8', + ); }; generateIconsNameFile(); diff --git a/components/page-layout/src/tokens.json b/components/page-layout/src/tokens.json new file mode 100644 index 00000000000..872e0525dfe --- /dev/null +++ b/components/page-layout/src/tokens.json @@ -0,0 +1,5 @@ +{ + "utrecht": { + "page-layout": {} + } +} diff --git a/packages/build-utils-css/src/index.mjs b/packages/build-utils-css/src/index.mjs index c197737f469..9b4adc2bb49 100755 --- a/packages/build-utils-css/src/index.mjs +++ b/packages/build-utils-css/src/index.mjs @@ -1,4 +1,4 @@ -import { mkdir, writeFile } from 'node:fs/promises'; +import { mkdir, readFile, writeFile } from 'node:fs/promises'; import path from 'node:path'; import postcss from 'postcss'; import * as sass from 'sass'; @@ -89,6 +89,21 @@ const buildStyles = async (config) => { } }; +const buildTokens = async ({ inputFile, outputFile }) => { + const json = JSON.parse(await readFile(inputFile, 'utf-8')); + + await writeFile(outputFile, `export default ${JSON.stringify(json, null, 2)};\n`); + + await writeFile( + outputFile.replace('.mjs', '.d.mts'), + ` +declare const tokens: any; + +export default tokens; +`, + ); +}; + buildStyles({ inputFile: 'src/index.scss', outputFile: 'dist/index.css', @@ -111,3 +126,8 @@ buildStyles({ esm: true, dts: 'dist/index.mjs.d.ts', }); + +buildTokens({ + inputFile: 'src/tokens.json', + outputFile: 'dist/tokens.mjs', +}); diff --git a/packages/component-library-react/src/Accordion.tsx b/packages/component-library-react/src/Accordion.tsx index d5c70ac48e3..fc57d00f94c 100644 --- a/packages/component-library-react/src/Accordion.tsx +++ b/packages/component-library-react/src/Accordion.tsx @@ -25,7 +25,7 @@ const IconChevronDown = () => ( diff --git a/packages/storybook-helpers/src/addon-viewport.ts b/packages/storybook-helpers/src/addon-viewport.ts index 090e907e46d..fa53421b316 100644 --- a/packages/storybook-helpers/src/addon-viewport.ts +++ b/packages/storybook-helpers/src/addon-viewport.ts @@ -16,6 +16,5 @@ export const addonViewport = { }, }, }, - defaultViewport: 'responsive', }, }; diff --git a/packages/storybook-react/babel.config.mjs b/packages/storybook-react/babel.config.mjs deleted file mode 100644 index f525593c8ec..00000000000 --- a/packages/storybook-react/babel.config.mjs +++ /dev/null @@ -1,16 +0,0 @@ -export default { - sourceType: 'module', - presets: [ - [ - '@babel/preset-env', - { - targets: { - chrome: 100, - }, - }, - ], - '@babel/preset-react', - '@babel/preset-typescript', - ], - plugins: [], -}; diff --git a/packages/storybook-react/package.json b/packages/storybook-react/package.json index a39e7b7c626..ac5f482da92 100644 --- a/packages/storybook-react/package.json +++ b/packages/storybook-react/package.json @@ -7,6 +7,7 @@ "keywords": [ "nl-design-system" ], + "type": "module", "private": true, "repository": { "type": "git+ssh", @@ -51,6 +52,7 @@ "@storybook/react-vite": "7.4.6", "@storybook/testing-library": "0.2.2", "@storybook/theming": "7.4.6", + "@storybook/types": "7.4.6", "@types/lodash.merge": "4.6.9", "@types/react": "18.3.3", "@utrecht/accordion-css": "workspace:*", diff --git a/packages/storybook-react/src/stories/Accordion.stories.tsx b/packages/storybook-react/src/stories/Accordion.stories.tsx index 7ac092fcb48..bf1c7d66541 100644 --- a/packages/storybook-react/src/stories/Accordion.stories.tsx +++ b/packages/storybook-react/src/stories/Accordion.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/accordion-css/README.md?raw'; -import tokensDefinition from '@utrecht/accordion-css/src/tokens.json'; +import tokensDefinition from '@utrecht/accordion-css/dist/tokens.mjs'; import { AccordionProvider, AccordionSectionProps, @@ -12,10 +12,10 @@ import { TableHeaderCell, TableRow, } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import { UtrechtIconChevronDown } from '@utrecht/web-component-library-react'; import React, { ReactNode } from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; interface AccordionStoryProps { label: string; body: ReactNode; diff --git a/packages/storybook-react/src/stories/Alert.stories.tsx b/packages/storybook-react/src/stories/Alert.stories.tsx index b4949b8654a..484ff2b0953 100644 --- a/packages/storybook-react/src/stories/Alert.stories.tsx +++ b/packages/storybook-react/src/stories/Alert.stories.tsx @@ -1,11 +1,11 @@ import type { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/alert-css/README.md?raw'; -import tokensDefinition from '@utrecht/alert-css/src/tokens.json'; +import tokensDefinition from '@utrecht/alert-css/dist/tokens.mjs'; import { Alert, AlertProps, Heading1, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import iconSet from '@utrecht/icon/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import iconSet from '@utrecht/icon/dist/iconset.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; interface AlertStoryProps extends AlertProps { icon?: string; diff --git a/packages/storybook-react/src/stories/AlertDialog.stories.tsx b/packages/storybook-react/src/stories/AlertDialog.stories.tsx index d9e837544dd..eb356e22ffa 100644 --- a/packages/storybook-react/src/stories/AlertDialog.stories.tsx +++ b/packages/storybook-react/src/stories/AlertDialog.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/alert-dialog-css/README.md?raw'; -import tokensDefinition from '@utrecht/alert-dialog-css/src/tokens.json'; +import tokensDefinition from '@utrecht/alert-dialog-css/dist/tokens.mjs'; import type { AlertDialogProps } from '@utrecht/component-library-react'; import { AlertDialog, @@ -9,9 +9,9 @@ import { Paragraph, PrimaryActionButton, } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React, { createRef, PropsWithChildren, useState } from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Alert dialog', diff --git a/packages/storybook-react/src/stories/AlternateLangNav.stories.tsx b/packages/storybook-react/src/stories/AlternateLangNav.stories.tsx index 2b200d8c862..602ae4f7f00 100644 --- a/packages/storybook-react/src/stories/AlternateLangNav.stories.tsx +++ b/packages/storybook-react/src/stories/AlternateLangNav.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import tokensDefinition from '@utrecht/alert-dialog-css/src/tokens.json'; +import tokensDefinition from '@utrecht/alert-dialog-css/dist/tokens.mjs'; import readme from '@utrecht/alternate-lang-nav-css/README.md?raw'; import { ButtonGroup, Heading, Link, LinkButton } from '@utrecht/component-library-react/dist/css-module/index'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Alternate language navigation', diff --git a/packages/storybook-react/src/stories/Article.stories.tsx b/packages/storybook-react/src/stories/Article.stories.tsx index b656a3a8c75..42c79d6c4ce 100644 --- a/packages/storybook-react/src/stories/Article.stories.tsx +++ b/packages/storybook-react/src/stories/Article.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/article-css/README.md?raw'; -import tokensDefinition from '@utrecht/article-css/src/tokens.json'; +import tokensDefinition from '@utrecht/article-css/dist/tokens.mjs'; import { Article, Heading1, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Article', diff --git a/packages/storybook-react/src/stories/Backdrop.stories.tsx b/packages/storybook-react/src/stories/Backdrop.stories.tsx index a4fc9c33c78..6c59575930a 100644 --- a/packages/storybook-react/src/stories/Backdrop.stories.tsx +++ b/packages/storybook-react/src/stories/Backdrop.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/backdrop-css/README.md?raw'; -import tokensDefinition from '@utrecht/backdrop-css/src/tokens.json'; +import tokensDefinition from '@utrecht/backdrop-css/dist/tokens.mjs'; import { AlertDialog, Backdrop, Button, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Backdrop', diff --git a/packages/storybook-react/src/stories/BadgeList.stories.tsx b/packages/storybook-react/src/stories/BadgeList.stories.tsx index c1c2eed84ca..4d025a63fb5 100644 --- a/packages/storybook-react/src/stories/BadgeList.stories.tsx +++ b/packages/storybook-react/src/stories/BadgeList.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/badge-list-css/README.md?raw'; -import tokensDefinition from '@utrecht/badge-list-css/src/tokens.json'; +import tokensDefinition from '@utrecht/badge-list-css/dist/tokens.mjs'; import { BadgeList, DataBadge } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Badge list', diff --git a/packages/storybook-react/src/stories/Blockquote.stories.tsx b/packages/storybook-react/src/stories/Blockquote.stories.tsx index a66c26eeebe..b615c903d4f 100644 --- a/packages/storybook-react/src/stories/Blockquote.stories.tsx +++ b/packages/storybook-react/src/stories/Blockquote.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/blockquote-css/README.md?raw'; -import tokensDefinition from '@utrecht/blockquote-css/src/tokens.json'; +import tokensDefinition from '@utrecht/blockquote-css/dist/tokens.mjs'; import { Blockquote, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Blockquote', diff --git a/packages/storybook-react/src/stories/BreadcrumbNav.stories.tsx b/packages/storybook-react/src/stories/BreadcrumbNav.stories.tsx index 4ce8c53feab..5d41814064c 100644 --- a/packages/storybook-react/src/stories/BreadcrumbNav.stories.tsx +++ b/packages/storybook-react/src/stories/BreadcrumbNav.stories.tsx @@ -1,16 +1,16 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/breadcrumb-nav-css/README.md?raw'; -import tokensDefinition from '@utrecht/breadcrumb-nav-css/src/tokens.json'; +import tokensDefinition from '@utrecht/breadcrumb-nav-css/dist/tokens.mjs'; import { BreadcrumbNav, BreadcrumbNavLink, BreadcrumbNavSeparator, } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import { UtrechtIconChevronRight } from '@utrecht/web-component-library-react'; import clsx from 'clsx'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; // custom link component for storybook const ExampleCustomLink = ({ children, className, ...rest }: any) => { diff --git a/packages/storybook-react/src/stories/Button.stories.tsx b/packages/storybook-react/src/stories/Button.stories.tsx index a88d7862357..c9f00d5ee32 100644 --- a/packages/storybook-react/src/stories/Button.stories.tsx +++ b/packages/storybook-react/src/stories/Button.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/button-css/README.md?raw'; -import tokensDefinition from '@utrecht/button-css/src/tokens.json'; +import tokensDefinition from '@utrecht/button-css/dist/tokens.mjs'; import { Button, ButtonProps } from '@utrecht/button-react/dist/css'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import iconSet from '@utrecht/icon/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import iconSet from '@utrecht/icon/dist/iconset.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; interface ButtonStoryProps extends ButtonProps { icon?: string; diff --git a/packages/storybook-react/src/stories/ButtonGroup.stories.tsx b/packages/storybook-react/src/stories/ButtonGroup.stories.tsx index 8111a072d5f..4cf0a575c77 100644 --- a/packages/storybook-react/src/stories/ButtonGroup.stories.tsx +++ b/packages/storybook-react/src/stories/ButtonGroup.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/button-group-css/README.md?raw'; -import tokensDefinition from '@utrecht/button-group-css/src/tokens.json'; +import tokensDefinition from '@utrecht/button-group-css/dist/tokens.mjs'; import { Button, ButtonGroup } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Button group', diff --git a/packages/storybook-react/src/stories/ButtonLink.stories.tsx b/packages/storybook-react/src/stories/ButtonLink.stories.tsx index 03f9f639c7c..7a02b616acb 100644 --- a/packages/storybook-react/src/stories/ButtonLink.stories.tsx +++ b/packages/storybook-react/src/stories/ButtonLink.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/button-link-css/README.md?raw'; -import tokensDefinition from '@utrecht/button-link-css/src/tokens.json'; +import tokensDefinition from '@utrecht/button-link-css/dist/tokens.mjs'; import { ButtonLink } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import { designTokenStory } from './util'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Link that looks like a button', diff --git a/packages/storybook-react/src/stories/Calendar.stories.tsx b/packages/storybook-react/src/stories/Calendar.stories.tsx index 055eb562fc9..dd7455d52c3 100644 --- a/packages/storybook-react/src/stories/Calendar.stories.tsx +++ b/packages/storybook-react/src/stories/Calendar.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import tokensDefinition from '@utrecht/calendar-css/src/tokens.json'; +import tokensDefinition from '@utrecht/calendar-css/dist/tokens.mjs'; import { Calendar } from '@utrecht/component-library-react/dist/css-module/Calendar'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import { addDays, addWeeks, addYears } from 'date-fns'; import { enUS, nl } from 'date-fns/locale'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const events = [ { date: '2022-09-22T21:59:59.999Z', emphasis: true, selected: false, disabled: false }, diff --git a/packages/storybook-react/src/stories/Checkbox.stories.tsx b/packages/storybook-react/src/stories/Checkbox.stories.tsx index d5f0e674a12..25bcb62ebb7 100644 --- a/packages/storybook-react/src/stories/Checkbox.stories.tsx +++ b/packages/storybook-react/src/stories/Checkbox.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/checkbox-css/README.md?raw'; -import tokensDefinition from '@utrecht/checkbox-css/src/tokens.json'; +import tokensDefinition from '@utrecht/checkbox-css/dist/tokens.mjs'; import { Checkbox } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import { designTokenStory } from './util'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Checkbox', diff --git a/packages/storybook-react/src/stories/Code.stories.tsx b/packages/storybook-react/src/stories/Code.stories.tsx index 922e23871d8..8686d351b3a 100644 --- a/packages/storybook-react/src/stories/Code.stories.tsx +++ b/packages/storybook-react/src/stories/Code.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/code-css/README.md?raw'; -import tokensDefinition from '@utrecht/code-css/src/tokens.json'; +import tokensDefinition from '@utrecht/code-css/dist/tokens.mjs'; import { Code } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import { designTokenStory } from './util'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Code', diff --git a/packages/storybook-react/src/stories/CodeBlock.stories.tsx b/packages/storybook-react/src/stories/CodeBlock.stories.tsx index 02cc04f52e0..e5183a9419f 100644 --- a/packages/storybook-react/src/stories/CodeBlock.stories.tsx +++ b/packages/storybook-react/src/stories/CodeBlock.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/code-block-css/README.md?raw'; -import tokensDefinition from '@utrecht/code-block-css/src/tokens.json'; +import tokensDefinition from '@utrecht/code-block-css/dist/tokens.mjs'; import { CodeBlock } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import { designTokenStory } from './util'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Code block', diff --git a/packages/storybook-react/src/stories/ColorSample.stories.tsx b/packages/storybook-react/src/stories/ColorSample.stories.tsx index 74af0b0b647..bed9db09284 100644 --- a/packages/storybook-react/src/stories/ColorSample.stories.tsx +++ b/packages/storybook-react/src/stories/ColorSample.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/color-sample-css/README.md?raw'; -import tokensDefinition from '@utrecht/color-sample-css/src/tokens.json'; +import tokensDefinition from '@utrecht/color-sample-css/dist/tokens.mjs'; import { ColorSample } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import { designTokenStory } from './util'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Color sample', diff --git a/packages/storybook-react/src/stories/CurrencyData.stories.tsx b/packages/storybook-react/src/stories/CurrencyData.stories.tsx index 43b3544de1a..9e652590160 100644 --- a/packages/storybook-react/src/stories/CurrencyData.stories.tsx +++ b/packages/storybook-react/src/stories/CurrencyData.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { CurrencyData, Paragraph } from '@utrecht/component-library-react/dist/css-module'; import readme from '@utrecht/currency-data-css/README.md?raw'; -import tokensDefinition from '@utrecht/currency-data-css/src/tokens.json'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokensDefinition from '@utrecht/currency-data-css/dist/tokens.mjs'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Currency data', diff --git a/packages/storybook-react/src/stories/DataBadge.stories.tsx b/packages/storybook-react/src/stories/DataBadge.stories.tsx index 5abf346253c..a6f8861b85b 100644 --- a/packages/storybook-react/src/stories/DataBadge.stories.tsx +++ b/packages/storybook-react/src/stories/DataBadge.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import readme from '@utrecht/badge-data-css/README.md?raw'; -import tokensDefinition from '@utrecht/badge-data-css/src/tokens.json'; +import tokensDefinition from '@utrecht/badge-data-css/dist/tokens.mjs'; import { DataBadge, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Data badge', diff --git a/packages/storybook-react/src/stories/DataList.stories.tsx b/packages/storybook-react/src/stories/DataList.stories.tsx index 9352fd24a98..23792717a7b 100644 --- a/packages/storybook-react/src/stories/DataList.stories.tsx +++ b/packages/storybook-react/src/stories/DataList.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { DataList, DataListItem, DataListKey, DataListValue } from '@utrecht/component-library-react/dist/css-module'; import readme from '@utrecht/data-list-css/README.md?raw'; -import tokensDefinition from '@utrecht/data-list-css/src/tokens.json'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokensDefinition from '@utrecht/data-list-css/dist/tokens.mjs'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Data List', diff --git a/packages/storybook-react/src/stories/DataPlaceholder.stories.tsx b/packages/storybook-react/src/stories/DataPlaceholder.stories.tsx index cc7985cbf59..66d8197ff7a 100644 --- a/packages/storybook-react/src/stories/DataPlaceholder.stories.tsx +++ b/packages/storybook-react/src/stories/DataPlaceholder.stories.tsx @@ -3,9 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react'; import { DataPlaceholder } from '@utrecht/component-library-react/dist/css-module'; import readme from '@utrecht/data-placeholder-css/README.md?raw'; -import tokensDefinition from '@utrecht/data-placeholder-css/src/tokens.json'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/data-placeholder-css/dist/tokens.mjs'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Data placeholder', diff --git a/packages/storybook-react/src/stories/Document.stories.tsx b/packages/storybook-react/src/stories/Document.stories.tsx index 0964e3ca206..75e1f76ddc8 100644 --- a/packages/storybook-react/src/stories/Document.stories.tsx +++ b/packages/storybook-react/src/stories/Document.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Article, Document, Heading1, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/document-css/README.md?raw'; -import tokensDefinition from '@utrecht/document-css/src/tokens.json'; +import tokensDefinition from '@utrecht/document-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Document', diff --git a/packages/storybook-react/src/stories/Drawer.stories.tsx b/packages/storybook-react/src/stories/Drawer.stories.tsx index 993bd22677d..0e1ec81e446 100644 --- a/packages/storybook-react/src/stories/Drawer.stories.tsx +++ b/packages/storybook-react/src/stories/Drawer.stories.tsx @@ -7,11 +7,11 @@ import { Paragraph, PrimaryActionButton, } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/drawer-css/README.md?raw'; -import tokensDefinition from '@utrecht/drawer-css/src/tokens.json'; +import tokensDefinition from '@utrecht/drawer-css/dist/tokens.mjs'; import React, { createRef, PropsWithChildren, useState } from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Drawer', diff --git a/packages/storybook-react/src/stories/Emphasis.stories.tsx b/packages/storybook-react/src/stories/Emphasis.stories.tsx index 1d3d6b2c1c6..f4c9711da2d 100644 --- a/packages/storybook-react/src/stories/Emphasis.stories.tsx +++ b/packages/storybook-react/src/stories/Emphasis.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Emphasis, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/emphasis-css/README.md?raw'; -import tokensDefinition from '@utrecht/emphasis-css/src/tokens.json'; +import tokensDefinition from '@utrecht/emphasis-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Emphasis', diff --git a/packages/storybook-react/src/stories/Figure.stories.tsx b/packages/storybook-react/src/stories/Figure.stories.tsx index f877e1ff071..74fdefea118 100644 --- a/packages/storybook-react/src/stories/Figure.stories.tsx +++ b/packages/storybook-react/src/stories/Figure.stories.tsx @@ -1,10 +1,10 @@ import { Args, Meta, StoryObj } from '@storybook/react'; import { Figure, FigureCaption, Image, Link } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/figure-css/README.md?raw'; -import tokensDefinition from '@utrecht/figure-css/src/tokens.json'; +import tokensDefinition from '@utrecht/figure-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Figure', diff --git a/packages/storybook-react/src/stories/FormField.stories.tsx b/packages/storybook-react/src/stories/FormField.stories.tsx index 7c31109b25f..14c8f517d18 100644 --- a/packages/storybook-react/src/stories/FormField.stories.tsx +++ b/packages/storybook-react/src/stories/FormField.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { FormField, Paragraph, Textbox } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/form-field-css/README.md?raw'; -import tokensDefinition from '@utrecht/form-field-css/src/tokens.json'; +import tokensDefinition from '@utrecht/form-field-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Form Field/Textbox', diff --git a/packages/storybook-react/src/stories/FormFieldCheckbox.stories.tsx b/packages/storybook-react/src/stories/FormFieldCheckbox.stories.tsx index 3743552fa02..460fd8eea43 100644 --- a/packages/storybook-react/src/stories/FormFieldCheckbox.stories.tsx +++ b/packages/storybook-react/src/stories/FormFieldCheckbox.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { FormFieldCheckbox } from '@utrecht/component-library-react/dist/css-module'; import React from 'react'; -import FormFieldMeta from './FormField.stories'; +import FormFieldMeta from './FormField.stories.js'; const storyArgTypes = { ...FormFieldMeta.argTypes, diff --git a/packages/storybook-react/src/stories/FormFieldErrorMessage.stories.tsx b/packages/storybook-react/src/stories/FormFieldErrorMessage.stories.tsx index 13f411903f3..a797c1dd1a8 100644 --- a/packages/storybook-react/src/stories/FormFieldErrorMessage.stories.tsx +++ b/packages/storybook-react/src/stories/FormFieldErrorMessage.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Code, FormFieldErrorMessage, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/form-field-error-message-css/README.md?raw'; -import tokensDefinition from '@utrecht/form-field-error-message-css/src/tokens.json'; +import tokensDefinition from '@utrecht/form-field-error-message-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Form field error message', diff --git a/packages/storybook-react/src/stories/FormFieldRadioGroup.stories.tsx b/packages/storybook-react/src/stories/FormFieldRadioGroup.stories.tsx index 6b3e7ae739b..addb98ccff1 100644 --- a/packages/storybook-react/src/stories/FormFieldRadioGroup.stories.tsx +++ b/packages/storybook-react/src/stories/FormFieldRadioGroup.stories.tsx @@ -10,7 +10,7 @@ import { RadioButton, } from '@utrecht/component-library-react'; import React from 'react'; -import FormFieldMeta from './FormField.stories'; +import FormFieldMeta from './FormField.stories.js'; const storyArgTypes = { ...FormFieldMeta.argTypes, diff --git a/packages/storybook-react/src/stories/FormFieldText.stories.tsx b/packages/storybook-react/src/stories/FormFieldText.stories.tsx index 65431192052..27649705008 100644 --- a/packages/storybook-react/src/stories/FormFieldText.stories.tsx +++ b/packages/storybook-react/src/stories/FormFieldText.stories.tsx @@ -8,7 +8,7 @@ import { Textbox, } from '@utrecht/component-library-react'; import React from 'react'; -import FormFieldMeta from './FormField.stories'; +import FormFieldMeta from './FormField.stories.js'; const storyArgTypes = { ...FormFieldMeta.argTypes, diff --git a/packages/storybook-react/src/stories/FormFieldTextarea.stories.tsx b/packages/storybook-react/src/stories/FormFieldTextarea.stories.tsx index 31218423494..cc95b60b7b9 100644 --- a/packages/storybook-react/src/stories/FormFieldTextarea.stories.tsx +++ b/packages/storybook-react/src/stories/FormFieldTextarea.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { FormFieldTextarea } from '@utrecht/component-library-react/dist/css-module'; import React from 'react'; -import FormFieldMeta from './FormField.stories'; +import FormFieldMeta from './FormField.stories.js'; const storyArgTypes = { ...FormFieldMeta.argTypes, diff --git a/packages/storybook-react/src/stories/FormFieldTextbox.stories.tsx b/packages/storybook-react/src/stories/FormFieldTextbox.stories.tsx index 69bd60163b7..138c99f4fbc 100644 --- a/packages/storybook-react/src/stories/FormFieldTextbox.stories.tsx +++ b/packages/storybook-react/src/stories/FormFieldTextbox.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { FormFieldTextbox } from '@utrecht/component-library-react/dist/css-module'; import React from 'react'; -import FormFieldMeta from './FormField.stories'; +import FormFieldMeta from './FormField.stories.js'; const storyArgTypes = { ...FormFieldMeta.argTypes, diff --git a/packages/storybook-react/src/stories/FormLabel.stories.tsx b/packages/storybook-react/src/stories/FormLabel.stories.tsx index 08d09b58ef2..03ebab76dd4 100644 --- a/packages/storybook-react/src/stories/FormLabel.stories.tsx +++ b/packages/storybook-react/src/stories/FormLabel.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { FormLabel } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/form-label-css/README.md?raw'; -import tokensDefinition from '@utrecht/form-label-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/form-label-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Form Label', diff --git a/packages/storybook-react/src/stories/FormToggle.stories.tsx b/packages/storybook-react/src/stories/FormToggle.stories.tsx index 0986feb4c84..010080c07bf 100644 --- a/packages/storybook-react/src/stories/FormToggle.stories.tsx +++ b/packages/storybook-react/src/stories/FormToggle.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { FormToggle } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/form-toggle-css/README.md?raw'; -import tokensDefinition from '@utrecht/form-toggle-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/form-toggle-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Form toggle', diff --git a/packages/storybook-react/src/stories/Heading.stories.tsx b/packages/storybook-react/src/stories/Heading.stories.tsx index 3f4956c4dc8..5b501587424 100644 --- a/packages/storybook-react/src/stories/Heading.stories.tsx +++ b/packages/storybook-react/src/stories/Heading.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Heading } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/heading-css/README.md?raw'; -import tokensDefinition from '@utrecht/heading-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/heading-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Heading', diff --git a/packages/storybook-react/src/stories/Heading1.stories.tsx b/packages/storybook-react/src/stories/Heading1.stories.tsx index 3fa5f09b9dd..577dd609884 100644 --- a/packages/storybook-react/src/stories/Heading1.stories.tsx +++ b/packages/storybook-react/src/stories/Heading1.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Heading1 } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/heading-1-css/README.md?raw'; -import tokensDefinition from '@utrecht/heading-1-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/heading-1-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Heading 1', diff --git a/packages/storybook-react/src/stories/Heading2.stories.tsx b/packages/storybook-react/src/stories/Heading2.stories.tsx index 892e19e1a73..6a50efccd69 100644 --- a/packages/storybook-react/src/stories/Heading2.stories.tsx +++ b/packages/storybook-react/src/stories/Heading2.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Heading2 } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/heading-2-css/README.md?raw'; -import tokensDefinition from '@utrecht/heading-2-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/heading-2-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Heading 2', diff --git a/packages/storybook-react/src/stories/Heading3.stories.tsx b/packages/storybook-react/src/stories/Heading3.stories.tsx index 8454abf48e6..05827d02884 100644 --- a/packages/storybook-react/src/stories/Heading3.stories.tsx +++ b/packages/storybook-react/src/stories/Heading3.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Heading3 } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/heading-3-css/README.md?raw'; -import tokensDefinition from '@utrecht/heading-3-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/heading-3-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Heading 3', diff --git a/packages/storybook-react/src/stories/Heading4.stories.tsx b/packages/storybook-react/src/stories/Heading4.stories.tsx index a89e788dc5d..7708f438c24 100644 --- a/packages/storybook-react/src/stories/Heading4.stories.tsx +++ b/packages/storybook-react/src/stories/Heading4.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Heading4 } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/heading-4-css/README.md?raw'; -import tokensDefinition from '@utrecht/heading-4-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/heading-4-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Heading 4', diff --git a/packages/storybook-react/src/stories/Heading5.stories.tsx b/packages/storybook-react/src/stories/Heading5.stories.tsx index c125b97f64d..b5455afe1a2 100644 --- a/packages/storybook-react/src/stories/Heading5.stories.tsx +++ b/packages/storybook-react/src/stories/Heading5.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Heading5 } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/heading-5-css/README.md?raw'; -import tokensDefinition from '@utrecht/heading-5-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/heading-5-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Heading 5', diff --git a/packages/storybook-react/src/stories/Heading6.stories.tsx b/packages/storybook-react/src/stories/Heading6.stories.tsx index d85804c0cc3..54ecf48bea5 100644 --- a/packages/storybook-react/src/stories/Heading6.stories.tsx +++ b/packages/storybook-react/src/stories/Heading6.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Heading6 } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/heading-6-css/README.md?raw'; -import tokensDefinition from '@utrecht/heading-6-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/heading-6-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Heading 6', diff --git a/packages/storybook-react/src/stories/HeadingGroup.stories.tsx b/packages/storybook-react/src/stories/HeadingGroup.stories.tsx index 38c65045990..9e7ce52e0d2 100644 --- a/packages/storybook-react/src/stories/HeadingGroup.stories.tsx +++ b/packages/storybook-react/src/stories/HeadingGroup.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Heading1, HeadingGroup, Paragraph, PreHeading } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/heading-group-css/README.md?raw'; -import tokensDefinition from '@utrecht/heading-group-css/src/tokens.json'; +import tokensDefinition from '@utrecht/heading-group-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Heading Group', diff --git a/packages/storybook-react/src/stories/IBANData.stories.tsx b/packages/storybook-react/src/stories/IBANData.stories.tsx index 33318de929f..f45236c1ca1 100644 --- a/packages/storybook-react/src/stories/IBANData.stories.tsx +++ b/packages/storybook-react/src/stories/IBANData.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { IBANData, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/iban-data-css/README.md?raw'; -import tokensDefinition from '@utrecht/iban-data-css/src/tokens.json'; +import tokensDefinition from '@utrecht/iban-data-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/IBAN data', diff --git a/packages/storybook-react/src/stories/Icon.stories.tsx b/packages/storybook-react/src/stories/Icon.stories.tsx index eed2af398ef..5a6e8f61e80 100644 --- a/packages/storybook-react/src/stories/Icon.stories.tsx +++ b/packages/storybook-react/src/stories/Icon.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Icon } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/icon/README.md?raw'; import tokensDefinition from '@utrecht/icon/src/tokens.json'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Icon', diff --git a/packages/storybook-react/src/stories/Image.stories.tsx b/packages/storybook-react/src/stories/Image.stories.tsx index 46197dd1ace..f320f47286c 100644 --- a/packages/storybook-react/src/stories/Image.stories.tsx +++ b/packages/storybook-react/src/stories/Image.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Image } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/img-css/README.md?raw'; -import tokensDefinition from '@utrecht/img-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/img-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Image', diff --git a/packages/storybook-react/src/stories/IndexCharNav.stories.tsx b/packages/storybook-react/src/stories/IndexCharNav.stories.tsx index 0fa68f0f660..a12f17de395 100644 --- a/packages/storybook-react/src/stories/IndexCharNav.stories.tsx +++ b/packages/storybook-react/src/stories/IndexCharNav.stories.tsx @@ -2,11 +2,11 @@ import { Meta, StoryObj } from '@storybook/react'; import { IndexCharNav } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/index-char-nav-css/README.md?raw'; -import tokensDefinition from '@utrecht/index-char-nav-css/src/tokens.json'; +import tokensDefinition from '@utrecht/index-char-nav-css/dist/tokens.mjs'; import React, { ForwardedRef, forwardRef, PropsWithChildren } from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const latinAlphabet = 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z'; const greekAlphabet = 'Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω'; diff --git a/packages/storybook-react/src/stories/Link.stories.tsx b/packages/storybook-react/src/stories/Link.stories.tsx index bc4c87e63e6..0cafcde40cb 100644 --- a/packages/storybook-react/src/stories/Link.stories.tsx +++ b/packages/storybook-react/src/stories/Link.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Link } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/link-css/README.md?raw'; -import tokensDefinition from '@utrecht/link-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/link-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Link', diff --git a/packages/storybook-react/src/stories/LinkList.stories.tsx b/packages/storybook-react/src/stories/LinkList.stories.tsx index 4892e3c268e..7c61b7089d6 100644 --- a/packages/storybook-react/src/stories/LinkList.stories.tsx +++ b/packages/storybook-react/src/stories/LinkList.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; import { LinkList, LinkListLink } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/link-list-css/README.md?raw'; -import tokensDefinition from '@utrecht/link-list-css/src/tokens.json'; +import tokensDefinition from '@utrecht/link-list-css/dist/tokens.mjs'; import { UtrechtIconChevronRight, UtrechtIconHuisEnOmgeving } from '@utrecht/web-component-library-react'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Link list', diff --git a/packages/storybook-react/src/stories/LinkSocial.stories.tsx b/packages/storybook-react/src/stories/LinkSocial.stories.tsx index 127129f5081..7ebd19a954a 100644 --- a/packages/storybook-react/src/stories/LinkSocial.stories.tsx +++ b/packages/storybook-react/src/stories/LinkSocial.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; import { LinkSocial } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/link-social-css/README.md?raw'; -import tokensDefinition from '@utrecht/link-social-css/src/tokens.json'; +import tokensDefinition from '@utrecht/link-social-css/dist/tokens.mjs'; import { UtrechtIconFacebook } from '@utrecht/web-component-library-react'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Link Social', diff --git a/packages/storybook-react/src/stories/ListSocial.stories.tsx b/packages/storybook-react/src/stories/ListSocial.stories.tsx index 05ec55da999..08039437a4f 100644 --- a/packages/storybook-react/src/stories/ListSocial.stories.tsx +++ b/packages/storybook-react/src/stories/ListSocial.stories.tsx @@ -1,8 +1,8 @@ import { Meta, StoryObj } from '@storybook/react'; import { LinkSocial, ListSocial, ListSocialItem } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/list-social-css/README.md?raw'; -import tokensDefinition from '@utrecht/list-social-css/src/tokens.json'; +import tokensDefinition from '@utrecht/list-social-css/dist/tokens.mjs'; import { UtrechtIconFacebook, UtrechtIconInstagram, @@ -11,7 +11,7 @@ import { UtrechtIconWhatsapp, } from '@utrecht/web-component-library-react'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/List Social', diff --git a/packages/storybook-react/src/stories/Logo.stories.tsx b/packages/storybook-react/src/stories/Logo.stories.tsx index 5a03e7b265f..6f27a212b90 100644 --- a/packages/storybook-react/src/stories/Logo.stories.tsx +++ b/packages/storybook-react/src/stories/Logo.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Logo, LogoImage } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/logo-css/README.md?raw'; -import tokensDefinition from '@utrecht/logo-css/src/tokens.json'; +import tokensDefinition from '@utrecht/logo-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Logo', diff --git a/packages/storybook-react/src/stories/LogoImage.stories.tsx b/packages/storybook-react/src/stories/LogoImage.stories.tsx index 58a50f29f44..f1d24b7dfaa 100644 --- a/packages/storybook-react/src/stories/LogoImage.stories.tsx +++ b/packages/storybook-react/src/stories/LogoImage.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { LogoImage } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/logo-image-css/README.md?raw'; -import tokensDefinition from '@utrecht/logo-image-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/logo-image-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Logo image', diff --git a/packages/storybook-react/src/stories/Mark.stories.tsx b/packages/storybook-react/src/stories/Mark.stories.tsx index 57d215f6d6c..56738b69451 100644 --- a/packages/storybook-react/src/stories/Mark.stories.tsx +++ b/packages/storybook-react/src/stories/Mark.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Mark } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/mark-css/README.md?raw'; -import tokensDefinition from '@utrecht/mark-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/mark-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Mark', diff --git a/packages/storybook-react/src/stories/NumberBadge.stories.tsx b/packages/storybook-react/src/stories/NumberBadge.stories.tsx index 3383f4cdc00..257e3279e6d 100644 --- a/packages/storybook-react/src/stories/NumberBadge.stories.tsx +++ b/packages/storybook-react/src/stories/NumberBadge.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { NumberBadge, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/number-badge-css/README.md?raw'; -import tokensDefinition from '@utrecht/number-badge-css/src/tokens.json'; +import tokensDefinition from '@utrecht/number-badge-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Badge counter', diff --git a/packages/storybook-react/src/stories/OrderedList.stories.tsx b/packages/storybook-react/src/stories/OrderedList.stories.tsx index 26483b4f182..ca786b3cdba 100644 --- a/packages/storybook-react/src/stories/OrderedList.stories.tsx +++ b/packages/storybook-react/src/stories/OrderedList.stories.tsx @@ -2,11 +2,11 @@ import { Meta, StoryObj } from '@storybook/react'; import { OrderedList, OrderedListItem } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/ordered-list-css/README.md?raw'; -import tokensDefinition from '@utrecht/ordered-list-css/src/tokens.json'; +import tokensDefinition from '@utrecht/ordered-list-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Ordered List', diff --git a/packages/storybook-react/src/stories/Page.stories.tsx b/packages/storybook-react/src/stories/Page.stories.tsx index b7d0e1ba5c9..d0b096c23ca 100644 --- a/packages/storybook-react/src/stories/Page.stories.tsx +++ b/packages/storybook-react/src/stories/Page.stories.tsx @@ -1,13 +1,13 @@ import { Meta, StoryObj } from '@storybook/react'; import { Page } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/page-css/README.md?raw'; -import tokensDefinition from '@utrecht/page-css/src/tokens.json'; +import tokensDefinition from '@utrecht/page-css/dist/tokens.mjs'; import React from 'react'; -import { Default as PageContent } from './PageContent.stories'; -import { Default as PageHeader } from './PageContent.stories'; -import { Default as PageFooter } from './PageFooter.stories'; -import { designTokenStory } from './util'; +import { Default as PageContent } from './PageContent.stories.js'; +import { Default as PageHeader } from './PageContent.stories.js'; +import { Default as PageFooter } from './PageFooter.stories.js'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Page', diff --git a/packages/storybook-react/src/stories/PageContent.stories.tsx b/packages/storybook-react/src/stories/PageContent.stories.tsx index b0362f06dbe..cad64e1cde9 100644 --- a/packages/storybook-react/src/stories/PageContent.stories.tsx +++ b/packages/storybook-react/src/stories/PageContent.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { PageContent, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/page-content-css/README.md?raw'; -import tokensDefinition from '@utrecht/page-content-css/src/tokens.json'; +import tokensDefinition from '@utrecht/page-content-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Page Content', diff --git a/packages/storybook-react/src/stories/PageFooter.stories.tsx b/packages/storybook-react/src/stories/PageFooter.stories.tsx index 92c02c7d73e..54dcd03c93a 100644 --- a/packages/storybook-react/src/stories/PageFooter.stories.tsx +++ b/packages/storybook-react/src/stories/PageFooter.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { PageFooter, Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/page-footer-css/README.md?raw'; -import tokensDefinition from '@utrecht/page-footer-css/src/tokens.json'; +import tokensDefinition from '@utrecht/page-footer-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Page Footer', diff --git a/packages/storybook-react/src/stories/PageHeader.stories.tsx b/packages/storybook-react/src/stories/PageHeader.stories.tsx index be61eff0c14..f9375e0ae86 100644 --- a/packages/storybook-react/src/stories/PageHeader.stories.tsx +++ b/packages/storybook-react/src/stories/PageHeader.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Heading1, PageHeader } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/page-header-css/README.md?raw'; -import tokensDefinition from '@utrecht/page-header-css/src/tokens.json'; +import tokensDefinition from '@utrecht/page-header-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Page Header', diff --git a/packages/storybook-react/src/stories/Paragraph.stories.tsx b/packages/storybook-react/src/stories/Paragraph.stories.tsx index 66c3f07eb98..28154bf53a5 100644 --- a/packages/storybook-react/src/stories/Paragraph.stories.tsx +++ b/packages/storybook-react/src/stories/Paragraph.stories.tsx @@ -1,9 +1,9 @@ import readme from '@nl-design-system-unstable/documentation/componenten/_paragraph.md?raw'; import { Meta, StoryObj } from '@storybook/react'; import { Paragraph } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import tokensDefinition from '@utrecht/paragraph-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import tokensDefinition from '@utrecht/paragraph-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Paragraph', diff --git a/packages/storybook-react/src/stories/PreHeading.stories.tsx b/packages/storybook-react/src/stories/PreHeading.stories.tsx index 57a5493e48e..21876badabd 100644 --- a/packages/storybook-react/src/stories/PreHeading.stories.tsx +++ b/packages/storybook-react/src/stories/PreHeading.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { PreHeading } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/pre-heading-css/README.md?raw'; -import tokensDefinition from '@utrecht/pre-heading-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/pre-heading-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Pre-heading', diff --git a/packages/storybook-react/src/stories/PreserveData.stories.tsx b/packages/storybook-react/src/stories/PreserveData.stories.tsx index 95bd95ac050..4c84fdab324 100644 --- a/packages/storybook-react/src/stories/PreserveData.stories.tsx +++ b/packages/storybook-react/src/stories/PreserveData.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Paragraph, PreserveData } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/preserve-data-css/README.md?raw'; -import tokensDefinition from '@utrecht/preserve-data-css/src/tokens.json'; +import tokensDefinition from '@utrecht/preserve-data-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Preserve data', diff --git a/packages/storybook-react/src/stories/ProcessSteps.stories.tsx b/packages/storybook-react/src/stories/ProcessSteps.stories.tsx index d55e5137a15..cff67c986db 100644 --- a/packages/storybook-react/src/stories/ProcessSteps.stories.tsx +++ b/packages/storybook-react/src/stories/ProcessSteps.stories.tsx @@ -1,7 +1,7 @@ import Status from '@gemeente-denhaag/process-steps'; import { Meta, StoryObj } from '@storybook/react'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import { designTokenStory } from './util'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import { designTokenStory } from './util.js'; import readme from '../../../../components/process-steps/README.md?raw'; import tokensDefinition from '../../../../components/process-steps/src/tokens.json'; import '@gemeente-denhaag/process-steps/index.css'; diff --git a/packages/storybook-react/src/stories/RadioButton.stories.tsx b/packages/storybook-react/src/stories/RadioButton.stories.tsx index 0fcc0f18764..e2a1e8a6722 100644 --- a/packages/storybook-react/src/stories/RadioButton.stories.tsx +++ b/packages/storybook-react/src/stories/RadioButton.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { FormField, FormLabel, RadioButton } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/radio-button-css/README.md?raw'; -import tokensDefinition from '@utrecht/radio-button-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/radio-button-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Radio Button', diff --git a/packages/storybook-react/src/stories/ScrollLink.stories.tsx b/packages/storybook-react/src/stories/ScrollLink.stories.tsx index b1f3da959e5..d689de3c472 100644 --- a/packages/storybook-react/src/stories/ScrollLink.stories.tsx +++ b/packages/storybook-react/src/stories/ScrollLink.stories.tsx @@ -8,11 +8,11 @@ import { Paragraph, ScrollLink, } from '@utrecht/component-library-react/dist/css-module/index'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import { UtrechtIconChevronUp } from '@utrecht/web-component-library-react'; import React from 'react'; import type { PropsWithChildren } from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const DemoPage = ({ children }: PropsWithChildren) => ( diff --git a/packages/storybook-react/src/stories/Select.stories.tsx b/packages/storybook-react/src/stories/Select.stories.tsx index 672f669ee66..654bc23bb4d 100644 --- a/packages/storybook-react/src/stories/Select.stories.tsx +++ b/packages/storybook-react/src/stories/Select.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Select, SelectOption } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/select-css/README.md?raw'; -import tokensDefinition from '@utrecht/select-css/src/tokens.json'; +import tokensDefinition from '@utrecht/select-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; interface SelectOptions { value: string; diff --git a/packages/storybook-react/src/stories/Separator.stories.tsx b/packages/storybook-react/src/stories/Separator.stories.tsx index 6b080cc04f5..259e40b135d 100644 --- a/packages/storybook-react/src/stories/Separator.stories.tsx +++ b/packages/storybook-react/src/stories/Separator.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Separator } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/separator-css/README.md?raw'; -import tokensDefinition from '@utrecht/separator-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/separator-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Separator', diff --git a/packages/storybook-react/src/stories/SkipLink.stories.tsx b/packages/storybook-react/src/stories/SkipLink.stories.tsx index 059105a1ee7..efcc6927291 100644 --- a/packages/storybook-react/src/stories/SkipLink.stories.tsx +++ b/packages/storybook-react/src/stories/SkipLink.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { SkipLink } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/skip-link-css/README.md?raw'; -import tokensDefinition from '@utrecht/skip-link-css/src/tokens.json'; +import tokensDefinition from '@utrecht/skip-link-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; // `will-change: transform` will create a "containing block" that will contain `position: fixed` elements. const ExampleViewport = (Story: () => React.ReactElement>) => ( diff --git a/packages/storybook-react/src/stories/SpotlightSection.stories.tsx b/packages/storybook-react/src/stories/SpotlightSection.stories.tsx index 9b8dfa7528c..ced35471754 100644 --- a/packages/storybook-react/src/stories/SpotlightSection.stories.tsx +++ b/packages/storybook-react/src/stories/SpotlightSection.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Heading1, Paragraph, SpotlightSection } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/spotlight-section-css/README.md?raw'; -import tokensDefinition from '@utrecht/spotlight-section-css/src/tokens.json'; +import tokensDefinition from '@utrecht/spotlight-section-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Spotlight section', diff --git a/packages/storybook-react/src/stories/StatusBadge.stories.tsx b/packages/storybook-react/src/stories/StatusBadge.stories.tsx index 5f4e0353368..f322324df5b 100644 --- a/packages/storybook-react/src/stories/StatusBadge.stories.tsx +++ b/packages/storybook-react/src/stories/StatusBadge.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; -import tokensDefinition from '@utrecht/badge-data-css/src/tokens.json'; +import tokensDefinition from '@utrecht/badge-data-css/dist/tokens.mjs'; import readme from '@utrecht/badge-status-css/README.md?raw'; import { Paragraph, StatusBadge } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Status badge', diff --git a/packages/storybook-react/src/stories/Strong.stories.tsx b/packages/storybook-react/src/stories/Strong.stories.tsx index c88b1d27f17..4b23de668e9 100644 --- a/packages/storybook-react/src/stories/Strong.stories.tsx +++ b/packages/storybook-react/src/stories/Strong.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Paragraph, Strong } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/emphasis-css/README.md?raw'; -import tokensDefinition from '@utrecht/emphasis-css/src/tokens.json'; +import tokensDefinition from '@utrecht/emphasis-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Strong', diff --git a/packages/storybook-react/src/stories/Subscript.stories.tsx b/packages/storybook-react/src/stories/Subscript.stories.tsx index 9421d41d471..38d8d190f12 100644 --- a/packages/storybook-react/src/stories/Subscript.stories.tsx +++ b/packages/storybook-react/src/stories/Subscript.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Subscript } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/subscript-css/README.md?raw'; -import tokensDefinition from '@utrecht/subscript-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/subscript-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Subscript', diff --git a/packages/storybook-react/src/stories/Superscript.stories.tsx b/packages/storybook-react/src/stories/Superscript.stories.tsx index d85a05184d9..baa6150e072 100644 --- a/packages/storybook-react/src/stories/Superscript.stories.tsx +++ b/packages/storybook-react/src/stories/Superscript.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Superscript } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/superscript-css/README.md?raw'; -import tokensDefinition from '@utrecht/superscript-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/superscript-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Superscript', diff --git a/packages/storybook-react/src/stories/Surface.stories.tsx b/packages/storybook-react/src/stories/Surface.stories.tsx index 6ebf00bc5ec..a016db1ff3e 100644 --- a/packages/storybook-react/src/stories/Surface.stories.tsx +++ b/packages/storybook-react/src/stories/Surface.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Surface } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/surface-css/README.md?raw'; -import tokensDefinition from '@utrecht/surface-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/surface-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Surface', diff --git a/packages/storybook-react/src/stories/Table.stories.tsx b/packages/storybook-react/src/stories/Table.stories.tsx index 80aabfcff05..22c33471e08 100644 --- a/packages/storybook-react/src/stories/Table.stories.tsx +++ b/packages/storybook-react/src/stories/Table.stories.tsx @@ -8,11 +8,11 @@ import { TableHeaderCell, TableRow, } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/table-css/README.md?raw'; -import tokensDefinition from '@utrecht/table-css/src/tokens.json'; +import tokensDefinition from '@utrecht/table-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Table', diff --git a/packages/storybook-react/src/stories/Textarea.stories.tsx b/packages/storybook-react/src/stories/Textarea.stories.tsx index 77c20a5c9b3..28fba24215b 100644 --- a/packages/storybook-react/src/stories/Textarea.stories.tsx +++ b/packages/storybook-react/src/stories/Textarea.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Textarea } from '@utrecht/component-library-react/dist/css-module/index'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/textarea-css/README.md?raw'; -import tokensDefinition from '@utrecht/textarea-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/textarea-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Textarea', diff --git a/packages/storybook-react/src/stories/Textbox.stories.tsx b/packages/storybook-react/src/stories/Textbox.stories.tsx index ba12badd232..44176731d91 100644 --- a/packages/storybook-react/src/stories/Textbox.stories.tsx +++ b/packages/storybook-react/src/stories/Textbox.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { Textbox } from '@utrecht/component-library-react/dist/css-module/index'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/textbox-css/README.md?raw'; -import tokensDefinition from '@utrecht/textbox-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokensDefinition from '@utrecht/textbox-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Textbox', diff --git a/packages/storybook-react/src/stories/UnorderedList.stories.tsx b/packages/storybook-react/src/stories/UnorderedList.stories.tsx index 67aebb47bb3..52f89088d9f 100644 --- a/packages/storybook-react/src/stories/UnorderedList.stories.tsx +++ b/packages/storybook-react/src/stories/UnorderedList.stories.tsx @@ -2,11 +2,11 @@ import { Meta, StoryObj } from '@storybook/react'; import { UnorderedList, UnorderedListItem } from '@utrecht/component-library-react/dist/css-module'; -import tokens from '@utrecht/design-tokens/dist/index.json'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; import readme from '@utrecht/unordered-list-css/README.md?raw'; -import tokensDefinition from '@utrecht/unordered-list-css/src/tokens.json'; +import tokensDefinition from '@utrecht/unordered-list-css/dist/tokens.mjs'; import React from 'react'; -import { designTokenStory } from './util'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Unordered List', diff --git a/packages/storybook-react/src/stories/VegaVisualization.stories.tsx b/packages/storybook-react/src/stories/VegaVisualization.stories.tsx index ad64dbccee9..58e43d12dd9 100644 --- a/packages/storybook-react/src/stories/VegaVisualization.stories.tsx +++ b/packages/storybook-react/src/stories/VegaVisualization.stories.tsx @@ -1,15 +1,15 @@ import { Meta, StoryObj } from '@storybook/react'; import { VegaVisualization } from '@utrecht/component-library-react/dist/css-module/VegaVisualization'; -import tokens from '@utrecht/design-tokens/dist/index.json'; -import tokensDefinition from '@utrecht/vega-visualization-css/src/tokens.json'; -import { designTokenStory } from './util'; +import tokens from '@utrecht/design-tokens/dist/list.mjs'; +import tokensDefinition from '@utrecht/vega-visualization-css/dist/tokens.mjs'; +import { designTokenStory } from './util.js'; const meta = { title: 'React Component/Vega Visualization', id: 'react-vega-visualization', component: VegaVisualization, argTypes: { - 'aria-label': { + label: { description: 'Accessible label to describe the visualization on screen readers.', control: { type: 'string', @@ -35,7 +35,7 @@ type Story = StoryObj; export const BarChart: Story = { args: { - 'aria-label': 'Grafiek van data', + label: 'Grafiek van data', spec: { $schema: 'https://vega.github.io/schema/vega-lite/v5.json', description: 'A simple bar chart with embedded data.', @@ -64,7 +64,7 @@ export const BarChart: Story = { export const GroupedBarChart: Story = { args: { - 'aria-label': 'Grafiek van data', + label: 'Grafiek van data', spec: { $schema: 'https://vega.github.io/schema/vega-lite/v5.json', data: { @@ -93,7 +93,7 @@ export const GroupedBarChart: Story = { export const LineChart: Story = { args: { - 'aria-label': 'Grafiek van data', + label: 'Grafiek van data', spec: { $schema: 'https://vega.github.io/schema/vega-lite/v5.json', description: 'A simple line chart with embedded data.', @@ -125,7 +125,7 @@ export const LineChart: Story = { export const PieChart: Story = { args: { - 'aria-label': 'Grafiek van data', + label: 'Grafiek van data', spec: { $schema: 'https://vega.github.io/schema/vega-lite/v5.json', description: 'A simple pie chart with embedded data.', diff --git a/packages/storybook-react/src/stories/disabled.SearchBar.stories b/packages/storybook-react/src/stories/disabled.SearchBar.stories index 0565921f4db..b467aa452f1 100644 --- a/packages/storybook-react/src/stories/disabled.SearchBar.stories +++ b/packages/storybook-react/src/stories/disabled.SearchBar.stories @@ -1,9 +1,9 @@ // import type { Meta, StoryObj } from '@storybook/react'; // import { SearchBar } from '@utrecht/component-library-react/dist/css-module/index'; -// import tokensDefinition from '@utrecht/search-bar-css/src/tokens.json'; -// import tokens from '@utrecht/design-tokens/dist/index.json'; +// import tokensDefinition from '@utrecht/search-bar-css/dist/tokens.mjs'; +// import tokens from '@utrecht/design-tokens/dist/list.mjs'; // import React from 'react'; -// import { designTokenStory } from './util'; +// import { designTokenStory } from './util.js'; // const languages = [ // { diff --git a/packages/storybook-react/src/stories/open-forms/BSN.stories.tsx b/packages/storybook-react/src/stories/open-forms/BSN.stories.tsx index e0cc59d90d5..267bda0314c 100644 --- a/packages/storybook-react/src/stories/open-forms/BSN.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/BSN.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-bsn', diff --git a/packages/storybook-react/src/stories/open-forms/Checkbox.stories.tsx b/packages/storybook-react/src/stories/open-forms/Checkbox.stories.tsx index a169afa2fcb..9b4afef4186 100644 --- a/packages/storybook-react/src/stories/open-forms/Checkbox.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Checkbox.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-checkbox', diff --git a/packages/storybook-react/src/stories/open-forms/Columns.stories.tsx b/packages/storybook-react/src/stories/open-forms/Columns.stories.tsx index 86f049ce6e9..dd08d464654 100644 --- a/packages/storybook-react/src/stories/open-forms/Columns.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Columns.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-columns', diff --git a/packages/storybook-react/src/stories/open-forms/Content.stories.tsx b/packages/storybook-react/src/stories/open-forms/Content.stories.tsx index 09f594e2054..8a71a08ddb4 100644 --- a/packages/storybook-react/src/stories/open-forms/Content.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Content.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-content', diff --git a/packages/storybook-react/src/stories/open-forms/Currency.stories.tsx b/packages/storybook-react/src/stories/open-forms/Currency.stories.tsx index 0b569e1cc19..f9fcab26678 100644 --- a/packages/storybook-react/src/stories/open-forms/Currency.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Currency.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-currency', diff --git a/packages/storybook-react/src/stories/open-forms/DateField.stories.tsx b/packages/storybook-react/src/stories/open-forms/DateField.stories.tsx index e7f6fc8e0c4..7a2c051f0b3 100644 --- a/packages/storybook-react/src/stories/open-forms/DateField.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/DateField.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-date-field', diff --git a/packages/storybook-react/src/stories/open-forms/DateTimeField.stories.tsx b/packages/storybook-react/src/stories/open-forms/DateTimeField.stories.tsx index e54701e1c85..0e140418f6e 100644 --- a/packages/storybook-react/src/stories/open-forms/DateTimeField.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/DateTimeField.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-date-time-field', diff --git a/packages/storybook-react/src/stories/open-forms/EditGrid.stories.tsx b/packages/storybook-react/src/stories/open-forms/EditGrid.stories.tsx index 6e5c216b365..bc26f08e7dd 100644 --- a/packages/storybook-react/src/stories/open-forms/EditGrid.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/EditGrid.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const innerComponents = [ { diff --git a/packages/storybook-react/src/stories/open-forms/Email.stories.tsx b/packages/storybook-react/src/stories/open-forms/Email.stories.tsx index fd5a8a7e6f7..c60ec63ed75 100644 --- a/packages/storybook-react/src/stories/open-forms/Email.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Email.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-email', diff --git a/packages/storybook-react/src/stories/open-forms/FieldSet.stories.tsx b/packages/storybook-react/src/stories/open-forms/FieldSet.stories.tsx index e6d68b0f0ad..5bc2b703d92 100644 --- a/packages/storybook-react/src/stories/open-forms/FieldSet.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/FieldSet.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-fieldset', diff --git a/packages/storybook-react/src/stories/open-forms/IBANField.stories.tsx b/packages/storybook-react/src/stories/open-forms/IBANField.stories.tsx index f20aebd46dd..b2edb6e7af3 100644 --- a/packages/storybook-react/src/stories/open-forms/IBANField.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/IBANField.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-iban', diff --git a/packages/storybook-react/src/stories/open-forms/LicensePlate.stories.tsx b/packages/storybook-react/src/stories/open-forms/LicensePlate.stories.tsx index 3eca3dc08d1..6fd1a08d64a 100644 --- a/packages/storybook-react/src/stories/open-forms/LicensePlate.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/LicensePlate.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-license-plate', diff --git a/packages/storybook-react/src/stories/open-forms/Number.stories.tsx b/packages/storybook-react/src/stories/open-forms/Number.stories.tsx index 671b8f764c5..20301881ebb 100644 --- a/packages/storybook-react/src/stories/open-forms/Number.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Number.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-number', diff --git a/packages/storybook-react/src/stories/open-forms/OpenFormsVoorbeeld.stories.tsx b/packages/storybook-react/src/stories/open-forms/OpenFormsVoorbeeld.stories.tsx index bef706b26dd..014496e17f1 100644 --- a/packages/storybook-react/src/stories/open-forms/OpenFormsVoorbeeld.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/OpenFormsVoorbeeld.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { MultipleFormioComponents } from './StoryUtil'; +import { MultipleFormioComponents } from './StoryUtil.js'; const meta = { id: 'open-forms-voorbeeld', diff --git a/packages/storybook-react/src/stories/open-forms/PhoneNumberField.stories.tsx b/packages/storybook-react/src/stories/open-forms/PhoneNumberField.stories.tsx index dcc751f49b3..cdaecfb167f 100644 --- a/packages/storybook-react/src/stories/open-forms/PhoneNumberField.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/PhoneNumberField.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-phone-number', diff --git a/packages/storybook-react/src/stories/open-forms/PostcodeField.stories.tsx b/packages/storybook-react/src/stories/open-forms/PostcodeField.stories.tsx index 9b86f876ab1..cd8820c1c6d 100644 --- a/packages/storybook-react/src/stories/open-forms/PostcodeField.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/PostcodeField.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-postcode', diff --git a/packages/storybook-react/src/stories/open-forms/Radio.stories.tsx b/packages/storybook-react/src/stories/open-forms/Radio.stories.tsx index d3f3c362156..f3213e8b849 100644 --- a/packages/storybook-react/src/stories/open-forms/Radio.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Radio.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-radio', diff --git a/packages/storybook-react/src/stories/open-forms/Select.stories.tsx b/packages/storybook-react/src/stories/open-forms/Select.stories.tsx index 8ae32961507..9ef43defc09 100644 --- a/packages/storybook-react/src/stories/open-forms/Select.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Select.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-select', diff --git a/packages/storybook-react/src/stories/open-forms/Selectboxes.stories.tsx b/packages/storybook-react/src/stories/open-forms/Selectboxes.stories.tsx index a99efd0eda5..5473e7c802e 100644 --- a/packages/storybook-react/src/stories/open-forms/Selectboxes.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Selectboxes.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-selectboxes', diff --git a/packages/storybook-react/src/stories/open-forms/Signature.stories.tsx b/packages/storybook-react/src/stories/open-forms/Signature.stories.tsx index 63abd852fb8..82cc239f5fd 100644 --- a/packages/storybook-react/src/stories/open-forms/Signature.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Signature.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-signature', diff --git a/packages/storybook-react/src/stories/open-forms/Textarea.stories.tsx b/packages/storybook-react/src/stories/open-forms/Textarea.stories.tsx index 1b62069a95a..75f73588ef6 100644 --- a/packages/storybook-react/src/stories/open-forms/Textarea.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Textarea.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-textarea', diff --git a/packages/storybook-react/src/stories/open-forms/Textfield.stories.tsx b/packages/storybook-react/src/stories/open-forms/Textfield.stories.tsx index 8b395946a25..9f3bf319d9b 100644 --- a/packages/storybook-react/src/stories/open-forms/Textfield.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/Textfield.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-textfield', diff --git a/packages/storybook-react/src/stories/open-forms/TimeField.stories.tsx b/packages/storybook-react/src/stories/open-forms/TimeField.stories.tsx index fe0233baa1b..41a5d2ca594 100644 --- a/packages/storybook-react/src/stories/open-forms/TimeField.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/TimeField.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-timefield', diff --git a/packages/storybook-react/src/stories/open-forms/cosign.stories.tsx b/packages/storybook-react/src/stories/open-forms/cosign.stories.tsx index 9849972988e..c72fdb29922 100644 --- a/packages/storybook-react/src/stories/open-forms/cosign.stories.tsx +++ b/packages/storybook-react/src/stories/open-forms/cosign.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { SingleFormioComponent } from './StoryUtil'; +import { SingleFormioComponent } from './StoryUtil.js'; const meta = { id: 'open-forms-cosign', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx index 9759af02b77..3506d13b86d 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx @@ -26,8 +26,8 @@ import { import { UtrechtIconArrow, UtrechtIconChevronLeft } from '@utrecht/web-component-library-react'; import React from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Stap 1', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx index ffb66671fb8..5a46ca0edfe 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx @@ -23,8 +23,8 @@ import { import { UtrechtIconArrow, UtrechtIconChevronLeft } from '@utrecht/web-component-library-react'; import React from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Stap 2', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx index 394ce0e3396..543f4a3310f 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx @@ -34,8 +34,8 @@ import { } from '@utrecht/web-component-library-react'; import React, { useRef, useState } from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Stap 3', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx index 93e771b0aed..21fac01d5eb 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx @@ -35,8 +35,8 @@ import { } from '@utrecht/web-component-library-react'; import React, { useRef, useState } from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Stap 4', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/introductie.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/introductie.stories.tsx index dfec83818aa..26cde244ea8 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/introductie.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/introductie.stories.tsx @@ -48,9 +48,9 @@ import { } from '@utrecht/web-component-library-react'; import React from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import IntroductieKlachten from '../prototype-src/IntroductieKlachtenFormulier'; // Importeer het footer-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import IntroductieKlachten from '../prototype-src/IntroductieKlachtenFormulier.js'; // Importeer het footer-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Introductie ', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/scenario.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/scenario.stories.tsx index 8fa3427d51c..e388f052829 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/scenario.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/scenario.stories.tsx @@ -48,9 +48,9 @@ import { } from '@utrecht/web-component-library-react'; import React from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import ScenarioKlachten from '../prototype-src/ScenarioKlachtenFormulier'; // Importeer het scenario-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import ScenarioKlachten from '../prototype-src/ScenarioKlachtenFormulier.js'; // Importeer het scenario-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Scenario', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/speeltuin.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/speeltuin.stories.tsx index d253493daca..c4b6550d87a 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/speeltuin.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/speeltuin.stories.tsx @@ -29,7 +29,7 @@ import { } from '@utrecht/web-component-library-react'; import React, { useState } from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Speeltuin', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx index c36781a97e9..f62924f9731 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx @@ -26,8 +26,8 @@ import { import { UtrechtIconArrow, UtrechtIconChevronLeft } from '@utrecht/web-component-library-react'; import React from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Stap 1', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx index 7cb621432a3..b6dae2f5bc3 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx @@ -23,8 +23,8 @@ import { import { UtrechtIconArrow, UtrechtIconChevronLeft } from '@utrecht/web-component-library-react'; import React from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Stap 2', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx index 4c888322ca6..e9a896d1e16 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx @@ -34,8 +34,8 @@ import { } from '@utrecht/web-component-library-react'; import React, { useRef, useState } from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Stap 3', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage4.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage4.stories.tsx index 9b04c97916a..bea69d9cb0f 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage4.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage4.stories.tsx @@ -28,8 +28,8 @@ import { import { UtrechtIconArrow, UtrechtIconChevronLeft } from '@utrecht/web-component-library-react'; import React from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-componentnt -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-componentnt +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Stap 4', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/introductie.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/introductie.stories.tsx index e90eb2279bb..2b0f8e28835 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/introductie.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/introductie.stories.tsx @@ -48,9 +48,9 @@ import { } from '@utrecht/web-component-library-react'; import React from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import IntroductieKlachten from '../prototype-src/IntroductieKlachtenFormulier'; // Importeer het footer-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import IntroductieKlachten from '../prototype-src/IntroductieKlachtenFormulier.js'; // Importeer het footer-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Introductie ', diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx index 5c13d8922cd..e75ac4b252c 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx @@ -48,9 +48,9 @@ import { } from '@utrecht/web-component-library-react'; import React from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component -import ScenarioKlachten from '../prototype-src/ScenarioKlachtenFormulier'; // Importeer het scenario-component -import urls from '../prototype-src/variables'; +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier.js'; // Importeer het footer-component +import ScenarioKlachten from '../prototype-src/ScenarioKlachtenFormulier.js'; // Importeer het scenario-component +import urls from '../prototype-src/variables.js'; const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Scenario', diff --git a/packages/storybook-react/src/stories/template/PageStep-4.stories.tsx b/packages/storybook-react/src/stories/template/PageStep-4.stories.tsx index 45c6e9d4df3..2dd78a4065f 100644 --- a/packages/storybook-react/src/stories/template/PageStep-4.stories.tsx +++ b/packages/storybook-react/src/stories/template/PageStep-4.stories.tsx @@ -30,7 +30,6 @@ import { UtrechtLogo, } from '@utrecht/web-component-library-react'; import React from 'react'; -import FooterKlachten from './FooterKlachtenFormulier'; // Importeer het footer-component const meta = { title: 'Template/Multistep form/Step 4', diff --git a/packages/storybook-react/tsconfig.json b/packages/storybook-react/tsconfig.json index 8ade4e7b907..be877e1ab8e 100644 --- a/packages/storybook-react/tsconfig.json +++ b/packages/storybook-react/tsconfig.json @@ -3,7 +3,9 @@ "allowSyntheticDefaultImports": true, "esModuleInterop": true, "jsx": "react-jsx", - "resolveJsonModule": true + "skipLibCheck": true, + "moduleResolution": "nodenext", + "module": "NodeNext" }, "extends": "../../tsconfig.json", "include": ["config/**/*.ts", "config/**/*.tsx", "src/**/*.ts", "src/**/*.tsx"], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 02ed118d1bd..fc45a134e26 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -417,7 +417,11 @@ importers: specifier: workspace:* version: link:../focus-ring - components/heading: {} + components/heading: + devDependencies: + '@utrecht/build-utils-css': + specifier: workspace:* + version: link:../../packages/build-utils-css components/heading-1: devDependencies: @@ -5205,6 +5209,9 @@ importers: '@storybook/theming': specifier: 7.4.6 version: 7.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@storybook/types': + specifier: 7.4.6 + version: 7.4.6 '@types/lodash.merge': specifier: 4.6.9 version: 4.6.9 @@ -14783,10 +14790,6 @@ packages: resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==} engines: {node: '>=10'} - define-data-property@1.1.1: - resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==} - engines: {node: '>= 0.4'} - define-data-property@1.1.4: resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==} engines: {node: '>= 0.4'} @@ -16585,9 +16588,6 @@ packages: resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} engines: {node: '>=8'} - has-property-descriptors@1.0.1: - resolution: {integrity: sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==} - has-property-descriptors@1.0.2: resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==} @@ -21872,10 +21872,6 @@ packages: set-blocking@2.0.0: resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==} - set-function-length@1.1.1: - resolution: {integrity: sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==} - engines: {node: '>= 0.4'} - set-function-length@1.2.2: resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==} engines: {node: '>= 0.4'} @@ -21946,9 +21942,6 @@ packages: engines: {node: '>=4'} hasBin: true - side-channel@1.0.4: - resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} - side-channel@1.0.6: resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==} engines: {node: '>= 0.4'} @@ -36522,7 +36515,7 @@ snapshots: dependencies: function-bind: 1.1.2 get-intrinsic: 1.2.4 - set-function-length: 1.1.1 + set-function-length: 1.2.2 call-bind@1.0.7: dependencies: @@ -37809,12 +37802,6 @@ snapshots: defer-to-connect@2.0.1: {} - define-data-property@1.1.1: - dependencies: - get-intrinsic: 1.2.4 - gopd: 1.0.1 - has-property-descriptors: 1.0.1 - define-data-property@1.1.4: dependencies: es-define-property: 1.0.0 @@ -37825,8 +37812,8 @@ snapshots: define-properties@1.2.1: dependencies: - define-data-property: 1.1.1 - has-property-descriptors: 1.0.1 + define-data-property: 1.1.4 + has-property-descriptors: 1.0.2 object-keys: 1.1.1 define-property@0.2.5: @@ -38255,10 +38242,10 @@ snapshots: get-symbol-description: 1.0.0 globalthis: 1.0.3 gopd: 1.0.1 - has-property-descriptors: 1.0.1 - has-proto: 1.0.1 + has-property-descriptors: 1.0.2 + has-proto: 1.0.3 has-symbols: 1.0.3 - hasown: 2.0.0 + hasown: 2.0.2 internal-slot: 1.0.6 is-array-buffer: 3.0.4 is-callable: 1.2.7 @@ -38397,7 +38384,7 @@ snapshots: dependencies: get-intrinsic: 1.2.4 has-tostringtag: 1.0.0 - hasown: 2.0.0 + hasown: 2.0.2 es-set-tostringtag@2.0.3: dependencies: @@ -38407,7 +38394,7 @@ snapshots: es-shim-unscopables@1.0.2: dependencies: - hasown: 2.0.0 + hasown: 2.0.2 es-to-primitive@1.2.1: dependencies: @@ -40307,9 +40294,9 @@ snapshots: get-intrinsic@1.2.2: dependencies: function-bind: 1.1.2 - has-proto: 1.0.1 + has-proto: 1.0.3 has-symbols: 1.0.3 - hasown: 2.0.0 + hasown: 2.0.2 get-intrinsic@1.2.4: dependencies: @@ -40650,10 +40637,6 @@ snapshots: has-flag@4.0.0: {} - has-property-descriptors@1.0.1: - dependencies: - get-intrinsic: 1.2.4 - has-property-descriptors@1.0.2: dependencies: es-define-property: 1.0.0 @@ -41324,13 +41307,13 @@ snapshots: internal-slot@1.0.6: dependencies: get-intrinsic: 1.2.4 - hasown: 2.0.0 + hasown: 2.0.2 side-channel: 1.0.6 internal-slot@1.0.7: dependencies: es-errors: 1.3.0 - hasown: 2.0.0 + hasown: 2.0.2 side-channel: 1.0.6 internmap@2.0.3: {} @@ -41383,7 +41366,7 @@ snapshots: is-arguments@1.1.1: dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 has-tostringtag: 1.0.0 is-array-buffer@3.0.4: @@ -46422,11 +46405,11 @@ snapshots: qs@6.11.0: dependencies: - side-channel: 1.0.4 + side-channel: 1.0.6 qs@6.11.2: dependencies: - side-channel: 1.0.4 + side-channel: 1.0.6 query-string@6.14.1: dependencies: @@ -47898,13 +47881,6 @@ snapshots: set-blocking@2.0.0: {} - set-function-length@1.1.1: - dependencies: - define-data-property: 1.1.1 - get-intrinsic: 1.2.4 - gopd: 1.0.1 - has-property-descriptors: 1.0.1 - set-function-length@1.2.2: dependencies: define-data-property: 1.1.4 @@ -47916,9 +47892,9 @@ snapshots: set-function-name@2.0.1: dependencies: - define-data-property: 1.1.1 + define-data-property: 1.1.4 functions-have-names: 1.2.3 - has-property-descriptors: 1.0.1 + has-property-descriptors: 1.0.2 set-function-name@2.0.2: dependencies: @@ -47983,12 +47959,6 @@ snapshots: interpret: 1.4.0 rechoir: 0.6.2 - side-channel@1.0.4: - dependencies: - call-bind: 1.0.7 - get-intrinsic: 1.2.4 - object-inspect: 1.13.1 - side-channel@1.0.6: dependencies: call-bind: 1.0.7 @@ -48538,7 +48508,7 @@ snapshots: internal-slot: 1.0.6 regexp.prototype.flags: 1.5.1 set-function-name: 2.0.1 - side-channel: 1.0.4 + side-channel: 1.0.6 string.prototype.matchall@4.0.11: dependencies: @@ -50978,7 +50948,7 @@ snapshots: which-typed-array@1.1.13: dependencies: available-typed-arrays: 1.0.5 - call-bind: 1.0.5 + call-bind: 1.0.7 for-each: 0.3.3 gopd: 1.0.1 has-tostringtag: 1.0.0 diff --git a/proprietary/design-tokens/style-dictionary-config.mjs b/proprietary/design-tokens/style-dictionary-config.mjs index f1d54e63eb7..94ff6baa8d6 100644 --- a/proprietary/design-tokens/style-dictionary-config.mjs +++ b/proprietary/design-tokens/style-dictionary-config.mjs @@ -10,6 +10,25 @@ export const createStyleDictionaryConfig = ({ themeName, source = ['src/**/*.tok 'json/list': function ({ dictionary }) { return JSON.stringify(dictionary.allTokens.sort(sortByName), null, ' '); }, + 'javascript/es6-list': function ({ dictionary }) { + return `export default ${JSON.stringify(dictionary.allTokens.sort(sortByName), null, ' ')};\n`; + }, + 'typescript/list-declarations': function ({ dictionary }) { + return ` +declare interface DesignToken { + value?: any; + type?: string; + comment?: string; + name?: string; + themeable?: boolean; + attributes?: Record; + [key: string]: any; +} + +export default tokens; + +declare const tokens: DesignToken[];`; + }, }, transforms: { 'fontSize/pxToRem': { @@ -75,6 +94,10 @@ export const createStyleDictionaryConfig = ({ themeName, source = ['src/**/*.tok destination: 'list.json', format: 'json/list', }, + { + destination: 'list.mjs', + format: 'javascript/es6-list', + }, { destination: 'variables.json', format: 'json/flat', @@ -177,6 +200,10 @@ export const createStyleDictionaryConfig = ({ themeName, source = ['src/**/*.tok format: 'typescript/module-declarations', destination: 'tokens.d.ts', }, + { + format: 'typescript/list-declarations', + destination: 'list.d.ts', + }, ], }, 'deprecated-js': {