From 86a35ca868c1c17ff4bc7d724c50e7b8f28127da Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Sat, 16 Mar 2024 23:12:28 +0000 Subject: [PATCH] extra changes --- .storybook/{SaltTheme.js => SaltTheme.ts} | 0 .storybook/main.ts | 17 +- .storybook/manager.ts | 2 +- .storybook/preview.tsx | 8 +- ...d-support.doc.mdx => help-and-support.mdx} | 0 package.json | 12 +- ....doc.stories.mdx => floating-platform.mdx} | 31 +- ...roduction.stories.mdx => introduction.mdx} | 0 ...doc.stories.mdx => salt-provider-next.mdx} | 0 .../stories/CountrySymbol.stories.tsx | 8 - .../stories/LazyCountrySymbol.qa.stories.tsx | 1 + .../stories/LazyCountrySymbol.stories.tsx | 7 - .../data-grid/stories/LazyStoryCanvas.tsx | 1 - .../{grid.doc.stories.mdx => grid.mdx} | 113 ++--- packages/icons/stories/icon.qa.stories.tsx | 1 + packages/icons/stories/icon.stories.tsx | 9 +- .../combo-box-next/combo-box-next.stories.tsx | 7 - ...layout.doc.stories.mdx => deck-layout.mdx} | 31 +- .../deck-layout/deck-layout.stories.tsx | 3 +- .../dropdown/dropdown-base.stories.tsx | 4 +- ...ayout.doc.stories.mdx => layer-layout.mdx} | 51 +-- .../{layouts.doc.stories.mdx => layouts.mdx} | 26 +- .../logo/{logo.doc.stories.mdx => logo.mdx} | 50 +-- packages/lab/stories/logo/logo.stories.tsx | 1 + .../parent-child-layout.stories.tsx | 4 + ...kip-link.doc.stories.mdx => skip-link.mdx} | 19 +- ...nput.doc.stories.mdx => stepper-input.mdx} | 42 +- .../stories/toolbar/toolbar.doc.stories.mdx | 35 -- packages/lab/stories/toolbar/toolbar.mdx | 23 + packages/lab/stories/tree/tree.stories.jsx | 1 + .../window/{window.stories.mdx => window.mdx} | 2 +- ...roduction.stories.mdx => introduction.mdx} | 2 +- ...roduction.stories.mdx => introduction.mdx} | 2 +- .../{accent.stories.mdx => accent.mdx} | 12 +- .../palettes/{error.stories.mdx => error.mdx} | 30 +- .../palettes/{info.stories.mdx => info.mdx} | 29 +- .../{interact.stories.mdx => interact.mdx} | 19 +- ...roduction.stories.mdx => introduction.mdx} | 7 +- .../{measured.stories.mdx => measured.mdx} | 13 +- .../{navigate.stories.mdx => navigate.mdx} | 11 +- .../{negative.stories.mdx => negative.mdx} | 8 +- .../{neutral.stories.mdx => neutral.mdx} | 17 +- packages/theme/stories/palettes/opacity.mdx | 72 +++ .../stories/palettes/opacity.stories.mdx | 68 --- .../{positive.stories.mdx => positive.mdx} | 8 +- .../{static.stories.mdx => static.mdx} | 10 +- .../{success.stories.mdx => success.mdx} | 30 +- .../{warning.stories.mdx => warning.mdx} | 24 +- tooling/css-inline-plugin/src/index.ts | 5 +- .../package.json | 9 +- .../src/CSSClassTable.tsx | 23 +- .../src/CharacteristicUsage.tsx | 32 +- .../src/CharacteristicUsageRow.tsx | 29 +- .../src/ClassNameRow.tsx | 4 +- .../src/EmptyBlock.tsx | 2 +- .../src/common.ts | 40 +- .../src/utils.ts | 79 ++-- .../css-variable-docgen-plugin/package.json | 6 +- yarn.lock | 416 +++++++++--------- 59 files changed, 646 insertions(+), 870 deletions(-) rename .storybook/{SaltTheme.js => SaltTheme.ts} (100%) rename docs/blocks/{help-and-support.doc.mdx => help-and-support.mdx} (100%) rename packages/core/stories/floating-platform/{floating-platform.doc.stories.mdx => floating-platform.mdx} (88%) rename packages/core/stories/{introduction.stories.mdx => introduction.mdx} (100%) rename packages/core/stories/salt-provider/{salt-provider-next.doc.stories.mdx => salt-provider-next.mdx} (100%) rename packages/data-grid/stories/{grid.doc.stories.mdx => grid.mdx} (90%) rename packages/lab/stories/deck-layout/{deck-layout.doc.stories.mdx => deck-layout.mdx} (64%) rename packages/lab/stories/layer-layout/{layer-layout.doc.stories.mdx => layer-layout.mdx} (63%) rename packages/lab/stories/layout/{layouts.doc.stories.mdx => layouts.mdx} (66%) rename packages/lab/stories/logo/{logo.doc.stories.mdx => logo.mdx} (76%) rename packages/lab/stories/skip-link/{skip-link.doc.stories.mdx => skip-link.mdx} (92%) rename packages/lab/stories/stepper-input/{stepper-input.doc.stories.mdx => stepper-input.mdx} (82%) delete mode 100644 packages/lab/stories/toolbar/toolbar.doc.stories.mdx create mode 100644 packages/lab/stories/toolbar/toolbar.mdx rename packages/lab/stories/window/{window.stories.mdx => window.mdx} (99%) rename packages/styles/stories/{introduction.stories.mdx => introduction.mdx} (98%) rename packages/theme/stories/{introduction.stories.mdx => introduction.mdx} (99%) rename packages/theme/stories/palettes/{accent.stories.mdx => accent.mdx} (86%) rename packages/theme/stories/palettes/{error.stories.mdx => error.mdx} (75%) rename packages/theme/stories/palettes/{info.stories.mdx => info.mdx} (70%) rename packages/theme/stories/palettes/{interact.stories.mdx => interact.mdx} (97%) rename packages/theme/stories/palettes/{introduction.stories.mdx => introduction.mdx} (92%) rename packages/theme/stories/palettes/{measured.stories.mdx => measured.mdx} (93%) rename packages/theme/stories/palettes/{navigate.stories.mdx => navigate.mdx} (92%) rename packages/theme/stories/palettes/{negative.stories.mdx => negative.mdx} (89%) rename packages/theme/stories/palettes/{neutral.stories.mdx => neutral.mdx} (96%) create mode 100644 packages/theme/stories/palettes/opacity.mdx delete mode 100644 packages/theme/stories/palettes/opacity.stories.mdx rename packages/theme/stories/palettes/{positive.stories.mdx => positive.mdx} (89%) rename packages/theme/stories/palettes/{static.stories.mdx => static.mdx} (71%) rename packages/theme/stories/palettes/{success.stories.mdx => success.mdx} (75%) rename packages/theme/stories/palettes/{warning.stories.mdx => warning.mdx} (79%) diff --git a/.storybook/SaltTheme.js b/.storybook/SaltTheme.ts similarity index 100% rename from .storybook/SaltTheme.js rename to .storybook/SaltTheme.ts diff --git a/.storybook/main.ts b/.storybook/main.ts index 60764c9e69c..7d5d74317a2 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -11,9 +11,11 @@ const config: StorybookConfig = { name: getAbsolutePath("@storybook/react-vite"), options: {}, }, - stories: ["../packages/*/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"], + stories: ["../packages/*/stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"], staticDirs: ["../docs/public"], - + typescript: { + reactDocgen: "react-docgen-typescript", + }, addons: [ { name: "@storybook/addon-essentials", @@ -28,7 +30,14 @@ const config: StorybookConfig = { "@storybook/addon-storysource", ], async viteFinal(config, { configType }) { - // customize the Vite config here + // https://github.com/storybookjs/storybook/issues/26532 - package-deduplication breaks ag-grid-react. + const fixedConfig = { + ...config, + plugins: config.plugins?.filter( + // @ts-ignore + (plugin) => plugin?.name !== "storybook:package-deduplication" + ), + }; const customConfig: UserConfig = { plugins: [cssInline(), cssVariableDocgen()], @@ -40,7 +49,7 @@ const config: StorybookConfig = { ); } - return mergeConfig(customConfig, config); + return mergeConfig(customConfig, fixedConfig); }, }; diff --git a/.storybook/manager.ts b/.storybook/manager.ts index d180016f347..f5f307e8361 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -1,4 +1,4 @@ -import { addons } from "@storybook/addons"; +import { addons } from "@storybook/manager-api"; import saltTheme from "./SaltTheme"; addons.setConfig({ diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 6ecb59a69f2..fd358a310ca 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,4 +1,4 @@ -import type { ArgTypes, Parameters } from "@storybook/react"; +import type { Parameters } from "@storybook/react"; import type { GlobalTypes } from "@storybook/csf"; import "@salt-ds/theme/index.css"; import "@salt-ds/theme/css/theme-next.css"; @@ -139,9 +139,9 @@ export const globalTypes: GlobalTypes = { }, }; -export const argTypes: ArgTypes = { - ref: { control: { type: null } }, -}; +// export const argTypes: ArgTypes = { +// ref: { control: { type: null } }, +// }; export const parameters: Parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, diff --git a/docs/blocks/help-and-support.doc.mdx b/docs/blocks/help-and-support.mdx similarity index 100% rename from docs/blocks/help-and-support.doc.mdx rename to docs/blocks/help-and-support.mdx diff --git a/package.json b/package.json index d320e1c3f16..4c27bda4f8c 100644 --- a/package.json +++ b/package.json @@ -59,11 +59,13 @@ "@storybook/addon-docs": "^8.0.0", "@storybook/addon-essentials": "^8.0.0", "@storybook/addon-links": "^8.0.0", - "@storybook/addon-mdx-gfm": "8.0.0", + "@storybook/addon-mdx-gfm": "^8.0.0", "@storybook/addon-storysource": "^8.0.0", - "@storybook/addons": "^7.4.5", + "@storybook/blocks": "^8.0.0", + "@storybook/manager-api": "^8.0.0", "@storybook/react": "^8.0.0", - "@storybook/react-vite": "8.0.0", + "@storybook/react-vite": "^8.0.0", + "@storybook/test": "^8.0.0", "@storybook/theming": "^8.0.0", "@tanstack/react-query": "^4.28.0", "@testing-library/cypress": "^10.0.0", @@ -95,7 +97,7 @@ "eslint-plugin-cypress": "^2.14.0", "eslint-plugin-import": "^2.28.1", "eslint-plugin-local-rules": "^2.0.0", - "eslint-plugin-storybook": "^0.6.14", + "eslint-plugin-storybook": "^0.8.0", "modular-scripts": "patch:modular-scripts@npm:3.6.0#.yarn/patches/modular-scripts-npm-3.6.0-d967962075.patch", "msw": "^1.2.1", "msw-storybook-addon": "^1.8.0", @@ -106,7 +108,7 @@ "react-dom": "^18.0.0", "rifm": "^0.12.0", "sass": "^1.52.3", - "storybook": "8.0.0", + "storybook": "^8.0.0", "stylelint": "^16.0.0", "typescript": "4.6.4", "vite": "^4.4.9", diff --git a/packages/core/stories/floating-platform/floating-platform.doc.stories.mdx b/packages/core/stories/floating-platform/floating-platform.mdx similarity index 88% rename from packages/core/stories/floating-platform/floating-platform.doc.stories.mdx rename to packages/core/stories/floating-platform/floating-platform.mdx index 42c1bbcb28f..88e4a69b81f 100644 --- a/packages/core/stories/floating-platform/floating-platform.doc.stories.mdx +++ b/packages/core/stories/floating-platform/floating-platform.mdx @@ -1,18 +1,7 @@ -import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; -import { Button, Text, Tooltip } from "@salt-ds/core"; -import { - CharacteristicUsage, - CSSClassTable, -} from "css-variable-docgen-components"; -import HelpAndSupport from "docs/blocks/help-and-support.doc.mdx"; - - +import { Canvas, Meta } from "@storybook/addon-docs"; +import * as CustomFloatingUiPlatformStories from "./custom-floating-ui-platform.stories"; + + ## Custom Floating UI Platform @@ -131,22 +120,16 @@ The example uses the `FloatingComponentProvider` to trigger creating the new win It also uses the `FloatingPlatformProvider` to customize the positioning of the Tooltip based on the global coordinates of the anchor, rather than the position within it's own window. - - - + ### Custom Middleware Example In the following example custom `offset` middleware has been added to offset the tooltip by an additional amount on top of the default - - - + ### Animation Frame autoUpdate In the following example the Tooltip is being positioned on animation frame, allowing it to remain anchored to a component suring an animation - - - + diff --git a/packages/core/stories/introduction.stories.mdx b/packages/core/stories/introduction.mdx similarity index 100% rename from packages/core/stories/introduction.stories.mdx rename to packages/core/stories/introduction.mdx diff --git a/packages/core/stories/salt-provider/salt-provider-next.doc.stories.mdx b/packages/core/stories/salt-provider/salt-provider-next.mdx similarity index 100% rename from packages/core/stories/salt-provider/salt-provider-next.doc.stories.mdx rename to packages/core/stories/salt-provider/salt-provider-next.mdx diff --git a/packages/countries/stories/CountrySymbol.stories.tsx b/packages/countries/stories/CountrySymbol.stories.tsx index 8ddd474a7c2..72483911827 100644 --- a/packages/countries/stories/CountrySymbol.stories.tsx +++ b/packages/countries/stories/CountrySymbol.stories.tsx @@ -90,11 +90,3 @@ export const AllCountrySymbolsWithSearch: StoryFn = ( AllCountrySymbolsWithSearch.args = { size: 2, }; - -AllCountrySymbolsWithSearch.parameters = { - docs: { - source: { - code: "Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554", - }, - }, -}; diff --git a/packages/countries/stories/LazyCountrySymbol.qa.stories.tsx b/packages/countries/stories/LazyCountrySymbol.qa.stories.tsx index f2930719a85..f603c811b53 100644 --- a/packages/countries/stories/LazyCountrySymbol.qa.stories.tsx +++ b/packages/countries/stories/LazyCountrySymbol.qa.stories.tsx @@ -13,6 +13,7 @@ export const AllLazyCountrySymbols: StoryFn = () => { {sizes.map((size) => (
; export const LazyCountrySymbol: StoryFn = ( diff --git a/packages/data-grid/stories/LazyStoryCanvas.tsx b/packages/data-grid/stories/LazyStoryCanvas.tsx index 43482d7cf1d..6a017287a70 100644 --- a/packages/data-grid/stories/LazyStoryCanvas.tsx +++ b/packages/data-grid/stories/LazyStoryCanvas.tsx @@ -7,7 +7,6 @@ export const LazyStoryCanvas = ({ children }: PropsWithChildren) => { if (!ref.current) return; const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { - console.log(entry.isIntersecting); setVisible(true); } }); diff --git a/packages/data-grid/stories/grid.doc.stories.mdx b/packages/data-grid/stories/grid.mdx similarity index 90% rename from packages/data-grid/stories/grid.doc.stories.mdx rename to packages/data-grid/stories/grid.mdx index 12f559528e9..69b12baf5c1 100644 --- a/packages/data-grid/stories/grid.doc.stories.mdx +++ b/packages/data-grid/stories/grid.mdx @@ -1,4 +1,4 @@ -import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; +import { ArgTypes, Canvas, Meta, Story } from "@storybook/addon-docs"; import { Grid, GridColumn } from "@salt-ds/data-grid"; import { withFlexGap } from "docs/decorators/withFlexGap"; import { Banner, BannerContent } from "@salt-ds/core"; @@ -7,15 +7,21 @@ import { CharacteristicUsage, CSSClassTable, } from "css-variable-docgen-components"; -import HelpAndSupport from "docs/blocks/help-and-support.doc.mdx"; - - +import HelpAndSupport from "docs/blocks/help-and-support.mdx"; +import * as DataGridStories from "./grid.stories"; +import * as DataGridVariantStories from "./grid-variants.stories"; +import * as DataGridColumnGroupStories from "./grid-columnGroups.stories"; +import * as DataGridServerSideDataStories from "./grid-serverSideData.stories"; +import * as DataGridRowSelectionModesStories from "./grid-rowSelectionModes.stories"; +import * as DataGridRowSelectionControlledStories from "./grid-rowSelectionControlled.stories"; +import * as DataGridCellCustomizationStories from "./grid-cellCustomization.stories"; +import * as DataGridHeaderCustomizationStories from "./grid-headerCustomization.stories"; +import * as DataGridEditableCellsStories from "./grid-editableCells.stories"; +import * as DataGridSortColumnsStories from "./grid-sortColumns.stories"; +import * as DataGridCellValidationStories from "./grid-cellValidation.stories"; +import * as DataGridPaginationStories from "./grid-pagination.stories"; + + # Grid @@ -48,7 +54,7 @@ To import the grid into your application, use the following import: import { Grid, GridColumn } from "@salt-ds/data-grid"; ``` - + Note: ensure the CSS `height` property for the grid element has been set appropriately to see grid on screen. You can do so by passing a custom class @@ -58,14 +64,12 @@ import { Grid, GridColumn } from "@salt-ds/data-grid"; - - - + ### Props - + ## Grid variants @@ -77,9 +81,7 @@ The grid contains two variants: Column separators can be enabled using the `columnSeparators` property. - - - + ### Columns @@ -97,7 +99,7 @@ You can easily create any project-specific column types tailored to your needs u #### GridColumn props - + ### Column groups @@ -106,9 +108,7 @@ Columns can be grouped using the `ColumnGroup` component. Note: whenever a `ColumnGroup` component is present, all other grids' children will also need to be wrapped within a `ColumnGroup` component. - - - + ### Rows @@ -120,9 +120,7 @@ When used in combination with the `onVisibleRowRangeChange` callback this allows [Here's an example](https://saltdesignsystem-storybook.pages.dev/?path=/story/data-grid-data-grid--server-side-data) that details using sparse array and `onVisibleRowRangeChange` callback. - - - + ### Row selection @@ -141,12 +139,7 @@ Both are optional. In [uncontrolled mode](https://reactjs.org/docs/uncontrolled-components.html) you can provide `defaultSelectedRowIdxs` and the grid maintains the selection state. It accepts `number[]`, and works only when `rowSelectionMode` is `single` or `multi`. - - - + #### Controlled mode @@ -155,12 +148,7 @@ In [controlled mode](https://reactjs.org/docs/forms.html#controlled-components) Below is an example of how to use controlled selection mode to synchronize selection in two grids. - - - + ### Cell customization @@ -174,12 +162,7 @@ The `cellValueComponent` property of `GridColumn` component is the most convenie Below is an example of custom components applied to `cellValueComponent` of "Bid/Ask", "Percentage" and "Buttons" columns, [more details here](https://saltdesignsystem-storybook.pages.dev/?path=/story/data-grid-data-grid--cell-customization). - - - + The second way to customize cell appearance is the `cellComponent` property. Unlike @@ -200,12 +183,7 @@ Column headers and column group headers can be customized using the `headerValue This grid also shows an example of a custom cell displaying a basic chart. Switch the "Items sold" column to "summary" mode to see it. - - - + ### Editable cells @@ -223,12 +201,7 @@ i.e. `TextCellEditor` and `NumericCellEditor`. You can easily create any components tailored to your needs using the same approach. - - - + To trigger edit mode on cells on your: @@ -245,15 +218,11 @@ For client side sorting, user could use inbuilt default sort, or provide a custo For server side sorting, we expose sort order (`asc | desc | none`) through `onSortOrderChange`, see "Amount" column for example. - - - + - - - + ### Cell Validation @@ -267,25 +236,16 @@ while the second type "strong" additionally displays a status icon. Light valida If you are validating editable cells, for the business logic, we recommend you use a 3rd party library like [yup](https://www.npmjs.com/package/yup) or [zod](https://www.npmjs.com/package/zod). - - - + ### Row Validation Grid provides an api for row-level validation with the prop `getRowValidationStatus`. This function provides the row data as the argument, and expects a return value that is one of the cell validation states, "error", "warning", and "success". In most cases, it should be used together with the `RowValidationColumn` component to give the user a visual indicator of the validation state besides background color. This is important for accessibility. - - - + - - - + ### Pagination @@ -312,12 +272,7 @@ interface PaginatorProps { ``` - - - + ### Writing tests for Grid component diff --git a/packages/icons/stories/icon.qa.stories.tsx b/packages/icons/stories/icon.qa.stories.tsx index 4efb3eadc3a..9fe25a3c31a 100644 --- a/packages/icons/stories/icon.qa.stories.tsx +++ b/packages/icons/stories/icon.qa.stories.tsx @@ -19,6 +19,7 @@ export const AllIcons: StoryFn = () => { gap: 8, padding: "12px 0", }} + key={size} > {allIcons.map((IconComponent, i) => ( diff --git a/packages/icons/stories/icon.stories.tsx b/packages/icons/stories/icon.stories.tsx index fec50caa4d1..b09f296f591 100644 --- a/packages/icons/stories/icon.stories.tsx +++ b/packages/icons/stories/icon.stories.tsx @@ -42,7 +42,7 @@ const IconGrid = ({ }} > {sizes.map((size) => ( - + ))}
); @@ -122,7 +122,12 @@ export const AllIconsWithSearch: StoryFn = () => { .filter(({ name, icon }) => new RegExp(inputText, "i").test(name)) .map(({ name, icon }, i) => { return ( - + {createElement(icon, { key: i, size: 2, diff --git a/packages/lab/stories/combo-box-next/combo-box-next.stories.tsx b/packages/lab/stories/combo-box-next/combo-box-next.stories.tsx index 165c3047021..b8b45a64641 100644 --- a/packages/lab/stories/combo-box-next/combo-box-next.stories.tsx +++ b/packages/lab/stories/combo-box-next/combo-box-next.stories.tsx @@ -25,13 +25,6 @@ import { usStateExampleData } from "../assets/exampleData"; export default { title: "Lab/Combo Box Next", component: ComboBoxNext, - parameters: { - docs: { - source: { - code: "Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554", - }, - }, - }, } as Meta; const usStates = usStateExampleData.slice(0, 10); diff --git a/packages/lab/stories/deck-layout/deck-layout.doc.stories.mdx b/packages/lab/stories/deck-layout/deck-layout.mdx similarity index 64% rename from packages/lab/stories/deck-layout/deck-layout.doc.stories.mdx rename to packages/lab/stories/deck-layout/deck-layout.mdx index 94a6f378eca..4c20012cc80 100644 --- a/packages/lab/stories/deck-layout/deck-layout.doc.stories.mdx +++ b/packages/lab/stories/deck-layout/deck-layout.mdx @@ -1,14 +1,13 @@ -import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs"; -import { DeckLayout, DeckItem } from "@salt-ds/lab"; -import { CSSClassTable } from "css-variable-docgen-components"; -import { Default } from "./deck-layout.stories"; -import HelpAndSupport from "docs/blocks/help-and-support.doc.mdx"; - - +import { + ArgTypes, + Canvas, + Meta +} from "@storybook/blocks"; +import HelpAndSupport from "docs/blocks/help-and-support.mdx"; +import * as DeckLayoutStories from "./deck-layout.stories"; +import {DeckLayout } from "@salt-ds/lab"; + + # Deck Layout @@ -18,9 +17,7 @@ It allows motion customization (`slide` or `fade`) and a custom direction for th This layout component also allows you to assign the initial page to be rendered via the `activeIndex` prop. - - - + ## Use Deck Layout when... @@ -36,9 +33,7 @@ Instead you want your content to be displayed in a layer above the existing page This example shows how the Deck Layout can be used in conjunction with `Tabstrip`. You can enable animations by setting the `animation` prop. - - - + ## Configuring Deck Layout @@ -50,6 +45,6 @@ import { DeckLayout } from "@salt-ds/lab"; ### Props - + diff --git a/packages/lab/stories/deck-layout/deck-layout.stories.tsx b/packages/lab/stories/deck-layout/deck-layout.stories.tsx index 745bce853fc..669f6d58da5 100644 --- a/packages/lab/stories/deck-layout/deck-layout.stories.tsx +++ b/packages/lab/stories/deck-layout/deck-layout.stories.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import { Meta, StoryFn } from "@storybook/react"; import { Card } from "@salt-ds/core"; -import { DeckLayout, Tab, Tabstrip } from "@salt-ds/lab"; +import { DeckLayout, DeckItem, Tab, Tabstrip } from "@salt-ds/lab"; import "../layout/layout.stories.css"; export default { @@ -12,6 +12,7 @@ export default { control: { type: "number", min: 0, max: 5, defaultValue: 0 }, }, }, + subcomponents: { DeckItem }, } as Meta; const deckCards = (slides: number) => diff --git a/packages/lab/stories/dropdown/dropdown-base.stories.tsx b/packages/lab/stories/dropdown/dropdown-base.stories.tsx index da97f4d4ef5..70f75adf42f 100644 --- a/packages/lab/stories/dropdown/dropdown-base.stories.tsx +++ b/packages/lab/stories/dropdown/dropdown-base.stories.tsx @@ -15,7 +15,9 @@ export const Default: StoryFn = () => { }; const callbackRef = (el: HTMLButtonElement) => { - console.log(`ref on Button set to ${el.className}`); + if (el) { + console.log(`ref on Button set to ${el.className}`); + } }; return (
diff --git a/packages/lab/stories/layer-layout/layer-layout.doc.stories.mdx b/packages/lab/stories/layer-layout/layer-layout.mdx similarity index 63% rename from packages/lab/stories/layer-layout/layer-layout.doc.stories.mdx rename to packages/lab/stories/layer-layout/layer-layout.mdx index ccda8cc58e3..d4d929265b8 100644 --- a/packages/lab/stories/layer-layout/layer-layout.doc.stories.mdx +++ b/packages/lab/stories/layer-layout/layer-layout.mdx @@ -1,16 +1,15 @@ -import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs"; +import { + ArgTypes, + Canvas, + Meta, +} from "@storybook/blocks"; import { LayerLayout } from "@salt-ds/lab"; -import { CSSClassTable } from "css-variable-docgen-components"; -import { Default } from "./layer-layout.stories"; -import HelpAndSupport from "docs/blocks/help-and-support.doc.mdx"; - - +import * as LayerLayoutStories + from "./layer-layout.stories"; +import HelpAndSupport + from "docs/blocks/help-and-support.mdx"; + + # Layer Layout @@ -18,9 +17,7 @@ The Layer Layout defines a layer above the existing layout structure for UI elem It can be used to build dialog or drawer components and it can be positioned in different parts of the screen. - - - + ## Use Layer Layout when... @@ -42,35 +39,25 @@ The component will be displayed in the center position by default but you can cu ##### Top positioned - - - + ##### Right positioned - - - + ##### Left positioned - - - + ##### Bottom positioned - - - + #### Reduced motion You can customize or disable the animations using the `prefers-reduced-motion` CSS media feature. - - - + ## Configuring Layer Layout @@ -82,6 +69,6 @@ import { LayerLayout } from "@salt-ds/lab"; ### Props - + - + diff --git a/packages/lab/stories/layout/layouts.doc.stories.mdx b/packages/lab/stories/layout/layouts.mdx similarity index 66% rename from packages/lab/stories/layout/layouts.doc.stories.mdx rename to packages/lab/stories/layout/layouts.mdx index d74aafd0f39..4c662eb4c6b 100644 --- a/packages/lab/stories/layout/layouts.doc.stories.mdx +++ b/packages/lab/stories/layout/layouts.mdx @@ -1,11 +1,11 @@ -import { Meta, Story, Canvas } from "@storybook/addon-docs"; +import { Meta, Canvas } from "@storybook/blocks"; +import * as ParentChildLayoutStories + from "../parent-child-layout/parent-child-layout.stories"; +import * as DeckLayoutStories from "../deck-layout/deck-layout.stories"; +import * as LayerLayoutStories + from "../layer-layout/layer-layout.stories"; - + # Layout components @@ -17,17 +17,13 @@ they allow for easy responsive behavior and customization. Displays a hierarchical structure comprising of a main content area and an accompanying parent region, used to drive the content that is displayed. - - - + ## [Deck Layout](/docs/documentation-lab-layout-deck-layout--docs) Defines pages of content that appear within the same specified region, one at a time - - - + ## [Layer Layout](/docs/documentation-lab-layout-layer-layout--docs) @@ -35,6 +31,4 @@ Defines a layer above the existing layout structure for UI elements to be displa It can be used to build dialog or drawer components and it can be positioned in different parts of the screen. - - - + diff --git a/packages/lab/stories/logo/logo.doc.stories.mdx b/packages/lab/stories/logo/logo.mdx similarity index 76% rename from packages/lab/stories/logo/logo.doc.stories.mdx rename to packages/lab/stories/logo/logo.mdx index eea33812c79..516a61798a9 100644 --- a/packages/lab/stories/logo/logo.doc.stories.mdx +++ b/packages/lab/stories/logo/logo.mdx @@ -1,19 +1,13 @@ -import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; -import { Text } from "@salt-ds/core"; +import { Canvas, Meta, ArgTypes } from "@storybook/blocks"; import { Logo, LogoImage, LogoSeparator } from "@salt-ds/lab"; import { CharacteristicUsage, CSSClassTable, } from "css-variable-docgen-components"; -import HelpAndSupport from "docs/blocks/help-and-support.doc.mdx"; +import HelpAndSupport from "docs/blocks/help-and-support.mdx"; +import * as LogoStories from "./logo.stories"; - + # Logo @@ -45,41 +39,29 @@ Refer to the [J.P. Morgan Brand Toolbox](https://www.jpmcbrandtoolbox.com/) to c ### Logo containing a LogoImage - - - + ### Logo containing a LogoImage and Text - - - + ### Logo containing a LogoImage, Text and LogoSeparator - - - + ### Link wrapping Logo - - + ### Link wrapping LogoImage only - - - + ### Compact Logo Here's an example of a regular versus a compact version of Logo which now you can create yourself. - - - + ## Configuring Logo @@ -89,17 +71,7 @@ import { Logo, LogoImage, LogoSeparator } from '@salt-ds/lab'; ### Props -#### Logo - - - -#### LogoImage - - - -#### LogoSeparator - - + ### CSS Class diff --git a/packages/lab/stories/logo/logo.stories.tsx b/packages/lab/stories/logo/logo.stories.tsx index 9d66243e9bd..ee0543b058e 100644 --- a/packages/lab/stories/logo/logo.stories.tsx +++ b/packages/lab/stories/logo/logo.stories.tsx @@ -9,6 +9,7 @@ import { ChaseCompactLogo } from "./assets/ChaseCompactLogo"; export default { title: "Lab/Logo", component: Logo, + subcomponents: { LogoImage, LogoSeparator }, } as Meta; export const LogoWithImage: StoryFn = (args) => ( diff --git a/packages/lab/stories/parent-child-layout/parent-child-layout.stories.tsx b/packages/lab/stories/parent-child-layout/parent-child-layout.stories.tsx index 25a20c5eb95..a1a595550c6 100644 --- a/packages/lab/stories/parent-child-layout/parent-child-layout.stories.tsx +++ b/packages/lab/stories/parent-child-layout/parent-child-layout.stories.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; import { Meta, StoryFn } from "@storybook/react"; +import { fn } from "@storybook/test"; import { ChevronLeftIcon, @@ -33,6 +34,9 @@ import "./parent-child-layout.stories.css"; export default { title: "Lab/Layout/Parent Child Layout", component: ParentChildLayout, + args: { + onCollapseChange: fn(), + }, } as Meta; const parent =
Parent
; diff --git a/packages/lab/stories/skip-link/skip-link.doc.stories.mdx b/packages/lab/stories/skip-link/skip-link.mdx similarity index 92% rename from packages/lab/stories/skip-link/skip-link.doc.stories.mdx rename to packages/lab/stories/skip-link/skip-link.mdx index 4fce9e53b90..83672578211 100644 --- a/packages/lab/stories/skip-link/skip-link.doc.stories.mdx +++ b/packages/lab/stories/skip-link/skip-link.mdx @@ -1,10 +1,15 @@ -import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; +import { + Controls, + Canvas, + Meta, + ArgTypes +} from "@storybook/blocks"; import { SkipLink } from "@salt-ds/lab"; import { CharacteristicUsage, CSSClassTable, } from "css-variable-docgen-components"; -import { Default, MultipleLinks } from "./skip-link.stories"; +import * as SkipLinkStories from "./skip-link.stories"; @@ -47,9 +52,7 @@ Skip Links are visible only on focus. When a Skip Link is activated, focus moves The Skip link component is displayed above the application layout on a single line, as a link element. It receives focus when the user navigates to it using the Tab key. When activated, the Skip Link enables user to skip to the target content you've defined. - - - + ## With multiple links @@ -59,13 +62,11 @@ The Skip Link component can provide multiple links. Links are displayed in seque Multiple links should be used sparingly. In order to avoid polluting the page-tab order it is recommended not to use more than two links per Skip Link. - - - + ## Props - + ## CSS Classes diff --git a/packages/lab/stories/stepper-input/stepper-input.doc.stories.mdx b/packages/lab/stories/stepper-input/stepper-input.mdx similarity index 82% rename from packages/lab/stories/stepper-input/stepper-input.doc.stories.mdx rename to packages/lab/stories/stepper-input/stepper-input.mdx index 158f6d41f2d..4776418007a 100644 --- a/packages/lab/stories/stepper-input/stepper-input.doc.stories.mdx +++ b/packages/lab/stories/stepper-input/stepper-input.mdx @@ -1,17 +1,17 @@ -import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; +import { + Controls, + Canvas, + Meta, + ArgTypes +} from "@storybook/blocks"; import { StepperInput } from "@salt-ds/lab"; import { CharacteristicUsage, CSSClassTable, } from "css-variable-docgen-components"; +import * as StepperInputStories from "./stepper-input.stories"; - + # Stepper Input @@ -32,17 +32,13 @@ The user can adjust the default value using the controls—or simply type in a n The out-of-the-box Stepper Input has a default value of 0, an increment value of 1 and a block value of 10, and you can only use it to accept numeric characters. - - - + ## Custom Values You are able to customize the default, increment and block values to suit your use case. - - - + ## Decimal @@ -52,9 +48,7 @@ If the user enters a value that doesn’t match the decimal places you have set, The component will round the value up or down, as required, to display the specified number of decimal places. - - - + ## Live default value @@ -62,9 +56,7 @@ You can use the Stepper Input to pull the live value from a source that’s cons The component's value doesn't automatically update when the live value changes, however. In this case, the Refresh button automatically appears when the displayed value and live value don’t match. - - - + ## Refresh @@ -72,9 +64,7 @@ This button gives you the option of resetting the component to its default value If you have set a live value, however, the prop is no longer optional. Once the component's displayed value and live value no longer match, the Refresh button will be visible. You can click it to reset the component to the latest live value. - - - + ## Numeric Limits @@ -82,9 +72,7 @@ The default limits for the input's number value are set to the safest representa If you need to limit the range of accepted values, you’re able to set a maximum or minimum (or both). - - - + # API @@ -94,7 +82,7 @@ import { StepperInput } from "@salt-ds/lab"; ## Props - + ## CSS Class diff --git a/packages/lab/stories/toolbar/toolbar.doc.stories.mdx b/packages/lab/stories/toolbar/toolbar.doc.stories.mdx deleted file mode 100644 index 28e12deb0e0..00000000000 --- a/packages/lab/stories/toolbar/toolbar.doc.stories.mdx +++ /dev/null @@ -1,35 +0,0 @@ -import { Canvas, Meta, Story } from "@storybook/addon-docs"; -import { Button } from "@salt-ds/core"; -import { - ExportIcon, - NotificationIcon, - ShareIcon, - TearOutIcon, -} from "@salt-ds/icons"; -import { Toolbar } from "@salt-ds/lab"; -import { CollapsibleToolbarItem } from "../components"; - - - -# Toolbar - -Toolbar is a flexible container for controls. - -
- -Simple `Toolbar` with 10 `Buttons`. Note that Button text is not displayed if Button -contains an Icon. - - - - - -
- -##### Instant Collapse - -Example 1, use CSS alone to style compact state - - - - diff --git a/packages/lab/stories/toolbar/toolbar.mdx b/packages/lab/stories/toolbar/toolbar.mdx new file mode 100644 index 00000000000..7dc7c379bca --- /dev/null +++ b/packages/lab/stories/toolbar/toolbar.mdx @@ -0,0 +1,23 @@ +import { Canvas, Meta } from "@storybook/blocks"; +import * as ToolbarStories from "./toolbar.stories"; + + + +# Toolbar + +Toolbar is a flexible container for controls. + +
+ +Simple `Toolbar` with 10 `Buttons`. Note that Button text is not displayed if Button +contains an Icon. + + + +
+ +##### Instant Collapse + +Example 1, use CSS alone to style compact state + + diff --git a/packages/lab/stories/tree/tree.stories.jsx b/packages/lab/stories/tree/tree.stories.jsx index 16981508ec3..4c7f950bf0e 100644 --- a/packages/lab/stories/tree/tree.stories.jsx +++ b/packages/lab/stories/tree/tree.stories.jsx @@ -1,3 +1,4 @@ +import React from "react"; import { Tree as Tree } from "@salt-ds/lab"; import { groupByInitialLetter, usa_states_cities } from "../list/list.data"; import { folderData } from "./tree.data"; diff --git a/packages/lab/stories/window/window.stories.mdx b/packages/lab/stories/window/window.mdx similarity index 99% rename from packages/lab/stories/window/window.stories.mdx rename to packages/lab/stories/window/window.mdx index 712adef7048..d9989a8fc0a 100644 --- a/packages/lab/stories/window/window.stories.mdx +++ b/packages/lab/stories/window/window.mdx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/addon-docs"; +import { Meta } from "@storybook/blocks"; diff --git a/packages/styles/stories/introduction.stories.mdx b/packages/styles/stories/introduction.mdx similarity index 98% rename from packages/styles/stories/introduction.stories.mdx rename to packages/styles/stories/introduction.mdx index 9a99d3d9aa5..e92860bd24c 100644 --- a/packages/styles/stories/introduction.stories.mdx +++ b/packages/styles/stories/introduction.mdx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/addon-docs"; +import { Meta } from "@storybook/blocks"; diff --git a/packages/theme/stories/introduction.stories.mdx b/packages/theme/stories/introduction.mdx similarity index 99% rename from packages/theme/stories/introduction.stories.mdx rename to packages/theme/stories/introduction.mdx index 3ce45f9d864..230aa3b1601 100644 --- a/packages/theme/stories/introduction.stories.mdx +++ b/packages/theme/stories/introduction.mdx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/addon-docs"; +import { Meta } from "@storybook/blocks"; diff --git a/packages/theme/stories/palettes/accent.stories.mdx b/packages/theme/stories/palettes/accent.mdx similarity index 86% rename from packages/theme/stories/palettes/accent.stories.mdx rename to packages/theme/stories/palettes/accent.mdx index 25d92f516da..e230618d398 100644 --- a/packages/theme/stories/palettes/accent.stories.mdx +++ b/packages/theme/stories/palettes/accent.mdx @@ -1,12 +1,5 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorContainer } from "docs/components/ColorContainer"; -import { DocGrid } from "docs/components/DocGrid"; @@ -26,6 +19,7 @@ Colors used to provide a consistent brand detail throughout the component librar "var(--salt-palette-accent-background)", }} /> + + + diff --git a/packages/theme/stories/palettes/error.stories.mdx b/packages/theme/stories/palettes/error.mdx similarity index 75% rename from packages/theme/stories/palettes/error.stories.mdx rename to packages/theme/stories/palettes/error.mdx index c8c98192c14..bffa4829a6b 100644 --- a/packages/theme/stories/palettes/error.stories.mdx +++ b/packages/theme/stories/palettes/error.mdx @@ -1,10 +1,4 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { Canvas, ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorBlock } from "docs/components/ColorBlock"; import { ColorContainer } from "docs/components/ColorContainer"; import { DocGrid } from "docs/components/DocGrid"; @@ -26,6 +20,7 @@ Colors used to symbolise an error state. "--salt-palette-error-border": "var(--salt-palette-error-border)", }} /> + + + + @@ -57,17 +55,11 @@ Colors used to symbolise an error state. - - - + + + + + + diff --git a/packages/theme/stories/palettes/info.stories.mdx b/packages/theme/stories/palettes/info.mdx similarity index 70% rename from packages/theme/stories/palettes/info.stories.mdx rename to packages/theme/stories/palettes/info.mdx index f893da2cc9c..f04d044b92b 100644 --- a/packages/theme/stories/palettes/info.stories.mdx +++ b/packages/theme/stories/palettes/info.mdx @@ -1,10 +1,4 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { Canvas, ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorBlock } from "docs/components/ColorBlock"; import { ColorContainer } from "docs/components/ColorContainer"; import { DocGrid } from "docs/components/DocGrid"; @@ -26,6 +20,7 @@ Colors used to represent informational content or messaging. "--salt-palette-info-border": "var(--salt-palette-info-border)", }} /> + + + @@ -47,17 +44,11 @@ Colors used to represent informational content or messaging. - - - + + + + + + diff --git a/packages/theme/stories/palettes/interact.stories.mdx b/packages/theme/stories/palettes/interact.mdx similarity index 97% rename from packages/theme/stories/palettes/interact.stories.mdx rename to packages/theme/stories/palettes/interact.mdx index 0855c01dd4b..94a21002a7e 100644 --- a/packages/theme/stories/palettes/interact.stories.mdx +++ b/packages/theme/stories/palettes/interact.mdx @@ -1,12 +1,5 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorContainer } from "docs/components/ColorContainer"; -import { DocGrid } from "docs/components/DocGrid"; @@ -36,6 +29,7 @@ Colors representing actions such as editing or selecting an item. "var(--salt-palette-interact-background-blurSelected)", }} /> + + + + @@ -102,6 +99,7 @@ Colors representing actions such as editing or selecting an item. "var(--salt-palette-interact-primary-background-disabled)", }} /> + + @@ -137,6 +136,7 @@ Colors representing actions such as editing or selecting an item. "var(--salt-palette-interact-secondary-background-disabled)", }} /> + + @@ -172,6 +173,7 @@ Colors representing actions such as editing or selecting an item. "var(--salt-palette-interact-cta-background-disabled)", }} /> + + diff --git a/packages/theme/stories/palettes/introduction.stories.mdx b/packages/theme/stories/palettes/introduction.mdx similarity index 92% rename from packages/theme/stories/palettes/introduction.stories.mdx rename to packages/theme/stories/palettes/introduction.mdx index be298657798..2804e0749bd 100644 --- a/packages/theme/stories/palettes/introduction.stories.mdx +++ b/packages/theme/stories/palettes/introduction.mdx @@ -1,7 +1,4 @@ -import { Meta, Story, Canvas } from "@storybook/addon-docs"; -import { ColorBlock } from "docs/components/ColorBlock"; -import { DocGrid } from "docs/components/DocGrid"; -import { OpacityBlock } from "docs/components/OpacityBlock"; +import { Meta } from "@storybook/blocks"; @@ -29,7 +26,7 @@ The palette sits in between the foundations and characteristics. The palette is The palette provides meaning to the colors used throughout the characteristics. For a component with a background color set to `--salt-actionable-cta-background`, rather than this token directly pointing to the foundation token `--salt-color-blue-500`, this value instead resolves to the palette token `--salt-interact-cta-background`. Similarly, selectable backgrounds resolve to the same palette token. This ensures that anything that is interactable throughout your theme is consistent. The palette sits directly in the middle. -Component CSS attribute → Characteristic token → **_Palette token_** → Foundation token → Raw RGBA Value +Component CSS attribute → Characteristic token → **_Palette token_** → Foundation token → Raw RGBA Value ## Token structure diff --git a/packages/theme/stories/palettes/measured.stories.mdx b/packages/theme/stories/palettes/measured.mdx similarity index 93% rename from packages/theme/stories/palettes/measured.stories.mdx rename to packages/theme/stories/palettes/measured.mdx index 1301a672b0e..aa1ea8036a5 100644 --- a/packages/theme/stories/palettes/measured.stories.mdx +++ b/packages/theme/stories/palettes/measured.mdx @@ -1,13 +1,6 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { Banner, BannerContent } from "@salt-ds/core"; import { ColorContainer } from "docs/components/ColorContainer"; -import { DocGrid } from "docs/components/DocGrid"; @@ -35,6 +28,7 @@ Colors used to represent a measurement, value or progression. "var(--salt-palette-measured-border-background)", }} /> + + + + diff --git a/packages/theme/stories/palettes/navigate.stories.mdx b/packages/theme/stories/palettes/navigate.mdx similarity index 92% rename from packages/theme/stories/palettes/navigate.stories.mdx rename to packages/theme/stories/palettes/navigate.mdx index 347e2db49ea..194a1debbdb 100644 --- a/packages/theme/stories/palettes/navigate.stories.mdx +++ b/packages/theme/stories/palettes/navigate.mdx @@ -1,12 +1,5 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorContainer } from "docs/components/ColorContainer"; -import { DocGrid } from "docs/components/DocGrid"; @@ -30,6 +23,7 @@ Colors used to signify navigation or navigable items. "var(--salt-palette-navigate-foreground-visited)", }} /> + + diff --git a/packages/theme/stories/palettes/negative.stories.mdx b/packages/theme/stories/palettes/negative.mdx similarity index 89% rename from packages/theme/stories/palettes/negative.stories.mdx rename to packages/theme/stories/palettes/negative.mdx index 1cdf48b6c90..5d85e1cd686 100644 --- a/packages/theme/stories/palettes/negative.stories.mdx +++ b/packages/theme/stories/palettes/negative.mdx @@ -1,10 +1,4 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { Canvas, ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorBlock } from "docs/components/ColorBlock"; import { ColorContainer } from "docs/components/ColorContainer"; import { DocGrid } from "docs/components/DocGrid"; diff --git a/packages/theme/stories/palettes/neutral.stories.mdx b/packages/theme/stories/palettes/neutral.mdx similarity index 96% rename from packages/theme/stories/palettes/neutral.stories.mdx rename to packages/theme/stories/palettes/neutral.mdx index b7442c4243a..66ce7324d9e 100644 --- a/packages/theme/stories/palettes/neutral.stories.mdx +++ b/packages/theme/stories/palettes/neutral.mdx @@ -1,12 +1,5 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorContainer } from "docs/components/ColorContainer"; -import { DocGrid } from "docs/components/DocGrid"; @@ -45,6 +38,7 @@ Colors used to define regions or blocks of content without inferring meaning. "var(--salt-palette-neutral-primary-background-readonly)", }} /> + + + + @@ -92,6 +89,7 @@ Colors used to define regions or blocks of content without inferring meaning. "var(--salt-palette-neutral-secondary-background-readonly)", }} /> + + + + diff --git a/packages/theme/stories/palettes/opacity.mdx b/packages/theme/stories/palettes/opacity.mdx new file mode 100644 index 00000000000..0fa13da0a37 --- /dev/null +++ b/packages/theme/stories/palettes/opacity.mdx @@ -0,0 +1,72 @@ +import { Meta } from "@storybook/blocks"; +import { DocGrid } from "docs/components/DocGrid"; +import { OpacityBlock } from "docs/components/OpacityBlock"; + + + +# Opacities + + + + +{" "} + + +{" "} + + +{" "} + + +{" "} + + +{" "} + + + + + +## Deprecated + + + + +{" "} + + +{" "} + + +{" "} + + + + diff --git a/packages/theme/stories/palettes/opacity.stories.mdx b/packages/theme/stories/palettes/opacity.stories.mdx deleted file mode 100644 index 100ca195893..00000000000 --- a/packages/theme/stories/palettes/opacity.stories.mdx +++ /dev/null @@ -1,68 +0,0 @@ -import { Meta, Canvas, Story } from "@storybook/addon-docs"; -import { DocGrid } from "docs/components/DocGrid"; -import { OpacityBlock } from "docs/components/OpacityBlock"; - - - -# Opacities - - - - - - - - - - - -## Deprecated - - - - - - - - diff --git a/packages/theme/stories/palettes/positive.stories.mdx b/packages/theme/stories/palettes/positive.mdx similarity index 89% rename from packages/theme/stories/palettes/positive.stories.mdx rename to packages/theme/stories/palettes/positive.mdx index d2f151f0e71..b0e449c2e8a 100644 --- a/packages/theme/stories/palettes/positive.stories.mdx +++ b/packages/theme/stories/palettes/positive.mdx @@ -1,10 +1,4 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { Canvas, ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorBlock } from "docs/components/ColorBlock"; import { ColorContainer } from "docs/components/ColorContainer"; import { DocGrid } from "docs/components/DocGrid"; diff --git a/packages/theme/stories/palettes/static.stories.mdx b/packages/theme/stories/palettes/static.mdx similarity index 71% rename from packages/theme/stories/palettes/static.stories.mdx rename to packages/theme/stories/palettes/static.mdx index 66dc635e1e3..ea01e745836 100644 --- a/packages/theme/stories/palettes/static.stories.mdx +++ b/packages/theme/stories/palettes/static.mdx @@ -1,13 +1,5 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; -import { ColorBlock } from "docs/components/ColorBlock"; +import { ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorContainer } from "docs/components/ColorContainer"; -import { DocGrid } from "docs/components/DocGrid"; diff --git a/packages/theme/stories/palettes/success.stories.mdx b/packages/theme/stories/palettes/success.mdx similarity index 75% rename from packages/theme/stories/palettes/success.stories.mdx rename to packages/theme/stories/palettes/success.mdx index 1db29b1baee..d5432f9e55c 100644 --- a/packages/theme/stories/palettes/success.stories.mdx +++ b/packages/theme/stories/palettes/success.mdx @@ -1,10 +1,4 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { Canvas, ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorBlock } from "docs/components/ColorBlock"; import { ColorContainer } from "docs/components/ColorContainer"; import { DocGrid } from "docs/components/DocGrid"; @@ -26,6 +20,7 @@ Colors symbolising a success state or indication of process completion. "--salt-palette-success-border": "var(--salt-palette-success-border)", }} /> + + + + @@ -57,17 +55,11 @@ Colors symbolising a success state or indication of process completion. - - - + + + + + + diff --git a/packages/theme/stories/palettes/warning.stories.mdx b/packages/theme/stories/palettes/warning.mdx similarity index 79% rename from packages/theme/stories/palettes/warning.stories.mdx rename to packages/theme/stories/palettes/warning.mdx index e1af4d6c59d..6e9cceaeda7 100644 --- a/packages/theme/stories/palettes/warning.stories.mdx +++ b/packages/theme/stories/palettes/warning.mdx @@ -1,10 +1,4 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { Canvas, ColorItem, ColorPalette, Meta } from "@storybook/blocks"; import { ColorBlock } from "docs/components/ColorBlock"; import { ColorContainer } from "docs/components/ColorContainer"; import { DocGrid } from "docs/components/DocGrid"; @@ -26,6 +20,7 @@ Colors symbolising a warning state. "--salt-palette-warning-border": "var(--salt-palette-warning-border)", }} /> + + + + @@ -57,13 +55,9 @@ Colors symbolising a warning state. - - + + + + diff --git a/tooling/css-inline-plugin/src/index.ts b/tooling/css-inline-plugin/src/index.ts index 34164804181..23ed08482ee 100644 --- a/tooling/css-inline-plugin/src/index.ts +++ b/tooling/css-inline-plugin/src/index.ts @@ -13,7 +13,10 @@ export interface Options { // vite's own style injection used in storybook export function cssInline(options: Options = {}): Plugin { const { - exclude = ["**/**.stories.tsx"], + exclude = [ + "**/**.stories.tsx", + "!**/stories/floating-platform/*.stories.tsx", + ], include = ["**/packages/**/*.{tsx,jsx}"], } = options; const filter = createFilter(include, exclude); diff --git a/tooling/css-variable-docgen-components/package.json b/tooling/css-variable-docgen-components/package.json index 6c5ad6ceb16..b145cfdde23 100644 --- a/tooling/css-variable-docgen-components/package.json +++ b/tooling/css-variable-docgen-components/package.json @@ -5,5 +5,12 @@ "main": "src/index.tsx", "files": [ "README.md" - ] + ], + "dependencies": { + "@storybook/addon-docs": "^8.0.0", + "@storybook/blocks": "^8.0.0", + "@storybook/components": "^8.0.0", + "@storybook/theming": "^8.0.0", + "polished": "^4.0.5" + } } diff --git a/tooling/css-variable-docgen-components/src/CSSClassTable.tsx b/tooling/css-variable-docgen-components/src/CSSClassTable.tsx index f58c67a2f01..3ec9f7414bf 100644 --- a/tooling/css-variable-docgen-components/src/CSSClassTable.tsx +++ b/tooling/css-variable-docgen-components/src/CSSClassTable.tsx @@ -1,25 +1,18 @@ -import { DocsContext, getComponent } from "@storybook/addon-docs"; -import { useContext } from "react"; +import { useOf, Of } from "@storybook/addon-docs"; import { ResetWrapper } from "@storybook/components"; import { ClassNameRow } from "./ClassNameRow"; -import { getDocgenSection } from "./utils"; import { EmptyBlock } from "./EmptyBlock"; import { TableWrapper } from "./TableWrapper"; +import { getClassNames } from "./utils"; -export interface ClassName { - name: string; - description: string; -} -export function CSSClassTable(props: Record): JSX.Element { - const context = useContext(DocsContext); +export function CSSClassTable(props: { of: Of }): JSX.Element { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - const main = getComponent(props, context); - const classNames = getDocgenSection>( - main, - "classNames" - ); + const { of } = props; + + const resolved = useOf(of); + const classNames = getClassNames(resolved); - if (!classNames || Object.values(classNames).length < 1) { + if (Object.values(classNames).length < 1) { return ( No CSS class names found for this component. ); diff --git a/tooling/css-variable-docgen-components/src/CharacteristicUsage.tsx b/tooling/css-variable-docgen-components/src/CharacteristicUsage.tsx index 0dbe735dac5..b1819a433c7 100644 --- a/tooling/css-variable-docgen-components/src/CharacteristicUsage.tsx +++ b/tooling/css-variable-docgen-components/src/CharacteristicUsage.tsx @@ -1,39 +1,23 @@ -import { useContext, useEffect, useState } from "react"; -import { DocsContext, getComponent } from "@storybook/addon-docs"; +import { useEffect, useState } from "react"; +import { useOf } from "@storybook/addon-docs"; import { ResetWrapper } from "@storybook/components"; import { Spinner } from "@salt-ds/core"; import { CharacteristicUsageRow } from "./CharacteristicUsageRow"; import { EmptyBlock } from "./EmptyBlock"; -import { getCharacteristics, getDocgenSection } from "./utils"; +import { getCharacteristics } from "./utils"; import { TableWrapper } from "./TableWrapper"; import "./CharacteristicUsage.css"; -interface CSSVariable { - name: string; - type?: string; - defaultValue?: string; -} - -export interface Characteristic { - name: string; - tokens?: string[]; -} - export function CharacteristicUsage( props: Record ): JSX.Element { - const [isLoading, setIsLoading] = useState(true); - const context = useContext(DocsContext); - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - const main = getComponent(props, context); - const cssVariablesApi = getDocgenSection>( - main, - "cssVariablesApi" - ); + const { of } = props; - const characteristicTokenMap = - getCharacteristics>(cssVariablesApi); + const resolved = useOf(of); + const characteristicTokenMap = getCharacteristics(resolved); + + const [isLoading, setIsLoading] = useState(true); useEffect(() => { setTimeout(() => { diff --git a/tooling/css-variable-docgen-components/src/CharacteristicUsageRow.tsx b/tooling/css-variable-docgen-components/src/CharacteristicUsageRow.tsx index 1fc58bd78e3..2707ebbe726 100644 --- a/tooling/css-variable-docgen-components/src/CharacteristicUsageRow.tsx +++ b/tooling/css-variable-docgen-components/src/CharacteristicUsageRow.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import Markdown from "markdown-to-jsx"; +import { Markdown } from "@storybook/blocks"; import { characteristic, getCharacteristicValue } from "@salt-ds/core"; import { ColorBlock } from "docs/components/ColorBlock"; import { Name, Description, StyledTd } from "./common"; @@ -41,11 +41,18 @@ const TokenInfo = (props: { token: string }) => { const characteristicName = token .split("--salt-")[1] .split("-")[0] as characteristic; + + const provider = document.querySelector(".salt-theme"); + + if (!provider) { + return null; + } + const value = getCharacteristicValue( "salt-theme", characteristicName, token.split(`${characteristicName}-`)[1], - document.querySelector(".salt-theme") as HTMLElement + provider ); return ( @@ -64,18 +71,16 @@ export const CharacteristicUsageRow = (props: CharacteristicUsageRowProps) => { {name} - {tokens && - tokens.map((token) => ( - - {token} - - ))} + {tokens?.map((token) => ( + + {token} + + ))} - {tokens && - tokens.map((token, i) => ( - - ))} + {tokens?.map((token, i) => ( + + ))} ); diff --git a/tooling/css-variable-docgen-components/src/ClassNameRow.tsx b/tooling/css-variable-docgen-components/src/ClassNameRow.tsx index 7c4c4cd7898..109b246a273 100644 --- a/tooling/css-variable-docgen-components/src/ClassNameRow.tsx +++ b/tooling/css-variable-docgen-components/src/ClassNameRow.tsx @@ -1,5 +1,5 @@ -import Markdown from "markdown-to-jsx"; -import { ClassName } from "./CSSClassTable"; +import { Markdown } from "@storybook/blocks"; +import { ClassName } from "./utils"; import { Name, Description, StyledTd } from "./common"; interface ClassNameRowProps { diff --git a/tooling/css-variable-docgen-components/src/EmptyBlock.tsx b/tooling/css-variable-docgen-components/src/EmptyBlock.tsx index b2dccd5061c..3b90dc67f23 100644 --- a/tooling/css-variable-docgen-components/src/EmptyBlock.tsx +++ b/tooling/css-variable-docgen-components/src/EmptyBlock.tsx @@ -1,6 +1,6 @@ import { styled } from "@storybook/theming"; +import { withReset } from "@storybook/components"; import { transparentize } from "polished"; -import { withReset } from "./common"; import { ComponentProps } from "react"; const Wrapper = styled.div(withReset, ({ theme }) => ({ diff --git a/tooling/css-variable-docgen-components/src/common.ts b/tooling/css-variable-docgen-components/src/common.ts index be19cb47426..5dc06f254ad 100644 --- a/tooling/css-variable-docgen-components/src/common.ts +++ b/tooling/css-variable-docgen-components/src/common.ts @@ -1,37 +1,5 @@ -import { CSSObject, styled, Theme } from "@storybook/theming"; -import { transparentize } from "polished"; - -export const withReset = ({ theme }: { theme: Theme }): CSSObject => ({ - fontFamily: theme.typography.fonts.base, - fontSize: theme.typography.size.s3, - margin: 0, - - WebkitFontSmoothing: "antialiased", - MozOsxFontSmoothing: "grayscale", - WebkitTapHighlightColor: "rgba(0, 0, 0, 0)", - WebkitOverflowScrolling: "touch", -}); - -export const codeCommon = ({ theme }: { theme: Theme }): CSSObject => ({ - lineHeight: 1, - margin: "0 2px", - padding: "3px 5px", - whiteSpace: "nowrap", - - borderRadius: 3, - fontSize: theme.typography.size.s2 - 1, - - border: - theme.base === "light" - ? `1px solid ${theme.color.mediumlight}` - : `1px solid ${theme.color.darker}`, - color: - theme.base === "light" - ? transparentize(0.1, theme.color.defaultText) - : transparentize(0.3, theme.color.defaultText), - backgroundColor: - theme.base === "light" ? theme.color.lighter : theme.color.border, -}); +import { styled, CSSObject } from "@storybook/theming"; +import { codeCommon } from "@storybook/components"; export const Name = styled.span({ fontWeight: "bold" }); @@ -46,10 +14,10 @@ export const Description = styled.div(({ theme }) => ({ }, code: { - ...codeCommon({ theme }), + ...(codeCommon({ theme }) as CSSObject), fontSize: 12, fontFamily: theme.typography.fonts.mono, - }, + } as CSSObject, "& code": { margin: 0, diff --git a/tooling/css-variable-docgen-components/src/utils.ts b/tooling/css-variable-docgen-components/src/utils.ts index 3586502cd4f..22474a5a721 100644 --- a/tooling/css-variable-docgen-components/src/utils.ts +++ b/tooling/css-variable-docgen-components/src/utils.ts @@ -1,4 +1,5 @@ -import { Component } from "@storybook/addon-docs"; +import { getDocgenSection, isValidDocgenSection } from "@storybook/docs-tools"; +import { useOf } from "@storybook/addon-docs"; const SALT_CHARACTERISTICS = [ "accent", @@ -19,38 +20,62 @@ const SALT_CHARACTERISTICS = [ "track", ]; -export function hasDocgen(component: Component): boolean { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - return !!component.__docgenInfo; +export interface ClassName { + name: string; + description: string; } -export function getDocgenSection(component: Component, section: string): T { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-return - return hasDocgen(component) ? component.__docgenInfo[section] : null; +interface CSSVariable { + name: string; + type?: string; + defaultValue?: string; } -export function getCharacteristics( - cssVariablesApi: T -): Record { - const characteristicFoundationTokenMap: Record = {}; - - Object.keys(cssVariablesApi).forEach((token) => { - if (token.startsWith("--salt-")) { - const characteristicName = token.replace("--salt-", "").split("-")[0]; - if ( - characteristicName.length && - SALT_CHARACTERISTICS.includes(characteristicName) - ) { - if (!characteristicFoundationTokenMap[characteristicName]) { - characteristicFoundationTokenMap[characteristicName] = [token]; - } else if ( - !characteristicFoundationTokenMap[characteristicName]?.includes(token) +export function getCharacteristics(resolved: ReturnType) { + const section = getDocgenSection(resolved, "cssVariablesApi") as Record< + string, + CSSVariable[] + >; + if (isValidDocgenSection(section)) { + const characteristicFoundationTokenMap: Record = {}; + + Object.keys(section).forEach((token) => { + if (token.startsWith("--salt-")) { + const characteristicName = token.replace("--salt-", "").split("-")[0]; + if ( + characteristicName.length && + SALT_CHARACTERISTICS.includes(characteristicName) ) { - characteristicFoundationTokenMap[characteristicName].push(token); + if (!characteristicFoundationTokenMap[characteristicName]) { + characteristicFoundationTokenMap[characteristicName] = [token]; + } else if ( + !characteristicFoundationTokenMap[characteristicName]?.includes( + token + ) + ) { + characteristicFoundationTokenMap[characteristicName].push(token); + } } } - } - }); + }); + + return characteristicFoundationTokenMap; + } + + return {}; +} + +export function getClassNames( + resolved: ReturnType +): Record { + const classNames = getDocgenSection(resolved, "classNames") as Record< + string, + ClassName + >; + + if (isValidDocgenSection(classNames)) { + return classNames; + } - return characteristicFoundationTokenMap; + return {}; } diff --git a/tooling/css-variable-docgen-plugin/package.json b/tooling/css-variable-docgen-plugin/package.json index d83f3231700..c58d450887b 100644 --- a/tooling/css-variable-docgen-plugin/package.json +++ b/tooling/css-variable-docgen-plugin/package.json @@ -7,13 +7,9 @@ "README.md" ], "dependencies": { - "@storybook/components": "^8.0.0", - "@storybook/theming": "^8.0.0", "css-tree": "^2.0.4", "glob": "^8.0.0", - "glob-promise": "^6.0.0", - "markdown-to-jsx": "^7.1.3", - "polished": "^4.0.5" + "glob-promise": "^6.0.0" }, "devDependencies": { "@types/css-tree": "^2.0.0" diff --git a/yarn.lock b/yarn.lock index e9e688e0628..061a551774d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12,6 +12,13 @@ __metadata: languageName: node linkType: hard +"@adobe/css-tools@npm:^4.3.2": + version: 4.3.3 + resolution: "@adobe/css-tools@npm:4.3.3" + checksum: 10/0e77057efb4e18182560855503066b75edca98671be327d3f8a7ae89ec3da6821e693114b55225909fca00d7e7ed8422f3d79d71fe95dd4d5df1f2026a9fda02 + languageName: node + linkType: hard + "@ampproject/remapping@npm:^2.2.0": version: 2.2.1 resolution: "@ampproject/remapping@npm:2.2.1" @@ -5831,11 +5838,13 @@ __metadata: "@storybook/addon-docs": "npm:^8.0.0" "@storybook/addon-essentials": "npm:^8.0.0" "@storybook/addon-links": "npm:^8.0.0" - "@storybook/addon-mdx-gfm": "npm:8.0.0" + "@storybook/addon-mdx-gfm": "npm:^8.0.0" "@storybook/addon-storysource": "npm:^8.0.0" - "@storybook/addons": "npm:^7.4.5" + "@storybook/blocks": "npm:^8.0.0" + "@storybook/manager-api": "npm:^8.0.0" "@storybook/react": "npm:^8.0.0" - "@storybook/react-vite": "npm:8.0.0" + "@storybook/react-vite": "npm:^8.0.0" + "@storybook/test": "npm:^8.0.0" "@storybook/theming": "npm:^8.0.0" "@tanstack/react-query": "npm:^4.28.0" "@testing-library/cypress": "npm:^10.0.0" @@ -5867,7 +5876,7 @@ __metadata: eslint-plugin-cypress: "npm:^2.14.0" eslint-plugin-import: "npm:^2.28.1" eslint-plugin-local-rules: "npm:^2.0.0" - eslint-plugin-storybook: "npm:^0.6.14" + eslint-plugin-storybook: "npm:^0.8.0" modular-scripts: "patch:modular-scripts@npm:3.6.0#.yarn/patches/modular-scripts-npm-3.6.0-d967962075.patch" msw: "npm:^1.2.1" msw-storybook-addon: "npm:^1.8.0" @@ -5878,7 +5887,7 @@ __metadata: react-dom: "npm:^18.0.0" rifm: "npm:^0.12.0" sass: "npm:^1.52.3" - storybook: "npm:8.0.0" + storybook: "npm:^8.0.0" stylelint: "npm:^16.0.0" typescript: "npm:4.6.4" vite: "npm:^4.4.9" @@ -6642,7 +6651,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-mdx-gfm@npm:8.0.0": +"@storybook/addon-mdx-gfm@npm:^8.0.0": version: 8.0.0 resolution: "@storybook/addon-mdx-gfm@npm:8.0.0" dependencies: @@ -6700,21 +6709,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addons@npm:^7.4.5": - version: 7.4.5 - resolution: "@storybook/addons@npm:7.4.5" - dependencies: - "@storybook/manager-api": "npm:7.4.5" - "@storybook/preview-api": "npm:7.4.5" - "@storybook/types": "npm:7.4.5" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/693f5813cb838a708c7652b9b54cb7e8338dbafb0388fc456cae14a1981cacbe46302650b6c94b3e36d906d1dc1f6f8c5fd06637a3f3beeeb7b7588821f78274 - languageName: node - linkType: hard - -"@storybook/blocks@npm:8.0.0": +"@storybook/blocks@npm:8.0.0, @storybook/blocks@npm:^8.0.0": version: 8.0.0 resolution: "@storybook/blocks@npm:8.0.0" dependencies: @@ -6813,20 +6808,6 @@ __metadata: languageName: node linkType: hard -"@storybook/channels@npm:7.4.5": - version: 7.4.5 - resolution: "@storybook/channels@npm:7.4.5" - dependencies: - "@storybook/client-logger": "npm:7.4.5" - "@storybook/core-events": "npm:7.4.5" - "@storybook/global": "npm:^5.0.0" - qs: "npm:^6.10.0" - telejson: "npm:^7.2.0" - tiny-invariant: "npm:^1.3.1" - checksum: 10/0266db2d43f4d64f9bb13051ee7f6470504b35f6c89802d2ca41dbab6a7ea7427a567019d03c17a2f27c80d819f276a0e7f374665679ceac6e44776e9cf3ce9d - languageName: node - linkType: hard - "@storybook/channels@npm:8.0.0": version: 8.0.0 resolution: "@storybook/channels@npm:8.0.0" @@ -6887,15 +6868,6 @@ __metadata: languageName: node linkType: hard -"@storybook/client-logger@npm:7.4.5": - version: 7.4.5 - resolution: "@storybook/client-logger@npm:7.4.5" - dependencies: - "@storybook/global": "npm:^5.0.0" - checksum: 10/76fe3cf60e58760d7c759b8a2a49ca07c577e89d07622aea6ec648b9d3c8a35068a0194a99ce47d99de8dad72bee9f7ef4a2f251275a00e780ac883443dc7e97 - languageName: node - linkType: hard - "@storybook/client-logger@npm:8.0.0": version: 8.0.0 resolution: "@storybook/client-logger@npm:8.0.0" @@ -6984,15 +6956,6 @@ __metadata: languageName: node linkType: hard -"@storybook/core-events@npm:7.4.5": - version: 7.4.5 - resolution: "@storybook/core-events@npm:7.4.5" - dependencies: - ts-dedent: "npm:^2.0.0" - checksum: 10/302bf70fc48b418ab7f58bd27aede1910e7eea8ddb416c46a997144b66b09032f7908523ed6794cd7b6e33624f64d76f19ae91a17d726ae517d82f8f9d9d427a - languageName: node - linkType: hard - "@storybook/core-events@npm:8.0.0": version: 8.0.0 resolution: "@storybook/core-events@npm:8.0.0" @@ -7089,7 +7052,7 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.0, @storybook/csf@npm:^0.1.2": +"@storybook/csf@npm:^0.1.2": version: 0.1.2 resolution: "@storybook/csf@npm:0.1.2" dependencies: @@ -7137,33 +7100,22 @@ __metadata: languageName: node linkType: hard -"@storybook/manager-api@npm:7.4.5": - version: 7.4.5 - resolution: "@storybook/manager-api@npm:7.4.5" +"@storybook/instrumenter@npm:8.0.0": + version: 8.0.0 + resolution: "@storybook/instrumenter@npm:8.0.0" dependencies: - "@storybook/channels": "npm:7.4.5" - "@storybook/client-logger": "npm:7.4.5" - "@storybook/core-events": "npm:7.4.5" - "@storybook/csf": "npm:^0.1.0" + "@storybook/channels": "npm:8.0.0" + "@storybook/client-logger": "npm:8.0.0" + "@storybook/core-events": "npm:8.0.0" "@storybook/global": "npm:^5.0.0" - "@storybook/router": "npm:7.4.5" - "@storybook/theming": "npm:7.4.5" - "@storybook/types": "npm:7.4.5" - dequal: "npm:^2.0.2" - lodash: "npm:^4.17.21" - memoizerific: "npm:^1.11.3" - semver: "npm:^7.3.7" - store2: "npm:^2.14.2" - telejson: "npm:^7.2.0" - ts-dedent: "npm:^2.0.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/771512ea6699a7477085c3a310eea6f705a70ecf6e4d5adfdb1007d33300665796a4f53246d16835818caad88d391d9ce569f58697fabe95086bd565aeac7642 + "@storybook/preview-api": "npm:8.0.0" + "@vitest/utils": "npm:^0.34.6" + util: "npm:^0.12.4" + checksum: 10/223cdfa5a387758ec94e937f1c3121dca0638792331a5068ab59e79f7dfcbde129d565d88c654722207e9b4949dd8cd72f51859feefb524259b988c344fac405 languageName: node linkType: hard -"@storybook/manager-api@npm:8.0.0": +"@storybook/manager-api@npm:8.0.0, @storybook/manager-api@npm:^8.0.0": version: 8.0.0 resolution: "@storybook/manager-api@npm:8.0.0" dependencies: @@ -7199,28 +7151,6 @@ __metadata: languageName: node linkType: hard -"@storybook/preview-api@npm:7.4.5": - version: 7.4.5 - resolution: "@storybook/preview-api@npm:7.4.5" - dependencies: - "@storybook/channels": "npm:7.4.5" - "@storybook/client-logger": "npm:7.4.5" - "@storybook/core-events": "npm:7.4.5" - "@storybook/csf": "npm:^0.1.0" - "@storybook/global": "npm:^5.0.0" - "@storybook/types": "npm:7.4.5" - "@types/qs": "npm:^6.9.5" - dequal: "npm:^2.0.2" - lodash: "npm:^4.17.21" - memoizerific: "npm:^1.11.3" - qs: "npm:^6.10.0" - synchronous-promise: "npm:^2.0.15" - ts-dedent: "npm:^2.0.0" - util-deprecate: "npm:^1.0.2" - checksum: 10/9c4852f07bc6a13d593b689caa3426356277e4166778cd8262c5d235dd8f11bd6778b6e0ec49b1cb4d842e0b18607d8cbcd56f06277b92c1284eff389f963540 - languageName: node - linkType: hard - "@storybook/preview-api@npm:8.0.0": version: 8.0.0 resolution: "@storybook/preview-api@npm:8.0.0" @@ -7260,7 +7190,7 @@ __metadata: languageName: node linkType: hard -"@storybook/react-vite@npm:8.0.0": +"@storybook/react-vite@npm:^8.0.0": version: 8.0.0 resolution: "@storybook/react-vite@npm:8.0.0" dependencies: @@ -7318,20 +7248,6 @@ __metadata: languageName: node linkType: hard -"@storybook/router@npm:7.4.5": - version: 7.4.5 - resolution: "@storybook/router@npm:7.4.5" - dependencies: - "@storybook/client-logger": "npm:7.4.5" - memoizerific: "npm:^1.11.3" - qs: "npm:^6.10.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/0337497fe4972ad60b1b91843d8912003c5102f140a21ba8b082346808b9fcce204f4d6cc1b9f742a94a8d9442f85c109fdb2d166d0fe5b1c86d971561634401 - languageName: node - linkType: hard - "@storybook/router@npm:8.0.0": version: 8.0.0 resolution: "@storybook/router@npm:8.0.0" @@ -7372,18 +7288,22 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@npm:7.4.5": - version: 7.4.5 - resolution: "@storybook/theming@npm:7.4.5" +"@storybook/test@npm:^8.0.0": + version: 8.0.0 + resolution: "@storybook/test@npm:8.0.0" dependencies: - "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0" - "@storybook/client-logger": "npm:7.4.5" - "@storybook/global": "npm:^5.0.0" - memoizerific: "npm:^1.11.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/300882982c66f59671db6d25368f86a3666476e48b65531494787be07e6488c96a4a7928894c3b385754f52beb251475db6557f21d602955d67f8c03553f2435 + "@storybook/client-logger": "npm:8.0.0" + "@storybook/core-events": "npm:8.0.0" + "@storybook/instrumenter": "npm:8.0.0" + "@storybook/preview-api": "npm:8.0.0" + "@testing-library/dom": "npm:^9.3.1" + "@testing-library/jest-dom": "npm:^6.4.0" + "@testing-library/user-event": "npm:^14.5.2" + "@vitest/expect": "npm:1.1.3" + "@vitest/spy": "npm:^1.1.3" + chai: "npm:^4.3.7" + util: "npm:^0.12.4" + checksum: 10/cd836beb247705c479f14b4ddac4582b04bd4ea6ff10ca7671b1e7ce0459e698853b1da91043119405aa10cb912c11ef74bf322648f28169c994171567a1bd8b languageName: node linkType: hard @@ -7407,18 +7327,6 @@ __metadata: languageName: node linkType: hard -"@storybook/types@npm:7.4.5": - version: 7.4.5 - resolution: "@storybook/types@npm:7.4.5" - dependencies: - "@storybook/channels": "npm:7.4.5" - "@types/babel__core": "npm:^7.0.0" - "@types/express": "npm:^4.7.0" - file-system-cache: "npm:2.3.0" - checksum: 10/d351e51df0d362258811db6d95c353219296f79572c5697bed7b93a561616170adecabbc7c67be3d2a5d3acf4187c0aa75229b8dd2924db44d8d4c09f51a6d4e - languageName: node - linkType: hard - "@storybook/types@npm:8.0.0": version: 8.0.0 resolution: "@storybook/types@npm:8.0.0" @@ -8054,19 +7962,52 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:^9.0.0": - version: 9.0.0 - resolution: "@testing-library/dom@npm:9.0.0" +"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.1": + version: 9.3.4 + resolution: "@testing-library/dom@npm:9.3.4" dependencies: "@babel/code-frame": "npm:^7.10.4" "@babel/runtime": "npm:^7.12.5" "@types/aria-query": "npm:^5.0.1" - aria-query: "npm:^5.0.0" + aria-query: "npm:5.1.3" chalk: "npm:^4.1.0" dom-accessibility-api: "npm:^0.5.9" - lz-string: "npm:^1.4.4" + lz-string: "npm:^1.5.0" pretty-format: "npm:^27.0.2" - checksum: 10/c8a1c682b7004b63a1076f074417e5792f2cc7e91c04c60bb0a3b5b2ab30eb37930b90f42f993ec7fd3616f9d9575e6ac4a799d39a8cb7f39e8d18abcd81296a + checksum: 10/510da752ea76f4a10a0a4e3a77917b0302cf03effe576cd3534cab7e796533ee2b0e9fb6fb11b911a1ebd7c70a0bb6f235bf4f816c9b82b95b8fe0cddfd10975 + languageName: node + linkType: hard + +"@testing-library/jest-dom@npm:^6.4.0": + version: 6.4.2 + resolution: "@testing-library/jest-dom@npm:6.4.2" + dependencies: + "@adobe/css-tools": "npm:^4.3.2" + "@babel/runtime": "npm:^7.9.2" + aria-query: "npm:^5.0.0" + chalk: "npm:^3.0.0" + css.escape: "npm:^1.5.1" + dom-accessibility-api: "npm:^0.6.3" + lodash: "npm:^4.17.15" + redent: "npm:^3.0.0" + peerDependencies: + "@jest/globals": ">= 28" + "@types/bun": "*" + "@types/jest": ">= 28" + jest: ">= 28" + vitest: ">= 0.32" + peerDependenciesMeta: + "@jest/globals": + optional: true + "@types/bun": + optional: true + "@types/jest": + optional: true + jest: + optional: true + vitest: + optional: true + checksum: 10/7ee1e51caffad032734a4a43a00bf72d49080cf1bbf53021b443e91c7fa3762a66f55ce68f1c6643590fe66fbc4df92142659b8cf17c92166a3fb22691987e0d languageName: node linkType: hard @@ -8084,6 +8025,15 @@ __metadata: languageName: node linkType: hard +"@testing-library/user-event@npm:^14.5.2": + version: 14.5.2 + resolution: "@testing-library/user-event@npm:14.5.2" + peerDependencies: + "@testing-library/dom": ">=7.21.4" + checksum: 10/49821459d81c6bc435d97128d6386ca24f1e4b3ba8e46cb5a96fe3643efa6e002d88c1b02b7f2ec58da593e805c59b78d7fdf0db565c1f02ba782f63ee984040 + languageName: node + linkType: hard + "@tootallnate/once@npm:1": version: 1.1.2 resolution: "@tootallnate/once@npm:1.1.2" @@ -9152,13 +9102,13 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/scope-manager@npm:5.49.0": - version: 5.49.0 - resolution: "@typescript-eslint/scope-manager@npm:5.49.0" +"@typescript-eslint/scope-manager@npm:5.62.0": + version: 5.62.0 + resolution: "@typescript-eslint/scope-manager@npm:5.62.0" dependencies: - "@typescript-eslint/types": "npm:5.49.0" - "@typescript-eslint/visitor-keys": "npm:5.49.0" - checksum: 10/3f9aeeb8d864c7ef39baeeac90070565358ccaddfd412e3f61c5d9e8c7c92c3335642fa63c870210ac49d693f41308536de91dd7f9d39b8d0fd3c3f3250e65e3 + "@typescript-eslint/types": "npm:5.62.0" + "@typescript-eslint/visitor-keys": "npm:5.62.0" + checksum: 10/e827770baa202223bc0387e2fd24f630690809e460435b7dc9af336c77322290a770d62bd5284260fa881c86074d6a9fd6c97b07382520b115f6786b8ed499da languageName: node linkType: hard @@ -9189,10 +9139,10 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/types@npm:5.49.0": - version: 5.49.0 - resolution: "@typescript-eslint/types@npm:5.49.0" - checksum: 10/7b38f9f1cdf76e847bde3d69b23a14987da21ab1c8bad89b76f1ebccb35ea7928a45f65f73673e8f2b10c725b626976a664a80ddaa16b875e63d47d6ebb29095 +"@typescript-eslint/types@npm:5.62.0": + version: 5.62.0 + resolution: "@typescript-eslint/types@npm:5.62.0" + checksum: 10/24e8443177be84823242d6729d56af2c4b47bfc664dd411a1d730506abf2150d6c31bdefbbc6d97c8f91043e3a50e0c698239dcb145b79bb6b0c34469aaf6c45 languageName: node linkType: hard @@ -9203,12 +9153,12 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/typescript-estree@npm:5.49.0": - version: 5.49.0 - resolution: "@typescript-eslint/typescript-estree@npm:5.49.0" +"@typescript-eslint/typescript-estree@npm:5.62.0": + version: 5.62.0 + resolution: "@typescript-eslint/typescript-estree@npm:5.62.0" dependencies: - "@typescript-eslint/types": "npm:5.49.0" - "@typescript-eslint/visitor-keys": "npm:5.49.0" + "@typescript-eslint/types": "npm:5.62.0" + "@typescript-eslint/visitor-keys": "npm:5.62.0" debug: "npm:^4.3.4" globby: "npm:^11.1.0" is-glob: "npm:^4.0.3" @@ -9217,7 +9167,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/1934a0538d659424decc4d0634b3f30d8e77cbcfacf969432e3f1f8b4f172d05a89ef0c6049c8efad066cbc69ef27b9dcd6ce4ebee3b4ca1de6ce40b954d6a7e + checksum: 10/06c975eb5f44b43bd19fadc2e1023c50cf87038fe4c0dd989d4331c67b3ff509b17fa60a3251896668ab4d7322bdc56162a9926971218d2e1a1874d2bef9a52e languageName: node linkType: hard @@ -9256,31 +9206,31 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/utils@npm:^5.45.0": - version: 5.49.0 - resolution: "@typescript-eslint/utils@npm:5.49.0" +"@typescript-eslint/utils@npm:^5.62.0": + version: 5.62.0 + resolution: "@typescript-eslint/utils@npm:5.62.0" dependencies: + "@eslint-community/eslint-utils": "npm:^4.2.0" "@types/json-schema": "npm:^7.0.9" "@types/semver": "npm:^7.3.12" - "@typescript-eslint/scope-manager": "npm:5.49.0" - "@typescript-eslint/types": "npm:5.49.0" - "@typescript-eslint/typescript-estree": "npm:5.49.0" + "@typescript-eslint/scope-manager": "npm:5.62.0" + "@typescript-eslint/types": "npm:5.62.0" + "@typescript-eslint/typescript-estree": "npm:5.62.0" eslint-scope: "npm:^5.1.1" - eslint-utils: "npm:^3.0.0" semver: "npm:^7.3.7" peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 - checksum: 10/0ddf01b29ed0f6da150400fc44cba46420317c0a69099440d3589a51ca90594d6d2c5a2672ff0505310cb3a8bd2edb357b489eb6a10ea12f168ceac19b22adf6 + checksum: 10/15ef13e43998a082b15f85db979f8d3ceb1f9ce4467b8016c267b1738d5e7cdb12aa90faf4b4e6dd6486c236cf9d33c463200465cf25ff997dbc0f12358550a1 languageName: node linkType: hard -"@typescript-eslint/visitor-keys@npm:5.49.0": - version: 5.49.0 - resolution: "@typescript-eslint/visitor-keys@npm:5.49.0" +"@typescript-eslint/visitor-keys@npm:5.62.0": + version: 5.62.0 + resolution: "@typescript-eslint/visitor-keys@npm:5.62.0" dependencies: - "@typescript-eslint/types": "npm:5.49.0" + "@typescript-eslint/types": "npm:5.62.0" eslint-visitor-keys: "npm:^3.3.0" - checksum: 10/b654b526f4a4217c04b75061adafce867db50c6e10dee7b5ff90dc586d1931c2b1498310cadf786a34df6ed774dc9f8276c030726da06d4a3e2b9f413b8992c7 + checksum: 10/dc613ab7569df9bbe0b2ca677635eb91839dfb2ca2c6fa47870a5da4f160db0b436f7ec0764362e756d4164e9445d49d5eb1ff0b87f4c058946ae9d8c92eb388 languageName: node linkType: hard @@ -9388,6 +9338,17 @@ __metadata: languageName: node linkType: hard +"@vitest/expect@npm:1.1.3": + version: 1.1.3 + resolution: "@vitest/expect@npm:1.1.3" + dependencies: + "@vitest/spy": "npm:1.1.3" + "@vitest/utils": "npm:1.1.3" + chai: "npm:^4.3.10" + checksum: 10/055a4f11fd3d9f818a62599a4e4d500598b571165bf6273d6a80847cbc7294ebb287d7f6f299f5bfd415c71655bafbb9d55195cc21196d19fccd8b62d601e18a + languageName: node + linkType: hard + "@vitest/runner@npm:1.0.1": version: 1.0.1 resolution: "@vitest/runner@npm:1.0.1" @@ -9419,6 +9380,24 @@ __metadata: languageName: node linkType: hard +"@vitest/spy@npm:1.1.3": + version: 1.1.3 + resolution: "@vitest/spy@npm:1.1.3" + dependencies: + tinyspy: "npm:^2.2.0" + checksum: 10/efb311f7fade218cf93ad2d76e069726f75170004a2537d6745a59c0d43288991ef02b97d1c932cb2a3152e769a506a5f09f165988742372c37b5f9169d72843 + languageName: node + linkType: hard + +"@vitest/spy@npm:^1.1.3": + version: 1.4.0 + resolution: "@vitest/spy@npm:1.4.0" + dependencies: + tinyspy: "npm:^2.2.0" + checksum: 10/0e48f9a64f62801c2abf10df1013ec5e5b75c47bdca6a5d4c8246b3dd7bdf01ade3df6c99fd0751a870a16bd63c127b3e58e0f5cbc320c48d0727ab5da89d028 + languageName: node + linkType: hard + "@vitest/utils@npm:1.0.1": version: 1.0.1 resolution: "@vitest/utils@npm:1.0.1" @@ -9430,6 +9409,29 @@ __metadata: languageName: node linkType: hard +"@vitest/utils@npm:1.1.3": + version: 1.1.3 + resolution: "@vitest/utils@npm:1.1.3" + dependencies: + diff-sequences: "npm:^29.6.3" + estree-walker: "npm:^3.0.3" + loupe: "npm:^2.3.7" + pretty-format: "npm:^29.7.0" + checksum: 10/2263c946fde40aa289cba1734e8f5ef6f25d34aac93395cd2f15c7838cbc9b9468529ecc812ce099fcad153edbb24e857ee4cc8453bf18ecae36804d89d4b538 + languageName: node + linkType: hard + +"@vitest/utils@npm:^0.34.6": + version: 0.34.7 + resolution: "@vitest/utils@npm:0.34.7" + dependencies: + diff-sequences: "npm:^29.4.3" + loupe: "npm:^2.3.6" + pretty-format: "npm:^29.5.0" + checksum: 10/720b43f8fece1371aaafc722e5d86e1f5e4334db2aac638002a05cd60f097763ff07ae7e3a99db99f7c282d3f60036b76ee91129cf9f2e877812dd5eb432024f + languageName: node + linkType: hard + "@webassemblyjs/ast@npm:1.11.1": version: 1.11.1 resolution: "@webassemblyjs/ast@npm:1.11.1" @@ -10112,7 +10114,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:^5.0.0, aria-query@npm:^5.1.3": +"aria-query@npm:5.1.3, aria-query@npm:^5.0.0, aria-query@npm:^5.1.3": version: 5.1.3 resolution: "aria-query@npm:5.1.3" dependencies: @@ -11455,9 +11457,9 @@ __metadata: languageName: node linkType: hard -"chai@npm:^4.3.10": - version: 4.3.10 - resolution: "chai@npm:4.3.10" +"chai@npm:^4.3.10, chai@npm:^4.3.7": + version: 4.4.1 + resolution: "chai@npm:4.4.1" dependencies: assertion-error: "npm:^1.1.0" check-error: "npm:^1.0.3" @@ -11466,7 +11468,7 @@ __metadata: loupe: "npm:^2.3.6" pathval: "npm:^1.1.1" type-detect: "npm:^4.0.8" - checksum: 10/9e545fd60f5efee4f06f7ad62f7b1b142932b08fbb3454db69defd511e7c58771ce51843764212da1e129b2c9d1b029fbf5f98da030fe67a95a0853e8679524f + checksum: 10/c6d7aba913a67529c68dbec3673f94eb9c586c5474cc5142bd0b587c9c9ec9e5fbaa937e038ecaa6475aea31433752d5fabdd033b9248bde6ae53befcde774ae languageName: node linkType: hard @@ -12632,6 +12634,12 @@ __metadata: "css-variable-docgen-components@workspace:tooling/css-variable-docgen-components": version: 0.0.0-use.local resolution: "css-variable-docgen-components@workspace:tooling/css-variable-docgen-components" + dependencies: + "@storybook/addon-docs": "npm:^8.0.0" + "@storybook/blocks": "npm:^8.0.0" + "@storybook/components": "npm:^8.0.0" + "@storybook/theming": "npm:^8.0.0" + polished: "npm:^4.0.5" languageName: unknown linkType: soft @@ -12639,14 +12647,10 @@ __metadata: version: 0.0.0-use.local resolution: "css-variable-docgen-plugin@workspace:tooling/css-variable-docgen-plugin" dependencies: - "@storybook/components": "npm:^8.0.0" - "@storybook/theming": "npm:^8.0.0" "@types/css-tree": "npm:^2.0.0" css-tree: "npm:^2.0.4" glob: "npm:^8.0.0" glob-promise: "npm:^6.0.0" - markdown-to-jsx: "npm:^7.1.3" - polished: "npm:^4.0.5" peerDependencies: vite: ">2.0.0-0" languageName: unknown @@ -12666,7 +12670,7 @@ __metadata: languageName: node linkType: hard -"css.escape@npm:1.5.1": +"css.escape@npm:1.5.1, css.escape@npm:^1.5.1": version: 1.5.1 resolution: "css.escape@npm:1.5.1" checksum: 10/f6d38088d870a961794a2580b2b2af1027731bb43261cfdce14f19238a88664b351cc8978abc20f06cc6bbde725699dec8deb6fe9816b139fc3f2af28719e774 @@ -13736,7 +13740,7 @@ __metadata: languageName: node linkType: hard -"diff-sequences@npm:^29.6.3": +"diff-sequences@npm:^29.4.3, diff-sequences@npm:^29.6.3": version: 29.6.3 resolution: "diff-sequences@npm:29.6.3" checksum: 10/179daf9d2f9af5c57ad66d97cb902a538bcf8ed64963fa7aa0c329b3de3665ce2eb6ffdc2f69f29d445fa4af2517e5e55e5b6e00c00a9ae4f43645f97f7078cb @@ -15259,17 +15263,17 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@npm:^0.6.14": - version: 0.6.14 - resolution: "eslint-plugin-storybook@npm:0.6.14" +"eslint-plugin-storybook@npm:^0.8.0": + version: 0.8.0 + resolution: "eslint-plugin-storybook@npm:0.8.0" dependencies: "@storybook/csf": "npm:^0.0.1" - "@typescript-eslint/utils": "npm:^5.45.0" - requireindex: "npm:^1.1.0" + "@typescript-eslint/utils": "npm:^5.62.0" + requireindex: "npm:^1.2.0" ts-dedent: "npm:^2.2.0" peerDependencies: eslint: ">=6" - checksum: 10/6717398c52ff3d858837e55f53c8be59bcd2aa81ed969f4fe50ced4a9842f14b44fb15a652469eee18d9d23a1e37599e3fe200701471edec779fd1be2ef2310d + checksum: 10/a66e6737298af9bb830e3b14cdbd204e589a38adb810f02d843849936ef9175a80a49c8b8fa9263f8c2b9a8f36fdd3a2d429382d8051568c58d6272c65c2f5d3 languageName: node linkType: hard @@ -15302,17 +15306,6 @@ __metadata: languageName: node linkType: hard -"eslint-utils@npm:^3.0.0": - version: 3.0.0 - resolution: "eslint-utils@npm:3.0.0" - dependencies: - eslint-visitor-keys: "npm:^2.0.0" - peerDependencies: - eslint: ">=5" - checksum: 10/7675260a6b220c70f13e4cdbf077e93cad0dfb388429a27d6c0b584b2b20dca24594508e8bdb00a460a5764bd364a5018e20c2b8b1d70f82bcc3fdc30692a4d2 - languageName: node - linkType: hard - "eslint-visitor-keys@npm:^1.1.0, eslint-visitor-keys@npm:^1.3.0": version: 1.3.0 resolution: "eslint-visitor-keys@npm:1.3.0" @@ -15582,7 +15575,7 @@ __metadata: languageName: node linkType: hard -"estree-walker@npm:^3.0.0": +"estree-walker@npm:^3.0.0, estree-walker@npm:^3.0.3": version: 3.0.3 resolution: "estree-walker@npm:3.0.3" dependencies: @@ -20498,12 +20491,12 @@ __metadata: languageName: node linkType: hard -"lz-string@npm:^1.4.4": - version: 1.4.4 - resolution: "lz-string@npm:1.4.4" +"lz-string@npm:^1.4.4, lz-string@npm:^1.5.0": + version: 1.5.0 + resolution: "lz-string@npm:1.5.0" bin: lz-string: bin/bin.js - checksum: 10/da3abc3c15b3f91ab0fba0fe8ea3bb53d3c758d5c50d88d97b759e52d9b5224f8b05edc0e6423bfd448e6bcbe30f79236b7f2e6e7f8a321be62ae77b88092581 + checksum: 10/e86f0280e99a8d8cd4eef24d8601ddae15ce54e43ac9990dfcb79e1e081c255ad24424a30d78d2ad8e51a8ce82a66a930047fed4b4aa38c6f0b392ff9300edfc languageName: node linkType: hard @@ -20701,7 +20694,7 @@ __metadata: languageName: node linkType: hard -"markdown-to-jsx@npm:7.3.2, markdown-to-jsx@npm:^7.1.3": +"markdown-to-jsx@npm:7.3.2": version: 7.3.2 resolution: "markdown-to-jsx@npm:7.3.2" peerDependencies: @@ -25525,7 +25518,7 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^29.7.0": +"pretty-format@npm:^29.5.0, pretty-format@npm:^29.7.0": version: 29.7.0 resolution: "pretty-format@npm:29.7.0" dependencies: @@ -27060,7 +27053,7 @@ __metadata: languageName: node linkType: hard -"requireindex@npm:^1.1.0": +"requireindex@npm:^1.2.0": version: 1.2.0 resolution: "requireindex@npm:1.2.0" checksum: 10/266d1cb31f6cbc4b6cf2e898f5bbc45581f7919bcf61bba5c45d0adb69b722b9ff5a13727be3350cde4520d7cd37f39df45d58a29854baaa4552cd6b05ae4a1a @@ -28619,7 +28612,7 @@ __metadata: languageName: node linkType: hard -"storybook@npm:8.0.0": +"storybook@npm:^8.0.0": version: 8.0.0 resolution: "storybook@npm:8.0.0" dependencies: @@ -29243,13 +29236,6 @@ __metadata: languageName: node linkType: hard -"synchronous-promise@npm:^2.0.15": - version: 2.0.15 - resolution: "synchronous-promise@npm:2.0.15" - checksum: 10/fbd4cfe53af8ffa0d2796b5554fa8fe09c25dcef0969e878d7861a777aed4e9a7925bb205ce6751911a850c93ce1247e21345d512665758a2fb20c3814f96e8a - languageName: node - linkType: hard - "synckit@npm:^0.8.4": version: 0.8.5 resolution: "synckit@npm:0.8.5"