@thaddeusjiang/react-sortable-list - npm Package Compare versions

Comparing version 0.1.1 to 0.1.3-rc.1

dist/components/SortableItem.d.ts

@@ -0,2 +1,3 @@
+import React from 'react';
 import { SortableItemProps } from './SortableList';
-export declare const SortableItem: (props: SortableItemProps) => JSX.Element;
+export declare const SortableItem: (props: SortableItemProps) => React.JSX.Element;

dist/react-sortable-list.cjs.development.js

@@ -14,13 +14,11 @@ 'use strict';
   var DragHandler = props.DragHandler,
-      className = props.className;
-
+    className = props.className;
   var _useSortable = sortable.useSortable({
-    id: props.id
-  }),
-      attributes = _useSortable.attributes,
-      listeners = _useSortable.listeners,
-      setNodeRef = _useSortable.setNodeRef,
-      transform = _useSortable.transform,
-      transition = _useSortable.transition;
-
+      id: props.id
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
   var style = {
@@ -42,14 +40,14 @@ transform: utilities.CSS.Transform.toString(transform),
 
+// TODO: Headless UI Component
 var SortableList = function SortableList(props) {
   var items = props.items,
-      setItems = props.setItems,
-      children = props.children,
-      itemRender = props.itemRender,
-      horizontal = props.horizontal,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled;
+    setItems = props.setItems,
+    children = props.children,
+    itemRender = props.itemRender,
+    horizontal = props.horizontal,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
   var sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.KeyboardSensor, {
     coordinateGetter: sortable.sortableKeyboardCoordinates
   }));
