@lotte-innovate/ui-component-test 0.0.9 → 0.0.10

package/README.md

@@ -1,163 +1,163 @@
-# radix-ui 라이브러리 활용 Storybook UI Component 만들기
-
-<br />
-
-## 사전 설치 라이브러리
-
-- radix-ui
-  - 주요 컴포넌트 사용 시 활용할 Headless UI 라이브러리
-
-```shell
-npm install @radix-ui/react-popover@latest -E
-```
-
-- storybook
-  - 컴포넌트 관리를 위해 사용
-
-```shell
-npx sb init
-npx storybook@latest add @storybook/addon-styling-webpack
-```
-
-- clsx
-  - 조건부 className 작성을 위해 사용
-
-```shell
-npm i clsx
-```
-
-- tailwind-merge
-  - 스타일 충돌 없이 자바스크립트에서 tailwind CSS 클래스를 효율적으로 병합하는 기능을 가진 라이브러리
-
-```shell
-npm i tailwind-merge
-```
-
-- class-variance-authority (CVA)
-  - 일관성 있는 UI를 정의하고 사용할 수 있도록 도와주는 툴로써 shadcn/ui 컴포넌트의 핵심 도구
-
-```shell
-npm i class-variance-authority
-```
-
-<br />
-
-## 실행
-
-- 스토리북 실행
-
-```shell
-npm run storybook
-```
-
-> 접속주소(포트 6006 사용 시): `http://localhost:6006`
-
-- 웹페이지 실행
-
-```shell
-npm run dev
-```
-
-> 접속주소(포트 3000 사용 시): `http://localhost:3000`
-
-## package publish
-
-- 타입스크립트 컴파일
-
-```shell
-npm run publish:npm
-```
-
-- npm package 배포 시
-
-  - npm 로그인
-
-  ```shell
-  npm login
-  ```
-
-  - package.json 버전 수정 후 컴파일 진행
-
-  ```shell
-  npm run publish:npm
-  ```
-
-  - 패키지 배포
-
-  ```shell
-  npm publish
-  ```
-
-  - npm scope 배포
-    - npm 로그인 후, 조직 생성 시 @계정명 으로 scope 생성 
-  scope로 생성된 패키지는 npm publish 시, 아래 옵션 추가 
-
-  ```shell
-  npm publish --access=public
-  ```
-
-
-- npm package 미배포시
-
-  - package.json 버전 수정 후 컴파일 진행
-
-  ```shell
-  npm run publish:npm
-  ```
-
-  - dist/ 파일 및 설정파일 추출 후 전달
-
-## 사용자 이용 방법
-
-### npm 배포 시
-
-- npm package 설치
-
-```sh
-npm install <package_name>
-```
-
-### npm 미배포시
-
-- 전달 받은 package 모듈 파일을 node_modules/ 폴더에 추가
-
-### tailwind 설정 방법
-
-- tailwind config 파일 설정
-
-```js
-// tailwind.config.ts
-import type { Config } from 'tailwindcss';
-// UI 라이브러리 tailwind config 파일 호출
-// >>>>>>>> 추가
- const packageTailwindConfig = require('ui-component-test/tailwind.config.js');
-// >>>>>>>>
-
-const config: Config = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx,zip}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx,zip}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx,zip}',
-// 해당 프로젝트 css 표준 컴포넌트에 적용 가능
-// >>>>>>>> 추가
-    './node_modules/ui-component-test/**/*.{js,ts,jsx,tsx,mdx,zip}',
-// >>>>>>>>
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-      colors: {},
-// UI 라이브러리 tailwind config 파일 적용
-// >>>>>>>> 추가
-      ...packageTailwindConfig?.theme?.extend,
-// >>>>>>>>
-    },
-  },
-  plugins: [],
-};
-export default config;
-
-```
+# radix-ui 라이브러리 활용 Storybook UI Component 만들기
+
+<br />
+
+## 사전 설치 라이브러리
+
+- radix-ui
+  - 주요 컴포넌트 사용 시 활용할 Headless UI 라이브러리
+
+```shell
+npm install @radix-ui/react-popover@latest -E
+```
+
+- storybook
+  - 컴포넌트 관리를 위해 사용
+
+```shell
+npx sb init
+npx storybook@latest add @storybook/addon-styling-webpack
+```
+
+- clsx
+  - 조건부 className 작성을 위해 사용
+
+```shell
+npm i clsx
+```
+
+- tailwind-merge
+  - 스타일 충돌 없이 자바스크립트에서 tailwind CSS 클래스를 효율적으로 병합하는 기능을 가진 라이브러리
+
+```shell
+npm i tailwind-merge
+```
+
+- class-variance-authority (CVA)
+  - 일관성 있는 UI를 정의하고 사용할 수 있도록 도와주는 툴로써 shadcn/ui 컴포넌트의 핵심 도구
+
+```shell
+npm i class-variance-authority
+```
+
+<br />
+
+## 실행
+
+- 스토리북 실행
+
+```shell
+npm run storybook
+```
+
+> 접속주소(포트 6006 사용 시): `http://localhost:6006`
+
+- 웹페이지 실행
+
+```shell
+npm run dev
+```
+
+> 접속주소(포트 3000 사용 시): `http://localhost:3000`
+
+## package publish
+
+- 타입스크립트 컴파일
+
+```shell
+npm run publish:npm
+```
+
+- npm package 배포 시
+
+  - npm 로그인
+
+  ```shell
+  npm login
+  ```
+
+  - package.json 버전 수정 후 컴파일 진행
+
+  ```shell
+  npm run publish:npm
+  ```
+
+  - 패키지 배포
+
+  ```shell
+  npm publish
+  ```
+
+  - npm scope 배포
+    - npm 로그인 후, 조직 생성 시 @계정명 으로 scope 생성 
+  scope로 생성된 패키지는 npm publish 시, 아래 옵션 추가 
+
+  ```shell
+  npm publish --access=public
+  ```
+
+
+- npm package 미배포시
+
+  - package.json 버전 수정 후 컴파일 진행
+
+  ```shell
+  npm run publish:npm
+  ```
+
+  - dist/ 파일 및 설정파일 추출 후 전달
+
+## 사용자 이용 방법
+
+### npm 배포 시
+
+- npm package 설치
+
+```sh
+npm install <package_name>
+```
+
+### npm 미배포시
+
+- 전달 받은 package 모듈 파일을 node_modules/ 폴더에 추가
+
+### tailwind 설정 방법
+
+- tailwind config 파일 설정
+
+```js
+// tailwind.config.ts
+import type { Config } from 'tailwindcss';
+// UI 라이브러리 tailwind config 파일 호출
+// >>>>>>>> 추가
+ const packageTailwindConfig = require('ui-component-test/tailwind.config.js');
+// >>>>>>>>
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx,zip}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx,zip}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx,zip}',
+// 해당 프로젝트 css 표준 컴포넌트에 적용 가능
+// >>>>>>>> 추가
+    './node_modules/ui-component-test/**/*.{js,ts,jsx,tsx,mdx,zip}',
+// >>>>>>>>
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+      colors: {},
+// UI 라이브러리 tailwind config 파일 적용
+// >>>>>>>> 추가
+      ...packageTailwindConfig?.theme?.extend,
+// >>>>>>>>
+    },
+  },
+  plugins: [],
+};
+export default config;
+
+```

