1. Input

Input 컴포넌트는 사용자 입력을 처리하기 위해 사용되는 기본 UI 요소입니다. 크기와 변형을 조정하여 다양한 스타일을 적용할 수 있습니다.

1.1. Import

import { Input } from '@componique/react';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

import { Input } from '@components/Input';

function Example() {
  return (
    <Input placeholder="Basic usage" />
  );
}

export default Example;

1.3. Changing the Size of the Input

Input 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 medium입니다:

xs: 아주 작은 크기
small: 작은 크기
medium: 중간 크기 (기본값)
large: 큰 크기
xl: 아주 큰 크기

import { Input } from '@components/Input';

function Example() {
  return (
    <>
      <Input placeholder="extra small size" size="xs" />
      <Input placeholder="small size" size="small" />
      <Input placeholder="medium size" size="medium" />
      <Input placeholder="large size" size="large" />
      <Input placeholder="extra large size" size="xl" />
    </>
  );
}
export default Example;

1.4. Props

Input 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`size`	Input의 크기를 설정합니다.	`"xs" \| "small" \| "medium" \| "large" \| "xl"`	`"medium"`
`variant`	Input의 변형을 설정합니다.	`"outlined" \| "filled"`	`"outlined"`
`placeholder`	Input에 표시될 플레이스홀더 텍스트를 설정합니다.	`string`	`""`
`value`	Input의 값입니다.	`string`	`""`
`onChange`	값이 변경될 때 호출되는 핸들러입니다.	`(e: React.ChangeEvent<HTMLInputElement>)`	`-`

1.5. Full Example

import { Input } from '@components/Input';

function Example() {
  return (
    <div>
      <Input placeholder="Basic usage" />
      <Input placeholder="small size" size="small" />
      <Input placeholder="filled" variant="filled" />
    </div>
  );
}

export default Example;

2. SearchInput

SearchInput 컴포넌트는 사용자가 검색어를 입력할 수 있도록 해주는 기본적인 UI 요소입니다. 활성화 여부에 따라 버튼과 입력 필드가 동적으로 변합니다.

2.1. Import

import { SearchInput } from '@componique/react';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

import SearchInput from '@components/SearchInput/SearchInput';

function Example() {
  return (
    <SearchInput placeholder="Search..." />
  );
}

export default Example;

2.3. Changing the Width of the Input

SearchInput 컴포넌트의 너비는 동적으로 조정 가능합니다. 기본 너비는 w-80입니다.

import SearchInput from '@components/SearchInput/SearchInput';

function Example() {
  return (
    <SearchInput width="w-96" placeholder="Custom width..." />
  );
}

export default Example;

2.4. Props

SearchInput 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`placeholder`	검색 입력 필드에 표시될 플레이스홀더 텍스트를 설정합니다.	`string`	`"Search..."`
`activeColor`	활성화된 상태에서 버튼의 색상을 설정합니다.	`string`	`"bg-Basic"`
`width`	검색 입력 필드의 너비를 설정합니다.	`string`	`"w-80"`
`onSearch`	사용자가 검색어를 입력하고 확인을 클릭했을 때 호출되는 함수입니다.	`(value: string) => void`	`-`

2.5. Full Example

import SearchInput from '@components/SearchInput/SearchInput';

function Example() {
  const handleSearch = (value: string) => {
    console.log('Searched:', value);
  };

  return (
    <div>
      <SearchInput placeholder="Search something..." onSearch={handleSearch} />
      <SearchInput width="w-96" placeholder="Custom width..." />
    </div>
  );
}

export default Example;

3. SearchInput2

SearchInput2 컴포넌트는 검색 입력 필드가 포커스될 때 크기가 동적으로 확장되는 기능을 제공합니다. 크기와 스타일을 조정하여 다양한 스타일을 적용할 수 있습니다.

3.1. Import

import { SearchInput2 } from '@componique/react';

3.2. Usage

기본 사용 예제는 아래와 같습니다:

import SearchInput2 from '@components/SearchInput2/SearchInput2';

function Example() {
  return (
    <SearchInput2 placeholder="Search..." />
  );
}

export default Example;

3.3. Changing the Size of the Input

SearchInput2 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는medium입니다:

small: 작은 크기
medium: 중간 크기 (기본값)
large: 큰 크기

import SearchInput2 from '@components/SearchInput2/SearchInput2';

