@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Form/CheckBox/CheckBox.tsx

@@ -0,0 +1,196 @@
+/* eslint-disable react-refresh/only-export-components */
+import React from "react";
+import styles from "./CheckBox.module.scss";
+import {
+  CheckBoxContext,
+  CheckBoxProvider,
+  CheckBoxProviderProps,
+} from "./CheckBox.context";
+import cn from "classnames/bind";
+import HelperTextComponent from "../../HelperText/HelperText";
+import { Icon } from "../../Icon/Icon";
+import useCheckboxColors from "./Checkbox.colors";
+
+const cx = cn.bind(styles);
+
+type AsProps = {
+  checked?: boolean;
+  value?: string | string[];
+  indeterminated?: boolean;
+  className?: string;
+  id?: string;
+  disabled?: boolean;
+};
+
+type TriggerProps = React.PropsWithChildren<{
+  as?: (props: AsProps) => React.ReactNode;
+  className?: string;
+  checkedClassName?: string;
+  id?: string;
+  indeterminated?: boolean;
+}>;
+
+const Trigger = (props: TriggerProps) => {
+  const { as, className, checkedClassName, indeterminated } = props;
+  const { value, name, onChange, id, disabled, checked } =
+    React.useContext(CheckBoxContext);
+
+  const colorset = useCheckboxColors();
+  const variant = React.useMemo(
+    () => (checked ? "selected" : "unselected"),
+    [checked]
+  );
+  return as ? (
+    <React.Fragment>
+      <input
+        id={id}
+        name={name}
+        type="checkbox"
+        hidden
+        value={id}
+        onChange={onChange}
+        disabled={disabled}
+      />
+      {as({ checked, value, indeterminated, className, id, disabled })}
+    </React.Fragment>
+  ) : (
+    <div className={cx("CheckBoxTrigger", className)}>
+      <input
+        id={id}
+        name={name}
+        type="checkbox"
+        value={id}
+        onChange={onChange}
+        hidden
+        disabled={disabled}
+      />
+      <div
+        className={cx("CheckBoxIcon", {
+          checked,
+          [checkedClassName ? checkedClassName : "checked"]: checked,
+          indeterminated,
+          disabled,
+        })}
+        style={{
+          "--default-bg-color": disabled
+            ? colorset[variant].disabled.backgroundColor
+            : "transparent",
+          "--border-color": disabled
+            ? colorset[variant].disabled.borderColor
+            : colorset[variant].borderColor,
+        }}
+      >
+        {checked ? (
+          <Icon
+            className={cx("CheckBoxRound", {
+              disabled,
+            })}
+            name={"CheckBoxRound"}
+            size={18}
+            color={
+              disabled
+                ? colorset[variant].disabled.backgroundColor
+                : colorset[variant].backgroundColor
+            }
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const HelperText = (
+  props: React.ComponentProps<typeof HelperTextComponent>
+) => {
+  const { status } = React.useContext(CheckBoxContext);
+  return <HelperTextComponent {...props} status={status} />;
+};
+
+type LabelProps = React.PropsWithChildren<{
+  className?: string;
+  checkedColor?: string;
+}>;
+
+const Label = (props: LabelProps) => {
+  const { className, children } = props;
+  const { checked, disabled } = React.useContext(CheckBoxContext);
+  const colorset = useCheckboxColors();
+  const variant = React.useMemo(
+    () => (checked ? "selected" : "unselected"),
+    [checked]
+  );
+  return (
+    <span
+      className={cx("CheckBoxLabel", className)}
+      style={{
+        "--color": disabled
+          ? colorset[variant].disabled.color
+          : colorset[variant].color,
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+const Root = (props: CheckBoxProviderProps) => {
+  const { className, id, value } = props;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.disabled) {
+      return false;
+    }
+
+    try {
+      props.onChange?.(
+        Array.isArray(value)
+          ? value.includes(e.target.id)
+            ? value.filter((v) => v !== e.target.id)
+            : [...value, e.target.id]
+          : e.target.id
+      );
+    } catch {
+      props.onChange?.(e);
+    }
+
+    e.stopPropagation();
+  };
+
+  const checkedValue = Array.isArray(value)
+    ? value.includes(id ?? "")
+    : value === id;
+
+  return (
+    <CheckBoxProvider
+      {...{
+        ...props,
+        onChange,
+        checked: checkedValue,
+      }}
+    >
+      <label
+        htmlFor={id}
+        className={cx("CheckBoxRoot", className, {
+          checked: checkedValue,
+          disabled: props.disabled,
+        })}
+      >
+        {props.children}
+      </label>
+    </CheckBoxProvider>
+  );
+};
+
+interface ICheckBoxInput {
+  Root: typeof Root;
+  Label: typeof Label;
+  HelperText: typeof HelperTextComponent;
+  Trigger: typeof Trigger;
+}
+
+export default {
+  Root,
+  Label,
+  HelperText,
+  Trigger,
+} as ICheckBoxInput;

package/src/components/Form/CheckBox/Checkbox.colors.tsx

@@ -0,0 +1,42 @@
+import { colorThemes as colorSet } from "@/styles/color2";
+
+const useCheckboxColors = () => {
+  const selected = {
+    backgroundColor: colorSet.primary.pMain,
+    color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+    borderColor: "transparent",
+    hover: {
+      backgroundColor: colorSet.primary.pDark,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      borderColor: "transparent",
+    },
+    disabled: {
+      backgroundColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+      color: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+      borderColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+    },
+  };
+
+  const unselected = {
+    backgroundColor: "transparent",
+    color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+    borderColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    hover: {
+      backgroundColor: "transparent",
+      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      borderColor: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+    },
+    disabled: {
+      backgroundColor: "transparent",
+      color: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+      borderColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+    },
+  };
+
+  return {
+    selected,
+    unselected,
+  };
+};
+
+export default useCheckboxColors;

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

@@ -0,0 +1,125 @@
+import { colorThemes as colorSet } from "../../../styles/color2";
+
+const useDropdownColors = () => {
+  const outlined = {
+    inactive: {
+      backgroundColor: "transparent",
+      color: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+      iconColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    },
+    focused: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--actionAction, ${colorSet.light.actionAction})`,
+      iconColor: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+    },
+    selected: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--actionAction, ${colorSet.light.actionAction})`,
+      iconColor: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+    },
+    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})`,
+      iconColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    },
+    error: {
+      backgroundColor: "transparent",
+      color: `var(--textError, ${colorSet.light.textError})`,
+      placeholder: `var(--textError, ${colorSet.light.textError})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+      iconColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    },
+  };
+
+  const contained = {
+    inactive: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+      iconColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    },
+    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})`,
+      iconColor: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+    },
+    selected: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+      iconColor: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+    },
+    disabled: {
+      backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      placeholder: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: "transparent",
+      iconColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    },
+    error: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textError, ${colorSet.light.textError})`,
+      placeholder: `var(--textError, ${colorSet.light.textError})`,
+      borderColor: "transparent",
+      iconColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    },
+  };
+
+  const text = {
+    inactive: {
+      backgroundColor: "transparent",
+      color: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+      iconColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    },
+    focused: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+      iconColor: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+    },
+    selected: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+      iconColor: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+    },
+    disabled: {
+      backgroundColor: "transparent",
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      placeholder: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: "transparent",
+      iconColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    },
+    error: {
+      backgroundColor: "transparent",
+      color: `var(--textError, ${colorSet.light.textError})`,
+      placeholder: `var(--textError, ${colorSet.light.textError})`,
+      borderColor: "transparent",
+      iconColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+    },
+  };
+
+  return {
+    outlined,
+    contained,
+    text,
+  };
+};
+
+export default useDropdownColors;

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

@@ -0,0 +1,62 @@
+import React from "react";
+
+type DropdownContextType = {
+  /** value,  */
+  value: string | string[];
+  /** searchable */
+  searchable?: boolean;
+  /** placeholder */
+  placeholder?: string;
+  /** searchText */
+  searchText?: string;
+  /** open */
+  open?: boolean;
+  /** options */
+  options?: { value: string; label: string }[];
+  /** id */
+  id?: string;
+  /** disabled */
+  disabled?: boolean;
+  /** error */
+  error?: boolean;
+  /** accentType */
+  accentType?: "in" | "out" | "all";
+  /** referenceState */
+  referenceState?: [
+    HTMLElement | null,
+    React.Dispatch<React.SetStateAction<HTMLElement | null>>
+  ];
+  /** popperState */
+  popperState?: [
+    HTMLUListElement | null,
+    React.Dispatch<React.SetStateAction<HTMLUListElement | null>>
+  ];
+  /** onChange */
+  onChange: (value: string | string[]) => void;
+  /** handleTriggerClick */
+  handleTriggerClick?: () => void;
+};
+
+export const initialState: DropdownContextType = {
+  value: "",
+  searchable: false,
+  placeholder: "",
+  searchText: "",
+  open: false,
+  disabled: false,
+  error: false,
+  accentType: "in",
+  onChange: () => {},
+};
+
+export const DropdownContext =
+  React.createContext<DropdownContextType>(initialState);
+
+export type DropdownProviderProps = React.PropsWithChildren<
+  Partial<
+    Omit<DropdownContextType, "open" | "referenceState" | "popperState">
+  > & {
+    className?: string;
+    onSearchChange?: (searchText: string) => void;
+  }
+>;

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

