Storykube · Design System

Live: https://main--61cb95497929a8004aee05a2.chromatic.com

The Storykube Design System uses Storybook.
Learn more in Storybook tutorials.

Run

Install all dependencies

npm i

Run in localhost

# Starts Storybook in development mode
npm run storybook

Workflow

• Create new branch that names your task or component
• Write your awesome code
• Commit and push
• Create a pull request to main branch
• Ask for a code review
• Someone else will merge your code or ask for a new submit
• When the pull request is merged into main branch, a new changelog and a new version is just created: please note that the changelog will collect all your commits messages.
  So, always write the commit message as in the most descriptive way possible, please.
• In case your code is merged into the main branch, GitHub actions (here) will be executed in seconds
• Finally, your last change in the Design System is just deployed, built and released on https://www.npmjs.com/package/@storykube-pkgs/design-system

Usage

Install in Vue3

# with npm
npm i @storykube-pkgs/design-system
# with yarn
yarn add @storykube-pkgs/design-system

Here the URL to manage the package.
Please, ask the admin to enable your account.
https://www.npmjs.com/settings/storykube-pkgs/packages

Notes

• Extended version of Storybook Readme.
• Storybook Distribution Setup.
• Component Driven User Interfaces guidelines, here.

STORIES

Le stories sono come delle permutazioni del component principale, ci possono essere diverse stories per ogni componente

Come creare una stories

• accedere alla cartella stories e creare al suo interno i seguenti files: Nome.vue --> questo file definirà il nostro component; Nome.stories.js --> in questo file importeremo il component e andremo a definire le varie stories del component; nome.scss (oppure nome.css) --> questo file darà uno stile al component in generale e alle stories, questo file sarà importato nel component Nome.vue.

( N.B. una best practice emersa nella documentazione è quella di nominare i file nello stesso modo, il component e il file stories in PascalCase il file css in camelCase ).

• nel component Nome.vue, aprire il tag <template></template> e definire al suo interno la struttura html del component; subito dopo aprire il tag <script></script>.
• cosa fare nel tag <script/> del component:

1. importare le proprietà reactive e computed da vue: import { reactive, computed } from 'vue';
2. importare il foglio di stile: import './name.scss' oppure import './name.css'