@lotte-innovate/ui-component-test 0.2.24 → 0.2.26

package/dist/lib/types.d.ts

@@ -0,0 +1,85 @@
+import { ComponentProps } from 'react';
+import { Theme, Slider as SliderTheme } from '@radix-ui/themes';
+export type IRadius = 'none' | 'small' | 'medium' | 'large' | 'full';
+export type IScaling = '90%' | '95%' | '100%' | '105%' | '110%';
+export type IWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+export type ITheme = 'light' | 'dark';
+export type ITypoSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+export type ISize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+export type IAppearance = 'classic' | 'solid' | 'soft' | 'surface' | 'outline' | 'ghost';
+export type PointStyle = 'circle' | 'cross' | 'crossRot' | 'dash' | 'line' | 'rect' | 'rectRounded' | 'rectRot' | 'star' | 'triangle' | false;
+export type IColor = 'slate' | 'olive' | 'sand' | 'tomato' | 'red' | 'ruby' | 'crimson' | 'pink' | 'plum' | 'purple' | 'violet' | 'iris' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'jade' | 'green' | 'grass' | 'brown' | 'bronze' | 'gold' | 'sky' | 'mint' | 'lime' | 'yellow' | 'amber' | 'orange' | 'black' | 'white';
+export type IDarkColor = 'blackDark' | 'whiteDark' | 'slateDark' | 'oliveDark' | 'sandDark' | 'tomatoDark' | 'redDark' | 'rubyDark' | 'crimsonDark' | 'pinkDark' | 'plumDark' | 'purpleDark' | 'violetDark' | 'irisDark' | 'indigoDark' | 'blueDark' | 'cyanDark' | 'tealDark' | 'jadeDark' | 'greenDark' | 'grassDark' | 'brownDark' | 'bronzeDark' | 'goldDark' | 'skyDark' | 'mintDark' | 'limeDark' | 'yellowDark' | 'amberDark' | 'orangeDark' | 'slateDarkA' | 'oliveDarkA' | 'sandDarkA' | 'tomatoDarkA' | 'redDarkA' | 'rubyDarkA' | 'crimsonDarkA' | 'pinkDarkA' | 'plumDarkA' | 'purpleDarkA' | 'violetDarkA' | 'irisDarkA' | 'indigoDarkA' | 'blueDarkA' | 'cyanDarkA' | 'tealDarkA' | 'jadeDarkA' | 'greenDarkA' | 'grassDarkA' | 'brownDarkA' | 'bronzeDarkA' | 'goldDarkA' | 'skyDarkA' | 'mintDarkA' | 'limeDarkA' | 'yellowDarkA' | 'amberDarkA' | 'orangeDarkA';
+export type IAlphaColor = 'slateA' | 'oliveA' | 'sandA' | 'tomatoA' | 'redA' | 'rubyA' | 'crimsonA' | 'pinkA' | 'plumA' | 'purpleA' | 'violetA' | 'irisA' | 'indigoA' | 'blueA' | 'cyanA' | 'tealA' | 'jadeA' | 'greenA' | 'grassA' | 'brownA' | 'bronzeA' | 'goldA' | 'skyA' | 'mintA' | 'limeA' | 'yellowA' | 'amberA' | 'orangeA';
+export type IChartTitle = {
+    text?: string | string[];
+    display?: boolean;
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    font?: {
+        size?: number;
+        weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
+        lineHeight?: number;
+    };
+};
+export type IChartLegend = {
+    display?: boolean;
+    align?: 'start' | 'center' | 'end';
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    maxHeight?: number;
+    maxWidth?: number;
+    fullSize?: boolean;
+    reverse?: boolean;
+    labels?: {
+        boxWidth?: number;
+        boxHeight?: number;
+        padding?: number;
+        textAlign?: 'left' | 'right' | 'center';
+        color?: string;
+        usePointStyle?: boolean;
+        pointStyle?: PointStyle;
+        pointStyleWidth?: number;
+        useBorderRadius?: boolean;
+        borderRadius?: number;
+    };
+    rtl?: boolean;
+    textDirection?: 'rtl' | 'ltr';
+    title?: {
+        color?: string;
+        display?: boolean;
+        padding?: number;
+        text?: string;
+    };
+};
+export type IChartDatasets = {
+    label?: string;
+    backgroundColor?: string[] | string;
+    borderColor?: string[] | string;
+    borderWidth?: number;
+    borderRadius?: number;
+    borderDash?: number[];
+    borderDashOffset?: number;
+    hoverBackgroundColor?: string;
+    hoverBorderColor?: string;
+    hoverBorderWidth?: number;
+    pointStyle?: PointStyle;
+    offset?: number;
+    spacing?: number;
+    weight?: number;
+    order?: number;
+    hidden?: boolean;
+};
+export type IChartDataLabels = {
+    display?: boolean;
+    color?: string;
+    align?: 'start' | 'center' | 'end' | number;
+    backgroundColor?: string | ((context: any) => string);
+    borderColor?: string;
+    borderRadius?: number;
+    borderWidth?: number;
+    font?: object;
+    formatter?: (x: number) => number;
+    padding?: number;
+};
+export type IExtendedAccentColor = ComponentProps<typeof Theme>['accentColor'] & IColor;
+export type IExtendedThemeColor = ComponentProps<typeof SliderTheme>['color'] & IColor;

