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

package/src/components/Button/Button.colors.tsx

@@ -1,322 +0,0 @@
-import React from "react";
-import { SimenticColor, Transparent } from "../../styles/baseColor";
-import { colorThemes as colorSet } from "../../styles/color2";
-
-// 훅 함수 유지
-const useButtonColors = (shapeType: "square" | "round" = "square") => {
-  // 객체에서 shapeType에 따라 적절한 색상 설정 반환
-
-  const buttonColorsConfig = React.useMemo(() => {
-    return {
-      square: {
-        primary: {
-          contained: {
-            backgroundColor: colorSet.primary.pMain,
-            color: colorSet.primary.pContrastText,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: colorSet.primary.pDark,
-              color: colorSet.primary.pContrastText,
-              borderColor: "transparent",
-            },
-          },
-          outlined: {
-            backgroundColor: "transparent",
-            color: colorSet.primary.pMain,
-            borderColor: colorSet.primary.p48,
-            hover: {
-              backgroundColor: colorSet.primary.p8,
-              color: colorSet.primary.pMain,
-              borderColor: colorSet.primary.pMain,
-            },
-          },
-          soft: {
-            backgroundColor: colorSet.primary.p8,
-            color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: colorSet.primary.p16,
-              color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
-              borderColor: "transparent",
-            },
-          },
-          text: {
-            backgroundColor: "transparent",
-            color: colorSet.primary.pMain,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: colorSet.primary.p8,
-              color: `var(--swapDarkLightDeepGreen, ${colorSet.light.swapDarkLightDeepGreen})`,
-              borderColor: "transparent",
-            },
-          },
-        },
-        inherit: {
-          contained: {
-            backgroundColor: `var(--inheritBgcolor, ${colorSet.light.inheritBgcolor})`,
-            color: `var(--textContrast, ${colorSet.light.textContrast})`,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: `var(--inheritHover, ${colorSet.light.inheritHover})`,
-              color: `var(--textContrast, ${colorSet.light.textContrast})`,
-              borderColor: "transparent",
-            },
-          },
-          outlined: {
-            backgroundColor: "transparent",
-            color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
-            borderColor: Transparent.grey32,
-            hover: {
-              backgroundColor: `var(--actionHover, ${colorSet.light.actionHover})`,
-              color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
-              borderColor: `var(--textSecondary, ${colorSet.light.textSecondary})`,
-            },
-          },
-          soft: {
-            backgroundColor: Transparent.grey8,
-            color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: Transparent.grey24,
-              color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
-              borderColor: "transparent",
-            },
-          },
-          text: {
-            backgroundColor: "transparent",
-            color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: `var(--actionHover, ${colorSet.light.actionHover})`,
-              color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
-              borderColor: "transparent",
-            },
-          },
-        },
-        red: {
-          contained: {
-            backgroundColor: SimenticColor.red.Main,
-            color: colorSet.primary.pContrastText,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: SimenticColor.red.Dark,
-              color: `var(--textContrast, ${colorSet.light.textContrast})`,
-              borderColor: "transparent",
-            },
-          },
-          outlined: {
-            backgroundColor: "transparent",
-            color: SimenticColor.red.Main,
-            borderColor: Transparent.red48,
-            hover: {
-              backgroundColor: Transparent.red8,
-              color: SimenticColor.red.Main,
-              borderColor: SimenticColor.red.Main,
-            },
-          },
-          soft: {
-            backgroundColor: Transparent.red8,
-            color: `var(--swapDarkLightRed, ${colorSet.light.swapDarkLightRed})`,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: Transparent.red16,
-              color: `var(--swapDarkLightRed, ${colorSet.light.swapDarkLightRed})`,
-              borderColor: "transparent",
-            },
-          },
-          text: {
-            backgroundColor: "transparent",
-            color: SimenticColor.red.Main,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: Transparent.red8,
-              color: SimenticColor.red.Dark,
-              borderColor: "transparent",
-            },
-          },
-        },
-        disabled: {
-          contained: {
-            backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
-            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
-            borderColor: "transparent",
-          },
-          outlined: {
-            backgroundColor: "transparent",
-            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
-            borderColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
-          },
-          soft: {
-            backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
-            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
-            borderColor: "transparent",
-          },
-          text: {
-            backgroundColor: "transparent",
-            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
-            borderColor: "transparent",
-          },
-        },
-      },
-      round: {
-        primary: {
-          contained: {
-            backgroundColor: colorSet.primary.pMain,
-            color: colorSet.primary.pContrastText,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: colorSet.primary.pDark,
-              color: colorSet.primary.pContrastText,
-              borderColor: "transparent",
-            },
-          },
-          outlined: {
-            backgroundColor: "transparent",
-            color: colorSet.primary.pMain,
-            borderColor: colorSet.primary.p48,
-            hover: {
-              backgroundColor: colorSet.primary.p8,
-              color: colorSet.primary.pMain,
-              borderColor: colorSet.primary.p48,
-            },
-          },
-          soft: {
-            backgroundColor: colorSet.primary.p8,
-            color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: colorSet.primary.p16,
-              color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
-              borderColor: "transparent",
-            },
-          },
-          text: {
-            backgroundColor: "transparent",
-            color: colorSet.primary.pMain,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: colorSet.primary.p8,
-              color: `var(--swapDarkLightDeepGreen, ${colorSet.light.swapDarkLightDeepGreen})`,
-              borderColor: "transparent",
-            },
-          },
-        },
-        inherit: {
-          contained: {
-            backgroundColor: `var(--inheritBgcolor, ${colorSet.light.inheritBgcolor})`,
-            color: `var(--textContrast, ${colorSet.light.textContrast})`,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: `var(--inheritHover, ${colorSet.light.inheritHover})`,
-              color: `var(--textContrast, ${colorSet.light.textContrast})`,
-              borderColor: "transparent",
-            },
-          },
-          outlined: {
-            backgroundColor: "transparent",
-            color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
-            borderColor: Transparent.grey32,
-            hover: {
-              backgroundColor: `var(--actionHover, ${colorSet.light.actionHover})`,
-              color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
-              borderColor: Transparent.grey32,
-            },
-          },
-          soft: {
-            backgroundColor: Transparent.grey8,
-            color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: Transparent.grey24,
-              color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
-              borderColor: "transparent",
-            },
-          },
-          text: {
-            backgroundColor: "transparent",
-            color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: `var(--actionHover, ${colorSet.light.actionHover})`,
-              color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
-              borderColor: "transparent",
-            },
-          },
-        },
-        red: {
-          contained: {
-            backgroundColor: SimenticColor.red.Main,
-            color: colorSet.primary.pContrastText,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: SimenticColor.red.Dark,
-              color: `var(--textContrast, ${colorSet.light.textContrast})`,
-              borderColor: "transparent",
-            },
-          },
-          outlined: {
-            backgroundColor: "transparent",
-            color: SimenticColor.red.Main,
-            borderColor: Transparent.red48,
-            hover: {
-              backgroundColor: Transparent.red8,
-              color: SimenticColor.red.Main,
-              borderColor: Transparent.red48,
-            },
-          },
-          soft: {
-            backgroundColor: Transparent.red8,
-            color: `var(--swapDarkLightRed, ${colorSet.light.swapDarkLightRed})`,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: Transparent.red16,
-              color: `var(--swapDarkLightRed, ${colorSet.light.swapDarkLightRed})`,
-              borderColor: "transparent",
-            },
-          },
-          text: {
-            backgroundColor: "transparent",
-            color: SimenticColor.red.Main,
-            borderColor: "transparent",
-            hover: {
-              backgroundColor: Transparent.red8,
-              color: SimenticColor.red.Dark,
-              borderColor: "transparent",
-            },
-          },
-        },
-        disabled: {
-          contained: {
-            backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
-            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
-            borderColor: "transparent",
-          },
-          outlined: {
-            backgroundColor: "transparent",
-            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
-            borderColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
-          },
-          soft: {
-            backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
-            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
-            borderColor: "transparent",
-          },
-          text: {
-            backgroundColor: "transparent",
-            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
-            borderColor: "transparent",
-          },
-        },
-      },
-    };
-  }, []);
-
-  return {
-    primary: buttonColorsConfig[shapeType].primary,
-    inherit: buttonColorsConfig[shapeType].inherit,
-    disabled: buttonColorsConfig[shapeType].disabled,
-    red: buttonColorsConfig[shapeType].red,
-  };
-};
-
-export default useButtonColors;

