init

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "env": { "browser": true },
+
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "xo/esnext",
+    "xo-react/space",
+    "prettier"
+  ],
+  "plugins": ["@typescript-eslint"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "useJSXTextNode": true,
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "camelcase": 0,
+    "@typescript-eslint/camelcase": 0,
+    "@typescript-eslint/indent": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "lines-between-class-members": 0,
+    "capitalized-comments": 0,
+    "react/prop-types": 0,
+    "react/jsx-tag-spacing": {
+      "closingSlash": "never",
+      "beforeSelfClosing": "always",
+      "afterOpening": "never",
+      "beforeClosing": "allow"
+    },
+    "react/jsx-closing-tag-location": 0,
+    "react/no-danger": 0,
+    "@typescript-eslint/explicit-member-accessibility": 0
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+coverage
+dist/

README.md

@@ -0,0 +1 @@
+# storybook-dark-mode

package.json

@@ -0,0 +1,61 @@
+{
+  "name": "storybook-dark-mode",
+  "version": "0.0.0",
+  "description": "Toggle between light and dark mode in Storybook v5",
+  "main": "index.js",
+  "source": "index.ts",
+  "files": [
+    "dist",
+    "register.js"
+  ],
+  "author": {
+    "name": "Andrew Lisowski",
+    "email": "[email protected]"
+  },
+  "scripts": {
+    "lint": "eslint --ext .ts --ext .tsx src/**",
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^16.8.6",
+    "husky": "^1.3.1",
+    "jest": "^24.1.0",
+    "lint-staged": "^8.1.5",
+    "prettier": "^1.16.4",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "typescript": "^3.3.3333",
+    "@typescript-eslint/eslint-plugin": "^1.4.2",
+    "@typescript-eslint/parser": "^1.4.2",
+    "eslint": "^5.14.1",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-config-xo": "^0.26.0",
+    "eslint-config-xo-react": "^0.18.0",
+    "eslint-plugin-react": "^7.12.4"
+  },
+  "prettier": {
+    "singleQuote": true
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,json,css,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "@storybook/addons": "^5.0.0",
+    "@storybook/components": "^5.0.0",
+    "@storybook/core-events": "^5.0.0",
+    "@storybook/theming": "^5.0.0",
+    "fast-deep-equal": "^2.0.1",
+    "memoizerific": "^1.11.3"
+  }
+}

register.js

@@ -0,0 +1,3 @@
+// NOTE: loading addons using this file is deprecated!
+// please use manager.js and preview.js files instead
+require('./dist/register');

src/Tool.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { themes } from '@storybook/theming';
+import { IconButton } from '@storybook/components';
+
+import Sun from './icons/Sun';
+import Moon from './icons/Moon';
+
+interface DarkModeProps {
+  api: {
+    setOptions(options: any): void;
+    on(event: string, callback: (data: any) => void): void;
+    off(event: string, callback: (data: any) => void): void;
+    getCurrentStoryData(): any;
+  };
+}
+
+interface DarkModeState {
+  isDark: boolean;
+}
+
+export default class DarkMode extends React.Component<
+  DarkModeProps,
+  DarkModeState
+> {
+  state = {
+    isDark: false
+  };
+
+  setDarkMode = (isDark: boolean) => {
+    this.props.api.setOptions({
+      isDark,
+      theme: isDark ? themes.dark : themes.light
+    });
+
+    this.setState({
+      isDark
+    });
+  };
+
+  render() {
+    const { isDark } = this.state;
+
+    return (
+      <IconButton
+        key="dark-mode"
+        active={isDark}
+        title={
+          isDark ? 'Change theme to light mode' : 'Change theme to dark mode'
+        }
+        onClick={() => this.setDarkMode(!this.state.isDark)}
+      >
+        {isDark ? <Sun /> : <Moon />}
+      </IconButton>
+    );
+  }
+}

src/icons/Moon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const Moon = () => (
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    viewBox="0 0 438.277 438.277"
+    style={{
+      fill: 'currentColor',
+      marginTop: 3,
+      height: 13
+    }}
+  >
+    <path d="M428.756,300.104c-0.664-3.81-2.334-7.047-4.996-9.713c-5.9-5.903-12.752-7.142-20.554-3.716   c-20.937,9.708-42.641,14.558-65.097,14.558c-28.171,0-54.152-6.94-77.943-20.838c-23.791-13.894-42.631-32.736-56.525-56.53   c-13.899-23.793-20.844-49.773-20.844-77.945c0-21.888,4.333-42.683,12.991-62.384c8.66-19.7,21.176-36.973,37.543-51.82   c6.283-5.898,7.713-12.752,4.287-20.557c-3.236-7.801-9.041-11.511-17.415-11.132c-29.121,1.141-56.72,7.664-82.797,19.556   C111.33,31.478,88.917,47.13,70.168,66.548c-18.747,19.414-33.595,42.399-44.54,68.95c-10.942,26.553-16.416,54.39-16.416,83.511   c0,29.694,5.806,58.054,17.416,85.082c11.613,27.028,27.218,50.344,46.824,69.949c19.604,19.599,42.92,35.207,69.951,46.822   c27.028,11.607,55.384,17.415,85.075,17.415c42.64,0,81.987-11.563,118.054-34.69c36.069-23.124,63.05-54.006,80.944-92.645   C429,307.519,429.427,303.906,428.756,300.104z M306.565,384.168c-24.646,11.711-50.676,17.562-78.087,17.562   c-24.743,0-48.39-4.853-70.947-14.558c-22.554-9.705-41.971-22.695-58.246-38.972c-16.271-16.272-29.259-35.686-38.97-58.241   c-9.707-22.556-14.561-46.203-14.561-70.948c0-40.922,12.135-77.466,36.403-109.636c24.266-32.165,55.531-53.959,93.788-65.379   c-19.795,31.405-29.694,65.379-29.694,101.926c0,34.644,8.564,66.715,25.697,96.223c17.128,29.499,40.446,52.811,69.95,69.948   c29.499,17.129,61.565,25.694,96.211,25.694c10.656,0,21.129-0.855,31.408-2.57C352.199,356.155,331.21,372.472,306.565,384.168z" />
+  </svg>
+);
+
+export default Moon;

src/icons/Sun.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+const Sun = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 129 129"
+    enableBackground="new 0 0 129 129"
+    style={{
+      fill: 'currentColor',
+      marginTop: 3
+    }}
+  >
+    <g>
+      <path d="m64.5,92.6c15.5,0 28-12.6 28-28s-12.6-28-28-28-28,12.6-28,28 12.5,28 28,28zm0-47.9c11,0 19.9,8.9 19.9,19.9 0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-11 8.9-19.9 19.9-19.9z" />
+      <path d="m68.6,23.6v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1z" />
+      <path d="m60.4,105.6v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1z" />
+      <path d="m96.4,38.5l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8 0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z" />
+      <path d="m23.5,105.6c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8z" />
+      <path d="m122.5,64.6c0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h12.9c2.2,1.42109e-14 4.1-1.8 4.1-4.1z" />
+      <path d="m10.6,68.7h12.9c2.3,0 4.1-1.8 4.1-4.1 0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.9,4.1 4.1,4.1z" />
+      <path d="m102.6,106.8c1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.9,1.2 2.9,1.2z" />
+      <path d="m38.4,38.5c1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z" />
+    </g>
+  </svg>
+);
+
+export default Sun;

src/register.tsx

@@ -0,0 +1,13 @@
+import addons, { types } from '@storybook/addons';
+import * as React from 'react';
+
+import Tool from './Tool';
+
+addons.register('storybook/dark-mode', api => {
+  addons.add('storybook/dark-mode', {
+    title: 'dark mode',
+    type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story',
+    render: () => <Tool api={api} />
+  });
+});

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "lib": ["es2017"],
+    "jsx": "react",
+    "moduleResolution": "node",
+    // "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "dist",
+    "preserveConstEnums": true,
+    "removeComments": false,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "typeRoots": ["packages/types/", "node_modules/@types/"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "typings/**/*"]
+}

typings/storybook-components.d.ts

@@ -0,0 +1 @@
+declare module '@storybook/components';