#769 Update account components in header

.gitignore

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

.storybook/main.js

@@ -1,3 +1,14 @@
+import path from 'path'
+import Icons from 'unplugin-icons/webpack'
+import { fileURLToPath } from 'url'
+
+import iconsConfig from '../config/icons.mjs'
+import postCSSConfig from '../config/postcss.mjs'
+import { litDecoratorsLoaderOptions, resolvePathsUsingDecorators } from '../config/babel.mjs'
+import { excludePathsFromRules } from '../config/webpack.mjs'
+
+const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
@@ -37,6 +48,46 @@ export default {
       $rdf: 'rdflib'
     }
 
+    // Configure Lit decorators
+    const pathsUsingDecorators = resolvePathsUsingDecorators(projectRoot)
+
+    config.module.rules.unshift({
+      test: /\.(mjs|js|ts|tsx)$/,
+      include: pathsUsingDecorators,
+      use: {
+        loader: 'babel-loader',
+        options: litDecoratorsLoaderOptions,
+      }
+    })
+
+    excludePathsFromRules(config.module?.rules, pathsUsingDecorators)
+
+    // 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,6 @@
+import '../src/design-system/styles/variables.css'
+import '../src/primitives/styles/variables.css'
+
 // For backward compatibility, provide rdflib and solid-logic as globals
 import * as rdflib from 'rdflib'
 import * as solidLogic from 'solid-logic'

__mocks__/iconsMock.js

@@ -0,0 +1,2 @@
+// Jest mock for icon imports
+module.exports = {}

babel.config.mjs

@@ -1,3 +1,10 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { resolvePathsUsingDecorators, litDecoratorsBabelOptions } from './config/babel.mjs'
+
+const projectRoot = path.dirname(fileURLToPath(import.meta.url))
+const pathsUsingDecorators = resolvePathsUsingDecorators(projectRoot)
+
 export default {
   presets: [
     ['@babel/preset-env', {
@@ -9,5 +16,11 @@ export default {
   ],
   plugins: [
     '@babel/plugin-transform-runtime'
+  ],
+  overrides: [
+    {
+      include: pathsUsingDecorators,
+      ...litDecoratorsBabelOptions,
+    }
   ]
 }

config/babel.mjs

@@ -0,0 +1,30 @@
+import path from 'path'
+
+/**
+ * This file contains config options for babel using Lit decorators.
+ *
+ * @see https://lit.dev/docs/components/decorators/#using-decorators-with-babel
+ */
+
+const pathsUsingDecorators = ['src/design-system', 'src/primitives', 'src/storybook']
+
+export const litDecoratorsBabelOptions = {
+  assumptions: {
+    setPublicClassFields: false
+  },
+  plugins: [
+    '@babel/plugin-transform-class-static-block',
+    ['@babel/plugin-transform-typescript', { allowDeclareFields: true }],
+    ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
+    ['@babel/plugin-transform-class-properties', { loose: true }]
+  ]
+}
+
+export const litDecoratorsLoaderOptions = {
+  cacheDirectory: true,
+  ...litDecoratorsBabelOptions,
+}
+
+export function resolvePathsUsingDecorators (projectRoot) {
+  return pathsUsingDecorators.map((_path) => path.resolve(projectRoot, _path))
+}

config/icons.mjs

@@ -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.mjs

@@ -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
+  }
+}

config/webpack.mjs

@@ -0,0 +1,32 @@
+function asArray (value) {
+  if (!value) {
+    return []
+  }
+
+  return Array.isArray(value) ? value : [value]
+}
+
+function ruleUsesSwcLoader (rule) {
+  const uses = rule.use ? asArray(rule.use) : []
+
+  return uses.some((use) => String(use?.loader ?? use).includes('swc-loader'))
+}
+
+export function excludePathsFromRules (rule, paths) {
+  if (!rule) {
+    return
+  }
+
+  if (Array.isArray(rule)) {
+    rule.forEach((entry) => excludePathsFromRules(entry, paths))
+    return
+  }
+
+  if (ruleUsesSwcLoader(rule)) {
+    rule.exclude = [...asArray(rule.exclude), ...paths]
+  }
+
+  if (rule.oneOf) {
+    excludePathsFromRules(rule.oneOf, paths)
+  }
+}

jest.config.mjs

@@ -15,6 +15,7 @@ export default {
   ],
   setupFilesAfterEnv: ['./test/helpers/setup.ts'],
   moduleNameMapper: {
+    '^~icons/(.*)$': '<rootDir>/__mocks__/iconsMock.js',
     '^.+\\.css$': '<rootDir>/__mocks__/styleMock.js'
   },
   testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],