Storybook with React, Redux, and Material UI

Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  argTypes: {
    backgroundColor: { control: 'color' },
    primary: { control: "boolean" },
    label: { control: "text" },
    size: {
      control: {
        type: 'radio',
        options: [ 'small', 'medium', 'large' ],
      }
    }
  },
};

export const Primary = args => <Button {...args} />
Primary.args = {
  primary: true,
  label: 'Primary Button',
};

Introduction.stories.mdx.js

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Example/Introduction" />

<style>{`
  .subheading {
    --mediumdark: '#999999';
    font-weight: 900;
    font-size: 13px;
    color: #999;
    letter-spacing: 6px;
    line-height: 24px;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 40px;
  }
`}</style>

# My Heading

This is example _markdown_ text, but also supports html such as:

<div className="subheading">Getting Started</div>

To begin, execute `yarn storybook`.

middleware.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/socket",
      { target: "ws://localhost:4002", ws: true }));

  app.use(
    "/photos",
    createProxyMiddleware({ target: "http://localhost:3001", changeOrigin: true })
  );

  app.use(
    "/api",
    createProxyMiddleware({ target: "http://localhost:3001", changeOrigin: true })
  );
};

preview.js

import React from "react";
import { MemoryRouter } from "react-router";
import { Provider } from "react-redux";
import { ThemeProvider } from "@material-ui/styles";
import store from "../src/store";
import theme from "../src/theme";

export const decorators = [
  Story => (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <MemoryRouter>
          <Story />
        </MemoryRouter>
      </ThemeProvider>
    </Provider>
  )
];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" }
};