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

Move @automattic/components' Storybook to the root Storybook #76007

Merged
merged 13 commits into from
Apr 21, 2023
Merged

Move @automattic/components' Storybook to the root Storybook #76007

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
11becfe
Add a sample story with redux store
okmttdhr Apr 20, 2023
71c711c
Add viewport addon
okmttdhr Apr 19, 2023
a770e49
Add controls addon
okmttdhr Apr 19, 2023
49c5855
Add story from another package
okmttdhr Apr 19, 2023
3a6df83
Exclude .stories files
okmttdhr Apr 19, 2023
6e1f6d8
Make addons devDependencies
okmttdhr Apr 20, 2023
12efc6c
Remove addon-controls
okmttdhr Apr 20, 2023
e4dfae6
Change namespace
okmttdhr Apr 20, 2023
284f0a4
Move @automattic/components Storybook to the root dir
okmttdhr Apr 20, 2023
b5b66da
Change namespace
okmttdhr Apr 20, 2023
015190c
Merge branch 'trunk' into update/storybook-a8c-components
okmttdhr Apr 21, 2023
6346462
packages/@automattic -> packages for the story directory
okmttdhr Apr 21, 2023
722e121
Update existing command
okmttdhr Apr 21, 2023
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 changes: 5 additions & 1 deletion .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ const devConfig = require( '../config/development.json' );
const storybookDefaultConfig = require( '@automattic/calypso-storybook' );

const storybookConfig = storybookDefaultConfig( {
stories: [ '../client/**/*.stories.{ts,tsx}' ],
stories: [
'../client/**/*.stories.{ts,tsx}',
'../packages/design-picker/**/*.stories.{ts,tsx}',
'../packages/components/**/*.stories.{ts,tsx}',
],
} );

const configData = { ...sharedConfig, ...devConfig };
Expand Down
60 changes: 60 additions & 0 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,64 @@ import './index.scss';