-
   if (disabled) {
@@ -64,3 +62,2 @@ return React.createElement(React.Fragment, null, children ? children({
   }
-
   return React.createElement(core.DndContext, {
@@ -83,7 +80,5 @@ sensors: sensors,
   })));
-
   function handleDragEnd(event) {
     var active = event.active,
-        over = event.over;
-
+      over = event.over;
     if (active.id !== over.id) {
@@ -90,0 +85,0 @@ setItems(function (items) {

dist/react-sortable-list.esm.js

@@ -8,13 +8,11 @@ import React from 'react';
   var DragHandler = props.DragHandler,
-      className = props.className;
-
+    className = props.className;
   var _useSortable = useSortable({
-    id: props.id
-  }),
-      attributes = _useSortable.attributes,
-      listeners = _useSortable.listeners,
-      setNodeRef = _useSortable.setNodeRef,
-      transform = _useSortable.transform,
-      transition = _useSortable.transition;
-
+      id: props.id
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
   var style = {
@@ -36,14 +34,14 @@ transform: CSS.Transform.toString(transform),
 
+// TODO: Headless UI Component
 var SortableList = function SortableList(props) {
   var items = props.items,
-      setItems = props.setItems,
-      children = props.children,
-      itemRender = props.itemRender,
-      horizontal = props.horizontal,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled;
+    setItems = props.setItems,
+    children = props.children,
+    itemRender = props.itemRender,
+    horizontal = props.horizontal,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
   var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
     coordinateGetter: sortableKeyboardCoordinates
   }));
-
   if (disabled) {
@@ -58,3 +56,2 @@ return React.createElement(React.Fragment, null, children ? children({
   }
-
   return React.createElement(DndContext, {
@@ -77,7 +74,5 @@ sensors: sensors,
   })));
-
   function handleDragEnd(event) {
     var active = event.active,
-        over = event.over;
-
+      over = event.over;
     if (active.id !== over.id) {
@@ -84,0 +79,0 @@ setItems(function (items) {

package.json

 {
   "name": "@thaddeusjiang/react-sortable-list",
   "author": "Thaddeus Jiang",
-  "version": "0.1.1",
+  "version": "0.1.3-rc.1",
   "license": "MIT",
@@ -18,7 +18,7 @@ "main": "dist/index.js",
     "analyze": "size-limit --why",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "build-tailwind": "NODE_ENV=production npx tailwindcss -o ./dist/index.css --minify",
-    "build": "tsdx build && yarn build-tailwind",
-    "prepare": "yarn build"
+    "build": "tsdx build && npm run build-tailwind",
+    "prepare": "npm run build"
   },
@@ -51,9 +51,12 @@ "peerDependencies": {
     "@babel/core": "^7.17.9",
+    "@chromatic-com/storybook": "^1.9.0",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-essentials": "^6.4.20",
+    "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.4.20",
+    "@storybook/addon-links": "^8.3.5",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.4.20",
-    "@storybook/react": "^6.4.20",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-webpack5": "^8.3.5",
     "@testing-library/jest-dom": "^5.16.4",
@@ -80,6 +83,2 @@ "@testing-library/react": "^13.0.0",
   },
-  "dependencies": {
-    "@dnd-kit/core": "^5.0.3",
-    "@dnd-kit/sortable": "^6.0.1"
-  },
   "publishConfig": {
@@ -101,3 +100,7 @@ "registry": "https://registry.npmjs.org"
     "@dnd-kit"
-  ]
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0"
+  }
 }

README.md

@@ -23,3 +23,3 @@ # Welcome to @thaddeusjiang/react-sortable-list 👋
 ```sh
-yarn add @thaddeusjiang/react-sortable-list
+npm install @thaddeusjiang/react-sortable-list
 ```
@@ -67,3 +67,3 @@
 
-### Use Case 1: ItemRender
+### Use Case: ItemRender
 
@@ -91,3 +91,3 @@ ```jsx
 
-### Use Case 2: Children
+### Use Case: Children
 
@@ -117,8 +117,5 @@ ```jsx
 
-### Use Case 3: Custom Drag Handler
+### Use Case: Custom Drag Handler
 
-<details>
-
 ```jsx
-
 const DragHandler = (props) => (
@@ -148,3 +145,3 @@ <div
 
-export const DragHandleExample: React.VFC = () => {
+export const DragHandlerExample: React.VFC = () => {
   const [items, setItems] = useState<SortableItemProps[]>([
@@ -175,11 +172,60 @@ { id: '1', name: 'Item 1' },
 };
-
 ```
 
-</details>
+### Use Case: Complex Component
 
-### Use Case 4: Horizontal Sortable List
+Custom Event would work as well in SortableItem Component with DragHandler.
 
-<details>
+```diff
+export const ComplexComponentExample: React.VFC = () => {
+  const [items, setItems] = useState<SortableItemProps[]>([
+    { id: '1', name: 'Item 1' },
+    { id: '2', name: 'Item 2' },
+    { id: '3', name: 'Item 3' },
+  ]);
 
+  return (
+    <SortableList items={items} setItems={setItems}>
+      {({ items }: { items: SortableItemProps[] }) => (
+        <div className="space-y-4">
+          {items.map((item: SortableItemProps) => (
++           <SortableItem
+              key={item.id}
+              id={item.id}
+              className="..."
++             DragHandler={DragHandler}
+            >
+              <input
+                type="text"
+                className="..."
+                id={item.id}
+                value={item.name}
++               onChange={(event) => {
++                 const newItems = [...items];
++                 const index = newItems.findIndex(
++                   (item) => item.id === event.target.id
++                 );
++                 newItems[index].name = event.target.value;
++                 setItems(newItems);
++               }}
+              />
+              <button
+                className="..."
++               onClick={() => {
++                 alert('delete');
++               }}
+              >
+                {/* delete icon */}
+              </button>
+            </SortableItem>
+          ))}
+        </div>
+      )}
+    </SortableList>
+  );
+};
+```
+
+### Use Case: Horizontal Sortable List
+
 ```jsx
@@ -203,11 +249,6 @@ export const HorizontalExample: React.VFC = () => {
 };
-
 ```
 
-</details>
-
 ### Optional: disabled Drag and Drop
 
-<details>
-
 ```diff
@@ -235,4 +276,2 @@ export const ItemRenderExample: React.VFC = () => {
 
-</details>
-
 ## Development
@@ -245,3 +284,3 @@
 ```bash
-yarn storybook
+npm run storybook
 ```
@@ -254,8 +293,8 @@
 ```bash
-yarn link
+npm run link
 
 cd example
-yarn link "@thaddeusjiang/react-sortable-list"
-yarn # or yarn to install dependencies
-yarn start
+npm run link "@thaddeusjiang/react-sortable-list"
+npm install
+npm run start
 ```
@@ -266,3 +305,3 @@
 ```sh
-yarn run test
+npm run run test
 ```
@@ -269,0 +308,0 @@

No alert changes

Improved metrics

Total package byte prevSize

47536

6.9%

Lines of code

216

1.41%

Number of lines in readme file

322

13.78%

Worsened metrics

Dev dependency count

31

10.71%

Dependency changes

• + Added

  @dnd-kit/core@6.3.1
  (transitive)

• + Added

  @dnd-kit/sortable@8.0.0
  (transitive)

• - Removed

  @dnd-kit/core@5.0.3
  (transitive)

• - Removed

  @dnd-kit/sortable@6.0.1
  (transitive)

• Updated

  @dnd-kit/core@^6.1.0

• Updated

  @dnd-kit/sortable@^8.0.0