feat(setup): add styleguidist to design system

packages/design-system/.eslintignore

@@ -0,0 +1 @@
+styleguide.config.js

packages/design-system/package.json

@@ -20,7 +20,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -44,6 +46,7 @@
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
-    "prettier": "^2.0.4"
+    "prettier": "^2.0.4",
+    "react-styleguidist": "^11.0.5"
   }
 }

packages/design-system/src/components/ListItem.tsx → packages/design-system/src/components/ListItem/ListItem.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, Box, Styled } from 'theme-ui';
 
-import { PageData } from '../../../poolbase-app/src/app/interfaces';
+import { PageData } from '../../../../poolbase-app/src/app/interfaces';
 
 export const ListItem: React.FC<{ data: PageData }> = ({
   data,

packages/design-system/src/components/ListItem/index.tsx

@@ -0,0 +1 @@
+export * from './ListItem';

packages/design-system/src/components/index.tsx

@@ -1 +1 @@
-export * from './ListItem';
+export * from './ListItem/ListItem';

packages/design-system/src/styleguide/ThemeWrapper.tsx

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+import { ThemeProvider } from 'theme-ui';
+import { poolbaseTheme } from '../theme';
+
+export default class ThemeWrapper extends Component {
+  render() {
+    return <ThemeProvider theme={poolbaseTheme}>{this.props.children}</ThemeProvider>;
+  }
+}

packages/design-system/styleguide.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+module.exports = {
+  components: 'src/components/**/[A-Z]*.tsx',
+  styleguideComponents: {
+    Wrapper: path.join(__dirname, 'src/styleguide/ThemeWrapper')
+  }
+}