Segmented Text Input

/**
 * @file ui:resident-number-field
 * @requires @seed-design/lynx-react@^1.1.0
 * @requires @seed-design/lynx-css@^1.1.0
 **/

import * as React from "@lynx-js/react";
import {
  Field as SeedField,
  SegmentedTextInput as SeedSegmentedTextInput,
} from "@seed-design/lynx-react";

type SegmentedTextInputRootRef = React.ComponentRef<typeof SeedSegmentedTextInput.Root>;
type FieldRootRef = React.ComponentRef<typeof SeedField.Root>;

export interface ResidentNumberInputProps
  extends Omit<SeedSegmentedTextInput.RootProps, "children"> {
  /**
   * 입력받을 자리 수.
   * - `6`: 생년월일 6자리만 입력받고 뒷자리는 점으로 표시합니다.
   * - `7`: 생년월일 6자리와 뒷자리 첫 번째 자리를 입력받습니다.
   * - `13`: 생년월일 6자리와 뒷자리 7자리를 입력받습니다. 뒷자리는 가려서 표시합니다.
   * @default 7
   */
  digits?: 6 | 7 | 13;
}

/**
 * 값은 입력 Segment 순서대로 `string[]`입니다. `digits=6`이면 `[생년월일]`, 그 밖에는 `[생년월일, 뒷자리]`입니다.
 */
export const ResidentNumberInput = React.forwardRef<
  SegmentedTextInputRootRef,
  ResidentNumberInputProps
>(({ digits = 7, ...otherProps }, ref) => {
  return (
    <SeedSegmentedTextInput.Root ref={ref} {...otherProps}>
      <SeedSegmentedTextInput.Segment
        accessibility-label="생년월일 6자리"
        placeholder="생년월일 6자리"
        length={6}
        autoComplete="bday"
        sizing="fill"
      />
      <SeedSegmentedTextInput.Separator> - </SeedSegmentedTextInput.Separator>
      {digits === 6 ? (
        <SeedSegmentedTextInput.Segment
          staticText={<SeedSegmentedTextInput.Dots count={7} />}
          sizing="fill"
          align="center"
        />
      ) : null}
      {digits === 7 ? (
        <SeedSegmentedTextInput.Segment
          accessibility-label="주민등록번호 뒷자리 첫 번째 자리"
          placeholder={<SeedSegmentedTextInput.Dots count={1} />}
          length={1}
          staticSuffix={<SeedSegmentedTextInput.Dots count={6} />}
          sizing="fill"
          align="center"
        />
      ) : null}
      {digits === 13 ? (
        <SeedSegmentedTextInput.Segment
          accessibility-label="주민등록번호 뒷자리 7자리"
          length={7}
          masked
          sizing="fill"
          align="center"
        />
      ) : null}
    </SeedSegmentedTextInput.Root>
  );
});
ResidentNumberInput.displayName = "ResidentNumberInput";

export interface ResidentNumberFieldProps extends ResidentNumberInputProps {
  label?: React.ReactNode;
  labelWeight?: SeedField.LabelProps["weight"];
  indicator?: React.ReactNode;
  description?: React.ReactNode;
  errorMessage?: React.ReactNode;
  showRequiredIndicator?: boolean;
  fieldRef?: React.Ref<FieldRootRef>;
}

/**
 * @see https://seed-design.io/lynx/components/segmented-text-input
 */
export const ResidentNumberField = React.forwardRef<
  SegmentedTextInputRootRef,
  ResidentNumberFieldProps
>(
  (
    {
      label,
      labelWeight,
      indicator,
      description,
      errorMessage,
      required,
      disabled,
      invalid,
      readOnly,
      showRequiredIndicator,
      fieldRef,
      ...otherProps
    },
    ref,
  ) => {
    const renderHeader = label != null || indicator != null;
    const renderDescription = description != null && !(invalid && errorMessage != null);
    const renderErrorMessage = invalid && errorMessage != null;
    const renderFooter = renderDescription || renderErrorMessage;

    return (
      <SeedField.Root
        ref={fieldRef}
        required={required}
        disabled={disabled}
        invalid={invalid}
        readOnly={readOnly}
      >
        {renderHeader ? (
          <SeedField.Header>
            <SeedField.Label weight={labelWeight}>
              {label}
              {showRequiredIndicator ? <SeedField.RequiredIndicator /> : null}
              {indicator != null ? (
                <SeedField.IndicatorText>{indicator}</SeedField.IndicatorText>
              ) : null}
            </SeedField.Label>
          </SeedField.Header>
        ) : null}
        <ResidentNumberInput ref={ref} {...otherProps} />
        {renderFooter ? (
          <SeedField.Footer>
            {renderDescription ? (
              <SeedField.Description>{description}</SeedField.Description>
            ) : null}
            {renderErrorMessage ? (
              <SeedField.ErrorMessage>{errorMessage}</SeedField.ErrorMessage>
            ) : null}
          </SeedField.Footer>
        ) : null}
      </SeedField.Root>
    );
  },
);
ResidentNumberField.displayName = "ResidentNumberField";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

