Merge pull request #5385 from JedWatson/luke/storybook

package.json

@@ -113,7 +113,8 @@
   },
   "workspaces": [
     "packages/*",
-    "docs"
+    "docs",
+    "storybook"
   ],
   "preconstruct": {
     "packages": [

storybook/.gitignore

@@ -0,0 +1,2 @@
+# Storybook
+storybook-static

storybook/.storybook/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@emotion/babel-preset-css-prop"
+  ],
+  "plugins": ["@emotion"]
+}

storybook/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+  addons: ['@storybook/addon-a11y', '@storybook/addon-essentials'],
+  core: {
+    builder: 'webpack4',
+  },
+  features: {
+    /**
+     * Enable code splitting
+     * @see https://storybook.js.org/docs/react/builders/webpack#code-splitting
+     */
+    storyStoreV7: true,
+  },
+  framework: '@storybook/react',
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+};
+
+export default config;

storybook/.storybook/preview.ts

@@ -0,0 +1,7 @@
+export const parameters = {
+  options: {
+    storySort: {
+      order: ['Select', ['Basic', 'Animated']],
+    },
+  },
+};

storybook/data/index.ts

@@ -0,0 +1,28 @@
+export const colourOptions = [
+  { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
+  { value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
+  { value: 'purple', label: 'Purple', color: '#5243AA' },
+  { value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
+  { value: 'orange', label: 'Orange', color: '#FF8B00' },
+  { value: 'yellow', label: 'Yellow', color: '#FFC400' },
+  { value: 'green', label: 'Green', color: '#36B37E' },
+  { value: 'forest', label: 'Forest', color: '#00875A' },
+  { value: 'slate', label: 'Slate', color: '#253858' },
+  { value: 'silver', label: 'Silver', color: '#666666' },
+] as const;
+
+export const defaultArgs = {
+  defaultMenuIsOpen: false,
+  defaultValue: undefined,
+  inputId: 'react-select-id',
+  isClearable: false,
+  isDisabled: false,
+  isLoading: false,
+  isMulti: false,
+  isRtl: false,
+  isSearchable: true,
+  menuPlacement: 'bottom',
+  menuPortalTarget: undefined,
+  options: colourOptions,
+  placeholder: 'Select...',
+} as const;

storybook/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "storybook",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "build": "build-storybook",
+    "dev": "start-storybook -p 6006"
+  },
+  "dependencies": {
+    "@babel/core": "^7.12.0",
+    "@babel/preset-env": "^7.12.0",
+    "@babel/preset-typescript": "^7.12.7",
+    "@emotion/babel-plugin": "^11.0.0",
+    "@emotion/babel-preset-css-prop": "^10.0.0",
+    "babel-loader": "^8.0.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/builder-webpack4": "^6.5.12",
+    "@storybook/manager-webpack4": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "typescript": "^4.1.3"
+  }
+}

storybook/stories/AnimatedSelect.stories.tsx

@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import * as React from 'react';
+import Select from 'react-select';
+import makeAnimated from 'react-select/animated';
+
+import { colourOptions, defaultArgs } from '../data';
+
+export default {
+  title: 'Select/Animated',
+  component: Select,
+} as ComponentMeta<typeof Select>;
+
+const animatedComponents = makeAnimated();
+
+const Template: ComponentStory<typeof Select> = ({
+  inputId = 'react-select',
+  ...props
+}) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: 'system-ui',
+        gap: '0.5rem',
+      }}
+    >
+      <label htmlFor={inputId} style={{ fontWeight: 500 }}>
+        Select
+      </label>
+      <Select components={animatedComponents} inputId={inputId} {...props} />
+    </div>
+  );
+};
+
+export const Animated = Template.bind({});
+Animated.args = {
+  ...defaultArgs,
+  defaultValue: [colourOptions[0], colourOptions[1], colourOptions[2]],
+  isMulti: true,
+};

storybook/stories/Select.stories.tsx

@@ -0,0 +1,53 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import * as React from 'react';
+import Select from 'react-select';
+
+import { defaultArgs } from '../data';
+
+/**
+ * More on default export:
+ * @see https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+ */
+export default {
+  title: 'Select/Basic',
+  component: Select,
+  /**
+   * More on argTypes:
+   * @see https://storybook.js.org/docs/react/api/argtypes
+   */
+  argTypes: {},
+} as ComponentMeta<typeof Select>;
+
+/**
+ * More on component templates:
+ * @see https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+ */
+const Template: ComponentStory<typeof Select> = ({
+  inputId = 'react-select',
+  ...props
+}) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: 'system-ui',
+        gap: '0.5rem',
+      }}
+    >
+      <label htmlFor={inputId} style={{ fontWeight: 500 }}>
+        Select
+      </label>
+      <Select inputId={inputId} {...props} />
+    </div>
+  );
+};
+
+export const Basic = Template.bind({});
+/**
+ * More on args:
+ * @see https://storybook.js.org/docs/react/writing-stories/args
+ */
+Basic.args = {
+  ...defaultArgs,
+};