Skip to content

Commit d51bbb7

Browse files
OrlannCOrlannC
committed
[6241] Add storybook for diagram layout testing - Mandatory files for storybook
Bug: #6241 Signed-off-by: Orlann Cailleau <orlann.cailleau@obeosoft.com>
1 parent 4373e0b commit d51bbb7

File tree

9 files changed

+342
-0
lines changed

9 files changed

+342
-0
lines changed

‎CHANGELOG.adoc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ This will be used as an inspiration for the evolution of other similar services
4646
=== New Features
4747

4848
- https://github.com/eclipse-sirius/sirius-web/issues/3647[#3647] [diagram] Add support for diagram style with background customization
49+
- https://github.com/eclipse-sirius/sirius-web/issues/6241[#6241] [storybook] Add storybook for diagram layout testing
50+
4951

5052

5153
=== Improvements

‎packages/storybook/.storybook/main.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/*******************************************************************************
2+
* Copyright (c) 2026 Obeo.
3+
* This program and the accompanying materials
4+
* are made available under the terms of the Eclipse Public License v2.0
5+
* which accompanies this distribution, and is available at
6+
* https://www.eclipse.org/legal/epl-2.0/
7+
*
8+
* SPDX-License-Identifier: EPL-2.0
9+
*
10+
* Contributors:
11+
* Obeo - initial API and implementation
12+
*******************************************************************************/
13+
import { dirname, resolve } from "path";
14+
import { fileURLToPath } from "url";
15+
import { mergeConfig } from "vite";
16+
17+
const __dirname = dirname(fileURLToPath(import.meta.url));
18+
19+
const config = {
20+
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
21+
addons: [
22+
"@chromatic-com/storybook",
23+
"@storybook/addon-vitest",
24+
"@storybook/addon-a11y",
25+
"@storybook/addon-docs",
26+
],
27+
framework: {
28+
name: "@storybook/react-vite",
29+
options: {},
30+
},
31+
typescript: {
32+
reactDocgen: "react-docgen-native",
33+
},
34+
async viteFinal(config) {
35+
return mergeConfig(config, {
36+
resolve: {
37+
alias: {
38+
react: resolve(__dirname, "../../../node_modules/react"),
39+
"react-dom": resolve(__dirname, "../../../node_modules/react-dom"),
40+
"@emotion/react": resolve(
41+
__dirname,
42+
"../../../node_modules/@emotion/react",
43+
),
44+
"@emotion/styled": resolve(
45+
__dirname,
46+
"../../../node_modules/@emotion/styled",
47+
),
48+
"@mui/material": resolve(
49+
__dirname,
50+
"../../../node_modules/@mui/material",
51+
),
52+
},
53+
},
54+
server: {
55+
fs: {
56+
// On autorise Vite à lire toute l'arborescence du projet
57+
allow: [resolve(__dirname, "../../../")],
58+
},
59+
},
60+
});
61+
},
62+
};
63+
64+
export default config;

‎packages/storybook/package.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "storybook",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint .",
10+
"preview": "vite preview",
11+
"storybook": "storybook dev -p 6006",
12+
"build-storybook": "storybook build"
13+
},
14+
"dependencies": {
15+
"@eclipse-sirius/sirius-components-core": "2026.3.0",
16+
"@eclipse-sirius/sirius-components-diagrams": "2026.3.0",
17+
"elkjs": "0.11.0",
18+
"react": "18.3.1",
19+
"react-dom": "18.3.1",
20+
"reactflow": "11.11.4"
21+
},
22+
"devDependencies": {
23+
"@chromatic-com/storybook": "5.0.0",
24+
"@eslint/js": "9.39.1",
25+
"@storybook/addon-a11y": "10.2.4",
26+
"@storybook/addon-docs": "10.2.4",
27+
"@storybook/addon-vitest": "10.2.4",
28+
"@storybook/react-vite": "10.2.4",
29+
"@types/node": "24.10.1",
30+
"@types/react": "18.3.28",
31+
"@types/react-dom": "18.3.1",
32+
"@vitejs/plugin-react": "5.1.1",
33+
"@vitest/browser-playwright": "4.0.18",
34+
"@vitest/coverage-v8": "4.0.18",
35+
"eslint": "9.39.1",
36+
"eslint-plugin-react-hooks": "7.0.1",
37+
"eslint-plugin-react-refresh": "0.4.24",
38+
"eslint-plugin-storybook": "10.2.4",
39+
"globals": "16.5.0",
40+
"playwright": "1.58.1",
41+
"prop-types": "15.8.1",
42+
"storybook": "10.2.4",
43+
"typescript": "5.9.3",
44+
"typescript-eslint": "8.46.4",
45+
"vite": "7.2.4",
46+
"vitest": "4.0.18"
47+
}
48+
}

