JBXArtemis

Suite of components of the design system of the Jukebox Agenciamento.

Requirements

• NodeJS ^16.13.0
• Yarn ^1.22.5

Installation

To install the JBXArtemis library, simply use the following command:

yarn install jbxartemis

Usage

The JBXArtemis library can be used in different ways, depending on the configuration of your project:

Importing as an ES module

To use the library as an ES module, you can import it as follows:

// main.js or YourComponent.vue
import 'jbxartemis/dist/style.css';

// YourComponent.vue
import { Component } from 'jbxartemis'

export default {
  components: {
    Component,
  },
}

Requiring as a UMD module

To use the library as a UMD module, you can require it as follows:

const { Component } = require('jbxartemis');

Development

Recommended IDE Setup

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

Style structure

• Create css file to new component in src/assets/components/{component-name}.css
• Import new css file in main.css after last import:

@import './components/{component-name}.css';

Customize configuration

See Vite Configuration Reference.

Project Setup

yarn install

Compile and Hot-Reload for Development

yarn dev

Compile and Minify for Production

yarn build

Run Unit Tests with Vitest

yarn test:unit

Run End-to-End Tests with Cypress

All tests are found in the directory: src/components/__tests__

yarn test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

yarn build
yarn test:e2e

Lint with ESLint

yarn lint

Storybook Local

To run Storybook, use the command npm run storybook.

yarn storybook

To build Storybook for production, use the command npm run build-storybook.

yarn build-storybook

Storybook Web

See JBXArtemis Storybook

References

• VueJS
• Vite
• Vitest
• TailwindCSS
• Storybook