diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index bb43518..10db75a 100644
--- 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
new file mode 100644
index 0000000..2edeafb
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
\ No newline at end of file
diff --git a/README.md b/README.md
index c995c55..5aafba8 100644
--- a/README.md
+++ b/README.md
@@ -120,10 +120,6 @@ import iconImage from '../assets/colorImage.png';
const App = () => {
return (
(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
index 22b2cb2..7696981 100644
--- 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
index 7ef8415..0e00e6c 100644
--- 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 
- - Type: `ReactNode`
- iconPosition
- **Optional**
- Sequence: [top, right, bottom, left]
diff --git a/package.json b/package.json
index d72b44e..511891a 100644
--- 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
index 14b2656..e1a0f7a 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -1,5 +1,4 @@
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';
@@ -7,6 +6,7 @@ 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
index 8604b93..3cafe54 100644
--- 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