@thepocman/gantt-task-react 1.0.34 → 1.0.35

package/dist/components/task-item/task-item.d.ts

@@ -6,6 +6,7 @@ export type TaskItemProps = {
     children?: React.ReactNode;
     getTaskGlobalIndexByRef: (task: Task) => number;
     hasChildren: boolean;
+    isInCollapsedGroup: boolean;
     rowIndexToTasksMap: RowIndexToTasksMap;
     taskToRowIndexMap: TaskToRowIndexMap;
     hasDependencyWarning: boolean;

package/dist/gantt-task-react.es.js

@@ -4228,7 +4228,6 @@ const TaskListTableDefaultInner = ({
           if (taskIndex) {
             [depth, indexStr] = taskIndex;
           }
-          console.log("colors :>> ", colors);
           renderList.push(
             /* @__PURE__ */ jsx(
               TaskListTableRow,
@@ -5577,31 +5576,6 @@ const RelationLine = ({
     }
   );
 };
-const truncateText = (text, maxWidth, textElement) => {
-  if (!textElement)
-    return text;
-  textElement.textContent = text;
-  const fullWidth = textElement.getBBox().width;
-  if (fullWidth <= maxWidth) {
-    return text;
-  }
-  let start = 0;
-  let end = text.length;
-  let result = text;
-  while (start <= end) {
-    const mid = Math.floor((start + end) / 2);
-    const truncated = text.substring(0, mid);
-    textElement.textContent = truncated;
-    const truncatedWidth = textElement.getBBox().width;
-    if (truncatedWidth <= maxWidth) {
-      result = truncated;
-      start = mid + 1;
-    } else {
-      end = mid - 1;
-    }
-  }
-  return result;
-};
 const hoverVisibleWrapper = "_hoverVisibleWrapper_8hbnp_1";
 const wrapper = "_wrapper_8hbnp_1";
 const mainPath = "_mainPath_8hbnp_17";
@@ -6297,11 +6271,13 @@ const Milestone = ({
     }
   );
 };
-const barLabel = "_barLabel_7emdt_1";
-const barLabelOutside = "_barLabelOutside_7emdt_25";
+const barLabel = "_barLabel_y55xa_1";
+const barLabelOutside = "_barLabelOutside_y55xa_25";
+const barLabelTruncated = "_barLabelTruncated_y55xa_45";
 const style = {
   barLabel,
-  barLabelOutside
+  barLabelOutside,
+  barLabelTruncated
 };
 const TaskWarningInner = ({
   rtl,
@@ -6375,7 +6351,6 @@ const TaskWarningInner = ({
 };
 const TaskWarning = memo(TaskWarningInner);
 const TaskItemInner = (props) => {
-  var _a, _b, _c;
   const {
     childOutOfParentWarnings,
     colorStyles: stylesProp,
@@ -6402,11 +6377,10 @@ const TaskItemInner = (props) => {
     isRelationChangeable,
     ganttRelationEvent,
     rtl,
+    enableTaskGrouping,
+    isInCollapsedGroup,
     selectTaskOnMouseDown,
     setTooltipTask,
-    enableTaskGrouping,
-    taskToRowIndexMap,
-    rowIndexToTasksMap,
     task,
     task: { styles: taskStyles },
     taskHalfHeight,
@@ -6459,11 +6433,6 @@ const TaskItemInner = (props) => {
     const globalIndex = getTaskGlobalIndexByRef(task);
     fixEndPosition(task, end.date, globalIndex);
   }, [task, fixEndPosition, outOfParentWarnings, getTaskGlobalIndexByRef]);
-  const taskRowIndex = (_a = taskToRowIndexMap == null ? void 0 : taskToRowIndexMap.get(task.comparisonLevel ?? 1)) == null ? void 0 : _a.get(task.id);
-  if (taskRowIndex === void 0)
-    return null;
-  const isSharedRow = (((_c = (_b = rowIndexToTasksMap == null ? void 0 : rowIndexToTasksMap.get(task.comparisonLevel ?? 1)) == null ? void 0 : _b.get(taskRowIndex)) == null ? void 0 : _c.length) ?? 0) > 1;
-  const isInCollapsedGroup = !!enableTaskGrouping && isSharedRow;
   const handleClick = useCallback(
     (event) => {
       if (onClick) {
@@ -6497,8 +6466,6 @@ const TaskItemInner = (props) => {
   }, [onRelationStart, rtl, task]);
   const textRef = useRef(null);
   const [isTextInside, setIsTextInside] = useState(true);
-  const [truncatedText, setTruncatedText] = useState(task.name);
-  console.log("truncatedText", truncatedText);
   const taskItem = useMemo(() => {
     const isFromStartRelationAuthorized = authorizedRelations.includes("startToStart") || authorizedRelations.includes("startToEnd");
     const isFromEndRelationAuthorized = authorizedRelations.includes("endToEnd") || authorizedRelations.includes("endToStart");
@@ -6580,16 +6547,12 @@ const TaskItemInner = (props) => {
     task,
     width
   ]);
+  const isGrouped = enableTaskGrouping && isInCollapsedGroup;
   useEffect(() => {
-    if (!textRef.current)
-      return;
-    if (isInCollapsedGroup) {
-      const truncated = truncateText(task.name, width - 10, textRef.current);
-      setTruncatedText(truncated);
-    } else {
+    if (textRef.current) {
       setIsTextInside(textRef.current.getBBox().width < width);
     }
-  }, [isInCollapsedGroup, task.name, width]);
+  }, [textRef, width]);
   const x3 = useMemo(() => {
     if (isTextInside) {
       return x1 + width * 0.5;
@@ -6599,9 +6562,7 @@ const TaskItemInner = (props) => {
     }
     return x1 + width + arrowIndent * 1.2;
   }, [x1, width, isTextInside, rtl, arrowIndent]);
-  const textForRender = isInCollapsedGroup ? "" : task.name;
-  console.log("testForRender", textForRender);
-  const xForRender = isInCollapsedGroup ? x1 + width * 0.5 : x3;
+  const textForRender = isGrouped ? "" : task.name;
   const onMouseDown = useCallback(
     (event) => {
       selectTaskOnMouseDown(task.id, event);
@@ -6618,6 +6579,7 @@ const TaskItemInner = (props) => {
     setTooltipTask(null, null);
   }, [setTooltipTask]);
   let barLabelFill = isTextInside || task.type == "milestone" ? styles2.barLabelColor : styles2.barLabelWhenOutsideColor;
+  let defaultBehavior = isTextInside ? style.barLabel : style.barLabel && style.barLabelOutside;
   return /* @__PURE__ */ jsxs(
     "g",
     {
@@ -6645,9 +6607,9 @@ const TaskItemInner = (props) => {
           "text",
           {
             fill: barLabelFill,
-            x: xForRender,
+            x: x3,
             y: taskYOffset + taskHeight * 0.5,
-            className: isTextInside ? style.barLabel : style.barLabel && style.barLabelOutside,
+            className: defaultBehavior,
             ref: textRef,
             children: textForRender
           }
@@ -6768,6 +6730,8 @@ const TaskGanttContent = ({
       for (const task of tasksAtRow) {
         const comparisonLevel = task.comparisonLevel ?? 1;
         const { id: taskId } = task;
+        const isInCollapsedGroup = enableTaskGrouping && task.parent && tasksAtRow.length > 1;
+        console.log("isInCollapsedGroup :>> ", isInCollapsedGroup);
         if (selectedIdsMirror[taskId] && !addedSelectedTasks[taskId]) {
           addedSelectedTasks[taskId] = true;
           const rowIndex = (_a = taskToRowIndexMap.get(comparisonLevel)) == null ? void 0 : _a.get(taskId);
@@ -6818,6 +6782,7 @@ const TaskGanttContent = ({
               children: /* @__PURE__ */ jsx(
                 TaskItem,
                 {
+                  isInCollapsedGroup,
                   enableTaskGrouping,
                   taskToRowIndexMap,
                   rowIndexToTasksMap,
@@ -13193,6 +13158,7 @@ const Gantt = ({
   const barProps = useMemo(
     () => ({
       enableTaskGrouping,
+      taskMap: tasksMap,
       rowIndexToTasksMap,
       authorizedRelations,
       additionalLeftSpace,
@@ -13244,6 +13210,7 @@ const Gantt = ({
       additionalLeftSpace,
       additionalRightSpace,
       enableTaskGrouping,
+      tasksMap,
       rowIndexToTasksMap,
       checkIsHoliday,
       childOutOfParentWarnings,

package/dist/gantt-task-react.umd.js

@@ -4241,7 +4241,6 @@
             if (taskIndex) {
               [depth, indexStr] = taskIndex;
             }
-            console.log("colors :>> ", colors);
             renderList.push(
               /* @__PURE__ */ jsxRuntime.jsx(
                 TaskListTableRow,
@@ -5590,31 +5589,6 @@
       }
     );
   };
-  const truncateText = (text, maxWidth, textElement) => {
-    if (!textElement)
-      return text;
-    textElement.textContent = text;
-    const fullWidth = textElement.getBBox().width;
-    if (fullWidth <= maxWidth) {
-      return text;
-    }
-    let start = 0;
-    let end = text.length;
-    let result = text;
-    while (start <= end) {
-      const mid = Math.floor((start + end) / 2);
-      const truncated = text.substring(0, mid);
-      textElement.textContent = truncated;
-      const truncatedWidth = textElement.getBBox().width;
-      if (truncatedWidth <= maxWidth) {
-        result = truncated;
-        start = mid + 1;
-      } else {
-        end = mid - 1;
-      }
-    }
-    return result;
-  };
   const hoverVisibleWrapper = "_hoverVisibleWrapper_8hbnp_1";
   const wrapper = "_wrapper_8hbnp_1";
   const mainPath = "_mainPath_8hbnp_17";
@@ -6310,11 +6284,13 @@
       }
     );
   };
-  const barLabel = "_barLabel_7emdt_1";
-  const barLabelOutside = "_barLabelOutside_7emdt_25";
+  const barLabel = "_barLabel_y55xa_1";
+  const barLabelOutside = "_barLabelOutside_y55xa_25";
+  const barLabelTruncated = "_barLabelTruncated_y55xa_45";
   const style = {
     barLabel,
-    barLabelOutside
+    barLabelOutside,
+    barLabelTruncated
   };
   const TaskWarningInner = ({
     rtl,
@@ -6388,7 +6364,6 @@
   };
   const TaskWarning = React.memo(TaskWarningInner);
   const TaskItemInner = (props) => {
-    var _a, _b, _c;
     const {
       childOutOfParentWarnings,
       colorStyles: stylesProp,
@@ -6415,11 +6390,10 @@
       isRelationChangeable,
       ganttRelationEvent,
       rtl,
+      enableTaskGrouping,
+      isInCollapsedGroup,
       selectTaskOnMouseDown,
       setTooltipTask,
-      enableTaskGrouping,
-      taskToRowIndexMap,
-      rowIndexToTasksMap,
       task,
       task: { styles: taskStyles },
       taskHalfHeight,
@@ -6472,11 +6446,6 @@
       const globalIndex = getTaskGlobalIndexByRef(task);
       fixEndPosition(task, end.date, globalIndex);
     }, [task, fixEndPosition, outOfParentWarnings, getTaskGlobalIndexByRef]);
-    const taskRowIndex = (_a = taskToRowIndexMap == null ? void 0 : taskToRowIndexMap.get(task.comparisonLevel ?? 1)) == null ? void 0 : _a.get(task.id);
-    if (taskRowIndex === void 0)
-      return null;
-    const isSharedRow = (((_c = (_b = rowIndexToTasksMap == null ? void 0 : rowIndexToTasksMap.get(task.comparisonLevel ?? 1)) == null ? void 0 : _b.get(taskRowIndex)) == null ? void 0 : _c.length) ?? 0) > 1;
-    const isInCollapsedGroup = !!enableTaskGrouping && isSharedRow;
     const handleClick = React.useCallback(
       (event) => {
         if (onClick) {
@@ -6510,8 +6479,6 @@
     }, [onRelationStart, rtl, task]);
     const textRef = React.useRef(null);
     const [isTextInside, setIsTextInside] = React.useState(true);
-    const [truncatedText, setTruncatedText] = React.useState(task.name);
-    console.log("truncatedText", truncatedText);
     const taskItem = React.useMemo(() => {
       const isFromStartRelationAuthorized = authorizedRelations.includes("startToStart") || authorizedRelations.includes("startToEnd");
       const isFromEndRelationAuthorized = authorizedRelations.includes("endToEnd") || authorizedRelations.includes("endToStart");
@@ -6593,16 +6560,12 @@
       task,
       width
     ]);
+    const isGrouped = enableTaskGrouping && isInCollapsedGroup;
     React.useEffect(() => {
-      if (!textRef.current)
-        return;
-      if (isInCollapsedGroup) {
-        const truncated = truncateText(task.name, width - 10, textRef.current);
-        setTruncatedText(truncated);
-      } else {
+      if (textRef.current) {
         setIsTextInside(textRef.current.getBBox().width < width);
       }
-    }, [isInCollapsedGroup, task.name, width]);
+    }, [textRef, width]);
     const x3 = React.useMemo(() => {
       if (isTextInside) {
         return x1 + width * 0.5;
@@ -6612,9 +6575,7 @@
       }
       return x1 + width + arrowIndent * 1.2;
     }, [x1, width, isTextInside, rtl, arrowIndent]);
-    const textForRender = isInCollapsedGroup ? "" : task.name;
-    console.log("testForRender", textForRender);
-    const xForRender = isInCollapsedGroup ? x1 + width * 0.5 : x3;
+    const textForRender = isGrouped ? "" : task.name;
     const onMouseDown = React.useCallback(
       (event) => {
         selectTaskOnMouseDown(task.id, event);
@@ -6631,6 +6592,7 @@
       setTooltipTask(null, null);
     }, [setTooltipTask]);
     let barLabelFill = isTextInside || task.type == "milestone" ? styles2.barLabelColor : styles2.barLabelWhenOutsideColor;
+    let defaultBehavior = isTextInside ? style.barLabel : style.barLabel && style.barLabelOutside;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "g",
       {
@@ -6658,9 +6620,9 @@
             "text",
             {
               fill: barLabelFill,
-              x: xForRender,
+              x: x3,
               y: taskYOffset + taskHeight * 0.5,
-              className: isTextInside ? style.barLabel : style.barLabel && style.barLabelOutside,
+              className: defaultBehavior,
               ref: textRef,
               children: textForRender
             }
@@ -6781,6 +6743,8 @@
         for (const task of tasksAtRow) {
           const comparisonLevel = task.comparisonLevel ?? 1;
           const { id: taskId } = task;
+          const isInCollapsedGroup = enableTaskGrouping && task.parent && tasksAtRow.length > 1;
+          console.log("isInCollapsedGroup :>> ", isInCollapsedGroup);
           if (selectedIdsMirror[taskId] && !addedSelectedTasks[taskId]) {
             addedSelectedTasks[taskId] = true;
             const rowIndex = (_a = taskToRowIndexMap.get(comparisonLevel)) == null ? void 0 : _a.get(taskId);
@@ -6831,6 +6795,7 @@
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   TaskItem,
                   {
+                    isInCollapsedGroup,
                     enableTaskGrouping,
                     taskToRowIndexMap,
                     rowIndexToTasksMap,
@@ -13206,6 +13171,7 @@
     const barProps = React.useMemo(
       () => ({
         enableTaskGrouping,
+        taskMap: tasksMap,
         rowIndexToTasksMap,
         authorizedRelations,
         additionalLeftSpace,
@@ -13257,6 +13223,7 @@
         additionalLeftSpace,
         additionalRightSpace,
         enableTaskGrouping,
+        tasksMap,
         rowIndexToTasksMap,
         checkIsHoliday,
         childOutOfParentWarnings,

package/dist/style.css

@@ -520,7 +520,7 @@
 ._milestoneBackground_vcirf_11 {
   user-select: none;
 }
-._barLabel_7emdt_1 {
+._barLabel_y55xa_1 {
   text-anchor: middle;
   font-weight: lighter;
   dominant-baseline: central;
@@ -532,7 +532,7 @@
   pointer-events: none;
 }
 
-._barLabelOutside_7emdt_25 {
+._barLabelOutside_y55xa_25 {
   text-anchor: start;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -540,6 +540,11 @@
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;
+}
+
+._barLabelTruncated_y55xa_45 {
+  text-anchor: middle;
+  dominant-baseline: middle;
 }._menuOption_z7pb4_1 {
   display: flex;
   align-items: center;

package/package.json

@@ -1,133 +1,138 @@
-{
-  "name": "@thepocman/gantt-task-react",
-  "version": "1.0.34",
-  "description": "Fork of gantt-task-react with support for grouped tasks on a single row when collapsed",
-  "author": "Adrian Bueno <adrianlbueno@users.noreply.github.com>",
-  "homepage": "https://github.com/adrianlbueno/gantt-task-react#readme",
-  "license": "MIT",
-  "contributors": [
-    {
-      "name": "MaTeMaTuK",
-      "url": "https://github.com/MaTeMaTuK"
-    },
-    {
-      "name": "Janlaywss",
-      "url": "https://github.com/Janlaywss"
-    },
-    {
-      "name": "Adrian Bueno",
-      "url": "https://github.com/adrianlbueno"
-    }
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/adrianlbueno/gantt-task-react.git"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "./dist/gantt-task-react.umd.js",
-  "module": "./dist/gantt-task-react.es.js",
-  "types": "./dist/index.d.ts",
-  "source": "src/index.tsx",
-  "keywords": [
-    "react",
-    "gantt",
-    "typescript",
-    "chart",
-    "svg",
-    "gantt-chart",
-    "gantt chart",
-    "react-gantt",
-    "task"
-  ],
-  "scripts": {
-    "storybook": "storybook dev",
-    "build": "vite build && tsc",
-    "start": "vite --host",
-    "prepare": "run-s build",
-    "test": "run-s test:unit test:lint test:build",
-    "test:build": "run-s build",
-    "test:lint": "eslint --ext .tsx src/**/*",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
-    "predeploy": "yarn storybook build",
-    "deploy-storybook": "gh-pages -d storybook-static",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "1.1.1",
-    "@floating-ui/react": "0.19.2",
-    "date-fns": "2.29.3"
-  },
-  "overrides": {
-    "typescript": "~5.1.6"
-  },
-  "peerDependencies": {
-    "@mui/icons-material": "^6.1.0",
-    "@mui/material": "^6.1.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
-  "devDependencies": {
-    "@babel/plugin-transform-regenerator": "~7.20.5",
-    "@babel/types": "~7.20.7",
-    "@emotion/react": "11.13.5",
-    "@emotion/styled": "11.13.5",
-    "@mdx-js/react": "~2.2.1",
-    "@mui/icons-material": "^6.1.9",
-    "@mui/material": "^6.1.9",
-    "@rollup/plugin-image": "2.1.1",
-    "@storybook/addon-controls": "~7.6.20",
-    "@storybook/addon-docs": "~7.6.20",
-    "@storybook/addons": "~7.6.20",
-    "@storybook/channel-postmessage": "~7.6.20",
-    "@storybook/channel-websocket": "~7.6.20",
-    "@storybook/client-api": "~7.6.20",
-    "@storybook/mdx2-csf": "~1.1.0",
-    "@storybook/node-logger": "~7.6.20",
-    "@storybook/preview-web": "~7.6.20",
-    "@storybook/react": "~7.6.20",
-    "@storybook/react-vite": "~7.6.20",
-    "@testing-library/jest-dom": "~5.16.5",
-    "@testing-library/react": "~16.0.1",
-    "@testing-library/user-event": "~14.2.6",
-    "@types/jest": "~27.5.2",
-    "@types/node": "~15.0.3",
-    "@types/react": "~18.3.12",
-    "@types/react-dom": "~18.3.1",
-    "@vitejs/plugin-react": "4.0.4",
-    "cross-env": "~7.0.3",
-    "doctrine": "~3.0.0",
-    "eslint": "^8.50.0",
-    "eslint-config-react-app": "^7.0.1",
-    "gh-pages": "~5.0.0",
-    "identity-obj-proxy": "~3.0.0",
-    "jsdom": "^25.0.1",
-    "mini-css-extract-plugin": "~2.7.7",
-    "npm-run-all": "~4.1.5",
-    "postcss-flexbugs-fixes": "~5.0.2",
-    "postcss-normalize": "~10.0.1",
-    "postcss-preset-env": "~8.0.1",
-    "prettier": "~2.8.8",
-    "react": "~18.3.1",
-    "react-dom": "~18.3.1",
-    "react-scripts": "^5.0.1",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "storybook": "7.6.20",
-    "typescript": "~5.1.6",
-    "vite": "^4.5.5",
-    "vitest": "0.34.6"
-  },
-  "files": [
-    "dist"
-  ],
-  "jest": {
-    "transformIgnorePatterns": [
-      "/node_modules/(?!react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend)"
-    ],
-    "moduleNameMapper": {
-      "/~.+\\.module\\.(css|sass|scss)$/": "identity-obj-proxy"
-    }
-  }
-}
+{
+  "name": "@thepocman/gantt-task-react",
+  "version": "1.0.35",
+  "description": "Fork of gantt-task-react with support for grouped tasks on a single row when collapsed",
+  "author": "Adrian Bueno <adrianlbueno@users.noreply.github.com>",
+  "homepage": "https://github.com/adrianlbueno/gantt-task-react#readme",
+  "license": "MIT",
+  "contributors": [
+    {
+      "name": "MaTeMaTuK",
+      "url": "https://github.com/MaTeMaTuK"
+    },
+    {
+      "name": "Janlaywss",
+      "url": "https://github.com/Janlaywss"
+    },
+    {
+      "name": "Adrian Bueno",
+      "url": "https://github.com/adrianlbueno"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/adrianlbueno/gantt-task-react.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/gantt-task-react.umd.js",
+  "module": "./dist/gantt-task-react.es.js",
+  "types": "./dist/index.d.ts",
+  "source": "src/index.tsx",
+  "keywords": [
+    "react",
+    "gantt",
+    "typescript",
+    "chart",
+    "svg",
+    "gantt-chart",
+    "gantt chart",
+    "react-gantt",
+    "task"
+  ],
+  "scripts": {
+    "storybook": "storybook dev",
+    "build": "vite build && tsc",
+    "start": "vite --host",
+    "prepare": "run-s build",
+    "test": "run-s test:unit test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint --ext .tsx src/**/*",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "predeploy": "yarn storybook build",
+    "deploy-storybook": "gh-pages -d storybook-static",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "1.1.1",
+    "@floating-ui/react": "0.19.2",
+    "date-fns": "2.29.3"
+  },
+  "overrides": {
+    "typescript": "~5.1.6"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^6.1.0",
+    "@mui/material": "^6.1.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-regenerator": "~7.20.5",
+    "@babel/types": "~7.20.7",
+    "@emotion/react": "11.13.5",
+    "@emotion/styled": "11.13.5",
+    "@mdx-js/react": "~2.2.1",
+    "@mui/icons-material": "^6.1.9",
+    "@mui/material": "^6.1.9",
+    "@rollup/plugin-image": "2.1.1",
+    "@storybook/addon-controls": "~7.6.20",
+    "@storybook/addon-docs": "~7.6.20",
+    "@storybook/addons": "~7.6.20",
+    "@storybook/channel-postmessage": "~7.6.20",
+    "@storybook/channel-websocket": "~7.6.20",
+    "@storybook/client-api": "~7.6.20",
+    "@storybook/mdx2-csf": "~1.1.0",
+    "@storybook/node-logger": "~7.6.20",
+    "@storybook/preview-web": "~7.6.20",
+    "@storybook/react": "~7.6.20",
+    "@storybook/react-vite": "~7.6.20",
+    "@testing-library/jest-dom": "~5.16.5",
+    "@testing-library/react": "~16.0.1",
+    "@testing-library/user-event": "~14.2.6",
+    "@types/jest": "~27.5.2",
+    "@types/node": "~15.0.3",
+    "@types/react": "~18.3.12",
+    "@types/react-dom": "~18.3.1",
+    "@vitejs/plugin-react": "4.0.4",
+    "cross-env": "~7.0.3",
+    "doctrine": "~3.0.0",
+    "eslint": "^8.50.0",
+    "eslint-config-react-app": "^7.0.1",
+    "gh-pages": "~5.0.0",
+    "identity-obj-proxy": "~3.0.0",
+    "jsdom": "^25.0.1",
+    "mini-css-extract-plugin": "~2.7.7",
+    "npm-run-all": "~4.1.5",
+    "postcss-flexbugs-fixes": "~5.0.2",
+    "postcss-normalize": "~10.0.1",
+    "postcss-preset-env": "~8.0.1",
+    "prettier": "~2.8.8",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1",
+    "react-scripts": "^5.0.1",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "storybook": "7.6.20",
+    "typescript": "~5.1.6",
+    "vite": "^4.5.5",
+    "vitest": "0.34.6"
+  },
+  "files": [
+    "dist"
+  ],
+  "jest": {
+    "transformIgnorePatterns": [
+      "/node_modules/(?!react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend)"
+    ],
+    "moduleNameMapper": {
+      "/~.+\\.module\\.(css|sass|scss)$/": "identity-obj-proxy"
+    }
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}