teachable-design-system 0.1.16 → 0.2.0

package/src/components/Input/Input.stories.tsx

@@ -1,38 +1,50 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Input } from './Input';
-import React, { useState } from 'react';
-import { InputProps } from '../../types/input.types';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+import React, { useState } from "react";
+import { InputProps } from "../../types/input.types";
 
 const meta: Meta<InputProps> = {
-    title: 'Components/Input',
-    component: Input,
-    parameters: {
-        layout: 'centered',
+  title: "Components/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    width: {
+      control: "text",
+      description: "인풋의 너비 (예: 100%, 300px, 500px)",
     },
-    tags: ['autodocs'],
-    argTypes: {
-        size: {
-            control: 'select',
-            options: ['small', 'medium', 'large'],
-            description: '인풋의 크기',
-        },
-        label: {
-            control: 'boolean',
-            description: 'label 표시 여부',
-        },
-        labelText: {
-            control: 'text',
-            description: 'label에 표시될 텍스트',
-        },
-        placeholder: {
-            control: 'text',
-            description: 'placeholder 텍스트',
-        },
-        disabled: {
-            control: 'boolean',
-            description: '비활성화 여부',
-        },
+    height: {
+      control: "text",
+      description: "인풋의 높이 (예: 40px, 50px, 60px)",
     },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large"],
+      description: "인풋의 크기",
+    },
+    label: {
+      control: "boolean",
+      description: "label 표시 여부",
+    },
+    labelText: {
+      control: "text",
+      description: "label에 표시될 텍스트",
+    },
+    placeholder: {
+      control: "text",
+      description: "placeholder 텍스트",
+    },
+    disabled: {
+      control: "boolean",
+      description: "비활성화 여부",
+    },
+    isPassword: {
+      control: "boolean",
+      description: "비밀번호 입력 여부",
+    },
+  },
 } satisfies Meta<typeof Input>;
 
 export default meta;
@@ -40,113 +52,230 @@ type Story = StoryObj<typeof meta>;
 
 // 기본 스토리
 export const Default: Story = {
-    args: {
-        size: 'medium',
-        label: true,
-        labelText: 'Label',
-        placeholder: 'Enter text...',
-        disabled: false,
-    },
+  args: {
+    size: "medium",
+    label: true,
+    labelText: "Label",
+    placeholder: "Enter text...",
+    disabled: false,
+  },
 };
 
 // Small 사이즈
 export const Small: Story = {
-    args: {
-        size: 'small',
-        label: true,
-        labelText: 'Small Input',
-        placeholder: 'Small size input',
-    },
+  args: {
+    size: "small",
+    label: true,
+    labelText: "Small Input",
+    placeholder: "Small size input",
+  },
 };
 
 // Medium 사이즈
 export const Medium: Story = {
-    args: {
-        size: 'medium',
-        label: true,
-        labelText: 'Medium Input',
-        placeholder: 'Medium size input',
-    },
+  args: {
+    size: "medium",
+    label: true,
+    labelText: "Medium Input",
+    placeholder: "Medium size input",
+  },
 };
 
 // Large 사이즈
 export const Large: Story = {
-    args: {
-        size: 'large',
-        label: true,
-        labelText: 'Large Input',
-        placeholder: 'Large size input',
-    },
+  args: {
+    size: "large",
+    label: true,
+    labelText: "Large Input",
+    placeholder: "Large size input",
+  },
 };
 
 // Label 없음
 export const WithoutLabel: Story = {
-    args: {
-        size: 'medium',
-        label: false,
-        placeholder: 'Input without label',
-    },
+  args: {
+    size: "medium",
+    label: false,
+    placeholder: "Input without label",
+  },
 };
 
 // Disabled 상태
 export const Disabled: Story = {
-    args: {
-        size: 'medium',
-        label: true,
-        labelText: 'Disabled Input',
-        placeholder: 'This input is disabled',
-        disabled: true,
-    },
+  args: {
+    size: "medium",
+    label: true,
+    labelText: "Disabled Input",
+    placeholder: "This input is disabled",
+    disabled: true,
+  },
 };
 
 // 인터랙티브 예제 (Controlled Input)
 export const Controlled: Story = {
-    render: (args) => {
-        const [value, setValue] = useState('');
-        
-        return (
-            <div style={{ width: '300px' }}>
-                <Input
-                    {...args}
-                    value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                />
-                <p style={{ marginTop: '10px', fontSize: '14px', color: '#666' }}>
-                    Current value: {value || '(empty)'}
-                </p>
-            </div>
-        );
-    },
-    args: {
-        size: 'medium',
-        label: true,
-        labelText: 'Controlled Input',
-        placeholder: 'Type something...',
-    },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <div style={{ width: "300px" }}>
+        <Input
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <p style={{ marginTop: "10px", fontSize: "14px", color: "#666" }}>
+          Current value: {value || "(empty)"}
+        </p>
+      </div>
+    );
+  },
+  args: {
+    size: "medium",
+    label: true,
+    labelText: "Controlled Input",
+    placeholder: "Type something...",
+  },
 };
 
 // 모든 사이즈 비교
 export const AllSizes: Story = {
-    render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '300px' }}>
-            <Input
-                size="small"
-                label={true}
-                labelText="Small"
-                placeholder="Small input"
-            />
-            <Input
-                size="medium"
-                label={true}
-                labelText="Medium"
-                placeholder="Medium input"
-            />
-            <Input
-                size="large"
-                label={true}
-                labelText="Large"
-                placeholder="Large input"
-            />
-        </div>
-    ),
-};
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+        width: "300px",
+      }}
+    >
+      <Input
+        size="small"
+        label={true}
+        labelText="Small"
+        placeholder="Small input"
+      />
+      <Input
+        size="medium"
+        label={true}
+        labelText="Medium"
+        placeholder="Medium input"
+      />
+      <Input
+        size="large"
+        label={true}
+        labelText="Large"
+        placeholder="Large input"
+      />
+    </div>
+  ),
+};
+
+// 비밀번호 입력
+export const Password: Story = {
+  args: {
+    size: "medium",
+    label: true,
+    labelText: "Password",
+    placeholder: "Enter your password",
+    isPassword: true,
+  },
+};
+
+// 비밀번호 입력 (Small)
+export const PasswordSmall: Story = {
+  args: {
+    size: "small",
+    label: true,
+    labelText: "Password",
+    placeholder: "Enter password",
+    isPassword: true,
+  },
+};
+
+// 비밀번호 입력 (Large)
+export const PasswordLarge: Story = {
+  args: {
+    size: "large",
+    label: true,
+    labelText: "Password",
+    placeholder: "Enter your password",
+    isPassword: true,
+  },
+};
+
+// 비밀번호 입력 인터랙티브
+export const PasswordControlled: Story = {
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <div style={{ width: "300px" }}>
+        <Input
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          isPassword={true}
+        />
+        <p style={{ marginTop: "10px", fontSize: "14px", color: "#666" }}>
+          Password length: {value.length}
+        </p>
+      </div>
+    );
+  },
+  args: {
+    size: "medium",
+    label: true,
+    labelText: "Create Password",
+    placeholder: "Enter a strong password",
+  },
+};
+
+// 커스텀 너비
+export const CustomWidth: Story = {
+  args: {
+    width: "500px",
+    size: "medium",
+    label: true,
+    labelText: "Custom Width Input",
+    placeholder: "Width: 500px",
+  },
+};
+
+// 커스텀 높이
+export const CustomHeight: Story = {
+  args: {
+    height: "60px",
+    size: "medium",
+    label: true,
+    labelText: "Custom Height Input",
+    placeholder: "Height: 60px",
+  },
+};
+
+// 커스텀 너비와 높이
+export const CustomWidthAndHeight: Story = {
+  args: {
+    width: "400px",
+    height: "70px",
+    size: "medium",
+    label: true,
+    labelText: "Custom Width & Height",
+    placeholder: "Width: 400px, Height: 70px",
+  },
+};
+
+// 퍼센트 너비
+export const PercentageWidth: Story = {
+  render: (args) => (
+    <div style={{ width: "600px", padding: "20px", border: "1px dashed #ccc" }}>
+      <Input {...args} />
+    </div>
+  ),
+  args: {
+    width: "100%",
+    size: "medium",
+    label: true,
+    labelText: "100% Width Input",
+    placeholder: "This input fills the container",
+  },
+};

