Development Resources

💡

Purpose: The Development Resources section provides essential information and documentation for developers working with the design system, including details about supported platforms and development guidelines.

Recommendations:

Provide an overview of the development resources available in your design system.

Include information about the development process and how the design system fits into it.

Mention any coding standards, conventions, or guidelines specific to your design system.

Consider including links or references to additional resources that developers might find helpful, such as coding style guides or documentation on design patterns.

Architecture

Platforms (React, React Native, Swift, Kotlin)

💡

Purpose: The Platforms section highlights the supported platforms for development within the design system, such as React, React Native, Swift, Kotlin, or any other platforms your team uses.

React

💡

Purpose: The Install and App Setup section provides instructions and guidelines for installing the necessary dependencies and setting up the development environment to work with the design system.

To use an example instance of this project, you can install @chepe/ui and @chepe/icons.

Start a new React App.

npx create-react-app my-app
cd my-app

Install the @chepe ui and icons.

npm install @chepe/ui @chepe/icons

Now you can use the components of @chepe/ui in your react application:

src/App.js

import { Button } from "@chepe/ui";
import { Jellyfish } from "@chepe/icons";
 
function App() {
  return (
    <div className="App">
      <Button>
        Hello World
        <Jellyfish size={32} fill="#fff" />
      </Button>
    </div>
  );
}
 
export default App;

React Native

Swift

Kotlin

Other Platforms

Design System Development

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Make sure you have the LTS version of Node (opens in a new tab) (18.15) installed in your machine. We recommend to use nvm (Node Version Manager) (opens in a new tab).

node -v # 18.15

pnpm: Install the current version of the pnpm (opens in a new tab).

pnpm -v # 8.4.0

Clone the project in your machine.

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

This monorepository uses Turborepo (opens in a new tab) to manage dependencies and scripts. The first step is to install the local node dependencies.

pnpm i

There are two main ways to develop new components:

Storybook App (Vite)
Watch the React UI Library (Rollup) + NextJs

Development Tasks

Start the UI Development environment with Storybook.

npm run dev

This instance of Storybook uses the source code to compile the React Stories. It's faster than watching changes and then reloading, it also gets HMR. That's the reason components are imported using @chepe/ui/src instead of @chepe/ui.

Start the Web Development environment with NextJs.

npm run web

Contrary to the Storybook instance, this Next App uses the bundled code of the UU. It should be really similar to the final package being used by product teams.

Start the Documentation Development environment with Nextra (opens in a new tab).

npm run docs

Utils

Component Generator

You can add a new Component Boilerplate using the Generator Tool inside the tools/generator directory. You can run this commands at the root of the project:

npm run generate:component --name=Heading
npm run generate:component --name=InputField

Dependency maintenance

You can update dependencies using the maintenance command:

npm run maintenance

Design Resources How to use