Implement design system button

Author: NoelDeMartin

.gitignore

@@ -1,6 +1,5 @@
 node_modules
 dist
-lib
 src/versionInfo.ts
 .idea
 .vscode

.storybook/main.js

@@ -1,6 +1,24 @@
+import Icons from 'unplugin-icons/webpack'
+
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
+  swc: (config) => ({
+    ...config,
+    jsc: {
+      ...config.jsc,
+      parser: {
+        ...config.jsc?.parser,
+        decorators: true,
+      },
+      transform: {
+        ...config.jsc?.transform,
+        legacyDecorator: true,
+        useDefineForClassFields: false,
+      },
+    },
+  }),
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -37,6 +55,38 @@ export default {
       $rdf: 'rdflib'
     }
 
+    // Configure icons
+    config.plugins.push(
+      Icons({
+        scale: 1,
+        compiler: 'web-components',
+        compilerOptions: { defaultStyle: 'vertical-align: middle;', },
+        webComponents: { autoDefine: true },
+      })
+    )
+
+    // Configure component styles
+    const litCssPattern = /\.styles\.css$/
+
+    config.module.rules = config.module.rules.map(rule => {
+      if (rule?.test?.test?.('component.css')) {
+        return {
+          ...rule,
+          exclude: [
+            ...(Array.isArray(rule.exclude) ? rule.exclude : rule.exclude ? [rule.exclude] : []),
+            litCssPattern
+          ]
+        }
+      }
+
+      return rule
+    })
+
+    config.module.rules.push({
+      test: litCssPattern,
+      loader: 'lit-css-loader'
+    })
+
     return config
   }
 }

.storybook/preview.js

@@ -1,3 +1,6 @@
+import '../src/design-system/styles/main.css'
+import '../src/design-system/lib/icons'
+
 // For backward compatibility, provide rdflib and solid-logic as globals
 import * as rdflib from 'rdflib'
 import * as solidLogic from 'solid-logic'

babel.config.mjs

@@ -5,7 +5,12 @@ export default {
         browsers: ['> 1%', 'last 3 versions', 'not dead']
       }
     }],
-    ['@babel/preset-typescript', { allowDeclareFields: true }],
+    [
+      '@babel/preset-typescript', {
+        allowDeclareFields: true,
+        useDefineForClassFields: false,
+      }
+    ],
   ],
   plugins: [
     '@babel/plugin-transform-runtime'