apiida vue-components

https://apiida.com/

A Vue 3 component library.

When you are starting a new prototype you want to be able to develop features fast. We created this component library as a way for us to build products quickly without having to deal with complicated packages and a huge bundle sizes.

This library is built, maintained, tested and documented with Storybook.

Merge conflicts / version conflicts

The branches "master" and "fallback" are published on npm. Npm always takes the highest version number, the branch doesn't matter. The "master" should always contain the highest version (see examples below). If there are problems with the versions during parallel development:

1. In case of a merge conflict you have to check if there are breaking changes in the other frontends. If so, the merge must be aborted and the fallback must be used.

2. There a new version number is set.

3. With this new version number you can continue to work in the other frontends.

4. Set the version number in the frontend:

   npm install @apiida/vue-components@3.23.4
   

5. Discuss with the team and merge the version number.

   // local version of vue-components
   npm list @apiida/vue-components
   
   // Highest verion in npm (online)
   npm view @apiida/vue-components
   

Usage

You can import the available components like so.

import { Button } from '@apiida/vue-components'

Links

https://storybook.js.org/docs/vue/get-started/introduction

Contribute

Guideline

Each component should have at least one story and one test.
The GitHub action takes over the automatic deployment of the library to npm.
However, the version number must be changed for this.

Version

The version is made up as follows.

BreakingChange.CreateOrUpdateComponent.BugFix (1.2.598)

How to contribute manual

Pull the Projekt

git pull https://github.com/apiida/vue-components

Start Storybook

start-storybook -p 6006

Create some cool components, stories and tests!

Components

Styles

Because VITE bundles all css files when building the library in a style.css and you may not want to have all in your project.
You can also pack your styles in a separate file (css).
This must then be included in the Storie and in the project as well.
See BaseDateInput.css