From e41a8821046ace502cf5d127cbd2c55f645f2f04 Mon Sep 17 00:00:00 2001 From: nayounsang Date: Thu, 7 Nov 2024 18:00:35 +0900 Subject: [PATCH 1/6] fix: process value props to number[] or undefined --- .../src/components/Slider/Slider.stories.tsx | 52 ++++++++++++++----- 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/packages/bezier-react/src/components/Slider/Slider.stories.tsx b/packages/bezier-react/src/components/Slider/Slider.stories.tsx index 2dbef6e51a..b5ef2a49d2 100644 --- a/packages/bezier-react/src/components/Slider/Slider.stories.tsx +++ b/packages/bezier-react/src/components/Slider/Slider.stories.tsx @@ -1,6 +1,9 @@ -import { type Meta } from '@storybook/react' +import React from 'react' + +import { type Meta, type StoryFn } from '@storybook/react' import { Slider } from './Slider' +import { type SliderProps } from './Slider.types' const meta: Meta = { component: Slider, @@ -25,16 +28,39 @@ const meta: Meta = { } export default meta -export const Primary = { - args: { - width: 285, - defaultValue: [5], - value: undefined, - disabled: false, - guide: [5], - min: 0, - max: 10, - step: 1, - disableTooltip: false, - }, +const Template: StoryFn = (args) => { + const processedArgs = getProcessedArgs(args) + return +} + +export const Primary = Template.bind({}) +Primary.args = { + width: 285, + defaultValue: [5], + value: undefined, + disabled: false, + guide: [5], + min: 0, + max: 10, + step: 1, + disableTooltip: false, +} + +const getProcessedArgs = (args: SliderProps): SliderProps => { + return { ...args, value: getProcessedValue(args.value) } +} + +const getProcessedValue = ( + value: undefined | Record | number[] +) => { + if (value === undefined) { + return undefined + } + if (Array.isArray(value) && value.every((item) => typeof item === 'number')) { + return value + } + if (typeof value === 'object' && value !== null) { + return Object.values(value) + } + return value } From 7054c2cb6067d302ddf777f3b818be0f8292825a Mon Sep 17 00:00:00 2001 From: nayounsang Date: Thu, 7 Nov 2024 18:21:59 +0900 Subject: [PATCH 2/6] chore: add patch changeset --- .changeset/good-colts-clean.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/good-colts-clean.md diff --git a/.changeset/good-colts-clean.md b/.changeset/good-colts-clean.md new file mode 100644 index 0000000000..dcb072dab3 --- /dev/null +++ b/.changeset/good-colts-clean.md @@ -0,0 +1,5 @@ +--- +'@channel.io/bezier-react': patch +--- + +Process value in args of Slider to work in storybook From 9cc10c78354e6bca25c12ce447a9d050b0a092de Mon Sep 17 00:00:00 2001 From: nayounsang Date: Fri, 8 Nov 2024 16:18:16 +0900 Subject: [PATCH 3/6] refactor: split slider story into control and uncontrol --- .../src/components/Slider/Slider.stories.tsx | 49 ++++++------------- 1 file changed, 15 insertions(+), 34 deletions(-) diff --git a/packages/bezier-react/src/components/Slider/Slider.stories.tsx b/packages/bezier-react/src/components/Slider/Slider.stories.tsx index b5ef2a49d2..64e84f2698 100644 --- a/packages/bezier-react/src/components/Slider/Slider.stories.tsx +++ b/packages/bezier-react/src/components/Slider/Slider.stories.tsx @@ -8,11 +8,6 @@ import { type SliderProps } from './Slider.types' const meta: Meta = { component: Slider, argTypes: { - value: { - control: { - type: 'object', - }, - }, minStepsBetweenThumbs: { control: { type: 'number', @@ -25,42 +20,28 @@ const meta: Meta = { action: 'onValueCommit', }, }, + args:{ + width: 285, + disabled: false, + guide: [5], + min: 0, + max: 10, + step: 1, + disableTooltip: false, + } } export default meta -const Template: StoryFn = (args) => { - const processedArgs = getProcessedArgs(args) - return +const Template: StoryFn = (otherSwitchProps) => { + return } export const Primary = Template.bind({}) Primary.args = { - width: 285, - defaultValue: [5], - value: undefined, - disabled: false, - guide: [5], - min: 0, - max: 10, - step: 1, - disableTooltip: false, + value: [5], } -const getProcessedArgs = (args: SliderProps): SliderProps => { - return { ...args, value: getProcessedValue(args.value) } -} - -const getProcessedValue = ( - value: undefined | Record | number[] -) => { - if (value === undefined) { - return undefined - } - if (Array.isArray(value) && value.every((item) => typeof item === 'number')) { - return value - } - if (typeof value === 'object' && value !== null) { - return Object.values(value) - } - return value +export const Uncontrolled = Template.bind({}) +Uncontrolled.args = { + defaultValue: [5], } From 90e2dc1ca6ea1c18bbd25900a62860347aa8f24e Mon Sep 17 00:00:00 2001 From: nayounsang Date: Fri, 8 Nov 2024 17:50:54 +0900 Subject: [PATCH 4/6] chore: delete change log --- .changeset/good-colts-clean.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/good-colts-clean.md diff --git a/.changeset/good-colts-clean.md b/.changeset/good-colts-clean.md deleted file mode 100644 index dcb072dab3..0000000000 --- a/.changeset/good-colts-clean.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@channel.io/bezier-react': patch ---- - -Process value in args of Slider to work in storybook From abd9d2cee436542a99f0cfcd227693cfa7d1ce3e Mon Sep 17 00:00:00 2001 From: nayounsang Date: Fri, 8 Nov 2024 17:55:30 +0900 Subject: [PATCH 5/6] refactor: migrate format from csf2 to csf3 --- .../src/components/Slider/Slider.stories.tsx | 31 ++++++++----------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/packages/bezier-react/src/components/Slider/Slider.stories.tsx b/packages/bezier-react/src/components/Slider/Slider.stories.tsx index 64e84f2698..47fda0aa57 100644 --- a/packages/bezier-react/src/components/Slider/Slider.stories.tsx +++ b/packages/bezier-react/src/components/Slider/Slider.stories.tsx @@ -1,9 +1,6 @@ -import React from 'react' - -import { type Meta, type StoryFn } from '@storybook/react' +import { type Meta, type StoryObj } from '@storybook/react' import { Slider } from './Slider' -import { type SliderProps } from './Slider.types' const meta: Meta = { component: Slider, @@ -20,7 +17,7 @@ const meta: Meta = { action: 'onValueCommit', }, }, - args:{ + args: { width: 285, disabled: false, guide: [5], @@ -28,20 +25,18 @@ const meta: Meta = { max: 10, step: 1, disableTooltip: false, - } + }, } export default meta -const Template: StoryFn = (otherSwitchProps) => { - return -} - -export const Primary = Template.bind({}) -Primary.args = { - value: [5], -} +export const Primary = { + args: { + value: [5], + }, +} satisfies StoryObj -export const Uncontrolled = Template.bind({}) -Uncontrolled.args = { - defaultValue: [5], -} +export const Uncontrolled = { + args: { + defaultValue: [5], + }, +} satisfies StoryObj From d2d545a4a4923dfdcebe9363e5ca1a774dd87de1 Mon Sep 17 00:00:00 2001 From: nayounsang Date: Fri, 8 Nov 2024 22:45:49 +0900 Subject: [PATCH 6/6] fix: show args conditionally in pord --- .../src/components/Slider/Slider.stories.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/bezier-react/src/components/Slider/Slider.stories.tsx b/packages/bezier-react/src/components/Slider/Slider.stories.tsx index 47fda0aa57..dfbe7f8ecd 100644 --- a/packages/bezier-react/src/components/Slider/Slider.stories.tsx +++ b/packages/bezier-react/src/components/Slider/Slider.stories.tsx @@ -16,6 +16,18 @@ const meta: Meta = { onValueCommit: { action: 'onValueCommit', }, + value: { + if: { + exists: true, + arg: 'value', + }, + }, + defaultValue: { + if: { + exists: true, + arg: 'defaultValue', + }, + }, }, args: { width: 285,