package/src/components/Button/Button.context.tsx

@@ -1,47 +0,0 @@
-import React from "react";
-type Variant = "outlined" | "contained" | "soft" | "text";
-
-type ButtonContextType = {
-  // colorScheme: ColorScheme;
-  /** Color Type */
-  shapeType: "square" | "round";
-  colorType: "primary" | "inherit" | "red";
-  variant: Variant;
-  isLoading: boolean;
-  spinner?: React.ReactNode;
-  loadingText: string;
-  size?: "small" | "medium" | "large";
-  disabled?: boolean;
-  isFitted?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-};
-
-export const initialState: ButtonContextType = {
-  // colorScheme: "gray",
-  shapeType: "square",
-  colorType: "primary",
-  variant: "contained",
-  isLoading: false,
-  loadingText: "Loading...",
-  disabled: false,
-  size: "medium",
-  isFitted: false,
-};
-
-export const ButtonContext =
-  React.createContext<ButtonContextType>(initialState);
-
-export type ButtonProviderProps = React.PropsWithChildren<
-  Partial<ButtonContextType>
-> & {
-  className?: string;
-};
-
-export const ButtonProvider = (props: ButtonProviderProps) => {
-  const { children, ...rest } = props;
-  return (
-    <ButtonContext.Provider value={{ ...initialState, ...rest }}>
-      {children}
-    </ButtonContext.Provider>
-  );
-};

