Merge branch 'ruru-m07:main' into main

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,75 @@
+name: Bug Report
+description: Create a bug report
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before opening a new issue:
+
+        - do a search of existing issues.
+        - upgrade to the latest versions.
+
+        If you need help with your own project, you can start a discussion in the [Q&A Section](https://github.com/ruru-m07/ruru-ui/discussions/categories/q-a).
+  - type: textarea
+    attributes:
+      label: To Reproduce
+      description: A step-by-step description of how to reproduce the issue, or a link to the reproducible repository.
+      placeholder: |
+        1. Start the application in development (next dev)
+        2. Click X
+        3. Y will happen
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Current vs. Expected behavior
+      description: A clear and concise description of what the bug is, and what you expected to happen.
+      placeholder: "Following the steps from the previous section, I expected A to happen, but I observed B instead"
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Provide environment information
+      description: Please provide information about your environment.
+      render: bash
+      placeholder: |
+        Operating System:
+          Platform: darwin
+          Arch: arm64
+          Version: Darwin Kernel Version 22.5.0
+        Binaries:
+          Node: 18.17.1
+          npm: 9.5.1
+          Yarn: 1.22.19
+          pnpm: N/A
+        Relevant Packages:
+          next: 13.4.20
+          eslint-config-next: 13.4.20
+          react: 18.2.0
+          react-dom: 18.2.0
+          typescript: 5.2.2
+        Next.js Config:
+          output: N/A
+    validations:
+      required: true
+  - type: dropdown
+    attributes:
+      label: Which area(s) are affected? (Select all that apply)
+      multiple: true
+      options:
+        - "Not sure"
+        - "UI"
+        - "CLI"
+        - "TypeScript (built-in types)"
+        - "Documentation"
+        - "Examples"
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: |
+        Any extra information that might help us investigate.
+      placeholder: |
+        I tested my reproduction against different canary releases, and the first one that introduced the bug was "11.0.0", since reverting to "10.0.0" works.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Questions?
+    url: https://github.com/ruru-m07/ruru-ui/discussions
+    about: Ask your questions here.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,33 @@
+name: Feature Request
+description: Suggest a new feature or improvement to the project
+labels: ["enhancement"]
+body:
+  - type: textarea
+    attributes:
+      label: What problem will this feature address?
+      description: A clear and concise description of what the problem is.
+      placeholder: |
+        I'm always frustrated when I can't do X
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen.
+      placeholder: Add X to the CLI
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+      placeholder: |
+        Maybe use Y as a workaround?
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.
+    validations:
+      required: false

.github/PULL_REQUEST_TEMPLATE.md

@@ -13,38 +13,5 @@ This PR [adds/removes/fixes/replaces] the [feature/bug/etc].
 - [ ] 🎨 Style
 - [ ] 🧑‍💻 Code Refactor
 - [ ] 🔥 Performance Improvements
-- [ ] ✅ Test
-- [ ] 🤖 Build
-- [ ] 🔁 CI
-- [ ] 📦 Chore (Release)
-- [ ] ⏩ Revert
 
 ## Mobile & Desktop Screenshots/Recordings
-
-<!-- Visual changes require screenshots -->
-
-<!--
-Please provide some steps for the reviewer to test your change. If you have wrote tests, you can mention that here instead.
-
-1. Click a link
-2. Do this thing
-3. Validate you see the thing working
--->
-
-<!-- note: PRs with deleted sections will be marked invalid -->
-
-<!--
-  For Work In Progress Pull Requests, please use the Draft PR feature,
-  see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details.
-
-  For a timely review/response, please avoid force-pushing additional
-  commits if your PR already received reviews or comments.
-
-  Before submitting a Pull Request, please ensure you've done the following:
-  - 📖 Read the Open Sauced Contributing Guide: https://github.com/open-sauced/.github/blob/main/CONTRIBUTING.md.
-  - 📖 Read the Open Sauced Code of Conduct: https://github.com/open-sauced/.github/blob/main/CODE_OF_CONDUCT.md.
-  - 👷‍♀️ Create small PRs. In most cases, this will be possible.
-  - ✅ Provide tests for your changes.
-  - 📝 Use descriptive commit messages.
-  - 📗 Update any related documentation and include any relevant screenshots.
--->

CONTRIBUTING.md

@@ -51,6 +51,48 @@ Please note that this project is governed by our [Code of Conduct](https://githu
 4. Test your changes thoroughly.
 5. Submit a pull request (PR) with a clear explanation of your changes and why they are beneficial.
 
+### New Component
+
+1. Create a new file in the `/packages/ui/src/components/[your-component].tsx` directory.
+
+2. Add your component to the `/apps/www/registry/ui.ts` file.
+
+```json
+{
+  name: "button",
+  type: "components:ui",
+  dependencies: ["@radix-ui/react-slot"],
+  subcategory: ["spinner"],
+  files: ["button.tsx"],
+},
+```
+
+3. write component documentation in `/apps/www/content/docs/components/[your-component].mdx`.
+
+- add previre component in `/apps/www/components/preview/index.tsx`.
+
+```tsx
+button: (
+  <Wrapper>
+    <div className="flex items-center justify-center gap-4">
+      <Button className="w-fit" variant={"secondary"}>
+        Button
+      </Button>
+    </div>
+  </Wrapper>
+),
+```
+
+- make sure u add required details **title** **description** ans **preview**
+
+```mdx
+---
+title: Button
+description: Displays a button or a component that looks like a button.
+preview: button
+---
+```
+
 ## Issue Reporting
 
 If you encounter a bug or have a feature request, please open an issue. with a clear title and description.

README.md

@@ -2,7 +2,7 @@
 
 Welcome to ruru UI, a comprehensive UI library and a set of reusable components designed to help you build beautiful and consistent user interfaces with ease.
 
-![banner-modified](https://github.com/user-attachments/assets/0dcd8002-daff-4b89-854f-f899a94ecaff)
+![banner-modified](./apps/www/public/assets/banner.jpg)
 
 ## Join the Community
 

apps/www/app/layout.tsx

@@ -5,21 +5,13 @@ import { RootProvider } from "fumadocs-ui/provider";
 import { RuruProvider } from "ruru-ui/provider";
 import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
-import { baseUrl, createMetadata } from "@/utils/metadata";
+import { createMetadata } from "@/utils/metadata";
 import "./global.css";
 import "fumadocs-ui/style.css";
 import "fumadocs-ui/twoslash.css";
 import { CSPostHogProvider } from "./providers";
 
-export const metadata = createMetadata({
-  title: {
-    template: "%s | Ruru UI",
-    default: "Ruru UI",
-  },
-  description:
-    "Ruru UI is a design system for building classic web applications.",
-  metadataBase: baseUrl,
-});
+export const metadata = createMetadata({});
 
 export const viewport: Viewport = {
   themeColor: [
@@ -36,12 +28,6 @@ export default function Layout({ children }: { children: ReactNode }) {
       suppressHydrationWarning
     >
       <body>
-        <head>
-          <meta
-            name="google-site-verification"
-            content="NyaIMHJt9--uZGUgzJpGQPNcUJtVLtvaEkodqOuJ7-I"
-          />
-        </head>
         <CSPostHogProvider>
           <RootProvider>
             <RuruProvider>

apps/www/utils/metadata.ts

@@ -1,27 +1,38 @@
 import type { Metadata } from "next/types";
 
+const TITLE = "Ruru UI - Customizable Interfaces for Web Applications";
+const DESCRIPTION =
+  "Ruru UI is the ultimate design system and UI library for creating seamless, beautiful, and highly customizable user interfaces for classic web applications.";
+const BASE_URL = "https://ruru-ui.vercel.app";
+const BANNER_IMAGE = {
+  url: `${BASE_URL}/assets/banner.jpg`,
+  width: 1200,
+  height: 567,
+  alt: "Ruru UI Banner",
+};
+
 export function createMetadata(override: Metadata): Metadata {
   return {
-    ...override,
+    title: {
+      template: "%s | Ruru UI",
+      default: TITLE,
+    },
+    description: DESCRIPTION,
+    metadataBase: new URL(BASE_URL),
     openGraph: {
-      title: override.title ?? undefined,
-      description: override.description ?? undefined,
-      url: "https://ruru-ui.vercel.app",
-      images: [
-        {
-          url: "https://ruru-ui.vercel.app/assets/banner.png",
-          width: 1200,
-          height: 567,
-          alt: "ruru-ui",
-        },
-      ],
+      title: TITLE,
+      description: DESCRIPTION,
+      url: BASE_URL,
+      images: [BANNER_IMAGE],
       siteName: "Ruru UI",
+      type: "website",
       ...override.openGraph,
     },
+    twitter: {
+      card: "summary_large_image",
+      title: TITLE,
+      description: DESCRIPTION,
+      images: [BANNER_IMAGE.url],
+    },
   };
 }
-
-export const baseUrl =
-  process.env.NODE_ENV === "development"
-    ? new URL("http://localhost:3000")
-    : new URL(`https://${process.env.VERCEL_URL!}`);