@jdizm/vue-storybook

v2.5.0

Published

3 years ago

Live demo:

Downloads

0High
0Medium
0Low

jdizm

vue ui

VUE STORYBOOK LIBRARY

A UI library built with Storybook for Vue 2.

Live demo:

https://vue-storybook-library.netlify.app

Install library as a package

# with npm
npm install @jdizm/vue-storybook

# with yarn
yarn install @jdizm/vue-storybook

All exported components are prefixed with a V eg VButton

In your apps main.js / main.ts

# import the base styles
import "@jdizm/vue-storybook/dist/index.css";

# import the components
import { VButton } from "@jdizm/vue-storybook";

# each can be registered via Vue.component()
Vue.component("VButton", VButton);

For Development

For development and to modify this storybook library clone this project and:

# run locally
npm run storybook

# run a local demo App.vue
npm run serve

see the storybook docs for more info.

Releasing a new version

npm run build
update version in package.json
npm publish

Setup & Configure

The .storybook folder contains all the config files for setting up storybook.

Configure any addons in the .storybook/main.js file
External scripts, fonts and stylesheets are loaded in .storybook/preview-head.html
Imports the sass/scss theme and variables in .storybook/preview.js via import '../theme/main.scss'

Assets

Static assets and resources are located in the stories/assets folder

Theme

All the base styling is configured in the theme folder

There are mixins to create custom class names for spacing values according to the theme variables eg m--1 in addition to colorScheme css variabls

Each component has it's own scoped scss file that's directly imported.

sass mixins and variables
utility class names for spacing
css variables for colorScheme

You need to specify @use "@/theme/helpers" as *; at the top of the .scss file.

This will give you access to the mixins and vars via @forward. They are made available as a whole package on the global namespace.

/theme
  main.scss
  /base
    _colorScheme
    _reset
    _theme
    _typography
  /helpers
    _index
    _vars
    _mixins
    _darkTheme
    _lightTheme

Dark mode and Color Scheme

Dark and Light mode css variables are added to :root using mixins.

The default color scheme is light mode but will prefer the system ui settings using

@media (prefers-color-scheme: dark) {
  @include darkTheme;
}

The color scheme is applied via a light or dark class added to the root html so you can overwrite the default preference

<html lang="en" class="dark">

Build Storybook as a static web application

https://storybook.js.org/docs/vue/workflows/publish-storybook

build storybook: npm run build-storybook serve locally: npx http-server storybook-static

Publish Storybook online

https://storybook.js.org/docs/vue/workflows/publish-storybook#publish-storybook-online

netlify is configured to deploy the storybook static build directly from main branch.

build folder: /storybook-static production url: https://vue-storybook-library.netlify.app/

Build as a library

This will package the Vue project as a library to be imported in another application.

npm run build

It will need to be published to npm, imported locally or via a git branch.

Import into project

Clone this git into the project root in /storybook folder

Then add the theme files to the css settings in your project build config..

Vue - vue.config.js Nuxt - nuxt.config.js

Import each component from the folder as needed, instead of from /components, import them directly from /storybook.

For Vue - add the reference to scss files in vue.config.js.

css: [
    // import storybook theme
    './storybook/theme/main.scss'
  ],

For Nuxt - add the reference to scss files in nuxt.config.js.

css: [
    // import storybook theme
    './storybook/theme/main.scss'
  ],

Using the components

Import the components directly from the /storybook folder.

import Toast from '@/storybook/stories/molecules/Toast.vue'