package/src/components/Button/Button.module.scss

@@ -1,156 +0,0 @@
-@layer Button {
-  .ButtonIcon {
-    flex-shrink: 0;
-    // margin: 0 auto;
-  }
-
-  .ButtonRoot {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--default-color, #b1916b);
-    border: 1px solid var(--border-color, #b1916b);
-
-    &.circle {
-      aspect-ratio: 1 / 1 !important;
-      border-radius: 50% !important;
-      padding: 0 !important;
-    }
-
-    &:not(.circle) {
-      &.isFitted {
-        flex: 1;
-      }
-    }
-
-    &:not(.link) {
-      padding: 0 12px;
-      border-radius: var(--radius, 4px);
-      &.large {
-        height: 48px;
-      }
-
-      &.medium {
-        height: 40px;
-      }
-
-      &.small {
-        height: 32px;
-      }
-    }
-
-    &:hover {
-      background-color: var(--hover-bg-color, #b1916b);
-      border-color: var(--hover-border-color);
-    }
-    // &:active {
-    //   background-color: var(--active-color, #b1916b);
-    // }
-
-    &:disabled {
-      pointer-events: none;
-    }
-  }
-
-  .ButtonText {
-    color: var(--color, #fff);
-    &.large {
-      @include buttonLarge;
-      line-height: 24px;
-    }
-
-    &.medium {
-      @include buttonMedium;
-      line-height: 24px;
-    }
-
-    &.small {
-      @include buttonSmall;
-      line-height: 24px;
-    }
-  }
-}
-
-// // color
-// .contained {
-//   &.cyan {
-//     color: var(--cyan-cyan-100, #fff);
-//     background-color: var(--cyan-cyan-40, #00b4b4);
-
-//     &:hover {
-//       background-color: var(--cyan-cyan-50, #00caca);
-//     }
-
-//     &:active {
-//       background-color: var(--cyan-cyan-30, #009797);
-//     }
-//   }
-
-//   &:disabled {
-//     background-color: var(--simentic-surf-container-highest, #d0d2d5);
-//   }
-// }
-
-// .outlined {
-//   &.cyan {
-//     border-color: var(--cyan-cyan-40, #00b4b4);
-//     color: var(--cyan-cyan-40, #00b4b4);
-
-//     &:hover {
-//       border-color: var(--cyan-cyan-50, #00caca);
-//       color: var(--cyan-cyan-50, #00caca);
-//       background-color: var(--cyan-cyan-99, #f0fcfc);
-//     }
-
-//     &:active {
-//       border-color: var(--cyan-cyan-20, #007b7b);
-//       color: var(--cyan-cyan-20, #007b7b);
-//     }
-//   }
-
-//   &:disabled {
-//     color: var(--simentic-surf-container-highest, #d0d2d5);
-//     border-color: var(--simentic-surf-container-highest, #d0d2d5);
-//     pointer-events: none;
-//   }
-// }
-
-// // size
-// .Button {
-//   padding: 4px 12px;
-//   border-radius: 8px;
-//   border: 1px solid transparent;
-
-//   &.rounded {
-//     border-radius: 24px;
-//   }
-
-//   &.large {
-//     @include button1;
-//     min-height: 48px;
-//   }
-
-//   &.medium {
-//     @include button2;
-//     min-height: 40px;
-//   }
-
-//   &.small {
-//     @include button3;
-//     min-height: 32px;
-//   }
-
-//   &:disabled {
-//     cursor: not-allowed;
-//     pointer-events: none;
-//   }
-// }
-
-// .IconButton {
-//   width: auto;
-//   aspect-ratio: 1 /1;
-//   padding: 0;
-//   &.rounded {
-//     border-radius: 50%;
-//   }
-// }

package/src/components/Button/Button.tsx

@@ -1,190 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import React from "react";
-import cn from "classnames/bind";
-import styles from "./Button.module.scss";
-import { Icon as IconComponent } from "../Icon/Icon";
-import {
-  ButtonContext,
-  ButtonProvider,
-  ButtonProviderProps,
-  initialState,
-} from "./Button.context";
-import useButtonColors from "./Button.colors";
-
-const cx = cn.bind(styles);
-
-type TextProps = React.PropsWithChildren<{
-  className?: string;
-}>;
-
-const Text = (props: TextProps) => {
-  const { className } = props;
-  const { isLoading, loadingText, spinner, colorType } =
-    React.use(ButtonContext);
-  const { size, variant, disabled } = React.use(ButtonContext);
-  const buttonColors = useButtonColors();
-  const colorSet = buttonColors[disabled ? "disabled" : colorType];
-
-  return (
-    <span
-      className={cx("ButtonText", variant, size, className, {
-        disabled,
-      })}
-      style={{
-        "--color": colorSet[variant].color,
-      }}
-    >
-      {isLoading ? (
-        <React.Fragment>
-          {spinner}
-          {loadingText}
-        </React.Fragment>
-      ) : (
-        props.children
-      )}
-    </span>
-  );
-};
-
-type IconProps = React.PropsWithChildren<
-  React.ComponentProps<typeof IconComponent>
-> & {
-  className?: string;
-};
-
-const Icon = (props: IconProps) => {
-  const { className, name, color } = props;
-  const { size, disabled, variant, colorType } = React.use(ButtonContext);
-
-  const buttonColors = useButtonColors();
-  const colorSet = buttonColors[disabled ? "disabled" : colorType];
-
-  const iconSize = React.useMemo(() => {
-    switch (size) {
-      case "large":
-        return 24;
-      default:
-        return 20;
-    }
-  }, [size]);
-
-  return (
-    <IconComponent
-      name={name}
-      className={cx("ButtonIcon", size, className, {
-        disabled,
-      })}
-      color={color ?? colorSet[variant].color}
-      size={iconSize}
-    />
-  );
-};
-
-/** 버튼 컴포넌트 */
-const Root = (
-  props: ButtonProviderProps & {
-    radius?: number;
-    rounded?: boolean;
-    circle?: boolean;
-  } & React.JSX.IntrinsicElements["button"]
-) => {
-  const {
-    children,
-    shapeType = initialState.shapeType,
-    colorType = initialState.colorType,
-    variant = initialState.variant,
-    isLoading = initialState.isLoading,
-    spinner = initialState.spinner,
-    loadingText = initialState.loadingText,
-    disabled = initialState.disabled,
-    size = initialState.size,
-    isFitted = initialState.isFitted,
-    radius = 8,
-    rounded,
-    circle,
-    ...rest
-  } = props;
-
-  const contextValue = React.useMemo(() => {
-    return {
-      ...initialState,
-      ...props,
-      shapeType,
-      colorType,
-      variant,
-      isLoading,
-      spinner,
-      loadingText,
-      disabled,
-      size,
-      isFitted,
-    };
-  }, [
-    props,
-    shapeType,
-    colorType,
-    variant,
-    isLoading,
-    spinner,
-    loadingText,
-    disabled,
-    size,
-    isFitted,
-  ]);
-
-  const buttonColors = useButtonColors(shapeType);
-  const colorSet = buttonColors[colorType];
-
-  // 버튼 색상
-  const defaultColor = !disabled
-    ? colorSet[variant].backgroundColor
-    : buttonColors["disabled"][variant].backgroundColor;
-  const borderColor = !disabled
-    ? colorSet[variant].borderColor
-    : buttonColors["disabled"][variant].borderColor;
-  const hoverColor = colorSet[variant].hover.color;
-  const activeColor = colorSet[variant].hover.backgroundColor;
-  const hoverBackgroundColor = colorSet[variant].hover.backgroundColor;
-  const hoverBorderColor = colorSet[variant].hover.borderColor;
-
-  return (
-    <ButtonProvider {...contextValue}>
-      <button
-        {...rest}
-        className={cx("ButtonRoot", variant, size, rest.className, {
-          loading: isLoading,
-          disabled,
-          rounded,
-          circle,
-          isFitted,
-        })}
-        style={{
-          "--radius": `${radius}px`,
-          "--default-color": defaultColor,
-          "--hover-color": hoverColor,
-          "--active-color": activeColor,
-          "--hover-bg-color": hoverBackgroundColor,
-          "--border-color": borderColor,
-          "--hover-border-color": hoverBorderColor,
-          ...rest.style,
-        }}
-        disabled={disabled}
-        onClick={props.onClick}
-      >
-        {children}
-      </button>
-    </ButtonProvider>
-  );
-};
-
-interface IButton {
-  Text: typeof Text;
-  Icon: typeof Icon;
-  Root: typeof Root;
-}
-
-export default {
-  Text,
-  Icon,
-  Root,
-} as IButton;