kanban-board-react - npm Package Compare versions

Comparing version 1.0.29 to 1.0.30

package.json

 {
   "name": "kanban-board-react",
-  "version": "1.0.29",
+  "version": "1.0.30",
   "description": "A simple kanban board for React with zero dependencies",
@@ -22,2 +22,6 @@ "license": "MIT",
     "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
+    "eslint": "^8.25.0",
+    "eslint-plugin-react": "^7.31.10",
     "react": "^18.2.0",
@@ -24,0 +28,0 @@ "react-dom": "^18.2.0",

README.md

@@ -8,70 +8,76 @@ # Kanban Board React
 
+import { Kanban } from "kanban-board-react";
+import React, { useState } from "react";
+import "./App.css";
+
 const tasksData: any[] = [
-  { t: "test", navn: "navn", dataKey: "todo", id: 1 },
-  { t: "test", navn: "navn", dataKey: "todo", id: 2 },
-  { t: "test", navn: "navn", dataKey: "todo", id: 3 },
-  { t: "test", navn: "navn", dataKey: "todo", id: 4 },
+	{ someData: "test", someData2: "test", dataKey: "todo", id: 1 },
+	{ someData: "test", someData2: "test", dataKey: "complete", id: 2 },
+	{ someData: "test", someData2: "test", dataKey: "todo", id: 3 },
+	{ someData: "test", someData2: "test", dataKey: "todo", id: 4 },
 ];
 
 const columnsData: any[] = [
-  { name: "Todo", dataKey: "todo" },
-  { name: "Doing", dataKey: "doing" },
-  { name: "QA", dataKey: "qa" },
-  { name: "Completed", dataKey: "complete" },
+	{ name: "Todo", dataKey: "todo" },
+	{ name: "Doing", dataKey: "doing" },
+	{ name: "QA", dataKey: "qa" },
+	{ name: "Completed", dataKey: "complete" },
 ];
 
 function App() {
-  const [items, setItems] = useState<any[]>(tasksData);
+	const [items, setItems] = useState<any[]>(tasksData);
 
-  const updateTask = (collisionResult: any) => {
-    const index = items.findIndex((item) => item.id === collisionResult.task.id);
-    items[index].dataKey = collisionResult.columnDataKey;
-    const newArray = [...items];
-    setItems(newArray);
-  };
+	const updateTask = (result: any) => {
+		const index = items.findIndex((item) => item.id === result.task.id);
+		items[index].dataKey = result.columnDataKey;
+		const newArray = [...items];
+		setItems(newArray);
+	};
 
-  return (
-    <div>
-      <div className="App">
-        <Kanban
-          updateTask={updateTask}
-          tasks={items}
-          columns={columnsData}
-          onTopOfColumnStyle={collisionStyle}
-          laneStyle={defaultLaneStyle}
-          taskRender={(task: any) => {
-            return <Item task={task} />;
-          }}
-        />
-      </div>
-    </div>
-  );
+	return (
+		<div>
+			<div className="App">
+				<Kanban
+					style={styles}
+					updateTask={updateTask}
+					tasks={items}
+					columns={columnsData}
+					taskRender={(task: any) => {
+						return <Item task={task} />;
+					}}
+				/>
+			</div>
+		</div>
+	);
 }
 
 const collisionStyle: React.CSSProperties = {
-  backgroundColor: "rgba(0, 0, 0, 0.1)",
-  transition: "background-color 300ms ease",
+	backgroundColor: "rgba(0, 0, 0, 0.1)",
+	transition: "background-color 300ms ease",
 };
 
-const defaultLaneStyle: React.CSSProperties = {
-  backgroundColor: "red",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  height: "100vh",
-  width: "100%",
-  overflowX: "hidden",
+const laneStyle: React.CSSProperties = {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	height: "100vh",
+	width: "100%",
+	overflowX: "hidden",
 };
 
+const styles = {
+	onDragOver: collisionStyle,
+	column: laneStyle,
+};
+
 const Item = ({ task }: { task: any }) => {
-  return (
-    <div className="item" style={{ width: "250px" }}>
-      <span style={{ color: "red" }}>HEI</span>
-      <div className="id">#{task.id}</div>
-      <div className="test">
-        <div className="taskTitle">{task.id}</div>
-        <div>{task.navn}</div>
-      </div>
-    </div>
-  );
+	return (
+		<div className="item" style={{ width: "250px" }}>
+			<div className="id">#{task.id}</div>
+			<div className="test">
+				<div className="taskTitle">{task.id}</div>
+				<div>{task.someData}</div>
+			</div>
+		</div>
+	);
 };
@@ -81,2 +87,3 @@
 
+
 ```
@@ -90,6 +97,7 @@
 Must contain a name key for the column name and a dataKey (this dataKey matches the task dataKey)
-#### onTopOfColumnStyle
-A style object for styles when a task is dragged over a column.
-#### laneStyle
-A style object for the lane styles.
+#### style
+A object with two keys, onDragover and column.
+onDragOver styles are used when an items is dragged over a lane.
+column is the lane styling.
+
 #### updateTask
@@ -96,0 +104,0 @@ A function that will be run when a task is dropped on top of a lane.

No alert changes

Improved metrics

Total package byte prevSize

6666

increased by73.96%

Number of package files

3

increased by50%

Number of lines in readme file

106

increased by8.16%

Worsened metrics

Dev dependency count

10

increased by66.67%

No dependency changes