Merge pull request #55 from ssi02014/dev

ssi02014 · web-flow · commit e2cf90e82a9a · 2024-05-09T18:03:38.000+09:00
chore: esbuild 추가 및 buttonIcon props 제거
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -12,7 +12,7 @@ jobs:
       - name: Node Setup 🔔
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           registry-url: 'https://registry.npmjs.org'
       - name: Install & Build 🔨
         run: | 
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/README.md b/README.md
@@ -120,10 +120,6 @@ import iconImage from '../assets/colorImage.png';
 const App = () => {
   return (
     <ThumbnailGenerator
-      buttonIcon={<img src={iconImage} width={30} height={30} alt="iconImage" />}
-      // To insert the inner icon of the button that opens the thumbnail modal, use the ReactNode. 
-      // If you do not include this option, the default icon will be used.
-
       iconSize="medium"
       // Through this property, you can specify the size of the button icon.
       // However, if you are inserting a custom button icon, this option is meaningless.
@@ -159,7 +155,6 @@ const App = () => {
 <html lang="en">
   <head>
     <!-- ... -->
-
     <!-- Add a web font -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -192,14 +187,9 @@ const App = () => {
 }
 ```
 
-<br />
 <br />
 
 ## API 📄
-- buttonIcon
-  - **Optional**
-  - Default: <img width="43" alt="스크린샷 2023-02-20 오후 10 48 05" src="https://user-images.githubusercontent.com/64779472/220125380-77aaaa79-9baf-4252-aa46-a44e6e91dd3d.png">
-  - Type: `ReactNode`
 - iconPosition
   - **Optional**
   - Sequence: [top, right, bottom, left]
diff --git a/package.json b/package.json
@@ -42,12 +42,11 @@
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@rollup/plugin-alias": "^5.0.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.0",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.1",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-actions": "^7.0.18",
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-interactions": "^7.0.18",
@@ -63,6 +62,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "core-js": "^3.29.1",
+    "esbuild": "^0.21.1",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-react": "^7.32.2",
@@ -75,7 +75,8 @@
     "react-color-palette": "^6.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "rollup": "^3.23.1",
+    "rollup": "^4.17.2",
+    "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^7.0.18",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
@@ -95,5 +96,8 @@
     "icon",
     "generator",
     "emotion"
-  ]
+  ],
+  "dependencies": {
+    "@modern-kit/react": "^1.4.0"
+  }
 }
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -1,12 +1,12 @@
 import nodeResolve from '@rollup/plugin-node-resolve';
-import babel from '@rollup/plugin-babel';
 import terser from '@rollup/plugin-terser';
 import typescript from '@rollup/plugin-typescript';
 import commonjs from '@rollup/plugin-commonjs';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import alias from '@rollup/plugin-alias';
 import pkg from './package.json' assert { type: 'json' };
 import path from 'path';
+import esbuild from 'rollup-plugin-esbuild';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 const __dirname = path.resolve();
@@ -34,11 +34,7 @@ export default {
       extensions,
     }),
     commonjs({ include: 'node_modules/**' }),
-    babel({
-      exclude: /node_modules/,
-      extensions,
-      include: ['src/**/*'],
-    }),
+    esbuild(),
     typescript({ tsconfig: './tsconfig.json', exclude: ['**/*.stories.tsx'] }),
     alias({
       entries: [{ find: '@', replacement: path.resolve(__dirname, './src') }],
diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import * as S from './styled';
 import { arrowBottom, arrowTop } from '@assets/icons';
 import Icon from '../../components/Icon';
+import { useToggle } from '@modern-kit/react';
 
 interface AccordionProps {
   title: string;
@@ -11,15 +12,14 @@ interface AccordionProps {
 
 const Accordion = ({ title, children, maxHeight = 200 }: AccordionProps) => {
   const panelRef = useRef<HTMLDivElement>(null);
-  const [isOpenPanel, setIsOpenPanel] = useState(false);
+  const [isOpenPanel, setIsOpenPanel] = useToggle();
 
   const handleToggle = useCallback(() => {
-    setIsOpenPanel(!isOpenPanel);
+    setIsOpenPanel();
 
     if (!panelRef.current) return;
     if (isOpenPanel) {
       panelRef.current.style.overflow = 'hidden';
-
       return;
     }
     setTimeout(() => {
diff --git a/src/components/ColorPicker/index.tsx b/src/components/ColorPicker/index.tsx
@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { Color, ColorPicker as PaletteColorPicker } from 'react-color-palette';
 import { IconButton } from '../Icon/styled';
-import { Portal } from '@devgrace/react';
+import { Portal } from '@modern-kit/react';
 
 interface ColorPickerProps {
   children: React.ReactNode;
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentProps } from 'react';
 
-const Icon = ({ src, width, height }: ComponentProps<'img'>) => {
-  return <img src={src} width={width} height={height} />;
+const Icon = ({ src, width, height, ...rest }: ComponentProps<'img'>) => {
+  return <img src={src} width={width} height={height} {...rest} />;
 };
 
 export default Icon;
diff --git a/src/hooks/useIsMounted.ts b/src/hooks/useIsMounted.ts
diff --git a/src/stories/components/ThumbnailGenerator.stories.tsx b/src/stories/components/ThumbnailGenerator.stories.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { StoryFn } from '@storybook/react';
 import ThumbnailGenerator from '@lib/ThumbnailGenerator';
 import { Size } from '@utils/style';
-import { toggleButton } from '@assets/icons';
 
 export default {
   title: 'components/ThumbnailGenerator',
@@ -24,7 +23,6 @@ export default {
 
 interface Props {
   iconSize?: Size;
-  buttonIcon?: React.ReactNode;
   modalPosition?: 'left' | 'right' | 'center';
   iconPosition?: [number, number, number, number];
   isFullWidth?: boolean;
@@ -52,7 +50,6 @@ export const Default = {
 
   args: {
     iconSize: 'medium',
-    buttonIcon: <img src={toggleButton} width={40} height={40} />,
     modalPosition: 'right',
     iconPosition: [0, 20, 20, 0],
     isFullWidth: false,
diff --git a/yarn.lock b/yarn.lock
