Field

import type { ComponentProps } from 'react';
import { Field } from '@mildang/design-system/Form';
import { Input } from '@mildang/design-system/Input';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    label: 'Title',
    required: true,
    description: 'Description',
    helpText: 'Help Text',
    helpVariant: 'warning',
    helpIcon: true,
  }) } as ComponentProps<typeof Field>;

const FieldPlaygroundExampleRender = (args: ComponentProps<typeof Field>) => (
    <div style={{ width: 320 }}>
      <Field fullWidth {...args}>
        <Input fullWidth placeholder="Placeholder" />
      </Field>
    </div>
  );

export default function FieldPlaygroundExample(props: Partial<ComponentProps<typeof Field>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Field>;
  return FieldPlaygroundExampleRender(mergedProps);
}

import { Box } from '@mildang/styled-system/jsx';
import { Field } from '@mildang/design-system/Form';
import { Input } from '@mildang/design-system/Input';
import { TextArea } from '@mildang/design-system/TextArea';
import { Select, createSelectCollection, SelectItem } from '@mildang/design-system/Select';
import { Checkbox } from '@mildang/design-system/Checkbox';
import { ToggleSwitch } from '@mildang/design-system/ToggleSwitch';
import { RadioGroup } from '@mildang/design-system/Radio';
import { Radio } from '@mildang/design-system/Radio';
import { ButtonRadioGroup } from '@mildang/design-system/Radio';
import { SegmentedControl } from '@mildang/design-system/SegmentedControl';
import { RatingGroup } from '@mildang/design-system/RatingGroup';
import { useState } from 'react';
import { FileType } from '@mildang/design-system/FileField';
import { FileFieldBase } from '@mildang/design-system/FileField';
import { TimeFieldBase } from '@mildang/design-system/TimeField';
import { DateRangeValue } from '@mildang/design-system/DateRangePicker';
import { DateRangePicker } from '@mildang/design-system/DateRangePicker';
import { DatePicker } from '@mildang/design-system/DatePicker';
import { useFilter, useListCollection } from '@ark-ui/react';
import { Combobox } from '@mildang/design-system/Combobox';

const OPTIONS = [
  { label: '옵션 A', value: 'a' },
  { label: '옵션 B', value: 'b' },
  { label: '옵션 C', value: 'c' },
];

const selectCollection = createSelectCollection<SelectItem>({ items: OPTIONS });

/**
 * 아래 샘플 컨트롤들은 값 상태나 collection 훅이 필요해 컴포넌트로 분리했다.
 * Field 가 자동 주입하는 `id` 를 그대로 받아 실제 입력 요소까지 내려보내 라벨과 연결한다.
 */
type SampleControlProps = { id?: string };

const ComboboxSample = ({ id }: SampleControlProps) => {
  const { contains } = useFilter({ sensitivity: 'base' });
  const { collection, filter } = useListCollection({
    initialItems: OPTIONS,
    itemToString: (item) => item.label,
    itemToValue: (item) => item.value,
    filter: (_itemText: string, filterText: string, item: (typeof OPTIONS)[number]) =>
      contains(item.label, filterText),
  });

  return (
    <Combobox
      ids={{ input: id }}
      collection={collection}
      filter={filter}
      placeholder="검색해서 선택"
      fullWidth
    >
      {collection.items.map((item) => (
        <Combobox.Option key={item.value} item={item.value}>
          <Combobox.OptionLabel>{item.label}</Combobox.OptionLabel>
        </Combobox.Option>
      ))}
    </Combobox>
  );
};

const DatePickerSample = ({ id }: SampleControlProps) => {
  const [value, setValue] = useState<string>();

  return (
    <DatePicker
      value={value}
      onValueChange={(next) => setValue(next ?? undefined)}
      inputProps={{ id, fullWidth: true }}
    />
  );
};

const DateRangePickerSample = ({ id }: SampleControlProps) => {
  const [value, setValue] = useState<DateRangeValue>();

  return (
    <DateRangePicker
      value={value}
      onValueChange={(next) => setValue(next ?? undefined)}
      inputProps={{ id, fullWidth: true }}
    />
  );
};