package/dist/lib/utils/classPrefixes.d.ts

@@ -0,0 +1,3 @@
+export declare const classPrefixesByScale: {
+    [key: string]: number[];
+};

package/dist/lib/utils/classPrefixes.js

@@ -0,0 +1,29 @@
+export var classPrefixesByScale = {
+    fill: [9, 12],
+    border: [4, 6, 7, 8, 9],
+    bg: [1, 2, 3, 4, 5, 6, 7, 9, 10, 12],
+    text: [1, 8, 9, 10, 11, 12],
+    'focus:bg': [9],
+    'hover:bg': [2, 3, 4, 6, 9, 10],
+    'hover:border': [4, 6, 7, 8, 9],
+    'hover:text': [1, 10, 11, 12],
+    'hover:fill': [1, 12],
+    'active:bg': [3, 4, 5, 6, 8, 9, 10],
+    'active:border': [6, 8, 9],
+    'active:text': [10, 11, 12],
+    'data-[state=on]:bg': [3, 4, 5, 9, 10],
+    'data-[state=on]:border': [8, 9],
+    'data-[state=on]:text': [1, 11],
+    'data-[state=on]:hover:bg': [2, 3, 4, 10],
+    'data-[state=on]:hover:border': [8, 9],
+    'data-[state=on]:hover:text': [1, 11],
+    'data-[state=open]:bg': [5],
+    'data-[state=checked]:bg': [2, 3, 5, 6, 7, 9, 10],
+    'data-[state=checked]:border': [6],
+    'data-[state=checked]:text': [1, 8, 11],
+    'data-[state=unchecked]:bg': [2, 3, 5, 6, 7],
+    'data-[state=unchecked]:border': [4, 6, 7, 8, 9],
+    'data-[state=unchecked]:text': [8],
+    'aria-selected:bg': [9],
+    'aria-selected:hover:bg': [9],
+};

package/dist/lib/utils/useDarkMode.d.ts

@@ -0,0 +1 @@
+export declare const useDarkMode: (isRAxes?: boolean) => any[];

package/dist/lib/utils/useDarkMode.js

@@ -0,0 +1,50 @@
+'use client';
+import { slateA, slateDarkA } from '../../lib/color/alpha';
+import { useEffect, useState } from 'react';
+export var useDarkMode = function (isRAxes) {
+    if (isRAxes === void 0) { isRAxes = false; }
+    var lightmode = {};
+    var darkmode = {};
+    if (isRAxes === true) {
+        lightmode = {
+            r: { grid: { color: slateA[8] } },
+        };
+        darkmode = {
+            r: { grid: { color: slateDarkA[8] }, ticks: { backdropColor: 'rgba(0, 0, 0, 0)' } },
+        };
+    }
+    else {
+        lightmode = {
+            x: { grid: { color: slateA[8] } },
+            y: { grid: { color: slateA[8] } },
+        };
+        darkmode = {
+            x: { grid: { color: slateDarkA[8] } },
+            y: { grid: { color: slateDarkA[8] } },
+        };
+    }
+    var _a = useState(checkDarkMode()), isDarkMode = _a[0], setIsDarkMode = _a[1];
+    var _b = useState({
+        linescale: {},
+    }), defaultOptions = _b[0], setDefaultOptions = _b[1];
+    function checkDarkMode() {
+        return document.body.classList.contains('dark');
+    }
+    useEffect(function () {
+        setIsDarkMode(checkDarkMode());
+        setDefaultOptions({ linescale: !checkDarkMode() ? lightmode : darkmode });
+        var mutationObserver = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.attributeName === 'class') {
+                    setIsDarkMode(checkDarkMode());
+                    setDefaultOptions({ linescale: !checkDarkMode() ? lightmode : darkmode });
+                }
+            });
+        });
+        mutationObserver.observe(document.body, { attributes: true });
+        return function () {
+            mutationObserver.disconnect();
+        };
+    }, []);
+    return [isDarkMode, defaultOptions];
+};

package/dist/lib/utils/useWindowSize.d.ts

@@ -0,0 +1 @@
+export declare function useWindowSize(): number;

