All Projects → mattrothenberg → Vue Storybook

mattrothenberg / Vue Storybook

Custom <story> blocks for Vue single file components

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Storybook

pattern-library
AXA CH UI component library. Please share, comment, create issues and work with us!
Stars: ✭ 103 (-29.93%)
Mutual labels:  styleguide, storybook
Backpack Ui
All the tools you need to build the Lonely Planet UI experience.
Stars: ✭ 216 (+46.94%)
Mutual labels:  styleguide, storybook
Story2sketch
Convert Storybook into Sketch symbols 💎
Stars: ✭ 391 (+165.99%)
Mutual labels:  styleguide, storybook
Storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Stars: ✭ 67,445 (+45780.95%)
Mutual labels:  styleguide, storybook
Quantum
The default pack of components and layout principles that dictates Catho Frontend applications.
Stars: ✭ 39 (-73.47%)
Mutual labels:  styleguide, storybook
Storybook Addon
Develop themable components with Emotion/Styled Components/Material-UI with help of Storybook & React Theming
Stars: ✭ 122 (-17.01%)
Mutual labels:  storybook
React Storybook Addon Props Combinations
Given possible values for each prop, renders your component with all combinations of prop values.
Stars: ✭ 130 (-11.56%)
Mutual labels:  storybook
Android Kotlin Style Guide
Kotlin style guide of FRESH LIVE since April, 2015.
Stars: ✭ 121 (-17.69%)
Mutual labels:  styleguide
Buffer Components
Buffer's shared collection of React UI components 🤜🤛
Stars: ✭ 120 (-18.37%)
Mutual labels:  storybook
Typescript With Electron React Kit
Don't just start your Electron app... TWERKit.
Stars: ✭ 143 (-2.72%)
Mutual labels:  storybook
Styleguide
The VTEX Design System and React component library.
Stars: ✭ 138 (-6.12%)
Mutual labels:  styleguide
Mhy
🧩 A zero-config, out-of-the-box, multi-purpose toolbox and development environment
Stars: ✭ 128 (-12.93%)
Mutual labels:  storybook
Reactivetradercloud
Real-time FX trading showcase by Adaptive.
Stars: ✭ 1,664 (+1031.97%)
Mutual labels:  storybook
State Of The Art Shitcode
💩State-of-the-art shitcode principles your project should follow to call it a proper shitcode
Stars: ✭ 2,207 (+1401.36%)
Mutual labels:  styleguide
React95
A React components library with Win95 UI
Stars: ✭ 1,779 (+1110.2%)
Mutual labels:  storybook
Guides
Набор гайдов, которые использует команда разработки BestDoctor
Stars: ✭ 139 (-5.44%)
Mutual labels:  styleguide
Mdx Embed
Embed 3rd party media content in MDX - no import required 🧽
Stars: ✭ 119 (-19.05%)
Mutual labels:  storybook
Toolkit
Sky's CSS Toolkit
Stars: ✭ 126 (-14.29%)
Mutual labels:  styleguide
Nitpick
Enforce the same settings across multiple language-independent projects
Stars: ✭ 134 (-8.84%)
Mutual labels:  styleguide
Style Dictionary
A build system for creating cross-platform styles.
Stars: ✭ 2,097 (+1326.53%)
Mutual labels:  styleguide

vue-storybook

Custom <story> blocks for Vue single file components that work out of the box with Vue CLI 3 and vue-cli-plugin-storybook.

npm version

yarn add vue-storybook
const { storyLoader, registerStories } = require("vue-storybook");

What is this?

A Webpack loader + helper script that allows you to embellish your pre-existing Vue single file components (SFC) with a custom <story> block that's automatically translated into a Storybook-flavored story.

Hello World Example

Repo: https://github.com/mattrothenberg/vue-storybook-example-project

<story name="Disabled Button">
  <my-button :disabled="true">Can't touch this</my-button>
</story>

turns into:

screen shot 2018-03-04 at 10 43 54 am

How does it work?

Given an existing Vue CLI + vue-cli-plugin-storybook project, modify your project's vue.config.js thusly.

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.symlinks(false);
  },
  configureWebpack: config => {
    config.module.rules.push({
      resourceQuery: /blockType=story/,
      loader: "vue-storybook"
    });
  }
};

Add a custom <story> block to your single file component. The following Storybook plugins/APIs are supported:

  • Actions
  • Story Options
  • Notes
  • Knobs

It is also possible to pass options for other addons using the parameters attribute.

You can optionally group components by specifiying a group attribute.

<story
  options="{
    panelPosition: 'right'
  }"
  name="with knobs"
  group="MyButton"
  notes="### this is the coolest story ever"
  knobs="{
    initialText: {
      default: text('Initial Text', 'default value goes here')
    },
    isDisabled: {
      default: boolean('Is Disabled?', false)
    }
  }"
  parameters="{
    foo: { ... }
  }"
>
  <my-button :disabled="isDisabled" @click="action('show me the money', isDisabled)">{{initialText}}</my-button>
</story>

Then, in your main index.stories.js (or wherever your write your stories), leverage our helper script to start adding stories. NB: the signature of registerStories has changed significantly.

registerStories(req, filename, storiesOf, config);

config is now an object with the following keys,

{
  knobs: {
    // put the knobs you plan on using
    // (things like `text` or `select`)
    // in this object
  },
  decorators: [
    // an array of decorator functions
  ],
  methods: {
    action // where action is the exported member from `addon-actions`
  }
}
// Import Storybook + all 'yr plugins!
import { storiesOf } from "@storybook/vue";
import { action } from "@storybook/addon-actions";
import { withNotes } from "@storybook/addon-notes";
import { withKnobs, text, boolean } from "@storybook/addon-knobs/vue";

// Import our helper
import { registerStories } from "vue-storybook";

// Require the Vue SFC with <story> blocks inside
const req = require.context("./", true, /\.vue$/);

// Programatically register these stories
function loadStories() {
  req.keys().forEach(filename => {
    let config = {
      knobs: {
        text,
        boolean
      },
      decorators: [
        withKnobs,
        function(context, story) {
          return {
            template: `
              <div><story /></div>`
          };
        }
      ],
      methods: {
        action
      }
    };

    registerStories(req, filename, storiesOf, config);
  });
}

// Let's go!
configure(loadStories, module)

Roadmap

  • [x] Actions
  • [x] Knobs
  • [x] Notes
  • [ ] Info
  • [ ] Readme
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].