twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-23 12:02:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

Storybook fix dark mode (#4865)

Browse Source 
preview has now also a dark background & added a one click change theme
button

<img width="994" alt="Bildschirmfoto 2024-04-06 um 18 27 45"
src="https://github.com/twentyhq/twenty/assets/48770548/95f12617-e48f-4492-9b51-13410aff43ee">
This commit is contained in:
brendanlaschke 2024-04-11 17:28:12 +02:00 committed by GitHub
parent ffda4058e0
commit ca9cc86742
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 182 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -209,7 +209,6 @@
"@storybook/addon-interactions": "^7.6.7",
"@storybook/addon-links": "^7.6.7",
"@storybook/addon-onboarding": "^1.0.10",
"@storybook/addon-themes": "^8.0.0",
"@storybook/blocks": "^7.6.3",
"@storybook/core-server": "7.6.3",
"@storybook/jest": "^0.2.3",
@ -299,6 +298,7 @@
"storybook": "^7.6.3",
"storybook-addon-cookie": "^3.2.0",
"storybook-addon-pseudo-states": "^2.1.2",
"storybook-dark-mode": "^4.0.1",
"supertest": "^6.1.3",
"ts-jest": "^29.1.1",
"ts-loader": "^9.2.3",

2
packages/twenty-front/.storybook/main.ts
View File

@ -33,7 +33,7 @@ const config: StorybookConfig = {
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
'@storybook/addon-coverage',
'@storybook/addon-themes',
'storybook-dark-mode',
'storybook-addon-cookie',
'storybook-addon-pseudo-states',
],

5
packages/twenty-front/.storybook/manager-head.html Normal file
View File

@ -0,0 +1,5 @@
<style>
[data-is-storybook="true"] {
background-color: transparent!important;
}
</style>

22
packages/twenty-front/.storybook/preview.ts → packages/twenty-front/.storybook/preview.tsx
View File

@ -1,7 +1,7 @@
import { ThemeProvider } from '@emotion/react';
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { Preview, ReactRenderer } from '@storybook/react';
import { Preview } from '@storybook/react';
import { initialize, mswDecorator } from 'msw-storybook-addon';
import { useDarkMode } from 'storybook-dark-mode';
import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
@ -30,14 +30,16 @@ initialize({
const preview: Preview = {
decorators: [
withThemeFromJSXProvider<ReactRenderer>({
themes: {
light: THEME_LIGHT,
dark: THEME_DARK,
},
defaultTheme: 'light',
Provider: ThemeProvider,
}),
(Story) => {
const mode = useDarkMode() ? 'Dark' : 'Light';
const theme = mode === 'Dark' ? THEME_DARK : THEME_LIGHT;
return (
<ThemeProvider theme={theme}>
<Story />
</ThemeProvider>
);
},
RootDecorator,
mswDecorator,
],

2
packages/twenty-front/src/testing/ComponentStorybookLayout.tsx
View File

@ -1,8 +1,6 @@
import styled from '@emotion/styled';
const StyledLayout = styled.div<{ width?: number }>`
background: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 5px;
display: flex;

2
packages/twenty-ui/.storybook/main.ts
View File

@ -8,7 +8,7 @@ const config: StorybookConfig = {
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
'@storybook/addon-coverage',
'@storybook/addon-themes',
'storybook-dark-mode',
'storybook-addon-cookie',
'storybook-addon-pseudo-states',
],

5
packages/twenty-ui/.storybook/manager-head.html Normal file
View File

@ -0,0 +1,5 @@
<style>
[data-is-storybook="true"] {
background-color: transparent!important;
}
</style>

21
packages/twenty-ui/.storybook/preview.ts
View File

@ -1,21 +0,0 @@
import { ThemeProvider } from '@emotion/react';
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { Preview, ReactRenderer } from '@storybook/react';
import { THEME_DARK, THEME_LIGHT } from '../src/theme/index';
const preview: Preview = {
// TODO: Add toggle for darkTheme.
decorators: [
withThemeFromJSXProvider<ReactRenderer>({
themes: {
light: THEME_LIGHT,
dark: THEME_DARK,
},
defaultTheme: 'light',
Provider: ThemeProvider,
}),
],
};
export default preview;

22
packages/twenty-ui/.storybook/preview.tsx Normal file
View File

@ -0,0 +1,22 @@
import { ThemeProvider } from '@emotion/react';
import { Preview } from '@storybook/react';
import { useDarkMode } from 'storybook-dark-mode';
import { THEME_DARK, THEME_LIGHT } from '../src/theme/index';
const preview: Preview = {
decorators: [
(Story) => {
const mode = useDarkMode() ? 'Dark' : 'Light';
const theme = mode === 'Dark' ? THEME_DARK : THEME_LIGHT;
return (
<ThemeProvider theme={theme}>
<Story />
</ThemeProvider>
);
},
],
};
export default preview;

147
yarn.lock
View File

@ -10502,7 +10502,7 @@ __metadata:
languageName: node
linkType: hard
"@radix-ui/react-slot@npm:1.0.2":
"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
version: 1.0.2
resolution: "@radix-ui/react-slot@npm:1.0.2"
dependencies:
@ -13180,15 +13180,6 @@ __metadata:
languageName: node
linkType: hard
"@storybook/addon-themes@npm:^8.0.0":
version: 8.0.0
resolution: "@storybook/addon-themes@npm:8.0.0"
dependencies:
ts-dedent: "npm:^2.0.0"
checksum: 4a095d69c67a84c9f496573cb91c230b8ac82a5a94b79bed95b3c0986585e6d65ea6f1b85bc8c4e2bbac1a4270775e193708665ba1de656b4a3cd02a029ee6fb
languageName: node
linkType: hard
"@storybook/addon-toolbars@npm:7.6.7":
version: 7.6.7
resolution: "@storybook/addon-toolbars@npm:7.6.7"
@ -13365,6 +13356,19 @@ __metadata:
languageName: node
linkType: hard
"@storybook/channels@npm:8.0.6":
version: 8.0.6
resolution: "@storybook/channels@npm:8.0.6"
dependencies:
"@storybook/client-logger": "npm:8.0.6"
"@storybook/core-events": "npm:8.0.6"
"@storybook/global": "npm:^5.0.0"
telejson: "npm:^7.2.0"
tiny-invariant: "npm:^1.3.1"
checksum: 1df4a4e7e3259b959c94d5d4275aeed9fa0c8c139654fb0a6b0c943ec508fa21dd3915cfb276e1f1f363ffd4359ac284e0e05460aa7cc94bd8e0c2138a26a527
languageName: node
linkType: hard
"@storybook/cli@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/cli@npm:7.6.17"
@ -13443,6 +13447,15 @@ __metadata:
languageName: node
linkType: hard
"@storybook/client-logger@npm:8.0.6":
version: 8.0.6
resolution: "@storybook/client-logger@npm:8.0.6"
dependencies:
"@storybook/global": "npm:^5.0.0"
checksum: 8b40a8031d6ec311b5761a95651090b1d07cbece014f623ce9d6e81f3fbb8b6bb75bc535cea88e2ecc4e52994ee718698aaae08d7311e597d926e9395c686b4d
languageName: node
linkType: hard
"@storybook/codemod@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/codemod@npm:7.6.17"
@ -13486,6 +13499,26 @@ __metadata:
languageName: node
linkType: hard
"@storybook/components@npm:^8.0.0":
version: 8.0.6
resolution: "@storybook/components@npm:8.0.6"
dependencies:
"@radix-ui/react-slot": "npm:^1.0.2"
"@storybook/client-logger": "npm:8.0.6"
"@storybook/csf": "npm:^0.1.2"
"@storybook/global": "npm:^5.0.0"
"@storybook/icons": "npm:^1.2.5"
"@storybook/theming": "npm:8.0.6"
"@storybook/types": "npm:8.0.6"
memoizerific: "npm:^1.11.3"
util-deprecate: "npm:^1.0.2"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: a848bcce56920fa5894f6452cbba988a507d47b52a83992dd6dbe565ef83ec72bb441358c18667a7011eb2d73e14ea20daf27799847f51380696faa407de314a
languageName: node
linkType: hard
"@storybook/core-client@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/core-client@npm:7.6.17"
@ -13626,6 +13659,15 @@ __metadata:
languageName: node
linkType: hard
"@storybook/core-events@npm:8.0.6, @storybook/core-events@npm:^8.0.0":
version: 8.0.6
resolution: "@storybook/core-events@npm:8.0.6"
dependencies:
ts-dedent: "npm:^2.0.0"
checksum: 4771b9c959cbb5434ed410a373100d2a012cec65e2c23205c22c27a5273297ff389d0dd507e20277006ac30f19135bb4505cadac052f2f43d91c2bd9063a5b70
languageName: node
linkType: hard
"@storybook/core-server@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/core-server@npm:7.6.17"
@ -13866,7 +13908,7 @@ __metadata:
languageName: node
linkType: hard
"@storybook/icons@npm:^1.2.9":
"@storybook/icons@npm:^1.2.5, @storybook/icons@npm:^1.2.9":
version: 1.2.9
resolution: "@storybook/icons@npm:1.2.9"
peerDependencies:
@ -13925,6 +13967,29 @@ __metadata:
languageName: node
linkType: hard
"@storybook/manager-api@npm:^8.0.0":
version: 8.0.6
resolution: "@storybook/manager-api@npm:8.0.6"
dependencies:
"@storybook/channels": "npm:8.0.6"
"@storybook/client-logger": "npm:8.0.6"
"@storybook/core-events": "npm:8.0.6"
"@storybook/csf": "npm:^0.1.2"
"@storybook/global": "npm:^5.0.0"
"@storybook/icons": "npm:^1.2.5"
"@storybook/router": "npm:8.0.6"
"@storybook/theming": "npm:8.0.6"
"@storybook/types": "npm:8.0.6"
dequal: "npm:^2.0.2"
lodash: "npm:^4.17.21"
memoizerific: "npm:^1.11.3"
store2: "npm:^2.14.2"
telejson: "npm:^7.2.0"
ts-dedent: "npm:^2.0.0"
checksum: 719bef42fee448286ca20f82e7a831ef073ee7732118e434930e25a1f9cd838e4be82e7c66e0d6803c4b40e8195a9e43c4b3b6d2b00ae65a4aef65a7d1674905
languageName: node
linkType: hard
"@storybook/manager@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/manager@npm:7.6.17"
@ -14169,6 +14234,17 @@ __metadata:
languageName: node
linkType: hard
"@storybook/router@npm:8.0.6":
version: 8.0.6
resolution: "@storybook/router@npm:8.0.6"
dependencies:
"@storybook/client-logger": "npm:8.0.6"
memoizerific: "npm:^1.11.3"
qs: "npm:^6.10.0"
checksum: 62a852b3e3f0f92d36a6b43cca350f4370a4f67e8964cb67aad8d1dfe3f7deab8561584ffa10aa69c0028edbc62b8e2fb0c1c949bdaf5a697238354edd43fb31
languageName: node
linkType: hard
"@storybook/telemetry@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/telemetry@npm:7.6.17"
@ -14301,6 +14377,26 @@ __metadata:
languageName: node
linkType: hard
"@storybook/theming@npm:8.0.6, @storybook/theming@npm:^8.0.0":
version: 8.0.6
resolution: "@storybook/theming@npm:8.0.6"
dependencies:
"@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1"
"@storybook/client-logger": "npm:8.0.6"
"@storybook/global": "npm:^5.0.0"
memoizerific: "npm:^1.11.3"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
peerDependenciesMeta:
react:
optional: true
react-dom:
optional: true
checksum: 4870e3d517f93f09937e5d53b1724ad1a39a8990ad232eb2bc1724fe70968cf6b51ffe73d010d0ddd5893d3e87981a491d2506114427dea97ee97e65e942e3e2
languageName: node
linkType: hard
"@storybook/types@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/types@npm:7.6.17"
@ -14337,6 +14433,17 @@ __metadata:
languageName: node
linkType: hard
"@storybook/types@npm:8.0.6":
version: 8.0.6
resolution: "@storybook/types@npm:8.0.6"
dependencies:
"@storybook/channels": "npm:8.0.6"
"@types/express": "npm:^4.7.0"
file-system-cache: "npm:2.3.0"
checksum: 160f94dfe1502475e3568956f181982e2a4e1ad2d2e1ae0443148490423f313b807139af436f6cfe956b89837a9e4523f45043e55494ef52b2ab833c1003606e
languageName: node
linkType: hard
"@stylistic/eslint-plugin-js@npm:1.5.3, @stylistic/eslint-plugin-js@npm:^1.5.3":
version: 1.5.3
resolution: "@stylistic/eslint-plugin-js@npm:1.5.3"
@ -43778,6 +43885,22 @@ __metadata:
languageName: node
linkType: hard
"storybook-dark-mode@npm:^4.0.1":
version: 4.0.1
resolution: "storybook-dark-mode@npm:4.0.1"
dependencies:
"@storybook/components": "npm:^8.0.0"
"@storybook/core-events": "npm:^8.0.0"
"@storybook/global": "npm:^5.0.0"
"@storybook/icons": "npm:^1.2.5"
"@storybook/manager-api": "npm:^8.0.0"
"@storybook/theming": "npm:^8.0.0"
fast-deep-equal: "npm:^3.1.3"
memoizerific: "npm:^1.11.3"
checksum: 201e13e7bbed85ad7a52d65984da9347b0ecaf1458ec569a6645a5e6dc04638b8aa61ed52a56a775321f801f1a035444b6d0d715624aa217f7d6ea7671060d3e
languageName: node
linkType: hard
"storybook@npm:^7.6.3":
version: 7.6.17
resolution: "storybook@npm:7.6.17"
@ -45675,7 +45798,6 @@ __metadata:
"@storybook/addon-interactions": "npm:^7.6.7"
"@storybook/addon-links": "npm:^7.6.7"
"@storybook/addon-onboarding": "npm:^1.0.10"
"@storybook/addon-themes": "npm:^8.0.0"
"@storybook/blocks": "npm:^7.6.3"
"@storybook/core-server": "npm:7.6.3"
"@storybook/icons": "npm:^1.2.9"
@ -45878,6 +46000,7 @@ __metadata:
storybook: "npm:^7.6.3"
storybook-addon-cookie: "npm:^3.2.0"
storybook-addon-pseudo-states: "npm:^2.1.2"
storybook-dark-mode: "npm:^4.0.1"
stripe: "npm:^14.17.0"
supertest: "npm:^6.1.3"
ts-jest: "npm:^29.1.1"