Merge pull request #67 from sopt-makers/feat/storybook

[DOCS] input storybook 작성

apps/docs/package.json

@@ -13,7 +13,7 @@
     "chromatic": "npx chromatic --project-token=chpt_98c750b6bad066a"
   },
   "dependencies": {
-    "@sopt-makers/ui": "^1.0.2"
+    "@sopt-makers/ui": "1.1.1"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.3",

apps/docs/src/stories/SearchField.stories.tsx

@@ -0,0 +1,49 @@
+import { ChangeEvent, useState, type InputHTMLAttributes } from 'react';
+import { StoryObj } from '@storybook/react';
+import { SearchField } from '@sopt-makers/ui';
+import { fn } from '@storybook/test';
+
+interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  value: string;
+  onSubmit: () => void;
+  onReset: () => void;
+}
+
+const useSearchField = (props: SearchFieldProps) => {
+  const [search, setSearch] = useState(props.value);
+
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  }
+
+  const handleSearchReset = () => {
+    setSearch('');
+  }
+
+  return <SearchField {...props} value={search} onChange={handleSearchChange} onReset={handleSearchReset} />
+}
+
+export default {
+  title: 'Components/Input/SearchField',
+  component: useSearchField,
+  tags: ['autodocs'],
+  args: {
+    value: '',
+    style: { width: '335px' },
+    onSubmit: fn(),
+  },
+  argTypes: {
+    value: { control: false },
+    style: { control: false },
+    onSubmit: { action: 'onSubmit' }
+  }
+}
+
+export const SearchFieldStory: StoryObj<SearchFieldProps> = {
+  args: {
+    placeholder: 'Placeholder...',
+    readOnly: false,
+    disabled: false,
+    style: { width: '335px' },
+  },
+};

apps/docs/src/stories/TextArea.stories.tsx

@@ -0,0 +1,157 @@
+import { ChangeEvent, useState, type TextareaHTMLAttributes } from 'react';
+import { StoryObj } from '@storybook/react';
+import { TextArea } from '@sopt-makers/ui';
+import { fn } from '@storybook/test';
+
+interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> {
+  labelText?: string;
+  descriptionText?: string;
+  errorMessage?: string;
+  value: string;
+  maxLength: number;
+  height?: string;
+  isError?: boolean;
+  onSubmit: () => void;
+}
+
+const useTextArea = (props: TextAreaProps) => {
+  const [text, setText] = useState(props.value);
+
+  const handleTextChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target.value);
+  }
+
+  return <TextArea {...props} value={text} onChange={handleTextChange} />
+}
+
+export default {
+  title: 'Components/Input/TextArea',
+  component: useTextArea,
+  tags: ['autodocs'],
+  args: {
+    value: '',
+    style: { width: '335px', height: '48px' },
+    onSubmit: fn(),
+  },
+  argTypes: {
+    value: { control: false },
+    style: { control: false },
+    onSubmit: { action: 'onSubmit' }
+  }
+}
+
+export const Default: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  }
+};
+
+export const DoubleLine: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    value: 'text\ntext',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+    style: { width: '335px', height: '76px' },
+  }
+};
+
+export const NoLabel: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: '',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  }
+};
+
+export const NoDescription: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: '',
+    placeholder: 'Placeholder...',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  }
+};
+
+export const NoRequired: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: false,
+    readOnly: false,
+    disabled: false,
+  }
+};
+
+export const OnlyText: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: '',
+    descriptionText: '',
+    placeholder: 'Placeholder...',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: false,
+    readOnly: false,
+    disabled: false,
+  }
+};
+
+export const Readonly: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    value: 'text',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: true,
+    disabled: false,
+  }
+};
+
+export const Disabled: StoryObj<TextAreaProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    value: 'text',
+    maxLength: 300,
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: true,
+  }
+};

apps/docs/src/stories/TextField.stories.tsx

@@ -0,0 +1,126 @@
+import { ChangeEvent, useState, type InputHTMLAttributes } from 'react';
+import { StoryObj } from '@storybook/react';
+import { TextField } from '@sopt-makers/ui';
+
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  labelText?: string;
+  descriptionText?: string;
+  value: string;
+  errorMessage?: string;
+  isError?: boolean;
+}
+
+const useTextField = (props: TextFieldProps) => {
+  const [text, setText] = useState(props.value);
+
+  const handleTextChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setText(e.target.value);
+  }
+
+  return <TextField<string> {...props} value={text} onChange={handleTextChange} />
+}
+
+export default {
+  title: 'Components/Input/TextField',
+  component: useTextField,
+  tags: ['autodocs'],
+  args: {
+    style: { width: '335px' }
+  },
+  argTypes: {
+    style: { control: false }
+  }
+}
+
+export const Default: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  },
+};
+
+export const NoLabel: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: '',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  },
+};
+
+export const NoDescription: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: '',
+    placeholder: 'Placeholder...',
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: false,
+  },
+};
+
+export const NoRequired: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    isError: false,
+    errorMessage: 'error message',
+    required: false,
+    readOnly: false,
+    disabled: false,
+  },
+};
+
+export const OnlyText: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: '',
+    descriptionText: '',
+    placeholder: 'Placeholder...',
+    isError: false,
+    errorMessage: 'error message',
+    required: false,
+    readOnly: false,
+    disabled: false,
+  },
+};
+
+export const Readonly: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    value: 'text',
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: true,
+    disabled: false,
+  },
+};
+
+export const Disabled: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    value: 'text',
+    isError: false,
+    errorMessage: 'error message',
+    required: true,
+    readOnly: false,
+    disabled: true,
+  },
+};