function Example() {
  return (
    <>
      <SearchInput2 placeholder="small size" size="small" />
      <SearchInput2 placeholder="medium size" size="medium" />
      <SearchInput2 placeholder="large size" size="large" />
    </>
  );
}

export default Example;

3.4. Props

SearchInput2 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`size`	Input의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`placeholder`	검색 입력 필드에 표시될 플레이스홀더 텍스트를 설정합니다.	`string`	`"Search..."`
`value`	Input의 값입니다.	`string`	`""`
`onChange`	값이 변경될 때 호출되는 핸들러입니다.	`(e: React.ChangeEvent<HTMLInputElement>)`	`-`

3.5. Full Example

import SearchInput2 from '@components/SearchInput2/SearchInput2';

function Example() {
  const [searchTerm, setSearchTerm] = useState("");

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value);
  };

  return (
    <div>
      <SearchInput2
        placeholder="Search..."
        value={searchTerm}
        onChange={handleSearchChange}
      />
      <SearchInput2 placeholder="small size" size="small" />
      <SearchInput2 placeholder="medium size" size="medium" />
      <SearchInput2 placeholder="large size" size="large" />
    </div>
  );
}

export default Example;

4. SearchInput3

SearchInput3 컴포넌트는 검색 입력 필드와 버튼을 함께 제공하는 UI 요소입니다.

4.1. Import

import { SearchInput3 } from '@componique/react';

4.2. Usage

import SearchInput3 from '@components/SearchInput2/SearchInput2';

  function Example() {
    return (
      <SearchInput3 placeholder="Search..." />
    );
  }

export default Example;

4.3. Props

크기(size)와 색상(color)를 조절할 수 있습니다.

Prop	Type	Default
`size`	`"small" \| "medium" \| "large"`	`"medium"`
`color`	`"Basic" \| "Primary" \| "Secondary" \| "Success" \| "Warning" \| "Danger"`	`"Basic"`

4.4. Full Example

import SearchInput3 from '@components/SearchInput3/SearchInput3';

function Example() {
  return (
    <div>
      <SearchInput3 size="small" color="Basic" placeholder="Small Search..." />
      <SearchInput3 size="medium" color="Primary" placeholder="Medium Search..." />
      <SearchInput3 size="large" color="Danger" placeholder="Large Search..." />
    </div>
  );
}

export default Example;

5. NumInput

NumInput 컴포넌트는 숫자를 입력하거나 증감할 수 있는 인터페이스를 제공합니다. 버튼을 사용해 숫자를 증가시키거나 감소시킬 수 있습니다.

5.1. Import

import { NumInput } from '@componique/react';

5.2. Usage

기본 사용 예제는 아래와 같습니다:

import NumInput from '@components/Input/NumInput';

function Example() {
  return (
    <NumInput />
  );
}

export default Example;

5.3. Props

NumInput 컴포넌트는 다음과 같은 props를 가집니다:

Prop	Description	Type	Default
`size`	입력 필드 및 버튼의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`color`	버튼의 색상을 설정합니다.	`"Basic" \| "Primary" \| "Secondary" \| "Success" \| "Warning" \| "Gray" \| "Danger"`	`"Basic"`
`value`	입력 필드의 초기 값입니다.	`string`	`"0"`
`onValueChange`	값이 변경될 때 호출되는 콜백 함수입니다.	`(value: string) => void`	`-`
`width`	컴포넌트의 너비를 설정합니다.	`string`	`"200px"`

5.4. Full Example

import NumInput from '@components/Input/NumInput';

function FullExample() {
  return (
    <NumInput
      size="large"
      color="Basic"
      value="5"
      width="250px"
      onValueChange={(value) => console.log("Updated value:", value)}
    />
  );
}

export default FullExample;

6. CurrencyInput

CurrencyInput 컴포넌트는 금액을 입력하거나 증감할 수 있는 인터페이스를 제공합니다. 사용자가 입력 필드를 통해 금액을 입력하거나, 증감 버튼을 통해 금액을 조정할 수 있습니다.

6.1. Import

import { CurrencyInput } from '@componique/react';

6.2. Usage

<CurrencyInput
  size="medium"
  color="Primary"
  value="$10.00"
  onValueChange={(value) => console.log("New value:", value)}
/>

6.3. Props

CurrencyInput 컴포넌트는 다음과 같은 props를 가집니다:

Prop	Description	Type	Default
`size`	입력 필드 및 버튼의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`color`	버튼의 색상을 설정합니다.	`"Basic" \| "Primary" \| "Secondary" \| "Success" \| "Warning" \| "Danger"`	`"Basic"`
`value`	입력 필드의 초기 금액 값입니다.	`string`	`"$0.00"`
`onValueChange`	값이 변경될 때 호출되는 콜백 함수입니다.	`(value: string) => void`	`-`
`width`	컴포넌트의 너비를 설정합니다.	`string`	`"200px"`

6.4. Full Example

import CurrencyInput from '@components/Input/CurrencyInput';

function FullExample() {
  return (
    <CurrencyInput
      size="large"
      color="Basic"
      value="$50.00"
      width="300px"
      onValueChange={(value) => console.log("Updated value:", value)}
    />
  );
}

export default FullExample;

7. DecimalInput

DecimalInput 컴포넌트는 사용자가 소수점이 포함된 숫자를 입력하거나 증감할 수 있도록 도와주는 인터페이스를 제공합니다. 사용자는 입력 필드를 통해 값을 입력하거나, 증감 버튼을 통해 값을 조정할 수 있습니다.

7.1. Import

import { DecimalInput } from '@componique/react';

7.2. Usage

<DecimalInput
  size="medium"
  color="Primary"
  value="10.00"
  onValueChange={(value) => console.log("New value:", value)}
/>

7.3. Props

DecimalInput 컴포넌트는 다음과 같은 props를 가집니다:

Prop	Description	Type	Default
`size`	입력 필드 및 버튼의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`color`	버튼의 색상을 설정합니다.	`"Basic" \| "Primary" \| "Secondary" \| "Success" \| "Warning" \| "Gray" \| "Danger"`	`"Basic"`
`value`	입력 필드의 초기 값입니다.	`string`	`"0.00"`
`onValueChange`	값이 변경될 때 호출되는 콜백 함수입니다.	`(value: string) => void`	`-`
`width`	컴포넌트의 너비를 설정합니다.	`string`	`"200px"`

7.4. Full Example

import DecimalInput from '@components/Input/DecimalInput';

function FullExample() {
  return (
    <DecimalInput
      size="large"
      color="Basic"
      value="50.00"
      width="300px"
      onValueChange={(value) => console.log("Updated value:", value)}
    />
  );
}

export default FullExample;

8. PinInput

PinInput 컴포넌트는 사용자에게 PIN 코드를 입력받기 위한 UI 요소입니다. 사용자는 각 입력 칸에 개별적으로 숫자를 입력할 수 있으며, 숫자가 입력되면 자동으로 다음 칸으로 포커스가 이동합니다.

8.1. Import

import { PinInput } from '@componique/react';

8.2. Usage

기본 사용 예제는 아래와 같습니다:

import PinInput from '@components/Input/PinInput';

function Example() {
  return (
    <PinInput length={4} />
  );
}

export default Example;

8.3. Customizing the PinInput

PinInput 컴포넌트는 다양한 옵션을 통해 커스터마이징 할 수 있습니다. 예를 들어, 필드의 개수, 변형 스타일, 비활성화 상태 등을 설정할 수 있습니다:

import PinInput from '@components/Input/PinInput';

function Example() {
  return (
    <PinInput length={6} variant="filled" disabled={true} />
    <PinInput customCharacter="🥳" />
  );
}

export default Example;

8.4 Props

PinInput 컴포넌트는 다음과 같은 props를 가집니다:

Prop	Description	Type	Default
`length`	PIN 입력 칸의 개수를 설정합니다.	`number`	`6`
`disabled`	입력 필드를 비활성화할지 여부를 설정합니다.	`boolean`	`false`
`formatter`	입력된 값을 형식화하기 위한 함수입니다.	`(value: string) => string`	`-`
`variant`	입력 필드의 스타일 변형을 설정합니다.	`"filled" \| "outline"`	`"outline"`
`customCharacter`	입력 대신 표시할 사용자 지정 문자를 설정합니다.	`string`	`""`
`onChange`	값이 변경될 때 호출되는 콜백 함수입니다.	`(value: string) => void`	`-`

8.5 Full Example

import PinInput from '@components/Input/PinInput';

function FullExample() {
  return (
    <PinInput
      length={4}
      variant="filled"
      formatter={(value) => value.toUpperCase()}
      onChange={(value) => console.log("Updated PIN:", value)}
    />
  );
}

export default FullExample;