‎packages/storybook/src/stories/navigationbar/NavigationBar.stories.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*******************************************************************************
2+
* Copyright (c) 2026 Obeo.
3+
* This program and the accompanying materials
4+
* are made available under the terms of the Eclipse Public License v2.0
5+
* which accompanies this distribution, and is available at
6+
* https://www.eclipse.org/legal/epl-2.0/
7+
*
8+
* SPDX-License-Identifier: EPL-2.0
9+
*
10+
* Contributors:
11+
* Obeo - initial API and implementation
12+
*******************************************************************************/
13+
import type { Meta, StoryObj } from "@storybook/react";
14+
import { DisplayLibraryNavbarWrapper, NavigationBarWrapper } from "../../utils/navigationbar/NavigationBarWrapper";
15+
16+
const meta = {
17+
title: "Bar/Navigation Bar",
18+
component: NavigationBarWrapper,
19+
tags: ["autodocs"],
20+
argTypes: {
21+
children: { name: "Children", control: "text" },
22+
},
23+
} satisfies Meta;
24+
25+
export default meta;
26+
type Story = StoryObj<typeof meta>;
27+
28+
export const NavigationBar: Story = {
29+
name: "Default Navigation Bar",
30+
args: {
31+
children: "Navigation Bar",
32+
},
33+
render: (args) => <NavigationBarWrapper {...args} />,
34+
};
35+
36+
export const DisplayLibraryNavbar: Story = {
37+
name: "Display Library Navigation Bar",
38+
argTypes: {
39+
children: {
40+
table: { disable: true }
41+
}
42+
},
43+
render: () => <DisplayLibraryNavbarWrapper />
44+
};

‎packages/storybook/src/utils/navigationbar/NavigationBarWrapper.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/*******************************************************************************
2+
* Copyright (c) 2026 Obeo.
3+
* This program and the accompanying materials
4+
* are made available under the terms of the Eclipse Public License v2.0
5+
* which accompanies this distribution, and is available at
6+
* https://www.eclipse.org/legal/epl-2.0/
7+
*
8+
* SPDX-License-Identifier: EPL-2.0
9+
*
10+
* Contributors:
11+
* Obeo - initial API and implementation
12+
*******************************************************************************/
13+
import { ThemeProvider } from "@mui/material/styles";
14+
import Typography from "@mui/material/Typography";
15+
import i18n from "i18next";
16+
import { ReactNode } from "react";
17+
import { I18nextProvider, initReactI18next } from "react-i18next";
18+
import { MemoryRouter } from "react-router-dom";
19+
import { makeStyles } from "tss-react/mui";
20+
import { NavigationBar } from "../../../../sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar";
21+
import { siriusWebTheme } from "../../../../sirius-web/frontend/sirius-web-application/src/theme/siriusWebTheme";
22+
import { DisplayLibraryNavbar } from "../../../../sirius-web/frontend/sirius-web-application/src/views/display-library/DisplayLibraryNavbar";
23+
24+
if (!i18n.isInitialized) {
25+
i18n.use(initReactI18next).init({});
26+
}
27+
const useNavbarStyles = makeStyles()((theme) => ({
28+
titleLabel: {
29+
marginRight: theme.spacing(2),
30+
overflow: "hidden",
31+
textOverflow: "ellipsis",
32+
whiteSpace: "nowrap",
33+
maxWidth: "100ch",
34+
},
35+
}));
36+
37+
export const NavigationBarWrapper = ({
38+
children,
39+
}: {
40+
children?: ReactNode;
41+
}) => {
42+
const { classes } = useNavbarStyles();
43+
return (
44+
<MemoryRouter>
45+
<I18nextProvider i18n={i18n}>
46+
<ThemeProvider theme={siriusWebTheme}>
47+
<NavigationBar>
48+
<Typography
49+
variant="h6"
50+
noWrap
51+
className={classes.titleLabel}
52+
data-testid={`navbar-title`}
53+
>
54+
{children}
55+
</Typography>
56+
</NavigationBar>
57+
</ThemeProvider>
58+
</I18nextProvider>
59+
</MemoryRouter>
60+
);
61+
};
62+
63+
export const DisplayLibraryNavbarWrapper = ({}: {}) => {
64+
return (
65+
<MemoryRouter>
66+
<I18nextProvider i18n={i18n}>
67+
<ThemeProvider theme={siriusWebTheme}>
68+
<DisplayLibraryNavbar />
69+
</ThemeProvider>
70+
</I18nextProvider>
71+
</MemoryRouter>
72+
);
73+
};

