mirror of
https://github.com/penpot/penpot.git
synced 2025-04-13 15:31:26 -05:00
Merge pull request #4874 from penpot/ladybenko-8008-upgrade-storybook8
Upgrade to Storybook 8
This commit is contained in:
Eva Marco
GitHub
commit
3900b37f5c
8 changed files with 1508 additions and 3295 deletions
|
|
@ -1,14 +1,22 @@
|
|||
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"],
|
||||
core: {
|
||||
builder: "@storybook/builder-vite",
|
||||
options: {
|
||||
viteConfigPath: "../vite.config.js",
|
||||
},
|
||||
},
|
||||
|
||||
framework: {
|
||||
name: "@storybook/react-vite",
|
||||
options: {},
|
||||
},
|
||||
docs: {
|
||||
autodocs: "tag",
|
||||
},
|
||||
|
||||
docs: {},
|
||||
};
|
||||
export default config;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/** @type { import('@storybook/react').Preview } */
|
||||
const preview = {
|
||||
parameters: {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
|
|
|
|||
|
|
@ -36,15 +36,16 @@
|
|||
"e2e:server": "node ./scripts/e2e-server.js",
|
||||
"e2e:test": "playwright test --project default",
|
||||
"storybook:compile": "yarn run compile && clojure -M:dev:shadow-cljs compile storybook",
|
||||
"storybook:watch": "yarn run storybook:compile && concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"storybook dev -p 6006\" \"yarn run watch\"",
|
||||
"storybook:server": "yarn run storybook dev -p 6006 --no-open",
|
||||
"storybook:watch": "yarn run storybook:compile && concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"yarn run storybook:server\" \"yarn run watch\"",
|
||||
"storybook:build": "yarn run storybook:compile && storybook build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "1.44.1",
|
||||
"@storybook/addon-essentials": "^7.6.17",
|
||||
"@storybook/blocks": "^7.6.17",
|
||||
"@storybook/react": "^7.6.17",
|
||||
"@storybook/react-vite": "^7.6.17",
|
||||
"@storybook/addon-essentials": "^8.2.1",
|
||||
"@storybook/blocks": "^8.2.1",
|
||||
"@storybook/react": "^8.2.1",
|
||||
"@storybook/react-vite": "^8.2.1",
|
||||
"@types/node": "^20.11.20",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"concurrently": "^8.2.2",
|
||||
|
|
@ -79,7 +80,7 @@
|
|||
"sass": "^1.77.4",
|
||||
"sass-embedded": "^1.77.2",
|
||||
"shadow-cljs": "2.28.8",
|
||||
"storybook": "^7.6.17",
|
||||
"storybook": "^8.2.1",
|
||||
"svg-sprite": "^2.0.4",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.1.4",
|
||||
|
|
|
|||
|
|
@ -5,19 +5,14 @@ import * as HeadingStories from "./heading.stories";
|
|||
|
||||
# Headings
|
||||
|
||||
This component will add a heading tag element to our code.
|
||||
This component will add a heading tag element (ie. `<h1>`, `<h2>`, etc.) to our code.
|
||||
|
||||
## Technical notes
|
||||
|
||||
This components accepts to props:
|
||||
|
||||
- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
|
||||
- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
|
||||
|
||||
You can check passed props to renderized components on hover `level / typography`;
|
||||
|
||||
### Using typography IDs
|
||||
|
||||
This component accepts any [typography IDs](?path=/docs/foundations-typography--docs).
|
||||
|
||||
There are typography ID definitions you can use in your code rather than typing the
|
||||
typography ID by hand.
|
||||
|
||||
|
|
|
|||
|
|
@ -20,17 +20,28 @@ export default {
|
|||
control: { type: "select" },
|
||||
},
|
||||
},
|
||||
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}>
|
||||
<Heading {...args}>{children}</Heading>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const AnyHeading = {
|
||||
name: "Heading",
|
||||
render: ({ level, typography, ...args }) => (
|
||||
<StoryWrapper theme="default">
|
||||
<Heading level={level} typography={typography} {...args}>
|
||||
Lorem ipsum
|
||||
</Heading>
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
level: 1,
|
||||
typography: "display",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import * as React from "react";
|
|||
import Components from "@target/components";
|
||||
|
||||
const { Text } = Components;
|
||||
const { StoryWrapper } = Components.storybook;
|
||||
const { typography } = Components.meta;
|
||||
|
||||
const typographyIds = typography.sort();
|
||||
|
|
@ -16,31 +15,112 @@ export default {
|
|||
control: { type: "select" },
|
||||
},
|
||||
},
|
||||
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>
|
||||
),
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
render: ({ typography, ...args }) => (
|
||||
<StoryWrapper theme="default">
|
||||
<Text typography={typography} {...args}>
|
||||
Lorem ipsum
|
||||
</Text>
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
typography: "display",
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomTag = {
|
||||
render: ({ typography, ...args }) => (
|
||||
<StoryWrapper theme="default">
|
||||
<Text typography={typography} {...args}>
|
||||
Lorem ipsum
|
||||
</Text>
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
typography: "display",
|
||||
as: "li",
|
||||
},
|
||||
};
|
||||
|
||||
export const Display = {
|
||||
args: {
|
||||
typography: "display",
|
||||
children: "Display 400 36px/1.4 Work Sans",
|
||||
},
|
||||
};
|
||||
|
||||
export const TitleLarge = {
|
||||
args: {
|
||||
typography: "title-large",
|
||||
children: "Title Large 400 24px/1.4 Work Sans",
|
||||
},
|
||||
};
|
||||
|
||||
export const TitleMedium = {
|
||||
args: {
|
||||
typography: "title-medium",
|
||||
children: "Title Medium 400 20px/1.4 Work Sans",
|
||||
},
|
||||
};
|
||||
|
||||
export const TitleSmall = {
|
||||
args: {
|
||||
typography: "title-small",
|
||||
children: "Title Small 400 14px/1.2 Work Sans",
|
||||
},
|
||||
};
|
||||
|
||||
export const HeadlineLarge = {
|
||||
args: {
|
||||
typography: "headline-large",
|
||||
children: "Headline Large 400 18px/1.4 Work Sans",
|
||||
},
|
||||
};
|
||||
|
||||
export const HeadlineMedium = {
|
||||
args: {
|
||||
typography: "headline-medium",
|
||||
children: "Headline Medium 400 16px/1.4 Work Sans",
|
||||
},
|
||||
};
|
||||
|
||||
export const HeadlineSmall = {
|
||||
args: {
|
||||
typography: "headline-small",
|
||||
children: "Headline Small 500 12px/1.2 Work Sans",
|
||||
},
|
||||
};
|
||||
|
||||
export const BodyLarge = {
|
||||
args: {
|
||||
typography: "body-large",
|
||||
children: "Body Large 400 16px/1.4 Work Sans",
|
||||
},
|
||||
};
|
||||
|
||||
export const BodyMedium = {
|
||||
args: {
|
||||
typography: "body-medium",
|
||||
children: "Body Medium 400 14px/1.3 Work Sans",
|
||||
},
|
||||
};
|
||||
|
||||
export const BodySmall = {
|
||||
args: {
|
||||
typography: "body-small",
|
||||
children: "Body Small 400 12px/1.3 Work Sans",
|
||||
},
|
||||
};
|
||||
|
||||
export const CodeFont = {
|
||||
args: {
|
||||
typography: "code-font",
|
||||
children: "Code Font 400 12px/1.2 Roboto Mono",
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Canvas, Meta } from "@storybook/blocks";
|
||||
import Components from "@target/components";
|
||||
import * as TextStories from "../typography/text.stories";
|
||||
|
||||
<Meta title="Foundations/Typography" />
|
||||
|
||||
|
|
@ -53,59 +54,44 @@ for exceptions based on the size of the components.
|
|||
|
||||
Hero style text for transitional pages (Login). If too large use large title in narrow windows.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Text>
|
||||
</Canvas>
|
||||
<Canvas of={TextStories.Display} />
|
||||
|
||||
### Title large `title-large`
|
||||
### Title Large `title-large`
|
||||
|
||||
Page headers for main pages (dashboard, Profiles...). If too big use title
|
||||
(medium) in narrow windows.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Text>
|
||||
</Canvas>
|
||||
<Canvas of={TextStories.TitleLarge} />
|
||||
|
||||
### Title medium `title-medium`
|
||||
### Title Medium `title-medium`
|
||||
|
||||
Default page title. Equivalent line height of 32px matches the height
|
||||
of buttons and other medium controls. Ideal for page header layout.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
<Canvas of={TextStories.TitleMedium} />
|
||||
|
||||
### Title small `title-small`
|
||||
### Title Small `title-small`
|
||||
|
||||
Uses the same size as body (large).
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
<Canvas of={TextStories.TitleSmall} />
|
||||
|
||||
## Headline
|
||||
|
||||
Page sections/subtitles, or names of less important objects in
|
||||
page titles (automated action titles, for example). Same line height as title (medium).
|
||||
Page sections/subtitles, or names of less important objects in page titles
|
||||
(automated action titles, for example). Same line height as title (medium).
|
||||
|
||||
### Headline large `headline-large`
|
||||
### Headline Large `headline-large`
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
<Canvas of={TextStories.HeadlineLarge} />
|
||||
|
||||
### Headline medium `headline-medium`
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
### Headline Medium `headline-medium`
|
||||
|
||||
<Canvas of={TextStories.HeadlineMedium} />
|
||||
|
||||
### Headline small `headline-small`
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
<Canvas of={TextStories.HeadlineSmall} />
|
||||
|
||||
## Body
|
||||
|
||||
|
|
@ -113,35 +99,26 @@ page titles (automated action titles, for example). Same line height as title (m
|
|||
|
||||
Generic content.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
<Canvas of={TextStories.BodyLarge} />
|
||||
|
||||
### Body medium `body-medium`
|
||||
|
||||
Default UI font. Most commonly used for body text.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
|
||||
<Canvas of={TextStories.BodyMedium} />
|
||||
|
||||
### Body small `body-small`
|
||||
|
||||
Small compact font with a line height of less than 16px.
|
||||
Use for single line scenarios, as the small size does not meet accessibility requirements.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
<Canvas of={TextStories.BodySmall} />
|
||||
|
||||
## Code font `code-font`
|
||||
|
||||
Default style for rendering code blocks.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Text typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Text>
|
||||
</Canvas>
|
||||
<Canvas of={TextStories.CodeFont} />
|
||||
|
||||
## Fonts
|
||||
|
||||
|
|
|
|||
4568
frontend/yarn.lock
4568
frontend/yarn.lock
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue