@storykube-pkgs/design-system

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'
   ( il path cambia in base a dove si trova il file di stile )
3. creare un " export default {} " statement che ci permetterà di richiamare props, funzioni e altri valori dichiarati al suo interno fuori dal componennt, in questo caso importeremo tutto nel file Name.stories.js.