const TimeSample = ({ id }: SampleControlProps) => {
  const [value, setValue] = useState('');

  return <TimeFieldBase id={id} value={value} onChange={setValue} fullWidth />;
};

const FileSample = ({ id }: SampleControlProps) => {
  const [value, setValue] = useState<FileType[]>([]);

  return <FileFieldBase id={id} value={value} onChange={setValue} fullWidth />;
};

const FieldControlTypesExample = () => (
    <Box
      display="grid"
      gridTemplateColumns="repeat(auto-fit, minmax(300px, 320px))"
      gap="24"
      alignItems="start"
      maxWidth="680px"
    >
      <Field label="input" required description="Description" helpText="Help Text">
        <Input placeholder="Placeholder" fullWidth />
      </Field>
      <Field label="textarea">
        <TextArea placeholder="여러 줄 입력" />
      </Field>
      <Field label="select" required>
        <Select collection={selectCollection} placeholder="옵션을 선택하세요" fullWidth>
          {selectCollection.items.map((item) => (
            <Select.Option key={item.value} item={item} />
          ))}
        </Select>
      </Field>
      <Field label="combobox" description="입력해서 좁혀 찾는 선택">
        <ComboboxSample />
      </Field>
      <Field label="checkbox">
        <Checkbox label="약관에 동의합니다" description="필수 항목입니다" />
      </Field>
      <Field label="toggleSwitch">
        <ToggleSwitch size="md" label="공개" description="Description" />
      </Field>
      <Field label="radioGroup" required helpText="Help Text">
        <RadioGroup orientation="horizontal" defaultValue="a">
          <Radio value="a" label="옵션 A" />
          <Radio value="b" label="옵션 B" />
        </RadioGroup>
      </Field>
      <Field label="buttonRadioGroup" description="선택지를 버튼으로 노출">
        <ButtonRadioGroup
          name="field-control-types-button-radio"
          orientation="horizontal"
          defaultValue="a"
          options={OPTIONS}
        />
      </Field>
      <Field label="segmentedControl">
        <SegmentedControl defaultValue="a" fullWidth aria-label="옵션 선택">
          {OPTIONS.map((option) => (
            <SegmentedControl.Item key={option.value} value={option.value}>
              {option.label}
            </SegmentedControl.Item>
          ))}
        </SegmentedControl>
      </Field>
      <Field label="ratingGroup" helpText="1~5점">
        <RatingGroup count={5} defaultValue={3} name="field-control-types-rating">
          <RatingGroup.Control>
            {Array.from({ length: 5 }).map((_, index) => (
              <RatingGroup.Star key={index} index={index + 1} aria-label={`${index + 1}점`} />
            ))}
            <RatingGroup.HiddenInput />
          </RatingGroup.Control>
        </RatingGroup>
      </Field>
      <Field label="datePicker" required>
        <DatePickerSample />
      </Field>
      <Field label="dateRangePicker">
        <DateRangePickerSample />
      </Field>
      <Field label="time">
        <TimeSample />
      </Field>
      <Field label="file" helpText="10MB 이하">
        <FileSample />
      </Field>
    </Box>
  );

export default FieldControlTypesExample;

import { Field } from '@mildang/design-system/Form';
import { ToggleSwitch } from '@mildang/design-system/ToggleSwitch';
import { Button } from '@mildang/design-system/Button';
import { Input } from '@mildang/design-system/Input';

const FieldContentSlotsExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: 360 }}>
      <Field
        label="공개 여부"
        required
        description="검색에 노출됩니다"
        helpText="Help Text"
        sideContent={<ToggleSwitch size="md" />}
      />
      <Field
        label="사업자 등록번호"
        required
        description="숫자만 입력하세요"
        helpText="10자리 번호를 확인해주세요"
        sideContent={<Button variant="secondary">중복 확인</Button>}
      >
        <Input placeholder="0000000000" fullWidth />
      </Field>
    </div>
  );

export default FieldContentSlotsExample;

