Merge pull request #49 from ssi02014/dev

chore: Support cjs, esm

Author: ssi02014

README.md

@@ -146,48 +146,6 @@ const App = () => {
 }
 ```
 
-<br />
-
-## How to use Next(v13) 😊
-### STEP 1️⃣
-- Install Package
-```
-yarn add react-thumbnail-generator next-transpile-modules
-or
-npm install react-thumbnail-generator next-transpile-modules
-```
-
-<br />
-
-### STEP 2️⃣
-- Modify `next.config`
-```js
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  transpilePackages: ["react-thumbnail-generator"], // (*)
-};
-
-module.exports = nextConfig;
-```
-
-<br />
-
-### STEP 3️⃣
-- Add `<ThumbnailGenerator>` component.
-
-```jsx
-import ThumbnailGenerator from 'react-thumbnail-generator';
-
-export default function Home() {
-  return (
-    <ThumbnailGenerator />
-  );
-}
-
-```
-
-
 <br />
 
 ## How to add Web fonts 😊

babel.config.js

@@ -3,6 +3,6 @@ module.exports = {
     ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }],
     '@babel/preset-typescript',
     '@babel/preset-react',
+    '@emotion/babel-preset-css-prop',
   ],
-  plugins: ['@emotion/babel-plugin'],
 };

package.json

@@ -1,9 +1,12 @@
 {
   "name": "react-thumbnail-generator",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "react-thumbnail-generator",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rm -rf dist && rollup -c",
@@ -26,7 +29,8 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
-    "@emotion/babel-plugin": "^11.11.0",
+    "@devgrace/react": "^0.1.2",
+    "@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.config.mjs

@@ -18,8 +18,13 @@ export default {
   output: [
     {
       file: pkg.main,
-      format: 'esm',
       sourcemap: false,
+      format: 'cjs',
+    },
+    {
+      file: pkg.module,
+      sourcemap: false,
+      format: 'esm',
     },
   ],
   external: ['react', 'react-dom'],
@@ -34,7 +39,7 @@ export default {
       extensions,
       include: ['src/**/*'],
     }),
-    typescript({ tsconfig: './tsconfig.json' }),
+    typescript({ tsconfig: './tsconfig.json', exclude: ['**/*.stories.tsx'] }),
     alias({
       entries: [{ find: '@', replacement: path.resolve(__dirname, './src') }],
     }),

src/components/ColorPicker/index.tsx

@@ -8,6 +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';
 
 interface ColorPickerProps {
   children: React.ReactNode;
@@ -24,6 +25,7 @@ const ColorPicker = ({
 }: ColorPickerProps) => {
   const [isOpenColorPicker, setIsOpenColorPicker] = useState(false);
   const colorRef = useRef<HTMLDivElement>(null);
+  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
 
   const handleCloseColorPicker = useCallback(
     (e: any) => {
@@ -39,10 +41,16 @@ const ColorPicker = ({
     [isOpenColorPicker, toggleIsBlockEvent]
   );
 
-  const handleOpenColorPicker = useCallback(() => {
-    setIsOpenColorPicker((prev) => !prev);
-    toggleIsBlockEvent();
-  }, [toggleIsBlockEvent]);
+  const handleOpenColorPicker = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      const { x, y } = e.currentTarget.getBoundingClientRect();
+
+      setCoordinates({ x, y });
+      setIsOpenColorPicker((prev) => !prev);
+      toggleIsBlockEvent();
+    },
+    [toggleIsBlockEvent]
+  );
 
   useEffect(() => {
     document.addEventListener('mousedown', handleCloseColorPicker);
@@ -61,11 +69,12 @@ const ColorPicker = ({
   const colorPickerWrapperStyle: CSSProperties = useMemo(() => {
     return {
       position: 'absolute',
-      left: '50%',
-      bottom: '40px',
+      left: `${coordinates.x}px`,
+      top: `${coordinates.y - 300}px`,
       transform: 'translateX(-50%)',
+      zIndex: '9999',
     };
-  }, []);
+  }, [coordinates]);
 
   return (
     <div style={wrapperStyle}>
@@ -75,19 +84,21 @@ const ColorPicker = ({
         isBorder={true}>
         {children}
       </IconButton>
-      {isOpenColorPicker && (
-        <div ref={colorRef} style={colorPickerWrapperStyle}>
-          <PaletteColorPicker
-            width={250}
-            height={150}
-            color={color}
-            onChange={setColor}
-            hideHSV
-            hideRGB
-            dark
-          />
-        </div>
-      )}
+      <Portal>
+        {isOpenColorPicker && (
+          <div ref={colorRef} style={colorPickerWrapperStyle}>
+            <PaletteColorPicker
+              width={250}
+              height={150}
+              color={color}
+              onChange={setColor}
+              hideHSV
+              hideRGB
+              dark
+            />
+          </div>
+        )}
+      </Portal>
     </div>
   );
 };

src/components/Layout/styled.tsx

@@ -29,13 +29,10 @@ export const BodyWrapper = styled.section<{
   min-width: ${({ isFullWidth }) => (isFullWidth ? '100%' : '600px')};
   border-radius: 7px;
   box-shadow: 1px 1px 10px #cccccc;
-  z-index: 9999;
+  z-index: 100;
   background-color: #ffffff;
   flex-direction: column;
-  overflow: hidden;
-
   font-family: Arial;
-
   * {
     box-sizing: border-box;
   }