From d759d3c0a1853b8c39859b1830ba7fc1e58d6df6 Mon Sep 17 00:00:00 2001 From: ruru <142723369+ruru-m07@users.noreply.github.com> Date: Wed, 24 Jul 2024 19:50:57 +0530 Subject: [PATCH] docs(Badge): add documentation for Badge component --- .github/dependabot.yml | 1 - apps/www/components/preview/index.tsx | 205 ++++++++++++++++++++- apps/www/content/docs/components/badge.mdx | 165 +++++++++++++++++ packages/ui/src/components/badge.tsx | 14 +- 4 files changed, 376 insertions(+), 9 deletions(-) create mode 100644 apps/www/content/docs/components/badge.mdx diff --git a/.github/dependabot.yml b/.github/dependabot.yml index d698d8d..5990d9c 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -9,4 +9,3 @@ updates: directory: "/" # Location of package manifests schedule: interval: "weekly" - diff --git a/apps/www/components/preview/index.tsx b/apps/www/components/preview/index.tsx index 50852ad..62db7d2 100644 --- a/apps/www/components/preview/index.tsx +++ b/apps/www/components/preview/index.tsx @@ -1,7 +1,7 @@ import type { ReactNode } from "react"; import dynamic from "next/dynamic"; import { Wrapper } from "./wrapper"; -import { Avatar, AvatarWithBadge } from "ruru-ui/components/avatar"; +import { CubeIcon } from "@radix-ui/react-icons"; const Button = dynamic(() => import("ruru-ui/components/button").then((m) => m.Button), @@ -11,6 +11,14 @@ const Spinner = dynamic(() => import("ruru-ui/components/spinner").then((m) => m.Spinner), ); +const Badge = dynamic(() => + import("ruru-ui/components/badge").then((m) => m.Badge), +); + +const Avatar = dynamic(() => + import("ruru-ui/components/avatar").then((m) => m.Avatar), +); + export default { button: ( @@ -39,4 +47,199 @@ export default { ), + badge: ( + +
+
+
+ }> + gray + + }> + gray + + }> + gray + + + }> + gray-subtle + + }> + gray-subtle + + }> + gray-subtle + +
+ +
+ }> + blue + + }> + blue + + }> + blue + + + }> + blue-subtle + + }> + blue-subtle + + }> + blue-subtle + +
+ +
+ }> + purple + + }> + purple + + }> + purple + + + }> + purple-subtle + + }> + purple-subtle + + }> + purple-subtle + +
+ +
+ }> + amber + + }> + amber + + }> + amber + + + }> + amber-subtle + + }> + amber-subtle + + }> + amber-subtle + +
+ +
+ }> + red + + }> + red + + }> + red + + + }> + red-subtle + + }> + red-subtle + + }> + red-subtle + +
+ +
+ }> + pink + + }> + pink + + }> + pink + + + }> + pink-subtle + + }> + pink-subtle + + }> + pink-subtle + +
+ +
+ }> + green + + }> + green + + }> + green + + + }> + green-subtle + + }> + green-subtle + + }> + green-subtle + +
+ +
+ }> + teal + + }> + teal + + }> + teal + + + }> + teal-subtle + + }> + teal-subtle + + }> + teal-subtle + +
+ +
+ }> + inverted + + }> + inverted + + }> + inverted + +
+
+
+ + ), } as Record; diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx new file mode 100644 index 0000000..37f310f --- /dev/null +++ b/apps/www/content/docs/components/badge.mdx @@ -0,0 +1,165 @@ +--- +title: Badge +description: The Badge component is used to represent a user or entity. +preview: badge +--- + +import { Badge } from "ruru-ui/components/badge"; +import { Tab, Tabs } from "fumadocs-ui/components/tabs"; +import { CubeIcon } from "@radix-ui/react-icons"; + +## Usage + + + + green-subtle + + + ```tsx + import { Badge } from "ruru-ui/components/badge"; + + export function BadgeDemo() { + return ( + green-subtle + ) + } + ``` + + + + +## Examples + +### variant + +The variant of the badge (e.g., "gray", "red", etc...). + + + +
+ gray + gray-subtle + blue + blue-subtle + purple + purple-subtle + amber + amber-subtle + red + red-subtle + pink + pink-subtle + green + Green-Subtle + teal + teal-subtle + inverted + + + ```tsx + import { Badge } from "ruru-ui/components/badge"; + + export function BadgeDemo() { + return ( +
+ gray + gray-subtle + blue + blue-subtle + purple + purple-subtle + amber + amber-subtle + red + red-subtle + pink + pink-subtle + green + Green-Subtle + teal + teal-subtle + inverted +
+ ) + } + ``` + + + + +### size + +The size of the badge (e.g., "sm", "md", "lg"). + + + + gray + gray + gray + + + ```tsx + import { Badge } from "ruru-ui/components/badge"; + + export function BadgeDemo() { + return ( +
+ + sm + + + md + + + lg + +
+ ) + } + ``` + + + + +### icon + +An optional icon to display before the badge content. + + + + } >gray + } >gray + } >gray + + + ```tsx + import { Badge } from "ruru-ui/components/badge"; + + export function BadgeDemo() { + return ( +
+ + sm + + + md + + + lg + +
+ ) + } + ``` + + + + +## Props + +| Name | Type | Default | Description | +| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------- | +| **variant** | **green-subtle** \| **gray** \| **gray-subtle** \| **blue** \| **blue-subtle** \| **purple** \| **purple-subtle** \| **amber** \| **amber-subtle** \| **red** \| **red-subtle** \| **pink** \| **pink-subtle** \| **green** \| **green-subtle** \| **teal** \| **teal-subtle** \| **inverted** | "gray" | The color variant of the badge. | +| **size** | **sm** \| **md** \| **lg** | "md" | The size of the badge. | +| **icon** | React.ReactNode | null | The icon to display in the badge. | +| **children** | React.ReactNode | null | The content of the badge. | diff --git a/packages/ui/src/components/badge.tsx b/packages/ui/src/components/badge.tsx index 106c898..12fc11c 100644 --- a/packages/ui/src/components/badge.tsx +++ b/packages/ui/src/components/badge.tsx @@ -29,7 +29,7 @@ const sizes = { }; const badgeVariants = cva( - "w-fit inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 capitalize", + "w-fit h-fit inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 capitalize", { variants: { variant: { @@ -43,7 +43,7 @@ const badgeVariants = cva( variant: "gray", size: "md", }, - } + }, ); export interface BadgeProps @@ -61,7 +61,7 @@ export interface BadgeProps */ children: React.ReactNode; /** - * Additional CSS class names to apply to the badge. + * The variant of the badge (e.g., "gray", "red", etc...). * * @type {keyof typeof variants} * @default "gray" @@ -72,24 +72,24 @@ export interface BadgeProps */ variant: keyof typeof variants; /** - * Additional CSS class names to apply to the badge. + * The size of the badge (e.g., "sm", "md", "lg"). * * @type {string} * @default "md" * @example * ```tsx - * Error + * sm * ``` */ size?: "sm" | "md" | "lg"; /** - * The variant of the badge (e.g., "primary", "secondary", "success"). + * An optional icon to display before the badge content. * * @type {string} * @default "md" * @example * ```tsx - * New + * } variant="primary" size="sm">New * ``` */ icon?: React.ReactNode;