@jdizm/vue-storybook v2.5.0
VUE STORYBOOK LIBRARY
A UI library built with Storybook for Vue 2.
Live demo:
https://vue-storybook-library.netlify.appInstall library as a package
# with npm
npm install @jdizm/vue-storybook
# with yarn
yarn install @jdizm/vue-storybookAll 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 servesee the storybook docs for more info.
Releasing a new version
npm run build
update version in package.json
npm publishSetup & Configure
The .storybook folder contains all the config files for setting up storybook.
- Configure any addons in the
.storybook/main.jsfile - External scripts, fonts and stylesheets are loaded in
.storybook/preview-head.html - Imports the sass/scss theme and variables in
.storybook/preview.jsviaimport '../theme/main.scss'
Assets
- Static assets and resources are located in the
stories/assetsfolder
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
_lightThemeDark 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 buildIt 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'