add list-box.tsx and drag-and-drop-list-box.tsx

Author: Mat Jones

.storybook/config.js

@@ -3,9 +3,9 @@ import { setDefaults } from "@storybook/addon-info";
 import { withKnobs } from "@storybook/addon-knobs";
 import { withInfo } from "@storybook/addon-info";
 import "./storybook.css";
-import "assets/scss/andculturecode-javascript-react-components.scss";
-import { IconUtils } from "utilities/icon-utils";
-import { SvgIcons } from "atoms/constants/svg-icons";
+import "../src/assets/scss/andculturecode-javascript-react-components.scss";
+import { IconUtils } from "../src/utilities/icon-utils";
+import { SvgIcons } from "../src/atoms/constants/svg-icons";
 
 IconUtils.register(SvgIcons);
 

package-lock.json

@@ -24,6 +24,7 @@
         "@reach/menu-button": "0.10.2",
         "@tippyjs/react": "4.0.2",
         "@types/react": "16.9.11",
+        "@types/react-beautiful-dnd": "13.0.0",
         "@types/react-dom": "16.9.3",
         "@types/react-router-dom": "5.1.5",
         "andculturecode-javascript-core": "0.1.5",
@@ -34,6 +35,7 @@
         "i18next": "19.4.5",
         "immutable": "4.0.0-rc.12",
         "react": "16.13.1",
+        "react-beautiful-dnd": "13.0.0",
         "react-dom": "16.13.1",
         "react-i18next": "11.6.0",
         "react-router-dom": "5.1.2",

package.json

@@ -1,5 +1,5 @@
 import { FunctionComponent, SVGProps } from "react";
-import { Icons } from "atoms/constants/icons";
+import { Icons } from "../constants/icons";
 
 export interface SvgIcon {
     base: FunctionComponent<SVGProps<SVGSVGElement>>;

src/atoms/interfaces/svg-icon.ts

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import DragAndDropListBox from "./drag-and-drop-list-box";
+import { ListBoxItem } from "./list-box";
+import { Paragraph } from "../../atoms/typography/paragraph";
+
+export default {
+    title: "Molecules | Lists / DragAndDropListBox",
+    component: DragAndDropListBox,
+};
+
+export const DragAndDropListBoxDefault = () => {
+    const [items, setItems] = useState<Array<ListBoxItem<number>>>([
+        {
+            id: 0,
+            label: "0",
+            text: "Item Number 0",
+        },
+        {
+            id: 1,
+            label: "1",
+            text: "Item Number 1",
+        },
+        {
+            id: 2,
+            label: "2",
+            text: "Item Number 2",
+        },
+        {
+            id: 3,
+            label: "3",
+            text: "Item Number 3",
+        },
+    ]);
+
+    return (
+        <React.Fragment>
+            <Paragraph>Drag and drop items to reorder them.</Paragraph>
+            <DragAndDropListBox
+                droppableId="drag-and-drop-list-box.tsx"
+                items={items}
+                onReordered={setItems}
+            />
+        </React.Fragment>
+    );
+};