Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 06:58:58 -05:00
Code Issues Activity

✨ Support theme switching within Storybook

Browse source
This commit is contained in:
Belén Albeza 2024-07-12 11:52:31 +02:00
parent 0d8c98dcfe
commit ebda46f748
10 changed files with 62 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/.storybook/main.js
View file

@ -1,22 +1,18 @@
import viteConfig from "../vite.config";
/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
staticDirs: ["../resources/public"],
addons: ["@storybook/addon-essentials"],
addons: ["@storybook/addon-essentials", "@storybook/addon-themes"],
core: {
builder: "@storybook/builder-vite",
options: {
viteConfigPath: "../vite.config.js",
},
},
framework: {
name: "@storybook/react-vite",
options: {},
},
docs: {},
};
export default config;

32
frontend/.storybook/preview.js
View file

@ -1,5 +1,19 @@
import { withThemeByClassName } from "@storybook/addon-themes";
export const decorators = [
withThemeByClassName({
themes: {
light: "light",
dark: "default",
},
defaultTheme: "dark",
parentSelector: "body",
}),
];
/** @type { import('@storybook/react').Preview } */
const preview = {
decorators: decorators,
parameters: {
controls: {
matchers: {
@ -7,23 +21,7 @@ const preview = {
date: /Date$/i,
},
},
backgrounds: {
default: "dark",
values: [
{
name: "dark",
value: "#18181a",
},
{
name: "light",
value: "#fff",
},
{
name: "debug",
value: "#ccc",
},
],
},
backgrounds: { disable: true },
},
};

1
frontend/package.json
View file

@ -43,6 +43,7 @@
"devDependencies": {
"@playwright/test": "1.44.1",
"@storybook/addon-essentials": "^8.2.2",
"@storybook/addon-themes": "^8.2.2",
"@storybook/blocks": "^8.2.2",
"@storybook/react": "^8.2.2",
"@storybook/react-vite": "^8.2.2",

4
frontend/resources/styles/common/base.scss
View file

@ -19,8 +19,8 @@ $lh-133: 1.33;
$size-4: 1rem;
body {
background-color: var(--db-primary);
color: var(--df-primary);
background-color: var(--color-background-primary);
color: var(--color-foreground-primary);
display: flex;
flex-direction: column;
font-family: "worksans", "vazirmatn", sans-serif;

18
frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
View file

@ -2,8 +2,7 @@ import * as React from "react";
import Components from "@target/components";
const { Icon } = Components;
const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
Components.storybook;
const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook;
const { icons } = Components.meta;
const iconList = Object.entries(icons)
@ -23,11 +22,12 @@ export default {
control: { type: "radio" },
},
},
render: ({ ...args }) => <Icon {...args} />,
};
export const All = {
render: ({ size }) => (
<StoryWrapper theme="default">
<>
<StoryHeader>
<h1>All Icons</h1>
<p>Hover on an icon to see its ID.</p>
@ -43,7 +43,7 @@ export const All = {
</StoryGridCell>
))}
</StoryGrid>
</StoryWrapper>
</>
),
args: {
size: "m",
@ -55,11 +55,6 @@ export const All = {
};
export const Default = {
render: ({ id, ...args }) => (
<StoryWrapper theme="default">
<Icon id={id} {...args} />
</StoryWrapper>
),
args: {
id: "pin",
},
@ -69,11 +64,6 @@ export const Default = {
};
export const CustomSize = {
render: ({ id, size, ...args }) => (
<StoryWrapper theme="default">
<Icon id={id} size={size} {...args} />
</StoryWrapper>
),
args: {
id: "pin",
size: "m",

14
frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
View file

@ -2,8 +2,7 @@ import * as React from "react";
import Components from "@target/components";
const { RawSvg } = Components;
const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
Components.storybook;
const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook;
const { svgs } = Components.meta;
const assetList = Object.entries(svgs)
@ -19,11 +18,12 @@ export default {
control: { type: "select" },
},
},
render: ({ ...args }) => <RawSvg {...args} />,
};
export const All = {
render: ({}) => (
<StoryWrapper theme="light">
<>
<StoryHeader>
<h1>All SVG Assets</h1>
<p>Hover on an asset to see its ID.</p>
@ -36,7 +36,7 @@ export const All = {
</StoryGridCell>
))}
</StoryGrid>
</StoryWrapper>
</>
),
parameters: {
controls: { exclude: ["id"] },
@ -45,12 +45,8 @@ export const All = {
};
export const Default = {
render: ({ id, ...args }) => (
<StoryWrapper theme="default">
<RawSvg id={id} {...args} width="200" />
</StoryWrapper>
),
args: {
id: "brand-gitlab",
width: 200,
},
};

6
frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
View file

@ -2,7 +2,6 @@ import * as React from "react";
import Components from "@target/components";
const { Heading } = Components;
const { StoryWrapper } = Components.storybook;
const { typography } = Components.meta;
const typographyIds = typography.sort();
@ -33,10 +32,7 @@ export default {
},
},
render: ({ style, children, theme, ...args }) => (
// TODO: this <div> is a hack until we have proper theming
<div style={style} className={theme}>
<Heading {...args}>{children}</Heading>
</div>
<Heading {...args}>{children}</Heading>
),
};

