@theholocron/storybook-config 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -0
- package/main.ts +28 -0
- package/package.json +51 -0
- package/preview.ts +30 -0
- package/test-runner.ts +16 -0
package/README.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Storybook Config
|
|
2
|
+
|
|
3
|
+
A [Storybook configuration](https://storybook.js.org/docs/configure) writing tested components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install --save-dev @theholocron/storybook-config
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
Check out the [react-template .storybook](https://github.com/theholocron/react-template/tree/main/.storybook) configuration files for an example.
|
package/main.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { type StorybookConfig } from "@storybook/react-vite";
|
|
2
|
+
|
|
3
|
+
export type { StorybookConfig };
|
|
4
|
+
|
|
5
|
+
export const storybookConfig: StorybookConfig = {
|
|
6
|
+
addons: [
|
|
7
|
+
"@storybook/addon-a11y",
|
|
8
|
+
"@storybook/addon-coverage",
|
|
9
|
+
"@storybook/addon-essentials",
|
|
10
|
+
"@storybook/addon-interactions",
|
|
11
|
+
"@storybook/addon-links",
|
|
12
|
+
"@chromatic-com/storybook",
|
|
13
|
+
"@whitespace/storybook-addon-html",
|
|
14
|
+
],
|
|
15
|
+
docs: {
|
|
16
|
+
defaultName: "Documentation",
|
|
17
|
+
},
|
|
18
|
+
framework: {
|
|
19
|
+
name: "@storybook/react-vite",
|
|
20
|
+
// https://storybook.js.org/docs/api/main-config/main-config-framework
|
|
21
|
+
options: {},
|
|
22
|
+
},
|
|
23
|
+
staticDirs: ["../../../public"],
|
|
24
|
+
stories: [
|
|
25
|
+
"../../../src/**/*.mdx",
|
|
26
|
+
"../../../src/**/*.story.@(js|jsx|mjs|ts|tsx)",
|
|
27
|
+
],
|
|
28
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@theholocron/storybook-config",
|
|
3
|
+
"version": "3.1.0",
|
|
4
|
+
"description": "A Storybook configuration for writing tested components within the Galaxy.",
|
|
5
|
+
"homepage": "https://github.com/theholocron/configs/tree/main/packages/storybook-config#readme",
|
|
6
|
+
"bugs": "https://github.com/theholocron/configs/issues",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/theholocron/configs.git"
|
|
10
|
+
},
|
|
11
|
+
"license": "GPL-3.0",
|
|
12
|
+
"author": "Newton Koumantzelis",
|
|
13
|
+
"type": "module",
|
|
14
|
+
"main": "index.js",
|
|
15
|
+
"files": [
|
|
16
|
+
"main.ts",
|
|
17
|
+
"preview.ts",
|
|
18
|
+
"test-runner.ts"
|
|
19
|
+
],
|
|
20
|
+
"dependencies": {
|
|
21
|
+
"@chromatic-com/storybook": "^1.9.0",
|
|
22
|
+
"@storybook/addon-a11y": "^8.3.5",
|
|
23
|
+
"@storybook/addon-coverage": "^1.0.4",
|
|
24
|
+
"@storybook/addon-essentials": "^8.3.5",
|
|
25
|
+
"@storybook/addon-interactions": "^8.3.5",
|
|
26
|
+
"@storybook/addon-links": "^8.3.5",
|
|
27
|
+
"@storybook/blocks": "^8.3.5",
|
|
28
|
+
"@storybook/react": "^8.3.5",
|
|
29
|
+
"@storybook/react-vite": "^8.3.5",
|
|
30
|
+
"@storybook/test": "^8.3.5",
|
|
31
|
+
"@storybook/test-runner": "^0.19.1",
|
|
32
|
+
"@whitespace/storybook-addon-html": "^6.1.1",
|
|
33
|
+
"axe-playwright": "^2.0.3",
|
|
34
|
+
"chromatic": "^11.12.5",
|
|
35
|
+
"msw-storybook-addon": "^2.0.3",
|
|
36
|
+
"playwright": "^1.48.1",
|
|
37
|
+
"storybook": "^8.3.5"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"@testing-library/jest-dom": "^6.6.2",
|
|
41
|
+
"@testing-library/react": "^16.0.1",
|
|
42
|
+
"jsdom": "^25.0.1",
|
|
43
|
+
"react": "^18.3.1",
|
|
44
|
+
"react-dom": "^18.3.1"
|
|
45
|
+
},
|
|
46
|
+
"publishConfig": {
|
|
47
|
+
"access": "public"
|
|
48
|
+
},
|
|
49
|
+
"releases": "https://github.com/theholocron/configs/releases",
|
|
50
|
+
"wiki": "https://github.com/theholocron/configs/wiki"
|
|
51
|
+
}
|
package/preview.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
|
|
2
|
+
import { type Preview } from "@storybook/react";
|
|
3
|
+
import { mswLoader } from "msw-storybook-addon";
|
|
4
|
+
export { initialize } from "msw-storybook-addon";
|
|
5
|
+
|
|
6
|
+
export type { Preview };
|
|
7
|
+
|
|
8
|
+
export const preview: Preview = {
|
|
9
|
+
layout: "centered",
|
|
10
|
+
loaders: [mswLoader],
|
|
11
|
+
parameters: {
|
|
12
|
+
controls: {
|
|
13
|
+
matchers: {
|
|
14
|
+
color: /(background|color)$/i,
|
|
15
|
+
date: /Date$/i,
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
html: {
|
|
19
|
+
prettier: {
|
|
20
|
+
tabWidth: 4,
|
|
21
|
+
useTabs: true,
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
viewport: {
|
|
25
|
+
viewports: INITIAL_VIEWPORTS,
|
|
26
|
+
// defaultViewport: 'ipad',
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
tags: ["autodocs"],
|
|
30
|
+
};
|
package/test-runner.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type Page } from "playwright";
|
|
2
|
+
import { injectAxe, checkA11y } from "axe-playwright";
|
|
3
|
+
|
|
4
|
+
export const storybookTestRunner = {
|
|
5
|
+
async preVisit(page: Page): Promise<void> {
|
|
6
|
+
await injectAxe(page);
|
|
7
|
+
},
|
|
8
|
+
async postVisit(page: Page): Promise<void> {
|
|
9
|
+
await checkA11y(page, "#storybook-root", {
|
|
10
|
+
detailedReport: true,
|
|
11
|
+
detailedReportOptions: {
|
|
12
|
+
html: true,
|
|
13
|
+
},
|
|
14
|
+
});
|
|
15
|
+
},
|
|
16
|
+
};
|