@synerise/ds-sortable 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+---
+id: sortable
+title: Sortable
+---
+
+Sortable UI Component
+
+## Installation
+```
+npm i @synerise/ds-sortable
+or
+yarn add @synerise/ds-sortable
+```
+
+## Usage
+```
+import Sortable from '@synerise/ds-sortable'
+
+<Sortable />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-sortable--default"></iframe>
+
+## API
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |

package/dist/Sortable.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SortableProps, BaseItem } from './Sortable.types';
+export declare const Sortable: <ItemType extends BaseItem>({ items, onOrderChange, ItemComponent, axis, }: SortableProps<ItemType>) => React.JSX.Element;
+export default Sortable;

package/dist/Sortable.js

@@ -0,0 +1,93 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useMemo, useState, useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, MouseSensor, useSensor, useSensors, DragOverlay } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, horizontalListSortingStrategy, rectSortingStrategy } from '@dnd-kit/sortable';
+import { restrictToVerticalAxis, restrictToHorizontalAxis, restrictToParentElement } from '@dnd-kit/modifiers';
+import { SortableItem } from './SortableItem';
+export var Sortable = function Sortable(_ref) {
+  var items = _ref.items,
+    onOrderChange = _ref.onOrderChange,
+    ItemComponent = _ref.ItemComponent,
+    axis = _ref.axis;
+  var _useState = useState(items),
+    order = _useState[0],
+    setOrder = _useState[1];
+  var _useState2 = useState(),
+    activeItem = _useState2[0],
+    setActiveItem = _useState2[1];
+  var sensors = useSensors(useSensor(MouseSensor), useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  var sortableId = useMemo(function () {
+    return uuid();
+  }, []);
+  var handleDragEnd = function handleDragEnd(event) {
+    var active = event.active,
+      over = event.over;
+    if (active.id !== (over == null ? void 0 : over.id)) {
+      setOrder(function (oldOrder) {
+        var oldIndex = oldOrder.findIndex(function (item) {
+          return item.id === active.id;
+        });
+        var newIndex = oldOrder.findIndex(function (item) {
+          return item.id === (over == null ? void 0 : over.id);
+        });
+        var updatedOrder = arrayMove(oldOrder, oldIndex, newIndex);
+        onOrderChange && onOrderChange(updatedOrder);
+        return updatedOrder;
+      });
+    }
+    setActiveItem(undefined);
+  };
+  var handleDragStart = function handleDragStart(event) {
+    setActiveItem(items.find(function (item) {
+      return item.id === event.active.id;
+    }));
+  };
+  useEffect(function () {
+    setOrder(items);
+  }, [items]);
+  var contextModifiers = useMemo(function () {
+    if (axis === 'x') {
+      return [restrictToHorizontalAxis];
+    }
+    if (axis === 'y') {
+      return [restrictToVerticalAxis];
+    }
+    return [];
+  }, [axis]);
+  var sortingStrategy = useMemo(function () {
+    if (axis === 'x') {
+      return horizontalListSortingStrategy;
+    }
+    if (axis === 'y') {
+      return verticalListSortingStrategy;
+    }
+    return rectSortingStrategy;
+  }, [axis]);
+  return /*#__PURE__*/React.createElement(DndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    modifiers: contextModifiers
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: order,
+    strategy: sortingStrategy
+  }, order.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(SortableItem, {
+      id: item.id,
+      index: index,
+      isDragged: (activeItem == null ? void 0 : activeItem.id) === item.id,
+      key: "sortable-item-" + sortableId + "-" + item.id,
+      data: item,
+      component: ItemComponent
+    });
+  }), /*#__PURE__*/React.createElement(DragOverlay, {
+    modifiers: [restrictToParentElement]
+  }, activeItem && /*#__PURE__*/React.createElement(ItemComponent, _extends({}, activeItem, {
+    index: -1
+  })))));
+};
+export default Sortable;

package/dist/Sortable.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const SortableItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SortableItemWrapper: import("styled-components").StyledComponent<"div", any, {
+    isGrabbed: boolean;
+    isDragged: boolean;
+}, never>;
+export declare const SortableItemHandle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Sortable.styles.js

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components';
+export var SortableItemContent = styled.div.withConfig({
+  displayName: "Sortablestyles__SortableItemContent",
+  componentId: "sc-1ggkbms-0"
+})([""]);
+export var SortableItemWrapper = styled.div.withConfig({
+  displayName: "Sortablestyles__SortableItemWrapper",
+  componentId: "sc-1ggkbms-1"
+})(["", " ", ""], function (props) {
+  return props.isDragged && css(["", "{visibility:hidden;opacity:0;poiner-events:none;}position:relative;&:before{content:'';position:absolute;width:100%;height:100%;border:1px dashed ", ";background-color:", ";border-radius:3px;}"], SortableItemContent, props.theme.palette['blue-300'], props.theme.palette['blue-050']);
+}, function (props) {
+  return props.isGrabbed && css(["", "{background:", ";box-shadow:0px 16px 32px 0px rgba(35,41,54,0.1);}"], SortableItemContent, props.theme.palette.white);
+});
+export var SortableItemHandle = styled.div.withConfig({
+  displayName: "Sortablestyles__SortableItemHandle",
+  componentId: "sc-1ggkbms-2"
+})(["cursor:grab;"]);

package/dist/Sortable.types.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode, ReactElement, ComponentType } from 'react';
+import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+import type { WithHTMLAttributes } from '@synerise/ds-utils';
+export type DragHandlePropType = DraggableAttributes & DraggableSyntheticListeners;
+export type BaseItem = {
+    id: string | number;
+    dragHandleProps?: DragHandlePropType;
+};
+type WithIndex<T> = T & {
+    index: number;
+};
+type ItemComponent<ItemType extends WithIndex<BaseItem>> = ComponentType<ItemType> | ((props: ItemType) => ReactElement);
+export type SortableItemProps<ItemType extends BaseItem> = WithHTMLAttributes<HTMLDivElement, {
+    children?: ReactNode;
+    id: string | number;
+    index: number;
+    component: ItemComponent<WithIndex<ItemType>>;
+    data: ItemType;
+    isDragged?: boolean;
+}>;
+export type SortableProps<ItemType extends BaseItem> = {
+    items: ItemType[];
+    axis?: 'x' | 'y';
+    ItemComponent: ItemComponent<WithIndex<ItemType>>;
+    onOrderChange?: (newOrder: ItemType[]) => void;
+};
+export {};

package/dist/Sortable.types.js

@@ -0,0 +1 @@
+export {};

package/dist/SortableItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SortableItemProps, BaseItem } from './Sortable.types';
+export declare const SortableItem: <ItemType extends BaseItem>({ id, data, index, isDragged, component: Component, style, ...htmlAttributes }: SortableItemProps<ItemType>) => React.JSX.Element;

package/dist/SortableItem.js

@@ -0,0 +1,42 @@
+var _excluded = ["id", "data", "index", "isDragged", "component", "style"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import * as S from './Sortable.styles';
+export var SortableItem = function SortableItem(_ref) {
+  var id = _ref.id,
+    data = _ref.data,
+    index = _ref.index,
+    _ref$isDragged = _ref.isDragged,
+    isDragged = _ref$isDragged === void 0 ? false : _ref$isDragged,
+    Component = _ref.component,
+    style = _ref.style,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useSortable = useSortable({
+      id: id
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var itemStyle = _extends({}, style, {
+    transform: CSS.Translate.toString(transform),
+    transition: transition,
+    opacity: 1
+  });
+  var handleProps = _extends({}, attributes, listeners);
+  return /*#__PURE__*/React.createElement(S.SortableItemWrapper, _extends({
+    style: itemStyle,
+    "data-testid": "ds-sortable-item"
+  }, htmlAttributes, {
+    isGrabbed: index === -1,
+    isDragged: isDragged,
+    ref: setNodeRef
+  }), /*#__PURE__*/React.createElement(S.SortableItemContent, null, /*#__PURE__*/React.createElement(Component, _extends({}, data, {
+    index: index,
+    dragHandleProps: handleProps
+  }))));
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Sortable';
+export type { DragHandlePropType, SortableItemProps, SortableProps, BaseItem } from './Sortable.types';

package/dist/index.js

@@ -0,0 +1 @@
+export { default } from './Sortable';

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@synerise/ds-sortable",
+  "version": "1.0.0",
+  "description": "Sortable UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@synerise/ds-utils": "^1.0.1",
+    "uuid": "^8.3.2"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "7b4d547241901238853719350ca648924735bfc7"
+}