Real System

A react component system that is easily extendable and ready-to-theme.

⚠️ CONSUMER CAUTION ⚠️

Real System is under heavy development. API breaking changes will likely occur upon every release until a major release cut.

Getting Started

The entire library can be installed via @real-system/core

• It is recommended that every component be imported by accessing subfolders e.g. @real-system/core/button. This resolves the need to treeshake @real-system/core at compile time. Real System's libraries can only be exported from core subfolders e.g. @real-system/core/styling-library. This is intentional - libraries have many exports which have ambiguous name clashes with many component-module exports.

Every component is its own package via @real-system/<name-of-pkg> (components, libraries, primitives)

• This supports a superior DX. Imagine a product team simply wants to use the Real System Button... we don't want teams to have to install the entire library, which delays automation pipelines and local development, only to use 1 component. Additionally, if you have core installed and only want to upgrade 1 component versus the entire core, you can independently install the package you want to upgrade.

Installation

# 1. Install peer dependencies

$ npm install react react-dom

# or
$ yarn add react react-dom

# 2. Install core package

$ npm install @real-system/core

# or
$ yarn add @real-system/core

# or install individual packages (remember, some packages peer-depend on other real system packages)

$ npm install @real-system/styled-library @real-system/utils-library @real-system/button

# or
$ yarn add @real-system/styled-library @real-system/utils-library @real-system/button

Usage

import { RealSystemProvider } from '@real-system/core/styled-library';
import { Flex } from '@real-system/core/flex';
import { Button } from '@real-system/core/button';

const MyComponent = () => {
  return (
    <RealSystemProvider>
      <Flex vertical>
        <Button mb={8}>Default Button</Button>
        <Button mb={8} variant="fill">
          Primary Button
        </Button>
        <Button variant="minimal">Minimal Button</Button>
        <Button variant="floating">Floating Button</Button>
      </Flex>
    </RealSystemProvider>
  );
};

Local Dev

Some notes before you begin.

• Github Issues/Projects are used to track work.
• Yarn Workspaces is used to manage the monorepo.
• Commit messages are linted with commitlint & commitizen.

Setup

# bootstrap project dependencies and husky
$ yarn bootstrap

# develop components locally with storybook
$ yarn storybook

# The scripts below are rarely used. They can be used to catch compiler edge-cases

# develop components locally with "build --watch"
$ yarn dev

# develop components locally with "build --watch" and storybook
$ yarn dev:storybook

Contributing

$ git checkout -b <branch_name>
$ git add .

# the next step will throw an error if the commit message doesn't follow conventional-changelog standards: https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional
$ git commit -m "<your_commit_message>"

# or to be prompted by commitizen :)
$ git commit
$ git push origin <branch_name>

# then raise a PR

Tools, Dependencies, Resources

Under the hood

Real System uses the following projects which drive the majority of component composition patterns.

• ariakit
• @emotion/react
• @emotion/styled

Development and Tools

• yarn workspaces
• esbuild
• rollupjs
• babel
• storybook