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

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

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

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

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

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

@@ -1,133 +0,0 @@
-@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;
-    }
-  }
-}