LH-367/input

packages/travelmakers-design-core/src/components/Input/Input.style.ts

@@ -0,0 +1,92 @@
+import { TmColor, createStyles } from "@travelmakers-design-v2/styles";
+import { Props } from "./Input";
+
+const getBorderColor = (
+  colors: Record<TmColor, string>,
+  isError: Props["isError"],
+  color: string
+) => (isError ? colors.error : color);
+
+const getStatusStyle = (
+  colors: Record<TmColor, string>,
+  isError: Props["isError"],
+  defaultColor?: string
+) => {
+  if (isError === false) return colors.secondary1;
+  if (isError === true) return colors.error;
+  return defaultColor ?? "";
+};
+
+export default createStyles(
+  (
+    theme,
+    { subfix, isError }: { subfix?: Props["subfix"]; isError: Props["isError"] }
+  ) => {
+    const { typography, colors, spacing, radius } = theme;
+
+    return {
+      root: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        rowGap: spacing.spacing5,
+      },
+      focus: {
+        border: `1px solid ${getBorderColor(colors, isError, colors.primary)}`,
+      },
+      disabled: {
+        backgroundColor: colors.surface,
+        userSelect: "none",
+      },
+      container: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        minWidth: "328px",
+        minHeight: "44px",
+        padding: `0 ${spacing.spacing30}`,
+        border: `1px solid ${getBorderColor(colors, isError, colors.outline)}`,
+        borderRadius: radius.radius20,
+        overflow: "hidden",
+      },
+      input: {
+        ...typography.body2,
+        padding: 0,
+        color: colors.primary2,
+        border: 0,
+        outline: 0,
+        width: subfix ? "100%" : "auto",
+
+        ["&::placeholder"]: {
+          color: colors.primary3,
+        },
+
+        ["&:focus"]: {
+          color: colors.primary1,
+          borderColor: getBorderColor(colors, isError, colors.primary),
+        },
+
+        ["&:disabled"]: {
+          color: colors.primary3,
+          backgroundColor: colors.surface,
+
+          ["&::placeholder"]: {
+            color: colors.primary4,
+          },
+        },
+      },
+      label: { ...typography.body2, color: colors.primary1 },
+      subfix: {
+        ...typography.body2,
+        paddingLeft: spacing.spacing30,
+        color: getStatusStyle(colors, isError, colors.primary3),
+        flexShrink: 0,
+      },
+      feedback: {
+        ...typography.body3,
+        color: getStatusStyle(colors, isError, colors.primary3),
+        fontWeight: 400,
+      },
+    };
+  }
+);

packages/travelmakers-design-core/src/components/Input/Input.tsx

@@ -0,0 +1,122 @@
+import { PolymorphicRef } from "@travelmakers-design-v2/styles";
+import { forwardRef, useState } from "react";
+import { View } from "../View";
+import useStyles from "./Input.style";
+import { InputComponent, InputProps } from "./Input.type";
+
+export interface Props extends React.HTMLAttributes<HTMLInputElement> {
+  label?: string;
+  subfix?: string | number;
+  feedback?: string;
+  isError?: boolean;
+}
+
+let defaultId = 0;
+
+export const Input: InputComponent & {
+  displayName?: string;
+} = forwardRef(
+  <C extends React.ElementType = "input">(
+    {
+      label,
+      subfix,
+      feedback,
+      isError = null,
+      value,
+      placeholder = "정보를 입력해주세요.",
+      autoComplete,
+      onClick,
+      onBlur,
+      onChange,
+      className,
+      ...props
+    }: InputProps<C>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const [inputValue, setInputValue] = useState(value ?? "");
+    const [isFocus, setIsFocus] = useState(false);
+    const { classes, cx } = useStyles({ subfix, isError });
+    const [id] = useState(() => String(defaultId++));
+    const elementId = `tm-input-${id}`;
+
+    const onClickHandler = (e: React.MouseEvent<HTMLInputElement>) => {
+      setIsFocus(true);
+      onClick && onClick(e);
+    };
+
+    const onBlurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocus(false);
+      onBlur && onBlur(e);
+    };
+
+    const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setInputValue(e.target.value);
+      onChange && onChange(e);
+    };
+
+    const inputContent = () => {
+      if (subfix) {
+        return (
+          <div
+            className={cx(
+              classes.container,
+              { [classes.focus]: isFocus },
+              { [classes.disabled]: props.disabled }
+            )}
+            aria-readonly={props.disabled}
+          >
+            <View<React.ElementType>
+              component={"input"}
+              className={classes.input}
+              id={elementId}
+              type={"text"}
+              ref={ref}
+              placeholder={placeholder}
+              autoComplete={autoComplete ?? "off"}
+              onClick={onClickHandler}
+              onBlur={onBlurHandler}
+              onChange={onChangeHandler}
+              value={inputValue}
+              {...props}
+            />
+            <div className={classes.subfix} aria-readonly={props.disabled}>
+              {subfix}
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <View<React.ElementType>
+          component={"input"}
+          className={cx(classes.input, classes.container)}
+          id={elementId}
+          type={"text"}
+          ref={ref}
+          placeholder={placeholder}
+          autoComplete={autoComplete ?? "off"}
+          onClick={onClick}
+          onBlur={onBlur}
+          onChange={onChangeHandler}
+          value={inputValue}
+          aria-readonly={props.disabled}
+          {...props}
+        />
+      );
+    };
+
+    return (
+      <div className={cx(classes.root, className)}>
+        {label && (
+          <label className={classes.label} htmlFor={elementId}>
+            {label}
+          </label>
+        )}
+        {inputContent()}
+        {feedback && <strong className={classes.feedback}>{feedback}</strong>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";

packages/travelmakers-design-core/src/components/Input/Input.type.ts

@@ -0,0 +1,20 @@
+import {
+  ClassNames,
+  PolymorphicComponentProps,
+  TmComponentProps,
+} from "@travelmakers-design-v2/styles";
+import { Props } from "./Input";
+import useStyles from "./Input.style";
+
+type InputStylesNames = ClassNames<typeof useStyles>;
+
+interface SharedInputProps extends Props, TmComponentProps<InputStylesNames> {}
+
+export type InputProps<C extends React.ElementType> = PolymorphicComponentProps<
+  C,
+  SharedInputProps
+>;
+
+export type InputComponent = <C extends React.ElementType = "input">(
+  props: InputProps<C>
+) => React.ReactElement;

packages/travelmakers-design-core/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from "./Input";
+export type { InputProps } from "./Input.type";

packages/travelmakers-design-core/src/components/Input/stories/Input.stories.tsx

@@ -0,0 +1,70 @@
+import { Meta } from "@storybook/react";
+import { Input } from "../Input";
+
+export default {
+  title: "@travelmakers-design-v2/core/General/Input",
+  component: Input,
+  argTypes: {
+    label: {
+      control: {
+        type: "text",
+      },
+      description: "input 라벨",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    subfix: {
+      control: {
+        type: "text",
+      },
+      description: "input 사용 시 인증 시간,결과 등을 나타냅니다.",
+      table: {
+        type: {
+          summary: ["string", "number"],
+        },
+      },
+    },
+    feedback: {
+      control: {
+        type: "text",
+      },
+      description: "input 추가 설명",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    isError: {
+      control: {
+        type: "boolean",
+      },
+      defaultValue: false,
+      description: "input Error 여부",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+      defaultValue: false,
+      description: "input Disabled 여부",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Default = (props) => {
+  return <Input {...props} />;
+};