@weing-dev/ui-kit-primitive 0.0.0

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

@@ -0,0 +1,138 @@
+@layer TextArea {
+  .TextAreaTextCount {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    @include captionRegularSmall;
+    color: var(--textDisabled, #c4cdd5);
+
+    z-index: 10;
+  }
+
+  .TextAreaLabel {
+    @include bodyRegularSmall;
+    color: var(--textSecondary, #637381);
+
+    &.error {
+      color: var(--error-color, var(--textError, #f5222d));
+    }
+
+    &.success {
+      color: var(--success-color, var(--textSuccess, #1cc95c));
+    }
+
+    &.warning {
+      color: var(--warning-color, var(--textWarning, #ffab00));
+    }
+  }
+
+  .TextAreaComponentWrapper {
+    position: relative;
+    display: flex;
+    border: 1px solid var(--border-color, var(--Gray-Gray80, #b1b3b7));
+    border-radius: 8px;
+    background-color: var(--background-color, transparent);
+
+    textarea {
+      border: none;
+      background: none;
+      resize: none;
+      outline: none;
+      font: inherit;
+      color: var(--color, var(--textPrimary, #000000));
+
+      &::placeholder {
+        color: var(--placeholder-color, var(--textTertiary, #8e8e93));
+        font: inherit;
+      }
+    }
+
+    .TextAreaInput {
+      padding: 8px 16px;
+      flex: 1;
+      align-self: stretch;
+      @include bodyRegularSmall;
+    }
+
+    &.success {
+      &.out,
+      &.all {
+        border-color: var(--success-color, var(--Simentic-Success, #4caf50));
+      }
+    }
+
+    &.warning {
+      &.out,
+      &.all {
+        border-color: var(--warning-color, var(--Simentic-Warning, #e9a802));
+      }
+    }
+
+    &.contained {
+      background-color: var(--background-color, var(--Simentic-Surface, #edeff2));
+
+      textarea {
+        &::placeholder {
+          color: var(--placeholder-color, var(--Simentic-On-Surface-Variant, #505254));
+          font: inherit;
+        }
+      }
+    }
+
+    &.error {
+      &.out,
+      &.all {
+        border-color: var(--error-color, var(--Simentic-Error, #d32f2f));
+      }
+
+      &.in,
+      &.all {
+        textarea {
+          color: var(--error-color, var(--Simentic-Error, #d32f2f));
+
+          &::placeholder {
+            color: var(--error-color, var(--Simentic-Error, #d32f2f)) !important;
+          }
+        }
+      }
+    }
+
+    &.focused {
+      &.out,
+      &.all {
+        border-color: var(--border-color);
+      }
+    }
+
+    &.disabled {
+      &.in,
+      &.out,
+      &.all {
+        &.outlined {
+          border-color: var(--componentTextfieldOutline, #919eab3d);
+        }
+
+        &.contained {
+          border-color: transparent;
+        }
+
+        textarea {
+          color: var(--disabled-color, var(--Simentic-SurfContainer-Highest, #d0d2d5));
+
+          &::placeholder {
+            color: var(--disabled-color, var(--Simentic-SurfContainer-Highest, #d0d2d5)) !important;
+          }
+        }
+      }
+    }
+  }
+
+  .TextAreaClone {
+    position: absolute;
+    padding-top: 0;
+    padding-bottom: 0;
+    visibility: hidden;
+    opacity: 0;
+    z-index: -1;
+  }
+}

package/src/components/Form/TextArea/TextArea.tsx

@@ -0,0 +1,246 @@
+/* eslint-disable react-refresh/only-export-components */
+import React from "react";
+import cn from "classnames/bind";
+import styles from "./TextArea.module.scss";
+import HelperTextComponent from "../../HelperText/HelperText";
+import {
+  TextAreaProviderProps,
+  TextAreaContext,
+  TextAreaProvider,
+} from "./TextArea.context";
+import { Icon } from "../../../components/Icon/Icon";
+import useTextAreaColors from "./TextArea.colors";
+
+const cx = cn.bind(styles);
+
+type TextCountProps = React.PropsWithChildren<{
+  className?: string;
+}>;
+const TextCount = (props: TextCountProps) => {
+  const { className } = props;
+  const { value, maxLength } = React.useContext(TextAreaContext);
+
+  return (
+    <span className={cx("TextAreaTextCount", className)}>
+      {value.length}/{maxLength}
+    </span>
+  );
+};
+
+type EraseProps = React.PropsWithChildren<{
+  className?: string;
+}>;
+
+const Erase = (props: EraseProps) => {
+  const { children, className } = props;
+  const { onChange, _inputRef } = React.useContext(TextAreaContext);
+
+  const handleClick = () => {
+    if (_inputRef?.current) {
+      _inputRef.current.value = "";
+    }
+
+    onChange?.({
+      target: { value: "" },
+    } as React.ChangeEvent<HTMLInputElement>);
+  };
+
+  return (
+    <button onClick={handleClick} className={cx("TextAreaErase", className)}>
+      {children ?? <Icon name={"CancleFilled"} size={16} />}
+    </button>
+  );
+};
+
+const HelperText = (
+  props: React.ComponentProps<typeof HelperTextComponent>
+) => {
+  const { status } = React.useContext(TextAreaContext);
+  return <HelperTextComponent {...props} status={status} />;
+};
+
+type InputProps = React.PropsWithChildren<
+  React.HTMLProps<HTMLTextAreaElement>
+> & {
+  wrapperClassName?: string;
+  placeholderColor?: string;
+  focusedColor?: string;
+  containedBackgroundColor?: string;
+  disabledColor?: string;
+  maxRows?: number;
+};
+
+const Input = (props: InputProps) => {
+  const {
+    children,
+    wrapperClassName,
+    placeholderColor,
+    containedBackgroundColor,
+    disabledColor,
+    ...rest
+  } = props;
+  const _cloneRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const {
+    readOnly,
+    disabled,
+    variant,
+    focused,
+    name,
+    onFocus,
+    onBlur,
+    status,
+    placeholder,
+    focusedColor,
+    _inputRef,
+    value,
+    onChange,
+    rows,
+    maxRows,
+    accentType,
+  } = React.useContext(TextAreaContext);
+
+  const textAreaColors = useTextAreaColors();
+  const colorSet = textAreaColors[variant];
+
+  const isFocused =
+    !(props.readOnly ?? readOnly) &&
+    !(props.disabled ?? disabled) &&
+    (focused || value.length > 0) &&
+    status !== "error";
+
+  React.useEffect(() => {
+    const elem = _inputRef?.current;
+    const cloneElem = _cloneRef.current;
+
+    const handleInput = () => {
+      if (!elem || !cloneElem) return;
+
+      const val = elem.value;
+      cloneElem.value = val;
+
+      elem.rows = Math.min(
+        Math.max(
+          Math.ceil(cloneElem.scrollHeight / cloneElem.clientHeight),
+          rows
+        ),
+        props.maxRows ?? maxRows ?? rows
+      );
+    };
+
+    if (elem) elem.addEventListener("input", handleInput);
+
+    return () => {
+      if (elem) elem.removeEventListener("input", handleInput);
+    };
+  }, [_inputRef, maxRows, props.maxRows, rows]);
+
+  return (
+    <div
+      className={cx(
+        "TextAreaComponentWrapper",
+        variant,
+        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,
+      }}
+    >
+      <textarea
+        className={cx("TextAreaClone")}
+        rows={1}
+        ref={_cloneRef}
+        readOnly
+      />
+      <textarea
+        {...rest}
+        className={cx("TextAreaInput")}
+        rows={props.rows ?? rows}
+        disabled={props.disabled ?? disabled}
+        readOnly={props.readOnly ?? readOnly}
+        name={name}
+        id={props.id ?? props.name ?? name}
+        onFocus={props.onFocus ?? onFocus}
+        onBlur={props.onBlur ?? onBlur}
+        value={value}
+        onChange={props.onChange ?? onChange}
+        ref={_inputRef}
+        placeholder={props.placeholder ?? placeholder}
+        style={{
+          "--placeholder-color":
+            placeholderColor ?? colorSet.inactive.placeholder,
+          "--focused-color": focusedColor ?? colorSet.focused.borderColor,
+          "--disabled-color": disabledColor ?? colorSet.disabled.color,
+          "--error-color": colorSet.error.color,
+        }}
+      ></textarea>
+      {children}
+    </div>
+  );
+};
+
+type LabelProps = React.PropsWithChildren<{
+  className?: string;
+  focusedColor?: string;
+}>;
+
+const Label = (props: LabelProps) => {
+  const { className, children, focusedColor } = props;
+  const { focused, status } = React.useContext(TextAreaContext);
+
+  return (
+    <span
+      className={cx("TextAreaLabel", className, status, {
+        focused,
+      })}
+      style={{
+        color: focused ? focusedColor : undefined,
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+const Root = (props: TextAreaProviderProps) => {
+  const { name, className } = props;
+  return (
+    <TextAreaProvider {...props}>
+      <label htmlFor={name} className={cx("TextAreaRoot", className)}>
+        {props.children}
+      </label>
+    </TextAreaProvider>
+  );
+};
+
+interface ITextArea {
+  Root: typeof Root;
+  Label: typeof Label;
+  HelperText: typeof HelperText;
+  Erase: typeof Erase;
+  Input: typeof Input;
+  TextCount: typeof TextCount;
+}
+
+export default {
+  Root,
+  Label,
+  HelperText,
+  Erase,
+  Input,
+  TextCount,
+} as ITextArea;

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

@@ -0,0 +1,76 @@
+import { colorThemes as colorSet } from "../../../styles/color2";
+
+const useTextInputColors = () => {
+  const outlined = {
+    inactive: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+    focused: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--actionAction, ${colorSet.light.actionAction})`,
+    },
+    readOnly: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+    disabled: {
+      backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      placeholder: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+    error: {
+      backgroundColor: "transparent",
+      color: `var(--textError, ${colorSet.light.textError})`,
+      placeholder: `var(--textError, ${colorSet.light.textError})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+  };
+
+  const contained = {
+    inactive: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+    },
+    focused: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--actionAction, ${colorSet.light.actionAction})`,
+    },
+    readOnly: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+    },
+    disabled: {
+      backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      placeholder: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: "transparent",
+    },
+    error: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textError, ${colorSet.light.textError})`,
+      placeholder: `var(--textError, ${colorSet.light.textError})`,
+      borderColor: "transparent",
+    },
+  };
+
+  return {
+    outlined,
+    contained,
+  };
+};
+
+export default useTextInputColors;

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

@@ -0,0 +1,106 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+
+type InputSize = "medium" | "large";
+
+type InputType = "text" | "password" | "email";
+
+type Variant = "contained" | "outlined";
+
+type InputStatus = "error" | "warning" | "success" | undefined;
+
+type Direction = "column" | "row";
+
+type TextInputContextType = {
+  /** input value */
+  value: string;
+  /** onChange */
+  onChange?: (...args: any) => void;
+  /** placeholder */
+  placeholder?: string;
+  /** size */
+  size?: InputSize;
+  /** contained */
+  variant?: Variant;
+  /** Disabled */
+  disabled?: boolean;
+  /** readOnly */
+  readOnly?: boolean;
+  /** type */
+  type?: InputType;
+  /** name */
+  name?: string;
+  /** required */
+  required?: boolean;
+  /** focused */
+  focused?: boolean;
+  /** onFocus */
+  onFocus?: (...args: any) => void;
+  /** onBlur */
+  onBlur?: (...args: any) => void;
+  /** status */
+  status?: InputStatus;
+  /** focused color */
+  focusedColor?: string;
+  /** input Ref */
+  _inputRef?: React.RefObject<HTMLInputElement | null>;
+  /** direction */
+  direction?: Direction;
+  /** flex basis */
+  flexBasis?: string;
+  /** accent type */
+  accentType?: "in" | "out" | "all";
+};
+
+const initialState: TextInputContextType = {
+  value: "",
+  onChange: () => {},
+  placeholder: "",
+  size: "medium",
+  variant: "outlined",
+  disabled: false,
+  readOnly: false,
+  type: "text",
+  name: "",
+  required: false,
+  focused: false,
+  onFocus: () => {},
+  onBlur: () => {},
+  focusedColor: "var(--Simentic-Outline, #636567)",
+  accentType: "in",
+};
+
+export const TextInputContext =
+  React.createContext<TextInputContextType>(initialState);
+
+export type TextInputProviderProps = React.PropsWithChildren<
+  Partial<Omit<TextInputContextType, "">>
+> & {
+  className?: string;
+};
+
+export const TextInputProvider = (props: TextInputProviderProps) => {
+  const [focused, setFocused] = React.useState(false);
+  const _inputRef = React.useRef<HTMLInputElement>(null);
+
+  const contextValue = React.useMemo(() => {
+    return {
+      ...initialState,
+      ...props,
+      focused,
+      _inputRef,
+      onFocus: (e: any) => {
+        setFocused(true);
+        props.onFocus?.call(null, e);
+      },
+      onBlur: (e: any) => {
+        setFocused(false);
+        props.onBlur?.call(null, e);
+      },
+    };
+  }, [focused, props]);
+
+  return (
+    <TextInputContext value={contextValue}>{props.children}</TextInputContext>
+  );
+};