@@ -0,0 +1,133 @@
+@layer Dropdown {
+  .DropdownRoot {
+    position: relative;
+    @include bodyRegularSmall;
+  }
+
+  .DropdownTrigger {
+    cursor: pointer;
+    padding: 8px;
+    height: 24px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 8px;
+    gap: 8px;
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color);
+    color: var(--color);
+
+    &.text {
+      background: transparent;
+    }
+
+    &.small {
+      height: 32px;
+    }
+
+    &.medium {
+      height: 40px;
+    }
+
+    &.large {
+      height: 48px;
+    }
+  }
+
+  .DropdownTriggerText {
+    color: var(--color);
+  }
+
+  .LeftIcon {
+    flex-shrink: 0;
+
+    & path {
+      fill: var(--icon-color);
+    }
+  }
+
+  .RightIcon {
+    margin-left: auto;
+    flex-shrink: 0;
+    transform: rotate(0deg);
+    transition: transform 0.3s ease;
+    transform-origin: top top;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    & path {
+      fill: var(--icon-color);
+    }
+
+    &.open {
+      transform: rotate(180deg);
+    }
+  }
+
+  .DropdownMenu {
+    width: 100%;
+    z-index: 1000;
+    border-radius: 8px;
+    padding: 8px;
+
+    &.shadow {
+      background-color: var(--backgroundDefault, #ffffff);
+      box-shadow: 0 30px 40px 0 var(--shadow12, #919eab1f);
+      border: 1px solid var(--grey8, #919eab14);
+    }
+
+    &.line {
+      background-color: var(--backgroundDefault, #ffffff);
+      border: 1px solid var(--grey20, #919eab33);
+    }
+  }
+
+  .DropdownItem {
+    padding: 0 8px;
+    border-radius: 8px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &.small {
+      @include bodyRegularSmall;
+      height: 32px;
+      line-height: 32px;
+    }
+
+    &.medium {
+      @include bodyRegularMedium;
+      height: 40px;
+      line-height: 40px;
+    }
+
+    &.shadow {
+      &:hover {
+        background: var(--grey8, #919eab14);
+      }
+    }
+
+    &.line {
+      border-bottom: 1px solid var(--grey16, #919eab29);
+
+      &:hover {
+        background: var(--grey8, #919eab14);
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    &.selected {
+      color: var(--textDisabled, #c4cdd5);
+    }
+
+    &.disabled {
+      pointer-events: none;
+    }
+  }
+}