From f90594fafe8907ea9077a14178fd723e1290323e Mon Sep 17 00:00:00 2001
From: "Lukas.J.Han" <lukas.j.han@gmail.com>
Date: Tue, 20 Aug 2024 20:37:54 +0900
Subject: [PATCH 1/3] feat: add textInput component (#77)

Signed-off-by: Lukas.J.Han <lukas.j.han@gmail.com>
---
 packages/core/lib/components/TextInput.tsx |  85 ++++++++++
 packages/core/lib/index.ts                 |   3 +-
 stories/core/TextInput.stories.ts          | 179 +++++++++++++++++++++
 3 files changed, 266 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/lib/components/TextInput.tsx
 create mode 100644 stories/core/TextInput.stories.ts

diff --git a/packages/core/lib/components/TextInput.tsx b/packages/core/lib/components/TextInput.tsx
new file mode 100644
index 0000000..1b1877f
--- /dev/null
+++ b/packages/core/lib/components/TextInput.tsx
@@ -0,0 +1,85 @@
+import React, { forwardRef } from 'react';
+import { Label } from './Label';
+
+type TextInputProps = {
+  id: string;
+  title?: string;
+  description?: string;
+  helpText?: string;
+  error?: string;
+  length?: 'x-short' | 'short' | 'middle' | 'long' | 'full';
+} & React.InputHTMLAttributes<HTMLInputElement>;
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  (
+    {
+      title,
+      description,
+      helpText,
+      error,
+      id,
+      placeholder,
+      length = 'middle',
+      ...props
+    },
+    ref
+  ) => {
+    const inputId = id;
+    const helperTextId = `${inputId}-help`;
+    const errorId = `${inputId}-error`;
+
+    const lengthClasses = {
+      'x-short': 'w-16',
+      short: 'w-32',
+      middle: 'w-64',
+      long: 'w-128',
+      full: 'w-full',
+    }[length];
+
+    return (
+      <div className="flex flex-col gap-1 justify-center">
+        {title && (
+          <Label htmlFor={inputId} weight="bold">
+            {title}
+          </Label>
+        )}
+        {description && (
+          <Label size={'s'} color={'gray-50'}>
+            {description}
+          </Label>
+        )}
+        <div className="relative">
+          <input
+            ref={ref}
+            id={inputId}
+            type="text"
+            className={`
+              ${lengthClasses} px-4 py-3 text-gray-70 border rounded-2 focus:border-primary
+              focus:outline-none focus:ring-1 focus:ring-primary mt-3
+              ${error ? 'border-danger' : 'border-gray-50'}
+              transition duration-150 ease-in-out
+            `}
+            placeholder={placeholder}
+            aria-describedby={error ? errorId : helperTextId}
+            aria-invalid={error ? 'true' : 'false'}
+            {...props}
+          />
+        </div>
+        {error ? (
+          <Label id={errorId} size={'s'} color={'danger'} className="mt-1">
+            {error}
+          </Label>
+        ) : helpText ? (
+          <Label
+            id={helperTextId}
+            size={'s'}
+            color={'gray-50'}
+            className="mt-1"
+          >
+            {helpText}
+          </Label>
+        ) : null}
+      </div>
+    );
+  }
+);
diff --git a/packages/core/lib/index.ts b/packages/core/lib/index.ts
index 1f89622..b56d28e 100644
--- a/packages/core/lib/index.ts
+++ b/packages/core/lib/index.ts
@@ -13,6 +13,7 @@ import { LinkButton } from './components/LinkButton';
 import { Tag } from './components/Tag';
 import { Spinner } from './components/Spinner';
 import { Badge } from './components/Badge';
+import { TextInput } from './components/TextInput';
 
 export { Display, Heading, Title, Body, Detail, Label, Link, colors };
