@shoplflow/base 0.4.0 → 0.6.0

package/dist/utils/type/ComponentProps.d.ts

@@ -0,0 +1,134 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from 'react';
+import type React from 'react';
+import type { BorderRadiusTokens, ColorTokens } from '../../styles';
+/**
+ * HTML 태그에 대한 타입
+ */
+export type StringElementType = ElementType & string;
+/**
+ * Ref를 제외한 HTMLProps를 반환합니다.
+ * Generic으로 HTML 태그를 받습니다.
+ */
+export type HTMLPropsWithOutRef<T extends StringElementType> = ComponentPropsWithoutRef<T>;
+export interface DisableProps {
+    /**
+     * 비활성화 여부를 설정합니다.
+     */
+    disabled?: boolean;
+}
+export interface SelectedProps {
+    /**
+     * 선택 여부를 설정합니다.
+     */
+    isSelected?: boolean;
+}
+export interface DefaultSelectedProps {
+    /**
+     * 기본 선택 여부를 설정합니다.
+     *
+     * SelectedProps보다 우선적으로 적용됩니다.
+     */
+    defaultSelected?: boolean;
+}
+/**
+ * RadiusBooleanProps는 RadiusProps와 함께 사용할 수 없습니다.
+ */
+export interface RadiusBooleanProps {
+    /**
+     * Radius를 토글할 수 있는 옵션입니다.
+     */
+    radius?: boolean;
+}
+export interface RadiusProps {
+    /**
+     * Radius를 설정합니다.
+     */
+    radius?: BorderRadiusTokens;
+}
+export type RenderConfigProps = {
+    /**
+     * 랜더하려고 하는 HTML tag로 변환할 수 있습니다.
+     *
+     * 예를 들어 a tag로 변환한다면 as='a'로 작성해주세요.
+     *
+     * @see https://emotion.sh/docs/styled#as-prop
+     */
+    as?: StringElementType;
+};
+export interface SizeVariantProps<Size> {
+    /**
+     * 컴포넌트의 크기를 설정합니다.
+     */
+    sizeVar?: Size;
+}
+export interface StyleVariantProps<Style> {
+    /**
+     * 컴포넌트의 스타일을 설정합니다.
+     */
+    styleVar?: Style;
+}
+export interface ChildrenProps<Children = React.ReactNode> {
+    /**
+     * 컴포넌트 내부에 들어갈 children을 설정합니다.
+     */
+    children?: Children;
+}
+export interface TextProps {
+    /**
+     * 텍스트를 설정합니다.
+     */
+    text?: string;
+}
+export interface ColorTokenProps {
+    /**
+     * 텍스트 혹은 아이콘의 색상을 설정합니다.
+     * styleVar이 있는 경우 메인색상을 설정합니다.
+     */
+    color?: ColorTokens;
+}
+export interface BorderColorProps {
+    /**
+     * 테두리의 색상을 설정합니다.
+     */
+    borderColor?: ColorTokens;
+}
+export interface BackgroundColorProps {
+    /**
+     * 배경의 색상을 설정합니다.
+     */
+    background?: ColorTokens;
+}
+export interface IconSourceProps {
+    /**
+     * Icon을 설정합니다.
+     */
+    iconSource?: HTMLOrSVGElement;
+}
+export interface LeftNodeProps {
+    /**
+     * 텍스트를 기준으로 왼쪽에 위치할 ReactNode를 설정합니다.
+     */
+    leftSource?: ReactNode;
+}
+export interface RightNodeProps {
+    /**
+     * 텍스트를 기준으로 오른쪽에 위치할 ReactNode를 설정합니다.
+     */
+    rightSource?: ReactNode;
+}
+export interface LeftAndRightNodeProps extends RightNodeProps, LeftNodeProps {
+}
+export interface LeftElementProps {
+    /**
+     * 텍스트를 기준으로 왼쪽에 위치할 ReactElement를 설정합니다.
+     */
+    leftSource?: ReactElement;
+}
+export interface RightElementProps {
+    /**
+     * 텍스트를 기준으로 오른쪽에 위치할 ReactElement를 설정합니다.
+     */
+    rightSource?: ReactElement;
+}
+export interface LeftAndRightElementProps extends RightElementProps, LeftElementProps {
+}

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "license": "Apache-2.0",
-  "module": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
-    "./styles": "./dist/index.css",
+    "./styles": "./dist/global.css",
     "./package.json": "./package.json"
   },
   "main": "dist/index.cjs",
