1. Autocomplete

Autocomplete 컴포넌트는 사용자가 텍스트를 입력할 때 관련 옵션을 실시간으로 필터링하여 제공하는 컴포넌트입니다. 다양한 스타일과 모양을 지원합니다.

1.1. Import

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

1.2. Usage

아래는 Autocomplete 컴포넌트의 기본 사용 예제입니다:

선택된 옵션:

import { Autocomplete } from '@components/Autocomplete/Autocomplete';
import { useState } from 'react';

function Example() {
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const handleSelect = (option: string) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"];

  return (
    <>
      <Autocomplete
        options={options}
        placeholder="Search fruits..."
        onSelect={handleSelect}
      />
      <p>선택된 옵션: {selectedOption}</p>
    </>
  );
}

export default Example;

1.3. Changing the Variant of the Autocomplete

Autocomplete 컴포넌트는 다양한 스타일로 제공됩니다. 기본 스타일은 outlined입니다:

outlined: 외곽선이 있는 스타일
filled: 배경색이 채워진 스타일
borderless: 외곽선이 없는 스타일

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

function Example() {
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const handleSelect = (option: string) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"];

  return (
    <>
      <Autocomplete
        options={options}
        placeholder="Outlined style"
        variant="outlined"
        onSelect={handleSelect}
      />
      <Autocomplete
        options={options}
        placeholder="Filled style"
        variant="filled"
        onSelect={handleSelect}
      />
      <Autocomplete
        options={options}
        placeholder="Borderless style"
        variant="borderless"
        onSelect={handleSelect}
      />
    </>
  );
}

export default Example;

1.4. Props

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

Prop	Description	Type	Default
`options`	사용자가 선택할 수 있는 옵션 목록입니다.	`string[]`	N/A
`placeholder`	입력 필드에 표시되는 플레이스홀더 텍스트입니다.	`string`	`"Search..."`
`variant`	입력 필드의 스타일을 설정합니다.	`"outlined" \| "filled" \| "borderless"`	`"outlined"`
`radius`	입력 필드의 모서리 반경을 설정합니다.	`"small" \| "medium" \| "large" \| "none" \| "full"`	`"medium"`
`width`	컴포넌트의 너비를 설정합니다.	`string`	`"300px"`
`height`	입력 필드의 높이를 설정합니다.	`string`	`"auto"`
`noOptionsMessage`	필터링된 옵션이 없을 때 표시되는 메시지입니다.	`string`	`"No results found"`
`onSelect`	옵션이 선택될 때 호출되는 함수입니다.	`(selectedOption: string) => void`	N/A

1.5. Full Example

import { Autocomplete } from '@components/Autocomplete/Autocomplete';
import { useState } from 'react';

function Example() {
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const handleSelect = (option: string) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"];

  return (
    <>
      <Autocomplete
        options={options}
        placeholder="Search fruits..."
        onSelect={handleSelect}
        variant="filled"
        radius="large"
        width="400px"
      />
      <p>선택된 옵션: {selectedOption}</p>
    </>
  );
}

export default Example;

2. ButtonAutocomplete

ButtonAutocomplete 컴포넌트는 사용자가 텍스트를 입력할 때 관련 옵션을 필터링하여 제공하며, 입력 필드에 검색 버튼이 포함된 형태입니다. 다양한 스타일과 색상을 지원합니다.

2.1. Import

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

2.2. Usage

아래는 ButtonAutocomplete 컴포넌트의 기본 사용 예제입니다:

선택된 옵션:

import { ButtonAutocomplete } from '@components/Autocomplete/ButtonAutocomplete';
import { useState } from 'react';

function Example() {
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const handleSelect = (option: string) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"];

  return (
    <>
      <ButtonAutocomplete
        options={options}
        placeholder="Search fruits..."
        onSelect={handleSelect}
      />
      <p>선택된 옵션: {selectedOption}</p>
    </>
  );
}

export default Example;

2.3. Changing the Color and Radius of the ButtonAutocomplete

ButtonAutocomplete 컴포넌트는 다양한 색상과 모서리 반경을 지원합니다. 기본 색상은 Basic이고, 기본 모서리 반경은 medium입니다:

color: Basic, Primary, Secondary, Success, Warning, Danger
radius: small, medium, large, full, none

import { ButtonAutocomplete } from '@components/Autocomplete/ButtonAutocomplete';

function Example() {
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const handleSelect = (option: string) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"];

  return (
    <>
      <ButtonAutocomplete
        options={options}
        placeholder="Search with Basic color"
        color="Basic"
        radius="medium"
        onSelect={handleSelect}
      />
      <ButtonAutocomplete
        options={options}
        placeholder="Search with Primary color"
        color="Primary"
        radius="large"
        onSelect={handleSelect}
      />
      <ButtonAutocomplete
        options={options}
        placeholder="Search with Danger color"
        color="Danger"
        radius="full"
        onSelect={handleSelect}
      />
    </>
  );
}

