Skip to content
This repository has been archived by the owner on Nov 26, 2024. It is now read-only.

chore: upgrading storybook to version 8 #674

Merged
merged 3 commits into from
Apr 29, 2024
+3,131 −4,877
Merged

chore: upgrading storybook to version 8 #674

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3162cce
chore: upgrading storybook to version 8
georgewrmarshall Apr 26, 2024
39cb494
chore: yarn dedupe
georgewrmarshall Apr 26, 2024
c35a44b
chore: removing comments from shadow stories
georgewrmarshall Apr 26, 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
15 changes: 7 additions & 8 deletions .depcheckrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,15 @@
"@yarnpkg/types",
"prettier-plugin-packagejson",
"ts-node",
"@storybook/addon-actions",
"@storybook/react-webpack5",
"babel-loader",
"dependency-tree",
"eslint-plugin-node",
"sass",
"webpack",
Comment on lines -10 to -16
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Removing unused dependencies from dep check

"@yarnpkg/core",
"@yarnpkg/cli",
"clipanion",
"@yarnpkg/fslib"
"@yarnpkg/fslib",
"@chromatic-com/storybook",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-links",
"@storybook/blocks",
"@storybook/test"
Comment on lines +13 to +19
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Adding new dependencies to depcheck file otherwise we get a linting error this is a known issue with the module template set up

]
}
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,5 @@ node_modules/

# Storybook build folder
storybook-static

*storybook.log
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Part of storybook 8. It now provides error logs

17 changes: 0 additions & 17 deletions .storybook/main.js
View file
Open in desktop

This file was deleted.

36 changes: 36 additions & 0 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import remarkGfm from 'remark-gfm';
import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
stories: [
// Add MDX only stories here to avoid duplication
'../docs/Introduction.mdx',
'../docs/IntroductionColor.mdx',
// All other stories here
'../**/*.stories.@(js|jsx|mjs|ts|tsx)',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions',
{
name: '@storybook/addon-docs',
options: {
mdxPluginOptions: {
mdxCompileOptions: {
remarkPlugins: [remarkGfm],
},
},
},
},
],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: true,
},
};
export default config;
19 changes: 11 additions & 8 deletions .storybook/preview.js → .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import type { Preview } from '@storybook/react';

import '../docs/fonts/fonts.scss';
import '../src/css/design-tokens.css';

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
options: {
storySort: {
order: [
'Getting Started',
Expand All @@ -22,3 +23,5 @@ export const parameters = {
},
},
};

export default preview;
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Migrating to typescript

48 changes: 0 additions & 48 deletions PULL_REQUEST_TEMPLATE.md
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions docs/Introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { Meta, Markdown } from '@storybook/blocks';

import README from '../README.md?raw';

<Meta title="Getting Started/Introduction" />

<Markdown>{README}</Markdown>
Copy link
Collaborator Author

@georgewrmarshall georgewrmarshall Apr 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Removed .stories per new storybook v8 standards

7 changes: 0 additions & 7 deletions docs/Introduction.stories.mdx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion docs/IntroductionColor.stories.mdx → docs/IntroductionColor.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meta } from '@storybook/addon-docs';
import { Meta } from '@storybook/blocks';
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Replacing deprecated addon-docs


import designTokenDiagramImage from './images/design.token.graphic.svg';
import { lightTheme } from '../src/index.ts';
Expand Down
4 changes: 1 addition & 3 deletions docs/Shadows.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { Meta, Canvas, Story } from '@storybook/blocks';
import * as ShadowStories from './Shadows.stories';

<Meta title="Design Tokens/Shadows" />

Comment on lines -4 to -5
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Not required as this is used as the docs page for shadows

# Shadows

Shadows in design are used to create depth and hierarchy. They can be used to differentiate between different elements, and to highlight interactive elements.
Expand Down
44 changes: 25 additions & 19 deletions docs/Shadows.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,31 @@
// Import React and necessary Storybook types
import React from 'react';
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Updating shadow stories to CSF3 format

import { lightTheme } from '../src/js';
import type { Meta, StoryObj } from '@storybook/react';
import { Text } from './components';
import README from './Shadows.mdx';

// Type definitions for your component props
interface ShadowSwatchProps {
children: any;
style?: object;
children: React.ReactNode;
style?: React.CSSProperties;
size?: 'xs' | 'sm' | 'md' | 'lg';
color?: 'default' | 'primary' | 'error';
}

