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

package/dist/styles/baseColor.d.ts

@@ -0,0 +1,264 @@
+export declare const BaseColor: {
+    readonly red: {
+        readonly Red1: "#fff1f0";
+        readonly Red2: "#ffdbd8";
+        readonly Red3: "#ffbbbc";
+        readonly Red4: "#ff8587";
+        readonly Red5: "#ff4d56";
+        readonly Red6: "#f5222d";
+        readonly Red7: "#d6231d";
+        readonly Red8: "#b71d18";
+        readonly Red9: "#7a0916";
+        readonly Red10: "#5c0011";
+    };
+    readonly lightGreen: {
+        readonly LightGreen1: "#e3ffe2";
+        readonly LightGreen2: "#d3fcd2";
+        readonly LightGreen3: "#a4f6a2";
+        readonly LightGreen4: "#77ed8b";
+        readonly LightGreen5: "#32d970";
+        readonly LightGreen6: "#1cc95c";
+        readonly LightGreen7: "#10a564";
+        readonly LightGreen8: "#118d57";
+        readonly LightGreen9: "#065e49";
+        readonly LightGreen10: "#04503e";
+    };
+    readonly cyanBlue: {
+        readonly CyanBlue1: "#e2fffa";
+        readonly CyanBlue2: "#cafdf5";
+        readonly CyanBlue3: "#9ff6f6";
+        readonly CyanBlue4: "#61f3f3";
+        readonly CyanBlue5: "#3bdff2";
+        readonly CyanBlue6: "#00b8d9";
+        readonly CyanBlue7: "#1c87b6";
+        readonly CyanBlue8: "#006c9c";
+        readonly CyanBlue9: "#003768";
+        readonly CyanBlue10: "#00284c";
+    };
+    readonly purple: {
+        readonly Purple1: "#f9f0ff";
+        readonly Purple2: "#efd6ff";
+        readonly Purple3: "#d7a8ff";
+        readonly Purple4: "#c684ff";
+        readonly Purple5: "#a65dff";
+        readonly Purple6: "#8e33ff";
+        readonly Purple7: "#642ac1";
+        readonly Purple8: "#5119b7";
+        readonly Purple9: "#27097a";
+        readonly Purple10: "#120338";
+    };
+    readonly gold: {
+        readonly Gold1: "#fffbe6";
+        readonly Gold2: "#fff5cc";
+        readonly Gold3: "#ffe99e";
+        readonly Gold4: "#ffd666";
+        readonly Gold5: "#ffc53d";
+        readonly Gold6: "#ffab00";
+        readonly Gold7: "#d48806";
+        readonly Gold8: "#b76e00";
+        readonly Gold9: "#7a4100";
+        readonly Gold10: "#623501";
+    };
+    readonly blue: {
+        readonly Blue1: "#e6f7ff";
+        readonly Blue2: "#cde9fd";
+        readonly Blue3: "#a1d3f7";
+        readonly Blue4: "#6bb1f8";
+        readonly Blue5: "#3592f0";
+        readonly Blue6: "#0c68e9";
+        readonly Blue7: "#075bd1";
+        readonly Blue8: "#063ba7";
+        readonly Blue9: "#021d6f";
+        readonly Blue10: "#001941";
+    };
+    readonly grey: {
+        readonly Grey1: "#fdfeff";
+        readonly Grey2: "#f9fafb";
+        readonly Grey3: "#f4f6f8";
+        readonly Grey4: "#dfe3e8";
+        readonly Grey5: "#c4cdd5";
+        readonly Grey6: "#919eab";
+        readonly Grey7: "#637381";
+        readonly Grey8: "#454f5b";
+        readonly Grey9: "#1c252e";
+        readonly Grey10: "#141a21";
+    };
+    readonly deepGreen: {
+        readonly DeepGreen1: "#ebfff0";
+        readonly DeepGreen2: "#c8fad6";
+        readonly DeepGreen3: "#92f1ad";
+        readonly DeepGreen4: "#5be49b";
+        readonly DeepGreen5: "#14c489";
+        readonly DeepGreen6: "#00a76f";
+        readonly DeepGreen7: "#019362";
+        readonly DeepGreen8: "#007867";
+        readonly DeepGreen9: "#004b50";
+        readonly DeepGreen10: "#00373b";
+    };
+    readonly blackBlack: "#000000";
+    readonly whiteWhite: "#ffffff";
+};
+export declare const SimenticColor: {
+    red: {
+        Lighter: "#ffdbd8";
+        Light: "#ff8587";
+        Main: "#f5222d";
+        Dark: "#b71d18";
+        Darker: "#5c0011";
+    };
+    lightGreen: {
+        Lighter: "#d3fcd2";
+        Light: "#77ed8b";
+        Main: "#1cc95c";
+        Dark: "#118d57";
+        Darker: "#04503e";
+    };
+    cyanBlue: {
+        Lighter: "#cafdf5";
+        Light: "#61f3f3";
+        Main: "#00b8d9";
+        Dark: "#006c9c";
+        Darker: "#00284c";
+    };
+    purple: {
+        Lighter: "#efd6ff";
+        Light: "#c684ff";
+        Main: "#8e33ff";
+        Dark: "#5119b7";
+        Darker: "#120338";
+    };
+    gold: {
+        Lighter: "#fff5cc";
+        Light: "#ffd666";
+        Main: "#ffab00";
+        Dark: "#b76e00";
+        Darker: "#623501";
+    };
+    blue: {
+        Lighter: "#cde9fd";
+        Light: "#6bb1f8";
+        Main: "#0c68e9";
+        Dark: "#063ba7";
+        Darker: "#001941";
+    };
+    deepGreen: {
+        Lighter: "#c8fad6";
+        Light: "#5be49b";
+        Main: "#00a76f";
+        Dark: "#007867";
+        Darker: "#00373b";
+    };
+    whiteMain: "#ffffff";
+    blackMain: "#000000";
+};
+export declare const Transparent: {
+    red4: string;
+    red8: string;
+    red12: string;
+    red16: string;
+    red20: string;
+    red24: string;
+    red32: string;
+    red40: string;
+    red48: string;
+    lightGreen4: string;
+    lightGreen8: string;
+    lightGreen12: string;
+    lightGreen16: string;
+    lightGreen20: string;
+    lightGreen24: string;
+    lightGreen32: string;
+    lightGreen40: string;
+    lightGreen48: string;
+    cyanBlue4: string;
+    cyanBlue8: string;
+    cyanBlue12: string;
+    cyanBlue16: string;
+    cyanBlue20: string;
+    cyanBlue24: string;
+    cyanBlue32: string;
+    cyanBlue40: string;
+    cyanBlue48: string;
+    purple4: string;
+    purple8: string;
+    purple12: string;
+    purple16: string;
+    purple20: string;
+    purple24: string;
+    purple32: string;
+    purple40: string;
+    purple48: string;
+    gold4: string;
+    gold8: string;
+    gold12: string;
+    gold16: string;
+    gold20: string;
+    gold24: string;
+    gold32: string;
+    gold40: string;
+    gold48: string;
+    blue4: string;
+    blue8: string;
+    blue12: string;
+    blue16: string;
+    blue20: string;
+    blue24: string;
+    blue32: string;
+    blue40: string;
+    blue48: string;
+    grey4: string;
+    grey8: string;
+    grey12: string;
+    grey16: string;
+    grey20: string;
+    grey24: string;
+    grey32: string;
+    grey40: string;
+    grey48: string;
+    grey56: string;
+    grey64: string;
+    grey72: string;
+    grey80: string;
+    black8: string;
+    black12: string;
+    black16: string;
+    black20: string;
+    black24: string;
+    black32: string;
+    black40: string;
+    black48: string;
+    black56: string;
+    black64: string;
+    black72: string;
+    black80: string;
+    white8: string;
+    white12: string;
+    white16: string;
+    white20: string;
+    white24: string;
+    white32: string;
+    white40: string;
+    white48: string;
+    white56: string;
+    white64: string;
+    white72: string;
+    white80: string;
+    deepGreen4: string;
+    deepGreen8: string;
+    deepGreen12: string;
+    deepGreen16: string;
+    deepGreen20: string;
+    deepGreen24: string;
+    deepGreen32: string;
+    deepGreen40: string;
+    deepGreen48: string;
+    primary4: string;
+    primary8: string;
+    primary12: string;
+    primary16: string;
+    primary20: string;
+    primary24: string;
+    primary32: string;
+    primary40: string;
+    primary48: string;
+};