export default Example;

2.4. Props

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

Prop	Description	Type	Default
`options`	사용자가 선택할 수 있는 옵션 목록입니다.	`string[]`	N/A
`placeholder`	입력 필드에 표시되는 플레이스홀더 텍스트입니다.	`string`	`"Search..."`
`radius`	입력 필드의 모서리 반경을 설정합니다.	`"small" \| "medium" \| "large" \| "none" \| "full"`	`"medium"`
`width`	컴포넌트의 너비를 설정합니다.	`string`	`"300px"`
`height`	입력 필드의 높이를 설정합니다.	`string`	`"auto"`
`noOptionsMessage`	필터링된 옵션이 없을 때 표시되는 메시지입니다.	`string`	`"No results found"`
`color`	검색 버튼과 포커스된 입력 필드의 색상을 설정합니다.	`"Basic" \| "Primary" \| "Secondary" \| "Success" \| "Warning" \| "Danger"`	`"Basic"`
`onSelect`	옵션이 선택될 때 호출되는 함수입니다.	`(selectedOption: string) => void`	N/A

2.5. Full Example

import { ButtonAutocomplete } from '@components/Autocomplete/ButtonAutocomplete';
import { useState } from 'react';

function Example() {
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const handleSelect = (option: string) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"];

  return (
    <>
      <ButtonAutocomplete
        options={options}
        placeholder="Search fruits..."
        onSelect={handleSelect}
        color="Primary"
        radius="large"
        width="400px"
      />
      <p>선택된 옵션: {selectedOption}</p>
    </>
  );
}

export default Example;

3. GroupedAutocomplete

GroupedAutocomplete 컴포넌트는 그룹화된 항목을 자동 완성할 수 있는 기능을 제공하는 입력 필드입니다. 사용자 입력에 따라 관련 항목을 실시간으로 필터링하며, 그룹별로 정렬하여 표시합니다.

3.1. Import

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

3.2. Usage

아래는 GroupedAutocomplete 컴포넌트의 기본 사용 예제입니다:

선택된 옵션:

import { GroupedAutocomplete } from '@components/Autocomplete/GroupedAutocomplete';
import { useState } from 'react';

function Example() {
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const handleSelect = (option: string) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options = [
    {
      groupName: "Fruits",
      items: ["Apple", "Banana", "Cherry"],
    },
    {
      groupName: "Vegetables",
      items: ["Carrot", "Lettuce", "Spinach"],
    },
  ];

  return (
    <>
      <GroupedAutocomplete
        options={options}
        placeholder="Search items..."
        onSelect={handleSelect}
      />
      <p>선택된 옵션: {selectedOption}</p>
    </>
  );
}

export default Example;

3.3. Changing the Border and Radius of the GroupedAutocomplete

GroupedAutocomplete 컴포넌트는 다양한 테두리 두께와 모서리 반경을 지원합니다. 기본 테두리 두께는 medium이고, 기본 모서리 반경은 medium입니다:

border: none, thin, medium, thick
radius: none, small, medium, large, full

import { GroupedAutocomplete } from '@components/Autocomplete/GroupedAutocomplete';

function Example() {
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const handleSelect = (option: string) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options = [
    {
      groupName: "Fruits",
      items: ["Apple", "Banana", "Cherry"],
    },
    {
      groupName: "Vegetables",
      items: ["Carrot", "Lettuce", "Spinach"],
    },
  ];

  return (
    <>
      <GroupedAutocomplete
        options={options}
        placeholder="Search with thin border"
        border="thin"
        radius="small"
        onSelect={handleSelect}
      />
      <GroupedAutocomplete
        options={options}
        placeholder="Search with thick border"
        border="thick"
        radius="large"
        onSelect={handleSelect}
      />
      <GroupedAutocomplete
        options={options}
        placeholder="Search with no border"
        border="none"
        radius="full"
        onSelect={handleSelect}
      />
    </>
  );
}

export default Example;

3.4. Props

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

Prop	Description	Type	Default
`options`	그룹화된 항목 목록입니다. 각 그룹은 그룹명과 항목 배열로 구성됩니다.	`DropDownGroupedProps[]`	N/A
`placeholder`	입력 필드에 표시되는 플레이스홀더 텍스트입니다.	`string`	`"Search..."`
`onSelect`	항목이 선택될 때 호출되는 함수입니다.	`(selectedOption: string) => void`	N/A
`radius`	입력 필드의 모서리 반경을 설정합니다.	`"none" \| "small" \| "medium" \| "large" \| "full"`	`"medium"`
`border`	입력 필드의 테두리 두께를 설정합니다.	`"none" \| "thin" \| "medium" \| "thick"`	`"medium"`
`width`	컴포넌트의 너비를 설정합니다.	`string`	`"w-64"`
`noOptionsMessage`	필터링된 옵션이 없을 때 표시되는 메시지입니다.	`string`	`"No results found"`

