test(storybook): adds simple and multidrag examples

Author: waynevanson

stories/classic.css

@@ -0,0 +1,21 @@
+.list {
+  background-color: #ddd;
+  padding: 1rem;
+}
+
+.item {
+  list-style: none;
+  padding: 2rem;
+  border: #0005 solid black;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  background-color: #7cf;
+}
+
+.item:first-child {
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.item:last-child {
+  border-radius: 0 0 0.5rem 0.5rem;
+}

stories/multi-drag/multi-drag.stories.tsx

@@ -0,0 +1,32 @@
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Meta } from "@storybook/react";
+import { ReactSortable, ReactSortableProps } from "../../src";
+import { ULLITemplate, ULLITemplateProps } from "../templates/ul-li";
+
+export default {
+  title: "Example/MultiDrag",
+  component: ReactSortable,
+  args: {
+    animation: 200,
+    multiDrag: true,
+    list: [
+      {
+        id: "1",
+        text: "Hello, World!",
+      },
+      {
+        id: "2",
+        text: "Hello, Earth!",
+      },
+      {
+        id: "3",
+        text: "Goodbye, World!",
+      },
+    ],
+  },
+} as Meta<ReactSortableProps<ULLITemplateProps>>;
+
+export const Primary = ULLITemplate.bind({});
+Primary.args = {
+  tag: "ul",
+};

stories/templates/ul-li.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story } from "@storybook/react";
+import { ReactSortable, ReactSortableProps } from "../../dist";
+import "../classic.css";
+
+export interface ULLITemplateProps {
+  id: string;
+  text: string;
+}
+
+export const ULLITemplate: Story<ReactSortableProps<ULLITemplateProps>> = (
+  args
+) => {
+  const [list, setList] = React.useState<ULLITemplateProps[]>(args.list);
+
+  return (
+    <ReactSortable className="list" {...args} list={list} setList={setList}>
+      {list.map(({ id, text }) => (
+        <li className="item" key={id}>
+          {text}
+        </li>
+      ))}
+    </ReactSortable>
+  );
+};

stories/unary-lists/simple-list.stories.tsx

@@ -0,0 +1,31 @@
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Meta } from "@storybook/react";
+import { ReactSortableProps, ReactSortable } from "../../src";
+import { ULLITemplate, ULLITemplateProps } from "../templates/ul-li";
+
+export default {
+  title: "Example/Simple List",
+  component: ReactSortable,
+  args: {
+    animation: 200,
+    list: [
+      {
+        id: "1",
+        text: "Hello, World!",
+      },
+      {
+        id: "2",
+        text: "Hello, Earth!",
+      },
+      {
+        id: "3",
+        text: "Goodbye, World!",
+      },
+    ],
+  },
+} as Meta<ReactSortableProps<ULLITemplateProps>>;
+
+export const Primary = ULLITemplate.bind({});
+Primary.args = {
+  tag: "ul",
+};