-export { Button, LinkButton, Tag, Spinner, Badge };
+export { Button, LinkButton, Tag, Spinner, Badge, TextInput };
diff --git a/stories/core/TextInput.stories.ts b/stories/core/TextInput.stories.ts
new file mode 100644
index 0000000..81db334
--- /dev/null
+++ b/stories/core/TextInput.stories.ts
@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { TextInput } from '../../packages/core/lib';
+
+const meta = {
+  title: 'Components/TextInput',
+  component: TextInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    length: {
+      control: { type: 'select' },
+      options: ['x-short', 'short', 'middle', 'long', 'full'],
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+    },
+    helpText: {
+      control: {
+        type: 'text',
+      },
+    },
+    error: {
+      control: {
+        type: 'text',
+      },
+    },
+    onChange: { action: 'changed' },
+    maxLength: { control: { type: 'number' } },
+  },
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    id: 'text-input',
+    title: '이름',
+    description: '입력하신 이름이 저장됩니다.',
+    placeholder: '이름을 입력하세요',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    },
+    length: 'long',
+    maxLength: 20,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    id: 'text-input2',
+    title: '이름',
+    description: '입력하신 이름이 저장됩니다.',
+    placeholder: '이름을 입력하세요',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    },
+    length: 'long',
+    maxLength: 20,
+    error: '이름을 입력하세요',
+  },
+};
+
+export const HelpText: Story = {
+  args: {
+    id: 'text-input3',
+    title: '이름',
+    description: '입력하신 이름이 저장됩니다.',
+    placeholder: '이름을 입력하세요',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    },
+    length: 'long',
+    maxLength: 20,
+    helpText: '성과 이름을 한번에 입력하세요.',
+  },
+};
+
+export const XShort: Story = {
+  args: {
+    id: 'text-input4',
+    title: '이름',
+    description: '입력하신 이름이 저장됩니다.',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    },
+    length: 'x-short',
+    maxLength: 20,
+  },
+};
+
+export const Short: Story = {
+  args: {
+    id: 'text-input5',
+    title: '이름',
+    description: '입력하신 이름이 저장됩니다.',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    },
+    length: 'short',
+    maxLength: 20,
+  },
+};
+
+export const Middle: Story = {
+  args: {
+    id: 'text-input6',
+    title: '이름',
+    description: '입력하신 이름이 저장됩니다.',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    },
+    length: 'middle',
+    maxLength: 20,
+  },
+};
+
+export const Long: Story = {
+  args: {
+    id: 'text-input7',
+    title: '이름',
+    description: '입력하신 이름이 저장됩니다.',
+    placeholder: '이름을 입력하세요',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    },
+    length: 'long',
+    maxLength: 20,
+  },
+};
+
+export const Full: Story = {
+  args: {
+    id: 'text-input8',
+    title: '이름',
+    description: '입력하신 이름이 저장됩니다.',
+    placeholder: '이름을 입력하세요',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    },
+    length: 'full',
+    maxLength: 20,
+  },
+};
+
+export const NoTitle: Story = {
+  args: {
+    id: 'text-input9',
+    description: '입력하신 이름이 저장됩니다.',
+    placeholder: '이름을 입력하세요',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    },
+    length: 'long',
+    maxLength: 20,
+  },
+};
+
+export const NoDescription: Story = {
+  args: {
+    id: 'text-input10',
+    placeholder: '이름을 입력하세요',
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    },
+    length: 'long',
+    maxLength: 20,
+  },
+};

