@storykube-pkgs/design-system v0.1.75
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'
oppureimport './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.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago