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.

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

Addon-actions: Move stories into addon #19082

Merged
merged 8 commits into from
Sep 2, 2022
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
move remaining action stories & cleanup usage of addon-actions everyw…
…here where it serves no further purpose
ndelangen committed Sep 1, 2022
commit 37d518a0e6b8b742265a1fb35b0bb5d48ccd9669
36 changes: 36 additions & 0 deletions code/addons/actions/template/stories/configs.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import globalThis from 'global';

import { actions, configureActions } from '@storybook/addon-actions';

const configs = actions('actionA', 'actionB', 'actionC');

export default {
component: globalThis.Components.Button,
args: {
children: 'Click Me!',
},
parameters: {
chromatic: { disable: true },
},
};

export const ActionA = {
args: { onClick: configs.actionA },
};
export const ActionB = {
args: { onClick: configs.actionB },
};
export const ActionC = {
args: { onClick: configs.actionC },
};

export const ConfigureActions = {
args: { onClick: configs.actionA },
decorators: [
(storyFn: any) => {
configureActions({ depth: 2 });

return storyFn();
},
],
};
17 changes: 17 additions & 0 deletions code/addons/actions/template/stories/parameters.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import globalThis from 'global';

export default {
component: globalThis.Components.Button,
args: {
children: 'Click Me!',
},
parameters: {
chromatic: { disable: true },
},
};

