infrastructure/update-storybook-config

.gitignore

@@ -8,4 +8,5 @@ dist
 type-declarations
 dist-docs
 coverage
-storybook-static
+storybook-static
+.DS_Store

.prettierignore

@@ -0,0 +1,2 @@
+# Ignore all SVG files
+*.svg

.storybook/customTheme.js

@@ -0,0 +1,8 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "dark",
+  brandTitle: "Council Data Project",
+  brandUrl: "https://councildataproject.github.io/",
+  // brandImage: "https://placehold.it/350x150",
+});

.storybook/main.js

@@ -1,12 +1,13 @@
 const path = require("path");
 
 module.exports = {
-  stories: ["../src/**/*.stories.(tsx|mdx)"],
+  stories: ["../src/**/*.stories.@(tsx|mdx)"],
   addons: [
-    "@storybook/addon-a11y/register",
-    "@storybook/addon-actions/register",
-    "@storybook/addon-knobs/register",
-    "@storybook/addon-links/register",
+    "@storybook/addon-a11y",
+    "@storybook/addon-actions",
+    "@storybook/addon-knobs",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
     {
       name: "@storybook/addon-docs",
       options: {

.storybook/manager.js

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

.storybook/preview.js

@@ -1,17 +1,37 @@
 import React from "react";
-
 import { addDecorator } from "@storybook/react";
-import { withA11y } from "@storybook/addon-a11y";
 import { withInfo } from "@storybook/addon-info";
-import { withKnobs } from "@storybook/addon-knobs";
+import { themes } from "@storybook/theming";
 import "semantic-ui-css/semantic.min.css";
-import { Segment } from "semantic-ui-react";
 
 addDecorator(withInfo);
-addDecorator(withA11y);
-addDecorator(withKnobs);
 
-// Wrap a simple container around all stories.
-addDecorator((storyFn) => (
-  <Segment>{storyFn()}</Segment>
-));
+export const decorators = [(story) => <div style={{ margin: "1rem" }}>{story()}</div>];
+
+export const parameters = {
+  options: {
+    storySort: {
+      order: ["Getting Started", "Library"],
+    },
+  },
+  docs: {
+    theme: themes.dark,
+  },
+  backgrounds: {
+    default: "light",
+    values: [
+      {
+        name: "light",
+        value: "#f9f9f9",
+      },
+      {
+        name: "grey",
+        value: "#929396",
+      },
+      {
+        name: "dark",
+        value: "#333",
+      },
+    ],
+  },
+};