Skip to content

Commit

Permalink
Merge pull request #405 from AmazeeLabs/storybook-8.5
Browse files Browse the repository at this point in the history
chore: upgrade storybook to 8.5
  • Loading branch information
pmelab authored Jan 29, 2025
2 parents 63d79e8 + 616f6f2 commit 17280c2
Show file tree
Hide file tree
Showing 8 changed files with 2,564 additions and 1,600 deletions.
9 changes: 2 additions & 7 deletions packages/ui/.storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,7 @@ const config: StorybookConfig = {
alias: {
'@amazeelabs/bridge': '@amazeelabs/bridge-storybook',
'@stories': resolve(
dirname(
new URL(
// @ts-expect-error It works.
import.meta.url,
).pathname,
),
dirname(new URL(import.meta.url).pathname),
'../static/stories',
),
},
Expand All @@ -35,10 +30,10 @@ const config: StorybookConfig = {
addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@storybook/addon-interactions'),
getAbsolutePath('@storybook/addon-coverage'),
getAbsolutePath('@storybook/addon-a11y'),
getAbsolutePath('@storybook/addon-mdx-gfm'),
getAbsolutePath('@storybook/experimental-addon-test'),
],
framework: {
name: getAbsolutePath('@storybook/react-vite'),
Expand Down
60 changes: 2 additions & 58 deletions packages/ui/.storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ declare global {
}
}

const SWRCacheDecorator: Decorator = (Story) => {
const SWRCacheDecorator: Decorator = (Story, context) => {
const { cache } = useSWRConfig();
for (const key of cache.keys()) {
cache.delete(key);
Expand All @@ -52,10 +52,7 @@ const SWRCacheDecorator: Decorator = (Story) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
return useSWR(
// Make sure SWR caches are unique per story.
[
...(key instanceof Array ? key : [key]),
window.__STORYBOOK_PREVIEW__.currentRender.id,
],
[...(key instanceof Array ? key : [key]), context.id],
fetcher,
config,
);
Expand All @@ -70,59 +67,6 @@ const SWRCacheDecorator: Decorator = (Story) => {

export const parameters = {
chromatic: { viewports: [320, 840, 1440] },
a11y: {
// Optional selector to inspect
element: '#storybook-root',
config: {
rules: [
{
// The autocomplete rule will not run based on the CSS selector provided
id: 'autocomplete-valid',
selector: '*:not([autocomplete="nope"])',
},
{
// Setting the enabled option to false will disable checks for this particular rule on all stories.
id: 'image-alt',
enabled: false,
},
{
// Setting the enabled option to false will disable checks for this particular rule on all stories.
id: 'color-contrast',
reviewOnFail: true,
},
{
id: 'link-name',
reviewOnFail: true,
},
{
id: 'duplicate-id',
reviewOnFail: true,
},
{
id: 'landmark-no-duplicate-main',
reviewOnFail: true,
},
{
id: 'landmark-main-is-top-level',
reviewOnFail: true,
},
{
id: 'landmark-unique',
reviewOnFail: true,
},
{
id: 'button-name',
reviewOnFail: true,
},
{
id: 'list',
reviewOnFail: true,
},
],
},
// Axe's options parameter
options: {},
},
};

export const decorators = [
Expand Down
31 changes: 0 additions & 31 deletions packages/ui/.storybook/test-runner.ts

This file was deleted.

10 changes: 10 additions & 0 deletions packages/ui/.storybook/vitest.setup.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { setProjectAnnotations } from '@storybook/react';
import { beforeAll } from 'vitest';

import * as projectAnnotations from './preview';

// This is an important step to apply the right configuration when testing your stories.
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
const project = setProjectAnnotations([projectAnnotations]);

beforeAll(project.beforeAll);
40 changes: 21 additions & 19 deletions packages/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
}
},
"scripts": {
"playwright-install": "",
"prep:types": "tsc --emitDeclarationOnly",
"prep:scripts": "swc ./src -d ./build",
"prep:fonts": "mkdir -p build && node preloaded-fonts.js",
Expand All @@ -33,9 +34,8 @@
"dev": "storybook dev -p 6006 --no-open",
"start": "serve storybook-static -p 6006 > /dev/null 2>&1",
"test:static": "tsc --noEmit && eslint . --quiet",
"test:unit": "vitest run --passWithNoTests",
"test:storybook": "test-storybook --coverage",
"test:integration": "start-test start http://localhost:6006 test:storybook && pnpm report",
"test:unit": "vitest run --project=unit --passWithNoTests",
"test:integration": "playwright install chromium && vitest run --project=storybook --passWithNoTests",
"report": "mkdir -p coverage/storybook && nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook"
},
"dependencies": {
Expand Down Expand Up @@ -64,22 +64,22 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
"@amazeelabs/bridge-storybook": "^1.2.21",
"@amazeelabs/bridge-storybook": "^1.2.25",
"@amazeelabs/cloudinary-responsive-image": "^1.6.15",
"@custom/eslint-config": "workspace:*",
"@formatjs/cli": "^6.2.4",
"@storybook/addon-a11y": "^8.3.3",
"@storybook/addon-actions": "^8.3.3",
"@storybook/addon-coverage": "^1.0.4",
"@storybook/addon-essentials": "^8.3.3",
"@storybook/addon-interactions": "^8.3.3",
"@storybook/addon-links": "^8.3.3",
"@storybook/addon-mdx-gfm": "^8.3.3",
"@storybook/blocks": "^8.3.3",
"@storybook/react": "^8.3.3",
"@storybook/react-vite": "^8.3.3",
"@storybook/test": "^8.3.3",
"@storybook/test-runner": "^0.19.1",
"@storybook/addon-a11y": "^8.5.2",
"@storybook/addon-actions": "^8.5.2",
"@storybook/addon-coverage": "^1.0.5",
"@storybook/addon-essentials": "^8.5.2",
"@storybook/addon-links": "^8.5.2",
"@storybook/addon-mdx-gfm": "^8.5.2",
"@storybook/blocks": "^8.5.2",
"@storybook/experimental-addon-test": "^8.5.2",
"@storybook/react": "^8.5.2",
"@storybook/react-vite": "^8.5.2",
"@storybook/test": "^8.5.2",
"@storybook/test-runner": "^0.21.0",
"@swc/cli": "^0.1.63",
"@swc/core": "^1.3.102",
"@tailwindcss/aspect-ratio": "^0.4.2",
Expand All @@ -92,11 +92,13 @@
"@types/react-body-classname": "^1.1.10",
"@types/react-dom": "^18.2.18",
"@vitejs/plugin-react-swc": "^3.5.0",
"@vitest/browser": "3.0.4",
"@vitest/coverage-v8": "3.0.4",
"autoprefixer": "^10.4.16",
"axe-playwright": "^2.0.1",
"cssnano": "^6.0.3",
"happy-dom": "^12.10.3",
"nyc": "^15.1.0",
"playwright": "^1.50.0",
"postcss": "^8.4.32",
"postcss-cli": "^11.0.0",
"postcss-import": "^16.0.0",
Expand All @@ -106,11 +108,11 @@
"react-dom": "^18.2.0",
"serve": "^14.2.1",
"start-server-and-test": "^2.0.3",
"storybook": "^8.3.3",
"storybook": "^8.5.2",
"tailwindcss": "^3.4.0",
"typescript": "^5.3.3",
"vite": "^5.0.10",
"vite-imagetools": "^6.2.9",
"vitest": "^1.1.1"
"vitest": "^3.0.4"
}
}
44 changes: 44 additions & 0 deletions packages/ui/vitest.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import path from 'node:path';
import { fileURLToPath } from 'node:url';

import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { defineConfig } from 'vitest/config';

const dirname =
typeof __dirname !== 'undefined'
? __dirname
: path.dirname(fileURLToPath(import.meta.url));

// More info at: https://storybook.js.org/docs/writing-tests/test-addon
export default defineConfig({
test: {
workspace: [
{
test: {
name: 'unit',
},
},
{
plugins: [
// The plugin will run tests for the stories defined in your Storybook config
// See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
storybookTest({ configDir: path.join(dirname, '.storybook') }),
],
test: {
name: 'storybook',
browser: {
enabled: true,
headless: true,
provider: 'playwright',
instances: [
{
browser: 'chromium',
},
],
},
setupFiles: ['.storybook/vitest.setup.ts'],
},
},
],
},
});
1 change: 1 addition & 0 deletions packages/ui/vitest.shims.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="@vitest/browser/providers/playwright" />
Loading

0 comments on commit 17280c2

Please sign in to comment.