feat(storybook): icons now work with vite config

web-components/packages/carbon-web-components/.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 import { mergeConfig } from 'vite';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
+import viteSVGResultCarbonIconLoader from '../tools/vite-svg-result-carbon-icon-loader';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -14,14 +15,24 @@ const config: StorybookConfig = {
   },
   async viteFinal(config) {
     // Merge custom configuration into the default config
-    return mergeConfig(config, {
-      // Add dependencies to pre-optimization
-      plugins: [litStyleLoader(), litTemplateLoader()],
+    const x = mergeConfig(config, {
+      // Add dependencies to pre-optimization)
+      // resolve: {
+      //   alias: [{ find: "@", replacement: resolve(__dirname, "node_modules") }]
+      // },
+      // resolve: {
+      //   alias: { 
+      //     '@carbon/web-components/es/icons': path.resolve(__dirname, '@carbon/icons/lib') },
+      // },
+      plugins: [litStyleLoader(), litTemplateLoader(), viteSVGResultCarbonIconLoader()],
       optimizeDeps: {
         include: ['@storybook/web-components'],
         exclude: ['lit', 'lit-html']
       },
     });
+
+    // console.log(x)
+    return x;
   },
   docs: {
     autodocs: 'tag',

web-components/packages/carbon-web-components/.storybook/preview-head.html

@@ -0,0 +1,18 @@
+<script type="text/javascript">
+  window.ShadyDOM = {
+    force: false, // Set true to test ShadyDOM in Chrome
+  };
+
+  document.documentElement.setAttribute('lang', 'en');
+</script>
+<style type="text/css">
+  .cds-ce-doc--demo-iframe {
+    width: 100%;
+    height: 120px;
+    border: 1px solid var(--cds-ui-03, #e0e0e0);
+  }
+</style>
+
+<link
+  rel="stylesheet"
+  href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />

web-components/packages/carbon-web-components/tools/vite-svg-result-carbon-icon-loader.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const path = require('path');
+const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon');
+
+/**
+ * A Vite plugin to generate `lit-html`'s `SVGResult` from an icon descriptor from `@carbon/icons`.
+ *
+ * @returns {string} The massaged module content.
+ */
+export default function svgResultCarbonIconLoader() {
+  const svgRegex = /@carbon[\\/]icons[\\/]/i
+
+  const paths = new Map<string, string>()
+
+  return {
+      name: 'svg-loader',
+      enforce: 'pre',
+
+      resolveId(id: string): string | null {
+      if (id.match(svgRegex)) {
+          paths.set(id, id)
+          return id
+      } else {
+          return null
+      }
+      },
+
+      async load(id: string): Promise<string | undefined> {
+      let outcome: string | undefined
+      if (!id.match(svgRegex)) {
+          return outcome
+      }
+      return ``
+      },
+
+      async transform(src: string, id: string) {
+
+      if (!paths.has(id)) {
+          return null
+      }
+
+      let outcome: string | undefined = src
+      if (!id.match(svgRegex)) {
+          return outcome
+      }
+
+      const descriptor = require(id);
+      return `
+          import { svg } from 'lit';
+          import spread from '${path.resolve(
+          __dirname,
+          '../src/globals/directives/spread'
+          )}';
+          const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon(descriptor)};
+          export default svgResultCarbonIcon;
+      `
+      },
+  }
+}