Design

Shared UI components used across our frontend projects. For more info see docs.

The project requires Node.js and NPM package manager.

⚠ NOTE: In order to download our @oacore packages from Github NPM registry you will need to generate github token with package read permission here.

How to install and setup it?

The installation and setup process is pretty straightforward.

First of all you need to install the package:

npm install @oacore/design

Then you need to import CSS files globally in your entry file:

Via JS:

import '@oacore/design/lib/index.css'

Via CSS:

@import url("~@oacore/design/lib/index.css");

Optionally:

If you want to use custom icons in your project you will need to create config file. The config file needs to export schema specified here. The file has to be named design and the extension needs to follow cosmiconfig rules. We recommend you to use design.config.js.

Run development mode

To develop the library you need to run these commands:

npm install        # to install all dependencies
npm run build      # to complile files and run docs in dev mode

If you want to develop this library simultaneously with other project you can link them as follows:

path_to_design_folder:/# npm link
path_to_project_where_design_is_a_dependency:/# npm link @oacore/design

⚠ You may run into the issue with the multiple react libraries. Therefore the best solution is to use aliases in you build tool:

For webpack you should have something like:

webpack.config.js

{
  ...
  'resolve': {
    'alias': {
      'react': path.join(__dirname, 'node_modules', 'react'),
      'react-dom': path.join(__dirname, 'node_modules', 'react-dom')
  }
  ...
}

Design vendor update on other repositories

Run npm update @oacore/design

Load specific version

On 'package.json' set:

• specific branch

"dependencies": {
   "@oacore/design": "github:oacore/design#BRANCH_NAME,
   }

• local version

"dependencies": {
   "@oacore/design": "file:../path/design",
   }

• latest version

"dependencies": {
    "@oacore/design": "latest",
   }

For CHANGELOG refer here.