Merge pull request #35 from kylekarpack/sb

Add Storybook

Author: kylekarpack

.github/workflows/storybook.yml

@@ -0,0 +1,24 @@
+name: Build and Deploy Storybook
+on:
+  push:
+    paths: ["stories/**", "src/components/**"] # Trigger the action only when files change in the folders defined here
+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 ci
+          npm run build-storybook
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages # 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

@@ -76,4 +76,4 @@ typings/
 .fusebox/
 
 dist/
-.vscode/
+docs-build/

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.storybook/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": ["@babel/plugin-transform-modules-commonjs"]
+}

.storybook/main.js

@@ -0,0 +1,19 @@
+import type { StorybookViteConfig } from "@storybook/builder-vite";
+
+const config: StorybookViteConfig = {
+  stories: ["../stories/**/*.stories.{ts,tsx}"],
+  addons: ["@storybook/addon-controls"],
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+  },
+  async viteFinal(config) {
+    config.base = "/react-github-graph/";
+    return config;
+  },
+};
+
+export default config;

.storybook/main.ts

@@ -0,0 +1,18 @@
+import { addons } from "@storybook/addons";
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  showToolbar: true,
+  panelPosition: "bottom",
+  sidebarAnimations: true,
+  enableShortcuts: true,
+  isToolshown: true,
+  theme: undefined,
+  selectedPanel: "controls",
+  initialActive: "controls",
+  sidebar: {
+    showRoots: false,
+  },
+});

.storybook/manager.ts

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}