From 5f687459b047dd73e5c39bb261b2cab42ccce266 Mon Sep 17 00:00:00 2001
From: "Lukas.J.Han" <lukas.j.han@gmail.com>
Date: Tue, 20 Aug 2024 21:10:36 +0900
Subject: [PATCH 2/3] feat: add textArea component (#78)

Signed-off-by: Lukas.J.Han <lukas.j.han@gmail.com>
---
 packages/core/lib/components/TextArea.tsx |  79 ++++++++++++++
 packages/core/lib/index.ts                |   3 +-
 stories/core/TextArea.stories.ts          | 123 ++++++++++++++++++++++
 3 files changed, 204 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/lib/components/TextArea.tsx
 create mode 100644 stories/core/TextArea.stories.ts

diff --git a/packages/core/lib/components/TextArea.tsx b/packages/core/lib/components/TextArea.tsx
new file mode 100644
index 0000000..ce149be
--- /dev/null
+++ b/packages/core/lib/components/TextArea.tsx
@@ -0,0 +1,79 @@
+import React, { forwardRef, useState } from 'react';
+import { Label } from './Label';
+
+type TextAreaProps = {
+  id: string;
+  title?: string;
+  description?: string;
+  size?: 'small' | 'medium' | 'large';
+  maxLength?: number;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      title,
+      description,
+      id,
+      placeholder,
+      size = 'medium',
+      maxLength,
+      onChange,
+      ...props
+    },
+    ref
+  ) => {
+    const [charCount, setCharCount] = useState(0);
+
+    const sizeClasses = {
+      small: 'h-24',
+      medium: 'h-32',
+      large: 'h-40',
+    }[size];
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setCharCount(e.target.value.length);
+      if (onChange) {
+        onChange(e);
+      }
+    };
+
+    return (
+      <div className="flex flex-col gap-1 justify-center">
+        {title && (
+          <Label htmlFor={id} weight="bold">
+            {title}
+          </Label>
+        )}
+        {description && (
+          <Label size={'s'} color={'gray-50'}>
+            {description}
+          </Label>
+        )}
+        <div className="relative">
+          <textarea
+            ref={ref}
+            id={id}
+            className={`
+              w-full ${sizeClasses} px-4 py-3 text-gray-70 border rounded-4 
+              focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary mt-3
+              border-gray-50 transition duration-150 ease-in-out resize-none
+            `}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            onChange={handleChange}
+            {...props}
+          />
+          {maxLength && (
+            <div className="flex justify-end gap-1">
+              <Label color={'primary'} size={'xs'}>
+                {charCount}
+              </Label>
+              <Label size={'xs'}>{`/${maxLength}`}</Label>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
diff --git a/packages/core/lib/index.ts b/packages/core/lib/index.ts
index b56d28e..eaacb0f 100644
--- a/packages/core/lib/index.ts
+++ b/packages/core/lib/index.ts
@@ -14,6 +14,7 @@ import { Tag } from './components/Tag';
 import { Spinner } from './components/Spinner';
 import { Badge } from './components/Badge';
 import { TextInput } from './components/TextInput';
+import { TextArea } from './components/TextArea';
 
 export { Display, Heading, Title, Body, Detail, Label, Link, colors };
-export { Button, LinkButton, Tag, Spinner, Badge, TextInput };
+export { Button, LinkButton, Tag, Spinner, Badge, TextInput, TextArea };
diff --git a/stories/core/TextArea.stories.ts b/stories/core/TextArea.stories.ts
new file mode 100644
index 0000000..8b85753
--- /dev/null
+++ b/stories/core/TextArea.stories.ts
@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { TextArea } from '../../packages/core/lib';
+
+const meta = {
+  title: 'Components/TextArea',
+  component: TextArea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      options: ['small', 'medium', 'large'],
+      control: {
+        type: 'select',
+      },
+    },
+    onChange: { action: 'changed' },
+  },
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    id: 'text-area-id',
+    title: 'Title',
+    description: 'Description',
+    placeholder: 'Placeholder',
+    size: 'medium',
+    maxLength: 100,
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+      console.log(e.target.value),
+  },
+};
+
+export const NoMaxLength: Story = {
+  args: {
+    id: 'text-area-id-3',
+    title: 'Title',
+    description: 'Description',
+    placeholder: 'Placeholder',
+    size: 'medium',
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+      console.log(e.target.value),
+  },
+};
+
+export const Small: Story = {
+  args: {
+    id: 'text-area-id-2',
+    title: 'Title',
+    description: 'Description',
+    placeholder: 'Placeholder',
+    size: 'small',
+    maxLength: 100,
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+      console.log(e.target.value),
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    id: 'text-area-id-4',
+    title: 'Title',
+    description: 'Description',
+    placeholder: 'Placeholder',
+    size: 'medium',
+    maxLength: 100,
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+      console.log(e.target.value),
+  },
+};
+
+export const Large: Story = {
+  args: {
+    id: 'text-area-id-5',
+    title: 'Title',
+    description: 'Description',
+    placeholder: 'Placeholder',
+    size: 'large',
+    maxLength: 100,
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+      console.log(e.target.value),
+  },
+};
+
+export const NoTitle: Story = {
+  args: {
+    id: 'text-area-id-6',
+    description: 'Description',
+    placeholder: 'Placeholder',
+    size: 'medium',
+    maxLength: 100,
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+      console.log(e.target.value),
+  },
+};
+
+export const NoDescription: Story = {
+  args: {
+    id: 'text-area-id-7',
+    placeholder: 'Placeholder',
+    size: 'medium',
+    maxLength: 100,
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+      console.log(e.target.value),
+  },
+};
+
+export const NoPlaceholder: Story = {
+  args: {
+    id: 'text-area-id-8',
+    title: 'Title',
+    description: 'Description',
+    size: 'medium',
+    maxLength: 100,
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+      console.log(e.target.value),
+  },
+};