const ShadowSwatch = ({
const ShadowSwatch: React.FC<ShadowSwatchProps> = ({
children,
style,
size = 'xs',
color = 'default',
}: ShadowSwatchProps) => (
}) => (
<div
style={{
height: 100,
backgroundColor: 'var(--color-background-default)',
boxShadow:
color === 'default'
? `var(--shadow-size-${size}) var(--color-shadow-${color}`
: `var(--shadow-size-${size}) var(--color-${color}-shadow`,
? `var(--shadow-size-${size}) var(--color-shadow-default)`
: `var(--shadow-size-${size}) var(--color-${color}-shadow)`,
borderRadius: '4px',
display: 'grid',
alignContent: 'center',
Expand All @@ -36,7 +38,8 @@ const ShadowSwatch = ({
</div>
);

export default {
// Meta configuration for the story
const meta: Meta<typeof ShadowSwatch> = {
title: 'Shadows/Shadows',
component: ShadowSwatch,
parameters: {
Expand All @@ -46,19 +49,26 @@ export default {
},
argTypes: {
size: {
control: 'select',
options: Object.keys(lightTheme.shadows.size),
control: { type: 'select' },
options: ['xs', 'sm', 'md', 'lg'],
},
color: {
control: 'select',
control: { type: 'select' },
options: ['default', 'primary', 'error'],
},
},
};

export const DefaultStory = {
export default meta;

// Story definitions using the StoryObj type
export const DefaultStory: StoryObj<typeof ShadowSwatch> = {
name: 'Default',
render: (args) => (
args: {
color: 'default',
size: 'xs',
},
render: ({ args }) => (
<div
style={{
display: 'grid',
Expand All @@ -73,13 +83,9 @@ export const DefaultStory = {
</ShadowSwatch>
</div>
),
args: {
color: 'default',
size: 'xs',
},
};

export const Size = {
export const Size: StoryObj<typeof ShadowSwatch> = {
render: (args) => (
<div
style={{
Expand Down Expand Up @@ -116,7 +122,7 @@ export const Size = {
},
};

export const Color = {
export const Color: StoryObj<typeof ShadowSwatch> = {
render: (args) => (
<div
style={{
Expand Down
21 changes: 7 additions & 14 deletions docs/Typography.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Meta, Canvas, Story } from '@storybook/addon-docs';
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Updating MDX to reflect v8 conventions

import { Meta, Canvas, Story } from '@storybook/blocks';
import * as TypographyStories from './Typography.stories';

<Meta title="Typography / Introduction" />
<Meta of={TypographyStories} />

# Typography

Expand All @@ -10,9 +11,7 @@ Good typography improves readability, legibility and prioritization of informati

The main font family used in MetaMask products is **Euclid Circular B**

<Canvas>
<Story id="typography-typography--font-family" />
</Canvas>
<Canvas of={TypographyStories.FontFamily} />

| Font Family | JS | CSS |
| --------------------- | -------------------- | -------------------------------------- |
Expand All @@ -28,9 +27,7 @@ For screens sizes `767px >` or smaller, use the small screen typography scale

**Key:** S: small screen L: large screen | name | font-weight(regular if omitted) | font-size/line-height | rems

<Canvas>
<Story id="typography-typography--small-screen" />
</Canvas>
<Canvas of={TypographyStories.SmallScreen} />

| Variation | JS | CSS |
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand All @@ -57,9 +54,7 @@ For screens sizes `768px <` or larger, use the large screen typography scale

**Key:** S: small screen L: large screen | name | font-weight (regular if omitted)| font-size/line-height | rems

<Canvas>
<Story id="typography-typography--large-screen" />
</Canvas>
<Canvas of={TypographyStories.LargeScreen} />

| Variation | JS | CSS |
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand All @@ -86,9 +81,7 @@ For screens sizes `768px <` or larger, use the large screen typography scale

There are three available font weights: regular`400`, medium`700` and bold`900`

<Canvas>
<Story id="typography-typography--font-weight" />
</Canvas>
<Canvas of={TypographyStories.FontWeight} />

| Font Weight | JS | CSS |
| --------------------------------------------- | -------------------- | ---------------------------- |
Expand Down
Loading