package/dist/Typography/Header/index.d.ts

@@ -6,7 +6,7 @@ export interface HeaderProps extends VariantProps<typeof headerVariants> {
 }
 declare let headerVariants: (props?: ({
     weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
-    headers?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+    headers?: "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
     color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const Header: React.ForwardRefExoticComponent<Omit<import("@radix-ui/themes").HeadingProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & HeaderProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/Typography/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Header } from './Header';
-export { default as Text } from './Text';
+export { default as Header } from './Header';
+export { default as Text } from './Text';

package/dist/Typography/index.js

@@ -1,3 +1,3 @@
-// Typography
-export { default as Header } from '../Typography/Header';
-export { default as Text } from '../Typography/Text';
+// Typography
+export { default as Header } from './Header';
+export { default as Text } from './Text';

package/dist/app/page.d.ts

@@ -1 +1 @@
-export default function Home(): false | import("react/jsx-runtime").JSX.Element;
+export default function Home(): import("react/jsx-runtime").JSX.Element;

package/dist/app/page.js

@@ -1,25 +1,6 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import Theme from './template/theme';
-import BadgeTemplate from './template/badgeTemplate';
-import ButtonTemplate from './template/buttonTemplate';
-import TextTemplate from './template/textTemplate';
-import Button from 'components/Button';
-import { Toast, ToastActionButton, ToastDescription } from 'components/Toast';
+import { jsx as _jsx } from "react/jsx-runtime";
+// import { Button } from '@lotte-innovate/ui-component-test';
 export default function Home() {
-    var _a = useState('full'), radiusTheme = _a[0], setRadiusTheme = _a[1];
-    var _b = useState('95%'), scalingTheme = _b[0], setScalingTheme = _b[1];
-    var _c = useState('semibold'), fontWeightTheme = _c[0], setFontWeightTheme = _c[1];
-    var _d = useState('blue'), colorTheme = _d[0], setColorTheme = _d[1];
-    var _e = useState('blue'), fontColorTheme = _e[0], setFontColorTheme = _e[1];
-    var _f = useState('light'), mode = _f[0], setMode = _f[1];
-    var _g = useState(false), mounted = _g[0], setMounted = _g[1];
-    var _h = useState(false), open = _h[0], setOpen = _h[1];
-    useEffect(function () {
-        setMounted(true);
-    }, []);
-    return (mounted && (_jsxs("div", { className: "flex flex-col w-full h-auto min-h-screen ".concat(mode == 'light' ? 'bg-white text-black' : 'bg-black text-white', " p-3"), children: [_jsx("div", { onClick: function () {
-                    setMode(mode === 'light' ? 'dark' : 'light');
-                }, children: mode === 'light' ? 'light' : 'dark' }), _jsx(Button, { onClick: function () { return setOpen(true); }, className: "w-[200px]", scaling: '95%', children: "toast" }), _jsxs(Toast, { openToast: open, setOpenToast: setOpen, children: [_jsx(ToastDescription, { children: "There was a problem with your request." }), _jsx(ToastActionButton, { altText: "\uC561\uC158\uBC84\uD2BC", children: "\uBC84\uD2BC" })] }), _jsx(Theme, { setRadiusTheme: setRadiusTheme, setScalingTheme: setScalingTheme, setFontWeightTheme: setFontWeightTheme, setColorTheme: setColorTheme, setFontColorTheme: setFontColorTheme, mode: mode }), _jsx(BadgeTemplate, { radiusTheme: radiusTheme, scalingTheme: scalingTheme, fontWeightTheme: fontWeightTheme, colorTheme: colorTheme, mode: mode }), _jsx(ButtonTemplate, { radiusTheme: radiusTheme, scalingTheme: scalingTheme, fontWeightTheme: fontWeightTheme, colorTheme: colorTheme, mode: mode }), _jsx(TextTemplate, { scalingTheme: scalingTheme, fontWeightTheme: fontWeightTheme, colorTheme: fontColorTheme, mode: mode })] })));
+    return _jsx("div", {});
 }

package/dist/components/Input/Input.stories.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { InputProps } from './index';
+import { IRadius, IScaling, IWeight } from '../../types';
+declare const meta: {
+    title: string;
+    component: ({ radius, scaling, weight, color, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+        themes: {
+            themeOverride: string;
+        };
+        docs: {
+            page: null;
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        radius: {
+            options: IRadius[];
+            control: {
+                type: string;
+            };
+            description: string;
+            defaultValue: {
+                summary: string;
+            };
+        };
+        scaling: {
+            options: IScaling[];
+            control: {
+                type: string;
+            };
+            description: string;
+            defaultValue: {
+                summary: string;
+            };
+        };
+        weight: {
+            options: IWeight[];
+            control: {
+                type: string;
+            };
+            description: string;
+            defaultValue: {
+                summary: string;
+            };
+        };
+        onChange: {
+            table: {
+                category: string;
+            };
+        };
+        color: {
+            options: import("../../types").IColor[];
+            description: string;
+            defaultValue: {
+                summary: string;
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+    args: {
+        onClick: import("@vitest/spy").Mock<[event: import("react").MouseEvent<HTMLInputElement, MouseEvent>], void>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Radius: (args: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Scaling: (args: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Weight: (args: InputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,74 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fn } from '@storybook/test';
+import { Input } from './index';
+import { radiusOptions, scalingOptions, weightOptions } from '../../../src/constants';
+import { colorOptions } from 'color/constants';
+var meta = {
+    title: '작업중/Input',
+    component: Input,
+    parameters: {
+        layout: 'centered',
+        themes: {
+            themeOverride: 'dark',
+        },
+        docs: {
+            page: null,
+            description: {
+                component: '',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        radius: {
+            options: radiusOptions,
+            control: { type: 'select' },
+            description: '둥글기',
+            defaultValue: { summary: 'small' },
+        },
+        scaling: {
+            options: scalingOptions,
+            control: { type: 'select' },
+            description: '크기',
+            defaultValue: { summary: '100%' },
+        },
+        weight: {
+            options: weightOptions,
+            control: { type: 'select' },
+            description: '폰트 두께',
+            defaultValue: { summary: 'normal' },
+        },
+        onChange: {
+            table: {
+                category: 'EVENT HANDLER',
+            },
+        },
+        color: {
+            options: colorOptions,
+            description: 'background color',
+            defaultValue: { summary: 'blue' },
+            control: { type: 'select' },
+        },
+    },
+    args: {
+        onClick: fn(),
+    },
+};
+export default meta;
+export var Default = {
+    args: {},
+};
+export var Radius = function (args) { return (_jsx("div", { className: "flex space-x-2", children: radiusOptions.map(function (radius) { return (_jsx(Input, __assign({}, args, { radius: radius }), radius)); }) })); };
+export var Scaling = function (args) { return (_jsx("div", { className: "flex items-center space-x-2", children: scalingOptions.map(function (scaling) { return (_jsx(Input, __assign({}, args, { scaling: scaling }), scaling)); }) })); };
+export var Weight = function (args) { return (_jsx("div", { className: "flex items-center space-x-2", children: weightOptions.map(function (weight) { return (_jsx(Input, __assign({}, args, { weight: weight }), weight)); }) })); };

package/dist/components/Input/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { IColor } from '../../types';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+    color?: IColor;
+}
+declare const inputVariants: (props?: ({
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+    scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+    weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
+    color?: string | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const Input: ({ radius, scaling, weight, color, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/components/Input/index.js

@@ -0,0 +1,53 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/utils';
+import { bgColorStyle, radiusVariants, weightVariants } from '../../constants';
+var inputVariants = cva('inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+    variants: {
+        radius: __assign({}, radiusVariants['base']),
+        scaling: {
+            '90%': 'text-xs py-1 px-2',
+            '95%': 'text-sm py-1 px-2',
+            '100%': 'text-base py-2 px-6',
+            '105%': 'text-lg py-3 px-6',
+            '110%': 'text-xl py-3 px-6',
+        },
+        weight: __assign({}, weightVariants),
+        color: bgColorStyle(),
+    },
+    defaultVariants: {
+        radius: 'small',
+    },
+});
+export var Input = function (_a) {
+    var radius = _a.radius, scaling = _a.scaling, weight = _a.weight, color = _a.color, props = __rest(_a, ["radius", "scaling", "weight", "color"]);
+    return (_jsx("input", __assign({ className: cn(inputVariants({
+            radius: radius,
+            scaling: scaling,
+            weight: weight,
+            color: color,
+        })) }, props)));
+};
+export default Input;

package/dist/components/Tooltip/index.d.ts

@@ -11,7 +11,7 @@ export interface TooltipProps extends React.InputHTMLAttributes<HTMLInputElement
     side?: 'top' | 'right' | 'bottom' | 'left';
 }
 declare const tooltipVariants: (props?: ({
-    scaling?: number | typeof Symbol.iterator | typeof Symbol.unscopables | "toString" | "concat" | "indexOf" | "lastIndexOf" | "slice" | "length" | "includes" | "at" | "map" | "filter" | "fill" | "values" | "toLocaleString" | "join" | "every" | "some" | "forEach" | "reduce" | "reduceRight" | "find" | "findIndex" | "entries" | "keys" | "flatMap" | "flat" | "findLast" | "findLastIndex" | "toReversed" | "toSorted" | "toSpliced" | "with" | "pop" | "push" | "reverse" | "shift" | "sort" | "splice" | "unshift" | "copyWithin" | null | undefined;
+    scaling?: number | typeof Symbol.iterator | typeof Symbol.unscopables | "map" | "filter" | "fill" | "values" | "concat" | "indexOf" | "lastIndexOf" | "slice" | "length" | "includes" | "at" | "toLocaleString" | "toString" | "pop" | "push" | "join" | "reverse" | "shift" | "sort" | "splice" | "unshift" | "every" | "some" | "forEach" | "reduce" | "reduceRight" | "find" | "findIndex" | "copyWithin" | "entries" | "keys" | "flatMap" | "flat" | "findLast" | "findLastIndex" | "toReversed" | "toSorted" | "toSpliced" | "with" | null | undefined;
     weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
     radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     color?: string | null | undefined;

package/dist/components/index.d.ts

@@ -40,8 +40,6 @@ export { default as Toast } from './Toast';
 export { default as Toggle } from './Toggle';
 export { default as ToggleGroup } from './ToggleGroup';
 export { default as ToggleSwitch } from './ToggleSwitch';
-export { default as Header } from '../Typography/Header';
-export { default as Text } from '../Typography/Text';
 export { default as BubbleChart } from './BubbleChart';
 export { default as RadarChart } from './RadarChart';
 export { default as PieChart } from './PieChart';

package/dist/index.d.ts

@@ -1,5 +1,2 @@
-// components 디렉토리 내의 모든 타입 선언을 내보냄
-export * from './components';
-
-// typography 디렉토리 내의 모든 타입 선언을 내보냄
-export * from './Typography';
+export * from './components';
+export * from './Typography';

package/dist/index.js

@@ -1,5 +1,2 @@
-// components 디렉토리 내의 모든 파일을 내보냄
 export * from './components';
-
-// typography 디렉토리 내의 모든 파일을 내보냄
 export * from './Typography';