Skip to content

Commit 0a430b0

Browse files
lsagetlethiaslsagetlethias
committed
upgrade from 9 to 10
1 parent 4eddd8a commit 0a430b0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+1121
-4118
lines changed

.storybook/DocsContainer.js renamed to .storybook/DocsContainer.tsx

Lines changed: 9 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
2-
import React, { useEffect } from "react";
3-
import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
4-
import { useDarkMode } from "storybook-dark-mode";
1+
import React, { PropsWithChildren, useEffect } from "react";
2+
import { DocsContainer as BaseContainer, DocsContainerProps } from "@storybook/addon-docs/blocks";
3+
import { useDarkMode } from "@vueless/storybook-dark-mode";
54
import { darkTheme, lightTheme } from "./customTheme";
65
import "../dist/dsfr/utility/icons/icons.min.css";
76
import "../dist/dsfr/dsfr.css";
@@ -15,16 +14,13 @@ startReactDsfr({
1514
"useLang": () => "fr"
1615
});
1716

18-
export const DocsContainer = ({ children, context }) => {
17+
export const DocsContainer = ({ children, ...rest }: PropsWithChildren<DocsContainerProps>) => {
1918
const isStorybookUiDark = useDarkMode();
2019
const { setIsDark } = useIsDark();
2120

22-
useEffect(
23-
()=> {
24-
setIsDark(isStorybookUiDark);
25-
},
26-
[isStorybookUiDark]
27-
);
21+
useEffect(() => {
22+
setIsDark(isStorybookUiDark);
23+
}, [isStorybookUiDark]);
2824

2925
const backgroundColor = fr.colors.decisions.background.default.grey.default;
3026

@@ -52,27 +48,8 @@ export const DocsContainer = ({ children, context }) => {
5248
}
5349
5450
`}</style>
55-
<BaseContainer
56-
context={{
57-
...context,
58-
"storyById": id => {
59-
const storyContext = context.storyById(id);
60-
return {
61-
...storyContext,
62-
"parameters": {
63-
...storyContext?.parameters,
64-
"docs": {
65-
...storyContext?.parameters?.docs,
66-
"theme": isStorybookUiDark ? darkTheme : lightTheme
67-
}
68-
}
69-
};
70-
}
71-
}}
72-
>
73-
<MuiDsfrThemeProvider>
74-
{children}
75-
</MuiDsfrThemeProvider>
51+
<BaseContainer {...rest} theme={isStorybookUiDark ? darkTheme : lightTheme}>
52+
<MuiDsfrThemeProvider>{children}</MuiDsfrThemeProvider>
7653
</BaseContainer>
7754
</>
7855
);

.storybook/customTheme.js renamed to .storybook/customTheme.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { create } from "storybook/theming";
22

3-
const brandImage= "logo.png";
4-
const brandTitle= "@codegouvfr/react-dsfr";
5-
const brandUrl= "https://github.com/codegouvfr/react-dsfr";
6-
const fontBase= '"Marianne", arial, sans-serif';
7-
const fontCode= "monospace";
3+
const brandImage = "logo.png";
4+
const brandTitle = "@codegouvfr/react-dsfr";
5+
const brandUrl = "https://github.com/codegouvfr/react-dsfr";
6+
const fontBase = '"Marianne", arial, sans-serif';
7+
const fontCode = "monospace";
88

99
export const darkTheme = create({
1010
"base": "dark",

.storybook/main.js renamed to .storybook/main.ts

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1-
module.exports = {
2-
"framework": {
3-
name: "@storybook/nextjs",
1+
import { StorybookConfig } from "@storybook/react-vite";
2+
3+
export default {
4+
framework: {
5+
name: "@storybook/react-vite",
46
options: {}
57
},
6-
7-
"stories": [
8+
features: {
9+
controls: true
10+
},
11+
stories: [
812
"../stories/*.mdx",
913
"../stories/*.stories.@(ts|tsx)",
1014
"../stories/blocks/*.stories.@(ts|tsx)",
1115
"../stories/charts/*.stories.@(ts|tsx)",
1216
"../stories/picto/*.stories.@(ts|tsx)"
1317
],
14-
15-
"addons": [
18+
addons: [
1619
"@storybook/addon-links",
17-
"storybook-dark-mode",
20+
"@vueless/storybook-dark-mode",
1821
"@storybook/addon-a11y",
19-
"@storybook/addon-webpack5-compiler-swc",
2022
"@storybook/addon-docs"
2123
],
22-
23-
"staticDirs": ["../dist", "./static"]
24-
};
24+
staticDirs: ["../dist", "./static"]
25+
} satisfies StorybookConfig;

‎.storybook/preview.js‎

Lines changed: 0 additions & 129 deletions
This file was deleted.

‎.storybook/preview.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { darkTheme, lightTheme } from "./customTheme";
2+
import { DocsContainer } from "./DocsContainer";
3+
import { Parameters, Preview } from "@storybook/react-vite";
4+
5+
const preview: Preview = {
6+
tags: ["autodocs"],
7+
parameters: {
8+
"actions": { "argTypesRegex": "^on[A-Z].*" },
9+
"controls": {
10+
"matchers": {
11+
"color": /(background|color)$/i,
12+
"date": /Date$/
13+
}
14+
},
15+
"backgrounds": { disable: true },
16+
"darkMode": {
17+
"light": lightTheme,
18+
"dark": darkTheme
19+
},
20+
"docs": {
21+
"container": DocsContainer
22+
},
23+
"viewport": {
24+
options: {
25+
"1440p": {
26+
"name": "1440p",
27+
"styles": {
28+
"width": "2560px",
29+
"height": "1440px"
30+
}
31+
},
32+
"fullHD": {
33+
"name": "Full HD",
34+
"styles": {
35+
"width": "1920px",
36+
"height": "1080px"
37+
}
38+
},
39+
"macBookProBig": {
40+
"name": "MacBook Pro Big",
41+
"styles": {
42+
"width": "1024px",
43+
"height": "640px"
44+
}
45+
},
46+
"macBookProMedium": {
47+
"name": "MacBook Pro Medium",
48+
"styles": {
49+
"width": "1440px",
50+
"height": "900px"
51+
}
52+
},
53+
"macBookProSmall": {
54+
"name": "MacBook Pro Small",
55+
"styles": {
56+
"width": "1680px",
57+
"height": "1050px"
58+
}
59+
},
60+
"pcAgent": {
61+
"name": "PC Agent",
62+
"styles": {
63+
"width": "960px",
64+
"height": "540px"
65+
}
66+
},
67+
"iphone12Pro": {
68+
"name": "Iphone 12 pro",
69+
"styles": {
70+
"width": "390px",
71+
"height": "844px"
72+
}
73+
},
74+
"iphone5se": {
75+
"name": "Iphone 5/SE",
76+
"styles": {
77+
"width": "320px",
78+
"height": "568px"
79+
}
80+
},
81+
"ipadPro": {
82+
"name": "Ipad pro",
83+
"styles": {
84+
"width": "1240px",
85+
"height": "1366px"
86+
}
87+
},
88+
"Galaxy s9+": {
89+
"name": "Galaxy S9+",
90+
"styles": {
91+
"width": "320px",
92+
"height": "658px"
93+
}
94+
}
95+
}
96+
},
97+
"options": {
98+
"storySort": (a: any, b: any) =>
99+
getHardCodedWeight(b[1].kind) - getHardCodedWeight(a[1].kind)
100+
}
101+
}
102+
};
103+
104+
export default preview;
105+
106+
const { getHardCodedWeight } = (() => {
107+
const orderedPagesPrefix = [
108+
"🇫🇷 Introduction",
109+
//"components",
110+
"components/Header",
111+
"components/Footer",
112+
"components/consentManagement",
113+
"components/Alert",
114+
"components/Tabs",
115+
"components/Stepper",
116+
"components/Button",
117+
"components/FranceConnectButton",
118+
"components/ProConnectButton"
119+
];
120+
121+
function getHardCodedWeight(kind: string) {
122+
for (let i = 0; i < orderedPagesPrefix.length; i++) {
123+
if (kind.toLowerCase().startsWith(orderedPagesPrefix[i].toLowerCase())) {
124+
return orderedPagesPrefix.length - i;
125+
}
126+
}
127+
128+
return 0;
129+
}
130+
131+
return { getHardCodedWeight };
132+
})();

0 commit comments

Comments
 (0)