Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: document dialog, input and label components #398

Merged
merged 2 commits into from
Sep 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/content/docs/components/card.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ description: A card is a flexible and extensible content container.
## Usage

<Card className="max-w-sm">
<div className="w-full flex justify-center items-center bg-default-50 rounded-t-lg h-60">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
<div className="w-full flex justify-center items-center bg-default-50 rounded-t-lg h-64 overflow-hidden">
<img src="/example-sebastian.jpeg" className='object-cover' />
</div>
<CardHeader>
<CardTitle className="[&>p]:m-0 p-0 m-0 !text-4xl">
Expand Down Expand Up @@ -69,8 +69,8 @@ function App() {
### Card with horizontal orientation

<Card orientation="horizontal">
<div className="max-w-sm w-2/5 flex justify-center items-center bg-default-50 rounded-l-lg h-64">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
<div className="max-w-sm w-2/5 flex justify-center items-center rounded-l-lg h-64 overflow-hidden">
<img src="/example-sebastian.jpeg" className='object-cover h-full' />
</div>
<div className='w-3/5'>
<CardHeader>
Expand Down
101 changes: 100 additions & 1 deletion docs/content/docs/components/dialog.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,103 @@
---
title: Dialog
description: A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision.
---
---

# Imports

- **Dialog**: The main component to display a dialog.
- **DialogOverlay**: The overlay component to display a dialog.
- **DialogPortal**: The portal component to display a dialog.
- **DialogClose**: The close button component to close a dialog.
- **DialogDescription**: The description component to display a dialog.
- **DialogTitle**: The title component to display a dialog.
- **DialogTrigger**: The trigger component to display a dialog.
- **DialogHeader**: The header component to display a dialog.
- **DialogContent**: The content component to display a dialog.
- **DialogFooter**: The footer component to display a dialog.

## Usage

<Dialog>
<div className='flex justify-center'>
<DialogTrigger asChild>
<Button outline="default" >Edit Profile</Button>
</DialogTrigger>
</div>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle className="font-bold text-3xl">Lorem ipsum </DialogTitle>
<DialogDescription className="font-light">
say somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay something
</DialogDescription>
</DialogHeader>
<div className='flex flex-col gap-1'>
<Label htmlFor="name">
Name
</Label>
<Input
id="name"
defaultValue="Sebastian Garcias"
className="col-span-3"
/>
</div>
<div className='flex flex-col gap-1'>
<Label htmlFor="username">
Username
</Label>
<Input
id="username"
defaultValue="@Sebasjs"
className="col-span-3"
/>
</div>
<DialogFooter>
<Button type="submit">Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>

```jsx
import { Dialog, DialogOverlay, DialogPortal, DialogClose, DialogDescription, DialogTitle, DialogTrigger, DialogHeader, DialogContent, DialogFooter,} from '@openlite/ui'

function App() {
return(
<Dialog>
<DialogTrigger asChild>
<Button outline="default" >Edit Profile</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle className="font-bold text-3xl">Lorem ipsum </DialogTitle>
<DialogDescription className="font-light">
say somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay something
</DialogDescription>
</DialogHeader>
<div className='flex flex-col gap-1'>
<Label htmlFor="name">
Name
</Label>
<Input
id="name"
defaultValue="Sebastian Garcias"
className="col-span-3"
/>
</div>
<div className='flex flex-col gap-1'>
<Label htmlFor="username">
Username
</Label>
<Input
id="username"
defaultValue="@Sebasjs"
className="col-span-3"
/>
</div>
<DialogFooter>
<Button type="submit">Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
```
79 changes: 78 additions & 1 deletion docs/content/docs/components/input.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,81 @@
---
title: Input
description: An input is a field used to elicit a response from a user.
---
---

# Import

- **Input**: The main component to display an input.

## Usage

<Input placeholder="Email" />

```jsx
import {Input} from '@openlite/ui'

function App() {
return(
<Input placeholder="Email" />
)
}
```

## Examples

### Rounded

<div className='grid grid-cols-2 gap-4'>
<Input rounded="none" placeholder="Email" />
<Input rounded="sm" placeholder="Email" />
<Input rounded="md" placeholder="Email" />
<Input rounded="lg" placeholder="Email" />
</div>

```jsx
import {Input} from '@openlite/ui'

function App() {
return(
<>
<Input rounded="none" placeholder="Email" />
<Input rounded="sm" placeholder="Email" />
<Input rounded="md" placeholder="Email" />
<Input rounded="lg" placeholder="Email" />
</>
)
}
```

### Border

<div className='grid grid-cols-2 gap-4'>
<Input border="none" placeholder="Email" />
<Input border="sm" placeholder="Email" />
<Input border="md" placeholder="Email" />
<Input border="lg" placeholder="Email" />
</div>

```jsx
import {Input} from '@openlite/ui'

function App() {
return(
<>
<Input border="none" placeholder="Email" />
<Input border="sm" placeholder="Email" />
<Input border="md" placeholder="Email" />
<Input border="lg" placeholder="Email" />
</>
)
}
```

## API

### Input Props

| Props | Type | Description |
| ----- | ---- | ----------- |
| rounded | `'none' \| 'sm' \| 'md' \| 'lg' ` | The rounded of the input. |
| border | `'none' \| 'sm' \| 'md' \| 'lg' ` | The border of the input. |
81 changes: 80 additions & 1 deletion docs/content/docs/components/label.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,83 @@
---
title: Label
description: A label is a small piece of UI that communicates the status of an element.
---
---

# Import

- **Label**: The main component to display a label.

## Usage

<Label>Label</Label>

```jsx
import {Label} from '@openlite/ui'

function App() {
return(
<Label>Label</Label>
)
}
```

## Examples

### Variants

<div className='flex gap-4 flex-wrap'>
<Label variant="none">Label none</Label>
<Label variant="default">Label default</Label>
<Label variant="primary">Label primary</Label>
<Label variant="success">Label success</Label>
<Label variant="warn">Label warn</Label>
<Label variant="error">Label error</Label>
</div>

```jsx
import {Label} from '@openlite/ui'

function App() {
return(
<>
<Label variant="none">Label none</Label>
<Label variant="default">Label default</Label>
<Label variant="primary">Label primary</Label>
<Label variant="success">Label success</Label>
<Label variant="warn">Label warn</Label>
<Label variant="error">Label error</Label>
</>
)
}
```

### Size

<div className='flex gap-4'>
<Label size="sm">Label</Label>
<Label size="md">Label</Label>
<Label size="lg">Label</Label>
</div>

```jsx
import {Label} from '@openlite/ui'

function App() {
return(
<>
<Label size="sm">Label</Label>
<Label size="md">Label</Label>
<Label size="lg">Label</Label>
</>
)
}
```

## API

### Label Props

| Props | Type | Description |
| ----- | ---- | ----------- |
| variant | `'none' \| 'default' \| 'primary' \| 'success' \| 'warn' \| 'error'` | The variant of the label. |
| size | `'sm' \| 'md' \| 'lg'` | The size of the label. |
14 changes: 13 additions & 1 deletion docs/mdx-components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ 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, Checkbox } 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, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label } from '@openlite/ui'

export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
Expand Down Expand Up @@ -55,6 +55,18 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
CardDescription,
CardFooter,
Checkbox,
Dialog,
DialogOverlay,
DialogPortal,
DialogClose,
DialogDescription,
DialogTitle,
DialogTrigger,
DialogHeader,
DialogContent,
DialogFooter,
Input,
Label,
Callout,
TypeTable,
Accordion,
Expand Down
8 changes: 4 additions & 4 deletions src/plugins/components/label.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ import { cva } from 'class-variance-authority'
* </Label>
*/
export const label = cva(
'text-small font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
'font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
{
variants: {
size: {
sm: 'text-small',
md: 'text-medium',
lg: 'text-large',
sm: 'text-sm',
md: 'text-md',
lg: 'text-lg',
},
variant: {
none: 'text-foreground/70',
Expand Down
Loading