What Is Storybook ?

https://www.youtube.com/watch?v=p-LFh5Y89eM&t=3s

reference : https://storybook.js.org/

How To Run Storybook

npm run storybook / yarn storybook

How To Create Stories

you have to create file inside /stories folder with format yourComponentName.stories.js ext: HhButton.stories.js

1. Define Component Stories. this is an example stories with button components

import HhButton from "../components/HhButton.vue";
//  your components that will be used to create stories
export default {
  title: "Components/HhButton",
  /// title will appear on the browser tab
  component: HhButton,
  argTypes: {},
};

const Template = (args) => ({
  // Components used in your story `template` are defined in the `components` object
  components: { HhButton },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return {
      args,
    };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: '<HhButton v-bind="args" />',
});

2. Adding Args

“Args” are Storybook’s mechanism for defining those arguments in a single JavaScript object. Args can be used to dynamically change props, slots, styles, inputs. There are two ways to define arguments with story based and component based.

For example we want to add outlined button props with boolean value :

• Story Args

export const Outlined = Template.bind({});
Outlined.args = {
  outlined: true,
};

• Component Args

export const Outlined = () => ({
  components: { HhButton },
  template: "<HhButton outlined > Outlined  </HhButton>",
  //you can add props or slot in template
});

• More on args : https://storybook.js.org/docs/vue/writing-stories/args