package/dist/styles/color.d.ts

@@ -0,0 +1,6 @@
+export declare const variableLight: ColorType;
+export declare const themes: {
+    readonly light: string;
+    readonly dark: string;
+};
+export declare const themedPalette: ColorType;

package/dist/styles/color2.d.ts

@@ -0,0 +1,102 @@
+export declare const colorThemes: {
+    light: {
+        textPrimary: "#1c252e";
+        textSecondary: "#637381";
+        textTertiary: "#919eab";
+        textDisabled: "#c4cdd5";
+        backgroundDefault: "#ffffff";
+        backgroundPaper: "#ffffff";
+        backgroundSecond: string;
+        backgroundNeutral: "#f9fafb";
+        shadow8: string;
+        shadow12: string;
+        shadow20: string;
+        componentTextfieldFilled: string;
+        componentTextfieldUnderline: string;
+        componentTextfieldOutline: string;
+        actionHover: string;
+        actionDisabled: string;
+        actionDisabledBackground: string;
+        actionSelected: string;
+        actionFocus: string;
+        textError: "#f5222d";
+        textSuccess: "#1cc95c";
+        actionAction: "#919eab";
+        textWarning: "#ffab00";
+        textContrast: "#ffffff";
+        inheritColor: "#ffffff";
+        inheritBgcolor: "#1c252e";
+        inheritHover: "#454f5b";
+        swapDarkLightRed: "#b71d18";
+        swapDarkLightLightGreen: "#118d57";
+        swapDarkLightDeepGreen: "#007867";
+        swapDarkLightCyanBlue: "#006c9c";
+        swapDarkLightPurple: "#5119b7";
+        swapDarkLightGold: "#b76e00";
+        swapDarkLightBlue: "#063ba7";
+        swapDarkLightPrimary: "#007867";
+    };
+    dark: {
+        textPrimary: "#ffffff";
+        textSecondary: "#c4cdd5";
+        textTertiary: "#919eab";
+        textDisabled: "#637381";
+        backgroundDefault: "#141a21";
+        backgroundPaper: "#1c252e";
+        backgroundSecond: "#454f5b";
+        backgroundNeutral: string;
+        shadow8: string;
+        shadow12: string;
+        shadow20: string;
+        componentTextfieldFilled: string;
+        componentTextfieldUnderline: string;
+        componentTextfieldOutline: string;
+        actionHover: string;
+        actionDisabled: string;
+        actionDisabledBackground: string;
+        actionSelected: string;
+        actionFocus: string;
+        textError: "#f5222d";
+        textSuccess: "#1cc95c";
+        actionAction: "#c4cdd5";
+        textWarning: "#ffab00";
+        textContrast: "#000000";
+        inheritColor: "#1c252e";
+        inheritBgcolor: "#ffffff";
+        inheritHover: "#c4cdd5";
+        swapDarkLightRed: "#ff8587";
+        swapDarkLightLightGreen: "#77ed8b";
+        swapDarkLightDeepGreen: "#5be49b";
+        swapDarkLightCyanBlue: "#61f3f3";
+        swapDarkLightPurple: "#c684ff";
+        swapDarkLightGold: "#ffd666";
+        swapDarkLightBlue: "#6bb1f8";
+        swapDarkLightPrimary: "#5be49b";
+    };
+    primary: {
+        pLighter: "#c8fad6";
+        pLight: "#5be49b";
+        pMain: "#00a76f";
+        pDark: "#007867";
+        pDarker: "#00373b";
+        p4: string;
+        p8: string;
+        p12: string;
+        p16: string;
+        p20: string;
+        p24: string;
+        p32: string;
+        p40: string;
+        p48: string;
+        pContrastText: "#ffffff";
+    };
+};
+export declare const themes: {
+    readonly light: any;
+    readonly dark: any;
+    readonly primary: any;
+    readonly base: any;
+    readonly simentic: any;
+    readonly transparent: any;
+};
+export declare const themedPalette: any;

