CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Run lint and prettier
CI Pipeline / test (18) (pull_request) Successful in 2m47s
Details
CI Pipeline / e2e (chromium) (pull_request) Failing after 54s
Details
CI Pipeline / e2e (firefox) (pull_request) Failing after 32s
Details
CI Pipeline / e2e (webkit) (pull_request) Failing after 23s
Details
CI Pipeline / visual-regression (pull_request) Failing after 57s
Details
CI Pipeline / test (20) (pull_request) Successful in 6m10s
Details
CI Pipeline / seed-vr-snapshots (pull_request) Has been skipped
Details
CI Pipeline / performance (pull_request) Failing after 1m55s
Details
CI Pipeline / storybook (pull_request) Successful in 2m17s
Details
CI Pipeline / lint (pull_request) Successful in 1m59s
Details
CI Pipeline / build (pull_request) Successful in 2m7s
Details

Browse Source
This commit is contained in:
adilallo
2025-09-03 11:03:29 -06:00
parent 5a7295ff5d
commit 1e16c8b6ff
4 changed files with 719 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/iframe.html
+134 -70
View File
@@ -1,56 +1,87 @@
<!doctype html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head><script type="module" src="/vite-inject-mocker-entry.js"></script>
<head>
<script type="module" src="/vite-inject-mocker-entry.js"></script>
<meta charset="utf-8" />
<title>Storybook</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
@font-face {
font-family: 'Nunito Sans';
font-family: "Nunito Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
src: url("./sb-common-assets/nunito-sans-regular.woff2") format("woff2");
}
@font-face {
font-family: 'Nunito Sans';
font-family: "Nunito Sans";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
src: url("./sb-common-assets/nunito-sans-italic.woff2") format("woff2");
}
@font-face {
font-family: 'Nunito Sans';
font-family: "Nunito Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
src: url("./sb-common-assets/nunito-sans-bold.woff2") format("woff2");
}
@font-face {
font-family: 'Nunito Sans';
font-family: "Nunito Sans";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
src: url("./sb-common-assets/nunito-sans-bold-italic.woff2")
format("woff2");
}
</style>
<script>
window.CONFIG_TYPE = 'PRODUCTION';
window.LOGLEVEL = 'info';
window.CONFIG_TYPE = "PRODUCTION";
window.LOGLEVEL = "info";
window.FRAMEWORK_OPTIONS = {};
window.CHANNEL_OPTIONS = {};
window.FEATURES = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true,"viewport":true,"highlight":true,"controls":true,"interactions":true,"actions":true,"backgrounds":true,"outline":true,"measure":true};
window.STORIES = [{"titlePrefix":"","directory":"./stories","files":"**/*.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.mdx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|mjs|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|mjs|ts|tsx))$"}];
window.DOCS_OPTIONS = {"defaultName":"Docs"};
window.TAGS_OPTIONS = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};
window.FEATURES = {
argTypeTargetsV7: true,
legacyDecoratorFileOrder: false,
disallowImplicitActionsInRenderV8: true,
viewport: true,
highlight: true,
controls: true,
interactions: true,
actions: true,
backgrounds: true,
outline: true,
measure: true,
};
window.STORIES = [
{
titlePrefix: "",
directory: "./stories",
files: "**/*.mdx",
importPathMatcher:
"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.mdx)$",
},
{
titlePrefix: "",
directory: "./stories",
files: "**/*.stories.@(js|jsx|mjs|ts|tsx)",
importPathMatcher:
"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|mjs|ts|tsx))$",
},
];
window.DOCS_OPTIONS = { defaultName: "Docs" };
window.TAGS_OPTIONS = {
"dev-only": { excludeFromDocsStories: true },
"docs-only": { excludeFromSidebar: true },
"test-only": { excludeFromSidebar: true, excludeFromDocsStories: true },
};
// We do this so that "module && module.hot" etc. in Storybook source code
// doesn't fail (it will simply be disabled)
@@ -59,7 +90,7 @@
</script>
<base target="_parent" />
<style>
<style>
/* While we aren't showing the main block yet, but still preparing, we want everything the user has rendered, which may or may not be in #storybook-root, to be display none */
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
display: none;
@@ -95,7 +126,7 @@
/* Vertical centering fix for IE11 */
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.sb-show-main.sb-main-centered:after {
content: '';
content: "";
min-height: inherit;
font-size: 0;
}
@@ -124,13 +155,13 @@
padding: 40px;
font-family:
'Nunito Sans',
"Nunito Sans",
-apple-system,
'.SFNSText-Regular',
'San Francisco',
".SFNSText-Regular",
"San Francisco",
BlinkMacSystemFont,
'Segoe UI',
'Helvetica Neue',
"Segoe UI",
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
@@ -198,7 +229,7 @@
margin: 0;
&::before {
content: '';
content: "";
display: inline-block;
width: 12px;
height: 12px;
@@ -257,8 +288,8 @@
border-radius: 4px;
font-family:
'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
'Lucida Console', Consolas, Monaco, monospace;
"Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina",
"Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
margin: 0;
overflow: auto;
}
@@ -513,33 +544,47 @@
.sb-hidden-until-focus:focus {
opacity: 1;
}
</style>
</style>
<script>
<script>
/* globals window */
try {
if (window.top !== window) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ =
window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ =
window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
}
} catch (e) {
// eslint-disable-next-line no-console
console.warn('unable to connect to top frame for connecting dev tools');
console.warn("unable to connect to top frame for connecting dev tools");
}
</script>
</script>
<script type="module" crossorigin src="/CommunityRuleStorybook/assets/iframe-D_aMTKb2.js"></script>
<link rel="modulepreload" crossorigin href="/CommunityRuleStorybook/assets/preload-helper-DIZFD4sK.js">
<link rel="stylesheet" crossorigin href="/CommunityRuleStorybook/assets/iframe-7VPDhVZ9.css">
<script
type="module"
crossorigin
src="/CommunityRuleStorybook/assets/iframe-D_aMTKb2.js"
></script>
<link
rel="modulepreload"
crossorigin
href="/CommunityRuleStorybook/assets/preload-helper-DIZFD4sK.js"
/>
<link
rel="stylesheet"
crossorigin
href="/CommunityRuleStorybook/assets/iframe-7VPDhVZ9.css"
/>
</head>
<body>
<div class="sb-preparing-story sb-wrapper">
<div class="sb-loader"></div>
</div>
</div>
<div class="sb-preparing-docs sb-wrapper">
<div class="sb-preparing-docs sb-wrapper">
<div class="sb-previewBlock">
<div class="sb-previewBlock_header">
<div class="sb-previewBlock_icon"></div>
@@ -570,7 +615,9 @@
</div>
</td>
<td>
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
<div>
<span class="sb-argstableBlock-code">defaultValue</span>
</div>
</td>
<td><button>Set string</button></td>
</tr>
@@ -583,7 +630,9 @@
</div>
</td>
<td>
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
<div>
<span class="sb-argstableBlock-code">defaultValue</span>
</div>
</td>
<td><button>Set string</button></td>
</tr>
@@ -596,71 +645,84 @@
</div>
</td>
<td>
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
<div>
<span class="sb-argstableBlock-code">defaultValue</span>
</div>
</td>
<td><button>Set string</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sb-nopreview sb-wrapper">
<div class="sb-nopreview sb-wrapper">
<div class="sb-nopreview_main">
<h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
<p>Sorry, but you either have no stories or none are selected somehow.</p>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>Please check the Storybook config.</li>
<li>Try reloading the page.</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
If the problem persists, check the browser console, or the terminal
you've run Storybook from.
</p>
</div>
</div>
</div>
<div class="sb-errordisplay sb-wrapper">
<div class="sb-errordisplay sb-wrapper">
<div class="sb-errordisplay_main">
<h1 id="error-message"></h1>
<p>
The component failed to render properly, likely due to a configuration issue in Storybook.
Here are some common causes and how you can address them:
The component failed to render properly, likely due to a configuration
issue in Storybook. Here are some common causes and how you can
address them:
</p>
<ol>
<li>
<strong>Missing Context/Providers</strong>: You can use decorators to supply specific
contexts or providers, which are sometimes necessary for components to render correctly. For
detailed instructions on using decorators, please visit the
<strong>Missing Context/Providers</strong>: You can use decorators
to supply specific contexts or providers, which are sometimes
necessary for components to render correctly. For detailed
instructions on using decorators, please visit the
<a href="https://storybook.js.org/docs/writing-stories/decorators"
>Decorators documentation</a
>.
</li>
<li>
<strong>Misconfigured Webpack or Vite</strong>: Verify that Storybook picks up all necessary
settings for loaders, plugins, and other relevant parameters. You can find step-by-step
guides for configuring
<a href="https://storybook.js.org/docs/builders/webpack">Webpack</a> or
<strong>Misconfigured Webpack or Vite</strong>: Verify that
Storybook picks up all necessary settings for loaders, plugins, and
other relevant parameters. You can find step-by-step guides for
configuring
<a href="https://storybook.js.org/docs/builders/webpack">Webpack</a>
or
<a href="https://storybook.js.org/docs/builders/vite">Vite</a>
with Storybook.
</li>
<li>
<strong>Missing Environment Variables</strong>: Your Storybook may require specific
environment variables to function as intended. You can set up custom environment variables
as outlined in the
<a href="https://storybook.js.org/docs/configure/environment-variables"
<strong>Missing Environment Variables</strong>: Your Storybook may
require specific environment variables to function as intended. You
can set up custom environment variables as outlined in the
<a
href="https://storybook.js.org/docs/configure/environment-variables"
>Environment Variables documentation</a
>.
</li>
</ol>
<pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
</div>
</div>
</div>
<div id="storybook-root"></div>
<div id="storybook-docs"></div>
<script>
function __onViteAppLoadingError(event) {
const hostname = globalThis.location.hostname;
if (hostname !== 'localhost' && globalThis.CONFIG_TYPE === 'DEVELOPMENT') {
if (
hostname !== "localhost" &&
globalThis.CONFIG_TYPE === "DEVELOPMENT"
) {
const message = `Failed to load the Storybook preview file 'vite-app.js':
It looks like you're visiting the Storybook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this.
@@ -668,17 +730,19 @@ Please re-run your Storybook development server with the '--host ${hostname}' fl
See:`;
const docs = [
'https://storybook.js.org/docs/api/cli-options#dev',
'https://storybook.js.org/docs/api/main-config/main-config-vite-final',
'https://vite.dev/config/server-options.html#server-allowedhosts',
"https://storybook.js.org/docs/api/cli-options#dev",
"https://storybook.js.org/docs/api/main-config/main-config-vite-final",
"https://vite.dev/config/server-options.html#server-allowedhosts",
];
console.error(`${message}\n${docs.map((doc) => `- ${doc}`).join('\n')}`);
console.error(
`${message}\n${docs.map((doc) => `- ${doc}`).join("\n")}`,
);
document.getElementById('storybook-root').innerHTML =
document.getElementById("storybook-root").innerHTML =
`<p style="color: red; max-width: 70ch">${message.replaceAll(
'\n',
'<br/>'
)}<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join('')}<ul></p>`;
"\n",
"<br/>",
)}<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join("")}<ul></p>`;
return;
}
}
docs/index.html
+59 -82
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -6,159 +6,136 @@
<title>storybook - Storybook</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
<style>
@font-face {
font-family: 'Nunito Sans';
font-family: "Nunito Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
src: url("./sb-common-assets/nunito-sans-regular.woff2") format("woff2");
}
@font-face {
font-family: 'Nunito Sans';
font-family: "Nunito Sans";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
src: url("./sb-common-assets/nunito-sans-italic.woff2") format("woff2");
}
@font-face {
font-family: 'Nunito Sans';
font-family: "Nunito Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
src: url("./sb-common-assets/nunito-sans-bold.woff2") format("woff2");
}
@font-face {
font-family: 'Nunito Sans';
font-family: "Nunito Sans";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
src: url("./sb-common-assets/nunito-sans-bold-italic.woff2")
format("woff2");
}
</style>
<link href="./sb-manager/runtime.js" rel="modulepreload" />
<link
href="./sb-addons/storybook-core-server-presets-0/common-manager-bundle.js"
rel="modulepreload"
/>
<link href="./sb-addons/storybook-core-server-presets-0/common-manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/chromatic-com-storybook-1/manager-bundle.js" rel="modulepreload" />
<link
href="./sb-addons/chromatic-com-storybook-1/manager-bundle.js"
rel="modulepreload"
/>
<link href="./sb-addons/docs-2/manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/onboarding-3/manager-bundle.js" rel="modulepreload" />
<link
href="./sb-addons/onboarding-3/manager-bundle.js"
rel="modulepreload"
/>
<link href="./sb-addons/a11y-4/manager-bundle.js" rel="modulepreload" />
<link href="./sb-addons/vitest-5/manager-bundle.js" rel="modulepreload" />
<style>
#storybook-root[hidden] {
display: none !important;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
window["FEATURES"] = {
argTypeTargetsV7: true,
legacyDecoratorFileOrder: false,
disallowImplicitActionsInRenderV8: true,
viewport: true,
highlight: true,
controls: true,
interactions: true,
actions: true,
backgrounds: true,
outline: true,
measure: true,
};
window["REFS"] = {};
window['FEATURES'] = {
"argTypeTargetsV7": true,
"legacyDecoratorFileOrder": false,
"disallowImplicitActionsInRenderV8": true,
"viewport": true,
"highlight": true,
"controls": true,
"interactions": true,
"actions": true,
"backgrounds": true,
"outline": true,
"measure": true
};
window["LOGLEVEL"] = "info";
window["DOCS_OPTIONS"] = {
defaultName: "Docs",
};
window["CONFIG_TYPE"] = "PRODUCTION";
window['REFS'] = {};
window['LOGLEVEL'] = "info";
window['DOCS_OPTIONS'] = {
"defaultName": "Docs"
};
window['CONFIG_TYPE'] = "PRODUCTION";
window['TAGS_OPTIONS'] = {
window["TAGS_OPTIONS"] = {
"dev-only": {
"excludeFromDocsStories": true
excludeFromDocsStories: true,
},
"docs-only": {
"excludeFromSidebar": true
excludeFromSidebar: true,
},
"test-only": {
"excludeFromSidebar": true,
"excludeFromDocsStories": true
}
};
excludeFromSidebar: true,
excludeFromDocsStories: true,
},
};
window["STORYBOOK_RENDERER"] = "react";
window["STORYBOOK_BUILDER"] = "@storybook/builder-vite";
window['STORYBOOK_RENDERER'] = "react";
window['STORYBOOK_BUILDER'] = "@storybook/builder-vite";
window['STORYBOOK_FRAMEWORK'] = "@storybook/nextjs-vite";
window["STORYBOOK_FRAMEWORK"] = "@storybook/nextjs-vite";
</script>
<script type="module">
import './sb-manager/globals-runtime.js';
import "./sb-manager/globals-runtime.js";
import "./sb-addons/storybook-core-server-presets-0/common-manager-bundle.js";
import './sb-addons/storybook-core-server-presets-0/common-manager-bundle.js';
import "./sb-addons/chromatic-com-storybook-1/manager-bundle.js";
import './sb-addons/chromatic-com-storybook-1/manager-bundle.js';
import "./sb-addons/docs-2/manager-bundle.js";
import './sb-addons/docs-2/manager-bundle.js';
import "./sb-addons/onboarding-3/manager-bundle.js";
import './sb-addons/onboarding-3/manager-bundle.js';
import "./sb-addons/a11y-4/manager-bundle.js";
import './sb-addons/a11y-4/manager-bundle.js';
import "./sb-addons/vitest-5/manager-bundle.js";
import './sb-addons/vitest-5/manager-bundle.js';
import './sb-manager/runtime.js';
import "./sb-manager/runtime.js";
</script>
</body>
</html>
eslint.config.mjs
+6 -2
View File
@@ -12,9 +12,13 @@ const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [...compat.extends("next/core-web-vitals"), {
const eslintConfig = [
...compat.extends("next/core-web-vitals"),
{
files: ["**/*.js", "**/*.jsx", "**/*.mjs"],
ignores: ["**/*.ts", "**/*.tsx"],
}, ...storybook.configs["flat/recommended"]];
},
...storybook.configs["flat/recommended"],
];
export default eslintConfig;
tests/e2e/visual-regression.spec.ts
+1 -1
View File
@@ -413,7 +413,7 @@ test.describe("Visual Regression Tests", () => {
await page.evaluate(() => {
document.documentElement.style.setProperty(
"--prefers-reduced-motion",
"reduce"
"reduce",
);
});