From 61f799fc74bfc2d06055b6ddfe9e69005e3449b5 Mon Sep 17 00:00:00 2001
From: "Lukas.J.Han" <lukas.j.han@gmail.com>
Date: Tue, 20 Aug 2024 21:13:35 +0900
Subject: [PATCH 3/3] feat: add breadcrumb component (#79)

Signed-off-by: Lukas.J.Han <lukas.j.han@gmail.com>
---
 packages/core/lib/components/Breadcrumb.tsx | 97 +++++++++++++++++++++
 packages/core/lib/index.ts                  | 12 ++-
 stories/core/Breadcrumb.stories.ts          | 63 +++++++++++++
 3 files changed, 171 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/lib/components/Breadcrumb.tsx
 create mode 100644 stories/core/Breadcrumb.stories.ts

diff --git a/packages/core/lib/components/Breadcrumb.tsx b/packages/core/lib/components/Breadcrumb.tsx
new file mode 100644
index 0000000..44d042d
--- /dev/null
+++ b/packages/core/lib/components/Breadcrumb.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Label } from './Label';
+
+interface BreadcrumbItem {
+  label: string;
+  onClick: () => void;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  maxLength?: number;
+}
+
+const ChevronIcon: React.FC = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M6 4L10 8L6 12"
+      stroke="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const EllipsisIcon: React.FC = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <circle cx="3" cy="8" r="1" fill="currentColor" />
+    <circle cx="8" cy="8" r="1" fill="currentColor" />
+    <circle cx="13" cy="8" r="1" fill="currentColor" />
+  </svg>
+);
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  maxLength = 3,
+}) => {
+  const maxItems = Math.max(2, maxLength);
+  const renderItems = () => {
+    if (items.length <= maxItems) {
+      return items;
+    }
+
+    const visibleItems = [];
+    visibleItems.push(items[0]);
+
+    if (maxItems > 2) {
+      for (let i = 1; i < maxItems - 1; i++) {
+        visibleItems.push(items[items.length - maxItems + i]);
+      }
+    }
+
+    visibleItems.push(items[items.length - 1]);
+
+    return visibleItems;
+  };
+
+  return (
+    <nav aria-label="브레드크럼" className="py-2">
+      <ol className="flex items-center">
+        {renderItems().map((item, index) => (
+          <li key={index} className="flex items-center m-0">
+            {index > 0 && <ChevronIcon />}
+            {index === 1 && items.length > maxItems && (
+              <>
+                <EllipsisIcon />
+                <ChevronIcon />
+              </>
+            )}
+            <Label
+              onClick={item.onClick}
+              color={'gray-90'}
+              size="xs"
+              className="hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary cursor-pointer"
+            >
+              {item.label}
+            </Label>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+};
diff --git a/packages/core/lib/index.ts b/packages/core/lib/index.ts
index eaacb0f..59131a6 100644
--- a/packages/core/lib/index.ts
+++ b/packages/core/lib/index.ts
@@ -15,6 +15,16 @@ import { Spinner } from './components/Spinner';
 import { Badge } from './components/Badge';
 import { TextInput } from './components/TextInput';
 import { TextArea } from './components/TextArea';
+import { Breadcrumb } from './components/Breadcrumb';
 
 export { Display, Heading, Title, Body, Detail, Label, Link, colors };
-export { Button, LinkButton, Tag, Spinner, Badge, TextInput, TextArea };
+export {
+  Button,
+  LinkButton,
+  Tag,
+  Spinner,
+  Badge,
+  TextInput,
+  TextArea,
+  Breadcrumb,
+};
diff --git a/stories/core/Breadcrumb.stories.ts b/stories/core/Breadcrumb.stories.ts
new file mode 100644
index 0000000..edd83b9
--- /dev/null
+++ b/stories/core/Breadcrumb.stories.ts
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Breadcrumb } from '../../packages/core/lib';
+
+const meta = {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { label: '홈', onClick: () => console.log('홈') },
+      { label: '문서', onClick: () => console.log('문서') },
+      { label: '서적', onClick: () => console.log('서적') },
+      { label: '서적 서적', onClick: () => console.log('서적 서적') },
+    ],
+  },
+};
+
+export const MaxItems: Story = {
+  args: {
+    items: [
+      { label: '홈', onClick: () => console.log('홈') },
+      { label: '문서', onClick: () => console.log('문서') },
+      { label: '서적', onClick: () => console.log('서적') },
+      { label: '서적 서적', onClick: () => console.log('서적 서적') },
+    ],
+    maxLength: 2,
+  },
+};
+
+export const WithoutEllipsis: Story = {
+  args: {
+    items: [
+      { label: '홈', onClick: () => console.log('홈') },
+      { label: '문서', onClick: () => console.log('문서') },
+      { label: '서적', onClick: () => console.log('서적') },
+      { label: '서적 서적', onClick: () => console.log('서적 서적') },
+    ],
+    maxLength: 5,
+  },
+};
+
+export const maxLengthIsLessThan2: Story = {
+  args: {
+    items: [
+      { label: '홈', onClick: () => console.log('홈') },
+      { label: '문서', onClick: () => console.log('문서') },
+      { label: '서적', onClick: () => console.log('서적') },
+      { label: '서적 서적', onClick: () => console.log('서적 서적') },
+    ],
+    maxLength: 1,
+  },
+};