import { Field } from '@mildang/design-system/Form';
import { Tooltip } from '@mildang/design-system/Tooltip';
import { IconButton } from '@mildang/design-system/IconButton';
import HelpCircleOutline from '@mildang/icons/react/help-circle-outline';
import { Input } from '@mildang/design-system/Input';
import { Text } from '@mildang/design-system/Text';

const FieldWithSideContentExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, width: 320 }}>
      <Field
        label="사업자 등록번호"
        required
        helpText="숫자 10자리"
        sideContent={
          <Tooltip content="'-' 없이 숫자 10자리만 입력하세요.">
            <IconButton size="sm" variant="tertiary" aria-label="도움말">
              <HelpCircleOutline width={16} />
            </IconButton>
          </Tooltip>
        }
      >
        <Input placeholder="0000000000" fullWidth />
      </Field>

      <Field
        label="닉네임"
        description="다른 사용자에게 보여지는 이름"
        sideContent={
          <Text variant="caption-lg-medium" color="neutral.text.lowest">
            선택사항
          </Text>
        }
      >
        <Input placeholder="닉네임 입력" fullWidth />
      </Field>
    </div>
  );

export default FieldWithSideContentExample;

import { HStack, VStack } from '@mildang/styled-system/jsx';
import { Field } from '@mildang/design-system/Form';
import { Input } from '@mildang/design-system/Input';
import { Button } from '@mildang/design-system/Button';
import { ToggleSwitch } from '@mildang/design-system/ToggleSwitch';
import { IconButton } from '@mildang/design-system/IconButton';
import DeleteIcon from '@mildang/icons/react/delete';

const FieldFieldItemCompositionExample = () => (
    <VStack gap="32" alignItems="stretch" width="360px">
      {/* ① 컨트롤 여러 개 + 액션 버튼 — 주소 검색으로 채우고 상세주소만 직접 입력 */}
      <Field
        fullWidth
        label="주소 입력"
        required
        description="상세 정보를 입력해주세요."
        htmlFor="field-item-address"
      >
        <HStack gap="8" alignItems="center" width="100%">
          <Input id="field-item-address" fullWidth placeholder="주소" readOnly />
          <Button variant="secondary" flexShrink="0">
            주소 찾기
          </Button>
        </HStack>
        <Input fullWidth placeholder="우편번호" readOnly />
        <Input fullWidth placeholder="상세주소 입력" />
      </Field>

      {/* ② 상단 우측 슬롯 — 본문 없이 컨트롤만 배치 가능 */}
      <Field
        fullWidth
        label="공개 여부"
        required
        description="검색에 노출됩니다."
        sideContent={<ToggleSwitch size="md" />}
      />

      {/* ③ 카드로 묶은 반복 행 — 행마다 컨트롤 + 삭제 버튼 */}
      <Field
        fullWidth
        label="주소 입력"
        required
        helpText="Help Text"
        helpVariant="error"
        helpIcon
        htmlFor="field-item-row-0"
      >
        <VStack gap="8" alignItems="stretch">
          {[0, 1, 2].map((index) => (
            <HStack key={index} gap="8" alignItems="center">
              <Input id={`field-item-row-${index}`} fullWidth placeholder="placeholder" />
              <IconButton variant="tertiary" aria-label={`${index + 1}번째 주소 삭제`}>
                <DeleteIcon width={20} />
              </IconButton>
            </HStack>
          ))}
        </VStack>
      </Field>
    </VStack>
  );

export default FieldFieldItemCompositionExample;

import { Field } from '@mildang/design-system/Form';
import { FormLabel } from '@mildang/design-system/FormLabel';
import { Input } from '@mildang/design-system/Input';
import { default as HelpText } from '@mildang/design-system/HelpText';

const FieldComposeExample = () => (
    <div style={{ width: 320 }}>
      <Field>
        <FormLabel htmlFor="fc-compose">Label</FormLabel>
        <Input id="fc-compose" placeholder="Placeholder" fullWidth />
        <HelpText>도움말 텍스트</HelpText>
      </Field>
    </div>
  );

export default FieldComposeExample;