Add addons for storybook

.storybook/main.js

@@ -1,4 +1,10 @@
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
+    "@storybook/addon-links",
+    "@storybook/addon-storysource",
+    "@storybook/theming",
+  ],
 };

.storybook/manager.js

@@ -0,0 +1,17 @@
+// https://storybook.js.org/docs/react/configure/features-and-behavior
+import { addons } from "@storybook/addons";
+import theme from "./theme";
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: "bottom",
+  sidebarAnimations: true,
+  enableShortcuts: true,
+  isToolshown: true,
+  theme,
+  selectedPanel: undefined,
+  initialActive: "sidebar",
+  showRoots: false,
+});

.storybook/preview.js

@@ -1,3 +1,9 @@
+import { themes } from "@storybook/theming";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  docs: {
+    theme: themes.dark,
+  },
+  layout: "centered",
 };

.storybook/theme.js

@@ -0,0 +1,41 @@
+// https://storybook.js.org/docs/react/configure/theming
+import { create } from "@storybook/theming";
+
+// https://github.com/storybookjs/storybook/blob/master/lib/theming/src/types.ts
+export default create({
+  base: "dark",
+
+  // Storybook-specific color palette
+  colorPrimary: "#FF4785", // coral
+  colorSecondary: "#1EA7FD", // ocean
+
+  // UI
+  appBg: "#2f2f2f",
+  appContentBg: "#333",
+  appBorderColor: "rgba(255,255,255,.1)",
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: "monospace",
+
+  // Text colors
+  textColor: "#FFFFFF",
+  textInverseColor: "#333333",
+  textMutedColor: "#999999",
+
+  // Toolbar default and active colors
+  barTextColor: "#999999",
+  barSelectedColor: "#1EA7FD",
+  barBg: "#333333",
+
+  // Form colors
+  inputBg: "#3f3f3f",
+  inputBorder: "rgba(0,0,0,.3)",
+  inputTextColor: "#FFFFFF",
+  inputBorderRadius: 6,
+
+  brandTitle: "brbcoding.com",
+  brandUrl: "https://brbcoding.com",
+  // brandImage: 'https://placehold.it/350x150',
+});

README.md

@@ -12,6 +12,8 @@ Find this package on [npm]. 👾
    <img alt="latest" src="https://img.shields.io/npm/v/monkeyspan/latest.svg" />
 </a>
 
+[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://codesandbox.io/s/nervous-frost-r0qcp?file=/src/App.js)
+
 ## Tooling
 
 - [Babel](https://babeljs.io/)
@@ -102,11 +104,14 @@ _Please note that this project follows the practices of [Semantic Versioning] an
 | - | - | - | - |
 | build | none | `npm run build` | Runs `npm run build:rollup` |
 | build:storybook | none | `npm run build:storybook` | Generates a build for storybook using `build-storybook`. |
+| build:storybook:docs | none | `npm run build:storybook:docs` | Generates a build for storybook docs using `build-storybook --docs`. |
 | build:rollup | none | `npm run build:rollup` | Generates a build and source map (`bundle.js` & `bundle.js.map`) using Rollup & Babel. |
 | clean | none | `npm run clean` | Runs `npm run clean:eslint` and `npm run clean:prettier` |
 | clean:eslint | none | `npm run clean:eslint` | Runs `npx eslint --fix .`, which attempts to resolve all eslint issues in the project. |
 | clean:prettier | none | `npm run clean:prettier` | Runs `npx prettier --write .`, which attempts to resolve all prettier issues in the project. |
 | storybook | none | `npm run storybook` | Starts storybook on port 6006 via `start-storybook -p 6006`. |
+| storybook:docs | none | `npm run storybook:docs` | Starts storybook on port 6006 in docs mode via `start-storybook -p 6006 --docs`. |
+| storybook:nocache | none | `npm run storybook:nocache` | Starts storybook on port 6006 without manager caching via `start-storybook -p 6006 --no-manager-cache`. |
 | tag | `--value` | `npm run tag --value=1.2.3` | Runs `npm run tag:set --value=<value>` and `npm run tag:release --value=<value>` |
 | tag:set | `--value` | `npm run tag:set --value=1.2.3` | Runs `npx json -I -f ./package.json -e 'this.version=\"$npm_config_value\"' && npm i && git ci -am \"$npm_config_value\" && git tag $npm_config_value`, which updates the `package.json` version to the value provided, updates the `package-lock.json`, generates a commit for the changes, and tags the commit using the value provided. |
 | tag:release | `--value` | `npm run tag:release --value=1.2.3` | Runs `git push origin $npm_config_value && gh release create $npm_config_value --title $npm_config_value --notes-file ./CHANGELOG.md`, which pushes the tag value provided to GitHub, then produces a release for it using the `gh` cli. _You will need the [gh cli](https://github.com/cli/cli) for this command to work._ |

babel.config.js

@@ -1,3 +1,5 @@
+const ignore = ["./src/.example-stories/"];
+
 const plugins = [
   // https://babeljs.io/docs/en/babel-plugin-transform-runtime#options
   ["@babel/plugin-transform-runtime", {}],
@@ -22,4 +24,4 @@ const presets = [
 ];
 
 // https://babeljs.io/docs/en/options
-module.exports = { plugins, presets };
+module.exports = { ignore, plugins, presets };

package.json

@@ -7,17 +7,20 @@
     "build": "npm run build:rollup",
     "build:rollup": "npx rollup --config",
     "build:storybook": "build-storybook",
+    "build:storybook:docs": "build-storybook --docs",
     "clean": "npm run clean:eslint && npm run clean:prettier",
     "clean:eslint": "npx eslint --fix .",
     "clean:prettier": "npx prettier --write .",
     "storybook": "start-storybook -p 6006",
+    "storybook:docs": "start-storybook -p 6006 --docs",
+    "storybook:nocache": "start-storybook -p 6006 --no-manager-cache",
     "tag": "npm run tag:set --value=$npm_config_value && npm run tag:release --value=$npm_config_value",
     "tag:set": "npx json -I -f ./package.json -e 'this.version=\"$npm_config_value\"' && npm i && git ci -am \"$npm_config_value\" && git tag $npm_config_value",
     "tag:release": "git push origin $npm_config_value && gh release create $npm_config_value --title $npm_config_value --notes-file ./CHANGELOG.md",
     "test": "npm run test:eslint && npm run test:prettier",
+    "test:babel": "npx babel src --out-dir .babel-config-test/",
     "test:eslint": "npx eslint .",
-    "test:prettier": "npx prettier --check .",
-    "test:babel": "npx babel src --out-dir .babel-config-test/"
+    "test:prettier": "npx prettier --check ."
   },
   "repository": {
     "type": "git",
@@ -44,10 +47,12 @@
     "@rollup/plugin-babel": "^5.2.3",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
+    "@storybook/addon-a11y": "^6.1.15",
     "@storybook/addon-actions": "^6.1.15",
     "@storybook/addon-essentials": "^6.1.15",
     "@storybook/addon-links": "^6.1.15",
     "@storybook/react": "^6.1.15",
+    "@storybook/theming": "^6.1.15",
     "babel-loader": "^8.2.2",
     "eslint": "^7.19.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -59,7 +64,6 @@
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",
     "prettier": "2.2.1",
-    "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rollup": "^2.38.1"
@@ -69,7 +73,8 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.12.5"
+    "@babel/runtime": "^7.12.5",
+    "prop-types": "^15.7.2"
   },
   "husky": {
     "hooks": {