@redradix/design-system

Install

npm i -D @redradix/design-system

or

yarn add -D @redradix/design-system

Usage

Create a .design-system directory with an index.js file in it.

Its content of the index.js should be similar to this:

import React from "react";
import ReactDOM from "react-dom";
import DesignSystem from "@redradix/design-system";

const config = {
  logoSrc: "https://example-image.com/1.png",
  faviconSrc: "https://example-image.com/favicon.ico",
  projectName: "Example",
  keyResources: {
    repoUrl: "https://example-repo.com",
    designUrl: "https://example-design.com"
  }
};

ReactDOM.render(
  <DesignSystem {...{ config }} />,
  document.getElementById("root")
);

To easily run it and build it add the following scripts to your package.json:

  "design-system": "redradix-design-system start",
  "build-design-system": "redradix-design-system build",

Props

• config
  • logoSrc: string
  • projectName: string
  • repoUrl: string
  • designUrl: string

Styles overrides

The css variables are in src/styles/globals/_settings.scss

Development

Run the app in the example directory which has a link to the package in the package.json so it can require and use it. The problem is that package links (in this case yarn links) do not require peerDependencies so the example app will throw an error that @redradix/design-system can't require react.

So in the root run npm link ../example/node_modules/{react,react-dom} so it uses example's react packages.

Then, run yarn start in the root directory to build the package in watch mode.

And finally, as with other cra project, go inside the example directory and run yarn run design-system which will serve the design system in the port 3000. Maybe you need to add SKIP_PREFLIGHT_CHECK=true before the command if it yells at you.

Important note

The redradix-design-system binaries are a fork of react-scripts located in the cra dir.

In case it needs to be updated in the future, the only differences with the original are located in the paths file (cra/packages/react-scripts/config/paths):

• appBuild
• appIndexJs
• appDesignSystem (all old references to appSrc must be an array containing appSrc and this appDesignSystem)
• ownPackageJson

Steps to update react-scrips:

1. Clone facebook/create-react-app into cra2 for example
2. Point package.json bin to the updated dir
3. Change the above paths so they work with out approach
4. When working remove cra and rename cra2 to cra

Deployment (npm publishing)

In the root dir:

• Bump package.json version by running npm version {major|minor|patch} according to semver.

• Run npm publish.

Future improvements

Nothing to do, it's perfect.

License

MIT � redradix