Merge pull request #8 from amir78729/fix-rollup

Fix rollup

.eslintignore

@@ -0,0 +1,2 @@
+pnpm-lock.yaml
+dist

.github/workflows/deploy.yml

@@ -47,7 +47,7 @@ jobs:
       - name: Install Dependencies
         run: pnpm install
       - name: Build Storybook
-        run: pnpm build-storybook
+        run: pnpm build:storybook
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

.prettierignore

@@ -1,3 +1,4 @@
 # Ignore artifacts:
 build
 coverage
+pnpm-lock.yaml

package.json

@@ -1,13 +1,25 @@
 {
   "name": "daftar-naghashi",
+  "author": {
+    "name": "Amirhossein Alibakhshi",
+    "email": "[email protected]"
+  },
+  "keywords": [
+    "paint",
+    "react",
+    "draw"
+  ],
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "build": "rollup -c",
+    "build": "pnpm clean && pnpm build:types && pnpm build:rollup",
+    "clean": "rm -rf dist",
+    "build:types": "tsc --declaration true --emitDeclarationOnly true --outDir dist --noEmit false",
+    "build:rollup": "rollup -c",
+    "build:storybook": "storybook build",
     "lint": "eslint .",
     "format": "pnpm exec prettier . --write",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
     "react": "^18.3.1",
@@ -55,10 +67,10 @@
       "plugin:storybook/recommended"
     ]
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts"
 }

rollup.config.mjs

@@ -25,7 +25,7 @@ export default [
     ],
   },
   {
-    input: "dist/esm/types/index.d.ts",
+    input: "dist/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "esm" }],
     plugins: [dts()],
   },

src/DaftarNaghashi.tsx

@@ -1,13 +1,13 @@
 import React, { MouseEvent, useEffect, useReducer, useRef } from "react";
-import {floodFill, getPixelColor, hexToRgba} from "./utils.ts";
+import { floodFill, getPixelColor, hexToRgba } from "./utils.ts";
 import { Mode, ToolbarProps } from "./types.ts";
 import drawingReducer from "./reducer.ts";
-import {useHotkeys} from "react-hotkeys-hook";
+import { useHotkeys } from "react-hotkeys-hook";
 
 type Props = {
   height?: number;
   width?: number;
-  readonly: boolean;
+  viewMode?: boolean;
   onStartDrawing?: (c: HTMLCanvasElement | null) => void;
   onDrawing?: (c: HTMLCanvasElement | null) => void;
   onStopDrawing?: (c: HTMLCanvasElement | null) => void;
@@ -23,13 +23,13 @@ const renderDefaultToolbar = ({
   undo,
   clear,
   setMode,
-  readonly,
+  viewMode,
 }: ToolbarProps) => (
   <div style={{ marginBottom: "10px" }}>
     <label>
       Color:
       <input
-        disabled={readonly}
+        disabled={viewMode}
         type="color"
         value={color}
         onChange={(e) => setColor(e.target.value)}
@@ -38,24 +38,32 @@ const renderDefaultToolbar = ({
     <label>
       Thickness:
       <input
-        disabled={readonly}
+        disabled={viewMode}
         type="number"
         value={thickness}
         min="1"
         max="100"
         onChange={(e) => setLineWidth(parseInt(e.target.value, 10))}
       />
     </label>
-    <button title="shortcut: u" disabled={readonly} onClick={undo}>
+    <button title="shortcut: u" disabled={viewMode} onClick={undo}>
       Undo
     </button>
-    <button title="shortcut: c" disabled={readonly} onClick={clear}>
+    <button title="shortcut: c" disabled={viewMode} onClick={clear}>
       Clear
     </button>
-    <button title="shortcut: p or b" disabled={readonly} onClick={() => setMode("pen")}>
+    <button
+      title="shortcut: p or b"
+      disabled={viewMode}
+      onClick={() => setMode("pen")}
+    >
       Switch to Pen Mode
     </button>
-    <button title="shortcut: f" disabled={readonly} onClick={() => setMode("fill")}>
+    <button
+      title="shortcut: f"
+      disabled={viewMode}
+      onClick={() => setMode("fill")}
+    >
       Switch to Fill Mode
     </button>
   </div>
@@ -67,9 +75,9 @@ const DrawingComponent = ({
   onStopDrawing,
   height = 500,
   width = 500,
-  readonly = false,
+  viewMode = false,
   renderToolbar = renderDefaultToolbar,
-                        value,
+  value,
 }: Props) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const ctxRef = useRef<CanvasRenderingContext2D | null>(null);
@@ -121,7 +129,7 @@ const DrawingComponent = ({
   }, [color, thickness]);
 
   const startDrawing = (e: MouseEvent<HTMLCanvasElement>) => {
-    if (!ctxRef.current || readonly) return;
+    if (!ctxRef.current || viewMode) return;
     const { offsetX, offsetY } = e.nativeEvent;
     ctxRef.current.beginPath();
     ctxRef.current.moveTo(offsetX, offsetY);
@@ -130,7 +138,7 @@ const DrawingComponent = ({
   };
 
   const draw = (e: MouseEvent<HTMLCanvasElement>) => {
-    if (!isDrawing || !ctxRef.current || readonly) return;
+    if (!isDrawing || !ctxRef.current || viewMode) return;
 
     const { offsetX, offsetY } = e.nativeEvent;
     ctxRef.current.lineTo(offsetX, offsetY);
@@ -139,7 +147,7 @@ const DrawingComponent = ({
   };
 
   const stopDrawing = () => {
-    if (readonly) return;
+    if (viewMode) return;
     if (isDrawing) {
       ctxRef.current?.closePath();
       dispatch({ type: "STOP_DRAWING" });
@@ -149,7 +157,7 @@ const DrawingComponent = ({
   };
 
   const saveHistory = () => {
-    if (readonly) return;
+    if (viewMode) return;
     if (canvasRef.current) {
       dispatch({
         type: "SAVE_HISTORY",
@@ -158,9 +166,8 @@ const DrawingComponent = ({
     }
   };
 
-
   const undo = () => {
-    if (readonly) return;
+    if (viewMode) return;
     dispatch({ type: "UNDO" });
     if (ctxRef.current && canvasRef.current && history.length > 1) {
       const previousState = history[history.length - 2];
@@ -177,10 +184,10 @@ const DrawingComponent = ({
       };
     }
   };
-  useHotkeys('u', undo)
+  useHotkeys("u", undo);
 
   const clear = () => {
-    if (readonly) return;
+    if (viewMode) return;
     if (ctxRef.current && canvasRef.current) {
       ctxRef.current.clearRect(
         0,
@@ -191,21 +198,21 @@ const DrawingComponent = ({
       dispatch({ type: "CLEAR_CANVAS" });
     }
   };
-  useHotkeys('c', clear)
+  useHotkeys("c", clear);
 
   const setMode = (m: Mode) => {
-    if (readonly) return;
+    if (viewMode) return;
     dispatch({
       type: "SET_MODE",
       payload: m,
     });
   };
-  useHotkeys('b', () => setMode('pen'))
-  useHotkeys('p', () => setMode('pen'))
-  useHotkeys('f', () => setMode('fill'))
+  useHotkeys("b", () => setMode("pen"));
+  useHotkeys("p", () => setMode("pen"));
+  useHotkeys("f", () => setMode("fill"));
 
   const handleCanvasClick = (e: MouseEvent<HTMLCanvasElement>) => {
-    if (readonly) return;
+    if (viewMode) return;
     if (mode === "fill" && canvasRef.current && ctxRef.current) {
       const { offsetX, offsetY } = e.nativeEvent;
       const imageData = ctxRef.current.getImageData(
@@ -222,15 +229,15 @@ const DrawingComponent = ({
   };
 
   const setLineWidth = (value: number) => {
-    if (readonly) return;
+    if (viewMode) return;
     dispatch({
       type: "SET_THICKNESS",
       payload: value,
     });
   };
 
   const setColor = (value: string) => {
-    if (readonly) return;
+    if (viewMode) return;
     dispatch({
       type: "SET_COLOR",
       payload: value,
@@ -239,9 +246,9 @@ const DrawingComponent = ({
 
   return (
     <div>
-      {!readonly &&
+      {!viewMode &&
         renderToolbar({
-          readonly,
+          viewMode,
           setLineWidth,
           thickness: thickness,
           setColor,

src/types.ts

@@ -3,7 +3,7 @@ export type RGBA = [number, number, number, number];
 export type Mode = "pen" | "fill";
 
 export type ToolbarProps = {
-  readonly: boolean;
+  viewMode: boolean;
   setLineWidth: (width: number) => void;
   thickness: number;
   setColor: (color: string) => void;

tsconfig.json

@@ -21,5 +21,6 @@
     "noFallthroughCasesInSwitch": true,
     "outDir": "dist"
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["**/*.stories.tsx"]
 }