Mercurio

Shipnow's Design System implemented in React

How to publish to npm

create a npm account, then ask for rights to contribute

  1. npm login 
  2. update the version of the package.json, then commit and push it to master!
  3. npm publish
  4. remenber to update the webapp package.json with the new version of MERCURIO!
  5. done!

Getting Started

Run the following command using npm.

Running the library for development

Run the following command to start Storybook for component display and test:

cd shipnow-mercurio
npm start

Using the library locally

First, you need to link Mercurio to your local node_modules npm repository.

cd shipnow-mercurio
npm link

The command will build the library for distribution with Rollup, copy the resulting folder in the local node_modules folder, and make it available for other local projects.

cd your-project-folder
npm link shipnow-mercurio

You'll need to manually install React JSS:

npm install --save react-jss

React JSS is mandatory for the use of theming. Then, in your app, you can use it like this:

import React from 'react';

import { TextV2, DefaultTheme } from 'shipnow-mercurio';
import { ThemeProvider } from 'react-jss';

export const App = () => {
  return (
    <ThemeProvider theme={DefaultTheme}>
      <TextV2>Hola mundo!</TextV2>
    </ThemeProvider>
  );
}

Note that ReactJSS and ThemeProvider only need to be used once, at the top of your app. Then inner components will get the active theme by context.

Components List

Visual Language