@@ -29,48 +29,65 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "storybook": "^7.3.1",
-    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@storybook/addon-actions": "^7.3.2",
-    "@storybook/addon-backgrounds": "^7.3.2",
-    "@storybook/addon-controls": "^7.3.2",
-    "@storybook/addon-docs": "^7.3.1",
-    "@storybook/addon-essentials": "^7.3.1",
-    "@storybook/addon-interactions": "^7.3.1",
-    "@storybook/addon-links": "^7.3.1",
-    "@storybook/addon-mdx-gfm": "^7.3.1",
-    "@storybook/addon-measure": "^7.3.2",
-    "@storybook/addon-outline": "^7.3.2",
-    "@storybook/addon-toolbars": "^7.3.2",
-    "@storybook/addon-viewport": "^7.3.2",
-    "@storybook/addons": "^7.3.1",
-    "@storybook/blocks": "^7.3.1",
-    "@storybook/react": "^7.3.1",
-    "@storybook/react-vite": "^7.3.1",
+    "@babel/core": "^7.22.19",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@storybook/addon-actions": "^7.4.1",
+    "@storybook/addon-backgrounds": "^7.4.1",
+    "@storybook/addon-controls": "^7.4.1",
+    "@storybook/addon-docs": "^7.4.1",
+    "@storybook/addon-essentials": "^7.4.1",
+    "@storybook/addon-interactions": "^7.4.1",
+    "@storybook/addon-links": "^7.4.1",
+    "@storybook/addon-mdx-gfm": "^7.4.1",
+    "@storybook/addon-measure": "^7.4.1",
+    "@storybook/addon-outline": "^7.4.1",
+    "@storybook/addon-toolbars": "^7.4.1",
+    "@storybook/addon-viewport": "^7.4.1",
+    "@storybook/addons": "^7.4.1",
+    "@storybook/blocks": "^7.4.1",
+    "@storybook/react": "^7.4.1",
+    "@storybook/react-vite": "^7.4.1",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.3.1",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@storybook/theming": "^7.4.1",
     "@types/node": "20.4.9",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "eslint": "^8.44.0",
-    "framer-motion": "^9.0.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "esbuild": "0.18.17",
+    "esbuild-plugin-babel": "^0.2.3",
+    "esbuild-plugin-d.ts": "^1.1.0",
+    "eslint": "^8.49.0",
+    "eslint-plugin-storybook": "^0.6.13",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.4.1",
     "ts-node": "^10.9.1",
-    "tsup": "7.2.0",
-    "typescript": "^4.9.2"
+    "typescript": "^4.6.3"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "dependencies": {
+    "classnames": "^2.3.2",
+    "framer-motion": "^9.1.7",
+    "react-custom-scrollbars-2": "^4.5.0",
+    "zustand": "^4.4.1",
+    "@shoplflow/utils": "^0.1.0"
   },
   "scripts": {
-    "build:tokens": "node scripts/generate-tokens.cjs",
     "type-check": "tsc --noEmit || true",
-    "build:package": "tsup",
+    "build:tokens": "node scripts/generate-tokens.cjs",
+    "build:package": "node build.js",
+    "build:component": "scripts/generate-component.sh",
     "build:storybook": "storybook build",
     "build": "pnpm run build:package && pnpm run build:storybook",
     "dev:stories": "storybook dev -p 6007",
-    "dev": "tsup --watch"
+    "dev": "node build.js --watch",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build"
   }
 }

package/dist/emotion.d.cjs

@@ -1,5 +0,0 @@
-"use strict";
-
-// src/emotion.d.ts
-var import_react = require("@emotion/react");
-//# sourceMappingURL=emotion.d.cjs.map

package/dist/emotion.d.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport type React from 'react';\ndeclare module '*.svg' {\n  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n}\n"],"mappings":";;;AAAA,mBAAO;","names":[]}

package/dist/emotion.d.d.cts

@@ -1,5 +0,0 @@
-import React__default from 'react';
-
-declare module '*.svg' {
-  export const ReactComponent: React__default.FunctionComponent<React__default.SVGProps<SVGSVGElement>>;
-}

package/dist/emotion.d.d.ts

@@ -1,5 +0,0 @@
-import React__default from 'react';
-
-declare module '*.svg' {
-  export const ReactComponent: React__default.FunctionComponent<React__default.SVGProps<SVGSVGElement>>;
-}

package/dist/emotion.d.js

@@ -1,3 +0,0 @@
-// src/emotion.d.ts
-import "@emotion/react";
-//# sourceMappingURL=emotion.d.js.map

package/dist/emotion.d.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport type React from 'react';\ndeclare module '*.svg' {\n  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n}\n"],"mappings":";AAAA,OAAO;","names":[]}