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,26 @@
+import Icons from 'unplugin-icons/webpack'
+import iconsConfig from '../config/icons'
+import postCSSConfig from '../config/postcss'
+
 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 +57,32 @@ export default {
       $rdf: 'rdflib'
     }
 
+    // Configure icons
+    config.plugins.push(Icons(iconsConfig))
+
+    // 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',
+      options: postCSSConfig
+    })
+
     return config
   }
 }

.storybook/preview.js

@@ -1,3 +1,5 @@
+import '../src/design-system/styles/variables.css'
+
 // 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'

config/icons.js

@@ -0,0 +1,27 @@
+const compiler = {
+  compiler (svg, collection, icon) {
+    const id = `icon-${collection}-${icon}`
+    const className = id.replace(/-/g, '')
+
+    return `
+        export default class ${className} extends HTMLElement {
+            constructor() {
+                super()
+                this.attachShadow({ mode: 'open' }).innerHTML = ${JSON.stringify('<style>:host { display: inline-flex; }</style>' + svg)}
+            }
+        }
+
+        customElements.define('${id}', ${className})
+    `
+  },
+}
+
+/** @type {import('unplugin-icons').Options} */
+export default {
+  scale: 1,
+  compiler,
+  iconCustomizer (_, __, props) {
+    props.width = '100%'
+    props.height = '100%'
+  }
+}

config/postcss.js

@@ -0,0 +1,12 @@
+import PostCSS from 'postcss'
+import TailwindCSS from '@tailwindcss/postcss'
+
+const cssProcessor = PostCSS([TailwindCSS()])
+
+export default {
+  async transform (css, { filePath }) {
+    const result = await cssProcessor.process(css, { from: filePath })
+
+    return result.css
+  }
+}