New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@holaluz/margarita

Package Overview
Dependencies
Maintainers
0
Versions
278
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@holaluz/margarita

[![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

25.0.11
Source
npm
Version published
Maintainers
0
Created
Source

npm deploy

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

Docs

You can find the docs here

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript 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:

  • Disable the built-in TypeScript Extension
    • Run Extensions: Show Built-in Extensions from VSCode's command palette
    • Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  • Reload the VSCode window by running Developer: Reload Window from the command palette.

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

FAQs

Package last updated on 23 Oct 2024

Did you know?

Socket

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.

Install

Related posts