setup storybook & components

coderoad · ShMcK · Jun 8, 2019 · May 27, 2019 · Jun 2, 2019 · Jun 2, 2019
commit 97cf2a17780bc5f0784c6fc344459e571e5a7ff0
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,6 @@ node_modules
 
 # output directory
 build
-web-app/build
+web-app/build/
 web-app/node_modules
 
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
@@ -1,16 +1,16 @@
 export interface TutorialLevel {
     stageList: string[]
-    content?: {
-        title?: string
-        text?: string
+    content: {
+        title: string
+        text: string
     }
 }
 
 export interface TutorialStage {
     stepList: string[]
-    content?: {
-        title?: string
-        text?: string
+    content: {
+        title: string
+        text: string
     }
 }
 

diff --git a/web-app/.storybook/.babelrc b/web-app/.storybook/.babelrc
@@ -0,0 +1,12 @@
+{
+  // ...
+  "plugins": [
+    [
+      "babel-plugin-import",
+      {
+        "libraryName": "@alifd/next",
+        "style": true
+      }
+    ]
+  ]
+}
diff --git a/web-app/.storybook/addons.ts b/web-app/.storybook/addons.ts
@@ -0,0 +1,4 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-notes/register'
diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts
@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+// automatically import all files ending in *.stories.tsx
+const req = require.context('../stories', true, /\.stories\.tsx$/);
+
+function loadStories() {
+  req.keys().forEach(req);
+}
+
+configure(loadStories, module);
diff --git a/web-app/.storybook/webpack.config.js b/web-app/.storybook/webpack.config.js
@@ -0,0 +1,20 @@
+const path = require('path')
+
+// see typescript setup
+// https://storybook.js.org/docs/configurations/typescript-config/
+module.exports = ({ config }) => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+    })
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['react-app', { flow: false, typescript: true }]],
+    },
+  })
+  config.resolve.extensions.push('.ts', '.tsx')
+  return config
+}