How to use @storybook/preact - 10 common examples

To help you get started, we’ve selected a few @storybook/preact examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github storybookjs / storybook / lib / cli / generators / PREACT / template-csf / .storybook / config.js View on Github external
import { configure } from '@storybook/preact';

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);
github jchn / preact-spectre / .storybook / config.js View on Github external
import { configure } from '@storybook/preact'

// automatically import all files ending in *.stories.js
const req = require.context('../src', true, /.stories.js$/)
function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)
github storybookjs / storybook / examples / preact-kitchen-sink / .storybook / config.js View on Github external
/** @jsx h */
import { load, addParameters } from '@storybook/preact';

addParameters({
  options: {
    hierarchySeparator: /\/|\./,
    hierarchyRootSeparator: /\|/,
  },
});

// require('../src/stories/index.stories');
load(require.context('../src', true, /\.stories\.js$/), module);
github jchn / preact-spectre / src / components / Avatar / Avatar.stories.js View on Github external
initial="AB"
      alt="an avatar"
      src={faker.internet.avatar()}
    />
  ))
  .add('away', () => (
    
  ))

storiesOf('Components|Avatar/size', module)
  .addDecorator(Centered)
  .add('xs', () => (
    
  ))
  .add('sm', () => (
github SolarLiner / preact-bulma / stories / forms / textarea.tsx View on Github external
Primary: "primary",
  Light: "light",
  Dark: "dark",
  Info: "info",
  Warning: "warning",
  Danger: "danger"
};

const SIZES = {
  Default: null,
  Small: "small",
  Medium: "medium",
  Large: "large"
};

storiesOf("Forms", module)
  .addDecorator(withKnobs)
  .addDecorator(story =&gt; <form> ev.preventDefault()}&gt;{story()}</form>)
  .add("Textarea", () =&gt; (
    
      
        <textarea readonly="{boolean(&quot;Read-only&quot;," disabled="{boolean(&quot;Disabled&quot;," size="{select(&quot;Size&quot;," color="{select(&quot;Color&quot;," placeholder="Lorem ipsum etc.">      &lt;/Control&gt;
    &lt;/Field&gt;</textarea>
github jchn / preact-spectre / src / components / Button / Button.stories.js View on Github external
/** @jsx h */
import { h } from 'preact'
import Centered from '@storybook/addon-centered/preact'
import { storiesOf } from '@storybook/preact'
import Button from './'

storiesOf('Elements|Button', module)
  .addDecorator(Centered)
  .add('Default', () =&gt; <button>default button</button>)
  .add('link', () =&gt; <button>link button</button>)
  .add('loading', () =&gt; <button loading="">loading button</button>)
  .add('active', () =&gt; <button>active button</button>)
  .add('disabled', () =&gt; <button disabled="">disabled button</button>)

storiesOf('Elements|Button/kind', module)
  .addDecorator(Centered)
  .add('primary', () =&gt; <button kind="primary">primary button</button>)
  .add('success', () =&gt; <button kind="success">success button</button>)
  .add('error', () =&gt; <button kind="error">error button</button>)

storiesOf('Elements|Button/shape', module)
  .addDecorator(Centered)
  .add('square', () =&gt; (
    <button kind="primary" shape="square">
      <i class="icon icon-menu">
    </i></button><i class="icon icon-menu">
  ))
  .add('circle', () =&gt; (
    <button kind="primary" shape="circle">
      <i class="icon icon-menu">
    </i></button></i>
github jchn / preact-spectre / src / components / Bar / Bar.stories.js View on Github external
/** @jsx h */
import { h } from 'preact'
import { storiesOf } from '@storybook/preact'
import Centered from '@storybook/addon-centered/preact'
import { withColumn } from '../../../.storybook/withWrapper'
import Bar from './'

storiesOf('Components|Bar', module)
  .addDecorator(withColumn(6))
  .addDecorator(Centered)
  .add('items', () =&gt; (
    
      
        50%
github jchn / preact-spectre / src / components / Popover / Popover.stories.js View on Github external
import Button from '../Button'
import Card from '../Card'

storiesOf('Components|Popover', module)
  .addDecorator(Centered)
  .add('Default', () =&gt; (
    popover}&gt;
      
        card header
        card body
        card footer
      
    
  ))

storiesOf('Components|Popover/position', module)
  .addDecorator(Centered)
  .add('top', () =&gt; (
    top popover}
    &gt;
      
        card header
        card body
        card footer
      
    
  ))
  .add('right', () =&gt; (
github jchn / preact-spectre / src / components / Table / Table.stories.js View on Github external
/** @jsx h */
import { h } from 'preact'
import Centered from '@storybook/addon-centered/preact'
import { withColumn } from '../../../.storybook/withWrapper'
import { storiesOf } from '@storybook/preact'
import Table from './'

storiesOf('Elements|Table', module)
  .addDecorator(withColumn([12, 12, 8, 8, 6]))
  .addDecorator(Centered)
  .add('Default', () =&gt; (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Genre</th>
          <th>Release date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>The Shawshank Redemption</td>
          <td>Crime, Drama</td>
          <td>14 October 1994</td></tr></tbody></table>
github jchn / preact-spectre / src / components / Toast / Toast.stories.js View on Github external
/** @jsx h */
import { h } from 'preact'
import Centered from '@storybook/addon-centered/preact'
import { withColumn } from '../../../.storybook/withWrapper'
import { storiesOf } from '@storybook/preact'
import Toast from './'
import Button from '../Button'

storiesOf('Components|Toast', module)
  .addDecorator(withColumn([12, 6]))
  .addDecorator(Centered)
  .add('Default', () =&gt; (
    
      Default Toast <button class="float-right" clear="">
    
  ))

storiesOf('Components|Toast/kind', module)
  .addDecorator(withColumn([12, 6]))
  .addDecorator(Centered)
  .add('Success', () =&gt; (
    
      Toast success </button><button class="float-right" clear="">
    
  ))</button>

@storybook/preact

Storybook Preact renderer

MIT
Latest version published 3 days ago

Package Health Score

95 / 100
Full package analysis