package/src/components/Input/Input.tsx

@@ -1,31 +1,58 @@
-
-import React,{ useState } from 'react';
-import { getInputWrapperStyle, labelStyle, getInputStyle } from './style';
-import { InputProps } from '../../types/input.types'
+import React, { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import {
+  InputWrapper,
+  Label,
+  InputContainer,
+  StyledInput,
+  IconButton,
+} from "./style";
+import { InputProps } from "../../types/input.types";
 
 export const Input = ({
-    size = 'medium',
-    label = false,
-    labelText = '',
-    placeholder = '',
-    value,
-    onChange,
-    disabled = false,
+  id,
+  width,
+  height,
+  size = "medium",
+  label = false,
+  labelText = "",
+  placeholder = "",
+  value,
+  onChange,
+  disabled = false,
+  isPassword = false,
 }: InputProps) => {
-    const [isFocused, setIsFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const inputType = isPassword ? (showPassword ? "text" : "password") : "text";
 
-    return (
-        <div style={getInputWrapperStyle(size)}>
-            {label && labelText && <label style={labelStyle}>{labelText}</label>}
-            <input
-                style={getInputStyle(size, disabled, isFocused)}
-                placeholder={placeholder}
-                value={value}
-                onChange={onChange}
-                disabled={disabled}
-                onFocus={() => setIsFocused(true)}
-                onBlur={() => setIsFocused(false)}
-            />
-        </div>
-    );
-};
+  return (
+    <InputWrapper width={width}>
+      {label && labelText && <Label htmlFor={id}>{labelText}</Label>}
+      <InputContainer>
+        <StyledInput
+          id={id}
+          type={inputType}
+          inputSize={size}
+          width={width}
+          height={height}
+          disabled={disabled}
+          isPassword={isPassword}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+        />
+        {isPassword && (
+          <IconButton
+            type="button"
+            disabled={disabled}
+            onClick={() => setShowPassword(!showPassword)}
+            aria-label={showPassword ? "Hide password" : "Show password"}
+          >
+            {showPassword ? <Eye size={20} /> : <EyeOff size={20} />}
+          </IconButton>
+        )}
+      </InputContainer>
+    </InputWrapper>
+  );
+};

package/src/components/Input/index.ts

@@ -1 +1 @@
-export * from './Input'
+export * from './Input';