certus-design-system

Specifications

• Client built using React, Webpack, and SCSS.
• Development server uses Node and Express.

Instructions

Can be installed locally using NPM or Yarn:

NPM

Installation

• First, install dependencies: npm install

Yarn

Installation

• First, install dependencies: yarn install

Adding CDS to your project

This package has peer-dependencies for the following libraries:

• @material-ui/core
• jss
• react
• react-dom
• react-jss

Please make sure your project includes these dependencies with the version specified in the package.json to avoid any conflicts specific to React or Material-UI.

At the root of your application you will need to setup your theme provider:

const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
 
function App() {
    return (
        <JssProvider jss={jss} generateClassName={generateClassName}>
            <MuiThemeProvider theme={theme}>
                // AppRouter or other root component
            </MuiThemeProvider>
        </JssProvider>
    );
}

The wrapping MUI's theme provider with a JssProvider helps prevent classname conflicts commonly associated with Material-UI (as discussed here and here).

Certus Design System local development

• First clone the repository locally and cd into the repository
• Add a global symlink to the package 'certus-design-system': npm link
• In the directory you want to use the Certus Design System, reference the NPM link: npm link certus-design-system
• Run npm start or yarn start to watch for changes in the CDS directory
  • Alternatively, you can run yarn build:dev or yarn build:prod to build for development or production respectively
  • To visualise how the Webpack bundle is comprised, you can run yarn build:visual
• When creating a new component (or renaming an existing one), be sure to add the name of the export to the ./index.js module export list and the ./webpack.config.js entry array object.

Tests

• Tests have been built using Jest and Enzyme, with some Enzyme helper functions provided by Material-UI.
• To run the test cases: yarn test