docs: the avatar and checkbox component is documented (#397)

Issue #390 Finished checkbox
openlabs-dev · Sep 20, 2024 · 9943814 · 9943814
1 parent b483345
commit 9943814
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 23 deletions.
diff --git a/docs/content/docs/components/accordion.mdx b/docs/content/docs/components/accordion.mdx
@@ -42,7 +42,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openlabs/ui'
+} from '@openlite/ui'
 
 function App() {
   return (
@@ -110,7 +110,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openlabs/ui'
+} from '@openlite/ui'
 
 function App() {
   return (
@@ -174,7 +174,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openlabs/ui'
+} from '@openlite/ui'
 
 function App() {
   return (
@@ -238,7 +238,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openlabs/ui'
+} from '@openlite/ui'
 
 function App() {
   return (

diff --git a/docs/content/docs/components/avatar.mdx b/docs/content/docs/components/avatar.mdx
@@ -12,8 +12,8 @@ description: An avatar is a graphical representation of a user or the user's cha
 ## Usage
 
 
-<Avatar className="relative overflow-visible">
-  <AvatarImage src="/example-gerzon.jpeg" />
+<Avatar>
+  <AvatarImage className="m-0" src="/example-gerzon.jpeg" />
   <AvatarFallback>CN</AvatarFallback>
 </Avatar>
 
@@ -35,21 +35,41 @@ function App() {
 
 ### Size
 
-<Avatar size="sm">
-  <AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
-  <AvatarFallback>GE</AvatarFallback>
-</Avatar>
+<div className='flex items-center gap-3'>
+  <Avatar size="lg">
+    <AvatarImage className="m-0" src="/example-gerzon.jpeg" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+  <Avatar size="md">
+    <AvatarImage className="m-0" src="/example-gerzon.jpeg" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+  <Avatar size="sm">
+    <AvatarImage className="m-0" src="/example-gerzon.jpeg" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+</div>
 
 ```jsx
 import * as React from 'react'
 import { Avatar, AvatarImage, AvatarFallback } from '@openlite/ui'
 
 function App() {
   return (
-    <Avatar size="sm">
-      <AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
-      <AvatarFallback>GE</AvatarFallback>
-    </Avatar>
+    <>
+      <Avatar size="lg">
+        <AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
+        <AvatarFallback>GE</AvatarFallback>
+      </Avatar>
+      <Avatar size="md">
+        <AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
+        <AvatarFallback>GE</AvatarFallback>
+      </Avatar>
+      <Avatar size="sm">
+        <AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
+        <AvatarFallback>GE</AvatarFallback>
+      </Avatar>
+    </>
   )
 }
 ```

diff --git a/docs/content/docs/components/checkbox.mdx b/docs/content/docs/components/checkbox.mdx
@@ -1,4 +1,73 @@
 ---
 title: Checkbox
 description: A checkbox is a user interface element that allows users to select one or more options from a set of options.
----
+---
+
+# Imports
+
+- **Checkbox**: The main component to display a list of accordion items.
+
+## Usage
+
+<Checkbox />
+
+```jsx	
+import {Checkbox} from '@openlite/ui'
+
+function App() {
+  return(
+    <Checkbox />
+  )
+}
+```
+
+## Examples
+
+### Variants
+
+<Checkbox />
+<Checkbox variant="primary" />
+<Checkbox variant="success" />
+<Checkbox variant="error" />
+<Checkbox variant="warn" />
+
+```jsx
+import {Checkbox} from '@openlite/ui'
+
+function App() {
+  return(
+    <Checkbox />
+    <Checkbox variant="primary" />
+    <Checkbox variant="success" />
+    <Checkbox variant="error" />
+    <Checkbox variant="warn" />
+  )
+}
+```
+
+### Rounded
+
+<Checkbox rounded="none" />
+<Checkbox rounded="sm" />
+<Checkbox rounded="lg" variant="primary" />
+
+```jsx
+import {Checkbox} from '@openlite/ui'
+
+function App() {
+  return(
+    <Checkbox rounded="none" />
+    <Checkbox rounded="sm" />
+    <Checkbox rounded="lg" variant="primary" />
+  )
+}
+```
+
+## API
+
+### Checkbox Props
+
+| Props | Type | Description |
+| ----- | ---- | ----------- |
+| variant | `'default' \| 'primary' \| 'success' \| 'warn' \| 'error'` | The variant of the checkbox. |
+| rounded | `'none' \| 'sm' \| 'lg'` | The rounded of the checkbox. |
diff --git a/docs/mdx-components.tsx b/docs/mdx-components.tsx
@@ -12,7 +12,8 @@ import {
 import type { ReactNode } from 'react'
 import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup'
 import { cn } from '@openlite/ui/tailwind'
-import { AccordionContent, AccordionItem, AccordionTrigger, Accordion as AccordionUi, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@openlite/ui'
+
+import { AccordionContent, AccordionItem, AccordionTrigger, Accordion as AccordionUi, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox } from '@openlite/ui'
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
@@ -53,6 +54,8 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     CardContent,
     CardDescription,
     CardFooter,
+    avatar,
+    Checkbox,
     Callout,
     TypeTable,
     Accordion,

diff --git a/src/plugins/components/checkbox.ts b/src/plugins/components/checkbox.ts
@@ -20,18 +20,11 @@ export const checkbox = cva('peer size-4 shrink-0 focus-visible:outline-none foc
     rounded: {
       none: 'rounded-none',
       sm: 'rounded-small',
-      md: 'rounded-medium',
       lg: 'rounded-large',
     },
-    size: {
-      sm: 'size-4',
-      md: 'size-5',
-      lg: 'size-6',
-    },
   },
   defaultVariants: {
     variant: 'default',
     rounded: 'sm',
-    size: 'sm',
   },
 })