@holaluz/margarita

v26.4.0

Published

6 days ago

[![npm](https://img.shields.io/npm/v/@holaluz/margarita.svg)](https://img.shields.io/npm/v/@holaluz/margarita.svg) [![deploy](https://github.com/holaluz/margarita/workflows/Build%20and%20Deploy/badge.svg)](https://github.com/holaluz/margarita/workflows/Bu

0High
0Medium
0Low

holaluz_front_end_team

margarita

Margarita

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.

About Margarita

Built on top of @vue/cli.
Uses Storybook to develop, showcase, and test each component.
Unit testing based on Jest and Vue Testing Library.

Installing Margarita in another project

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/margarita

And 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">

Installing in Nuxt

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',
    },
  ]
}

Installing Margarita locally

Clone the repo and install node dependencies:

$ npm install

Then 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:watch

Deployment and versioning

Margarita 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 release

There's no need to overcomplicate things here. Keep it simple: fix, feat, and chore (plus BREAKING CHANGE) should be enough for now.

FAQ

How can I use Margarita as a dependency in a local project?

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.

How can I contribute to documentation?

Follow the edition guidelines here

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme