init

.env.example

@@ -0,0 +1,2 @@
+GITHUB_TOKEN=
+NPM_TOKEN=

.github/workflows/storybook.yml

@@ -0,0 +1,28 @@
+name: Build and Deploy
+
+on: 
+  push:
+    paths: ["stories/**", "src/components/**"] # Trigger the action only when files change in the folders defined here
+    branches:
+      - prod
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/[email protected]
+        with:
+          persist-credentials: false
+      - name: Install and Build 🔧
+        run: | # Install npm packages and build the Storybook files
+          npm install
+          npm run build-storybook
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: prod # The branch the action should deploy to.
+          FOLDER: docs-build # The folder that the build-storybook script generates files.
+          CLEAN: true # Automatically remove deleted files from the deploy branch
+          TARGET_FOLDER: docs # The folder that we serve our Storybook files from

.gitignore

@@ -8,11 +8,13 @@
 # testing
 /coverage
 
-# production
+# production and distribution
 /build
+/dist
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "storybook-addon-material-ui"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,17 @@
+import { muiTheme } from 'storybook-addon-material-ui'
+
+import LightTheme from '../src/themes/LightTheme'
+
+export const decorators = [
+	muiTheme([LightTheme])
+];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -1,3 +1,9 @@
+# Distribution tutorial:
+https://storybook.js.org/tutorials/design-systems-for-developers/react/en/distribute/
+
+# Publish with Github Pages tutorial:
+https://medium.com/swlh/how-to-deploy-storybook-to-github-pages-4894097d49ab
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

docs-build/4.1a7fe21f.iframe.bundle.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */

docs-build/4.b5755104c312ff66c0f9.manager.bundle.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */

docs-build/6.22362f36094f0b17bfa7.manager.bundle.js.LICENSE.txt

@@ -0,0 +1,12 @@
+/*!
+ * OverlayScrollbars
+ * https://github.com/KingSora/OverlayScrollbars
+ *
+ * Version: 1.13.0
+ *
+ * Copyright KingSora | Rene Haas.
+ * https://github.com/KingSora
+ *
+ * Released under the MIT license.
+ * Date: 02.08.2020
+ */

docs-build/6.de70d651.iframe.bundle.js.LICENSE.txt

@@ -0,0 +1,12 @@
+/*!
+ * OverlayScrollbars
+ * https://github.com/KingSora/OverlayScrollbars
+ *
+ * Version: 1.13.0
+ *
+ * Copyright KingSora | Rene Haas.
+ * https://github.com/KingSora
+ *
+ * Released under the MIT license.
+ * Date: 02.08.2020
+ */