)
}
================================================
FILE: apps/docs/components/edit-feedback.tsx
================================================
export default function EditFeedbackLinks({
title,
contentPath,
}: {
title: string
contentPath: string
}) {
const pageEditUrl = `https://github.com/IHIutch/draft-ui/tree/main/apps/docs/content/${contentPath}`
const pageFeedbackUrl = new URL(
`https://github.com/IHIutch/draft-ui/issues/new`,
)
pageFeedbackUrl.searchParams.set('title', `Feedback for “${title}”`)
// Is this the right label to set? Do we need to make a new label for this?
pageFeedbackUrl.searchParams.set('labels', 'documentation')
return (
)
================================================
FILE: apps/docs/components/fathom-analytics.tsx
================================================
// Fathom.tsx
'use client'
import { Suspense, useEffect } from 'react'
import { load, trackPageview } from 'fathom-client'
import { usePathname, useSearchParams } from 'next/navigation'
function TrackPageView() {
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
load('ERIJKXRN', {
includedDomains: ['draft-ui.com'],
auto: false,
})
}, [])
// Record a pageview when route changes
useEffect(() => {
trackPageview()
}, [pathname, searchParams])
return null
}
export default function Fathom() {
return (
)
}
================================================
FILE: apps/docs/components/home-page/cta-section.tsx
================================================
'use client'
import * as React from 'react'
import Link from 'next/link'
import { buttonVariants } from '@/components/ui'
export default function CtaSection() {
return (
Get Started
Components
)
}
================================================
FILE: apps/docs/components/home-page/example-section.tsx
================================================
'use client'
import * as React from 'react'
import BreadcrumbsDefault from '@/registry/breadcrumbs/default'
import CheckboxGroupDefault from '@/registry/checkbox-group/default'
import ComboBoxWithButton from '@/registry/combobox/with-button'
import DatePickerDefault from '@/registry/date-picker/default'
import ModalDefault from '@/registry/modal/default'
import NumberInputMobile from '@/registry/number-field/with-mobile-stepper'
import SelectDefault from '@/registry/select/default'
import SliderDefault from '@/registry/slider/default'
import SwitchDefault from '@/registry/switch/default'
import TabsDefault from '@/registry/tabs/default'
export default function ExampleSection() {
return (
)
}
================================================
FILE: apps/docs/components/link-list.tsx
================================================
'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cx } from '@/lib/cva.config'
type LinkListItemProps = {
isComing?: boolean
isWip?: boolean
isNew?: boolean
slug: string
title: string
}
export default function LinkList({ list }: { list: LinkListItemProps[] }) {
const pathname = usePathname()
return (
)
}
================================================
FILE: apps/docs/components/mode-toggle.tsx
================================================
'use client'
import * as React from 'react'
import { LaptopIcon, MoonIcon, SunIcon } from 'lucide-react'
import { useTheme } from 'next-themes'
import { IconButton, Menu, MenuContent, MenuItem } from '@/components/ui'
export function ModeToggle() {
const { setTheme, resolvedTheme } = useTheme()
return (
)
}
================================================
FILE: apps/docs/components/navigation.tsx
================================================
'use client'
import { useEffect, useState } from 'react'
import { GithubIcon, MenuIcon, TwitterIcon, XIcon } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
IconButton,
iconButtonVariants,
ModalBody,
ModalContent,
ModalHeader,
ModalOverlay,
} from 'ui'
import { cx } from '@/lib/cva.config'
import LinkList from './link-list'
import { ModeToggle } from './mode-toggle'
import SearchComponent from './search-component'
type LinkListItemProps = {
isComing?: boolean
isWip?: boolean
isNew?: boolean
slug: string
title: string
}
export default function Navigation({
gettingStartedList,
componentList,
}: {
gettingStartedList: LinkListItemProps[]
componentList: LinkListItemProps[]
}) {
const pathname = usePathname()
const [isModalOpen, setIsModalOpen] = useState(false)
useEffect(() => {
setIsModalOpen(false)
}, [pathname])
return (
Draft UI
{/* Desktop Nav */}
Getting Started
Components
{/* Mobile Nav */}
setIsModalOpen(true)}
>
Menu setIsModalOpen(false)}
autoFocus
>
Getting Started
Components
)
}
================================================
FILE: apps/docs/components/page-toc.tsx
================================================
'use client'
import { useEffect, useState } from 'react'
import { cx } from '@/lib/cva.config'
import { type TocItemProps } from '@/types'
export default function PageToc({
headings,
}: {
headings?: Array
}) {
const activeHeading = useActiveHeading((headings || []).map((h) => h.slug))
return (
)
}
function useActiveHeading(itemIds: string[]) {
const [activeId, setActiveId] = useState(null)
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setActiveId(entry.target.id)
}
})
},
{ rootMargin: `0% 0% -80% 0%` },
)
itemIds?.forEach((id) => {
const element = document.getElementById(id)
if (element) {
observer.observe(element)
}
})
return () => {
itemIds?.forEach((id) => {
const element = document.getElementById(id)
if (element) {
observer.unobserve(element)
}
})
}
}, [itemIds])
return activeId
}
================================================
FILE: apps/docs/components/search-component.tsx
================================================
'use client'
import { useState } from 'react'
import { Search } from 'lucide-react'
import Link from 'next/link'
import { DocSearchModal } from '@docsearch/react'
import '@docsearch/css/dist/style.css'
import { Button, IconButton } from 'ui'
import { cx } from '@/lib/cva.config'
export default function SearchComponent() {
const [isOpen, setIsOpen] = useState(false)
return (
<>
setIsOpen(true)}
aria-label="Search"
className="md:hidden"
size="sm"
variant="ghost"
>
{isOpen ? (
setIsOpen(false)}
placeholder="Search the docs..."
hitComponent={Hit}
transformItems={(items) => {
return items.map((item, index) => {
const a = document.createElement('a')
a.href = item.url
if (item.hierarchy?.lvl0) {
item.hierarchy.lvl0 = item.hierarchy.lvl0.replace(/&/g, '&')
}
if (item._highlightResult?.hierarchy?.lvl0?.value) {
item._highlightResult.hierarchy.lvl0.value =
item._highlightResult.hierarchy.lvl0.value.replace(
/&/g,
'&',
)
}
return {
...item,
url: `${a.pathname}${a.hash}`,
__is_result: () => true,
// __is_parent: () =>
// item.type === 'lvl1' && items.length > 1 && index === 0,
// __is_child: () =>
// item.type !== 'lvl1' &&
// items.length > 1 &&
// items[0].type === 'lvl1' &&
// index !== 0,
__is_first: () => index === 1,
__is_last: () => index === items.length - 1 && index !== 0,
}
})
}}
/>
) : null}
)
}
const Hit = ({ hit, children }) => {
return (
{children}
)
}
================================================
FILE: apps/docs/components/theme-provider.tsx
================================================
'use client'
import * as React from 'react'
import { ThemeProvider as NextThemesProvider } from 'next-themes'
import { type ThemeProviderProps } from 'next-themes/dist/types'
export default function ThemeProvider({
children,
...props
}: ThemeProviderProps) {
return {children}
}
================================================
FILE: apps/docs/content/CHANGELOG.mdx
================================================
---
title: Changelog
description: Stay up to date on the latest changes and updates
order: 5
---
## January 2024
- We have a **CLI** tool!
- Thanks to [@jolbol1](https://github.com/jolbol1) and [@jacobparis](https://github.com/jacobparis) for getting this set up. And to [@kentcdodds](https://github.com/kentcdodds) for kicking this off and suggesting this approach.
- Docs and installation have been updated to show how to install components with [`@sly-cli/sly`](https://github.com/jacobparis-insiders/sly/blob/main/cli/README.md)
- Update **React Aria Components** to `1.0.0`
- Breadcrumb now exposes `BreadcrumbLink` to correctly handle React Aria **`Link`** within components [@Littletonconnor](https://github.com/Littletonconnor) - [#20](https://github.com/IHIutch/draft-ui/pull/20)
- Updates to installation to show how to integrate React Aria **`Link`** with various frameworks using [`RouterProvider`](https://react-spectrum.adobe.com/react-aria/routing.html).
- No more `'use client'` needed. React Aria handles this automatically, behind the scenes.
- Docs and code samples were tidied up significantly
- You can now copy directly from `bash` snippets
- Thanks to [@itsMapleLeaf's](https://github.com/itsMapleLeaf) [suggestion](https://twitter.com/heyImMapleLeaf/status/1723216226833346848), we're now using namespaced imports from React Aria Components. This has significantly increased readability and helps keep things simple.
- Update Tailwind to `3.4.1`
- While there were several exciting updates in this release, we've not yet integrated things like `:has()` and `size-*`. Since this change is still fairly fresh, we're going hold off on introducing those features because, well, not changing them won't break anything.
- Several spelling and text fixes:
- [@henrikvtcodes](https://github.com/henrikvtcodes) - [#3](https://github.com/IHIutch/draft-ui/pull/3),
- [@Littletonconnor](https://github.com/Littletonconnor) - [#6](https://github.com/IHIutch/draft-ui/pull/6),
- [@Littletonconnor](https://github.com/Littletonconnor) - [#8](https://github.com/IHIutch/draft-ui/pull/18)
## November 2023
- Update **React Aria Components** to RC (`1.0.0-rc.0`)!
- Breadcrumb **`Item`** becomes **`Breadcrumb`**
- ListBox **`Item`** becomes **`ListBoxItem`**
- Menu **`Item`** becomes **`MenuItem`**
- GridList **`Item`** becomes **`GridListItem`**
- Replace **`validationState`** with **`isInvalid`** for error handling
- Add React Aria Components Tailwind config and update various classNames
- Update Installation instructions with specific React Aria Components version
- Update `Slider` example to destructure `state` key
- Replaces `class-variance-authority` with [`cva@beta`](https://beta.cva.style/getting-started/whats-new/)
- Base component styles must now be located within the `base` property:
- Replace `cn(...)` helper function with `cx(...)` by using `CVA` config and including `twMerge`
- Removes `clsx` as a dependency because it is now included in CVA as `cx`
- Updated red/error colors to be WCAG compliant
- Added additional examples to the following components:
- `Checkbox`
- `CheckboxGroup`
- `ComboBox`
- `DatePicker`
- `DateRangePicker`
- `Input`
- `NumberField`
- `Radio`
- `RadioGroup`
- `Select`
- `Tabs`
- `TextField`
## September 2023
- Reordered components' classNames properly
## August 2023
- Doc updates
- Update React imports in components
- Add lots of new examples and variants:
- `Button` variants
- `Checkbox` variants
- `ComboBox` examples
- `DateInput` variants
- `Input` variants
- `Menu` examples
- `Meter` examples
- `NumberField` examples
- `Radio` variants
- `Switch` examples
- `Tooltip` examples
- Fixed a bunch of component layouts
- Add `flex-col` to `Modal`
- Add `w-full` to `NumberField`
- Remove verbose classes from `RadioGroup`
- Add `w-full` to `Select`
- Remove `h-full` from vertical `Slider` variant
## July 2023
Using `react-aria-components@1.0.0-alpha.5`
- We have a logo and a homepage!
- Docs updated; content pages are live including installation
instructions
- Components and the rest of the site support dark mode.
- Tabs now use `--border-width` variable to avoid issues
with nested tabs
================================================
FILE: apps/docs/content/components/breadcrumbs.mdx
================================================
---
title: Breadcrumbs
description: Breadcrumbs display a hierarchy of links to the current page or resource in an application.
isComponent: true
---
By default, **`BreadcrumbLink`** uses a React Aria Component **`Link`**. To ensure this navigation works as expected with your framework, be sure to follow the Configure Routing step of the Draft UI installation.
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui breadcrumbs
```
## Examples
### Default
This is an example of the default Breadcrumb component
================================================
FILE: apps/docs/content/components/button.mdx
================================================
---
title: Button
description: A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui button
```
## Examples
### Default
The default **`Button`** uses variant `solid` and size `md`.
### Themes
You can use the `variant` prop to alter the **`Button`** theme. Variants `solid`, `outline`, `subtle`, `ghost`, `destructive`, and `link` are included by default.
### Sizes
You can use the `size` prop to alter the **`Button`** size. Sizes `xs`, `sm`, `md`, and `lg` are included by default.
### Disabled
Use the `isDisabled` prop to make the **`Button`** disabled.
================================================
FILE: apps/docs/content/components/checkbox-group.mdx
================================================
---
title: Checkbox Group
description: A checkbox group allows a user to select multiple items from a list of options.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui checkbox-group
```
## Examples
### Default
The default **`CheckboxGroup`** uses orientation `vertical`.
### Horizontal
Set the `orientation` prop to `horizontal` to use a horizontal **`CheckboxGroup`**.
### Disabled
Use the `isDisabled` prop to make the entire **`CheckboxGroup`** disabled.
================================================
FILE: apps/docs/content/components/checkbox.mdx
================================================
---
title: Checkbox
description: A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui checkbox
```
## Examples
### Default
The default **`Checkbox`** uses size `md`.
### Sizes
You can use the `size` prop to alter the **`Checkbox`** size. Sizes `sm`, `md`, and `lg` are included by default.
### Disabled
Use the `isDisabled` prop to make an individual **`Checkbox`** disabled.
================================================
FILE: apps/docs/content/components/combo-box.mdx
================================================
---
title: Combo Box
description: A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui combobox
```
## Examples
### Default
This is the default **`ComboBox`**
### With Button
Any React Aria Component **`Button`** placed inside **`ComboBox`**, will automatically toggle the appearance of **`ComboBoxContent`** when pressed.
### Disabled Keys
To disable specific **`ComboBoxItem`**'s, add an array of `disabledKey`'s to **`ComboBox`**. Ensure the **`ComboBoxItem`**'s have appropriate, corresponding `id`'s.
### Disabled
Use the `isDisabled` prop to disable the **`ComboxInput`** altogether.
================================================
FILE: apps/docs/content/components/date-picker.mdx
================================================
---
title: Date Picker
description: A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui date-picker
```
## Examples
### Default
This is the default **`DatePicker`** example.
### Disabled
Use the `isDisabled` prop to disable the entire **`DatePicker`** including the **`DateInput`**.
================================================
FILE: apps/docs/content/components/date-range-picker.mdx
================================================
---
title: Date Range Picker
description: A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui date-range-picker
```
## Examples
### Default
This is the default **`DateRangePicker`**
### Disabled
Use the `isDisabled` prop to disable the entire **`DateRangePicker`** including the **`DateInput`**'s.
================================================
FILE: apps/docs/content/components/grid-list.mdx
================================================
---
title: Grid List
description: A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.
isComponent: true
isWip: true
isComing: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui grid-list
```
## Examples
### Default
This is the default example
---
### Disabled
This is the disabled example
---
### With Label
This is an example with a label
---
### With Text
This is an example with text
---
### With Input
This is an example with a input
================================================
FILE: apps/docs/content/components/icon-button.mdx
================================================
---
title: Icon Button
description: Displays a form input field or a component that looks like an input field.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui icon-button
```
## Examples
### Default
The default **`IconButton`** uses variant `solid` and size `md`.
When using an **`IconButton`** you should almost always use an `aria-label`.
In some components, however, React Aria Components will automatically assign
an `aria-label` to buttons.
### Themes
You can use the `variant` prop to alter the button theme. Variants `solid`, `outline`, `subtle`, `ghost`, `destructive`, and `link` are included by default.
### Sizes
You can use the `size` prop to alter the button size. Sizes `xs`, `sm`, `md`, and `lg` are included by default.
### Disabled
Use the `isDisabled` prop to make the **`IconButton`** disabled.
================================================
FILE: apps/docs/content/components/input.mdx
================================================
---
title: Input
description: Displays a form input field or a component that looks like an input field.
isComponent: true
---
**`Input`** is a primitive component, it is not meant to be used on it's own.
Typically, it is used in any component that handles raw text, such as
**`TextField`**, **`NumberField`**, **`SearchField`**, and **`ComboxBox`**.
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui input
```
## Examples
### Default
The default **`Input`** uses size `md`.
### Size
You can use the `size` prop to alter the input size. Sizes `xs`, `sm`, `md`, and `lg` are included by default.
### Disabled
Use the `disabled` prop to make the **`Input`** disabled.
Currently, the **`Input`** component uses the `disabled` prop rather than `isDisabled`.
================================================
FILE: apps/docs/content/components/label.mdx
================================================
---
title: Label
description: Displays a form input field or a component that looks like an input field.
isComponent: true
---
**`Label`** is a primitive component, it is not meant to be used on it's own.
Many components that behave as form inputs automatically handle linking labels
to their respective inputs, such as **`DatePicker`**, **`RadioGroup`**,
**`Select`**, **`TextField`**, **`Switch`**, etc.
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui label
```
## Examples
### Default
This is the default **`Label`**
================================================
FILE: apps/docs/content/components/menu.mdx
================================================
---
title: Menu
description: A menu displays a list of actions or options that a user can choose.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui menu
```
## Examples
### Default
This is the default **`Menu`** example.
### Disabled
Make specific **`MenuItem`**'s disabled by adding their `id` to the **`MenuContent`**'s `disabledKeys` prop.
### With Sections
Add sections to the menu by using **`MenuSection`** and **`MenuHeader`**.
### As Checkbox List
**`MenuItem`** can act checkboxes by setting the **`MenuContent`**'s `selectionMode` prop to `multiple`.
### As Radio List
**`MenuItem`** can act radios by setting the **`MenuContent`**'s `selectionMode` prop to `single`.
### Complex Menu Items
**Coming Soon**: An example showing how to properly create **`MenuItem`**s with complex content.
================================================
FILE: apps/docs/content/components/meter.mdx
================================================
---
title: Meter
description: A meter represents a quantity within a known range, or a fractional value.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui meter
```
## Examples
Althought similar to **`ProgressBar`**, **`Meter`** is used to represent an
amount or quantity. For example: Storage space, download speed, or battery
life.
### Default
This is the default **`Meter`**
### With Custom Children
{/* TODO */}
**Coming soon:** An example of **`Meter`** with custom children
================================================
FILE: apps/docs/content/components/modal.mdx
================================================
---
title: Modal
description: A modal is an overlay element which blocks interaction with elements outside it.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui modal
```
## Examples
### Default
The default **`Modal`** uses size `md`.
### Sizes
You can use the `size` prop to alter the button size. Sizes `xs`, `sm`, `md`, `lg`, `xl`, and `full` are included by default.
### Set Autofocus
You can manually control which element recieves focus when the **`Modal`** opens by setting `autoFocus` on a focusable element.
### Dismissable
Modals are dismissable by clicking outside by default or by pressing the Esc key. To prevent this, set `isDismissable` to `false` and/or `isKeyboardDismissDisabled` to `true`.
================================================
FILE: apps/docs/content/components/number-field.mdx
================================================
---
title: Number Field
description: A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui number-field
```
## Examples
### Default
This is the default **`NumberField`**
### With Stepper
This is an example using the built-in **`NumberInputStepper`**.
### With Mobile Stepper
This is an example of a custom **`NumberField`** that makes the stepper buttons easier to press on touch devices.
### Disabled
Use the `isDisabled` prop to make the **`NumberField`** disabled.
================================================
FILE: apps/docs/content/components/progress-bar.mdx
================================================
---
title: Progress Bar
description: Progress bars show either determinate or indeterminate progress of an operation over time.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui progress-bar
```
## Examples
Althought similar to **`Meter`**, **`ProgressBar`** is used to represent
progress. In other words, it would typically be used in circumstances that
start at zero and tend toward completion. For example: Loading progress,
download progress, or battery charge progress.
### Default
This is the default **`ProgressBar`**
### With Custom Children
{/* TODO */}
**Coming soon:** This is an example with custom children
================================================
FILE: apps/docs/content/components/radio-group.mdx
================================================
---
title: Radio Group
description: A radio group allows a user to select a single item from a list of mutually exclusive options.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui radio-group
```
## Examples
### Default
The default **`RadioGroup`** uses orientation `vertical`.
### Horizontal
Set the `orientation` prop to `horizontal` to use a horizontal **`RadioGroup`**.
### Disabled
Use the `isDisabled` prop to make the entire **`RadioGroup`** disabled.
================================================
FILE: apps/docs/content/components/radio.mdx
================================================
---
title: Radio
description: Displays a form input field or a component that looks like an input field.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui radio
```
## Examples
**`Radio`** is a primitive component, it is not meant to be used on it's own. It must be wrapped in a **`RadioGroup`**.
### Default
The default **`Radio`** uses size `md`.
### Sizes
You can use the `size` prop to alter the **`Radio`** size. Sizes `sm`, `md`, and `lg` are included by default.
### Disabled
Use the `isDisabled` prop to make an individual **`Radio`** disabled.
================================================
FILE: apps/docs/content/components/search-field.mdx
================================================
---
title: Search Field
description: A search field allows a user to enter and clear a search query.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui search-field
```
## Examples
### Default
This is the default **`SearchField`**
### With Clear Button
Use **`SearchFieldClearButton`** to display a button that clear the **`SearchField`** input. By default, it will only show up when the input is not empty.
================================================
FILE: apps/docs/content/components/select.mdx
================================================
---
title: Select
description: A select displays a collapsible list of options and allows a user to select one of them.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui select
```
## Examples
### Default
This is the default **`Select`**.
### Disabled
Use the `isDisabled` prop to make the **`Select`** disabled.
================================================
FILE: apps/docs/content/components/slider.mdx
================================================
---
title: Slider
description: A slider allows a user to select one or more values within a range.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui slider
```
## Examples
### Default
The default **`Slider`** uses orientation `horizontal`.
### Vertical
Set the `orientation` prop to `vertical` to use a vertical **`Slider`**.
`orientation` value passed to **`SliderFilledTrack`** must be set to `vertical` and you must give **`SliderTrack`** a specific height for this variation to be styled correctly.
================================================
FILE: apps/docs/content/components/switch.mdx
================================================
---
title: Switch
description: A text field allows a user to enter a plain text value with a keyboard.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui switch
```
## Examples
### Default
The default **`Switch`** uses size `md`.
### Alignment
Switches can be either left or right aligned.
### Sizes
You can use the `size` prop to alter the **`Switch`** size. Sizes `sm`, `md`, and `lg` are included by default.
### Disabled
Use the `isDisabled` prop to make the **`Switch`** disabled.
================================================
FILE: apps/docs/content/components/table.mdx
================================================
---
title: Table
description: A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.
isComponent: true
isWip: true
isComing: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui table
```
## Examples
### Default
This is the default example
---
### Disabled
This is the disabled example
---
### With Label
This is an example with a label
---
### With Text
This is an example with text
---
### With Input
This is an example with a input
================================================
FILE: apps/docs/content/components/tabs.mdx
================================================
---
title: Tabs
description: Tabs organize content into multiple sections and allow users to navigate between them.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui tabs
```
## Examples
### Default
The default **`Tabs`** uses orientation `horizontal`.
### Vertical
Set the `orientation` prop to `vertical` to use vertical **`Tabs`**.
### Disabled Keys
Use `disabledKeys` prop to disable specific **`Tab`**'s **`ComboBox`**.
### Disabled
Use the `isDisabled` prop to disable all **`Tab`**'s.
================================================
FILE: apps/docs/content/components/text-field.mdx
================================================
---
title: Text Field
description: Displays a form input field or a component that looks like an input field.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui text-field
```
## Examples
### Default
This is the default **`TextField`**.
### With Error
Use the `isInvalid` prop to make an **`Input`** invalid. You can also include an error message to tell users why the `input` is invalid.
### Disabled
Use the `isDisabled` prop to make the **`Input`** disabled.
================================================
FILE: apps/docs/content/components/toggle-button.mdx
================================================
---
title: Toggle Button
description: A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
isComponent: true
isWip: true
isComing: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui toggle-button
```
## Examples
### Default
**Coming soon:** This is the default example
{/* TODO */}
---
### Disabled
**Coming soon:** This is the disabled example
{/* TODO */}
================================================
FILE: apps/docs/content/components/tooltip.mdx
================================================
---
title: Tooltip
description: A tooltip displays a description of an element on hover or focus.
isComponent: true
---
## Installation
CLICopy & Paste
```bash title="bash"
npx @sly-cli/sly add draft-ui tooltip
```
## Examples
### Default
The default **`Tooltip`** uses placement `top`.
### Placement
Set the `placement` prop to change the default **`Tooltip`** placement.
================================================
FILE: apps/docs/content/getting-started/about.mdx
================================================
---
title: About
description: The purpose of Draft UI is to make building accessible applications
faster and easier than ever
order: 4
---
## Make It Your Own
I've intentionally avoided using the Tailwind config and
arbitrary values as much as possible. While you are welcome to copy
and paste these components and use them in your projects as-is, the
goal of this project is to get your projects up and running as quickly
as possible without having to worry about accessibility and
interactivity.
## Special Thanks
There are many OSS projects who have inspired and power the backbone
of this project. This project is a combination of other folks really
hard work so I'd like to recognize and thank them:
- [shadcn/ui](https://ui.shadcn.com): Without the inspiration of shadcn/ui, this project would not
exist. The idea to create a beautiful, copy and paste library
opened my eyes on how to make a useful tool without having to
worry about bundling, distribution, and a bunch of other things I
don't know much about.
- [React Aria Components](https://react-spectrum.adobe.com/react-aria/react-aria-components.html): The backbone of this project. I consider React Aria to be the de
facto accessibility library on the web. Creating React Aria
Components has made it easier than ever to build UI that is
functional and accessible to all users.
I'd especially like to acknowledge [@devongovett](https://twitter.com/devongovett)
who has been representing React Aria on Twitter and has been very
communicative about the team's progress and quick to respond
to feedback.
- [Chakra UI](): Although not directly involved with this project, I leveraged
many of their styling decisions where I wanted additional
flexibility with components. I also heavily relied on their naming
to conventions to compose components.
I've also been heavily combing through their repo to better
understand how their Storybook and Docs are working together.
================================================
FILE: apps/docs/content/getting-started/cli.mdx
================================================
---
title: CLI
description: Get started using Draft UI faster than ever by installing components right from the command line
isNew: true
order: 3
---
## Install Sly CLI
You're able to install Draft UI components from the command line thanks to an awesome project by [Jacob Paris](https://twitter.com/jacobmparis), [`@sly-cli/sly`](https://sly-cli.fly.dev/).
Run the following code to add Draft UI to your project. **`sly`** will show you a list of components available to download.
```bash title="bash"
npx @sly-cli/sly add draft-ui
```
## Configuration
**`@sly-cli/sly`** let's you configure some specific settings about how you want to install components from the CLI. Assuming you've followed the initial Draft UI installation instructions, this is what your `sly.json` should look like.
```json title="sly.json"
{
"$schema": "https://sly-cli.fly.dev/registry/config.json",
"libraries": [
{
"name": "draft-ui",
"directory": "./components",
"transformers": ["transform-sly-install.ts"], // optional, otherwise leave empty
"postinstall": [],
}
]
}
```
Of course, if you've made your own customizations, you should update your `sly.json` to match those changes.
## Transformers
**`sly`** also allows you to manipulate how you install your components via transformers.
In order to use transformers, you'll need to install **`sly`** into your project:
```bash title="bash"
npm install -D @sly-cli/sly
```
For example, if you're using a different path alias for your directories, overwrite the default values automatically.
```ts title="transform-sly-install.ts"
const cvaConfig = '@/lib/cva.config'
/**
* @type {import('@sly-cli/sly/dist').Transformer}
*/
export default async function transformSlyInstall(input: string) {
input = input.replace('@/lib/cva.config', cvaConfig)
return input
}
```
For additional information on tranformers, go to the [`@sly-cli/sly` repo](https://github.com/jacobparis-insiders/sly/blob/main/cli/README.md#transformers).
================================================
FILE: apps/docs/content/getting-started/installation.mdx
================================================
---
title: Installation
description: Here's everything you need to get started
order: 2
---
## Install TailwindCSS
Depending on your project, steps to install Tailwind may vary.
Check out [their installation page](https://tailwindcss.com/docs/installation/framework-guides) for guidance.
## Install Required Dependencies
```bash title="bash"
npm install react-aria-components@1.0.0 cva@beta tailwind-merge tailwindcss-animate tailwindcss-react-aria-components@1.0.0
```
This project requires the following packages:
- [react-aria-components@1.0.0](https://github.com/adobe/react-spectrum/tree/main/packages/react-aria-components)
- [cva@beta](https://github.com/joe-bell/cva)
- [tailwind-merge](https://github.com/dcastil/tailwind-merge)
- [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
- [tailwindcss-react-aria-components@1.0.0](https://github.com/adobe/react-spectrum/tree/main/packages/tailwindcss-react-aria-components)
## Install Icons
Draft UI uses [Lucide Icons](https://lucide.dev/guide/packages/lucide-react) by default. You can use whichever library you prefer, but
you'll need to replace the default icons manually.
```bash title="bash"
npm install lucide-react
```
## Configure Path Aliases
Draft UI uses the path alias @/\* by default. If you
want to use a different alias, you'll need to update your
components.
```json {3-6} title="tsconfig.json"
// ...
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
// ...
```
## Configure Tailwind
Make sure to include the `tailwindcss-animate` plugin.
```js title="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class'],
content: ['app/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
plugins: [
require('tailwindcss-animate'),
require('tailwindcss-react-aria-components'),
],
}
```
## Configure CVA
Add **`twMerge`** to your `cva.config.ts`. This way, anytime you use the `cx(...)` function any conflicting Tailwind classes will be gracefully resolved.
```ts title="cva.config.ts"
import { defineConfig } from 'cva'
import { twMerge } from 'tailwind-merge'
export const { cva, cx, compose } = defineConfig({
hooks: {
onComplete: (className) => twMerge(className),
},
})
```
## Configure Routing (recommended)
Many components use built-in **`Link`** components to handle navigation. By default, these links perform native browser navigation when they are interacted with.
In order for these links to work as expected with whichever framework you're using, wrap your application using React Aria's `RouterProvider` component.
Next.js AppNext.js PagesRemixReact Router
```tsx title="app/provider.tsx"
'use client'
import { useRouter } from 'next/navigation'
import { RouterProvider } from 'react-aria-components'
export function ClientProviders({ children }) {
const router = useRouter()
return (
{children}
)
}
```
```tsx title="app/layout.tsx"
import { ClientProviders } from './provider';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
```tsx title="pages/_app.tsx"
import type { AppProps } from 'next/app'
import { useRouter } from 'next/router'
import { RouterProvider } from 'react-aria-components'
export default function MyApp({ Component, pageProps }: AppProps) {
let router = useRouter()
return (
)
}
```
```tsx title="app/root.tsx"
import { useNavigate, Outlet } from '@remix-run/react'
import { RouterProvider } from 'react-aria-components'
export default function App() {
let navigate = useNavigate()
return (
{/* ... */}
{/* ... */}
)
}
```
```tsx
import { BrowserRouter, useNavigate } from 'react-router-dom'
import { RouterProvider } from 'react-aria-components'
function App() {
let navigate = useNavigate()
return (
{/* Your app here... */}
} />
{/* ... */}
)
}
```
For more information, go to the React Aria [Client Side Routing](https://react-spectrum.adobe.com/react-aria/routing.html).
## Configure @sly-cli/sly (optional)
If your installation varies from any of the configs described above (like if your components are in a different location) you'll want to update your `sly.json` to make sure your CLI installs work correctly.
Go to the CLI page to learn more.
## All Done!
Now you're ready to start building your application!
================================================
FILE: apps/docs/content/getting-started/introduction.mdx
================================================
---
title: Introduction
description: Copy and paste-able components built with React Aria Components and
Tailwind CSS
order: 1
---
Draft UI has been massively inspired by **`shadcn/ui`** so I encourage you to take a look at [their introduction page](https://ui.shadcn.com/docs).
---
Long story short, Draft UI follows all the same ideals:
- Copy and paste components give you full control over the component
code, it is yours to use.
- Modify and adapt to your hearts content, using these docs as a
starting point.
- These components should be able to be used in any framework that
supports React.
- Draft UI is free to use on any personal or commercial projects.
And if you do, [let me know!](https://twitter.com/draft__ui)
================================================
FILE: apps/docs/contentlayer.config.ts
================================================
import { defineDocumentType, makeSource } from 'contentlayer/source-files'
// @ts-ignore
import toc from 'markdown-toc'
import rehypePrettyCode from 'rehype-pretty-code'
import remarkGfm from 'remark-gfm'
import { visit } from 'unist-util-visit'
import { rehypeComponent } from './lib/rehype-component'
import { withTableOfContents } from './lib/remark/with-table-of-contents'
import { type TocItemProps } from './types'
export const ComponentDocument = defineDocumentType(() => ({
name: 'ComponentDocument',
filePathPattern: 'components/**/*.mdx',
contentType: 'mdx',
fields: {
title: {
type: 'string',
required: true,
},
description: {
type: 'string',
},
isComponent: {
type: 'boolean',
},
isWip: {
type: 'boolean',
},
isComing: {
type: 'boolean',
},
},
computedFields: {
slug: {
type: 'string',
resolve: (post) => `/docs/${post._raw.flattenedPath}`,
},
toc: {
type: 'json',
resolve: (doc): TocItemProps => toc(doc.body.raw, { maxdepth: 3 }).json,
},
},
}))
export const GeneralDocument = defineDocumentType(() => ({
name: 'GeneralDocument',
filePathPattern: 'getting-started/**/*.mdx',
contentType: 'mdx',
fields: {
title: {
type: 'string',
required: true,
},
description: {
type: 'string',
required: true,
},
isNew: {
type: 'boolean',
},
order: {
type: 'number',
required: true,
},
},
computedFields: {
slug: {
type: 'string',
resolve: (post) => `/${post._raw.flattenedPath}`,
},
toc: {
type: 'json',
resolve: (doc): TocItemProps => toc(doc.body.raw, { maxdepth: 3 }).json,
},
},
}))
export const ChangelogDocument = defineDocumentType(() => ({
name: 'ChangelogDocument',
filePathPattern: 'CHANGELOG.mdx',
contentType: 'mdx',
fields: {
title: {
type: 'string',
required: true,
},
description: {
type: 'string',
required: true,
},
order: {
type: 'number',
required: true,
},
},
computedFields: {
slug: {
type: 'string',
resolve: () => '/changelog',
},
toc: {
type: 'json',
resolve: (doc): TocItemProps => toc(doc.body.raw, { maxdepth: 2 }).json,
},
},
}))
export default makeSource({
contentDirPath: 'content',
documentTypes: [ComponentDocument, ChangelogDocument, GeneralDocument],
mdx: {
rehypePlugins: [
rehypeComponent,
() => (tree) => {
visit(tree, (node) => {
if (node?.type === 'element' && node?.tagName === 'pre') {
const [codeEl] = node.children
if (codeEl.tagName !== 'code') {
return
}
if (codeEl.data?.meta) {
// Extract event from meta and pass it down the tree.
const regex = /event="([^"]*)"/
const match = codeEl.data?.meta.match(regex)
if (match) {
node.__event__ = match ? match[1] : null
codeEl.data.meta = codeEl.data.meta.replace(regex, '')
}
}
node.__rawString__ = codeEl.children?.[0].value
node.__src__ = node.properties?.__src__
node.__style__ = node.properties?.__style__
}
})
},
[
// @ts-expect-error related: https://github.com/atomiks/rehype-pretty-code/issues/145
rehypePrettyCode,
{
theme: 'dracula',
onVisitLine(node) {
// Prevent lines from collapsing in `display: grid` mode, and allow empty
// lines to be copy/pasted
if (node.children.length === 0) {
node.children = [{ type: 'text', value: ' ' }]
}
},
onVisitHighlightedLine(node) {
node.properties?.className?.push('line--highlighted')
},
onVisitHighlightedWord(node) {
node.properties.className = ['word--highlighted']
},
},
],
() => (tree) => {
visit(tree, (node) => {
if (node?.type === 'element' && node?.tagName === 'figure') {
if (!('data-rehype-pretty-code-figure' in node.properties)) {
return
}
// Pass code snippet to figure wrapper
if (node.__rawString__) {
node.properties['__rawString__'] = node.__rawString__
}
// npm install
if (node.__rawString__?.startsWith('npm install')) {
const npmCommand = node.__rawString__
node.properties['__npmCommand__'] = npmCommand
node.properties['__yarnCommand__'] = npmCommand.replace(
'npm install',
'yarn add',
)
node.properties['__pnpmCommand__'] = npmCommand.replace(
'npm install',
'pnpm add',
)
node.properties['__niCommand__'] = npmCommand.replace(
'npm install',
'ni',
)
}
// npx
if (node.__rawString__?.startsWith('npx')) {
const npmCommand = node.__rawString__
node.properties['__npmCommand__'] = npmCommand
node.properties['__yarnCommand__'] = npmCommand
node.properties['__pnpmCommand__'] = npmCommand.replace(
'npx',
'pnpm dlx',
)
node.properties['__niCommand__'] = npmCommand.replace(
'npx',
'nlx',
)
}
}
})
},
],
remarkPlugins: [remarkGfm, withTableOfContents],
},
})
================================================
FILE: apps/docs/lib/cva.config.ts
================================================
import { defineConfig } from 'cva'
import { twMerge } from 'tailwind-merge'
export const { cva, cx, compose } = defineConfig({
hooks: {
onComplete: (className) => twMerge(className),
},
})
================================================
FILE: apps/docs/lib/rehype-component.ts
================================================
import fs from 'fs'
import path from 'path'
import { u } from 'unist-builder'
import { visit } from 'unist-util-visit'
import { type UnistNode, type UnistTree } from '@/types'
import { Index } from '../__registry__'
export function rehypeComponent() {
return async (tree: UnistTree) => {
visit(tree, (node: UnistNode) => {
if (node.name === 'ComponentSource') {
const src = getNodeAttributeByName(node, 'src')?.value as string
if (!src) {
return null
}
try {
// Read the source file.
const filePath = path.join(process.cwd(), src)
let source = fs.readFileSync(filePath, 'utf8')
source = source.replaceAll('export default', 'export')
node.children?.push(
u('element', {
tagName: 'pre',
properties: {
__src__: src,
},
children: [
u('element', {
tagName: 'code',
properties: {
className: ['language-tsx'],
},
children: [
{
type: 'text',
value: source,
},
],
}),
],
}),
)
} catch (error) {
console.error(error)
}
}
if (node.name === 'ComponentExample') {
const name = getNodeAttributeByName(node, 'name')?.value as string
const story = getNodeAttributeByName(node, 'story')?.value as string
if (!name || !story) {
console.log('❌ name or story prop not passed on ComponentExample')
return null
}
try {
const component = Index[name][story]
const src = component.file
// Read the source file.
const filePath = path.join(process.cwd(), src)
let source = fs.readFileSync(filePath, 'utf8')
source = source.replaceAll('export default', 'export')
node.children?.push(
u('element', {
tagName: 'pre',
properties: {
__src__: src,
},
children: [
u('element', {
tagName: 'code',
properties: {
className: ['language-tsx'],
},
children: [
{
type: 'text',
value: source,
},
],
}),
],
}),
)
} catch (error) {
console.error(error)
}
}
})
}
}
function getNodeAttributeByName(node: UnistNode, name: string) {
return node.attributes?.find((attribute) => attribute.name === name)
}
================================================
FILE: apps/docs/lib/remark/with-table-of-contents.ts
================================================
import Slugger from 'github-slugger'
import { toString } from 'hast-util-to-string'
import { visit } from 'unist-util-visit'
export function withTableOfContents() {
const slugs = new Slugger()
return (tree) => {
visit(tree, 'heading', (node) => {
node.data = node.data || {}
node.data = { hName: 'Heading' }
node.data.hProperties = node.data.hProperties || {}
node.data.hProperties.lvl = node.depth
node.data.hProperties.slug = slugs.slug(toString(node))
})
}
}
================================================
FILE: apps/docs/next.config.js
================================================
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withContentlayer } = require('next-contentlayer')
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
typedRoutes: true,
},
reactStrictMode: true,
transpilePackages: ['ui'],
redirects() {
return [
{
source: '/docs/components',
destination: '/docs/components/breadcrumbs',
permanent: true,
},
// Old Links
{
source: '/getting-started',
destination: '/getting-started/introduction',
permanent: true,
},
{
source: '/docs/introduction',
destination: '/getting-started/introduction',
permanent: true,
},
{
source: '/docs/installation',
destination: '/getting-started/installation',
permanent: true,
},
{
source: '/docs/about',
destination: '/getting-started/about',
permanent: true,
},
{
source: '/docs/changelog',
destination: '/changelog',
permanent: true,
},
]
},
}
module.exports = withContentlayer(nextConfig)
================================================
FILE: apps/docs/package.json
================================================
{
"name": "docs",
"version": "0.1.0",
"private": true,
"main": "src/index.ts",
"types": "src/index.ts",
"scripts": {
"dev": "rm -rf .next & rm -rf .contentlayer && contentlayer build && next dev",
"build": "contentlayer build && next build",
"start": "next start",
"lint": "eslint --ignore-path .gitignore '**/*.{js,jsx,cjs,mjs,ts,tsx,json}'",
"typecheck": "tsc --noEmit --pretty"
},
"dependencies": {
"@docsearch/react": "^3.4.0",
"@vercel/analytics": "^1.0.1",
"contentlayer": "0.3.4",
"fathom-client": "^3.5.0",
"fs-extra": "11.1.1",
"gray-matter": "^4.0.3",
"hast-util-to-string": "^3.0.0",
"lucide-react": "^0.259.0",
"markdown-toc": "^1.2.0",
"next": "14.0.4",
"next-contentlayer": "0.3.4",
"next-themes": "^0.2.1",
"react": "18.2.0",
"react-aria-components": "1.0.0",
"react-dom": "18.2.0",
"react-stately": "^3.21.0",
"rehype-pretty-code": "^0.12.3",
"remark-gfm": "^3.0.1",
"shikiji": "^0.9.0",
"tailwind-merge": "^1.13.2",
"ui": "workspace:*",
"unist-util-visit": "^5.0.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.9",
"@types/node": "18.16.19",
"@types/react": "18.0.27",
"@types/react-dom": "18.0.10",
"@types/unist": "^3.0.2",
"autoprefixer": "^10.4.14",
"eslint": "^8.56.0",
"eslint-config-custom": "workspace:*",
"eslint-plugin-mdx": "^2.3.2",
"postcss": "^8.4.23",
"postcss-config": "workspace:*",
"tailwind-config": "workspace:*",
"tailwindcss": "^3.4.1",
"ts-config": "workspace:*",
"ts-pattern": "^5.0.6",
"typescript": "^5.1.6",
"unist-builder": "^4.0.0"
}
}
================================================
FILE: apps/docs/postcss.config.js
================================================
/** @type {import('postcss').Config} */
module.exports = require('postcss-config/postcss.config.cjs')
================================================
FILE: apps/docs/public/site.webmanifest
================================================
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
================================================
FILE: apps/docs/registry/breadcrumbs/default.tsx
================================================
import { ChevronRight } from 'lucide-react'
import { BreadcrumbItem, BreadcrumbLink, Breadcrumbs } from 'ui'
export default function Default() {
return (
}>
Home}>
React AriauseBreadcrumbs
)
}
================================================
FILE: apps/docs/registry/button/default.tsx
================================================
import { Button } from 'ui'
export default function Default() {
return
}
================================================
FILE: apps/docs/registry/button/disabled.tsx
================================================
import { Button } from 'ui'
export default function Disabled() {
return (
)
}
================================================
FILE: apps/docs/registry/button/sizes.tsx
================================================
import { Button } from 'ui'
export default function Sizes() {
return (
)
}
================================================
FILE: apps/docs/registry/button/theme.tsx
================================================
import { Button } from 'ui'
export default function Theme() {
return (