feat(storybook): setup storybook for form-elements

Author: Pascal Iske

.storybook/addons.js

@@ -0,0 +1,5 @@
+import '@storybook/addon-notes/register'
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-options/register'

.storybook/config.js

@@ -0,0 +1,19 @@
+import { configure, addDecorator } from '@storybook/angular'
+import { themes } from '@storybook/components'
+import { withNotes } from '@storybook/addon-notes'
+import { withOptions } from '@storybook/addon-options'
+import { name, repository } from '../package.json'
+
+const load = require.context('../projects', true, /.stories.ts$/)
+
+addDecorator(withNotes)
+addDecorator(
+    withOptions({
+        name: name,
+        url: repository.url.replace(/.git$/, ''),
+        theme: themes.dark,
+        hierarchySeparator: /\//,
+    }),
+)
+
+configure(() => load.keys().forEach(file => load(file)), module)

.storybook/preview-head.html

@@ -0,0 +1,15 @@
+/**
+ * Tweak the built in webpack config for storybook.
+ *
+ * @param {object} config - The built in webpack config
+ * @returns {object} - The tweaked webpack config
+ */
+module.exports = config => {
+    // enable scss loading
+    config.module.rules.unshift({
+        test: /\.scss$/,
+        use: ['style-loader'],
+    })
+
+    return config
+}

.storybook/webpack.config.js

@@ -26,6 +26,8 @@
     "lint": "ng lint form-elements --fix",
     "format": "prettier --write \"{src,projects}/**/*.ts\"",
     "changelog": "standard-changelog --release-count 1",
+    "storybook": "start-storybook --port 9001 --config-dir .storybook",
+    "docs": "build-storybook --config-dir .storybook --output-dir docs",
     "link": "yarn run build && cd dist/form-elements && yarn link",
     "unlink": "cd dist/form-elements && yarn unlink"
   },
@@ -57,9 +59,20 @@
     "@angular/cli": "^7.3.2",
     "@angular/compiler-cli": "^7.2.5",
     "@angular/language-service": "^7.2.5",
+    "@babel/core": "^7.3.3",
     "@commitlint/cli": "^7.5.2",
     "@commitlint/config-conventional": "^7.5.0",
+    "@storybook/addon-a11y": "^4.1.12",
+    "@storybook/addon-actions": "^4.1.12",
+    "@storybook/addon-backgrounds": "^4.1.12",
+    "@storybook/addon-knobs": "^4.1.12",
+    "@storybook/addon-links": "^4.1.12",
+    "@storybook/addon-notes": "^4.1.12",
+    "@storybook/addon-options": "^4.1.12",
+    "@storybook/angular": "^4.1.12",
+    "@storybook/components": "^4.1.12",
     "@types/node": "~11.9.4",
+    "babel-loader": "^8.0.5",
     "codelyzer": "~4.5.0",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.4",
@@ -68,6 +81,7 @@
     "protractor": "~5.4.2",
     "scss-bundle": "^2.5.0",
     "standard-changelog": "^2.0.7",
+    "style-loader": "^0.23.1",
     "ts-node": "~8.0.2",
     "tsickle": "^0.34.3",
     "tslib": "^1.9.3",

package.json

@@ -12,11 +12,20 @@
     "noUnusedParameters": true,
     "target": "es5",
     "typeRoots": [
-      "node_modules/@types"
+      "node_modules/@types",
+      "typings.d.ts"
     ],
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "paths": {
+      "@pascaliske/form-elements": [
+        "dist/form-elements"
+      ],
+      "@pascaliske/form-elements/*": [
+        "dist/form-elements/*"
+      ]
+    }
   }
 }

tsconfig.json

@@ -0,0 +1,9 @@
+declare module '*.md' {
+    const value: string
+    export default value
+}
+
+declare module '*.scss' {
+    const value: string
+    export default value
+}