updated the contribution guide

Author: ariflogs

CONTRIBUTING.md

@@ -1,5 +1,3 @@
-> ⚠️ This guide is old and may not be still relevant! I'll update this soon. 🙏
-
 # Contributing to RetroUI
 
 Thank you for your interest in contributing to RetroUI 🙏. I hope this guide to help you get started.
@@ -26,7 +24,7 @@ Thank you for your interest in contributing to RetroUI 🙏. I hope this guide t
    git switch -c new-branch-name
    ```
 
-5. nstall dependencies
+5. install dependencies
 
    ```bash
    pnpm i
@@ -42,46 +40,60 @@ Thank you for your interest in contributing to RetroUI 🙏. I hope this guide t
 1. Create the main component in `/packages/ui/NewComponent/NewComponent.tsx`
 
 ```ts
-import React from 'react'
-
 export function NewComponent() {
-  return (
-    <div>
-      This is your component.
-    </div>
-  )
+  return <div>This is your component.</div>;
 }
 ```
 
 2. Export your component in `/packages/ui/NewComponent/index.ts` and `/packages/ui/index.ts`
 
 ```ts
-export * from "./NewComponent"
+export * from "./NewComponent";
 ```
 
-3. Create basic example to showcase your component in `app/page.tsx`
+3. Create a preview to showcase your component in `preview/components/new-component.tsx`
 
 ```typescript
-import React from "react";
-import { H3, NewComponent } from "@/packages/ui";
-
-export default function page() {
+export default function NewComponentStyle() {
   return (
-    <div className="container max-w-6xl mx-auto">
-      <H1>Welcome to RetroUI</H1>
-
-      <div className="space-y-8 mt-12">
-        ...
-        <div>
-          <H3>New Component</H3>
-          <NewComponent />
-        </div>
-      </div>
-    </div>
+    <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.
+
+For any help or questions, please open a new GitHub issue.