Skip to content

Commit 4bdaccc

Browse files
fiqrikm18fiqrikm18
authored
Merge pull request #3 from IDTS-LAB/feat/storybook
feat: add Storybook 10 with stories + a11y test runner
2 parents 879d93d + 1c6acd5 commit 4bdaccc

22 files changed

Lines changed: 24202 additions & 7641 deletions

File tree

‎.github/workflows/ci.yml‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ name: CI
22

33
on:
44
push:
5-
branches: [main]
5+
branches: [master]
66
pull_request:
7-
branches: [main]
7+
branches: [master]
88

99
jobs:
1010
lint:
@@ -41,6 +41,22 @@ jobs:
4141
- run: npx playwright install chromium
4242
- run: npm run e2e
4343

44+
storybook:
45+
runs-on: ubuntu-latest
46+
steps:
47+
- uses: actions/checkout@v4
48+
- uses: actions/setup-node@v4
49+
with:
50+
node-version: 24
51+
cache: 'npm'
52+
- run: npm ci
53+
- run: npx playwright install chromium
54+
- run: npm run build-storybook
55+
- run: |
56+
npx http-server dist/storybook/saas-business-app --port 6006 --silent &
57+
npx wait-on http://localhost:6006
58+
npx test-storybook --url http://localhost:6006
59+
4460
build:
4561
runs-on: ubuntu-latest
4662
steps:

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
/tmp
66
/out-tsc
77
/bazel-out
8+
/storybook-static
89

910
# Node
1011
/node_modules
@@ -38,6 +39,7 @@ yarn-error.log
3839
testem.log
3940
/typings
4041
__screenshots__/
42+
debug-storybook.log
4143

4244
# System files
4345
.DS_Store

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
legacy-peer-deps=true

‎.storybook/main.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { StorybookConfig } from '@storybook/angular-vite';
2+
3+
const config: StorybookConfig = {
4+
framework: {
5+
name: '@storybook/angular-vite',
6+
options: {},
7+
},
8+
stories: ['../src/**/*.stories.ts'],
9+
addons: ['@storybook/addon-a11y'],
10+
docs: { autodocs: 'tag' },
11+
};
12+
13+
export default config;

‎.storybook/preview.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import '../src/tailwind.css';
2+
import '../src/styles.scss';
3+
4+
const preview = {
5+
parameters: {
6+
backgrounds: {
7+
options: {
8+
app: { name: 'app', value: 'var(--color-bg, #f8fafc)' },
9+
surface: { name: 'surface', value: 'var(--color-surface, #ffffff)' },
10+
dark: { name: 'dark', value: '#0f172a' },
11+
},
12+
},
13+
controls: { expanded: true },
14+
},
15+
16+
initialGlobals: {
17+
backgrounds: {
18+
value: 'app',
19+
},
20+
},
21+
};
22+
23+
export default preview;

‎.storybook/test-runner.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import type { TestRunnerConfig } from '@storybook/test-runner';
2+
3+
const config: TestRunnerConfig = {
4+
stories: ['../src/**/*.stories.ts'],
5+
framework: 'playwright',
6+
tags: {
7+
exclude: ['skip'],
8+
},
9+
tests: {
10+
a11y: {
11+
parameters: {
12+
a11y: {
13+
config: {
14+
rules: [
15+
{ id: 'color-contrast', enabled: true },
16+
{ id: 'aria-valid-attr', enabled: true },
17+
{ id: 'aria-roles', enabled: true },
18+
{ id: 'button-name', enabled: true },
19+
{ id: 'image-alt', enabled: true },
20+
{ id: 'label', enabled: true },
21+
],
22+
},
23+
},
24+
},
25+
},
26+
},
27+
};
28+
29+
export default config;

‎angular.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,28 @@
7070
},
7171
"test": {
7272
"builder": "@angular/build:unit-test"
73+
},
74+
"storybook": {
75+
"builder": "@storybook/angular-vite:start-storybook",
76+
"options": {
77+
"configDir": ".storybook",
78+
"port": 6006,
79+
"tsConfig": "tsconfig.json",
80+
"zoneless": true,
81+
"compodoc": false,
82+
"styles": ["src/tailwind.css", "src/styles.scss"]
83+
}
84+
},
85+
"build-storybook": {
86+
"builder": "@storybook/angular-vite:build-storybook",
87+
"options": {
88+
"configDir": ".storybook",
89+
"outputDir": "dist/storybook/saas-business-app",
90+
"tsConfig": "tsconfig.json",
91+
"zoneless": true,
92+
"compodoc": false,
93+
"styles": ["src/tailwind.css", "src/styles.scss"]
94+
}
7395
}
7496
}
7597
}