package/dist/utils/aws.util.d.ts

@@ -0,0 +1,60 @@
+type AWSUtilParams = {
+    region: string;
+    accessKeyId: string;
+    secretAccessKey: string;
+    bucketName: string;
+    secretId?: string;
+};
+export declare class AWSUtil {
+    private _bucketName;
+    private _secretManagerClient;
+    private _s3Client;
+    private _secretId;
+    private _config;
+    constructor(params: AWSUtilParams);
+    /**
+     * @description S3에 업로드 파일의 URL을 반환
+     * @param file {FileItem["file"]} 업로드할 파일
+     * @param folder {string} 업로드할 폴더
+     * @returns
+     * @example
+     */
+    createPresignedUrlWithClient(file: FileItem["file"], folder?: string): Promise<string>;
+    /**
+     * @description S3에 업로드 후 파일의 URL을 반환
+     * @param selectedFile
+     * @param folder
+     * @returns
+     */
+    handleUpload(selectedFile: FileItem, folder?: string): Promise<string | undefined>;
+    /**
+     * @description SecretManager를 이용해서 암호화된 문자열을 평문으로 변환
+     * @param hashedString {}
+     * @returns
+     */
+    getPlainTextByHashed(hashedString: string): Promise<string>;
+    /**
+     *
+     * @description SecretManager를 이용해서 평문을 암호화된 문자열로 변환
+     * @param plainText {string} 평문
+     * @returns
+     */
+    getHashedStringByPlainText(plainText: string): Promise<string>;
+    /**
+     *
+     * @description AES 복호화
+     * @param hashedString {string} 암호화된 문자열
+     * @param secretKey  {string} 비밀키
+     * @returns
+     */
+    private _aesDecode;
+    /**
+     *
+     * @description AES 암호화
+     * @param plainText {string} 평문
+     * @param secretKey {string} 비밀키
+     * @returns
+     */
+    private _aesEncode;
+}
+export {};

