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

Jump to bottom

CLI/Preact: add interactions to cli template #17984

Merged
merged 1 commit into from Apr 17, 2022
Merged

CLI/Preact: add interactions to cli template #17984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions cypress/generated/addon-interactions.spec.ts
View file
Open in desktop
Expand Up @@ -34,4 +34,8 @@ describe('addon-interactions', () => {
onlyOn('vite_react', () => {
it('should have interactions', test);
});

onlyOn('preact', () => {
it('should have interactions', test);
});
});
7 changes: 6 additions & 1 deletion lib/cli/src/frameworks/preact/Header.jsx
View file
Open in desktop
Expand Up @@ -29,7 +29,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
</div>
<div>
{user ? (
<Button size="small" onClick={onLogout} label="Log out" />
<Fragment>
<span className="welcome">
Welcome, <b>{user.name}</b>!
</span>
<Button size="small" onClick={onLogout} label="Log out" />
</Fragment>
) : (
<Fragment>
<Button size="small" onClick={onLogin} label="Log in" />
Expand Down
8 changes: 7 additions & 1 deletion lib/cli/src/frameworks/preact/Header.stories.jsx
View file
Open in desktop
Expand Up @@ -5,6 +5,10 @@ import { Header } from './Header';
export default {
title: 'Example/Header',
component: Header,
parameters: {
// More on Story layout: https://storybook.js.org/docs/preact/configure/story-layout
layout: 'fullscreen',
},
argTypes: {
onLogin: { action: 'onLogin' },
onLogout: { action: 'onLogout' },
Expand All @@ -16,7 +20,9 @@ const Template = (args) => <Header {...args} />;

export const LoggedIn = Template.bind({});
LoggedIn.args = {
user: {},
user: {
name: 'Jane Doe',
},
};

export const LoggedOut = Template.bind({});
Expand Down
125 changes: 62 additions & 63 deletions lib/cli/src/frameworks/preact/Page.jsx
View file
Open in desktop
@@ -1,72 +1,71 @@
/** @jsx h */
import { h } from 'preact';
import PropTypes from 'prop-types';
import { useState } from 'preact/hooks';

import { Header } from './Header';
import './page.css';

export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
<article>
<Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
export const Page = () => {
const [user, setUser] = useState();

<section>
<h2>Pages in Storybook</h2>
<p>
We recommend building UIs with a{' '}
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
<strong>component-driven</strong>
</a>{' '}
process starting with atomic components and ending with pages.
</p>
<p>
Render pages with mock data. This makes it easy to build and review page states without
needing to navigate to them in your app. Here are some handy patterns for managing page data
in Storybook:
</p>
<ul>
<li>
Use a higher-level connected component. Storybook helps you compose such data from the
"args" of child component stories
</li>
<li>
Assemble data in the page component from your services. You can mock these services out
using Storybook.
</li>
</ul>
<p>
Get a guided tutorial on component-driven development at{' '}
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
Storybook tutorials
</a>
. Read more in the{' '}
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
docs
</a>
.
</p>
<div className="tip-wrapper">
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
id="a"
fill="#999"
/>
</g>
</svg>
Viewports addon in the toolbar
</div>
</section>
</article>
);
Page.propTypes = {
user: PropTypes.shape({}),
onLogin: PropTypes.func.isRequired,
onLogout: PropTypes.func.isRequired,
onCreateAccount: PropTypes.func.isRequired,
};
return (
<article>
<Header
user={user}
onLogin={() => setUser({ name: 'Jane Doe' })}
onLogout={() => setUser(undefined)}
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
/>

Page.defaultProps = {
user: null,
<section>
<h2>Pages in Storybook</h2>
<p>
We recommend building UIs with a{' '}
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
<strong>component-driven</strong>
</a>{' '}
process starting with atomic components and ending with pages.
</p>
<p>
Render pages with mock data. This makes it easy to build and review page states without
needing to navigate to them in your app. Here are some handy patterns for managing page
data in Storybook:
</p>
<ul>
<li>
Use a higher-level connected component. Storybook helps you compose such data from the
"args" of child component stories
</li>
<li>
Assemble data in the page component from your services. You can mock these services out
using Storybook.
</li>
</ul>
<p>
Get a guided tutorial on component-driven development at{' '}
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
Storybook tutorials
</a>
. Read more in the{' '}
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
docs
</a>
.
</p>
<div className="tip-wrapper">
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
id="a"
fill="#999"
/>
</g>
</svg>
Viewports addon in the toolbar
</div>
</section>
</article>
);
};
21 changes: 12 additions & 9 deletions lib/cli/src/frameworks/preact/Page.stories.jsx
View file
Open in desktop
@@ -1,23 +1,26 @@
/** @jsx h */
import { h } from 'preact';
import { within, userEvent } from '@storybook/testing-library';

import { Page } from './Page';
import * as HeaderStories from './Header.stories';

export default {
title: 'Example/Page',
component: Page,
parameters: {
// More on Story layout: https://storybook.js.org/docs/preact/configure/story-layout
layout: 'fullscreen',
},
};

const Template = (args) => <Page {...args} />;

export const LoggedIn = Template.bind({});
LoggedIn.args = {
// More on composing args: https://storybook.js.org/docs/preact/writing-stories/args#args-composition
...HeaderStories.LoggedIn.args,
};

export const LoggedOut = Template.bind({});
LoggedOut.args = {
...HeaderStories.LoggedOut.args,

// More on interaction testing: https://storybook.js.org/docs/preact/writing-tests/interaction-testing
export const LoggedIn = Template.bind({});
LoggedIn.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
const loginButton = await canvas.getByRole('button', { name: /Log in/i });
await userEvent.click(loginButton);
};
2 changes: 1 addition & 1 deletion lib/cli/src/generators/baseGenerator.ts
View file
Open in desktop
Expand Up @@ -62,7 +62,7 @@ const builderDependencies = (builder: Builder) => {
const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]);

const hasInteractiveStories = (framework: SupportedFrameworks) =>
['react', 'angular'].includes(framework);
['react', 'angular', 'preact'].includes(framework);

export async function baseGenerator(
packageManager: JsPackageManager,
Expand Down