package/dist/lib/utils/useWindowSize.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+var MIN_SIZE = 250;
+export function useWindowSize() {
+    var _a = useState(MIN_SIZE), size = _a[0], setSize = _a[1];
+    useEffect(function () {
+        function handleResize() {
+            var width = 130 + window.innerWidth * 0.15;
+            width = Math.max(width, MIN_SIZE);
+            width = Math.min(width, 300);
+            setSize(width);
+        }
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return size;
+}

package/dist/tailwind.config.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -7,7 +18,29 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+import * as lightColors from './lib/color/light';
+import * as darkColors from './lib/color/dark';
+import * as alphaColors from './lib/color/alpha';
+import { colorOptions, alphaColorOptions, darkColorOptions } from './lib/color/constants';
+import { classPrefixesByScale } from './lib/utils/classPrefixes';
 var classes = [];
+var allColorOptions = [colorOptions, alphaColorOptions];
+var generateClasses = function (colorList, mode) {
+    return colorList.flatMap(function (color) {
+        return Object.entries(classPrefixesByScale).flatMap(function (_a) {
+            var key = _a[0], values = _a[1];
+            return values.map(function (value) {
+                return mode ? "".concat(mode).concat(key, "-").concat(color, "-").concat(value) : "".concat(key, "-").concat(color, "-").concat(value);
+            });
+        });
+    });
+};
+allColorOptions.forEach(function (options) {
+    classes = classes.concat(generateClasses(options));
+});
+[darkColorOptions].forEach(function (options) {
+    classes = classes.concat(generateClasses(options, 'dark:'));
+});
 var config = {
     content: ['./src/**/*.{js,ts,jsx,tsx,mdx,zip}'],
     safelist: __spreadArray([], classes, true),
@@ -16,8 +49,73 @@ var config = {
             fontFamily: {
                 sans: ['Noto Sans KR', 'sans-serif', 'Nunito Sans', 'Helvetica Neue', 'Helvetica', 'Arial'],
             },
+            backgroundImage: {
+                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+                'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+            },
+            colors: __assign(__assign(__assign({ danger: '#C40006', warning: '#AB6400', success: '#00713F', information: '#00749E' }, formatColors(lightColors)), formatColors(darkColors)), formatColors(alphaColors)),
+            // radix tailwind
+            keyframes: {
+                overlayShow: {
+                    from: { opacity: '0' },
+                    to: { opacity: '1' },
+                },
+                contentShow: {
+                    from: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' },
+                    to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
+                },
+                slideDown: {
+                    from: { height: '0px' },
+                    to: { height: 'var(--radix-accordion-content-height)' },
+                },
+                slideUp: {
+                    from: { height: 'var(--radix-accordion-content-height)' },
+                    to: { height: '0px' },
+                },
+            },
+            animation: {
+                overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+                contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+                slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+                slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+            },
+            boxShadow: {
+                'button-classic': '0px 0px 0px 1px #00002D17 inset, 0px -2px 1px 0px #0000330F inset, 0px 4px 2px -2px #FFFFFFB2 inset, 0px 2px 1px -1px #FFFFFFB2 inset',
+                'checkbox-classic': '0px 0px 0px 1px #00002D17 inset, 0px -2px 1px 0px #0000330F inset, 0px 4px 2px -2px #FFFFFF66 inset, 0px 2px 1px -1px #FFFFFF66 inset',
+                'button-dark-classic': '0px 0px 0px 1px #414142 inset, 0px -2px 1px 0px #414142 inset, 0px 4px 2px -2px #414142 inset, 0px 2px 1px -1px #414142 inset',
+                'card-classic': '0px 0px 0px 0.5px #0000000D, 0px 1px 4px 0px #00002D17, 0px 2px 1px -1px #0000000D, 0px 1px 3px 0px #0000000D',
+                'card-dark-classic': '0px 0px 0px 0.5px #414142, 0px 1px 4px 0px #414142, 0px 2px 1px -1px #414142, 0px 1px 3px 0px #414142',
+                'segmented-control-dark-classic': '0px 0px 0px 0.5px #0000000D, 0px 1px 4px 0px #363636, 0px 2px 1px -1px #0000000D, 0px 1px 3px 0px #0000000D',
+            },
+            flex: {
+                '6': '6 6 0%',
+            },
         },
     },
+    plugins: [
+        function (_a) {
+            var addVariant = _a.addVariant;
+            addVariant('data-placeholder', '&:where([data-placeholder])');
+        },
+    ],
     darkMode: 'class',
 };
+/**
+ * tailwind 방식으로 변경
+ * ex) bg-yellow-3
+ */
+function formatColors(colors) {
+    var formatcolors = {};
+    for (var _i = 0, _a = Object.entries(colors); _i < _a.length; _i++) {
+        var _b = _a[_i], cn = _b[0], c = _b[1];
+        for (var _c = 0, _d = Object.entries(c); _c < _d.length; _c++) {
+            var _e = _d[_c], scale = _e[0], value = _e[1];
+            if (!scale) {
+                continue;
+            }
+            formatcolors["".concat(cn, "-").concat(scale)] = value;
+        }
+    }
+    return formatcolors;
+}
 export default config;