Skip to content

Commit

Permalink
chore: fix storybook GH pages deployment (#10807)
Browse files Browse the repository at this point in the history
**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
storybookjs/builder-vite#486 is resolved.
  • Loading branch information
jcfranco authored Nov 20, 2024
1 parent 356d6f5 commit a9c9e0e
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 49 deletions.
90 changes: 41 additions & 49 deletions packages/calcite-components/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { UserConfig } from "vite";
import { html } from "../support/formatting";

module.exports = {
addons: [
Expand Down Expand Up @@ -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> `
: ""
}
`,
};
Empty file.

0 comments on commit a9c9e0e

Please sign in to comment.