@zxventures/courier-design-system NPM

Introduction

Mosaic is Zé's (and also one of our favorite hops) design system, developed by Lupulus (the design team), that help us to develop and support applications easily and faster. As our ecosystem is based in React and React Native, we don't serve a CSS based design system. So if you want to use it, don't forget to create your application using React.

This is a global project that could be used in anyone of our company apps, including all the B2B2C projects.

Why Mosaic?

Mosaic is a variety of aromatic hops that offers a unique and complex combination of tropical, floral and earthly fruit traits, which translate very favorably into various styles of beer. So we think that is the kind of combination that we want to purpose with this project.

Using Mosaic

Instalation

Run the following command using npm:

npm install @zxventures/courier-design-system --save

If you prefer Yarn, use the following command instead:

yarn add @zxventures/courier-design-system

Usage

Import any component directly from @zxventures/courier-design-system dependency.

import { Button } from '@zxventures/courier-design-system'

And add it in your page component.

import React from 'react'

const MyPage = () => (
  <div>
    Is this Mosaic awesome?
    <Button scheme="primary" onClick={() => {}}>Yes!</Button>
  </div>
)

export default MyPage

Using Basic Styles

We used Styled Component's createGlobalStyle function to create a BasicStyles that inject our default layout and behavior to the entire page. Ex: Use Roboto as our principal font.

To inject these BasicStyles to your project, just import and add it in your top level component.

import { BasicStyles } from '@zxventures/courier-design-system'

ReactDOM.render(
  <div>
    <BasicStyles />
  </div>,
  document.querySelector('#app'),
);

This will inject all the default css layout to your project <head>. See the styles here.

Development

You can check how to develop and a list of principal references that we use.

Installing

yarn install should install all dependencies;
yarn start to start your dev server;
Access http://localhost:3000/ and enjoy;

Deploying

yarn run build
yarn run bump:patch for bugfixes/hotfixes, this bumps up patch package.json version and create a tag;
yarn run bump:minor for features, this bumps up minor package.json version and create a tag;
yarn run bump:major for a big patch of major features and bugfixes, this bumps up major package.json version and create a tag;
npm login you must login with the user owner of the lib
yarn deploy for publishing the build on npm's lib

Documentation

Docz

Principal Technologies

Tests Tools

Use the following command to run all tests: yarn test

Principal Dependencies

Eslint Configuration

Workflow

We are using the git flow workflow to develop features.

Git flow

Basically it means you should create feature branches and integrate them by issuing pull requests.

How to contribute

Clone this repository to contribute and don't forget to align any modification or new feature with the UX team until open your pull request. It's important to respect the UX flow to not merge any incomplete code that might affect the projects that are already using Mosaic.

Be sure to have developers approvals, all checks passing and follow all pull request's template items before merge any pull request.

BE KIND AND DON'T MERGE CODE WITHOUT TESTING.