From ad7bb0cf8344c11f8500add53102bcba7012d57f Mon Sep 17 00:00:00 2001
From: Jacob Gillespie <jacobwgillespie@gmail.com>
Date: Thu, 22 Dec 2022 02:21:37 +0000
Subject: [PATCH] Fix storybook

---
 .storybook/main.js          | 18 ++++++++++++++++++
 tools/builder/build-pack.js |  9 +++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 467dee95..aaaef443 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -3,4 +3,22 @@ module.exports = {
   core: {
     builder: 'webpack5',
   },
+
+  webpackFinal: async (config) => {
+    config.module.rules = config.module.rules.map((rule) => {
+      if (rule.type === 'asset/resource') {
+        // Removing the rule for SVGs
+        rule.test = /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
+      }
+      return rule
+    })
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: 'raw-loader',
+    })
+
+    console.log(config.module.rules)
+    return config
+  },
 }
diff --git a/tools/builder/build-pack.js b/tools/builder/build-pack.js
index fe92e0b6..e1a1e583 100755
--- a/tools/builder/build-pack.js
+++ b/tools/builder/build-pack.js
@@ -53,14 +53,15 @@ const generate = async () => {
   await fs.writeFile(
     'icons.stories.js',
     `
-import {storiesOf} from '@storybook/html'
+export default {
+  title: '${path.basename(baseDir)}',
+}
 
-storiesOf('${path.basename(baseDir)}')
-  .add('icons', () => [
+export const icons = () => [
 ${icons
   .map((icon) => `    ['${icon.originalName}', require('!!raw-loader!./${icon.originalName}.svg').default],`)
   .join('\n')}
-  ].map(icon => \`<div>\${icon[0]}</div><div class="icon">\${icon[1]}</div>\`).join('\\n'))
+  ].map(icon => \`<div>\${icon[0]}</div><div class="icon">\${icon[1]}</div>\`).join('\\n')
 
 `.trim(),
   )