@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Form/TextInput/TextInput.module.scss

@@ -0,0 +1,160 @@
+$Basis: 105px;
+
+@layer TextInput {
+  .TextInputRoot {
+    &.row {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+
+  .TextInputLabel {
+    @include captionBoldMedium;
+    color: var(--textSecondary, #637381);
+
+    &.large,
+    &.row.small {
+      @include bodyBoldSmall;
+    }
+
+    &.row.large {
+      @include bodyBoldMedium;
+    }
+    &.row {
+      flex-basis: var(--basis, $Basis);
+    }
+
+    &.error {
+      color: var(--error-color, var(--textError, #f5222d));
+    }
+
+    &.success {
+      color: var(--success-color, var(--textSuccess, #1cc95c));
+    }
+
+    &.warning {
+      color: var(--warning-color, var(--textWarning, #ffab00));
+    }
+  }
+
+  .TextInputErase {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px;
+    flex-shrink: 0;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+  .TextInputComponentWrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color, #919eab3d);
+    color: var(--color, var(--textPrimary, #1c252e));
+    overflow: hidden;
+    max-width: 100%;
+    height: 40px;
+    background-color: var(--background-color, var(--componentTextfieldFilled, #edeff2));
+    flex-grow: 1;
+    @include bodyRegularSmall;
+
+    .TextInputComponentInput {
+      border: none;
+      outline: none;
+      background: none;
+      font: inherit;
+      flex: 1 0 0;
+      text-overflow: ellipsis;
+      min-width: 0;
+      padding: 0 8px;
+
+      &::placeholder {
+        color: var(--placeholder-color, var(--textPrimary, #8e8e93));
+        font: inherit;
+      }
+    }
+
+    &.large {
+      @include bodyRegularMedium;
+      padding-block: 8px;
+      height: 48px;
+    }
+
+    &.contained {
+      .TextInputComponentInput {
+        &::placeholder {
+          color: var(--placeholder-color, var(--Simentic-On-Surface-Variant, #505254));
+          font: inherit;
+        }
+      }
+    }
+
+    &.success {
+      &.out,
+      &.all {
+        border-color: var(--success-color, var(--Simentic-Success, #4caf50));
+      }
+    }
+
+    &.warning {
+      &.out,
+      &.all {
+        border-color: var(--warning-color, var(--Simentic-Warning, #e9a802));
+      }
+    }
+
+    &.error {
+      &.in,
+      &.all {
+        input {
+          color: var(--error-color, var(--Simentic-Error, #d32f2f));
+
+          &::placeholder {
+            color: var(--error-color, var(--Simentic-Error, #d32f2f)) !important;
+          }
+        }
+      }
+
+      &.out,
+      &.all {
+        border-color: var(--error-color, var(--Simentic-Error, #d32f2f));
+      }
+    }
+
+    &.focused {
+      &.out,
+      &.all {
+        border-color: var(--border-color);
+      }
+    }
+
+    &.disabled {
+      &.in,
+      &.out,
+      &.all {
+        &.outlined {
+          border-color: var(--componentTextfieldOutline, #919eab3d);
+        }
+
+        &.contained {
+          border-color: transparent;
+        }
+
+        input {
+          color: var(--disabled-color, var(--Simentic-SurfContainer-Highest, #d0d2d5));
+
+          &::placeholder {
+            color: var(--disabled-color, var(--Simentic-SurfContainer-Highest, #d0d2d5)) !important;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/Form/TextInput/TextInput.tsx

@@ -0,0 +1,225 @@
+/* eslint-disable react-refresh/only-export-components */
+import React from "react";
+import HelperTextComponent from "../../HelperText/HelperText";
+import {
+  TextInputContext,
+  TextInputProvider,
+  TextInputProviderProps,
+} from "./TextInput.context";
+import styles from "./TextInput.module.scss";
+import cn from "classnames/bind";
+import { Icon } from "../../../components/Icon/Icon";
+import useTextInputColors from "./TextInput.colors";
+
+const cx = cn.bind(styles);
+
+type EraseProps = React.PropsWithChildren<{
+  className?: string;
+  color?: string;
+}>;
+
+const Erase = (props: EraseProps) => {
+  const { children, className, color } = props;
+  const { onChange, _inputRef } = React.useContext(TextInputContext);
+
+  const handleClick = () => {
+    if (_inputRef?.current) {
+      console.log(_inputRef.current);
+      _inputRef.current.value = "";
+    }
+
+    onChange?.("");
+  };
+
+  return (
+    <button onClick={handleClick} className={cx("TextInputErase", className)}>
+      {children ?? (
+        <Icon name={"CancleFilled"} size={20} color={color ?? "#919EAB"} />
+      )}
+    </button>
+  );
+};
+
+type InputProps = React.PropsWithChildren<React.HTMLProps<HTMLInputElement>> & {
+  wrapperClassName?: string;
+  placeholderColor?: string;
+  focusedColor?: string;
+  containedBackgroundColor?: string;
+  disabledColor?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+};
+
+const Input = (props: InputProps) => {
+  const {
+    children,
+    wrapperClassName,
+    placeholderColor,
+    containedBackgroundColor,
+    disabledColor,
+    leftIcon,
+    rightIcon,
+    ...rest
+  } = props;
+  const {
+    readOnly,
+    disabled,
+    variant = "outlined",
+    focused = false,
+    size,
+    name,
+    onFocus,
+    onBlur,
+    status,
+    placeholder,
+    focusedColor,
+    _inputRef,
+    onChange,
+    type,
+    value = "",
+    accentType,
+  } = React.useContext(TextInputContext);
+  const [text, setText] = React.useState(value);
+  const textInputColors = useTextInputColors();
+  const colorSet = textInputColors[variant];
+
+  const isFocused =
+    !(props.readOnly ?? readOnly) &&
+    !(props.disabled ?? disabled) &&
+    (focused || text.length > 0) &&
+    status !== "error";
+
+  React.useEffect(() => {
+    setText(value);
+  }, [value]);
+
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setText(e.target.value);
+      props.onChange?.(e);
+      onChange?.(e.target.value);
+    },
+    [onChange, props]
+  );
+
+  return (
+    <div
+      className={cx(
+        "TextInputComponentWrapper",
+        variant,
+        size,
+        status,
+        accentType,
+        wrapperClassName,
+        {
+          focused: isFocused,
+          disabled: props.disabled ?? disabled,
+          readOnly: props.readOnly ?? readOnly,
+        }
+      )}
+      style={{
+        "--background-color": disabled
+          ? containedBackgroundColor ?? colorSet.disabled.backgroundColor
+          : colorSet.inactive.backgroundColor,
+        "--border-color": isFocused
+          ? props.focusedColor ?? focusedColor ?? colorSet.focused.borderColor
+          : status === "error"
+          ? colorSet.error.borderColor
+          : colorSet.inactive.borderColor,
+      }}
+    >
+      {leftIcon}
+      <input
+        {...rest}
+        type={props.type ?? type}
+        disabled={props.disabled ?? disabled}
+        readOnly={props.readOnly ?? readOnly}
+        className={cx("TextInputComponentInput", rest.className, status)}
+        name={props.name ?? name}
+        id={props.id ?? props.name ?? name}
+        onFocus={
+          !(props.readOnly ?? readOnly) && !(props.disabled ?? disabled)
+            ? props.onFocus ?? onFocus
+            : undefined
+        }
+        onBlur={props.onFocus ?? onBlur}
+        onChange={handleChange}
+        value={text}
+        ref={_inputRef}
+        style={{
+          "--placeholder-color":
+            placeholderColor ?? colorSet.inactive.placeholder,
+          "--color": disabled
+            ? disabledColor ?? colorSet.disabled.color
+            : colorSet.inactive.color,
+          "--error-color": colorSet.error.color,
+        }}
+        placeholder={props.placeholder ?? placeholder}
+      />
+      {rightIcon}
+      {children}
+    </div>
+  );
+};
+
+const HelperText = (
+  props: React.ComponentProps<typeof HelperTextComponent>
+) => {
+  const { status } = React.useContext(TextInputContext);
+  return <HelperTextComponent {...props} status={status} />;
+};
+
+type LabelProps = React.PropsWithChildren<{
+  className?: string;
+  focusedColor?: string;
+}>;
+
+const Label = (props: LabelProps) => {
+  const { className, children, focusedColor } = props;
+  const { focused, status, size, direction, flexBasis } =
+    React.useContext(TextInputContext);
+
+  return (
+    <span
+      className={cx("TextInputLabel", className, status, size, direction, {
+        focused,
+      })}
+      style={{
+        color: focused ? focusedColor : undefined,
+        ...(flexBasis ? { "--basis": flexBasis } : {}),
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+const Root = (props: TextInputProviderProps) => {
+  const { name, className, children, direction = "column", ...rest } = props;
+  return (
+    <TextInputProvider {...{ ...rest, direction }}>
+      <label
+        htmlFor={name}
+        className={cx("TextInputRoot", className, direction)}
+      >
+        {children}
+      </label>
+    </TextInputProvider>
+  );
+};
+
+interface ITextInput {
+  Root: typeof Root;
+  Label: typeof Label;
+  HelperText: typeof HelperTextComponent;
+  Input: typeof Input;
+  Erase: typeof Erase;
+}
+
+export default {
+  Root,
+  Label,
+  HelperText,
+  Input,
+  Erase,
+} as ITextInput;

package/src/components/GlobalStyle/GlobalStyle.tsx

@@ -0,0 +1,20 @@
+import { themes } from "@/styles/color2";
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+   :root,
+  ::before,
+  ::after {
+    ${themes.base}
+    ${themes.simentic}
+    ${themes.transparent}
+    ${themes.primary}
+    ${themes.light}
+
+    @media (prefers-color-scheme: dark) {
+      ${themes.dark}
+    }
+  }
+`;
+
+export default GlobalStyle;

package/src/components/HelperText/HelperText.module.scss

@@ -0,0 +1,28 @@
+.HelperText {
+  @include captionRegularSmall;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  color: var(--Simentic-On-Surface-Variant, #505254);
+
+  &.error {
+    color: var(--error-color, var(--Simentic-Error, #d32f2f));
+  }
+
+  &.success {
+    color: var(--success-color, var(--Simentic-Success, #4caf50));
+  }
+
+  &.warning {
+    color: var(--warning-color, var(--Simentic-Warning, #e9a802));
+  }
+
+  &.info {
+    color: var(--info-color, var(--Simentic-Info, #2196f3));
+  }
+
+  &.hint {
+    color: var(--hint-color, var(--Simentic-On-Surface-Variant, #505254));
+  }
+}

package/src/components/HelperText/HelperText.tsx

@@ -0,0 +1,130 @@
+/* eslint-disable react-refresh/only-export-components */
+import React from "react";
+import styles from "./HelperText.module.scss";
+import cn from "classnames/bind";
+import { Icon } from "../Icon/Icon";
+
+const cx = cn.bind(styles);
+
+export const STATUS_LIST = [
+  "error",
+  "warning",
+  "success",
+  "info",
+  "hint",
+] as const;
+
+type HelperTextProps = React.PropsWithChildren<{
+  /** 상태 */
+  status?: (typeof STATUS_LIST)[number];
+  /** 클래스명 */
+  className?: string;
+  /** 경고 색상 */
+  warningColor?: string;
+  /** 에러 색상 */
+  errorColor?: string;
+  /** 성공 색상 */
+  successColor?: string;
+  /** 기본 색상 */
+  hintColor?: string;
+  /** 정보 색상 */
+  infoColor?: string;
+  /** 아이콘 크기 */
+  size?: number;
+  /** 아이콘 name */
+  iconName?: React.ComponentProps<typeof Icon>["name"];
+  /** 아이콘 표시 여부 */
+  iconVisible?: boolean;
+}>;
+
+/** Helper Text */
+const HelperText = (props: HelperTextProps) => {
+  const {
+    className,
+    status,
+    size,
+    iconName,
+    errorColor = "var(--textError, #F5222D)",
+    successColor = "var(--textSuccess, #1CC95C)",
+    warningColor = "var(--textWarning, #FFAB00)",
+    hintColor = "var(--textSecondary, #637381)",
+    infoColor = "var(--Simentic-Info, #0076FF)",
+    iconVisible = true,
+  } = props;
+
+  const IconComponent = React.useMemo(() => {
+    return ((status) => {
+      switch (status) {
+        case "error":
+          return (
+            <Icon
+              name={iconName ?? "Error"}
+              size={size || 14}
+              color={errorColor}
+            />
+          );
+        case "warning":
+          return (
+            <Icon
+              name={iconName ?? "Warning"}
+              size={size || 14}
+              color={warningColor}
+            />
+          );
+        case "success":
+          return (
+            <Icon
+              name={iconName ?? "Check"}
+              size={size || 14}
+              color={successColor}
+            />
+          );
+        case "info":
+          return (
+            <Icon
+              name={iconName ?? "ErrorFilled"}
+              size={size || 14}
+              color={infoColor}
+            />
+          );
+        case "hint":
+          return (
+            <Icon
+              name={iconName ?? "Check"}
+              size={size || 14}
+              color={hintColor}
+            />
+          );
+        default:
+          return null;
+      }
+    })(status);
+  }, [
+    status,
+    size,
+    iconName,
+    errorColor,
+    warningColor,
+    successColor,
+    infoColor,
+    hintColor,
+  ]);
+
+  return (
+    <p
+      className={cx("HelperText", status, className)}
+      style={{
+        "--error-color": errorColor,
+        "--warning-color": warningColor,
+        "--success-color": successColor,
+        "--hint-color": hintColor,
+        "--info-color": infoColor,
+      }}
+    >
+      {iconVisible ? IconComponent : null}
+      {props.children}
+    </p>
+  );
+};
+
+export default HelperText;

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,29 @@
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as Icons from "../Icons";
+
+type IconName = keyof typeof Icons;
+type IconsProps = (typeof Icons)[IconName];
+type IconProps = Omit<IconsProps, "size" | "color"> & {
+  name: IconName;
+  color?: string;
+  size?: number;
+  onClick?: (...args: any) => void;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const Icon = (props: IconProps) => {
+  const { name, size = 24, color, ...rest } = props;
+
+  const Component = Icons[name];
+
+  return (
+    <Component
+      width={size}
+      height={size}
+      color={color ?? "var(--simentic-on-surface, #121416)"}
+      {...rest}
+    />
+  );
+};

package/src/components/Icons/Add.tsx

@@ -0,0 +1,20 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Run yarn icons:create to update
+// Do not edit
+import type { SVGProps } from "react";
+const SvgAdd = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    width={props.width || 24}
+    height={props.height || 24}
+    style={props.style || {}}
+    onClick={props.onClick}
+    {...props}
+  >
+    <path
+      d="M11.75 13.25H6v-1.5h5.75V6h1.5v5.75H19v1.5h-5.75V19h-1.5v-5.75Z"
+      fill={props.color || `#1C1B1F`}
+    />
+  </svg>
+);
+export default SvgAdd;

package/src/components/Icons/AddAPhoto.tsx

@@ -0,0 +1,21 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Run yarn icons:create to update
+// Do not edit
+import type { SVGProps } from "react";
+const SvgAddAPhoto = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    width={props.width || 24}
+    height={props.height || 24}
+    style={props.style || {}}
+    onClick={props.onClick}
+    {...props}
+  >
+    <path
+      d="M21.5 6.5H18.33L16.5 4.5H10.5V6.5H15.62L17.45 8.5H21.5V20.5H5.5V11.5H3.5V20.5C3.5 21.6 4.4 22.5 5.5 22.5H21.5C22.6 22.5 23.5 21.6 23.5 20.5V8.5C23.5 7.4 22.6 6.5 21.5 6.5ZM8.5 14.5C8.5 17.26 10.74 19.5 13.5 19.5C16.26 19.5 18.5 17.26 18.5 14.5C18.5 11.74 16.26 9.5 13.5 9.5C10.74 9.5 8.5 11.74 8.5 14.5ZM13.5 11.5C15.15 11.5 16.5 12.85 16.5 14.5C16.5 16.15 15.15 17.5 13.5 17.5C11.85 17.5 10.5 16.15 10.5 14.5C10.5 12.85 11.85 11.5 13.5 11.5ZM5.5 6.5H8.5V4.5H5.5V1.5H3.5V4.5H0.5V6.5H3.5V9.5H5.5V6.5Z"
+      fill="#C4CDD5"
+    />
+  </svg>
+);
+export default SvgAddAPhoto;

package/src/components/Icons/ApprovalInactive.tsx

@@ -0,0 +1,26 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Run yarn icons:create to update
+// Do not edit
+import type { SVGProps } from "react";
+const SvgApprovalInactive = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    width={props.width || 24}
+    height={props.height || 24}
+    style={props.style || {}}
+    onClick={props.onClick}
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.5 10.312V21.5h10.232a6.456 6.456 0 0 1-.558-1.5H4v-8.675L7 10v1.95l5-2V12h8v.174a6.46 6.46 0 0 1 1.5.558V10.5l-.942-7.615h-2.116l-1 7.615H13.5V7.74l-5 2V7.76l-6 2.552Zm10.385 4.912v-.993h-1.77v3.538h.926c.103-.92.397-1.782.844-2.545Zm-4 2.545h-1.77v-3.538h1.77v3.538Z"
+      fill={props.color || `#121416`}
+    />
+    <path
+      d="M16.904 20.298h.884v-3.623h-.884v3.623Zm2.308 0h.884v-3.623h-.884v3.623Zm-.712 2.675c-1.249 0-2.31-.437-3.187-1.31C14.438 20.79 14 19.731 14 18.486s.438-2.303 1.313-3.177C16.19 14.438 17.252 14 18.5 14c1.249 0 2.31.437 3.186 1.31.876.873 1.314 1.931 1.314 3.176s-.438 2.304-1.314 3.177c-.875.873-1.937 1.31-3.186 1.31Z"
+      fill={props.color || `#121416`}
+    />
+  </svg>
+);
+export default SvgApprovalInactive;

package/src/components/Icons/ArrowRight.tsx

@@ -0,0 +1,24 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Run yarn icons:create to update
+// Do not edit
+import type { SVGProps } from "react";
+const SvgArrowRight = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    width={props.width || 24}
+    height={props.height || 24}
+    style={props.style || {}}
+    onClick={props.onClick}
+    {...props}
+  >
+    <g id="keyboard_arrow_right">
+      <path
+        id="Vector"
+        d="M7.49961 13.2292L10.7329 9.99583L7.49961 6.7625C7.17461 6.4375 7.17461 5.9125 7.49961 5.5875C7.82461 5.2625 8.34961 5.2625 8.67461 5.5875L12.4996 9.4125C12.8246 9.7375 12.8246 10.2625 12.4996 10.5875L8.67461 14.4125C8.34961 14.7375 7.82461 14.7375 7.49961 14.4125C7.18294 14.0875 7.17461 13.5542 7.49961 13.2292Z"
+        fill={props.color || `#1C252E`}
+      />
+    </g>
+  </svg>
+);
+export default SvgArrowRight;