@holaluz/margarita
Advanced tools
[](https://img.shields.io/npm/v/@holaluz/margarita.svg) [](https://github.com/holaluz/margarita/workflows/Bu
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.
You can find the docs here
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
.vue Imports in TSTypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
Extensions: Show Built-in Extensions from VSCode's command paletteTypeScript and JavaScript Language Features, right click and select Disable (Workspace)Developer: Reload Window from the command palette.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" />
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 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
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.
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
FAQs
[](https://img.shields.io/npm/v/@holaluz/margarita.svg) [](https://github.com/holaluz/margarita/workflows/Bu
The npm package @holaluz/margarita receives a total of 180 weekly downloads. As such, @holaluz/margarita popularity was classified as not popular.
We found that @holaluz/margarita demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.
Security News
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
Security News
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.