Git Product home page Git Product logo

storybook-story-args-addon's Introduction

npm version GitHub version

Storybook ng-source Addon

Show your args evaluated on template or splitted into code/HTML.

Ideal for fast prototyping components and copy-paste based development.

(If you like it, please consider giving it a star so I can keep it updated :D)

Splitted Args (.HTML/.TS) Evaluated Args (.HTML)

Getting Started

Install into your project with npm i storybook-ng-source-addon --save

Add to your main.js, inside addons:

module.exports = {
  ...
  "addons": [
    "storybook-ng-source-addon",
    ...
  ],
  ...
}

How to write stories for it to work

Stories should be written in the following format:

export const Template: Story<ButtonComponent> = (args) => ({
  props: args,
  template: `
    <pm-button
        [label]="label"
        [type]="type"
        [busy]="busy"
        [busyText]="busyText"
        [iconClass]="iconClass"
        [outline]="outline"
        [disabled]="disabled"
    >
        Button Content
    </pm-button>
  `
});

export const defaultArgs = {
  label: '',
  type: 'default',
  busy: false,
  busyText: '',
  iconClass: '',
  iconPosition: 'start',
  outline: false,
  disabled: false,
};

export const DefaultButton = Template.bind({});
DefaultButton.args = {
  ...defaultArgs
};
  • should have only the variable template as multiline string using crasis (REQUIRED);
  • should have variables inside double quotes (REQUIRED)

Then the plugin will do all the work :)

storybook-story-args-addon's People

Contributors

gabriel-gn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

storybook-story-args-addon's Issues

Storysource never loads

I followed the guide on the add-on page, but the story source never loads. Possibly no longer works with the latest version of storybook?

import { SAJIconsModule } from '@snagajob/icons';
import { moduleMetadata, Story, Meta } from '@storybook/angular';
import { SAJButtonModule } from '..';
import { SAJButtonDirective } from './button.directive';

export default {
  title: 'Design System/Button/Stories',
  component: SAJButtonDirective,
  decorators: [
    moduleMetadata({
      imports: [
        SAJButtonModule,
        SAJIconsModule
      ],
    })
  ],
  parameters: {
    previewTabs: {
      'storybook/docs/panel': {
        hidden: true,
      }
    }
  }
} as Meta<SAJButtonDirective>;

const Template: Story<SAJButtonDirective> = (args: SAJButtonDirective) => ({
  props: args,
  template: `
    <button
      sajButton
      [color]="color"
      [style]="style"
      [size]="size"
    >
      Click Me!
    </button>
  `
});

export const Default = Template.bind({});

export const Large = Template.bind({});
Large.args = { size: 'large' }

export const Medium = Template.bind({});
Medium.args = { size: 'medium' }

export const Small = Template.bind({});
Small.args = { size: 'small' }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.