From 271f74a1ba59287f87b817107e4649495645c473 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Fri, 15 Dec 2023 14:36:57 -0800
Subject: [PATCH] feat(storybook): icons now work with vite config

---
 .../carbon-web-components/.storybook/main.ts  | 17 ++++-
 .../.storybook/preview-head.html              | 18 +++++
 .../vite-svg-result-carbon-icon-loader.ts     | 67 +++++++++++++++++++
 3 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 web-components/packages/carbon-web-components/.storybook/preview-head.html
 create mode 100644 web-components/packages/carbon-web-components/tools/vite-svg-result-carbon-icon-loader.ts

diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts
index 7f2e6aac6cab..a8405fe8ebfd 100644
--- a/web-components/packages/carbon-web-components/.storybook/main.ts
+++ b/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',
diff --git a/web-components/packages/carbon-web-components/.storybook/preview-head.html b/web-components/packages/carbon-web-components/.storybook/preview-head.html
new file mode 100644
index 000000000000..51390b883807
--- /dev/null
+++ b/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" />
diff --git a/web-components/packages/carbon-web-components/tools/vite-svg-result-carbon-icon-loader.ts b/web-components/packages/carbon-web-components/tools/vite-svg-result-carbon-icon-loader.ts
new file mode 100644
index 000000000000..b4d7a07df0df
--- /dev/null
+++ b/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;
+      `
+      },
+  }
+}
\ No newline at end of file