diff --git a/packages/kit/package.json b/packages/kit/package.json index a217a99..e34c838 100644 --- a/packages/kit/package.json +++ b/packages/kit/package.json @@ -74,8 +74,8 @@ "@kobalte/core": "^0.11.0", "@kobalte/utils": "^0.9.0", "@kobalte/vanilla-extract": "^0.4.0", - "@maskito/core": "^1.4.0", - "@maskito/kit": "^1.4.0", + "@maskito/core": "^1.9.0", + "@maskito/kit": "^1.9.0", "@motionone/solid": "^10.16.0", "@radix-ui/colors": "^0.1.8", "@solid-primitives/pagination": "^0.2.5", diff --git a/packages/kit/src/components/NumberField/NumberField.tsx b/packages/kit/src/components/NumberField/NumberField.tsx index 1effa56..a7549a1 100644 --- a/packages/kit/src/components/NumberField/NumberField.tsx +++ b/packages/kit/src/components/NumberField/NumberField.tsx @@ -1,26 +1,14 @@ import { createControllableSignal, TextField as KTextField } from "@kobalte/core"; -import { clamp, isNumber, mergeRefs } from "@kobalte/utils"; +import { clamp, mergeRefs } from "@kobalte/utils"; import { maskitoCaretGuard, maskitoNumberOptionsGenerator, maskitoParseNumber, } from "@maskito/kit"; -import { - createEffect, - JSX, - mergeProps, - on, - onMount, - Ref, - Show, - splitProps, -} from "solid-js"; -import { ChevronDownIcon } from "../../icons/ChevronDownIcon"; -import { ChevronUpIcon } from "../../icons/ChevronUpIcon"; +import { JSX, mergeProps, onMount, Ref, Show, splitProps } from "solid-js"; import { SlotProp } from "../../utils/component"; import { mergeClasses } from "../../utils/css"; import { createMaskito } from "../../utils/maskito"; -import { Button } from "../Button/Button"; import { BaseFieldProps, createBaseFieldProps } from "../Field/createBaseFieldProps"; import { createFieldErrorMessageProps, @@ -33,6 +21,7 @@ import { NumberFieldMessage } from "./NumberFieldMessage"; import type { InputNumberOptions } from "./options"; import { defaultNumberFormat, INPUT_NUMBER_OPTIONS as defaultOptions } from "./options"; import { CHAR_HYPHEN, CHAR_MINUS } from "./unicodeCharacters"; +import { NumberFieldControls } from "./NumberFieldControls"; // TODO: add to base field slot that respect the BaseFieldProps signature? type TextFieldSlot = "root" | "input" | "label" | "errorLabel"; @@ -58,7 +47,7 @@ export type NumberFieldProps = NumberFieldRootOptions & export function NumberField(props: NumberFieldProps) { const [local, options, state, others] = splitProps( - props, + mergeProps({ size: "md" }, props), [ "description", "size", @@ -73,6 +62,7 @@ export function NumberField(props: NumberFieldProps) { ["value", "onChange", "defaultValue"], ); + let unfinishedValue: string | null = null; const [value, setValue] = createControllableSignal({ value: () => state.value, defaultValue: () => state.defaultValue, @@ -150,22 +140,41 @@ export function NumberField(props: NumberFieldProps) { setValue(clamp((value() || 0) - optionsWithDefault.step, computeMin(), computeMax())); }; + const isNativeValueNotFinished = (): boolean => { + const nativeNumberValue = maskitoParseNumber( + formattedValue(), + defaultNumberFormat.decimalSeparator, + ); + return nativeNumberValue < 0 + ? nativeNumberValue > computeMax() + : nativeNumberValue < computeMin(); + }; + const onValueChange = (nativeValue: string) => { const parsedValue = maskitoParseNumber( nativeValue, defaultNumberFormat.decimalSeparator, ); + unfinishedValue = null; + if (Number.isNaN(parsedValue)) { setValue(undefined); return; } + if (isNativeValueNotFinished()) { + console.log("is unfinished"); + unfinishedValue = nativeValue; + return; + } + if (parsedValue < computeMin() || parsedValue > computeMax()) { return; } setValue(parsedValue); + // todo: fix internalRef.value = formattedValue(); }; @@ -186,8 +195,8 @@ export function NumberField(props: NumberFieldProps) { }; const onFocused = (focused: boolean) => { - const nativeNumberValue = value() - ? maskitoParseNumber(String(value() ?? ""), defaultNumberFormat.decimalSeparator) + const nativeNumberValue = unfinishedValue + ? maskitoParseNumber(unfinishedValue, defaultNumberFormat.decimalSeparator) : value(); if (Number.isNaN(nativeNumberValue)) { @@ -207,7 +216,7 @@ export function NumberField(props: NumberFieldProps) { return ( onFocused(true)} /> -
- - -
+ diff --git a/packages/kit/src/components/NumberField/NumberFieldControls.tsx b/packages/kit/src/components/NumberField/NumberFieldControls.tsx new file mode 100644 index 0000000..623f9bd --- /dev/null +++ b/packages/kit/src/components/NumberField/NumberFieldControls.tsx @@ -0,0 +1,36 @@ +import * as styles from "./NumberField.css"; +import { Button } from "../Button/Button"; +import { ChevronDownIcon, ChevronUpIcon } from "../../icons"; + +interface NumberFieldControlsProps { + increment: () => void; + decrement: () => void; + step: number; +} + +export function NumberFieldControls(props: NumberFieldControlsProps) { + return ( +
+ + +
+ ); +} diff --git a/packages/kit/src/components/NumberField/options.ts b/packages/kit/src/components/NumberField/options.ts index e95f5ac..479c08d 100644 --- a/packages/kit/src/components/NumberField/options.ts +++ b/packages/kit/src/components/NumberField/options.ts @@ -39,7 +39,7 @@ export const INPUT_NUMBER_OPTIONS: InputNumberOptions = { min: Number.MIN_SAFE_INTEGER, max: Number.MAX_SAFE_INTEGER, step: 1, - precision: 2, + precision: 0, prefix: "", postfix: "", }; diff --git a/packages/kit/src/components/NumberField/round.ts b/packages/kit/src/components/NumberField/round.ts index d09d46f..d864b9f 100644 --- a/packages/kit/src/components/NumberField/round.ts +++ b/packages/kit/src/components/NumberField/round.ts @@ -1,3 +1,17 @@ +/* + * + * Portions of this file are based on code from Taiga UI. + * Copyright 2020 Tinkoff Bank + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ const MAX_PRECISION = 292; export function tuiRound(value: number, precision: number = 0): number { diff --git a/packages/kit/src/utils/maskito.ts b/packages/kit/src/utils/maskito.ts index 62ced2e..a720bd8 100644 --- a/packages/kit/src/utils/maskito.ts +++ b/packages/kit/src/utils/maskito.ts @@ -8,27 +8,13 @@ import { } from "@maskito/core"; import { createEffect, createSignal, onCleanup, Setter } from "solid-js"; -/** - * Hook for convenient use of Maskito in React - * @description For controlled inputs use `onInput` event - * @param options options used for creating Maskito - * @param elementPredicate function that can help find nested Input or TextArea - * @returns ref callback to pass it in React Element - * @example - * // To avoid unnecessary hook runs with Maskito recreation pass named variables - * // good example ✅ - * useMaskito({ options: maskitoOptions, elementPredicate: maskitoPredicate }) - * - * // bad example ❌ - * useMaskito({ options: { mask: /^.*$/ }, elementPredicate: () => e.querySelector('input') }) - */ export const createMaskito = ({ options = MASKITO_DEFAULT_OPTIONS, elementPredicate = MASKITO_DEFAULT_ELEMENT_PREDICATE, }: { options?: MaybeAccessor; elementPredicate?: MaybeAccessor; -} = {}): Setter => { +} = {}): Setter => { const [ref, setRef] = createSignal(null); createEffect(() => { diff --git a/packages/storybook/src/stories/NumberField.stories.tsx b/packages/storybook/src/stories/NumberField.stories.tsx new file mode 100644 index 0000000..0b47575 --- /dev/null +++ b/packages/storybook/src/stories/NumberField.stories.tsx @@ -0,0 +1,274 @@ +import { Button, NumberField, TextField, TextFieldProps } from "@codeui/kit"; +import type { Meta, StoryObj } from "storybook-solidjs"; +import { DocsItemsContainer, DocsMultipleItemsContainer } from "./components/Section.jsx"; +import { For } from "solid-js"; + +// TODO: fix +const sizes = ["xs", "sm", "md", "lg", "xl"] as TextFieldProps["size"][]; + +// TODO: why outline not exist in type? +const themes = ["inline", "outline", "filled"] as TextFieldProps["theme"][]; + +type Story = StoryObj; + +const meta = { + title: "DesignSystem/NumberField", + component: NumberField, + argTypes: { + min: { + type: "number", + defaultValue: 0, + }, + max: { + type: "number", + defaultValue: 0, + }, + prefix: { + type: "string", + defaultValue: "", + }, + postfix: { + type: "string", + defaultValue: "", + }, + precision: { + type: "number", + defaultValue: 1, + }, + step: { + type: "number", + step: 1, + }, + value: { + type: "string", + control: { type: "text" }, + }, + theme: { + options: themes, + default: "filled", + control: { type: "radio" }, + }, + size: { + options: sizes, + defaultValue: "md", + control: { type: "radio" }, + }, + validationState: { + options: ["valid", "invalid"], + type: "string", + control: { type: "inline-radio" }, + }, + errorMessage: { + if: { arg: "validationState", eq: "invalid" }, + defaultValue: "Value is not valid.", + type: "string", + control: { type: "text" }, + }, + }, + + 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 TextFieldStory: Story = { + name: "NumberField", + args: { + placeholder: "Insert a value...", + label: "Input label", + theme: "filled", + }, +}; + +export const MinMax: Story = { + name: "NumberField with min/max value", + args: { + min: 5, + max: 50, + placeholder: "Insert a value...", + label: "Input label", + theme: "filled", + }, +}; + +export const Precision: Story = { + name: "NumberField with custom precision", + args: { + precision: 4, + placeholder: "Insert a value...", + label: "Input label", + theme: "filled", + }, +}; + +export const Step: Story = { + name: "NumberField with steps", + args: { + precision: 2, + step: 0.01, + placeholder: "Insert a value...", + label: "Input label", + theme: "filled", + }, +}; + +export const Prefix: Story = { + name: "NumberField with prefix", + args: { + precision: 2, + prefix: "$", + placeholder: "Insert a value...", + label: "Input label", + theme: "filled", + }, +}; + +export const Postfix: Story = { + name: "NumberField with postfix", + args: { + precision: 2, + postfix: "$", + placeholder: "Insert a value...", + label: "Input label", + theme: "filled", + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args +export const TextFieldFilledVariant: Story = { + name: "Filled variant", + args: { + placeholder: "Insert a value", + label: "Input label", + theme: "filled", + description: "Your username is description", + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args +export const TextFieldOutlineVariant: Story = { + name: "Outline variant", + args: { + placeholder: "Insert a value", + label: "Input label", + // @ts-expect-error TODO: fix type + theme: "outline", + description: "Lorem ipsum dolor sit amet", + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args +export const TextFieldInlineVariant: Story = { + name: "Inline variant", + args: { + placeholder: "Insert a value", + label: "Input label", + theme: "inline", + description: "Lorem ipsum dolor sit amet", + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args +export const TextFieldDisabled: Story = { + name: "Disabled", + render: () => ( + + + {theme => ( + + )} + + + ), +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args +export const TextFieldReadonly: Story = { + name: "Readonly", + render: () => ( + + + {theme => ( + + )} + + + ), +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args +export const TextFieldRequired: Story = { + name: "Required", + render: () => ( +
+ + + {theme => ( + + )} + + + +
+ ), +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args +export const Sizes: Story = { + render: () => ( + + + {size => ( + + )} + + + ), +}; + +export const Validation: Story = { + render: () => ( + + + {size => ( + + )} + + + ), +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6ba708f..621b2f0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -75,6 +75,12 @@ importers: '@kobalte/vanilla-extract': specifier: ^0.4.0 version: 0.4.0(@vanilla-extract/css@1.14.0) + '@maskito/core': + specifier: ^1.9.0 + version: 1.9.0 + '@maskito/kit': + specifier: ^1.9.0 + version: 1.9.0(@maskito/core@1.9.0) '@motionone/solid': specifier: ^10.16.0 version: 10.16.0(solid-js@1.8.5) @@ -3018,6 +3024,18 @@ packages: read-yaml-file: 1.1.0 dev: true + /@maskito/core@1.9.0: + resolution: {integrity: sha512-WQIUrwkdIUg6PzAb4Apa0RjTPHB0EqZLc9/7kWCKVIixhkITRFXFg2BhiDVSRv0mIKVlAEJcOvvjHK5T3UaIig==} + dev: false + + /@maskito/kit@1.9.0(@maskito/core@1.9.0): + resolution: {integrity: sha512-LNNgOJ0tAfrPoPehvoP+ZyYF9giOYL02sOMKyDC3IcqDNA8BAU0PARmS7TNsVEBpvSuJhU6xVt40nxJaONgUdw==} + peerDependencies: + '@maskito/core': ^1.9.0 + dependencies: + '@maskito/core': 1.9.0 + dev: false + /@mdx-js/react@2.3.0(react@18.2.0): resolution: {integrity: sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==} peerDependencies: @@ -4561,8 +4579,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 +4594,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 +4628,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 +4697,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 +4778,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 +4815,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 +4881,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 +4906,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 +4928,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 @@ -4979,8 +5003,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 +5030,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 +5049,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 +5123,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 @@ -12573,7 +12597,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