Ubuntu
100 lines
1.9 KiB
Markdown
100 lines
1.9 KiB
Markdown
# Contributing to RetroUI
|
|
|
|
Thank you for your interest in contributing to RetroUI 🙏. I hope this guide to help you get started.
|
|
|
|
## Getting Started
|
|
|
|
1. Fork this repository
|
|
|
|
2. Clone the forked repository to your local machine.
|
|
|
|
```bash
|
|
git clone https://github.com/<YOUR_USERNAME>/retroui.git
|
|
```
|
|
|
|
3. Navigate to the project directory
|
|
|
|
```bash
|
|
cd retroui
|
|
```
|
|
|
|
4. Create a new branch
|
|
|
|
```bash
|
|
git switch -c new-branch-name
|
|
```
|
|
|
|
5. install dependencies
|
|
|
|
```bash
|
|
pnpm i
|
|
```
|
|
|
|
6. Run the project
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
## Adding a New Component
|
|
|
|
1. Create the main component in `/components/retroui/NewComponent/NewComponent.tsx`
|
|
|
|
```ts
|
|
export function NewComponent() {
|
|
return <div>This is your component.</div>;
|
|
}
|
|
```
|
|
|
|
2. Export your component in `/components/retroui/NewComponent/index.ts` and `/components/retroui/index.ts`
|
|
|
|
```ts
|
|
export * from "./NewComponent";
|
|
```
|
|
|
|
3. Create a preview to showcase your component in `preview/components/new-component.tsx`
|
|
|
|
```typescript
|
|
export default function NewComponentStyle() {
|
|
return (
|
|
<span className="px-2.5 py-1 text-sm font-semibold border-2 border-red-600 text-red-600">
|
|
Error
|
|
</span>
|
|
);
|
|
}
|
|
```
|
|
|
|
4. Add your component preview to the list of components registry in `config/components.ts`
|
|
|
|
```typescript
|
|
export const componentConfig = {
|
|
registry: {
|
|
...
|
|
"new-component": {
|
|
name: "new-component",
|
|
filePath: "preview/components/new-component.tsx",
|
|
preview: lazy(() => import("@/preview/components/new-component")),
|
|
},
|
|
},
|
|
};
|
|
```
|
|
|
|
5. Add documentation for your component in `content/docs/components/...mdx`
|
|
|
|
```md
|
|
---
|
|
title: Badge
|
|
description: The component that looks like a button but isn't clickable!
|
|
lastUpdated: 08 Oct, 2024
|
|
---
|
|
|
|
...
|
|
|
|
### New Component
|
|
|
|
<ComponentShowcase name="new-component" /> // name of the component in the registry
|
|
```
|
|
|
|
## Ask for Help
|
|
|
|
For any help or questions, please open a new GitHub issue.
|