From a9c9e0ec1bb597597669495ec77a12a2daab6f70 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Wed, 20 Nov 2024 00:56:34 -0800
Subject: [PATCH] chore: fix storybook GH pages deployment (#10807)

**Related Issue:** N/A

## Summary

#10482 caused a break in our GitHub deployment. This fix addresses it
by:

* Adding a `.nojekyll` file to the pages folder to prevent files with
leading underscores in their names from being excluded (see
https://github.blog/news-insights/bypassing-jekyll-on-github-pages/).
* Moving the internal-testing notice to the preview head to leverage the
lazy-loaded components in the preview.
* We can revisit restoring this in the manager head after
https://github.com/storybookjs/builder-vite/issues/486 is resolved.
---
 .../calcite-components/.storybook/main.ts     | 90 +++++++++----------
 .../.storybook/static/.nojekyll               |  0
 2 files changed, 41 insertions(+), 49 deletions(-)
 create mode 100644 packages/calcite-components/.storybook/static/.nojekyll

diff --git a/packages/calcite-components/.storybook/main.ts b/packages/calcite-components/.storybook/main.ts
index 17f009320b4..45ebd5777ec 100644
--- a/packages/calcite-components/.storybook/main.ts
+++ b/packages/calcite-components/.storybook/main.ts
@@ -1,4 +1,5 @@
 import { UserConfig } from "vite";
+import { html } from "../support/formatting";
 
 module.exports = {
   addons: [
@@ -26,61 +27,52 @@ module.exports = {
     });
   },
   stories: ["../src/**/*.mdx", "../src/**/*.stories.ts"],
+  staticDirs: ["./static"],
   previewHead: (head: string): string =>
     `
     ${head}
     ${
       process.env.STORYBOOK_SCREENSHOT_TEST_BUILD
-        ? `<style>
-          :root {
-            --calcite-duration-factor: 0;
-          }
-        </style>`
+        ? html`<style>
+            :root {
+              --calcite-duration-factor: 0;
+            }
+          </style>`
         : ""
     }
-  `,
-  managerHead: (head: string): string => {
-    if (process.env.STORYBOOK_SCREENSHOT_TEST_BUILD || process.env.STORYBOOK_SCREENSHOT_LOCAL_BUILD) {
-      return head;
-    }
-
-    return `
-      <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
-      <link rel="stylesheet" href="./build/calcite.css" />
-      <script type="module" src="./build/calcite.esm.js"></script>
-
-      <template id="internalStorybookNotice">
-        <calcite-notice
-          open
-          icon="exclamation-mark-triangle"
-          closable
-          kind="warning"
-          scale="l"
-          style="font-family: var(--calcite-font-family)"
-        >
-          <div slot="title">
-            This storybook is on the current @next version and is meant for internal, testing purposes only.
-          </div>
-          <div slot="link">
-            Please refer to the&#32;<calcite-link
-              title="my action"
-              href="https://developers.arcgis.com/calcite-design-system/components/"
-            >
-              Calcite Components documentation site </calcite-link
-            >&#32;to browse and interact with components.
-          </div>
-        </calcite-notice>
-      </template>
-
-      <script>
-        window.addEventListener(
-          "load",
-          () => document.body.prepend(document.getElementById("internalStorybookNotice").content.cloneNode(true)),
-          { once: true }
-        );
-      </script>
+    ${
+      !process.env.STORYBOOK_SCREENSHOT_TEST_BUILD && !process.env.STORYBOOK_SCREENSHOT_LOCAL_BUILD
+        ? html`<template id="internalStorybookNotice">
+              <calcite-notice
+                open
+                icon="exclamation-mark-triangle"
+                closable
+                kind="warning"
+                scale="l"
+                style="font-family: var(--calcite-font-family); position: fixed; top: 0; width: 100%;"
+              >
+                <div slot="title">
+                  This storybook is on the current @next version and is meant for internal, testing purposes only.
+                </div>
+                <div slot="link">
+                  Please refer to the&#32;<calcite-link
+                    title="my action"
+                    href="https://developers.arcgis.com/calcite-design-system/components/"
+                  >
+                    Calcite Components documentation site </calcite-link
+                  >&#32;to browse and interact with components.
+                </div>
+              </calcite-notice>
+            </template>
 
-      ${head}
-    `;
-  },
+            <script>
+              window.addEventListener(
+                "load",
+                () => document.body.append(document.getElementById("internalStorybookNotice").content.cloneNode(true)),
+                { once: true },
+              );
+            </script> `
+        : ""
+    }
+  `,
 };
diff --git a/packages/calcite-components/.storybook/static/.nojekyll b/packages/calcite-components/.storybook/static/.nojekyll
new file mode 100644
index 00000000000..e69de29bb2d