fix(ui-kit): Selection에 Disabled 안 먹는 이슈 수정 (#86)

Lubycon · Jun 3, 2021 · fc0fa74 · fc0fa74
1 parent c23ae1f
commit fc0fa74
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 113 deletions.
diff --git a/ui-kit/src/components/Selection/index.tsx b/ui-kit/src/components/Selection/index.tsx
@@ -54,6 +54,7 @@ const Selection = (
           onChange?.(e);
           setInnerValue(e.target.value ?? '');
         }}
+        disabled={disabled}
       >
         <option value="" hidden={true} className="lubycon-selection__placeholder">
           {placeholder}

diff --git a/...tories/Components/ProgressBar.stories.tsx → ...ies/Components/ProgressBar/Components.tsx b/...tories/Components/ProgressBar.stories.tsx → ...ies/Components/ProgressBar/Components.tsx
@@ -1,16 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Meta } from '@storybook/react/types-6-0';
 import { ProgressBar, Text } from 'src';
-import { ProgressBarLabelPosition } from 'src/components/ProgressBar';
+import { MAX_VALUE, labelPosition } from './data';
 
-export default {
-  title: 'Components/ProgressBar',
-} as Meta;
-
-const MAX_VALUE = 100;
 const getProgressValue = (value: number) => (value === MAX_VALUE ? 0 : value + 1);
 
-export const Default = () => {
+export const Preview = () => {
   const [value, setValue] = useState(0);
 
   useEffect(() => {
@@ -20,14 +14,9 @@ export const Default = () => {
     };
   }, []);
 
-  return (
-    <div>
-      <ProgressBar value={value} max={MAX_VALUE} />
-    </div>
-  );
+  return <ProgressBar value={value} max={MAX_VALUE} />;
 };
 
-const labelPosition: ProgressBarLabelPosition[] = ['top', 'bottom', 'left', 'right'];
 export const Label = () => {
   const [value, setValue] = useState(0);
 

diff --git a/ui-kit/src/stories/Components/ProgressBar/data.ts b/ui-kit/src/stories/Components/ProgressBar/data.ts
@@ -0,0 +1,4 @@
+import { ProgressBarLabelPosition } from 'src/components/ProgressBar';
+
+export const MAX_VALUE = 100;
+export const labelPosition: ProgressBarLabelPosition[] = ['top', 'bottom', 'left', 'right'];
diff --git a/ui-kit/src/stories/Components/ProgressBar/index.stories.mdx b/ui-kit/src/stories/Components/ProgressBar/index.stories.mdx
@@ -0,0 +1,31 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ProgressBar } from 'src';
+import { Preview, Label, LabelFormatter } from './Components';
+
+<Meta title="Components/ProgressBar" components={ProgressBar} />
+
+# ProgressBar
+
+## Preview
+
+<Canvas>
+  <Story name="Preview">
+    <Preview />
+  </Story>
+</Canvas>
+
+## Label
+
+<Canvas>
+  <Story name="Label">
+    <Label />
+  </Story>
+</Canvas>
+
+## Label Formatter
+
+<Canvas>
+  <Story name="Label Formatter">
+    <LabelFormatter />
+  </Story>
+</Canvas>
diff --git a/ui-kit/src/stories/Components/Radio.stories.tsx b/ui-kit/src/stories/Components/Radio.stories.tsx
diff --git a/ui-kit/src/stories/Components/Radio/index.stories.mdx b/ui-kit/src/stories/Components/Radio/index.stories.mdx
@@ -0,0 +1,35 @@
+import { Radio } from 'src';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+<Meta title="Components/Radio" components={Radio} />
+
+# Radio
+
+## Preview
+
+<Canvas>
+  <Story name="Preview">
+    <Radio label="라디오1" name="radio" />
+    <Radio label="라디오2" name="radio" />
+  </Story>
+</Canvas>
+
+## Disabled
+
+<Canvas>
+  <Story name="Disabled">
+    <Radio label="라디오1" name="radio" />
+    <Radio label="라디오2" name="radio" />
+    <Radio label="라디오3" name="radio" disabled />
+    <Radio label="라디오4" name="radio" defaultChecked={true} disabled />
+  </Story>
+</Canvas>
+
+## Inline
+
+<Canvas>
+  <Story name="Inline">
+    <Radio display="inline" label="라디오1" name="radio" style={{ marginRight: 16 }} />
+    <Radio display="inline" label="라디오2" name="radio" />
+  </Story>
+</Canvas>
diff --git a/ui-kit/src/stories/Components/Selection.stories.tsx b/ui-kit/src/stories/Components/Selection.stories.tsx
diff --git a/ui-kit/src/stories/Components/Selection/Components.tsx b/ui-kit/src/stories/Components/Selection/Components.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { Selection, Text } from 'src';
+
+export const Preview = () => {
+  const [state, setState] = useState('');
+
+  return (
+    <div>
+      <Selection onChange={(e) => setState(e.target.value)}>
+        <option>옵션1</option>
+        <option>옵션2</option>
+        <option>옵션3</option>
+      </Selection>
+      <Text style={{ display: 'block' }}>선택된 값은 {state}입니다.</Text>
+    </div>
+  );
+};
diff --git a/ui-kit/src/stories/Components/Selection/index.stories.mdx b/ui-kit/src/stories/Components/Selection/index.stories.mdx
@@ -0,0 +1,58 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Selection, Text } from 'src';
+import { Preview } from './Components';
+
+<Meta title="Components/Selection" components={Selection} />
+
+# Selection
+
+## Preview
+
+<Canvas>
+  <Story name="Preview">
+    <Preview />
+  </Story>
+</Canvas>
+
+## Sizes
+
+<Canvas>
+  <Story name="Sizes">
+    <ul>
+      {['small', 'medium', 'large'].map((size) => (
+        <li key={size} style={{ marginBottom: 16, listStyle: ' none' }}>
+          <Selection placeholder={size} size={size}>
+            <option>옵션1</option>
+            <option>옵션2</option>
+            <option>옵션3</option>
+          </Selection>
+        </li>
+      ))}
+    </ul>
+  </Story>
+</Canvas>
+
+## Disabled
+
+<Canvas>
+  <Story name="Disabled">
+    <Selection disabled>
+      <option>옵션1</option>
+      <option>옵션2</option>
+      <option>옵션3</option>
+    </Selection>
+  </Story>
+</Canvas>
+
+## Placeholder
+
+<Canvas>
+  <Story name="Placeholder">
+    <Selection placeholder="어느 곳에 사시나요?">
+      <option>서울</option>
+      <option>경기</option>
+      <option>인천</option>
+      <option>충남</option>
+    </Selection>
+  </Story>
+</Canvas>