From fea16ba3e943505b25fd34d02cb614efa271e4f1 Mon Sep 17 00:00:00 2001 From: Riccardo Perra Date: Sun, 26 Nov 2023 21:33:22 +0100 Subject: [PATCH] Add Listbox and ListboxItem components (#53) * Add Listbox and ListboxItem components Implemented Listbox and ListboxItem components, along with their styling. These components provide interactive lists for user selection. Also added corresponding storybook stories and tests. Dependency packages for solid-virtual were installed to support virtualization within the listbox. * Add new features to Listbox component This commit introduces new functionalities to the Listbox component. Properties like 'size', 'theme', and 'bordered' have been added providing more customization options. Additionally, a 'toPx' function has been implemented to simplify CSS value conversions. This function is used for more precise size values for the Listbox items. Storybook stories have also been updated to accommodate these changes. * Improve and extend Listbox components This commit brings enhancements to the Listbox component by introducing the 'shouldFocusOnHover' prop and refining the typing of VirtualizedListboxProps. The modifications promote better customization of the list boxes and lay groundwork for more sophisticated property handling mechanisms. Furthermore, the diffs include the addition of the 'splitProps' function to separate 'options' and 'itemLabel', thereby refining local component settings. * Remove ts-expect-error comments from Storybook stories This commit removes ts-expect-error comments in multiple Storybook stories, including TextArea, TextField, Select, and Listbox. The removal suggests that previously existing typescript errors have been resolved. Also, it includes type correction in Listbox story where options are casted to string array. * Update Storybook scripts and resolve TypeScript errors This commit updates the scripts in the Storybook package.json to use simpler calls and removes ts-expect-error comments in multiple Storybook stories, thereby acknowledging the resolution of TypeScript errors. The build command in Netlify is also adjusted. Further, it includes dependency library updates in the lock file. * Downgrade TypeScript version in Storybook package This commit downgrades the TypeScript version in the Storybook package from ^5.0.2 to ^4.9.5. The change also updates the TypeScript * Revert to previous package versions in pnpm-lock.yaml This commit downgrades several packages within the pnpm-lock.yaml file to their preceding versions. This was necessary to resolve * Enhanced package dependencies and adjusted TypeScript version Applied a patch to the @storybook/manager-api package for issue resolution, and upgraded TypeScript from 4.9.5 to 5.0.4 across various sections of the code. This update ensures compatibility and leverages the latest TypeScript enhancements. * Adjust Listbox stories * Adjust Listbox stories * Create metal-doors-mate.md --- .changeset/metal-doors-mate.md | 6 + netlify.toml | 2 +- package.json | 5 + packages/kit/package.json | 2 + .../kit/src/components/Listbox/Listbox.css.ts | 162 +++++++++++++++++ .../kit/src/components/Listbox/Listbox.tsx | 57 ++++++ .../components/Listbox/VirtualizedListbox.tsx | 111 ++++++++++++ packages/kit/src/components/Listbox/sizes.ts | 7 + packages/kit/src/components/Tabs/Tabs.tsx | 1 - packages/kit/src/icons/CheckIcon.tsx | 21 ++- packages/kit/src/index.tsx | 3 + packages/kit/src/utils/css.ts | 4 + packages/storybook/.storybook/main.ts | 1 + packages/storybook/.storybook/preview.tsx | 6 +- packages/storybook/package.json | 12 +- .../storybook/src/stories/Listbox.stories.tsx | 144 +++++++++++++++ .../storybook/src/stories/Select.stories.tsx | 1 - .../src/stories/TextArea.stories.tsx | 2 +- .../src/stories/TextField.stories.tsx | 1 - packages/storybook/tsconfig.json | 2 +- packages/storybook/vite.config.ts | 8 + patches/@storybook__manager-api@7.5.3.patch | 28 +++ pnpm-lock.yaml | 166 +++++++++++------- 23 files changed, 666 insertions(+), 86 deletions(-) create mode 100644 .changeset/metal-doors-mate.md create mode 100644 packages/kit/src/components/Listbox/Listbox.css.ts create mode 100644 packages/kit/src/components/Listbox/Listbox.tsx create mode 100644 packages/kit/src/components/Listbox/VirtualizedListbox.tsx create mode 100644 packages/kit/src/components/Listbox/sizes.ts create mode 100644 packages/storybook/src/stories/Listbox.stories.tsx create mode 100644 patches/@storybook__manager-api@7.5.3.patch diff --git a/.changeset/metal-doors-mate.md b/.changeset/metal-doors-mate.md new file mode 100644 index 0000000..ddf45bb --- /dev/null +++ b/.changeset/metal-doors-mate.md @@ -0,0 +1,6 @@ +--- +"@codeui/kit": patch +"@codeui/storybook-playground": patch +--- + +Add Listbox and ListboxItem components diff --git a/netlify.toml b/netlify.toml index fa4f2bc..219a29f 100644 --- a/netlify.toml +++ b/netlify.toml @@ -2,4 +2,4 @@ [build] base = "/" publish = "packages/storybook/storybook-static" -command = "pnpm --filter=@codeui/storybook-playground build-storybook" +command = "pnpm --filter=@codeui/storybook-playground build" diff --git a/package.json b/package.json index e4ade4f..e48236f 100644 --- a/package.json +++ b/package.json @@ -44,5 +44,10 @@ "packageManager": "pnpm@8.2.0", "dependencies": { "@changesets/changelog-git": "^0.1.14" + }, + "pnpm": { + "patchedDependencies": { + "@storybook/manager-api@7.5.3": "patches/@storybook__manager-api@7.5.3.patch" + } } } diff --git a/packages/kit/package.json b/packages/kit/package.json index b5443e9..5faa469 100644 --- a/packages/kit/package.json +++ b/packages/kit/package.json @@ -78,6 +78,8 @@ "@radix-ui/colors": "^0.1.8", "@solid-primitives/pagination": "^0.2.5", "@solid-primitives/scheduled": "^1.4.1", + "@tanstack/solid-virtual": "^3.0.0-beta.6", + "@tanstack/virtual-core": "^3.0.0-alpha.1", "@vanilla-extract/css": "^1.11.0", "@vanilla-extract/dynamic": "^2.0.3", "@vanilla-extract/recipes": "^0.4.0", diff --git a/packages/kit/src/components/Listbox/Listbox.css.ts b/packages/kit/src/components/Listbox/Listbox.css.ts new file mode 100644 index 0000000..d975f97 --- /dev/null +++ b/packages/kit/src/components/Listbox/Listbox.css.ts @@ -0,0 +1,162 @@ +import { createTheme, style } from "@vanilla-extract/css"; +import { tokens } from "../../foundation/contract.css"; +import { themeTokens, themeVars } from "../../foundation"; +import { componentStateStyles } from "@kobalte/vanilla-extract"; +import { LISTBOX_ITEM_SIZE } from "./sizes"; +import { toPx } from "../../utils/css"; + +export const [listTheme, listThemeVars] = createTheme({ + contentBackground: tokens.dropdownBackground, + contentRadius: themeTokens.radii.lg, + contentBoxShadow: tokens.dropdownBoxShadow, + contentPadding: themeTokens.spacing["2"], + contentBorderColor: tokens.dropdownBorder, + contentMaxHeight: "400px", + contentMaxHeightXs: "270px", + separator: tokens.dropdownBorder, + itemMinHeight: "2.60rem", + itemTextColor: tokens.dropdownItemTextColor, + itemHoverBackground: tokens.dropdownItemHoverBackground, + itemHoverTextColor: tokens.dropdownItemHoverTextColor, + itemDisabledOpacity: ".4", + indicatorSize: "20px", +}); + +const ButtonSizes = { + xs: "xs", + sm: "sm", + md: "md", + lg: "lg", + xl: "xl", +} as const; + +export const list = style([ + listTheme, + { + borderRadius: themeTokens.radii.sm, + selectors: { + "&[data-bordered]": { + padding: themeTokens.spacing["2"], + border: `1px solid ${themeVars.separator}`, + }, + "&[data-theme=primary]": { + vars: { + [listThemeVars.itemTextColor]: tokens.dropdownItemTextColor, + [listThemeVars.itemHoverBackground]: tokens.brandAccentHover, + [listThemeVars.itemHoverTextColor]: tokens.dropdownItemHoverTextColor, + }, + }, + "&[data-theme=neutral]": { + vars: { + [listThemeVars.itemTextColor]: tokens.dropdownItemTextColor, + [listThemeVars.itemHoverBackground]: tokens.dropdownItemHoverBackground, + [listThemeVars.itemHoverTextColor]: tokens.dropdownItemHoverTextColor, + }, + }, + }, + }, +]); + +/** + * TODO: same as select! + */ +export const item = style([ + { + textAlign: "left", + justifyContent: "space-between", + border: 0, + padding: `${themeTokens.spacing["2"]} ${themeTokens.spacing["3"]}`, + borderRadius: themeTokens.radii.sm, + background: "transparent", + color: listThemeVars.itemTextColor, + userSelect: "none", + display: "flex", + alignItems: "center", + outline: "none", + fontWeight: themeTokens.fontWeight.normal, + transition: "opacity .2s, background-color .2s, transform .2s", + gap: themeTokens.spacing["2"], + margin: `${themeTokens.spacing["1"]} 0`, + minHeight: listThemeVars.itemMinHeight, + selectors: { + "&:first-child,&:last-child": { + margin: 0, + }, + }, + }, + { + selectors: { + [`&[data-size=${ButtonSizes.xs}]`]: { + height: toPx(LISTBOX_ITEM_SIZE.xs), + fontSize: themeTokens.fontSize.sm, + borderRadius: themeTokens.radii.xs, + minHeight: 0, + }, + [`&[data-size=${ButtonSizes.sm}]`]: { + height: toPx(LISTBOX_ITEM_SIZE.sm), + fontSize: themeTokens.fontSize.md, + minHeight: 0, + }, + [`&[data-size=${ButtonSizes.md}]`]: { + height: toPx(LISTBOX_ITEM_SIZE.md), + fontSize: themeTokens.fontSize.md, + }, + }, + }, + { + ":disabled": { + opacity: listThemeVars.itemDisabledOpacity, + }, + ":focus": { + boxShadow: "none", + outline: "none", + backgroundColor: listThemeVars.itemHoverBackground, + color: listThemeVars.itemHoverTextColor, + }, + ":focus-visible": { + backgroundColor: listThemeVars.itemHoverBackground, + color: listThemeVars.itemHoverTextColor, + }, + }, + componentStateStyles({ + highlighted: { + boxShadow: "none", + outline: "none", + backgroundColor: listThemeVars.itemHoverBackground, + color: listThemeVars.itemHoverTextColor, + }, + disabled: { + opacity: listThemeVars.itemDisabledOpacity, + not: { + ":hover": {}, + }, + }, + }), +]); + +export const itemIndicator = style({ + marginLeft: "auto", + height: listThemeVars.indicatorSize, + width: listThemeVars.indicatorSize, + strokeDashoffset: 32, + selectors: { + [`${item}[data-selected] &`]: { + strokeDashoffset: 0, + }, + [`&[data-size=${ButtonSizes.xs}]`]: { + vars: { + [listThemeVars.indicatorSize]: "14px", + }, + }, + [`&[data-size=${ButtonSizes.sm}]`]: { + vars: { + [listThemeVars.indicatorSize]: "18px", + }, + }, + [`&[data-size=${ButtonSizes.md}]`]: { + vars: { + [listThemeVars.indicatorSize]: "20px", + }, + }, + }, +}); diff --git a/packages/kit/src/components/Listbox/Listbox.tsx b/packages/kit/src/components/Listbox/Listbox.tsx new file mode 100644 index 0000000..87c2ee7 --- /dev/null +++ b/packages/kit/src/components/Listbox/Listbox.tsx @@ -0,0 +1,57 @@ +import { JSXElement, splitProps } from "solid-js"; +import { Listbox as KListbox } from "@kobalte/core"; +import { CheckIcon } from "../../icons"; +import { mergeClasses } from "../../utils/css"; +import * as styles from "./Listbox.css"; + +export type ListboxProps = Omit< + KListbox.ListboxRootProps, + "renderItem" +> & { + size?: "xs" | "sm" | "md"; + theme?: "primary" | "neutral"; + itemLabel?: (item: Option) => JSXElement; + bordered?: boolean; +}; + +export function Listbox(props: ListboxProps) { + const [local, others] = splitProps(props, [ + "class", + "size", + "itemLabel", + "bordered", + "theme", + ]); + + return ( + ( + + )} + {...others} + /> + ); +} + +export function ListboxItem( + props: KListbox.ListboxItemProps & { + size?: "xs" | "sm" | "md"; + itemLabel?: (item: T) => JSXElement; + }, +) { + const [local, others] = splitProps(props, ["size", "itemLabel"]); + return ( + + + {local.itemLabel ? local.itemLabel(others.item.rawValue) : others.item.rawValue} + + + + + + ); +} diff --git a/packages/kit/src/components/Listbox/VirtualizedListbox.tsx b/packages/kit/src/components/Listbox/VirtualizedListbox.tsx new file mode 100644 index 0000000..5110787 --- /dev/null +++ b/packages/kit/src/components/Listbox/VirtualizedListbox.tsx @@ -0,0 +1,111 @@ +import { createVirtualizer } from "@tanstack/solid-virtual"; +import { Listbox, ListboxItem, ListboxProps } from "./Listbox"; +import { For, splitProps } from "solid-js"; +import { LISTBOX_ITEM_SIZE } from "./sizes"; + +type VirtualizedListboxProps = Omit< + ListboxProps, + | "virtualized" + | "children" + | "options" + | "optionValue" + | "optionDisabled" + | "optionLabel" + | "optionTextValue" + | "scrollToItem" +> & { + options: Item[]; + virtualizerOptions?: { + estimateSize?: (index: number) => number; + enableSmoothScroll?: false; + overscan?: number; + }; +}; + +interface Item { + value: string; + label: string; + disabled?: boolean; +} + +export function VirtualizedListbox( + props: VirtualizedListboxProps, +) { + let listboxRef: HTMLUListElement | undefined; + + const virtualizer = createVirtualizer({ + get count() { + return props.options.length; + }, + get enableSmoothScroll() { + return props.virtualizerOptions?.enableSmoothScroll ?? false; + }, + get overscan() { + return props.virtualizerOptions?.overscan ?? 5; + }, + getScrollElement: () => listboxRef, + estimateSize: (index: number) => + // TODO: fix that size + props.virtualizerOptions?.estimateSize?.(index) ?? + LISTBOX_ITEM_SIZE[props.size ?? "md"], + // TODO: why error? + // @ts-ignore + getItemKey: (index: number) => { + return props.options[index].value; + }, + }); + + const [local, others] = splitProps(props, ["options", "itemLabel"]); + + return ( + // TODO fix type + + options={local.options} + optionValue="value" + optionTextValue="label" + optionDisabled="disabled" + ref={listboxRef} + scrollToItem={key => + virtualizer.scrollToIndex(props.options.findIndex(option => option.value === key)) + } + virtualized + {...others} + > + {items => ( +
+ + {virtualRow => { + // TODO what if key is not string? + const item = items().getItem(virtualRow.key as string); + if (item) { + return ( + + size={props.size} + item={item} + itemLabel={item => { + return local.itemLabel ? local.itemLabel(item) : item.label; + }} + style={{ + position: "absolute", + top: 0, + left: 0, + width: "100%", + height: `${virtualRow.size}px`, + transform: `translateY(${virtualRow.start}px)`, + }} + /> + ); + } + }} + +
+ )} + + ); +} diff --git a/packages/kit/src/components/Listbox/sizes.ts b/packages/kit/src/components/Listbox/sizes.ts new file mode 100644 index 0000000..eddae4b --- /dev/null +++ b/packages/kit/src/components/Listbox/sizes.ts @@ -0,0 +1,7 @@ +export const LISTBOX_ITEM_SIZE: Record = { + xs: 30, + sm: 36, + md: 40, +}; + +export type ListboxItemSizeKey = "xs" | "sm" | "md"; diff --git a/packages/kit/src/components/Tabs/Tabs.tsx b/packages/kit/src/components/Tabs/Tabs.tsx index abeeef7..84f13cb 100644 --- a/packages/kit/src/components/Tabs/Tabs.tsx +++ b/packages/kit/src/components/Tabs/Tabs.tsx @@ -2,7 +2,6 @@ import { Tabs as KTabs } from "@kobalte/core"; import { mergeClasses } from "../../utils/css"; import * as styles from "./Tabs.css"; import { createContext, Show, splitProps, useContext } from "solid-js"; -import { tabsRoot } from "./Tabs.css"; type TabsProps = KTabs.TabsRootProps & { theme?: "inline" | "default"; diff --git a/packages/kit/src/icons/CheckIcon.tsx b/packages/kit/src/icons/CheckIcon.tsx index a0895de..d49c8d1 100644 --- a/packages/kit/src/icons/CheckIcon.tsx +++ b/packages/kit/src/icons/CheckIcon.tsx @@ -2,12 +2,21 @@ import { SvgIcon, SvgIconProps } from "./SvgIcon"; export function CheckIcon(props: SvgIconProps) { return ( - - + + ); } diff --git a/packages/kit/src/index.tsx b/packages/kit/src/index.tsx index f410c81..6a7fa64 100644 --- a/packages/kit/src/index.tsx +++ b/packages/kit/src/index.tsx @@ -52,6 +52,9 @@ export type { SegmentedControlProps } from "./components/SegmentedControl/Segmen export { SegmentedControlItem } from "./components/SegmentedControl/SegmentedControlItem"; export type { SegmentedControlItemProps } from "./components/SegmentedControl/SegmentedControlItem"; +export { Listbox, ListboxItem } from "./components/Listbox/Listbox"; +export { VirtualizedListbox } from "./components/Listbox/VirtualizedListbox"; + export { SvgIcon } from "./icons/SvgIcon"; export * as icons from "./icons"; diff --git a/packages/kit/src/utils/css.ts b/packages/kit/src/utils/css.ts index 57a95c7..9c36f59 100644 --- a/packages/kit/src/utils/css.ts +++ b/packages/kit/src/utils/css.ts @@ -1,3 +1,7 @@ export function mergeClasses(...classNames: Array) { return classNames.filter(Boolean).join(" "); } + +export function toPx(value: number) { + return `${value}px`; +} diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts index db50814..9686aa0 100644 --- a/packages/storybook/.storybook/main.ts +++ b/packages/storybook/.storybook/main.ts @@ -37,6 +37,7 @@ const config: StorybookConfig = { "@codeui/kit", "@kobalte/core", "@kobalte/utils", + "@tanstack/solid-virtual", ], }, }); diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx index b0e7c7d..55a39b7 100644 --- a/packages/storybook/.storybook/preview.tsx +++ b/packages/storybook/.storybook/preview.tsx @@ -2,7 +2,7 @@ import { Preview } from "storybook-solidjs"; import { themes, ThemeVars } from "@storybook/theming"; import { DARK_MODE_EVENT_NAME, useDarkMode } from "storybook-dark-mode"; import { addons } from "@storybook/addons"; -import { createEffect, createSignal, FlowProps } from "solid-js"; +import { createEffect, createRoot, createSignal, FlowProps } from "solid-js"; import "./reset.css"; import "./global.css"; import "./global-ve.css"; @@ -61,7 +61,9 @@ const preview: Preview = { docs: { container: (props: DocsContainerProps) => { const dark = useDarkMode(); - return ; + return createRoot(() => { + return ; + }); }, }, }, diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 0610800..52acbae 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -4,12 +4,10 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", - "build": "tsc && vite build", + "dev": "storybook dev -p 6006", + "build": "storybook build", "preview": "vite preview", - "storybook:run": "storybook", - "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" + "storybook:run": "storybook" }, "devDependencies": { "@storybook/addon-a11y": "^7.5.3", @@ -22,9 +20,9 @@ "@storybook/api": "^7.5.3", "@storybook/blocks": "^7.5.3", "@storybook/components": "^7.5.3", - "@storybook/manager-api": "^7.5.3", "@storybook/testing-library": "^0.2.2", "@storybook/theming": "^7.5.3", + "@storybook/types": "^7.5.3", "@vanilla-extract/vite-plugin": "^3.9.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -32,7 +30,7 @@ "storybook-dark-mode": "^3.0.1", "storybook-solidjs": "^1.0.0-beta.2", "storybook-solidjs-vite": "^1.0.0-beta.2", - "typescript": "^5.0.2", + "typescript": "5.0.4", "vite": "^4.4.5", "vite-plugin-solid": "^2.7.2", "vite-tsconfig-paths": "^4.2.1" diff --git a/packages/storybook/src/stories/Listbox.stories.tsx b/packages/storybook/src/stories/Listbox.stories.tsx new file mode 100644 index 0000000..b9678e7 --- /dev/null +++ b/packages/storybook/src/stories/Listbox.stories.tsx @@ -0,0 +1,144 @@ +import { Listbox, VirtualizedListbox } from "@codeui/kit"; +import type { Meta, StoryObj } from "storybook-solidjs"; + +type Story = StoryObj; + +const meta = { + title: "DesignSystem/Listbox", + component: Listbox, + argTypes: { + shouldSelectOnPressUp: { + type: "boolean", + }, + shouldFocusOnHover: { + type: "boolean", + }, + disallowEmptySelection: { + type: "boolean", + }, + allowsTabNavigation: { + type: "boolean", + }, + selectionMode: { + control: { type: "radio" }, + options: ["multiple", "none", "single"], + }, + size: { + control: { type: "radio" }, + options: ["xs", "sm", "md"], + }, + bordered: { + type: "boolean", + }, + theme: { + control: { type: "radio" }, + options: ["primary", "neutral"], + }, + }, + + tags: ["autodocs"], + // argTypes: { + // backgroundColor: { control: "color" }, + // }, +} satisfies Meta; + +export default meta; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args +export const ListboxStory: Story = { + name: "Listbox", + args: { + theme: "neutral", + size: "md", + bordered: false, + options: ["Item1", "Item2", "Item3"], + selectionMode: "single", + shouldFocusOnHover: true, + shouldSelectOnPressUp: false, + disallowEmptySelection: false, + allowsTabNavigation: false, + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args +export const ListboxMultiple: Story = { + name: "Listbox (Multiple)", + args: { + options: ["Item1", "Item2", "Item3"], + selectionMode: "multiple", + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args +export const ListboxXs: Story = { + name: "Listbox - Extra Small Size", + args: { + defaultValue: ["Item1"], + size: "xs", + options: ["Item1", "Item2", "Item3"], + selectionMode: "multiple", + }, +}; + +export const ListboxSm: Story = { + name: "Listbox - Small Size", + args: { + size: "sm", + defaultValue: ["Item1"], + options: ["Item1", "Item2", "Item3"], + selectionMode: "multiple", + }, +}; + +export const ListboxMedium: Story = { + name: "Listbox - Medium Size", + args: { + size: "md", + defaultValue: ["Item1"], + options: ["Item1", "Item2", "Item3"], + selectionMode: "multiple", + }, +}; + +export const ListboxBordered: Story = { + name: "Listbox - Bordered", + args: { + size: "md", + bordered: true, + defaultValue: ["Item1"], + options: ["Item1", "Item2", "Item3"], + selectionMode: "multiple", + }, +}; + +export const ListboxOptionWithCustomItemLabel: Story = { + name: "Listbox - Custom Item Label", + args: { + size: "md", + defaultValue: ["Item1"], + options: ["Item1", "Item2", "Item3"], + selectionMode: "multiple", + // @ts-ignore + itemLabel: (item: string) => Custom {item}, + }, +}; + +export const ListboxVirtualized: Story = { + name: "Listbox Virtualized", + render: args => { + const options = (args.options! as string[]).map((option, index) => ({ + label: option as string, + value: String(index), + disabled: false, + })); + + return ; + }, + args: { + options: new Array(100_000).fill(null).map((_, index) => `Item ${index + 1}`), + style: { + height: "400px", + overflow: "auto", + }, + }, +}; diff --git a/packages/storybook/src/stories/Select.stories.tsx b/packages/storybook/src/stories/Select.stories.tsx index 90629d1..498a5c1 100644 --- a/packages/storybook/src/stories/Select.stories.tsx +++ b/packages/storybook/src/stories/Select.stories.tsx @@ -86,7 +86,6 @@ export const SelectOutlineVariant: Story = { name: "Outline variant", args: { ...SelectStory.args, - // @ts-expect-error fix type theme: "outline", }, }; diff --git a/packages/storybook/src/stories/TextArea.stories.tsx b/packages/storybook/src/stories/TextArea.stories.tsx index 3ab46a0..7a0aa7d 100644 --- a/packages/storybook/src/stories/TextArea.stories.tsx +++ b/packages/storybook/src/stories/TextArea.stories.tsx @@ -84,7 +84,7 @@ export const TextAreaOutlineVariant: Story = { options: { autoResize: true }, placeholder: "Insert a value", label: "Textarea label", - // @ts-expect-error TODO: fix type + // @ts-expect-error Fix theme: "outline", description: "Lorem ipsum dolor sit amet", }, diff --git a/packages/storybook/src/stories/TextField.stories.tsx b/packages/storybook/src/stories/TextField.stories.tsx index 21ff8c8..80e488b 100644 --- a/packages/storybook/src/stories/TextField.stories.tsx +++ b/packages/storybook/src/stories/TextField.stories.tsx @@ -77,7 +77,6 @@ export const TextFieldOutlineVariant: Story = { args: { placeholder: "Insert a value", label: "Input label", - // @ts-expect-error TODO: fix type theme: "outline", description: "Lorem ipsum dolor sit amet", }, diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json index da9f200..b98cdb9 100644 --- a/packages/storybook/tsconfig.json +++ b/packages/storybook/tsconfig.json @@ -10,7 +10,7 @@ ], "skipLibCheck": true, /* Bundler mode */ - "moduleResolution": "Node", + "moduleResolution": "NodeNext", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, diff --git a/packages/storybook/vite.config.ts b/packages/storybook/vite.config.ts index 3fc3879..dcf2f5a 100644 --- a/packages/storybook/vite.config.ts +++ b/packages/storybook/vite.config.ts @@ -13,4 +13,12 @@ export default defineConfig({ }, }), ], + ssr: { + noExternal: [ + "@kobalte/core", + "@internationalized/message", + "@formatjs/**", + "@tanstack/solid-virtual", + ], + }, }); diff --git a/patches/@storybook__manager-api@7.5.3.patch b/patches/@storybook__manager-api@7.5.3.patch new file mode 100644 index 0000000..b6eabf1 --- /dev/null +++ b/patches/@storybook__manager-api@7.5.3.patch @@ -0,0 +1,28 @@ +diff --git a/dist/index.mjs b/dist/index.mjs +index 27e13b13cd76ea3cbd4bcee15aaeb1e3a36590ed..72eecca9e2fb470f7009bac8f69facde1c314ea9 100644 +--- a/dist/index.mjs ++++ b/dist/index.mjs +@@ -6,7 +6,6 @@ import store from 'store2'; + import { stringify, parse } from 'telejson'; + import isEqual from 'lodash/isEqual.js'; + import { Addon_TypesEnum } from '@storybook/types'; +-export { Addon_TypesEnum as types } from '@storybook/types'; + import { global } from '@storybook/global'; + import { toId, sanitize } from '@storybook/csf'; + import { dedent } from 'ts-dedent'; +diff --git a/package.json b/package.json +index 4ac7876a4d40884cd18682d55cb223d77b22a586..15f81469815ce6cbeb983b201d275415af08341b 100644 +--- a/package.json ++++ b/package.json +@@ -79,5 +79,10 @@ + "./src/index.tsx" + ] + }, +- "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" ++ "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", ++ "pnpm": { ++ "patchedDependencies": { ++ "@storybook/manager-api@7.5.3": "patches/@storybook__manager-api@7.5.3.patch" ++ } ++ } + } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6ba708f..6cd67e0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,11 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +patchedDependencies: + '@storybook/manager-api@7.5.3': + hash: twatmsb4rqm67drtouofs7dney + path: patches/@storybook__manager-api@7.5.3.patch + importers: .: @@ -87,6 +92,12 @@ importers: '@solid-primitives/scheduled': specifier: ^1.4.1 version: 1.4.1(solid-js@1.8.5) + '@tanstack/solid-virtual': + specifier: ^3.0.0-beta.6 + version: 3.0.0-beta.6 + '@tanstack/virtual-core': + specifier: ^3.0.0-alpha.1 + version: 3.0.0-alpha.1 '@vanilla-extract/css': specifier: ^1.11.0 version: 1.14.0 @@ -249,15 +260,15 @@ importers: '@storybook/components': specifier: ^7.5.3 version: 7.5.3(react-dom@18.2.0)(react@18.2.0) - '@storybook/manager-api': - specifier: ^7.5.3 - version: 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/testing-library': specifier: ^0.2.2 version: 0.2.2 '@storybook/theming': specifier: ^7.5.3 version: 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/types': + specifier: ^7.5.3 + version: 7.5.3 '@vanilla-extract/vite-plugin': specifier: ^3.9.1 version: 3.9.1(@types/node@18.16.3)(less@4.2.0)(vite@4.5.0) @@ -280,7 +291,7 @@ importers: specifier: ^1.0.0-beta.2 version: 1.0.0-beta.2(typescript@5.0.4)(vite@4.5.0) typescript: - specifier: ^5.0.2 + specifier: 5.0.4 version: 5.0.4 vite: specifier: ^4.4.5 @@ -3758,6 +3769,10 @@ packages: '@babel/runtime': 7.21.0 dev: true + /@reach/observe-rect@1.2.0: + resolution: {integrity: sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==} + dev: false + /@rollup/plugin-babel@6.0.3(@babel/core@7.23.3)(rollup@3.29.4): resolution: {integrity: sha512-fKImZKppa1A/gX73eg4JGo+8kQr/q1HBQaCGKECZ0v4YBBv3lFqi14+7xyApECzvkLTHCifx+7ntcrvtBIRcpg==} engines: {node: '>=14.0.0'} @@ -4074,7 +4089,7 @@ packages: '@storybook/components': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/core-events': 7.5.3 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/theming': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/types': 7.5.3 @@ -4103,7 +4118,7 @@ packages: '@storybook/components': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/core-events': 7.5.3 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/theming': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/types': 7.5.3 @@ -4137,7 +4152,7 @@ packages: '@storybook/components': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/core-events': 7.5.3 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/theming': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/types': 7.5.3 @@ -4166,7 +4181,7 @@ packages: '@storybook/components': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/core-common': 7.5.3 '@storybook/core-events': 7.5.3 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/node-logger': 7.5.3 '@storybook/preview-api': 7.5.3 '@storybook/theming': 7.5.3(react-dom@18.2.0)(react@18.2.0) @@ -4232,7 +4247,7 @@ packages: '@storybook/addon-toolbars': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-viewport': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/core-common': 7.5.3 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/node-logger': 7.5.3 '@storybook/preview-api': 7.5.3 react: 18.2.0 @@ -4270,7 +4285,7 @@ packages: '@storybook/core-events': 7.5.3 '@storybook/global': 5.0.0 '@storybook/instrumenter': 7.5.3 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/theming': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/types': 7.5.3 @@ -4301,7 +4316,7 @@ packages: '@storybook/core-events': 7.5.3 '@storybook/csf': 0.1.1 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/router': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/types': 7.5.3 @@ -4326,7 +4341,7 @@ packages: '@storybook/components': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/core-events': 7.5.3 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/types': 7.5.3 react: 18.2.0 @@ -4352,7 +4367,7 @@ packages: '@storybook/components': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/core-events': 7.5.3 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/types': 7.5.3 react: 18.2.0 @@ -4390,7 +4405,7 @@ packages: '@storybook/components': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/core-common': 7.5.3 '@storybook/core-events': 7.5.3 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/node-logger': 7.5.3 '@storybook/preview-api': 7.5.3 '@storybook/theming': 7.5.3(react-dom@18.2.0)(react@18.2.0) @@ -4432,7 +4447,7 @@ packages: dependencies: '@storybook/client-logger': 7.5.3 '@storybook/components': 7.5.3(react-dom@18.2.0)(react@18.2.0) - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/theming': 7.5.3(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 @@ -4457,7 +4472,7 @@ packages: '@storybook/components': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/core-events': 7.5.3 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/theming': 7.5.3(react-dom@18.2.0)(react@18.2.0) memoizerific: 1.11.3 @@ -4475,7 +4490,7 @@ packages: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/types': 7.5.3 react: 18.2.0 @@ -4494,7 +4509,7 @@ packages: optional: true dependencies: '@storybook/client-logger': 7.5.3 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) dev: true @@ -4512,7 +4527,7 @@ packages: '@storybook/csf': 0.1.1 '@storybook/docs-tools': 7.5.3 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.5.3(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.5.3 '@storybook/theming': 7.5.3(react-dom@18.2.0)(react@18.2.0) '@storybook/types': 7.5.3 @@ -4561,8 +4576,8 @@ packages: - supports-color dev: true - /@storybook/builder-vite@7.6.0-alpha.6(typescript@5.0.4)(vite@4.5.0): - resolution: {integrity: sha512-yOf0CHi9w/e7vZIkaQUMMAUnX4EYTnKQSyIX5nxmz+c6V2IZxR1MvzJ+FEds83rn5L6aNTEMOYq0uQPDSpiBPA==} + /@storybook/builder-vite@7.6.0-beta.2(typescript@5.0.4)(vite@4.5.0): + resolution: {integrity: sha512-vAEMBYzc/s+sSyIIMhiv1JdYm37+cEZNnpgJX2CEPN3jqn1s/35q4/SWDmUa7e+61oCZ9BZ5lIMfrqOuZNHORw==} peerDependencies: '@preact/preset-vite': '*' typescript: '>= 4.3.x' @@ -4576,14 +4591,14 @@ packages: vite-plugin-glimmerx: optional: true dependencies: - '@storybook/channels': 7.6.0-alpha.6 - '@storybook/client-logger': 7.6.0-alpha.6 - '@storybook/core-common': 7.6.0-alpha.6 - '@storybook/csf-plugin': 7.6.0-alpha.6 - '@storybook/node-logger': 7.6.0-alpha.6 - '@storybook/preview': 7.6.0-alpha.6 - '@storybook/preview-api': 7.6.0-alpha.6 - '@storybook/types': 7.6.0-alpha.6 + '@storybook/channels': 7.6.0-beta.2 + '@storybook/client-logger': 7.6.0-beta.2 + '@storybook/core-common': 7.6.0-beta.2 + '@storybook/csf-plugin': 7.6.0-beta.2 + '@storybook/node-logger': 7.6.0-beta.2 + '@storybook/preview': 7.6.0-beta.2 + '@storybook/preview-api': 7.6.0-beta.2 + '@storybook/types': 7.6.0-beta.2 '@types/find-cache-dir': 3.2.1 browser-assert: 1.2.1 es-module-lexer: 0.9.3 @@ -4610,11 +4625,11 @@ packages: tiny-invariant: 1.3.1 dev: true - /@storybook/channels@7.6.0-alpha.6: - resolution: {integrity: sha512-QoLtN3mPqgSvWTO59XM//1T3ttDyUtWI2Q5qeQMvOq8H4i4rSGpCkywN6OPVivAgCiHSKSCC9C3yE/xISzjf1g==} + /@storybook/channels@7.6.0-beta.2: + resolution: {integrity: sha512-jNQU2TfmSjUFERmfYnQwB/5097Y4dlw931ViYCkrBN4DM6cGxLTLOjd/Y8nAgB7PRkHAysmuQqRa7vmYf8dINw==} dependencies: - '@storybook/client-logger': 7.6.0-alpha.6 - '@storybook/core-events': 7.6.0-alpha.6 + '@storybook/client-logger': 7.6.0-beta.2 + '@storybook/core-events': 7.6.0-beta.2 '@storybook/global': 5.0.0 qs: 6.11.2 telejson: 7.2.0 @@ -4679,8 +4694,8 @@ packages: '@storybook/global': 5.0.0 dev: true - /@storybook/client-logger@7.6.0-alpha.6: - resolution: {integrity: sha512-ptcacMUCbcQecAkh2LsPFvvEpgsPLOVeMLjrSBahqQhaJGb9YL7N9jZ+UTcq0iK9vjf7B7KFvBcWrazHRROeTg==} + /@storybook/client-logger@7.6.0-beta.2: + resolution: {integrity: sha512-NK3nz1t36JUVwn/1sem3t0fYI3C/IcKKcq8Qpgcy1DGqm/3EJEyWGf8Mv3/FEmtmixPWuwzY52x4R/+K6aFwag==} dependencies: '@storybook/global': 5.0.0 dev: true @@ -4760,12 +4775,12 @@ packages: - supports-color dev: true - /@storybook/core-common@7.6.0-alpha.6: - resolution: {integrity: sha512-HCq1ONotCK2yLC9XF/o4mXblZ07S1GKifj2bupavln1iQacgIRYY8/Lq7AWsBJMgmOYTl+Mx0CeLVjtEXij8uw==} + /@storybook/core-common@7.6.0-beta.2: + resolution: {integrity: sha512-ndl3o+TqFUBjCpP/07gCXoUYlNN6b5VymvibW+A+UVa3/GVTrwAtdgV89TRV73Z7F+9p6ha4KW4i+jmxKhzw8w==} dependencies: - '@storybook/core-events': 7.6.0-alpha.6 - '@storybook/node-logger': 7.6.0-alpha.6 - '@storybook/types': 7.6.0-alpha.6 + '@storybook/core-events': 7.6.0-beta.2 + '@storybook/node-logger': 7.6.0-beta.2 + '@storybook/types': 7.6.0-beta.2 '@types/find-cache-dir': 3.2.1 '@types/node': 18.16.3 '@types/node-fetch': 2.6.9 @@ -4797,8 +4812,8 @@ packages: ts-dedent: 2.2.0 dev: true - /@storybook/core-events@7.6.0-alpha.6: - resolution: {integrity: sha512-MOWI+AD4F4/bvwjVZtPX9lNLMJEiBhPn/lzS50OY4CQmARsp4Obnr/sH6VnoLLAou655OWGQYvnOjritwved+A==} + /@storybook/core-events@7.6.0-beta.2: + resolution: {integrity: sha512-5U8Ar4etAruQ6cQ99Eo/D/mBDye4hC3hUTHECdL9dsPyEIGab4B7wtMXhkQ4artbIKFm4f7JiI618Xv5e/Jwfw==} dependencies: ts-dedent: 2.2.0 dev: true @@ -4863,10 +4878,10 @@ packages: - supports-color dev: true - /@storybook/csf-plugin@7.6.0-alpha.6: - resolution: {integrity: sha512-b86z3sv8lkEVrg3YYYfgrWc4tTvNnxFMDv3bHkP2FkuzkPKUs3EAM7yXHrr+sZ/0ThDXitLfrIBnAD3YIHCGlg==} + /@storybook/csf-plugin@7.6.0-beta.2: + resolution: {integrity: sha512-lFsLlcvb0zSBqs8Wmd9FWTNGgrI3z03OQ8BMUV2bxR2aue6hpMbFlIORffUgdEDxjV2/k/14gBwt4z9kGJYu8w==} dependencies: - '@storybook/csf-tools': 7.6.0-alpha.6 + '@storybook/csf-tools': 7.6.0-beta.2 unplugin: 1.5.0 transitivePeerDependencies: - supports-color @@ -4888,15 +4903,15 @@ packages: - supports-color dev: true - /@storybook/csf-tools@7.6.0-alpha.6: - resolution: {integrity: sha512-qHkwe5vNB9kmqN9zux7d3brtLAJugEa2JDBVbTQS3fVbUYRjL5WnTYOfuPzxEyYtaUTpVJMZjs2rgRAixN3yzQ==} + /@storybook/csf-tools@7.6.0-beta.2: + resolution: {integrity: sha512-u/gcBaTKiUqZyHdFUe7/UXOFc7yyan5C+umKC+F6/jnqtRjiE/wUoa0qidVHgI6ZfTH7Z/1EeVCzspEdPIjbyA==} dependencies: '@babel/generator': 7.23.3 '@babel/parser': 7.23.3 '@babel/traverse': 7.23.3 '@babel/types': 7.23.3 - '@storybook/csf': 0.1.1 - '@storybook/types': 7.6.0-alpha.6 + '@storybook/csf': 0.1.2 + '@storybook/types': 7.6.0-beta.2 fs-extra: 11.1.1 recast: 0.23.4 ts-dedent: 2.2.0 @@ -4910,6 +4925,12 @@ packages: type-fest: 2.19.0 dev: true + /@storybook/csf@0.1.2: + resolution: {integrity: sha512-ePrvE/pS1vsKR9Xr+o+YwdqNgHUyXvg+1Xjx0h9LrVx7Zq4zNe06pd63F5EvzTbCbJsHj7GHr9tkiaqm7U8WRA==} + dependencies: + type-fest: 2.19.0 + dev: true + /@storybook/docs-mdx@0.1.0: resolution: {integrity: sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==} dev: true @@ -4942,7 +4963,7 @@ packages: '@storybook/preview-api': 7.5.3 dev: true - /@storybook/manager-api@7.5.3(react-dom@18.2.0)(react@18.2.0): + /@storybook/manager-api@7.5.3(patch_hash=twatmsb4rqm67drtouofs7dney)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-d8mVLr/5BEG4bAS2ZeqYTy/aX4jPEpZHdcLaWoB4mAM+PAL9wcWsirUyApKtDVYLITJf/hd8bb2Dm2ok6E45gA==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -4966,6 +4987,7 @@ packages: telejson: 7.2.0 ts-dedent: 2.2.0 dev: true + patched: true /@storybook/manager@7.5.3: resolution: {integrity: sha512-3ZZrHYcXWAQXpDQZBvKyScGgQaAaBc63i+KC2mXqzTdXuJhVDUiylvqLRprBnrEprgePQLFrxGC2JSHUwH7dqg==} @@ -4979,8 +5001,8 @@ packages: resolution: {integrity: sha512-7ZZDw/q3hakBj1FngsBjaHNIBguYAWojp7R1fFTvwkeunCi21EUzZjRBcqp10kB6BP3/NLX32bIQknsCWD76rQ==} dev: true - /@storybook/node-logger@7.6.0-alpha.6: - resolution: {integrity: sha512-SiBVkOLQa/mxffveHKwipEaA5en4QPQ8C3yk5Rbx/caU+RzLFFh0ctfGcxoP6Jcto5WE0Clkzs+9+hHxIDJRcA==} + /@storybook/node-logger@7.6.0-beta.2: + resolution: {integrity: sha512-MwIBjG4ICVKT2DjB6kZWohogBIiN70FmMNZOaKPKJtzgJ+cyn6xjBTDH2JPBTfsUZovN/vQj+0OVFts6x2v99Q==} dev: true /@storybook/postinstall@7.5.3: @@ -5006,15 +5028,15 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/preview-api@7.6.0-alpha.6: - resolution: {integrity: sha512-cNa+ECEUmElyGXn17cgn89JWA0flYuLvAfhnDIuGPsHZkNe2DkT7ci3cc8SXYpTn0+NS6G+tdhkgA+EuWAjaaw==} + /@storybook/preview-api@7.6.0-beta.2: + resolution: {integrity: sha512-7T1qdcjAVOO8TGZMlrO9Nx+8ih4suG53YPGFyCn6drd3TJ4w8IefxLtp3zrYdrvCXiW26G8aKRmgvdQmzg70XQ==} dependencies: - '@storybook/channels': 7.6.0-alpha.6 - '@storybook/client-logger': 7.6.0-alpha.6 - '@storybook/core-events': 7.6.0-alpha.6 - '@storybook/csf': 0.1.1 + '@storybook/channels': 7.6.0-beta.2 + '@storybook/client-logger': 7.6.0-beta.2 + '@storybook/core-events': 7.6.0-beta.2 + '@storybook/csf': 0.1.2 '@storybook/global': 5.0.0 - '@storybook/types': 7.6.0-alpha.6 + '@storybook/types': 7.6.0-beta.2 '@types/qs': 6.9.10 dequal: 2.0.3 lodash: 4.17.21 @@ -5025,8 +5047,8 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/preview@7.6.0-alpha.6: - resolution: {integrity: sha512-LwwSPrxE6787uCA7EyWT1eesPY9rd2FmZoC+o8y9xubItZAHaO2RSLaMtYdaTXoDZQIySWP6LLAjU44ZcrjVeA==} + /@storybook/preview@7.6.0-beta.2: + resolution: {integrity: sha512-2cqOH9eUac1d515rZ+YPQ3RBajI36IVnt8j8LPHSBSfAA68WrxqAirQoa6RwZX1zmIn/5k82B/QHJ7ibtJk51A==} dev: true /@storybook/react-dom-shim@7.5.3(react-dom@18.2.0)(react@18.2.0): @@ -5099,10 +5121,10 @@ packages: file-system-cache: 2.3.0 dev: true - /@storybook/types@7.6.0-alpha.6: - resolution: {integrity: sha512-tnIcX4fWrsON6NatmpMys/8wbnVojERygqLuY9UzdBw9eG/gMq4jlEj2CaRDSZw4TS5/RhTBM6jdsfc5tgU7eg==} + /@storybook/types@7.6.0-beta.2: + resolution: {integrity: sha512-UJRRGxeqiD42leHMpLdd4XQ9IgMVgggozrFHhhg5sj1msPmwNz+tHv87TSMkcpqkNOgjIIBK2Z9iP670mbPHVQ==} dependencies: - '@storybook/channels': 7.6.0-alpha.6 + '@storybook/channels': 7.6.0-beta.2 '@types/babel__core': 7.20.4 '@types/express': 4.17.21 file-system-cache: 2.3.0 @@ -5114,6 +5136,20 @@ packages: tslib: 2.5.0 dev: false + /@tanstack/solid-virtual@3.0.0-beta.6: + resolution: {integrity: sha512-/HjeHZb4UZxxFSAkICUEWOozGwHQpKlvtnUoS5uSMSuLOz0XM5vFq6zR6ENwAczKWDtkh8ntddk+zXAhyXOlEw==} + engines: {node: '>=12'} + dependencies: + '@reach/observe-rect': 1.2.0 + dev: false + + /@tanstack/virtual-core@3.0.0-alpha.1: + resolution: {integrity: sha512-Fa82aHSjxMVpqIg+yuxEj+mlSVadOjcqaMeD7uJ39JE8FHpGoO+53kyedIf+ypWD7zYlSWXB4ah/3W9NNHaI6g==} + engines: {node: '>=12'} + dependencies: + '@reach/observe-rect': 1.2.0 + dev: false + /@testing-library/dom@7.31.2: resolution: {integrity: sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==} engines: {node: '>=10'} @@ -12573,7 +12609,7 @@ packages: resolution: {integrity: sha512-dD+VMYC5fBBQNesVb+mjB0LOkZIf100SQFbjAt9/sDstNUvc5ce3yZwLYXzgcOc7jcSMkrBu/cZNRzEM4YIAyw==} engines: {node: ^14.18 || >=16} dependencies: - '@storybook/builder-vite': 7.6.0-alpha.6(typescript@5.0.4)(vite@4.5.0) + '@storybook/builder-vite': 7.6.0-beta.2(typescript@5.0.4)(vite@4.5.0) transitivePeerDependencies: - '@preact/preset-vite' - encoding