Add Storybook

* add storybook

.babelrc

@@ -1,23 +1,30 @@
 {
-  "plugins": [
+	"plugins": [
 		"@emotion",
-    "@babel/plugin-proposal-class-properties",
-    [
-      "transform-react-remove-prop-types",
-      {
-        "mode": "remove",
-        "ignoreFilenames": ["node_modules"]
-      }
-    ]
-  ],
-  "presets": [
-    "minify",
-    [
-      "@babel/preset-env",
-      {
-        "loose": true
-      }
-    ],
-    "@babel/preset-react"
-  ]
+		[
+			"@babel/plugin-proposal-class-properties",
+			{
+				"loose": true
+			}
+		],
+		[
+			"transform-react-remove-prop-types",
+			{
+				"mode": "remove",
+				"ignoreFilenames": [
+					"node_modules"
+				]
+			}
+		]
+	],
+	"presets": [
+		"minify",
+		[
+			"@babel/preset-env",
+			{
+				"loose": true
+			}
+		],
+		"@babel/preset-react"
+	]
 }

.codesandbox/ci.json

@@ -1,3 +1,5 @@
 {
+  "node": "16",
+  "buildCommand": "build",
   "sandboxes": ["react-dropdown-select-nzto7"]
 }

.storybook/main.js

@@ -0,0 +1,21 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ['./stories/*.mdx', './stories/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  docs: {
+    toc: true,
+    autodocs: true,
+    defaultName: 'Documentation',
+    story: { inline: true } // render the story in an iframe
+    // source: { type: 'code' } // forces the raw source code (rather than the rendered JSX).
+  }
+};
+export default config;

.storybook/preview-body.html

@@ -0,0 +1,7 @@
+<!-- .storybook/preview-body.html -->
+
+<style>
+	html, body {
+		font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+</style>

.storybook/preview.js

@@ -0,0 +1,29 @@
+import { DocsPage, Canvas } from '@storybook/addon-docs';
+import React from 'react';
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      controls: { expanded: true },
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  },
+  decorators: [
+    (storyFn) => (
+      <div
+        style={{
+          height: 200,
+          width: 400,
+          margin: '0 auto'
+        }}>
+        {storyFn()}
+      </div>
+    )
+  ]
+};
+
+export default preview;

.storybook/stories/Changelog.mdx.js

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/addon-docs';
+import Changelog from '../CHANGELOG.md';
+
+<Meta title="Changelog" />
+
+<Changelog />

.storybook/stories/Select.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SelectStories from './Select.stories';
+
+<Meta of={SelectStories} />
+
+
+# Select
+
+Customisable dropdown select for react
+
+## Basic
+<Canvas of={SelectStories.Basic}  />
+
+## Multi
+
+<Canvas of={SelectStories.Multi}  />
+
+## Props
+
+_Select_ has the following properties:
+
+<Controls/>
+

.storybook/stories/Select.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Select } from '../../src';
+import { optionsBase } from '../../docs/src/options';
+
+const options = optionsBase(4);
+const baseArgs = {
+  ...Select.defaultProps,
+  options,
+  multi: false,
+  onChange: (values) => console.log(values)
+};
+
+export default {
+  title: 'react-dropdown-select',
+  component: Select,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Basic select examples'
+      }
+    }
+  }
+};
+
+export const Basic = { args: baseArgs };
+export const Multi = { args: { ...baseArgs, multi: true } };