@weing-dev/ui-kit-primitive 0.0.0 → 0.0.2

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

@@ -1,138 +0,0 @@
-@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

@@ -1,246 +0,0 @@
-/* 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

@@ -1,76 +0,0 @@
-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

@@ -1,106 +0,0 @@
-/* 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>
-  );
-};