package/dist/utils/common.utill.d.ts

@@ -0,0 +1,4 @@
+export declare const getRandomColor: () => string;
+export declare const getColorContrast: (bgColor: string) => "#000000" | "#ffffff";
+export declare const numberToMetricPrefix: (num: number) => string;
+export declare const isNumeric: (value: string) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weing-dev/ui-kit-primitive",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.2",
   "type": "module",
   "exports": {
     ".": {
@@ -13,6 +13,14 @@
   },
   "types": "./dist/index.d.ts",
   "main": "./dist/index.umd.cjs",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.13"
+  },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.717.0",
     "@aws-sdk/client-secrets-manager": "^3.716.0",
@@ -36,10 +44,8 @@
     "qrcode.react": "^4.2.0",
     "quill": "^2.0.3",
     "quill-image-resize-module-react": "^3.0.0",
-    "react": "^19.0.0",
     "react-barcode": "^1.5.3",
     "react-chartjs-2": "^5.2.0",
-    "react-dom": "^19.0.0",
     "react-popper": "^2.3.0",
     "react-quill": "^2.0.0",
     "react-quill-new": "^3.3.3",
@@ -59,7 +65,6 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "eslint-plugin-storybook": "^0.8.0",
     "globals": "^15.14.0",
-    "styled-components": "^6.1.13",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^5.4.11",

package/eslint.config.js

@@ -1,29 +0,0 @@
-import js from "@eslint/js";
-import globals from "globals";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-import tseslint from "typescript-eslint";
-
-export default tseslint.config(
-  { ignores: ["dist"] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ["**/*.{ts,tsx}"],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      "react-hooks": reactHooks,
-      "react-refresh": reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      "@typescript-eslint/no-explicit-any": "off",
-      "react-refresh/only-export-components": [
-        "warn",
-        { allowConstantExport: true },
-      ],
-    },
-  }
-);

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/scripts/icons/setIcon.cjs

