[design]: overrides pattern, tests, yay!

packages/roleypoly-design/.storybook/addons.js

@@ -1,2 +0,0 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';

packages/roleypoly-design/.storybook/addons.ts

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-knobs/register'

packages/roleypoly-design/.storybook/config.js

@@ -1,8 +0,0 @@
-import { configure } from '@storybook/react'
-const req = require.context('../src', true, /\.stor\bies|y\b\.[tj]sx?$/)
-
-function loadStories() {
-  req.keys().forEach(req)
-}
-
-configure(loadStories, module)

packages/roleypoly-design/.storybook/config.ts

@@ -0,0 +1,51 @@
+const { configure } = require('@storybook/react')
+
+// polyfill for require.context
+try {
+  if (require.context === undefined) {
+    const fs = require('fs')
+    const path = require('path')
+  // @ts-ignore
+    require.context = (base: string = '.', scanSubDirectories: boolean = false, regularExpression: RegExp = /\.js$/) => {
+      const files = {}
+
+      function readDirectory (directory: string) {
+        fs.readdirSync(directory).forEach((file) => {
+          const fullPath = path.resolve(directory, file)
+
+          if (fs.statSync(fullPath).isDirectory()) {
+            if (scanSubDirectories) readDirectory(fullPath)
+
+            return
+          }
+
+          if (!regularExpression.test(fullPath)) return
+
+          files[fullPath] = true
+        })
+      }
+
+      readDirectory(path.resolve(__dirname, base))
+
+      function Module (file: string) {
+        return require(file)
+      }
+
+      Module.keys = () => Object.keys(files)
+
+      return Module
+    }
+  }
+} catch (e) {
+  if (e) {
+    console.log(e)
+  }
+}
+
+const req = require.context('../src', true, /\.stor\bies|y\b\.[tj]sx?$/)
+
+function loadStories () {
+  req.keys().forEach(req)
+}
+
+configure(loadStories, module)