export const parameters = {
layout: 'fullscreen',
viewport: {
viewports: {
HUGE: {
name: 'HUGE',
styles: {
width: '1440px',
height: '100%',
},
},
WIDE: {
name: 'WIDE',
styles: {
width: '1280px',
height: '100%',
},
},
XLARGE: {
name: 'XLARGE',
styles: {
width: '1080px',
height: '100%',
},
},
LARGE: {
name: 'LARGE',
styles: {
width: '960px',
height: '100%',
},
},
MEDIUM: {
name: 'MEDIUM',
styles: {
width: '782px',
height: '100%',
},
},
SMALL: {
name: 'SMALL',
styles: {
width: '600px',
height: '100%',
},
},
MOBILE: {
name: 'MOBILE',
styles: {
width: '480px',
height: '100%',
},
},
ZOOMED_IN: {
name: 'ZOOMED_IN',
styles: {
width: '280px',
height: '100%',
},
},
},
},
};
6 changes: 3 additions & 3 deletions ...rative-flow/internals/steps-repository/pattern-assembler/screen-category-list.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const defaultArgs = {
categories: { about: { slug: 'about', title: 'About', description: '' } },
virtual_theme_categories: [],
tags: { pattern: { slug: 'pattern', title: 'Pattern', description: '' } },
pattern_meta: { is_web: true },
pattern_meta: { is_web: true, is_mobile: false },
source_url: 'https://dotcompatterns.wordpress.com/?p=7814',
modified_date: '2022-11-30 09:20:46',
},
Expand All @@ -76,7 +76,7 @@ const defaultArgs = {
},
virtual_theme_categories: [],
tags: { pattern: { slug: 'pattern', title: 'Pattern', description: '' } },
pattern_meta: { is_web: true },
pattern_meta: { is_web: true, is_mobile: false },
source_url: 'https://blockpatterns.mystagingwebsite.com/?p=64',
modified_date: '2023-03-29 07:25:38',
},
Expand Down Expand Up @@ -115,7 +115,7 @@ const defaultArgs = {
},
virtual_theme_categories: [],
tags: { pattern: { slug: 'pattern', title: 'Pattern', description: '' } },
pattern_meta: { is_web: true },
pattern_meta: { is_web: true, is_mobile: false },
source_url: 'https://dotcompatterns.wordpress.com/?p=1593',
modified_date: '2022-10-04 16:38:31',
},
Expand Down
3 changes: 2 additions & 1 deletion packages/calypso-storybook/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
"bugs": "https://github.com/Automattic/wp-calypso/issues",
"devDependencies": {
"@automattic/calypso-eslint-overrides": "workspace:^",
"@automattic/calypso-typescript-config": "workspace:^"
"@automattic/calypso-typescript-config": "workspace:^",
"@storybook/addon-viewport": "^6.4.19"
},
"dependencies": {
"@automattic/calypso-babel-config": "workspace:^",
Expand Down
7 changes: 6 additions & 1 deletion packages/calypso-storybook/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,12 @@ module.exports = function storybookDefaultConfig( {
},

stories: stories && stories.length ? stories : [ '../src/**/*.stories.{js,jsx,ts,tsx}' ],
addons: [ '@storybook/addon-actions', '@storybook/preset-scss' ],
addons: [
'@storybook/addon-actions',
'@storybook/addon-controls',
'@storybook/addon-viewport',
'@storybook/preset-scss',
],
typescript: {
check: false,
reactDocgen: false,
Expand Down
3 changes: 0 additions & 3 deletions packages/components/.storybook/main.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/components/.storybook/preview.js
View file
Open in desktop

This file was deleted.

4 changes: 1 addition & 3 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@
},
"devDependencies": {
"@automattic/calypso-color-schemes": "workspace:^",
"@automattic/calypso-storybook": "workspace:^",
"@automattic/calypso-typescript-config": "workspace:^",
"@storybook/addon-actions": "^6.4.19",
"@storybook/react": "^6.4.18",
Expand All @@ -67,7 +66,6 @@
"scripts": {
"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
"prepack": "yarn run clean && yarn run build",
"storybook": "start-storybook"
Copy link
Member

Choose a reason for hiding this comment

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

Let's keep in mind the READMEs and documentation that we need to update:

https://github.com/Automattic/wp-calypso/blob/trunk/packages/components/README.md#L44

Ideally, we should add a more central section that leads to the central Storybook instance, somewhere in /docs for example in components.md.

Copy link
Member Author

Choose a reason for hiding this comment

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

Thank you for pointing this out, I updated the code about the existing command in this PR. 722e121

And I agree that we must update the document, such as https://github.com/Automattic/wp-calypso/blob/trunk/docs/components.md and https://github.com/Automattic/wp-calypso/blob/trunk/docs/component-libraries.md.

"prepack": "yarn run clean && yarn run build"
}
}
2 changes: 1 addition & 1 deletion packages/components/src/chart-uplot/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { useRef } from 'react';
import UplotChart from '../';

export default { title: 'Chart (uPlot)' };
export default { title: 'packages/@automattic/components/Chart (uPlot)' };
Copy link
Contributor

Choose a reason for hiding this comment

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

Very minor feedback since naming can be easily adjusted whenever: I think packages and @automattic mean about the same thing here. packages/ is the directory in wp-calypso where packages are developed, and @automattic/ is the namespace we use for publishing them to npm. I don't think we need both.

I think I'd prefer sticking with packages and remove @automattic. (this is subjective feedback though, so it's non-blocking!)


const SAMPLE_DATA = [
[
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/jetpack-upsell-card/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import JetpackUpsellCard from '..';

export default { title: 'Jetpack Upsell Card' };
export default { title: 'packages/@automattic/components/Jetpack Upsell Card' };

const upgradeUrls = {
backup: 'https://jetpack.com',
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/loading-placeholder/loading-placeholder.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import { LoadingPlaceholder } from '.';

export default { title: 'LoadingPlaceholder' };
export default { title: 'packages/@automattic/components/LoadingPlaceholder' };

export const Normal = () => <LoadingPlaceholder />;
export const Width = () => <LoadingPlaceholder className={ css( { maxWidth: 300 } ) } />;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/progress-bar/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import ProgressBar from '.';

export default { title: 'ProgressBar' };
export default { title: 'packages/@automattic/components/ProgressBar' };

export const Normal = () => <ProgressBar value={ 33 } />;
export const Colored = () => <ProgressBar color="red" value={ 33 } />;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/ribbon/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Ribbon from '.';

export default { title: 'Ribbon' };
export default { title: 'packages/@automattic/components/Ribbon' };

export const Default = () => {
return <Ribbon>Buy Now!</Ribbon>;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/submenu-popover/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { DropdownMenu, Icon, MenuGroup, MenuItem } from '@wordpress/components';
import { chevronRight } from '@wordpress/icons';
import SubmenuPopover, { useSubmenuPopoverProps } from '.';

export default { title: 'SubmenuPopover' };
export default { title: 'packages/@automattic/components/SubmenuPopover' };

export const Default = () => {
const submenu = useSubmenuPopoverProps< HTMLDivElement >();
Expand Down
38 changes: 38 additions & 0 deletions packages/design-picker/src/components/theme-card/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { Story, Meta } from '@storybook/react';
import { ComponentProps } from 'react';
import ThemeCard from './index';

export default {
title: 'packages/@automattic/design-picker/ThemeCard',
component: ThemeCard,
parameters: {
viewport: {
defaultViewport: 'SMALL',
},
},
} as Meta;

type ThemeCardStory = Story< ComponentProps< typeof ThemeCard > >;
const Template: ThemeCardStory = ( args ) => <ThemeCard { ...args } />;

const Image = () => (
<img
alt="Stewart is a modern blogging theme with a left sidebar. Its default color scheme is a striking combination of orange and light gray, to give your blog a sophisticated appearance from day one."
src="https://i0.wp.com/s2.wp.com/wp-content/themes/pub/stewart/screenshot.png"
></img>
);
const defaultArgs = {
name: 'Stewart',
image: <Image></Image>,
};

export const NotActive: ThemeCardStory = Template.bind( {} );
NotActive.args = {
...defaultArgs,
};

export const Active: ThemeCardStory = Template.bind( {} );
Active.args = {
...defaultArgs,
isActive: true,
};
2 changes: 1 addition & 1 deletion packages/design-picker/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"types": []
},
"include": [ "src", "src/*.json" ],
"exclude": [ "**/__tests__/*", "**/__mocks__/*" ],
"exclude": [ "**/__tests__/*", "**/__mocks__/*", "**/*.stories.tsx" ],
"references": [
{ "path": "../calypso-config" },
{ "path": "../js-utils" },
Expand Down
Loading