32
frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
View file

@ -17,22 +17,11 @@ export default {
},
parameters: {
controls: { exclude: ["children", "theme", "style"] },
backgrounds: { default: "light" },
},
args: {
children: "Lorem ipsum",
theme: "light",
style: {
color: "var(--color-foreground-primary)",
background: "var(--color-background-primary)",
},
},
render: ({ style, children, theme, ...args }) => (
// TODO: this <div> is a hack until we have proper theming
<div style={style} className={theme}>
<Text {...args}>{children}</Text>
</div>
),
render: ({ children, ...args }) => <Text {...args}>{children}</Text>,
};
export const Default = {
@ -48,11 +37,20 @@ export const CustomTag = {
},
};
const docsParams = {
parameters: {
themes: {
themeOverride: "light",
},
},
};
export const Display = {
args: {
typography: "display",
children: "Display 400 36px/1.4 Work Sans",
},
...docsParams,
};
export const TitleLarge = {
@ -60,6 +58,7 @@ export const TitleLarge = {
typography: "title-large",
children: "Title Large 400 24px/1.4 Work Sans",
},
...docsParams,
};
export const TitleMedium = {
@ -67,6 +66,7 @@ export const TitleMedium = {
typography: "title-medium",
children: "Title Medium 400 20px/1.4 Work Sans",
},
...docsParams,
};
export const TitleSmall = {
@ -74,6 +74,7 @@ export const TitleSmall = {
typography: "title-small",
children: "Title Small 400 14px/1.2 Work Sans",
},
...docsParams,
};
export const HeadlineLarge = {
@ -81,6 +82,7 @@ export const HeadlineLarge = {
typography: "headline-large",
children: "Headline Large 400 18px/1.4 Work Sans",
},
...docsParams,
};
export const HeadlineMedium = {
@ -88,6 +90,7 @@ export const HeadlineMedium = {
typography: "headline-medium",
children: "Headline Medium 400 16px/1.4 Work Sans",
},
...docsParams,
};
export const HeadlineSmall = {
@ -95,6 +98,7 @@ export const HeadlineSmall = {
typography: "headline-small",
children: "Headline Small 500 12px/1.2 Work Sans",
},
...docsParams,
};
export const BodyLarge = {
@ -102,6 +106,7 @@ export const BodyLarge = {
typography: "body-large",
children: "Body Large 400 16px/1.4 Work Sans",
},
...docsParams,
};
export const BodyMedium = {
@ -109,6 +114,7 @@ export const BodyMedium = {
typography: "body-medium",
children: "Body Medium 400 14px/1.3 Work Sans",
},
...docsParams,
};
export const BodySmall = {
@ -116,6 +122,7 @@ export const BodySmall = {
typography: "body-small",
children: "Body Small 400 12px/1.3 Work Sans",
},
...docsParams,
};
export const CodeFont = {
@ -123,4 +130,5 @@ export const CodeFont = {
typography: "code-font",
children: "Code Font 400 12px/1.2 Roboto Mono",
},
...docsParams,
};

7
frontend/src/app/main/ui/ds/product/loader.stories.jsx
View file

@ -2,7 +2,6 @@ import * as React from "react";
import Components from "@target/components";
const { Loader } = Components;
const { StoryWrapper } = Components.storybook;
export default {
title: "Product/Loader",
@ -10,9 +9,5 @@ export default {
};
export const Default = {
render: () => (
<StoryWrapper theme="default">
<Loader title="Loading" />
</StoryWrapper>
),
render: () => <Loader title="Loading" />,
};

12
frontend/yarn.lock
View file

@ -2763,6 +2763,17 @@ __metadata:
languageName: node
linkType: hard
"@storybook/addon-themes@npm:^8.2.2":
version: 8.2.2
resolution: "@storybook/addon-themes@npm:8.2.2"
dependencies:
ts-dedent: "npm:^2.0.0"
peerDependencies:
storybook: ^8.2.2
checksum: 10c0/d3fc879e9d6b0659e2238b961bf69c701bd801990ccf18c8dc3c6270006caf9d5737a68049af2441767d9f473b9a3baf53bc7adb9d37e978d0b721f7fb4e3a76
languageName: node
linkType: hard
"@storybook/addon-toolbars@npm:8.2.2":
version: 8.2.2
resolution: "@storybook/addon-toolbars@npm:8.2.2"
@ -6599,6 +6610,7 @@ __metadata:
dependencies:
"@playwright/test": "npm:1.44.1"
"@storybook/addon-essentials": "npm:^8.2.2"
"@storybook/addon-themes": "npm:^8.2.2"
"@storybook/blocks": "npm:^8.2.2"
"@storybook/react": "npm:^8.2.2"
"@storybook/react-vite": "npm:^8.2.2"