EDUC components library

Vite + Vue + Typescript

This is a Vite + Vue + Typescript project to foster a library of components that can be imported throughout all EDUC vue.js projects.

Install

To install the project you simply need to run:

npm ci

Storybook

The project integrates Storybook in order to help with the developments and usage of the library.

To run Storybook just run the following command:

npm run storybook

Structure

The components are stored under src/components, there are sorted into two different directories, atoms and molecules. Atoms represent very basic building blocs such as a button, an icon, an input or a label. Molecules are low complexity compositions of atoms, for example a button with an icon or an input with a label. Atoms and molecules are very reusable. Later on and if need be we'll add organisms, they are more complex and make use of molecules like a filter component containing 3 filters for example. More information can be found here => Atomic design methodology.

Each component has a related story <COMPONENT_NAME>.stories.ts to be shown in the Storybook documentation. A documentation on how to write stories can be found here => Writing stories for Storybook.

Publish to NPM

To be completed ... An EDUC NPM account must be created. For now, if you need to make changes, you can create a dev account for yourself and go to the package.json file and change the following lines :

{
  "name": "@theolevisage/vite-components-lib",
  ...
}  

The part between the @ and the / has to be replaced with your NPM account name. You also have to change it in the imports of the front end project (package.json and all the components and CSS imports).

First the project needs to be built with your modifications. So run:

npm run build

Then to publish your changes you simply need to do:

npm login
npm publish

You need to change the version every time you publish or you'll get an error.

Import in another project

To import the components library to another Vue3/Nuxt project you will need to install the lib.

npm i --save @theolevisage/vite-components-lib

Then you'll need to import the CSS and component to your file.

import {Button} from "@theolevisage/vite-components-lib";
import "@theolevisage/vite-components-lib/dist/style.css";