‎eslint.config.js‎

Lines changed: 45 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,53 @@
1+
// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
2+
import storybook from "eslint-plugin-storybook";
3+
14
import tseslint from 'typescript-eslint';
25
import prettierConfig from 'eslint-config-prettier';
36

4-
export default tseslint.config(
5-
{
6-
ignores: ['dist/**', 'node_modules/**', '.angular/**', '**/*.spec.ts'],
7-
},
8-
{
9-
files: ['eslint.config.js'],
10-
languageOptions: {
11-
parserOptions: {
12-
projectService: null,
13-
},
14-
},
15-
rules: {
16-
'no-unused-vars': 'off',
17-
'no-undef': 'off',
18-
'@typescript-eslint/no-unsafe-assignment': 'off',
19-
'@typescript-eslint/prefer-nullish-coalescing': 'off',
20-
'@typescript-eslint/prefer-optional-chain': 'off',
21-
'@typescript-eslint/consistent-type-definitions': 'off',
22-
'@typescript-eslint/no-unused-vars': 'off',
23-
'@typescript-eslint/no-explicit-any': 'off',
7+
export default tseslint.config({
8+
ignores: ['dist/**', 'node_modules/**', '.angular/**', 'storybook-static/**', '**/*.spec.ts'],
9+
}, {
10+
files: ['eslint.config.js'],
11+
languageOptions: {
12+
parserOptions: {
13+
projectService: null,
2414
},
2515
},
26-
...tseslint.configs.recommended,
27-
{
28-
files: ['src/**/*.ts'],
29-
languageOptions: {
30-
parserOptions: {
31-
projectService: true,
32-
tsconfigRootDir: import.meta.dirname,
33-
},
34-
},
35-
rules: {
36-
...prettierConfig.rules,
37-
'@typescript-eslint/no-explicit-any': 'error',
38-
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
39-
'@typescript-eslint/prefer-nullish-coalescing': 'error',
40-
'@typescript-eslint/prefer-optional-chain': 'error',
41-
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
42-
'@typescript-eslint/no-non-null-assertion': 'warn',
43-
'no-console': ['warn', { allow: ['warn', 'error'] }],
44-
'prefer-const': 'error',
45-
'no-var': 'error',
46-
eqeqeq: ['error', 'always'],
47-
},
16+
rules: {
17+
'no-unused-vars': 'off',
18+
'no-undef': 'off',
19+
'@typescript-eslint/no-unsafe-assignment': 'off',
20+
'@typescript-eslint/prefer-nullish-coalescing': 'off',
21+
'@typescript-eslint/prefer-optional-chain': 'off',
22+
'@typescript-eslint/consistent-type-definitions': 'off',
23+
'@typescript-eslint/no-unused-vars': 'off',
24+
'@typescript-eslint/no-explicit-any': 'off',
4825
},
49-
{
50-
files: ['src/**/*.spec.ts', 'src/**/*.test.ts'],
51-
rules: {
52-
'@typescript-eslint/no-non-null-assertion': 'off',
53-
'@typescript-eslint/no-unsafe-assignment': 'off',
26+
}, ...tseslint.configs.recommended, {
27+
files: ['src/**/*.ts'],
28+
languageOptions: {
29+
parserOptions: {
30+
projectService: true,
31+
tsconfigRootDir: import.meta.dirname,
5432
},
5533
},
56-
);
34+
rules: {
35+
...prettierConfig.rules,
36+
'@typescript-eslint/no-explicit-any': 'error',
37+
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
38+
'@typescript-eslint/prefer-nullish-coalescing': 'error',
39+
'@typescript-eslint/prefer-optional-chain': 'error',
40+
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
41+
'@typescript-eslint/no-non-null-assertion': 'warn',
42+
'no-console': ['warn', { allow: ['warn', 'error'] }],
43+
'prefer-const': 'error',
44+
'no-var': 'error',
45+
eqeqeq: ['error', 'always'],
46+
},
47+
}, {
48+
files: ['src/**/*.spec.ts', 'src/**/*.test.ts'],
49+
rules: {
50+
'@typescript-eslint/no-non-null-assertion': 'off',
51+
'@typescript-eslint/no-unsafe-assignment': 'off',
52+
},
53+
}, storybook.configs["flat/recommended"]);

0 commit comments

Comments
 (0)