storybook styles (#22)

web/.storybook/base.scss

@@ -0,0 +1,9 @@
+// base styles
+
+@import '../scss/vars.scss';
+@import '../static/font/font.css';
+
+body {
+  font-family: $font-family;
+  margin: $body-margin-w;
+}

web/.storybook/config.js

@@ -1,9 +1,7 @@
 import { configure } from '@storybook/react'
 
-const req = require.context('../components', true, /.stories.tsx$/)
-
-const loadStories = () => {
-  req.keys().forEach(req)
-}
+import '!style-loader!css-loader!sass-loader!./base.scss';
 
+const req = require.context('../components', true, /.stories.tsx$/)
+const loadStories = () => { req.keys().forEach(req) }
 configure(loadStories, module)

web/.storybook/webpack.config.js

@@ -6,14 +6,23 @@ module.exports = ({ config }) => {
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     include: [srcPath],
-      use: [
-        {
-          loader: require.resolve('awesome-typescript-loader'),
-          options: {
-            configFileName: './.storybook/tsconfig.json',
-          }
-        },
-      ]
+    use: [
+      {
+        loader: require.resolve('awesome-typescript-loader'),
+        options: {
+          configFileName: './.storybook/tsconfig.json',
+        }
+      },
+    ]
+  });
+  config.module.rules.push({
+    test: /\.scss$/,
+    use: [
+      // creates style nodes from JS strings
+      { loader: "style-loader" },
+      { loader: "css-loader", options: { sourceMap: true }}, // translates CSS into CommonJS
+      { loader: "sass-loader", options: { sourceMap: true }} // compiles Sass to CSS
+    ]
   });
   config.resolve.extensions.push('.ts', '.tsx');
   return config;

web/Makefile

@@ -25,4 +25,5 @@ fmt:
 
 .PHONY: sb
 sb:
-	npm run storybook
+	npx start-storybook -p 9001 -c .storybook \
+		-s static # https://storybook.js.org/docs/configurations/serving-static-files/

web/package.json

@@ -3,8 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 9001 -c .storybook"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "dependencies": {

web/static/font/font.css

@@ -30,38 +30,38 @@
 @font-face {
   font-family: cooper-hewitt;
   font-weight: 400;
-  src: url("/static/font/cooper-hewitt/CooperHewitt-Book.otf") format("opentype");
+  src: url("cooper-hewitt/CooperHewitt-Book.otf") format("opentype");
 }
 
 @font-face {
   font-family: cooper-hewitt;
   font-weight: 500;
-  src: url("/static/font/cooper-hewitt/CooperHewitt-Medium.otf") format("opentype");
+  src: url("cooper-hewitt/CooperHewitt-Medium.otf") format("opentype");
 }
 
 @font-face {
   font-family: cooper-hewitt;
   font-weight: 600;
-  src: url("/static/font/cooper-hewitt/CooperHewitt-Semibold.otf") format("opentype");
+  src: url("cooper-hewitt/CooperHewitt-Semibold.otf") format("opentype");
 }
 
 @font-face {
   font-family: cooper-hewitt;
   font-weight: 700;
-  src: url("/static/font/cooper-hewitt/CooperHewitt-Bold.otf") format("opentype");
+  src: url("cooper-hewitt/CooperHewitt-Bold.otf") format("opentype");
 }
 
 
 @font-face {
   font-family: 'proxima-nova';
   font-weight: normal;
   font-style: normal;
-  src: url("/static/font/proxima-nova/2F00B2_0_0.woff2") format("woff2"), url("/static/font/proxima-nova/2F00B2_0_0.woff") format("woff"), url("/static/font/proxima-nova/2F00B2_0_0.ttf") format("truetype");
+  src: url("proxima-nova/2F00B2_0_0.woff2") format("woff2"), url("proxima-nova/2F00B2_0_0.woff") format("woff"), url("proxima-nova/2F00B2_0_0.ttf") format("truetype");
 }
 
 @font-face {
   font-family: 'proxima-nova';
   font-weight: bold;
   font-style: normal;
-  src: url("/static/font/proxima-nova/2F00B2_1_0.woff2") format("woff2"), url("/static/font/proxima-nova/2F00B2_1_0.woff") format("woff"), url("/static/font/proxima-nova/2F00B2_1_0.ttf") format("truetype");
+  src: url("proxima-nova/2F00B2_1_0.woff2") format("woff2"), url("proxima-nova/2F00B2_1_0.woff") format("woff"), url("proxima-nova/2F00B2_1_0.ttf") format("truetype");
 }