@arcca/arcca-ds v0.21.0

Arcca Design System

Using the arcca-ds package as a dependency in a Nuxt project

In order for the components to function properly, Vue and Vuetify must be installed as dependencies in the target project.

1. Install the package via npm install @arcca/arcca-ds@stable for the production build or npm install @arcca/arcca-ds@beta for the development build
2. In the project, create a file at plugins/design-system with the following code:

import Vue from 'vue';
import DesignSystem from 'arcca-ds';
import '@arcca/arcca-ds/dist/main.min.css';

Vue.use(DesignSystem);

3. Import this plugin in the nuxt.config.js file:

plugins: [
  {
    src: '~/plugins/design-system'
  }
];

The components in the Design System library are registered globally on the Nuxt project, and so they will be available for use without the need to import them.

Run the styleguide

To run the styleguide and access the documentation, make sure that you have a local copy of the repository in your machine:

git clone https://gitlab.com/grupo-arcca/arcca-ds.git
cd arcca-ds

Then run

npm install
npm run styleguide

and open http://localhost:6060 in your browser.

Simultaneous development (for Arcca developers)

While you are developing your application, you may want to adapt the Design System on the fly. To do so without having to rebuid, re-publish and reinstall, you can use the relative-deps package:

1. Make sure you have the Design System repo in your machine and install it with npm install
2. Make sure to have "relative-deps" dependency globally installed (Ex: command "npm installl -g relative-deps")
3. Go to your application repository and run

npx relative-deps add [PATH_TO_DESIGN_SYSTEM_REPO]

4. You can now develop both of them simultaneously. To trigger a reload after a change in the Design System code, run npx relative-deps in your application directory.
5. Make sure that you DO NOT commit any changes in package.json or package-lock.json files.

Publishing the Design System as a package (for Arcca developers)

You should only publish the package when working from the branches specified in the releases property in the package.json:

• The stable tag refers to the latest version of the package that is ready to be used in production
• The beta tag refers to the development branch and is suitable for testing purposes

If you working from either of the referred branches, you can safely publish the package with the command npm run publish:ds.