React Design System

🚧 Work in progress, not ready for usage yet 🚧

Accessible, easily customizable components for building a design system in React. Written in Typescript.

TODO

Installation

Note: this package is not available yet

yarn add @react-design-system/core

Basic usage

Import a component and pass in some props! You'll get an accessible, easy to use component out of the box with zero setup.

import React, { useState } from 'react';
import { Input } from '@react-design-system/core';

export default () => {
  let [myFirstInput, setMyFirstInput] = useState(null);

  return (
    <Input
      name="my-first-input"
      label="My First Input"
      value={myFirstInput}
      onChange={setMyFirstInput}
    />
  );
};

Wait... what about styles?

Import our default styles.

import React, { useState } from 'react';
import { Input } from '@react-design-system/core';

// The theme file needs to be imported first, since it contains the CSS Variables
import '@react-design-system/theme.css';
import '@react-design-system/Input.css';

export default () => {
  let [myFirstInput, setMyFirstInput] = useState(null);

  return (
    <Input
      name="my-first-input"
      label="My First Input"
      value={myFirstInput}
      onChange={setMyFirstInput}
    />
  );
};

Better... but what about customizing the styles so I can create my own design system?

Glad you asked, as this is most important reason you'd want to use this library.

Let's create a file in our components folder called Input and customize the styling for our design system. We'll also use the joinStyles helper so we can still customize it more when we need to.

/* components/Input/index.css */

.my-custom-input-class {
  color: darkgray;
}

.my-custom-input-label-class {
  color: cornflowerblue;
}

/* components/Input/index.js */

import React, { useState } from 'react';
import { Input, joinStyles } from '@react-design-system/core';
import 'index.css';

export default function Input(props) {
  return (
    <Input
      {...props}
      classNames={{
        label: joinStyles(
          'my-custom-input-label-class',
          props.classNames.label
        ),
        input: joinStyles('my-custom-input-class', props.classNames.input),
      }}
    />
  );
}

Input.defaultProps = {
  classNames: {
    label: '',
    input: '',
  },
};

Much better... but is there a way to automate this?

Yep! We have a CLI to easily scaffold an entire design system, or individual components that you need.

Generate all available components in your components directory.

npx @react-design-system/cli generate all --path src/components

Or a specific one.

npx @react-design-system/cli generate Input --path src/components

Documentation

Coming soon!

Storybook

Usage

Contributing

All contributions welcome! Please create an issue with what you'd like to work on and we can work out the details.

Instructions:

Clone the repository and install the dependencies.

git clone https://github.com/seanWLawrence/react-design-system.git
cd react-design-system
yarn

Launch Storybook in one terminal.

yarn storybook

And the test suite in another. Example shown is for the Input component.

yarn test packages/input --watch

And hack away!

License

MIT