3.5. Full Example

import { GroupedAutocomplete } from '@components/Autocomplete/GroupedAutocomplete';
import { useState } from 'react';

function Example() {
  const [selectedOption, setSelectedOption] = useState<string | null>(null);

  const handleSelect = (option: string) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options = [
    {
      groupName: "Fruits",
      items: ["Apple", "Banana", "Cherry"],
    },
    {
      groupName: "Vegetables",
      items: ["Carrot", "Lettuce", "Spinach"],
    },
  ];

  return (
    <>
      <GroupedAutocomplete
        options={options}
        placeholder="Search items..."
        onSelect={handleSelect}
        border="thin"
        radius="large"
        width="w-72"
      />
      <p>선택된 옵션: {selectedOption}</p>
    </>
  );
}

export default Example;

4. LabelAutocomplete

LabelAutocomplete 컴포넌트는 입력된 값을 기반으로 사용자가 선택할 수 있는 항목 목록을 제공하는 자동 완성 입력 필드입니다. 옵션은 문자열 또는 라벨-값 쌍의 형태로 제공될 수 있습니다.

4.1. Import

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

4.2. Usage

아래는 LabelAutocomplete 컴포넌트의 기본 사용 예제입니다:

선택된 옵션: null

import { LabelAutocomplete } from '@components/Autocomplete/LabelAutocomplete';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState("");
  const [selectedOption, setSelectedOption] = useState<string | Option | null>(null);

  const handleSelect = (option: string | Option) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options: Array<string | Option> = [
    "Apple",
    "Banana",
    { label: "Cherry", value: "cherry" },
    { label: "Grapes", value: "grapes" },
    "Orange",
  ];

  return (
    <>
      <LabelAutocomplete
        options={options}
        value={value}
        onChange={setValue}
        onSelect={handleSelect}
        placeholder="Search fruits..."
      />
      <p>선택된 옵션: {JSON.stringify(selectedOption)}</p>
    </>
  );
}

export default Example;

4.3. Changing the Size of the Autocomplete

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

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

import { LabelAutocomplete } from '@components/Autocomplete/LabelAutocomplete';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState("");
  const [selectedOption, setSelectedOption] = useState<string | Option | null>(null);

  const handleSelect = (option: string | Option) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options: Array<string | Option> = [
    "Apple",
    "Banana",
    { label: "Cherry", value: "cherry" },
    { label: "Grapes", value: "grapes" },
    "Orange",
  ];

  return (
    <>
      <LabelAutocomplete
        options={options}
        value={value}
        onChange={setValue}
        onSelect={handleSelect}
        size="small"
        placeholder="Search (small)..."
      />
      <LabelAutocomplete
        options={options}
        value={value}
        onChange={setValue}
        onSelect={handleSelect}
        size="large"
        placeholder="Search (large)..."
      />
    </>
  );
}

export default Example;

4.4. Props

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

Prop	Description	Type	Default
`size`	입력 필드의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`options`	자동 완성에서 사용할 옵션 목록입니다. 문자열 또는 라벨-값 쌍으로 제공될 수 있습니다.	`Array<string \| Option>`	N/A
`value`	현재 입력 필드에 표시되는 값입니다.	`string`	N/A
`onChange`	입력 필드 값이 변경될 때 호출되는 함수입니다.	`(value: string) => void`	N/A
`onSelect`	옵션이 선택될 때 호출되는 함수입니다.	`(selectedOption: string \| Option) => void`	N/A
`placeholder`	입력 필드에 표시되는 플레이스홀더 텍스트입니다.	`string`	`"Search..."`

4.5. Full Example

import { LabelAutocomplete } from '@components/Autocomplete/LabelAutocomplete';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState("");
  const [selectedOption, setSelectedOption] = useState<string | Option | null>(null);

  const handleSelect = (option: string | Option) => {
    setSelectedOption(option);
    console.log("Selected option:", option);
  };

  const options: Array<string | Option> = [
    "Apple",
    "Banana",
    { label: "Cherry", value: "cherry" },
    { label: "Grapes", value: "grapes" },
    "Orange",
  ];

  return (
    <>
      <LabelAutocomplete
        options={options}
        value={value}
        onChange={setValue}
        onSelect={handleSelect}
        placeholder="Search fruits..."
      />
      <p>선택된 옵션: {JSON.stringify(selectedOption)}</p>
    </>
  );
}

export default Example;