import { Callout } from "nextra/components"; import Image from "next/image"; import { Button } from "@chepe/ui"; import { Jellyfish } from "@chepe/icons"; import ComponentContainer from "./../../components/ComponentContainer/ComponentContainer";
WIP - Dummy content **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.
graph TD;
subgraph AA [Consumers]
A[Web app];
B[iOS app];
C[Android app];
end
subgraph BB [Component Libraries]
E[React];
F[SwiftUI];
G[Kotlin];
end
Z[Package Registry];
Z --> A;
Z --> B;
Z --> C;
E --> Z;
F --> Z;
G --> Z;
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:
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;
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 (18.15) installed in your machine. We recommend to use nvm (Node Version Manager).
node -v # 18.15
pnpm: Install the current version of the pnpm.
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 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
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.
npm run docs
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
You can update dependencies using the maintenance command:
npm run maintenance