/**
 * @file ui:card-number-field
 * @requires @seed-design/lynx-react@^1.1.0
 * @requires @seed-design/lynx-css@^1.1.0
 **/

import * as React from "@lynx-js/react";
import {
  Field as SeedField,
  SegmentedTextInput as SeedSegmentedTextInput,
} from "@seed-design/lynx-react";

type SegmentedTextInputRootRef = React.ComponentRef<typeof SeedSegmentedTextInput.Root>;
type FieldRootRef = React.ComponentRef<typeof SeedField.Root>;

const SEGMENT_LABELS = [
  "카드번호 1-4번째 자리",
  "카드번호 5-8번째 자리",
  "카드번호 9-12번째 자리",
  "카드번호 13-16번째 자리",
];

export interface CardNumberInputProps extends Omit<SeedSegmentedTextInput.RootProps, "children"> {
  /**
   * 가려서 입력받을 뒷자리 수. 가린 Segment는 붙여넣기로 채우지 않습니다.
   * @default 8
   */
  maskedDigits?: 4 | 8;
  /**
   * 입력 끝에 표시할 요소. 카드사 로고 등을 넣습니다.
   */
  suffix?: React.ReactNode;
}

/**
 * 4자리씩 네 Segment로 카드번호를 입력받습니다. 값은 `string[]`(4개)입니다.
 */
export const CardNumberInput = React.forwardRef<SegmentedTextInputRootRef, CardNumberInputProps>(
  ({ maskedDigits = 8, suffix, ...otherProps }, ref) => {
    const maskedFrom = SEGMENT_LABELS.length - maskedDigits / 4;

    return (
      <SeedSegmentedTextInput.Root ref={ref} {...otherProps}>
        {SEGMENT_LABELS.map((label, i) => {
          const masked = i >= maskedFrom;

          return (
            <React.Fragment key={label}>
              {i > 0 ? (
                <SeedSegmentedTextInput.Separator> - </SeedSegmentedTextInput.Separator>
              ) : null}
              <SeedSegmentedTextInput.Segment
                accessibility-label={label}
                placeholder={masked ? undefined : "0000"}
                length={4}
                masked={masked}
              />
            </React.Fragment>
          );
        })}
        {suffix != null ? (
          <SeedSegmentedTextInput.Suffix>{suffix}</SeedSegmentedTextInput.Suffix>
        ) : null}
      </SeedSegmentedTextInput.Root>
    );
  },
);
CardNumberInput.displayName = "CardNumberInput";

export interface CardNumberFieldProps extends CardNumberInputProps {
  label?: React.ReactNode;
  labelWeight?: SeedField.LabelProps["weight"];
  indicator?: React.ReactNode;
  description?: React.ReactNode;
  errorMessage?: React.ReactNode;
  showRequiredIndicator?: boolean;
  fieldRef?: React.Ref<FieldRootRef>;
}

/**
 * @see https://seed-design.io/lynx/components/segmented-text-input
 */
export const CardNumberField = React.forwardRef<SegmentedTextInputRootRef, CardNumberFieldProps>(
  (
    {
      label,
      labelWeight,
      indicator,
      description,
      errorMessage,
      required,
      disabled,
      invalid,
      readOnly,
      showRequiredIndicator,
      fieldRef,
      ...otherProps
    },
    ref,
  ) => {
    const renderHeader = label != null || indicator != null;
    const renderDescription = description != null && !(invalid && errorMessage != null);
    const renderErrorMessage = invalid && errorMessage != null;
    const renderFooter = renderDescription || renderErrorMessage;

    return (
      <SeedField.Root
        ref={fieldRef}
        required={required}
        disabled={disabled}
        invalid={invalid}
        readOnly={readOnly}
      >
        {renderHeader ? (
          <SeedField.Header>
            <SeedField.Label weight={labelWeight}>
              {label}
              {showRequiredIndicator ? <SeedField.RequiredIndicator /> : null}
              {indicator != null ? (
                <SeedField.IndicatorText>{indicator}</SeedField.IndicatorText>
              ) : null}
            </SeedField.Label>
          </SeedField.Header>
        ) : null}
        <CardNumberInput ref={ref} {...otherProps} />
        {renderFooter ? (
          <SeedField.Footer>
            {renderDescription ? (
              <SeedField.Description>{description}</SeedField.Description>
            ) : null}
            {renderErrorMessage ? (
              <SeedField.ErrorMessage>{errorMessage}</SeedField.ErrorMessage>
            ) : null}
          </SeedField.Footer>
        ) : null}
      </SeedField.Root>
    );
  },
);
CardNumberField.displayName = "CardNumberField";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */