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

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,8 +1,11 @@
 {
   "name": "@weing-dev/ui-kit-primitive",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,21 +16,10 @@
   },
   "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",
-    "@aws-sdk/s3-request-presigner": "^3.717.0",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@faker-js/faker": "^9.3.0",
-    "@popperjs/core": "^2.11.8",
     "@tanstack/react-table": "^8.20.6",
     "chart.js": "^4.4.7",
     "chartjs-adapter-luxon": "^1.3.1",
@@ -36,36 +28,70 @@
     "chartjs-plugin-datalabels": "^2.2.0",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
-    "framer-motion": "^11.15.0",
-    "luxon": "^3.5.0",
-    "qrcode.react": "^4.2.0",
     "quill": "^2.0.3",
-    "quill-image-resize-module-react": "^3.0.0",
-    "react-barcode": "^1.5.3",
+    "react": "^19.0.0",
     "react-chartjs-2": "^5.2.0",
-    "react-popper": "^2.3.0",
+    "react-dom": "^19.0.0",
     "react-quill": "^2.0.0",
     "react-quill-new": "^3.3.3",
+    "styled-components": "^6.1.13",
+    "luxon": "^3.5.0",
+    "zustand": "^5.0.2",
+    "quill-image-resize-module-react": "^3.0.0",
+    "framer-motion": "^11.15.0",
+    "@aws-sdk/client-s3": "^3.717.0",
+    "@aws-sdk/client-secrets-manager": "^3.716.0",
+    "@aws-sdk/s3-request-presigner": "^3.717.0"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@popperjs/core": "^2.11.8",
+    "qrcode.react": "^4.2.0",
+    "react-barcode": "^1.5.3",
+    "react-popper": "^2.3.0",
     "uuid": "^10.0.0",
-    "vite-tsconfig-paths": "^5.1.4",
-    "zustand": "^5.0.2"
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
     "@eslint/js": "^9.17.0",
+    "@faker-js/faker": "^9.3.0",
+    "@tanstack/react-table": "^8.20.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
+    "chart.js": "^4.4.7",
+    "chartjs-adapter-luxon": "^1.3.1",
+    "chartjs-chart-funnel": "^4.2.4",
+    "chartjs-plugin-annotation": "^3.1.0",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.13",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "eslint-plugin-storybook": "^0.8.0",
     "globals": "^15.14.0",
+    "quill": "^2.0.3",
+    "react-chartjs-2": "^5.2.0",
+    "react-quill": "^2.0.0",
+    "react-quill-new": "^3.3.3",
+    "rollup-plugin-visualizer": "^5.14.0",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^5.4.11",
-    "vite-plugin-dts": "^4.4.0"
+    "vite-plugin-dts": "^4.4.0",
+    "luxon": "^3.5.0",
+    "zustand": "^5.0.2",
+    "quill-image-resize-module-react": "^3.0.0",
+    "framer-motion": "^11.15.0",
+    "@aws-sdk/client-s3": "^3.717.0",
+    "@aws-sdk/client-secrets-manager": "^3.716.0",
+    "@aws-sdk/s3-request-presigner": "^3.717.0"
   },
   "scripts": {
     "dev": "vite",

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>