export const Basic = {
parameters: {
handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
},
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable jest/no-standalone-expect */
import React from 'react';
import { action } from '@storybook/addon-actions';
import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
import { CallStates } from '@storybook/instrumenter';
import { styled } from '@storybook/theming';
@@ -48,7 +47,7 @@ export default {
fileName: 'addon-interactions.stories.tsx',
hasException: false,
isPlaying: false,
onScrollToEnd: action('onScrollToEnd'),
onScrollToEnd: () => {},
endRef: null,
// prop for the AddonPanel used as wrapper of Panel
active: true,
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';

import { action } from '@storybook/addon-actions';
import { Button } from '../react-demo';

export default {
@@ -11,10 +10,10 @@ export default {
},
};

export const WithText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
export const WithText = () => <Button>Hello Button</Button>;

export const WithSomeEmoji = () => (
<Button onClick={action('clicked')}>
<Button>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Story, Meta, ArgsTable, Source } from '@storybook/addon-docs';
import { Button } from '../.././angular-demo';
import { action } from '@storybook/addon-actions';

<Meta title="Addons/Docs/SimpleButton" component={Button} />

@@ -21,7 +20,7 @@ import { action } from '@storybook/addon-actions';
{(args) => ({
props: {
text: args.text,
onClick: action('clicked'),
onClick: () => {},
},
})}
</Story>
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { FormsModule } from '@angular/forms';
import { action } from '@storybook/addon-actions';
import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
import { CustomCvaComponent } from './custom-cva.component';

@@ -21,7 +20,7 @@ export default {
export const SimpleInput: StoryFn = () => ({
props: {
ngModel: 'Type anything',
ngModelChange: action('ngModelChange'),
ngModelChange: () => {},
},
});

Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { Button } from '../../angular-demo';

export default {
@@ -15,7 +14,7 @@ export const TemplateStory: StoryFn = () => ({
template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
props: {
text: 'Button with custom styles',
onClick: action('log'),
onClick: () => {},
},
styles: [
`
5 changes: 2 additions & 3 deletions code/examples/cra-kitchen-sink/src/stories/button.stories.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from '../components/react-demo';

export default {
title: 'Button',
component: Button,
};

export const Story1 = () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>;
export const Story1 = () => <Button>Hello Button</Button>;
Story1.storyName = 'with text';

Story1.parameters = {
options: { selectedPanel: 'storybook/actions/panel' },
};

export const Story2 = () => (
<Button onClick={action('clicked')}>
<Button>
<span role="img" aria-label="yolo">
😀 😎 👍 💯
</span>
10 changes: 4 additions & 6 deletions code/examples/cra-kitchen-sink/src/stories/decorators.stories.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import PropTypes from 'prop-types';
import { Button } from '../components/react-demo';

@@ -24,13 +23,12 @@ export default {
};

export const WithArgs = (args) => <Button {...args} />;
WithArgs.args = { onClick: action('clicked', { depth: 1 }), children: 'With args' };
WithArgs.args = { children: 'With args' };

export const Basic = () => <Button onClick={action('clicked', { depth: 1 })}>Basic</Button>;
export const Basic = () => <Button>Basic</Button>;

export const Nested = (args) => (
<Button {...args}>
export const Nested = () => (
<Button>
<Bold>Hello</Bold>
</Button>
);
Nested.args = { onClick: action('clicked', { depth: 1 }) };
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from '../components/react-demo';

export default {
title: 'Some really long story kind description',
};

export const Story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
export const Story1 = () => <Button>Hello Button</Button>;
Story1.storyName = 'with text';
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import Button, { Type } from './Button';

export default {
@@ -9,7 +8,7 @@ export default {

export const SimpleButton = () => {
const x = 0;
return <Button onClick={action('button clicked')}>OK {x}</Button>;
return <Button>OK {x}</Button>;
};

const typeOptions = {
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from './Button';

export default {
title: '1-Button',
component: Button,
};

export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
export const Text = () => <Button>Hello Button</Button>;

export const Emoji = () => (
<Button onClick={action('clicked')}>
<Button>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
18 changes: 0 additions & 18 deletions code/examples/ember-cli/stories/addon-actions.stories.js

This file was deleted.

3 changes: 0 additions & 3 deletions code/examples/ember-cli/stories/welcome-banner.stories.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@storybook/addon-actions';

export default {
title: 'welcome-banner',
@@ -23,7 +22,6 @@ export const Basic = (args) => ({
subTitleColor=subTitleColor
title=title
subtitle=subtitle
click=(action onClick)
}}
`,
context: args,
@@ -34,5 +32,4 @@ Basic.args = {
subTitleColor: '#B8854F',
title: 'Welcome to storybook',
subtitle: 'This environment is completely editable',
onClick: action('clicked'),
};
85 changes: 0 additions & 85 deletions code/examples/html-kitchen-sink/stories/addon-actions.stories.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Story, Canvas, Meta } from '@storybook/addon-docs';
import { action } from '@storybook/addon-actions';

# Storybook Docs for HTML

@@ -20,7 +19,6 @@ How you like them apples?!
{() => {
const btn = document.createElement('button');
btn.innerHTML = 'Hello Button';
btn.addEventListener('click', action('Click'));
return btn;
}}
</Story>
2 changes: 0 additions & 2 deletions code/examples/html-kitchen-sink/stories/button.stories.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import global from 'global';
import { action } from '@storybook/addon-actions';
import { useEffect } from '@storybook/client-api';

const { document } = global;
@@ -15,7 +14,6 @@ export const Headings = () =>
export const Button = () => {
const btn = document.createElement('button');
btn.innerHTML = 'Hello Button';
btn.addEventListener('click', action('Click'));
return btn;
};

196 changes: 0 additions & 196 deletions code/examples/official-storybook/stories/addon-actions.stories.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@ import {
ColorItem,
Meta,
} from '@storybook/addon-docs';
import { action } from '@storybook/addon-actions';
import styled from 'styled-components';
import { Button } from '../../components/react-demo';
import TsButton from '../../components/TsButton';
@@ -78,22 +77,22 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one

<Canvas>
<Story name="hello story">
<Button onClick={action('clicked')}>hello world</Button>
<Button>hello world</Button>
</Story>
<Story name="goodbye">
<Button onClick={action('clicked')}>goodbye world</Button>
<Button>goodbye world</Button>
</Story>
<Story name="with icons">
<Button onClick={action('clicked')}>🤘🚀💯</Button>
<Button>🤘🚀💯</Button>
</Story>
<Story name="notes" parameters={{ notes: 'story notes' }}>
<Button onClick={action('clicked')}>goodbye world</Button>
<Button>goodbye world</Button>
</Story>
<Story name="plaintext">Plain text</Story>
</Canvas>

<Story name="solo story">
<Button onClick={action('clicked')}>solo</Button>
<Button>solo</Button>
</Story>

<Story name="iframe story" inline={false} height="100px">
@@ -120,7 +119,7 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
<Source name="hello story" />

<Canvas>
<Button onClick={action('clicked')}>view source in Canvas</Button>
<Button>view source in Canvas</Button>
</Canvas>

## Configurable height
@@ -192,7 +191,7 @@ Fixed layout requires custom `height` since it can't be determined.

<Canvas withSource="none">
<Story name="no source Canvas">
<Button onClick={action('clicked')}>solo</Button>
<Button>solo</Button>
</Story>
</Canvas>

Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import Button, { Type } from '../../components/TsButton';

export default {
@@ -14,7 +13,7 @@ type Story = () => any;

export const SimpleButton: Story = () => {
const x = 0;
return <Button onClick={action('button clicked')}>OK {x}</Button>;
return <Button>OK {x}</Button>;
};

const typeOptions = {
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import React from 'react';
import { hrefTo } from '@storybook/addon-links';
import { action } from '@storybook/addon-actions';

export default {
title: 'Addons/Links/Href',
};

export const Log = () => {
hrefTo('Addons/Links/Href', 'log').then((href) => action('URL of this story')(href));
hrefTo('Addons/Links/Href', 'log');

return <span>See action logger</span>;
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable import/first,import/no-duplicates */
import React from 'react';
import { action } from '@storybook/addon-actions';

export default {
title: 'Core/Interleaved exports',
@@ -9,8 +8,8 @@ export default {

import { Welcome } from '../../components/react-demo';

export const First = () => <Welcome showApp={action('show')} />;
export const First = () => <Welcome showApp={() => {}} />;

import { Button } from '../../components/react-demo';

export const Second = () => <Button onClick={action('click')}>Second</Button>;
export const Second = () => <Button onClick={() => {}}>Second</Button>;
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from '../../components/react-demo';

export default {
@@ -16,11 +15,11 @@ export default {
},
};

export const WithText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
export const WithText = () => <Button>Hello Button</Button>;
WithText.storyName = 'with text';

export const WithSomeEmoji = () => (
<Button onClick={action('clicked')}>
<Button>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Button } from '../../components/react-demo';

@@ -12,13 +11,13 @@ import { Button } from '../../components/react-demo';
## Hello

<Story name="with text">
<Button onClick={action('clicked')}>Hello Button</Button>
<Button>Hello Button</Button>
</Story>

## Emoji

<Story name="with some emoji">
<Button onClick={action('clicked')}>
<Button>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import { action } from '@storybook/addon-actions';
import Button from '../Button';

export default {
title: 'Button',
component: Button,
};

export const WithText = () => <Button onclick={action('clicked')}>Hello Button</Button>;
export const WithText = () => <Button>Hello Button</Button>;

WithText.storyName = 'with text';

export const WithSomeEmoji = () => (
<Button onclick={action('clicked')}>
<Button>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { setContext } from 'svelte';
import { action } from '@storybook/addon-actions';
import Context from '../components/Context.svelte';
import BorderDecorator from './BorderDecorator.svelte';

@@ -14,7 +13,7 @@ export default {

export const Decorators = () => ({
on: {
click: action('I am logging in the actions tab'),
click: () => {},
},
});
Decorators.decorators = [

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import Vuex from 'vuex';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import MyButton from './Button.vue';
@@ -57,48 +55,6 @@ export const JSX = () => ({
},
});

export const VuexActions = () => ({
components: { MyButton },
template: '<my-button @click="log">with vuex: {{ $store.state.count }}</my-button>',
store: new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) {
state.count += 1; // eslint-disable-line
action('vuex state')(state);
},
},
}),
methods: {
log() {
this.$store.commit('increment');
},
},
});

VuexActions.storyName = 'vuex + actions';

export const WhateverYouWant = () => ({
components: { MyButton },
template: '<my-button @click="log">with awesomeness: {{ $store.state.count }}</my-button>',
store: new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) {
state.count += 1; // eslint-disable-line
action('vuex state')(state);
},
},
}),
methods: {
log() {
this.$store.commit('increment');
},
},
});

WhateverYouWant.storyName = 'whatever you want';

export const PreRegisteredComponent = () => ({
/* By pre-registering component in preview.js,
* the need to register all components with each story is removed.