A react component system that is easily extendable and ready-to-theme.
Real System is under heavy development. API breaking changes will likely occur upon every release until a major release cut.
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'slibraries
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 havecore
installed and only want to upgrade 1 component versus the entirecore
, you can independently install the package you want to upgrade.
# 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
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>
);
};
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.
# 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
$ 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
Real System uses the following projects which drive the majority of component composition patterns.