Margarita is the UI Library from Holaluz.
Check out component examples.
WARNING: While Margarita is open source, its purpose is to improve code quality, consistency, and cross-team collaboration at Holaluz. Thus, it’s likely that we will introduce breaking API changes more often than usual.
- Built on top of @vue/cli.
- Uses Storybook to develop, showcase, and test each component.
- Unit testing based on Jest and Vue Testing Library.
The NPM package is available here.
You can install Margarita as a dependency by running the following command in your Vue project:
$ npm install @holaluz/margaritaAnd then, use it as a plugin:
import Vue from 'vue'
import Margarita from '@holaluz/margarita'
Vue.use(Margarita)For performance reasons, it's recommended (but not required) to preconnect to assets.holaluz.com. To do so, add this code in the <head> of your HTML:
<link rel="preconnect" href="https://assets.holaluz.com">First, create a plugin for Margarita:
// plugins/margarita.js
import Vue from 'vue'
import Margarita from '@holaluz/margarita'
import '@holaluz/margarita/dist/margarita.css'
Vue.use(Margarita)Finally, register it on the Nuxt config file, as any other Nuxt plugin:
// nuxt.config.js
export default {
plugins: [
'./plugins/margarita.js',
],
}For performance reasons, it's recommended (but not required) to preconnect to assets.holaluz.com. To do so, add this code in head.link of your nuxt.config:
head: {
link: [
{
rel: 'preconnect',
href: 'https://assets.holaluz.com',
},
]
}Clone the repo and install node dependencies:
$ npm installThen you can run several commands such as
# run storybook locally
$ npm start
# run unit tests
$ npm test
# run unit tests with watch mode enabled
$ npm run test:watchMargarita uses Semantic Release to handle the release pipeline.
Triggering a new release will create the associated Git tag, the GitHub release entry, and publish a new version on npm.
In order to trigger a new version, make sure you add the appropriate prefix and message to the squashed commit. It is based on the Angular Commit Message Conventions. In short:
# Creates a patch release (v1.0.0 -> v1.0.1)
> fix: commit message
# Creates a feature release (v1.0.0 -> v1.1.0)
> feat: commit message
# Creates a breaking release (v1.0.0 -> v2.0.0)
> fix: commit message
>
> BREAKING CHANGE: explain the breaking change # "BREAKING CHANGE:" is what triggers the breaking releaseThere's no need to overcomplicate things here. Keep it simple: fix, feat, and chore (plus BREAKING CHANGE) should be enough for now.
More often than not we'd want to work on a consumer while tweaking Magarita.
The best way to do so is by installing Margarita as a local dependency. Check out the instructions in Local Installation.
Follow the edition guidelines here