Merge pull request #26 from ruru-m07/registry/ui

feat(ui): implement registry system in www client

.changeset/config.json

@@ -2,7 +2,7 @@
   "$schema": "https://unpkg.com/@changesets/config@3.0.2/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
-  "fixed": [["ruru-ui"]],
+  "fixed": [["ruru-ui"], ["ruru-ui-cli"]],
   "linked": [],
   "access": "restricted",
   "baseBranch": "main",

.github/workflows/ci.yml

@@ -30,12 +30,6 @@ jobs:
       - name: Lint Format
         run: pnpm lint:prettier
 
-      - name: Check Types
-        run: pnpm build --filter=./packages/*
-
-      - name: Run ESLint
-        run: pnpm lint --filter=./packages/*
-
   # This workflow contains a single job called "build"
   build:
     runs-on: ubuntu-latest
@@ -55,4 +49,4 @@ jobs:
         run: pnpm i --frozen-lockfile
 
       - name: Build Check
-        run: pnpm build
+        run: pnpm build --filter=./packages/*

.husky/pre-commit

@@ -1 +1 @@
-pnpm prettier
+pnpm run --filter=./apps/www build:registry && pnpm prettier

.prettierignore

@@ -2,3 +2,5 @@ pnpm-lock.yaml
 .github/**/*.md
 
 .content-collections/**/*
+
+**/*.mdx

apps/www/.prettierignore

@@ -0,0 +1 @@
+**/*.mdx

apps/www/__registry__/index.tsx

@@ -0,0 +1,129 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import * as React from "react";
+
+export const Index: Record<string, any> = {
+  components: {
+    avatar: {
+      name: "avatar",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/avatar"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/avatar.tsx"],
+      category: "undefined",
+      subcategory: undefined,
+    },
+    badge: {
+      name: "badge",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/badge"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/badge.tsx"],
+      category: "undefined",
+      subcategory: undefined,
+    },
+    button: {
+      name: "button",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/button"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/button.tsx"],
+      category: "undefined",
+      subcategory: ["spinner"],
+    },
+    checkbox: {
+      name: "checkbox",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/checkbox"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/checkbox.tsx"],
+      category: "undefined",
+      subcategory: undefined,
+    },
+    input: {
+      name: "input",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/input"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/input.tsx"],
+      category: "undefined",
+      subcategory: undefined,
+    },
+    select: {
+      name: "select",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/select"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/select.tsx"],
+      category: "undefined",
+      subcategory: undefined,
+    },
+    spinner: {
+      name: "spinner",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/spinner"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/spinner.tsx"],
+      category: "undefined",
+      subcategory: undefined,
+    },
+    switch: {
+      name: "switch",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/switch"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/switch.tsx"],
+      category: "undefined",
+      subcategory: undefined,
+    },
+    textarea: {
+      name: "textarea",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/textarea"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/textarea.tsx"],
+      category: "undefined",
+      subcategory: undefined,
+    },
+    tooltip: {
+      name: "tooltip",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/tooltip"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/tooltip.tsx"],
+      category: "undefined",
+      subcategory: undefined,
+    },
+  },
+};

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>

apps/www/components/preview/wrapper.tsx

@@ -8,7 +8,7 @@ export function Wrapper(
     <div
       {...props}
       className={cn(
-        "rounded-xl bg-primary-foreground/30 p-4 prose-no-margin border",
+        "rounded-xl bg-primary-foreground/30 p-4 prose-no-margin border min-h-96 flex items-center justify-center",
         props.className,
       )}
     >

apps/www/content/docs/cli.mdx

@@ -0,0 +1,122 @@
+---
+title: Cli
+description: The CLI is a command-line interface that allows you to add components to your project.
+---
+
+import { Tabs, Tab } from "fumadocs-ui/components/tabs";
+
+## init
+
+Use the `init` command to initialize dependencies for a new project.
+
+The `init`, and CSS variables for the project.
+
+<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
+<Tab value={"npm"}>
+```bash
+npx ruru-ui-cli@latest init 
+```
+</Tab>
+<Tab value={"pnpm"}>
+```bash
+pnpm dlx ruru-ui-cli@latest init 
+```
+</Tab>
+<Tab value={"yarn"}>
+```bash
+npx ruru-ui@latest init 
+```
+</Tab>
+<Tab value={"bun"}>
+```bash
+bunx --bun ruru-ui@latest init 
+```
+</Tab>
+</Tabs>
+
+
+    ```txt
+
+◇ Would you like to use TypeScript (recommended)? Yes
+◇ use default configuration. No
+◇ Where is your global CSS file? ./app/globals.css
+◇ 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/ui
+◇ Configure the import alias for utils: @/lib/utils
+◇ Would you like to use RSC ? Yes
+◇ Write configuration to components.json. Proceed? Yes
+
+    ```
+
+### Options
+
+The `init` command supports the following options:
+
+```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
+
+Use the `add` command to add components to your project.
+
+The `add` command adds a component to your project and installs all required dependencies.
+
+<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
+<Tab value={"npm"}>
+```bash
+npx ruru-ui-cli@latest add [component] 
+```
+</Tab>
+<Tab value={"pnpm"}>
+```bash
+pnpm dlx ruru-ui-cli@latest add [component]
+```
+</Tab>
+<Tab value={"yarn"}>
+```bash
+npx ruru-ui@latest add [component] 
+```
+</Tab>
+<Tab value={"bun"}>
+```bash
+bunx --bun ruru-ui@latest add [component]
+```
+</Tab>
+</Tabs>
+
+### Options
+
+The `add` command supports the following options:
+
+```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
+```
+

apps/www/content/docs/components/avatar.mdx

@@ -10,6 +10,42 @@ import {
   AvatarWithBadge,
 } from "ruru-ui/components/avatar";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
+
+## Installation
+
+<Rutabs items={["CLI", "Dependencies"]}>
+  <Rutab value={"CLI"}>
+    <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
+      <Tab value={"npm"}>
+      ```bash
+      npx ruru-ui-cli@latest add avatar
+      ```
+      </Tab>
+      <Tab value={"pnpm"}>
+      ```bash
+      pnpm dlx ruru-ui-cli@latest add avatar
+      ```
+      </Tab>
+      <Tab value={"yarn"}>
+      ```bash
+      npx ruru-ui@latest add avatar
+      ```
+      </Tab>
+      <Tab value={"bun"}>
+      ```bash
+      bunx --bun ruru-ui@latest add avatar
+      ```
+    </Tab>
+    </Tabs>
+
+  </Rutab>
+  <Rutab value={"Dependencies"}>
+    ```package-install
+    npm install ruru-ui@latest
+    ```
+  </Rutab>
+</Rutabs>
 
 ## Usage
 
@@ -42,11 +78,11 @@ The `Avatar` component is used to represent a user or entity.
       return (
         <div className={"flex justify-between gap-5"}>
             <Avatar
+                size={50}
                 placeholder="RU"
                 src={"https://github.com/ruru-m07.png"}
             />
             <Avatar
-                size={50}
                 placeholder="RU"
                 src={"https://github.com/ruru-m07.png"}
             />