‎packages/storybook/tsconfig.app.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"$schema": "https://json.schemastore.org/tsconfig",
3+
"compilerOptions": {
4+
"target": "ES2022",
5+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
6+
"module": "ESNext",
7+
"moduleResolution": "Bundler",
8+
"jsx": "react-jsx",
9+
"strict": true,
10+
"skipLibCheck": true,
11+
"baseUrl": ".",
12+
"paths": {
13+
"@eclipse-sirius/sirius-components-core": [
14+
"../sirius-components-core/src/index.ts"
15+
],
16+
"@eclipse-sirius/sirius-components-diagrams": [
17+
"../sirius-components-diagrams/src/index.ts"
18+
]
19+
}
20+
},
21+
"include": ["src", "../sirius-web/frontend/sirius-web-application/src"]
22+
}

‎packages/storybook/tsconfig.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"files": [],
3+
"references": [
4+
{ "path": "./tsconfig.app.json" },
5+
{ "path": "./tsconfig.node.json" }
6+
]
7+
}

‎packages/storybook/tsconfig.node.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
4+
"target": "ES2023",
5+
"lib": ["ES2023"],
6+
"module": "ESNext",
7+
"types": ["node"],
8+
"skipLibCheck": true,
9+
10+
"moduleResolution": "bundler",
11+
"allowImportingTsExtensions": true,
12+
"verbatimModuleSyntax": true,
13+
"moduleDetection": "force",
14+
"noEmit": true,
15+
16+
"strict": true,
17+
"noUnusedLocals": true,
18+
"noUnusedParameters": true,
19+
"erasableSyntaxOnly": true,
20+
"noFallthroughCasesInSwitch": true,
21+
"noUncheckedSideEffectImports": true
22+
},
23+
"include": ["vite.config.ts"]
24+
}

‎packages/storybook/vite.config.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*******************************************************************************
2+
* Copyright (c) 2026 Obeo.
3+
* This program and the accompanying materials
4+
* are made available under the terms of the Eclipse Public License v2.0
5+
* which accompanies this distribution, and is available at
6+
* https://www.eclipse.org/legal/epl-2.0/
7+
*
8+
* SPDX-License-Identifier: EPL-2.0
9+
*
10+
* Contributors:
11+
* Obeo - initial API and implementation
12+
*******************************************************************************/
13+
/// <reference types="vitest/config" />
14+
import react from "@vitejs/plugin-react";
15+
import { defineConfig } from "vite";
16+
17+
// https://vite.dev/config/
18+
import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
19+
import { playwright } from "@vitest/browser-playwright";
20+
import path from "node:path";
21+
import { fileURLToPath } from "node:url";
22+
const dirname =
23+
typeof __dirname !== "undefined"
24+
? __dirname
25+
: path.dirname(fileURLToPath(import.meta.url));
26+
27+
// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
28+
export default defineConfig({
29+
plugins: [react()],
30+
test: {
31+
projects: [
32+
{
33+
extends: true,
34+
plugins: [
35+
// The plugin will run tests for the stories defined in your Storybook config
36+
// See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
37+
storybookTest({
38+
configDir: path.join(dirname, ".storybook"),
39+
}),
40+
],
41+
test: {
42+
name: "storybook",
43+
browser: {
44+
enabled: true,
45+
headless: true,
46+
provider: playwright({}),
47+
instances: [
48+
{
49+
browser: "chromium",
50+
},
51+
],
52+
},
53+
setupFiles: [".storybook/vitest.setup.ts"],
54+
},
55+
},
56+
],
57+
},
58+
});

0 commit comments

Comments
 (0)