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

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

@@ -1,61 +0,0 @@
-@layer Radio {
-  .RadioRoot {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    align-items: center;
-  }
-
-  .RadioTrigger {
-    .RadioIcon {
-      width: 20px;
-      height: 20px;
-      border: 2px solid var(--border-color, #8a8c8f);
-      border-radius: 50%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
-      &:hover {
-        border-color: var(--hover-border-color, #b1916b);
-      }
-
-      &.checked {
-        border-color: var(--border-color, #b1916b);
-        background-color: var(--background-color, #b1916b);
-      }
-
-      .RadioInner {
-        width: 50%;
-        height: 50%;
-        background-color: var(--border-color, #ffffff);
-        margin: auto;
-        border-radius: 50%;
-      }
-
-      &.disabled,
-      &.readOnly {
-        border-color: var(--border-color, #8a8c8f);
-      }
-    }
-  }
-
-  .RadioLabel {
-    @include labelMedium;
-    color: var(--color, #8a8c8f);
-
-    &:hover {
-      color: var(--hover-color, #b1916b);
-    }
-
-    &.checked {
-      @include bodyRegularSmall;
-    }
-
-    &.disabled,
-    &.readOnly {
-      color: var(--color, #8a8c8f);
-    }
-  }
-}

package/src/components/Form/Radio/Radio.tsx

@@ -1,174 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import React from "react";
-import styles from "./Radio.module.scss";
-import cn from "classnames/bind";
-import {
-  initialState,
-  RadioContext,
-  RadioProviderProps,
-} from "./Radio.context";
-import HelperTextComponent from "../../HelperText/HelperText";
-import useRadioColors from "./Radio.colors";
-
-const cx = cn.bind(styles);
-
-type AsProps = {
-  checked: boolean;
-  value?: string;
-  className?: string;
-  id?: string;
-};
-
-type TriggerProps = React.PropsWithChildren<{
-  as?: (props: AsProps) => React.ReactNode;
-  className?: string;
-  checkedClassName?: string;
-}>;
-
-const Trigger = (props: TriggerProps) => {
-  const { as, className, checkedClassName } = props;
-  const { value, checked, name, id, disabled, readOnly, onChange } =
-    React.useContext(RadioContext);
-
-  const colorSet = useRadioColors();
-  const variant = React.useMemo(
-    () => (checked ? "selected" : "unselected"),
-    [checked]
-  );
-
-  return as ? (
-    <React.Fragment>
-      <input
-        id={id}
-        name={name}
-        type="radio"
-        checked={checked}
-        hidden
-        value={value}
-        onChange={onChange}
-      />
-      {as({ checked, value, className, id })}
-    </React.Fragment>
-  ) : (
-    <div className={cx("RadioTrigger", className)}>
-      <input
-        id={id}
-        name={name}
-        type="radio"
-        checked={checked}
-        hidden
-        onChange={onChange}
-        value={value}
-      />
-      <div
-        className={cx("RadioIcon", {
-          [checkedClassName ? checkedClassName : "checked"]: checked,
-          disabled,
-          readOnly,
-        })}
-        style={{
-          "--border-color": disabled
-            ? colorSet[variant].disabled.borderColor
-            : colorSet[variant].borderColor,
-          "--background-color": disabled
-            ? colorSet[variant].disabled.backgroundColor
-            : colorSet[variant].backgroundColor,
-          "--hover-border-color": colorSet[variant].hover.borderColor,
-        }}
-      >
-        {checked && <div className={cx("RadioInner")} />}
-      </div>
-    </div>
-  );
-};
-
-const HelperText = (
-  props: React.ComponentProps<typeof HelperTextComponent>
-) => {
-  const { status } = React.useContext(RadioContext);
-  return <HelperTextComponent {...props} status={status} />;
-};
-
-type LabelProps = React.PropsWithChildren<{
-  className?: string;
-  checkedColor?: string;
-}>;
-
-const Label = (props: LabelProps) => {
-  const { className, checkedColor, children } = props;
-  const { checked, disabled, readOnly } = React.useContext(RadioContext);
-  const colorSet = useRadioColors();
-  const variant = React.useMemo(
-    () => (checked ? "selected" : "unselected"),
-    [checked]
-  );
-
-  return (
-    <span
-      className={cx("RadioLabel", className, {
-        checked,
-        disabled,
-        readOnly,
-      })}
-      style={{
-        "--color":
-          checkedColor ?? disabled
-            ? colorSet[variant].disabled.color
-            : colorSet[variant].color,
-        "--hover-color": colorSet[variant].hover.color,
-      }}
-    >
-      {children}
-    </span>
-  );
-};
-
-const Root = (props: RadioProviderProps) => {
-  const { id, value, className } = props;
-
-  const onChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (props.disabled || props.readOnly) {
-        return false;
-      }
-
-      props.onChange?.(e.target.id);
-    },
-    [props]
-  );
-
-  const checkedValue = id === value;
-
-  const ContextValue = React.useMemo(
-    () => ({
-      ...initialState,
-      ...props,
-      id: id ?? "",
-      checked: checkedValue,
-      onChange,
-    }),
-    [props, id, checkedValue, onChange]
-  );
-
-  return (
-    <RadioContext value={ContextValue}>
-      <label htmlFor={id} className={cx("RadioRoot", className)}>
-        {props.children}
-      </label>
-    </RadioContext>
-  );
-};
-
-interface IRadioInput {
-  Root: typeof Root;
-  Trigger: typeof Trigger;
-  Label: typeof Label;
-  HelperText: typeof HelperText;
-}
-
-export default {
-  Root,
-  Trigger,
-  Label,
-  HelperText,
-} as IRadioInput;

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

@@ -1,42 +0,0 @@
-import { colorThemes as colorSet } from "@/styles/color2";
-
-const useSwitchColors = () => {
-  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(--textDisabled, ${colorSet.light.textDisabled})`,
-      borderColor: "transparent",
-    },
-  };
-
-  const unselected = {
-    backgroundColor: `var(--textTertiary, ${colorSet.light.textTertiary})`,
-    color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
-    borderColor: "transparent",
-    hover: {
-      backgroundColor: `var(--textSecondary, ${colorSet.light.textSecondary})`,
-      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
-      borderColor: "transparent",
-    },
-    disabled: {
-      backgroundColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
-      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
-      borderColor: "transparent",
-    },
-  };
-
-  return {
-    selected,
-    unselected,
-  };
-};
-
-export default useSwitchColors;

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

@@ -1,50 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from "react";
-
-type SwitchStatus = "error" | "warning" | "success" | undefined;
-
-type SwitchContextType = {
-  /** input value */
-  value?: boolean;
-  /** onChange */
-  onChange?: (...args: any) => void;
-  /** name */
-  name?: string;
-  /** Disabled */
-  disabled?: boolean;
-  /** readOnly */
-  readOnly?: boolean;
-  /** status */
-  status?: SwitchStatus;
-  /** size */
-  size?: "small" | "medium" | "large";
-};
-
-const initialState: SwitchContextType = {
-  value: false,
-  onChange: () => {},
-  name: "",
-  disabled: false,
-  readOnly: false,
-  size: "small",
-};
-
-export const SwitchContext =
-  React.createContext<SwitchContextType>(initialState);
-
-export type SwitchProviderProps = React.PropsWithChildren<
-  Partial<Omit<SwitchContextType, "">>
-> & {
-  className?: string;
-};
-
-export const SwitchProvider: React.FC<SwitchProviderProps> = ({
-  children,
-  ...props
-}) => {
-  return (
-    <SwitchContext.Provider value={{ ...initialState, ...props }}>
-      {children}
-    </SwitchContext.Provider>
-  );
-};

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

@@ -1,53 +0,0 @@
-.SwitchWrapper {
-  // display: flex;
-  display: inline-flex;
-  align-items: center;
-  padding: 8px;
-  height: 64px;
-  background-color: var(--background-color, #e1e3e7);
-  min-width: 148px;
-  border-radius: 64px;
-  transition: background-color 0.3s;
-
-  &.small {
-    height: 32px;
-    min-width: 96px;
-  }
-
-  &.medium {
-    height: 48px;
-    min-width: 120px;
-  }
-
-  .SwitchInput {
-    display: none;
-  }
-
-  .SwitchInput:checked + .SwitchBullet {
-    margin-left: 100%;
-    transform: translateX(-100%);
-  }
-
-  .SwitchBullet {
-    height: 85%;
-    aspect-ratio: 1 /1;
-    background-color: #ffffff;
-    border-radius: 50%;
-    transition: all 0.3s;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.SwitchLabel {
-  @include labelMedium;
-  color: var(--color, #8a8c8f);
-
-  &.checked {
-    @include bodyRegularSmall;
-  }
-}
-
-.SwitchRoot {
-  display: flex;
-  flex-direction: column;
-}

package/src/components/Form/Switch/Switch.tsx

@@ -1,151 +0,0 @@
-import React from "react";
-import styles from "./Switch.module.scss";
-import cn from "classnames/bind";
-import {
-  SwitchContext,
-  SwitchProvider,
-  SwitchProviderProps,
-} from "./Switch.context";
-import useSwitchColors from "./Switch.colors";
-
-const cx = cn.bind(styles);
-
-type AsProps = {
-  checked?: boolean;
-  value?: boolean;
-  className?: string;
-  id?: string;
-};
-
-type TriggerProps = React.PropsWithChildren<{
-  as?: (props: AsProps) => React.ReactNode;
-  className?: string;
-  wrapperClassName?: string;
-  bulletClassName?: string;
-}>;
-
-const Trigger = (props: TriggerProps) => {
-  const { as, className, wrapperClassName, bulletClassName } = props;
-  const { value, onChange, name, size, disabled } =
-    React.useContext(SwitchContext);
-
-  const colorSet = useSwitchColors();
-  const variant = React.useMemo(
-    () => (value ? "selected" : "unselected"),
-    [value]
-  );
-
-  return as ? (
-    <React.Fragment>
-      <input
-        name={name}
-        type="checkbox"
-        checked={value}
-        hidden
-        value={value ? "on" : "off"}
-        id={name}
-        onChange={onChange}
-      />
-      {as({ checked: value, value, className, id: name })}
-    </React.Fragment>
-  ) : (
-    <div
-      className={cx("SwitchWrapper", size, wrapperClassName, {
-        checked: !!value,
-      })}
-      style={{
-        "--background-color": disabled
-          ? colorSet[variant].disabled.backgroundColor
-          : colorSet[variant].backgroundColor,
-      }}
-    >
-      <input
-        type={"checkbox"}
-        className={cx("SwitchInput")}
-        checked={value}
-        name={name}
-        value={value ? "on" : "off"}
-        id={name}
-        onChange={onChange}
-      />
-      <div
-        className={cx("SwitchBullet", bulletClassName, { checked: !!value })}
-        style={{
-          backgroundColor: value ? "#fff" : undefined,
-          // backgroundColor: value ? colorSet?.tintColor : undefined,
-        }}
-      ></div>
-    </div>
-  );
-};
-
-type LabelProps = React.PropsWithChildren<{
-  className?: string;
-  checkedColor?: string;
-}>;
-
-const Label = (props: LabelProps) => {
-  const { className, checkedColor, children } = props;
-  const { value, disabled } = React.useContext(SwitchContext);
-
-  const colorSet = useSwitchColors();
-  const variant = React.useMemo(
-    () => (value ? "selected" : "unselected"),
-    [value]
-  );
-
-  return (
-    <span
-      className={cx("SwitchLabel", className, {
-        checked: value,
-      })}
-      style={{
-        "--color":
-          checkedColor ?? disabled
-            ? colorSet[variant].disabled.color
-            : colorSet[variant].color,
-      }}
-    >
-      {children}
-    </span>
-  );
-};
-
-const Root = (props: SwitchProviderProps) => {
-  const { name, value, className, size = "small" } = props;
-
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (props.disabled) {
-      return false;
-    }
-
-    props.onChange?.(e.target.checked);
-    e.stopPropagation();
-  };
-
-  return (
-    <SwitchProvider
-      {...{
-        ...props,
-        onChange,
-        value,
-      }}
-    >
-      <label htmlFor={name} className={cx("SwitchRoot", size, className)}>
-        {props.children}
-      </label>
-    </SwitchProvider>
-  );
-};
-
-interface ISwitch {
-  Root: typeof Root;
-  Label: typeof Label;
-  Trigger: typeof Trigger;
-}
-
-export default {
-  Root,
-  Label,
-  Trigger,
-} as ISwitch;

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

@@ -1,76 +0,0 @@
-import { colorThemes as colorSet } from "../../../styles/color2";
-
-const useTextAreaColors = () => {
-  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 useTextAreaColors;

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

@@ -1,97 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import React from "react";
-
-type Variant = "contained" | "outlined";
-
-type InputStatus = "error" | "warning" | "success" | undefined;
-
-type TextAreaContextType = {
-  /** value */
-  value: string;
-  /** onChange */
-  onChange: (...args: any) => void;
-  /** placeholder */
-  placeholder: string;
-  /** rows */
-  rows: number;
-  /** disabled */
-  disabled: boolean;
-  /** variant */
-  variant: Variant;
-  /** readOnly */
-  readOnly: boolean;
-  /** name */
-  name: string;
-  /** 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<HTMLTextAreaElement | null>;
-  /** maxLength */
-  maxLength?: number;
-  /** maxRow */
-  maxRows?: number;
-  /** accentType */
-  accentType?: "in" | "out" | "all";
-};
-
-const initialState: TextAreaContextType = {
-  value: "",
-  onChange: () => {},
-  placeholder: "",
-  rows: 3,
-  disabled: false,
-  variant: "outlined",
-  readOnly: false,
-  name: "",
-  focused: false,
-  onFocus: () => {},
-  onBlur: () => {},
-  maxLength: undefined,
-  focusedColor: "var(--Simentic-Outline, #636567)",
-  accentType: "in",
-};
-
-export const TextAreaContext =
-  React.createContext<TextAreaContextType>(initialState);
-
-export type TextAreaProviderProps = React.PropsWithChildren<
-  Partial<TextAreaContextType>
-> & {
-  className?: string;
-};
-
-export const TextAreaProvider: React.FC<TextAreaProviderProps> = ({
-  children,
-  ...rest
-}) => {
-  const [focused, setFocused] = React.useState(false);
-  const _inputRef = React.useRef<HTMLTextAreaElement>(null);
-  return (
-    <TextAreaContext
-      value={{
-        ...initialState,
-        ...rest,
-        _inputRef,
-        focused,
-        onFocus: (e: any) => {
-          setFocused(true);
-          rest.onFocus?.call(null, e);
-        },
-        onBlur: (e: any) => {
-          setFocused(false);
-          rest.onBlur?.call(null, e);
-        },
-      }}
-    >
-      {children}
-    </TextAreaContext>
-  );
-};