@@ -1,151 +0,0 @@
-const fs = require("fs");
-const path = require("node:path");
-
-const assetPath = path.resolve(__dirname, "../../public/static/icon");
-const storyDist = path.resolve(
-  __dirname,
-  "../../src/components/Icon/Icon.stories.tsx"
-);
-const iconComponentDist = path.resolve(
-  __dirname,
-  "../../src/components/Icon/Icon.tsx"
-);
-
-const images = fs
-  .readdirSync(assetPath)
-  .filter((file) => new RegExp(`.\/|.svg`).test(file));
-
-const ext = /\.\w+/gi;
-const snake = /\_(.)/gi;
-const space = /\s(.)/gi;
-
-const rename = (name) => {
-  return name
-    .replace(ext, "")
-    .replace(space, (i) => i[1].toUpperCase())
-    .replace(snake, (i) => i[1].toUpperCase())
-    .split("")
-    .map((char, idx) => (!idx ? char.toUpperCase() : char))
-    .join("");
-};
-
-const storyResult = images.reduce(
-  (acc, name) => {
-    const parseName = rename(name);
-    acc["template"] += `export const ${parseName}:Story = {
-      args: {
-        name: "${parseName}",
-      }
-    };
-
-  
-  `;
-
-    return acc;
-  },
-  {
-    template: "",
-  }
-);
-
-const storyCode = `
-  import React from "react";
-  import type { Meta, StoryObj } from "@storybook/react";
-  import { Icon } from "./Icon";
-  import * as Icons from '../Icons'
-  const meta: Meta<typeof Icon> = {
-    title: "Component/Icon",
-    component: Icon,
-    argTypes: {
-      size: {
-        control: "number",
-      },
-    },
-    decorators: [
-      (Story) => {
-        return (
-          <React.Fragment>
-            <Story />
-          </React.Fragment>
-        );
-      },
-    ],
-  };
-
-  export default meta;
-
-type Story = StoryObj<typeof Icon>;
-
-export const Collection: Story = {
-  render: (args) => {
-    const { color, size } = args;
-    return (
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, 64px)",
-          gap: "16px",
-        }}
-      >
-        {Object.keys(Icons).map((iconName) => {
-          const IconComponent = (
-            <Icon
-              name={iconName as React.ComponentProps<typeof Icon>["name"]}
-              size={size}
-              color={color}
-            />
-          );
-
-          return (
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: "8px",
-              }}
-            >
-              {IconComponent}
-              <span style={{ fontSize: 10 }}>{iconName}</span>
-            </div>
-          );
-        })}
-      </div>
-    );
-  },
-};
-`;
-
-const iconCode = `
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as Icons from "../Icons";
-
-type IconName = keyof typeof Icons;
-type IconsProps = (typeof Icons)[IconName];
-type IconProps = Omit<IconsProps, "size" | "color"> & {
-  name: IconName;
-  color?: string;
-  size?: number;
-  onClick?: (...args: any) => void;
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-export const Icon = (props: IconProps) => {
-  const { name, size = 24, color, ...rest } = props;
-
-  const Component = Icons[name];
-
-  return (
-    <Component
-      width={size}
-      height={size}
-      color={color ?? "var(--simentic-on-surface, #121416)"}
-      {...rest}
-    />
-  );
-};
-`;
-
-fs.writeFileSync(storyDist, storyCode);
-fs.writeFileSync(iconComponentDist, iconCode);

package/scripts/icons/svg-template.cjs

@@ -1,18 +0,0 @@
-const comments = `
-// Auto-generated file created by svgr-cli source svg-template.js
-// Run yarn icons:create to update
-// Do not edit
-`;
-const template = (variables, { tpl }) => {
-  return tpl`
-${comments}
-${variables.imports};
-${variables.interfaces};
-const ${variables.componentName} = (${variables.props}) => (
-  ${variables.jsx}
-);
-${variables.exports};
-`;
-};
-
-module.exports = template;

package/scripts/icons/svgo-config.json

@@ -1,9 +0,0 @@
-{
-  "plugins": [
-    "removeXMLNS",
-    "removeDimensions",
-    "removeUselessStrokeAndFill",
-    "removeMetadata",
-    "removeDoctype"
-  ]
-}