VUE Ensemble Components (UI Kit development)

Components list and documentation (Vue story) about ENSEMBLE components. UI Kit helper for designers and developers.

Installation

yarn install:all

UIKit Development architecture :

components/
├─ BaseComponent/
│ ├─ __test__
│ │ ├─ BaseComponent.spec.ts
│ ├─ BaseComponent.vue
├─ ensemble.ts <sub>auto-generated</sub>
doc/
├─ src/
│ ├─ assets/
│ ├─ components/
│ │ ├─ BaseComponent.story.vue
preview/
│ ├─ App.vue
tailwind.config.cjs

Create a new component

1. Create a file in components/YourComponent.vue
2. Important : create a tag and import @tailwind in your component, like this :

3. Create its associative test (if needed) in his directory like: __test__/YourComponent.spec.ts
4. If you want to extends tailwind configuration, edit the tailwind.config.cfg file at root directory.

Preview a component (developer sandbox):

To launch the preview :

yarn preview

1. Import easily your component in /preview/App.vue :
   • import { YourComponent } from '@ensemble'
2. Add your component to HTML template and edit/test/play with it.

Create a new story

Launch story preview :

yarn story:dev

1. Create a file in /doc/src/components/YourComponent.story.vue
2. import your component easily :
   • import { YourComponent } from '@ensemble'
3. import tailwind in your story:
   • import '@tailwind'
4. Create your story (refer to Story Vue documentation to create your story (Histoire VueJS) or existing project component, it's really easy.)

Tips: If you edit your component Tailwind class, you must shutdown / restart story:dev to update it.

Deploy on Heroku

yarn heroku:deploy

NPM compilation

Compilation of components for NPM package lc-ensemble

yarn build

(Refer/don't touch to /vite.config.ts in top directory, it's about npm package compilation)

Auto-generate ensemble.ts

auto-generate.sh file is automatically called for each commands and each environments. It's role is to clean and rebuild ensemble.ts components import list without manual process.