Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/upgrade storybook #37

Merged
merged 4 commits into from
Jun 10, 2024
Merged

Feature/upgrade storybook #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ccd502
upgrade and adapt to migration suggestions
r3dDoX Jun 9, 2024
835e6bd
create own typography showcase
r3dDoX Jun 9, 2024
0c079c0
remove empty config
r3dDoX Jun 9, 2024
1afd571
pass the is_chromatic env var properly
r3dDoX Jun 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6,009 changes: 2,406 additions & 3,603 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 1 addition & 4 deletions web-components/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import turbosnap from 'vite-plugin-turbosnap';
import { StorybookConfig } from '@storybook/web-components-vite';

const config: StorybookConfig = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was an automatic Storybook migration.

addons: [getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-essentials')],
framework: {
name: '@storybook/web-components-vite',
Expand All @@ -15,9 +15,6 @@ const config: StorybookConfig = {
plugins: configType === 'PRODUCTION' ? [turbosnap({ rootDir: config.root ?? process.cwd() })] : [],
});
},
docs: {
autodocs: true,
},
};

export default config;
Expand Down
2 changes: 1 addition & 1 deletion web-components/.storybook/manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { addons } from '@storybook/addons';
import { addons } from '@storybook/manager-api';
import { themes } from '@storybook/theming';

addons.setConfig({
Expand Down
1 change: 1 addition & 0 deletions web-components/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,4 @@ export const parameters = {
},
},
};
export const tags = ['autodocs'];
25 changes: 13 additions & 12 deletions web-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
"test": "vitest run --reporter=verbose --reporter=junit --coverage",
"test:watch": "vitest",
"design-tokens:generate": "node ./tokens/style-dictionary.cjs",
"icons:generate": "node src/components/icon/generate-icon-types.js"
"icons:generate": "node src/components/icon/generate-icon-types.js",
"chromatic": "VITE_IS_CHROMATIC=true chromatic"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

