Initiate BoostNote storybook (#702)

* Configure babelrc for storybook

* Introduce a storybook

* Refactor theme

* Create utils/theme

* Create Button storybook

* Apply prettier

Author: rohjs

.babelrc

@@ -1,8 +1,15 @@
 {
   "presets": [
-    ["@babel/preset-env", { "targets": "last 2 Chrome versions" }],
+    [
+      "@babel/preset-env",
+      { "targets": "last 2 Chrome versions", "loose": true }
+    ],
     "@babel/preset-typescript",
     "@babel/preset-react"
   ],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
+  "plugins": [
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
+  ]
 }

.storybook/main.js

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

.storybook/preview.js

@@ -0,0 +1,3 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}

package-lock.json

@@ -29,7 +29,9 @@
     "test": "jest -c jest.json",
     "test:watch": "jest -c jest.json --watch",
     "tsc": "tsc --watch --noEmit",
-    "ico": "png2icons static/logo.png static/icon -allwe"
+    "ico": "png2icons static/logo.png static/icon -allwe",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "keywords": [
     "markdown",
@@ -42,9 +44,15 @@
   "devDependencies": {
     "@babel/core": "^7.6.0",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-private-methods": "^7.12.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.12.1",
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.6.0",
+    "@storybook/addon-actions": "^6.1.10",
+    "@storybook/addon-essentials": "^6.1.10",
+    "@storybook/addon-links": "^6.1.10",
+    "@storybook/react": "^6.1.10",
     "@testing-library/react-hooks": "^2.0.1",
     "@types/codemirror": "0.0.98",
     "@types/dashify": "^1.0.0",
@@ -73,6 +81,7 @@
     "@types/webpack-env": "^1.14.0",
     "@typescript-eslint/eslint-plugin": "^2.3.0",
     "@typescript-eslint/parser": "^2.3.0",
+    "babel-loader": "^8.2.2",
     "chalk": "^4.0.0",
     "copy-webpack-plugin": "^6.2.1",
     "cross-env": "^6.0.0",

package.json

@@ -2,11 +2,7 @@ import React, { useMemo, useState, useEffect } from 'react'
 import Router from './Router'
 import GlobalStyle from './GlobalStyle'
 import { ThemeProvider } from 'styled-components'
-import { legacyTheme } from '../themes/legacy'
-import { darkTheme } from '../themes/dark'
-import { lightTheme } from '../themes/light'
-import { sepiaTheme } from '../themes/sepia'
-import { solarizedDarkTheme } from '../themes/solarizedDark'
+import { selectTheme } from '../themes'
 import Dialog from './organisms/Dialog'
 import { useDb } from '../lib/db'
 import PreferencesModal from './PreferencesModal/PreferencesModal'
@@ -374,20 +370,5 @@ const App = () => {
     </ThemeProvider>
   )
 }
-function selectTheme(theme: string) {
-  switch (theme) {
-    case 'legacy':
-      return legacyTheme
-    case 'light':
-      return lightTheme
-    case 'sepia':
-      return sepiaTheme
-    case 'solarizedDark':
-      return solarizedDarkTheme
-    case 'dark':
-    default:
-      return darkTheme
-  }
-}
 
 export default App

src/components/App.tsx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react/types-6-0'
+
+import { FormPrimaryButton } from '../components/atoms/form'
+import { createThemedTemplate } from './utils/themes'
+
+const { Template, themeArgType } = createThemedTemplate(FormPrimaryButton)
+
+export default {
+  title: 'Legacy/Atoms/FormPrimaryButton',
+  component: FormPrimaryButton,
+  argTypes: {
+    theme: themeArgType,
+  },
+} as Meta
+
+export const Primary = Template.bind({})
+Primary.args = {
+  children: 'Button',
+}

src/stories/Button.stories.tsx

@@ -0,0 +1,58 @@
+import React, { FC, PropsWithChildren, ComponentType } from 'react'
+import { Story } from '@storybook/react/types-6-0'
+import { ThemeProvider } from 'styled-components'
+
+import { ThemeTypes, selectTheme } from '../../themes'
+import styled from '../../lib/styled'
+
+interface ThemedWrapperProps {
+  theme?: ThemeTypes
+}
+
+export const ThemedWrapper: FC<ThemedWrapperProps> = ({
+  theme = 'dark',
+  children,
+}) => {
+  return (
+    <ThemeProvider theme={selectTheme(theme)}>
+      <StyledBackground>{children}</StyledBackground>
+    </ThemeProvider>
+  )
+}
+
+const StyledBackground = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px;
+  background-color: ${({ theme }) => theme.backgroundColor};
+  box-sizing: border-box;
+`
+
+export type ThemedStory<P> = Story<{ theme: ThemeTypes } & PropsWithChildren<P>>
+
+export function createThemedTemplate<P = {}>(
+  Component: ComponentType<P>
+): {
+  Template: ThemedStory<P>
+  themeArgType: {}
+} {
+  return {
+    Template: ({ theme, ...args }: any) => {
+      return (
+        <ThemedWrapper theme={theme}>
+          <Component {...args} />
+        </ThemedWrapper>
+      )
+    },
+    themeArgType: {
+      defaultValue: 'dark',
+      control: {
+        type: 'inline-radio',
+        options: ['light', 'dark', 'sepia', 'solarizedDark', 'legacy'],
+      },
+    },
+  }
+}

src/stories/Index.mdx

@@ -0,0 +1,25 @@
+import { lightTheme } from './light'
+import { darkTheme } from './dark'
+import { sepiaTheme } from './sepia'
+import { solarizedDarkTheme } from './solarizedDark'
+import { legacyTheme } from './legacy'
+
+export { lightTheme, darkTheme, sepiaTheme, solarizedDarkTheme, legacyTheme }
+
+export type ThemeTypes = 'light' | 'dark' | 'sepia' | 'solarizedDark' | 'legacy'
+
+export function selectTheme(theme: string) {
+  switch (theme) {
+    case 'legacy':
+      return legacyTheme
+    case 'light':
+      return lightTheme
+    case 'sepia':
+      return sepiaTheme
+    case 'solarizedDark':
+      return solarizedDarkTheme
+    case 'dark':
+    default:
+      return darkTheme
+  }
+}