docs: refactor documentation for clarity and consistency

ruru-m07 · Aug 15, 2024 · fefcfc7 · fefcfc7
1 parent 621bd71
commit fefcfc7
Show file tree

Hide file tree

Showing 27 changed files with 474 additions and 377 deletions.
diff --git a/apps/www/components/hero.tsx b/apps/www/components/hero.tsx
@@ -1,6 +1,9 @@
+"use client";
+
 import React from "react";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
+import { buttonVariants } from "ruru-ui/components/button";
 
 const Hero = () => {
   return (
@@ -87,9 +90,9 @@ const Hero = () => {
           <Link
             href={"https://github.com/ruru-m07/ruru-ui"}
             target="_blank"
-            className={
-              "h-9 px-4 py-2 border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020] inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
-            }
+            className={buttonVariants({
+              variant: "secondary",
+            })}
           >
             <GitHubLogoIcon className="mr-2" /> Give a star
           </Link>

diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx
@@ -24,12 +24,12 @@ pnpm dlx ruru-ui-cli@latest init
 </Tab>
 <Tab value={"yarn"}>
 ```bash
-npx shadcn-ui@latest init 
+npx ruru-ui@latest init 
 ```
 </Tab>
 <Tab value={"bun"}>
 ```bash
-bunx --bun shadcn-ui@latest init 
+bunx --bun ruru-ui@latest init 
 ```
 </Tab>
 </Tabs>
@@ -43,7 +43,7 @@ bunx --bun shadcn-ui@latest init
 ◇ Where is your tailwind.config.js located? ./tailwind.config.js
 ◇ Would you like to use CSS variables for colors? Yes
 ◇ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) (Leave blank if not)
-◇ Configure the import alias for components: @/components
+◇ Configure the import alias for components: @/components/ui
 ◇ Configure the import alias for utils: @/lib/utils
 ◇ Would you like to use RSC ? Yes
 ◇ Write configuration to components.json. Proceed? Yes
@@ -54,8 +54,19 @@ bunx --bun shadcn-ui@latest init
 
 The `init` command supports the following options:
 
-- `-d`: Use default configuration settings without prompting.
-- `-a`: Automatically detect existing project configuration.
+```txt
+Usage: Ruru-UI init [options]
+
+initialize your project and install dependencies
+
+Options:
+  -y, --yes         skip confirmation prompt. (default: false)
+  -d, --defaults    use default configuration. (default: false)
+  -a, --autodetact  autodetact configuration by freamwork. (default: false)   
+  -c, --cwd <cwd>   the working directory. defaults to the current directory. 
+                    (default: "D:\\GitHub\\ruru-ui\\apps\\sink")
+  -h, --help        display help for command
+```
 
 
 ## add
@@ -77,12 +88,12 @@ pnpm dlx ruru-ui-cli@latest add [component]
 </Tab>
 <Tab value={"yarn"}>
 ```bash
-npx shadcn-ui@latest add [component] 
+npx ruru-ui@latest add [component] 
 ```
 </Tab>
 <Tab value={"bun"}>
 ```bash
-bunx --bun shadcn-ui@latest add [component]
+bunx --bun ruru-ui@latest add [component]
 ```
 </Tab>
 </Tabs>
@@ -91,7 +102,21 @@ bunx --bun shadcn-ui@latest add [component]
 
 The `add` command supports the following options:
 
-- `-y`: Skip the confirmation prompt. 
-- `-o`: Overwrite existing files.
-- `-a`: Install all components.
+```txt
+Usage: Ruru-UI add [options] [components...]
+
+add a component to your project
+
+Arguments:
+  components         the components to add
+
+Options:
+  -y, --yes          skip confirmation prompt. (default: true)
+  -o, --overwrite    overwrite existing files. (default: false)
+  -c, --cwd <cwd>    the working directory. defaults to the current
+                     directory. (default: "D:\\GitHub\\ruru-ui\\apps\\sink")  
+  -a, --all          add all available components (default: false)
+  -p, --path <path>  the path to add the component to.
+  -h, --help         display help for command
+```
 
diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
@@ -29,12 +29,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add avatar
+      npx ruru-ui@latest add avatar
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add avatar
+      bunx --bun ruru-ui@latest add avatar
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx
@@ -26,12 +26,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add badge
+      npx ruru-ui@latest add badge
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add badge
+      bunx --bun ruru-ui@latest add badge
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx
@@ -31,12 +31,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add button
+      npx ruru-ui@latest add button
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add button
+      bunx --bun ruru-ui@latest add button
       ```
     </Tab>
     </Tabs>
@@ -77,13 +77,15 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
 
 ---
 
-You can use the `buttonVariants` helper to create a link that looks like a button.
+You can use the `buttonVariants` helper to create a link that looks like a button. You can't use buttonVariants in RSC.
 
 ```tsx
+// [!code word:buttonVariants]
 import { buttonVariants } from "ruru-ui/components/button";
 ```
 
 ```tsx
+// [!code word:buttonVariants]
 <Link href={"/"} className={buttonVariants({ variant: "secondary" })}>
   Click here
 </Link>
@@ -92,6 +94,7 @@ import { buttonVariants } from "ruru-ui/components/button";
 Alternatively, you can set the `asChild` parameter and nest the link component.
 
 ```tsx
+// [!code word:asChild]
 <Button asChild>
   <Link href="/login">Login</Link>
 </Button>

diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx
@@ -26,12 +26,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add checkbox
+      npx ruru-ui@latest add checkbox
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add checkbox
+      bunx --bun ruru-ui@latest add checkbox
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/input.mdx b/apps/www/content/docs/components/input.mdx
@@ -26,12 +26,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add input
+      npx ruru-ui@latest add input
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add input
+      bunx --bun ruru-ui@latest add input
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx
@@ -37,12 +37,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add select
+      npx ruru-ui@latest add select
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add select
+      bunx --bun ruru-ui@latest add select
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/spinner.mdx b/apps/www/content/docs/components/spinner.mdx
@@ -25,12 +25,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add spinner
+      npx ruru-ui@latest add spinner
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add spinner
+      bunx --bun ruru-ui@latest add spinner
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx
@@ -26,12 +26,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add switch
+      npx ruru-ui@latest add switch
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add switch
+      bunx --bun ruru-ui@latest add switch
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx
@@ -24,12 +24,12 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add tabs
+      npx ruru-ui@latest add tabs
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add tabs
+      bunx --bun ruru-ui@latest add tabs
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/textarea.mdx b/apps/www/content/docs/components/textarea.mdx
@@ -25,12 +25,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add textarea
+      npx ruru-ui@latest add textarea
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add textarea
+      bunx --bun ruru-ui@latest add textarea
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/tooltip.mdx b/apps/www/content/docs/components/tooltip.mdx
@@ -32,12 +32,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx shadcn-ui@latest add tooltip
+      npx ruru-ui@latest add tooltip
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun shadcn-ui@latest add tooltip
+      bunx --bun ruru-ui@latest add tooltip
       ```
     </Tab>
     </Tabs>
@@ -89,7 +89,7 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
                 <TooltipTrigger asChild>
                     <Button>Hover or focus me</Button>
                 </TooltipTrigger>
-                <TooltipContent className="px-[15px] py-[px]">
+                <TooltipContent>
                     Tooltip content here
                 </TooltipContent>
             </Tooltip>

diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
@@ -1,38 +1,71 @@
 ---
-title: Introduction
-description: Welcome to ruru UI, a modern and flexible UI library designed to help you build beautiful, responsive, and accessible web applications with ease.
+title: Quick Start
+description: Getting Started with Ruru-UI.
 ---
 
-# Welcome to ruru UI
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import Link from 'fumadocs-core/link';
 
-Welcome to **ruru UI**, a modern and flexible UI library designed to help you build beautiful, responsive, and accessible web applications with ease.
+## Introduction
 
-## Why ruru UI?
+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.
 
-### **Modern Design**
+## Terminology
 
-**ruru UI** offers a sleek and contemporary design that ensures your application looks great on all devices. Our components are crafted with attention to detail, following the latest design trends and best practices.
+- **Component**: A reusable piece of UI that can be used across different parts of your application.
+- **Props**: Properties passed to components to customize their appearance and behavior.
+- **State**: Data managed within a component that affects its rendering and behavior.
 
-### **Developer Friendly**
+## FAQ
 
-We believe that building beautiful interfaces should be a joy, not a hassle. **ruru UI** is built with developers in mind, offering a simple API, thorough documentation, and plenty of examples to help you get started quickly.
+Some common questions you may encounter:
 
-### **Accessibility First**
+<Accordions>
+    <Accordion id="What is ruru UI?" title="What is ruru UI?">
+        **ruru UI** is a comprehensive UI library and a set of reusable components designed to help you build beautiful and consistent user interfaces with ease.
+    </Accordion>
+    <Accordion id="How do I install ruru UI?" title="How do I install ruru UI?">
+        You can install **ruru UI** via package manager or CLI commands. Check the official documentation for detailed instructions.
+    <Link href="/docs/installation">installation</Link>
+    </Accordion>
+    <Accordion id="How do I use a component from ruru UI?" title="How do I use a component from ruru UI?">
+        Import the component and use it in your JSX.
+    </Accordion>
+    <Accordion id="Where can I find the documentation for each component?" title="Where can I find the documentation for each component?">
+        You can find detailed documentation for each component on our official documentation site.
+    </Accordion>
+    <Accordion id="How can I contribute to ruru UI?" title="How can I contribute to ruru UI?">
+        You can contribute to **ruru UI** by submitting bug reports, feature requests, or pull requests on our GitHub repository.
+    </Accordion>
+    <Accordion id="Can I use this in my project?" title="Can I use this in my project?">
+        Yes, **ruru UI** is open-source and free to use in any project. You can customize it to fit your needs and contribute back to the community.
+    </Accordion>
+</Accordions>
 
-We prioritize accessibility in all our components, ensuring that your application is usable by everyone, including those with disabilities. Our components are built to follow the latest accessibility standards and guidelines.
+## Learn More
 
-### **Performance Optimized**
+To learn more about ruru UI, take a look at the following resources:
 
-**ruru UI** is optimized for performance, ensuring that your application remains fast and responsive. Our components are lightweight and designed to minimize the impact on your application's performance.
-
-## Explore the Library
-
-Dive into the comprehensive documentation to discover all the components and features **ruru UI** has to offer. From buttons and forms to modals and navigation, you'll find everything you need to build a complete and polished user interface.
+- [Official Documentation](/docs) - Learn about all the features and components available in ruru UI.
+- [GitHub Discussions](https://github.com/ruru-m07/ruru-ui/discussions). - Join the community and ask questions or share your feedback.
 
 ## Join the Community
 
 Become a part of the **ruru UI** community! Share your experiences, ask questions, and collaborate with other developers. Together, we can make **ruru UI** even better. [Provide feedback](https://github.com/ruru-m07/ruru-ui/discussions/3).
 
+## License
+
+**ruru UI** is licensed under the MIT License. You are free to use, modify, and distribute the library as you see fit. For more information, please refer to the [LICENSE](https://github.com/ruru-m07/ruru-ui/blob/main/LICENSE)
+
+## Thank You
+
+Thank you for choosing **ruru UI**. We appreciate your support and look forward to seeing the amazing applications you build with our library.
+
+### Enjoy!
+
+We hope you enjoy using **ruru UI** to build your applications. Our goal is to provide you with a robust and flexible set of tools to create stunning user interfaces.
+
 ---
 
-Feel free to modify any part of this text to better fit your vision for the documentation landing page. If you have any specific elements or additional information you'd like to include, let me know!
+<p className="font-bold -mb-3">Ruru UI</p>
+<p className="text-xs font-bold">Built with ❤️ by [Ruru](https://github.com/ruru-m07) </p>