turns out I forgot to add this script in the last PR that actually makes sure, chromatic has the proper ENV var passed during build

},
"dependencies": {
"@floating-ui/dom": "1.6.3",
Expand All @@ -48,14 +49,15 @@
"@easepick/range-plugin": "1.2.1",
"@lit-labs/virtualizer": "2.0.12",
"@open-wc/testing-helpers": "3.0.0",
"@storybook/addon-actions": "7.6.17",
"@storybook/addon-essentials": "7.6.17",
"@storybook/addon-links": "7.6.17",
"@storybook/addons": "7.6.17",
"@storybook/blocks": "7.6.17",
"@storybook/theming": "7.6.17",
"@storybook/web-components": "7.6.17",
"@storybook/web-components-vite": "7.6.17",
"@storybook/addon-actions": "8.1.6",
"@storybook/addon-essentials": "8.1.6",
"@storybook/addon-links": "8.1.6",
"@storybook/blocks": "8.1.6",
"@storybook/manager-api": "8.1.6",
"@storybook/preview-api": "8.1.6",
"@storybook/theming": "8.1.6",
"@storybook/web-components": "8.1.6",
"@storybook/web-components-vite": "8.1.6",
"@testing-library/dom": "9.3.4",
"@testing-library/jest-dom": "6.4.2",
"@testing-library/user-event": "14.5.2",
Expand All @@ -64,6 +66,7 @@
"@web-types/lit": "2.0.0-3",
"babel-loader": "9.1.3",
"cem-plugin-expanded-types": "1.2.0",
"chromatic": "11.5.3",
"custom-element-jet-brains-integration": "1.4.4",
"date-fns": "2.30.0",
"element-internals-polyfill": "1.3.10",
Expand All @@ -76,10 +79,8 @@
"globby": "14.0.1",
"jsdom": "24.0.0",
"pascal-case": "4.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"shadow-dom-testing-library": "1.11.2",
"storybook": "7.6.17",
"storybook": "8.1.6",
"style-dictionary": "3.9.2",
"ts-lit-plugin": "2.0.2",
"typescript": "5.3.3",
Expand Down
2 changes: 1 addition & 1 deletion web-components/src/components/outsideClick/outsideClick.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import './outsideClick.component';
import { html } from 'lit-html';
import { useState } from '@storybook/addons';
import { Meta, StoryObj } from '@storybook/web-components';
import docs from './outsideClick.md?raw';
import OutsideClick from './outsideClick.component';
import { useState } from '@storybook/preview-api';

const meta: Meta<OutsideClick> = {
title: 'Components/OutsideClick',
Expand Down
343 changes: 185 additions & 158 deletions web-components/src/components/overlay/overlay.stories.ts
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion web-components/src/components/tab/tab.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Tab from './tab.component';
import { html } from 'lit-html';
import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
import docs from './tab.md?raw';
import { useArgs } from '@storybook/addons';
import { useArgs } from '@storybook/preview-api';
import { withActions } from '@storybook/addon-actions/decorator';

const meta: Meta<Tab> = {
Expand Down
2 changes: 1 addition & 1 deletion web-components/src/components/tabGroup/tabGroup.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { html } from 'lit-html';
import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
import docs from './tabGroup.md?raw';
import TabGroup, { DssTabGroupTabCloseEvent, DssTabGroupTabSelectEvent } from './tabGroup.component';
import { useState } from '@storybook/addons';
import { useState } from '@storybook/preview-api';
import { withActions } from '@storybook/addon-actions/decorator';

const meta: Meta<TabGroup> = {
Expand Down
2 changes: 1 addition & 1 deletion web-components/src/intro.stories.mdx → web-components/src/intro.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Meta} from '@storybook/blocks';

<Meta title="Intro"/>
<Meta title="Intro" />

# Design System Starter

Expand Down
6 changes: 1 addition & 5 deletions web-components/src/pages/forms/forms.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import '../../components/dropdown/dropdown.component';
import '../../components/menu/menu.component';
import '../../components/menuItem/menuItem.component';
import '../../components/multiselect/multiselect.component';
import { useState } from '@storybook/addons';
import { useState } from '@storybook/preview-api';
import * as yup from 'yup';
import { when } from 'lit-html/directives/when.js';
import { StoryFn, StoryObj } from '@storybook/web-components';
Expand All @@ -20,10 +20,6 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
export default {
title: 'Pages/Forms',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/vN8eRqwHQLrnGFkcxL7Z4W/UI-Design-System-2.1?node-id=1793%3A10899&t=1nGYeu3l214iXSEh-0',
},
docs: {
description: {
component: docs,
Expand Down
52 changes: 33 additions & 19 deletions ...s/src/rootStyles/designTokens.stories.mdx → ...mponents/src/rootStyles/design-tokens.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import {Canvas, ColorItem, ColorPalette, Meta} from '@storybook/blocks';
import {ColorItem, ColorPalette, Meta} from '@storybook/blocks';
import tokens from './design-tokens.json';
import {groupColors} from "./color.helper";
import {groupColors} from './color.helper';

<Meta title="Design Tokens"/>

Expand Down Expand Up @@ -50,16 +49,31 @@ properties.

## Typography

<Canvas>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Canvas now always has to reference a story, but creating a Typeface story will also show the story in the sidebar. The Typedef Storyblock does not handle the fonts as we used to show it so I set up a little structure that shows the typefaces nicely
Screenshot 2024-06-09 at 22 23 09

<div>
<small>Small</small>
<p>Text</p>
<h4>h4. Title</h4>
<h3>h3. Title</h3>
<h2>h2. Title</h2>
<h1>h1. Title</h1>
</div>
</Canvas>
**Typeface:** {tokens.typography.main.fontFamily.value}

<div style={{ display: 'grid', gridTemplateColumns: 'max-content auto', gap: tokens.size['2'].value, alignItems: 'center' }}>
{Object.entries(tokens.typography)
.map(([name, token]) => (
<div style={{ display: 'contents' }}>
<small>{name}</small>
<div
style={{
fontFamily: token.fontFamily.value,
fontSize: token.fontSize.value,
lineHeight: token.lineHeight.value,
fontWeight: token.fontWeight.value,
fontStretch: token.fontStretch.value,
letterSpacing: token.letterSpacing.value,
textDecorationStyle: token.textDecoration.value,
paragraphIndent: token.paragraphIndent.value,
}}
>
The quick brown fox jumps over the lazy dog
</div>
</div>
))
}
</div>

## Sizes

Expand All @@ -84,7 +98,7 @@ properties.
return numberA - numberB;
})
.map(([, token], index) => (
<React.Fragment key={index}>
<div key={index} style={{display: 'contents'}}>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React has been removed as a peer dependency of Storbook, so since we only use it here, we can remove it and use the display: contents to have HTML Elements that don't interfere with the CSS Grid

<div
style={{
width: token.value,
Expand All @@ -94,7 +108,7 @@ properties.
/>
<span>{token.value}</span>
<strong>{token.name}</strong>
</React.Fragment>
</div>
))}
</div>

Expand All @@ -109,7 +123,7 @@ properties.
}}
>
{Object.entries(tokens.effect).map(([name, token], index) => (
<React.Fragment key={index}>
<div key={index} style={{display: 'contents'}}>
<div
style={{
boxShadow: token.value,
Expand All @@ -120,7 +134,7 @@ properties.
}}
/>
<strong>{token.name}</strong>
</React.Fragment>
</div>
))}
</div>

Expand All @@ -135,7 +149,7 @@ properties.
}}
>
{Object.entries(tokens.radius).map(([, token], index) => (
<React.Fragment key={index}>
<div key={index} style={{display: 'contents'}}>
<div
style={{
border: `var(--size-0-25) solid var(--color-brand-brand-100)`,
Expand All @@ -146,6 +160,6 @@ properties.
/>
<span>{token.value}</span>
<strong>{token.name}</strong>
</React.Fragment>
</div>
))}
</div>