diff --git a/.github/workflows/vercel-pull-request.yml b/.github/workflows/vercel-pull-request.yml index 9a630672..0b2f96f1 100644 --- a/.github/workflows/vercel-pull-request.yml +++ b/.github/workflows/vercel-pull-request.yml @@ -5,8 +5,21 @@ on: jobs: build_and_deploy: runs-on: ubuntu-latest + permissions: write-all steps: - uses: actions/checkout@v4 + + - name: Install Bun + run: | + curl -fsSL https://bun.sh/install | bash + echo "$HOME/.bun/bin" >> $GITHUB_PATH + + - name: Install Global Package with Bun + run: bun install --global vercel@latest + + - name: Generate Source Code Preview + run: bun run generate-preview + - uses: amondnet/vercel-action@v25 id: vercel-deploy with: diff --git a/.gitignore b/.gitignore index 3bdf8f4f..61f2ca64 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ ignore # testing /coverage +/components/docs/generated/previews.json # next.js /.next/ /out/ diff --git a/.prettierrc b/.prettierrc index c2ab25bb..6740fab4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -20,7 +20,7 @@ "^[./]" ], "importOrderSeparation": true, - "singleQuote": true, + "singleQuote": false, "trailingComma": "none", "tabWidth": 2, "semi": false, diff --git a/app/(app)/colors/(colors)/color-generator.tsx b/app/(app)/colors/(colors)/color-generator.tsx index c45ab104..4236f31f 100644 --- a/app/(app)/colors/(colors)/color-generator.tsx +++ b/app/(app)/colors/(colors)/color-generator.tsx @@ -1,21 +1,21 @@ -'use client' +"use client" -import React, { useState } from 'react' +import React, { useState } from "react" -import { ColorRow } from '@/app/(app)/colors/(colors)/color-row' -import { generateColorScale, getColorName } from '@/resources/lib/colors' -import { parseColor } from '@react-stately/color' -import { IconArrowWallRight } from 'justd-icons' -import { ColorField, defaultColor, useMediaQuery } from 'ui' +import { ColorRow } from "@/app/(app)/colors/(colors)/color-row" +import { generateColorScale, getColorName } from "@/resources/lib/colors" +import { parseColor } from "@react-stately/color" +import { IconArrowWallRight } from "justd-icons" +import { ColorField, defaultColor, useMediaQuery } from "ui" export function ColorGenerator() { - const [colorObj, setColorObj] = useState(defaultColor.toString('hex')) + const [colorObj, setColorObj] = useState(defaultColor.toString("hex")) const handleChange = (newColor: any) => { - setColorObj(newColor.toString('hex')) + setColorObj(newColor.toString("hex")) } const colorScales = generateColorScale(colorObj) - const isDesktop = useMediaQuery('(min-width: 1024px)') + const isDesktop = useMediaQuery("(min-width: 1024px)") return (
@@ -24,7 +24,7 @@ export function ColorGenerator() { className="relative" value={parseColor(colorObj)} onChange={handleChange} - placeholder={defaultColor.toString('hex')} + placeholder={defaultColor.toString("hex")} suffix={ @@ -36,10 +36,8 @@ export function ColorGenerator() {
diff --git a/app/(app)/colors/(colors)/color-item.tsx b/app/(app)/colors/(colors)/color-item.tsx index 2bed8e28..4e296761 100644 --- a/app/(app)/colors/(colors)/color-item.tsx +++ b/app/(app)/colors/(colors)/color-item.tsx @@ -1,33 +1,24 @@ -import * as React from 'react' +import * as React from "react" -import { formatColorForTailwind, textColorBasedOnBg } from '@/resources/lib/colors' -import { parseColor } from '@react-stately/color' -import type { ColorFormat } from '@react-types/color' -import { IconCheck, IconDuplicate } from 'justd-icons' -import type { ListBoxItemProps } from 'react-aria-components' -import { ListBoxItem } from 'react-aria-components' -import type { ColorShade, FormatOnlyForTailwindVariableType } from 'resources/types' -import { toast } from 'sonner' -import { cn, ColorSwatch, Tooltip } from 'ui' -import { copyToClipboard } from 'usemods' +import { formatColorForTailwind, textColorBasedOnBg } from "@/resources/lib/colors" +import { parseColor } from "@react-stately/color" +import type { ColorFormat } from "@react-types/color" +import { IconCheck, IconDuplicate } from "justd-icons" +import type { ListBoxItemProps } from "react-aria-components" +import { ListBoxItem } from "react-aria-components" +import type { ColorShade, FormatOnlyForTailwindVariableType } from "resources/types" +import { toast } from "sonner" +import { cn, isBrightColor } from "ui" +import { copyToClipboard } from "usemods" interface ColorItemProps extends ListBoxItemProps { item: ColorShade name: string isForTailwindVariable: boolean selectedFormat: FormatOnlyForTailwindVariableType | ColorFormat - swatchClassName?: string - showItem?: boolean } -const ColorItem = ({ - showItem, - swatchClassName, - item, - name, - isForTailwindVariable, - selectedFormat -}: ColorItemProps) => { +const ColorItem = ({ item, name, isForTailwindVariable, selectedFormat }: ColorItemProps) => { const [copied, setCopied] = React.useState(false) const handleCopy = async (selectedColor: string) => { const toCopy = isForTailwindVariable @@ -38,48 +29,39 @@ const ColorItem = ({ setTimeout(() => { setCopied(false) }, 2000) - toast('Copied to clipboard!') + toast.success(`Copy ${toCopy} to clipboard.`, { + classNames: { + toast: "[&:has([data-icon])_[data-content]]:ml-0", + icon: "hidden" + } + }) } return ( handleCopy(parseColor(item.color as string)?.toString(selectedFormat))} style={{ - color: textColorBasedOnBg(item.color) + color: textColorBasedOnBg(item.color), + backgroundColor: item.color }} > - -
+
- - {showItem && ( -
- {item.shade} - - - {isForTailwindVariable && - selectedFormat !== 'hexa' && - selectedFormat !== 'hex' && - 'tw/'} - {selectedFormat === 'hex' - ? parseColor(item.color as string)?.toString(selectedFormat) - : selectedFormat} - - - {parseColor(item.color as string)?.toString(selectedFormat)} - - -
- )} + + + {item.shade} + ) } diff --git a/app/(app)/colors/(colors)/color-palette.tsx b/app/(app)/colors/(colors)/color-palette.tsx index 98a6b797..a35835b3 100644 --- a/app/(app)/colors/(colors)/color-palette.tsx +++ b/app/(app)/colors/(colors)/color-palette.tsx @@ -1,15 +1,15 @@ -'use client' +"use client" -import * as React from 'react' -import { useEffect, useState } from 'react' +import * as React from "react" +import { useEffect, useState } from "react" -import { ColorGenerator } from '@/app/(app)/colors/(colors)/color-generator' -import _colors from '@/app/(app)/colors/(colors)/colors.json' -import { useInView } from 'react-intersection-observer' -import type { ColorItemProps } from 'resources/types' -import { Container, gridStyles, Loader } from 'ui' +import { ColorGenerator } from "@/app/(app)/colors/(colors)/color-generator" +import _colors from "@/app/(app)/colors/(colors)/colors.json" +import { useInView } from "react-intersection-observer" +import type { ColorItemProps } from "resources/types" +import { Container, gridStyles, Loader } from "ui" -import { ColorRow } from './color-row' +import { ColorRow } from "./color-row" const filteredColors = _colors.map(([name, colorShades]) => ({ name, @@ -28,7 +28,7 @@ export function ColorPalette() { useEffect(() => { if (inView && hasMore) { - const nextPage = colors.length + 9 + const nextPage = colors.length + 8 const newColors = filteredColors.slice(0, nextPage) setColors(newColors) if (newColors.length >= filteredColors.length) { @@ -43,7 +43,7 @@ export function ColorPalette() {
diff --git a/app/(app)/colors/(colors)/color-row.tsx b/app/(app)/colors/(colors)/color-row.tsx index a5f52451..c10f5805 100644 --- a/app/(app)/colors/(colors)/color-row.tsx +++ b/app/(app)/colors/(colors)/color-row.tsx @@ -1,20 +1,20 @@ -import * as React from 'react' +import * as React from "react" -import { CopyJsonColorShades } from '@/app/(app)/colors/(colors)/copy-json-color-shades' +import { CopyJsonColorShades } from "@/app/(app)/colors/(colors)/copy-json-color-shades" import { allFormats, formatOnlyForTailwindVariableValues, getColorName, tailwindColorNames -} from '@/resources/lib/colors' -import type { ColorFormat } from '@react-types/color' -import { IconBrandTailwindcss } from 'justd-icons' -import { ListBox, Text, ToggleButton } from 'react-aria-components' -import type { ColorItemProps, FormatOnlyForTailwindVariableType } from 'resources/types' -import { toast } from 'sonner' -import { buttonStyles, gridStyles, Heading, Select, Tooltip } from 'ui' +} from "@/resources/lib/colors" +import type { ColorFormat } from "@react-types/color" +import { IconBrandTailwindcss } from "justd-icons" +import { ListBox, Text, ToggleButton } from "react-aria-components" +import type { ColorItemProps, FormatOnlyForTailwindVariableType } from "resources/types" +import { toast } from "sonner" +import { buttonStyles, gridStyles, Select, Tooltip } from "ui" -import { ColorItem } from './color-item' +import { ColorItem } from "./color-item" interface ColorRowProps extends React.HtmlHTMLAttributes { item: ColorItemProps @@ -24,21 +24,18 @@ interface ColorRowProps extends React.HtmlHTMLAttributes { } export function ColorRow({ showItem = false, swatchClassName, item }: ColorRowProps) { - const [isForTailwindVariable, setIsForTailwindVariable] = React.useState(false) + const [isForTailwindVariable, setIsForTailwindVariable] = React.useState(true) const [selectedFormat, setSelectedFormat] = React.useState< ColorFormat | null | FormatOnlyForTailwindVariableType - >('hex') + >("hsl") return (
- +

{tailwindColorNames.includes(item.name) ? item.name : getColorName(item.children[4].color)} - +

<> - {['rgb', 'rgba', 'hsl', 'hsla', 'hsb', 'hsba'].includes( + {["rgb", "rgba", "hsl", "hsla", "hsb", "hsba"].includes( selectedFormat as ColorFormat ) && ( { @@ -64,7 +61,7 @@ export function ColorRow({ showItem = false, swatchClassName, item }: ColorRowPr ) ) { toast( - 'You can only switch up the color format to RGB, RGBA, HSL, HSLA, HSB, or HSBA.' + "You can only switch up the color format to RGB, RGBA, HSL, HSLA, HSB, or HSBA." ) return } @@ -72,7 +69,7 @@ export function ColorRow({ showItem = false, swatchClassName, item }: ColorRowPr }} > {({ isSelected }) => ( - + )} @@ -120,7 +117,7 @@ export function ColorRow({ showItem = false, swatchClassName, item }: ColorRowPr showItem, swatchClassName, isForTailwindVariable, - selectedFormat: selectedFormat ?? 'hsl', + selectedFormat: selectedFormat ?? "hsl", item: color, name: item.name }} diff --git a/app/(app)/colors/(colors)/copy-json-color-shades.tsx b/app/(app)/colors/(colors)/copy-json-color-shades.tsx index 93f08ce2..d97bcc48 100644 --- a/app/(app)/colors/(colors)/copy-json-color-shades.tsx +++ b/app/(app)/colors/(colors)/copy-json-color-shades.tsx @@ -1,11 +1,11 @@ -import React, { useState } from 'react' +import React, { useState } from "react" -import { getColorName } from '@/resources/lib/colors' -import { wait } from '@/resources/lib/utils' -import { IconBrackets2, IconCheck, IconDuplicate } from 'justd-icons' -import { Heading } from 'react-aria-components' -import { Button, ColorSwatch, Modal } from 'ui' -import { copyToClipboard } from 'usemods' +import { getColorName } from "@/resources/lib/colors" +import { wait } from "@/resources/lib/utils" +import { IconBrackets2, IconCheck, IconDuplicate } from "justd-icons" +import { Heading } from "react-aria-components" +import { Button, ColorSwatch, Modal } from "ui" +import { copyToClipboard } from "usemods" export function CopyJsonColorShades({ colorScales, @@ -17,7 +17,7 @@ export function CopyJsonColorShades({ colorScales: any }) { const [open, setOpen] = useState(false) - const [colorName, setColorName] = useState(name || 'unknown') + const [colorName, setColorName] = useState(name || "unknown") const [isCopied, setIsCopied] = useState(false) const handleOpen = () => { @@ -27,9 +27,9 @@ export function CopyJsonColorShades({ const codeString = colorScales .map(({ shade, color }: any) => `'${shade}': '${color}'`) - .join(',\n ') + .join(",\n ") const renderColorScaleAsCode = (colorScales: any, colorName: string) => { - const formattedColorName = colorName.includes('-') + const formattedColorName = colorName.includes("-") ? `'${getColorName(colorScales[4].color)}'` : colorName return `${formattedColorName}: {\n ${codeString}\n}` @@ -48,7 +48,7 @@ export function CopyJsonColorShades({ - .dlc]:p-0' }}> + .dlc]:p-0" }}> {name}
diff --git a/app/(app)/colors/page.tsx b/app/(app)/colors/page.tsx index be19a3c9..bc169bcb 100644 --- a/app/(app)/colors/page.tsx +++ b/app/(app)/colors/page.tsx @@ -1,22 +1,22 @@ -import React from 'react' +import React from "react" -import { ColorPalette } from '@/app/(app)/colors/(colors)/color-palette' -import { Header } from '@/components/header' -import { siteConfig } from '@/resources/config/site' -import type { Metadata } from 'next' +import { ColorPalette } from "@/app/(app)/colors/(colors)/color-palette" +import { Header } from "@/components/header" +import { siteConfig } from "@/resources/config/site" +import type { Metadata } from "next" export const metadata: Metadata = { - title: 'Colors / ' + siteConfig.name, + title: "Colors / " + siteConfig.name, description: - 'A stash of over 154 colors blending TailwindCSS vibes with HTML color names, served up in 8 slick formats.', + "A stash of over 154 colors blending TailwindCSS vibes with HTML color names, served up in 8 slick formats.", metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url), applicationName: siteConfig.name, - category: 'Colors', + category: "Colors", twitter: { - card: 'summary_large_image', - title: 'Colors / ' + siteConfig.name, + card: "summary_large_image", + title: "Colors / " + siteConfig.name, description: - 'A stash of over 154 colors blending TailwindCSS vibes with HTML color names, served up in 8 slick formats.' + "A stash of over 154 colors blending TailwindCSS vibes with HTML color names, served up in 8 slick formats." } } diff --git a/app/(app)/components/page.tsx b/app/(app)/components/page.tsx index 088989e2..d13fbfed 100644 --- a/app/(app)/components/page.tsx +++ b/app/(app)/components/page.tsx @@ -1,16 +1,16 @@ -import React from 'react' +import React from "react" -import { CardListBox } from '@/app/(app)/components/partials/card-list-box' -import { OnThisPage } from '@/app/(app)/components/partials/on-this-page' -import { Header } from '@/components/header' -import { siteConfig } from '@/resources/config/site' -import type { Metadata } from 'next' -import { Container } from 'ui' +import { CardListBox } from "@/app/(app)/components/partials/card-list-box" +import { OnThisPage } from "@/app/(app)/components/partials/on-this-page" +import { Header } from "@/components/header" +import { siteConfig } from "@/resources/config/site" +import type { Metadata } from "next" +import { Container } from "ui" export const metadata: Metadata = { - title: 'Components / ' + siteConfig.name, + title: "Components / " + siteConfig.name, description: - 'Over 50 accessible components, neatly grouped into sections. Guaranteed usability for all!', + "Over 50 accessible components, neatly grouped into sections. Guaranteed usability for all!", metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url), applicationName: siteConfig.name } diff --git a/app/(app)/components/partials/card-list-box.tsx b/app/(app)/components/partials/card-list-box.tsx index 3ea8db2c..741898db 100644 --- a/app/(app)/components/partials/card-list-box.tsx +++ b/app/(app)/components/partials/card-list-box.tsx @@ -1,10 +1,10 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { docs } from '#site/content' -import { goodTitle } from '@/resources/lib/utils' -import { buttonStyles, Description, Grid, Heading, Link } from 'ui' +import { docs } from "#site/content" +import { goodTitle } from "@/resources/lib/utils" +import { buttonStyles, Description, Grid, Heading, Link } from "ui" type GroupedComponents = { [category: string]: { @@ -18,8 +18,8 @@ type GroupedComponents = { const groupByCategory = (data: any[]): GroupedComponents => { return data.reduce((acc: GroupedComponents, item) => { - const parts = item.slug.split('/') - if (parts[1] === 'components') { + const parts = item.slug.split("/") + if (parts[1] === "components") { const category = parts[2] if (!acc[category]) { acc[category] = [] diff --git a/app/(app)/components/partials/on-this-page.tsx b/app/(app)/components/partials/on-this-page.tsx index 3539b2e1..db1c1023 100644 --- a/app/(app)/components/partials/on-this-page.tsx +++ b/app/(app)/components/partials/on-this-page.tsx @@ -1,12 +1,12 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { groupedComponents } from '@/app/(app)/components/partials/card-list-box' -import { useActiveItem } from '@/components/table-of-contents' -import { goodTitle } from '@/resources/lib/utils' -import { ListBox, ListBoxItem } from 'react-aria-components' -import { cn, Heading, useMediaQuery } from 'ui' +import { groupedComponents } from "@/app/(app)/components/partials/card-list-box" +import { useActiveItem } from "@/components/table-of-contents" +import { goodTitle } from "@/resources/lib/utils" +import { ListBox, ListBoxItem } from "react-aria-components" +import { cn, Heading, useMediaQuery } from "ui" const navigations = Object.keys(groupedComponents).map((x) => { return { @@ -17,8 +17,8 @@ const navigations = Object.keys(groupedComponents).map((x) => { }) export function OnThisPage() { - const activeId = useActiveItem(navigations.map((x) => x.href.split('#')[1])) - const isDesktop = useMediaQuery('(min-width: 1024px)') + const activeId = useActiveItem(navigations.map((x) => x.href.split("#")[1])) + const isDesktop = useMediaQuery("(min-width: 1024px)") return ( <> {isDesktop ? ( @@ -28,7 +28,7 @@ export function OnThisPage() { {navigations.map(({ text, href, id }) => ( - + ))}
@@ -51,8 +51,8 @@ export function AsideLink({ return ( i.slug).find((i) => i.split('/').pop() === params.slug) + const originalUrl = docs.map((i) => i.slug).find((i) => i.split("/").pop() === params.slug) if (!originalUrl) { notFound() } diff --git a/app/(app)/docs/[...slug]/page.tsx b/app/(app)/docs/[...slug]/page.tsx index af540fac..11d84a96 100644 --- a/app/(app)/docs/[...slug]/page.tsx +++ b/app/(app)/docs/[...slug]/page.tsx @@ -1,13 +1,13 @@ -import { docs } from '#site/content' -import { DocRefs } from '@/components/doc-refs' -import { MDXContent } from '@/components/mdx-components' -import { Pager } from '@/components/pager' -import { TableOfContents } from '@/components/table-of-contents' -import { siteConfig } from '@/resources/config/site' -import '@/resources/styles/code.css' -import { type Metadata } from 'next' -import { notFound } from 'next/navigation' -import { Separator, Toast } from 'ui' +import { docs } from "#site/content" +import { DocRefs } from "@/components/doc-refs" +import { MDXContent } from "@/components/mdx-components" +import { Pager } from "@/components/pager" +import { TableOfContents } from "@/components/table-of-contents" +import { siteConfig } from "@/resources/config/site" +import "@/resources/styles/code.css" +import { type Metadata } from "next" +import { notFound } from "next/navigation" +import { Separator, Toast } from "ui" export interface DocPageProps { params: { @@ -15,8 +15,8 @@ export interface DocPageProps { } } -async function getPostFromParams(params: DocPageProps['params']) { - const slug = params?.slug?.join('/') +async function getPostFromParams(params: DocPageProps["params"]) { + const slug = params?.slug?.join("/") const doc = docs.find((doc) => doc.slugAsParams === slug) return doc @@ -30,15 +30,15 @@ export async function generateMetadata({ params }: DocPageProps): Promise { - return docs.map((doc) => ({ slug: doc.slugAsParams.split('/') })) +export async function generateStaticParams(): Promise { + return docs.map((doc) => ({ slug: doc.slugAsParams.split("/") })) } export default async function PostPage({ params }: DocPageProps) { @@ -88,7 +88,7 @@ export default async function PostPage({ params }: DocPageProps) { return ( <> - {doc.title === 'Toast' && } + {doc.title === "Toast" && }

@@ -115,7 +115,7 @@ export default async function PostPage({ params }: DocPageProps) { order: doc.order }} docs={docs - .filter((doc) => doc.slug.startsWith('docs/components')) + .filter((doc) => doc.slug.startsWith("docs/components")) .map((doc) => ({ order: doc.order, slug: doc.slug, title: doc.title }))} />

diff --git a/app/(app)/docs/layout.tsx b/app/(app)/docs/layout.tsx index b309d357..e18daa7b 100644 --- a/app/(app)/docs/layout.tsx +++ b/app/(app)/docs/layout.tsx @@ -1,6 +1,6 @@ -import React, { type ReactNode } from 'react' +import React, { type ReactNode } from "react" -import { Aside } from '@/components/aside' +import { Aside } from "@/components/aside" export default function Layout({ children }: { children: ReactNode }) { return ( diff --git a/app/(app)/docs/page.tsx b/app/(app)/docs/page.tsx index 308c291e..83984a5f 100644 --- a/app/(app)/docs/page.tsx +++ b/app/(app)/docs/page.tsx @@ -1,5 +1,5 @@ -import { redirect } from 'next/navigation' +import { redirect } from "next/navigation" export default function Page() { - redirect('/docs/getting-started/installation') + redirect("/docs/getting-started/installation") } diff --git a/app/(app)/icons/page.tsx b/app/(app)/icons/page.tsx index fb920856..ff2b89cb 100644 --- a/app/(app)/icons/page.tsx +++ b/app/(app)/icons/page.tsx @@ -1,17 +1,17 @@ -import React from 'react' +import React from "react" -import { Header } from '@/components/header' -import { siteConfig } from '@/resources/config/site' -import type { Metadata } from 'next' -import { Container } from 'ui' +import { Header } from "@/components/header" +import { siteConfig } from "@/resources/config/site" +import type { Metadata } from "next" +import { Container } from "ui" -import type { SearchParamsProps } from './partials/icons-list' -import { IconsList } from './partials/icons-list' +import type { SearchParamsProps } from "./partials/icons-list" +import { IconsList } from "./partials/icons-list" export const metadata: Metadata = { - title: 'Justd Icons / ' + siteConfig.name, + title: "Justd Icons / " + siteConfig.name, description: - ' A library of beautifully crafted react icons, perfect for enhancing the visual appeal and user experience of your web applications. ', + " A library of beautifully crafted react icons, perfect for enhancing the visual appeal and user experience of your web applications. ", metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url), applicationName: siteConfig.name } diff --git a/app/(app)/icons/partials/controller/index.tsx b/app/(app)/icons/partials/controller/index.tsx index 359ddee2..e79e633e 100644 --- a/app/(app)/icons/partials/controller/index.tsx +++ b/app/(app)/icons/partials/controller/index.tsx @@ -1,27 +1,27 @@ -import React from 'react' +import React from "react" -import { useQueryString } from 'hooks/use-query-string' -import { IconBullet, IconBulletFill } from 'justd-icons' -import { usePathname, useRouter } from 'next/navigation' -import { Button } from 'ui' +import { useQueryString } from "hooks/use-query-string" +import { IconBullet, IconBulletFill } from "justd-icons" +import { usePathname, useRouter } from "next/navigation" +import { Button } from "ui" -import type { SearchParamsProps } from '../icons-list' -import { Install } from './install' -import { Search } from './search' -import { SelectSize } from './select-size' +import type { SearchParamsProps } from "../icons-list" +import { Install } from "./install" +import { Search } from "./search" +import { SelectSize } from "./select-size" export function Controller({ searchParams }: SearchParamsProps) { const router = useRouter() const pathname = usePathname() const { t } = searchParams - const [isSelected, setSelected] = React.useState<'solid' | 'regular'>( - (t as 'solid' | 'regular') || 'regular' + const [isSelected, setSelected] = React.useState<"solid" | "regular">( + (t as "solid" | "regular") || "regular" ) const { createQueryString } = useQueryString() - const onFilter = (type: 'solid' | 'regular') => { - router.push(pathname + '?' + createQueryString('t', type), { + const onFilter = (type: "solid" | "regular") => { + router.push(pathname + "?" + createQueryString("t", type), { scroll: false }) setSelected(type) @@ -35,13 +35,13 @@ export function Controller({ searchParams }: SearchParamsProps) {
diff --git a/app/(app)/icons/partials/controller/install.tsx b/app/(app)/icons/partials/controller/install.tsx index f5d07532..491d6eac 100644 --- a/app/(app)/icons/partials/controller/install.tsx +++ b/app/(app)/icons/partials/controller/install.tsx @@ -1,21 +1,21 @@ -import React from 'react' +import React from "react" -import { IconCheck, IconDuplicate } from 'justd-icons' -import { Button, Menu } from 'ui' -import { copyToClipboard } from 'usemods' +import { IconCheck, IconDuplicate } from "justd-icons" +import { Button, Menu } from "ui" +import { copyToClipboard } from "usemods" -type Tool = 'Bun' | 'Yarn' | 'PNPM' | 'NPM' +type Tool = "Bun" | "Yarn" | "PNPM" | "NPM" export function Install() { const [isCopied, setIsCopied] = React.useState(false) - const [command, setCommand] = React.useState('') - const commandArgs = 'justd-icons' + const [command, setCommand] = React.useState("") + const commandArgs = "justd-icons" const installMap: Record = { - Bun: 'bun add', - Yarn: 'yarn add', - PNPM: 'pnpm add', - NPM: 'npm i' + Bun: "bun add", + Yarn: "yarn add", + PNPM: "pnpm add", + NPM: "npm i" } const handleCopy = (tool: Tool) => { @@ -29,7 +29,7 @@ export function Install() { return (
- {command || 'npm i justd-icons'} + {command || "npm i justd-icons"} - handleCopy('Bun')}>Bun - handleCopy('Yarn')}>Yarn - handleCopy('PNPM')}>PNPM - handleCopy('NPM')}>NPM + handleCopy("Bun")}>Bun + handleCopy("Yarn")}>Yarn + handleCopy("PNPM")}>PNPM + handleCopy("NPM")}>NPM
diff --git a/app/(app)/icons/partials/controller/search.tsx b/app/(app)/icons/partials/controller/search.tsx index 0f8928e9..093c020e 100644 --- a/app/(app)/icons/partials/controller/search.tsx +++ b/app/(app)/icons/partials/controller/search.tsx @@ -1,8 +1,8 @@ -import React from 'react' +import React from "react" -import { usePathname, useRouter, useSearchParams } from 'next/navigation' -import { SearchField } from 'ui' -import { useDebouncedCallback } from 'use-debounce' +import { usePathname, useRouter, useSearchParams } from "next/navigation" +import { SearchField } from "ui" +import { useDebouncedCallback } from "use-debounce" export function Search() { const searchParams = useSearchParams() @@ -13,9 +13,9 @@ export function Search() { const handleSearch = useDebouncedCallback((term) => { const params = new URLSearchParams(searchParams) if (term) { - params.set('query', term) + params.set("query", term) } else { - params.delete('query') + params.delete("query") } replace(`${pathname}?${params.toString()}`) @@ -24,7 +24,7 @@ export function Search() { return ( diff --git a/app/(app)/icons/partials/controller/select-size.tsx b/app/(app)/icons/partials/controller/select-size.tsx index 7e8ccdc8..cf422ffa 100644 --- a/app/(app)/icons/partials/controller/select-size.tsx +++ b/app/(app)/icons/partials/controller/select-size.tsx @@ -1,16 +1,16 @@ -import React from 'react' +import React from "react" -import { useQueryString } from 'hooks/use-query-string' -import { IconChevronLgDown } from 'justd-icons' -import { usePathname, useRouter } from 'next/navigation' -import type { Selection } from 'react-aria-components' -import title from 'title' -import { Button, Menu } from 'ui' +import { useQueryString } from "hooks/use-query-string" +import { IconChevronLgDown } from "justd-icons" +import { usePathname, useRouter } from "next/navigation" +import type { Selection } from "react-aria-components" +import title from "title" +import { Button, Menu } from "ui" const sizes = [ - { id: 'size-4', name: 'Size 4' }, - { id: 'size-5', name: 'Size 5' }, - { id: 'size-6', name: 'Size 6' } + { id: "size-4", name: "Size 4" }, + { id: "size-5", name: "Size 5" }, + { id: "size-6", name: "Size 6" } ] export function SelectSize() { @@ -18,9 +18,9 @@ export function SelectSize() { const pathname = usePathname() const { createQueryString } = useQueryString() - const [selectedSize, setSelectSize] = React.useState(new Set(['size-5'])) + const [selectedSize, setSelectSize] = React.useState(new Set(["size-5"])) const onSelectionChange = (size: Selection) => { - router.push(pathname + '?' + createQueryString('s', [...size].join(',')), { + router.push(pathname + "?" + createQueryString("s", [...size].join(",")), { scroll: false }) setSelectSize(size) @@ -33,10 +33,10 @@ export function SelectSize() { appearance="outline" > - {title([...selectedSize].join(', ').replace('size-', ' ')) || '5'} + {title([...selectedSize].join(", ").replace("size-", " ")) || "5"} - {title([...selectedSize].join(', ').replace('-', ' ')) || 'Size 5'} + {title([...selectedSize].join(", ").replace("-", " ")) || "Size 5"} @@ -49,8 +49,8 @@ export function SelectSize() { > {(item) => ( - {item.name} /{' '} - {item.name === 'Size 4' ? '20px' : item.name === 'Size 5' ? '24px' : '28px'} + {item.name} /{" "} + {item.name === "Size 4" ? "20px" : item.name === "Size 5" ? "24px" : "28px"} )} diff --git a/app/(app)/icons/partials/icons-list.tsx b/app/(app)/icons/partials/icons-list.tsx index 3f433ae4..88598ea2 100644 --- a/app/(app)/icons/partials/icons-list.tsx +++ b/app/(app)/icons/partials/icons-list.tsx @@ -1,35 +1,35 @@ -'use client' +"use client" -import React, { Suspense, useRef } from 'react' +import React, { Suspense, useRef } from "react" -import * as icons from 'justd-icons' -import { IconDownload } from 'justd-icons' -import { useSearchParams } from 'next/navigation' -import { ListBox, ListBoxItem } from 'react-aria-components' -import * as ReactDOMServer from 'react-dom/server' -import { toast } from 'sonner' -import { Loader, Menu } from 'ui' -import { copyToClipboard } from 'usemods' +import * as icons from "justd-icons" +import { IconDownload } from "justd-icons" +import { useSearchParams } from "next/navigation" +import { ListBox, ListBoxItem } from "react-aria-components" +import * as ReactDOMServer from "react-dom/server" +import { toast } from "sonner" +import { Loader, Menu } from "ui" +import { copyToClipboard } from "usemods" -import { Controller } from './controller' -import { box, item } from './styles' +import { Controller } from "./controller" +import { box, item } from "./styles" export interface SearchParamsProps { searchParams: { query: string - t: 'solid' | 'regular' + t: "solid" | "regular" } } export function IconsList({ searchParams }: SearchParamsProps) { const { query, t } = searchParams - const filterType = t ?? 'regular' + const filterType = t ?? "regular" const filteredIcons = Object.entries(icons).filter(([name]) => { const matchesSearch = query ? name.toLowerCase().includes(query.toLowerCase()) : true - const isSolid = name.toLowerCase().endsWith('fill') + const isSolid = name.toLowerCase().endsWith("fill") const matchesFilter = - (filterType === 'solid' && isSolid) || (filterType === 'regular' && !isSolid) + (filterType === "solid" && isSolid) || (filterType === "regular" && !isSolid) return matchesSearch && matchesFilter }) @@ -64,9 +64,9 @@ interface IconListItemProps { export function IconListItem({ name, Icon }: IconListItemProps) { const [isSelected, setSelected] = React.useState(false) const searchParams = useSearchParams() - const selectedSize = searchParams.get('s') ?? 'size-5' - const handleCopy = (type: 'text' | 'jsx') => { - const textToCopy = type === 'jsx' ? `<${name} />` : name + const selectedSize = searchParams.get("s") ?? "size-5" + const handleCopy = (type: "text" | "jsx") => { + const textToCopy = type === "jsx" ? `<${name} />` : name copyToClipboard(textToCopy).then(() => { toast( <> @@ -90,9 +90,9 @@ export function IconListItem({ name, Icon }: IconListItemProps) { - handleCopy('jsx')}>Copy JSX + handleCopy("jsx")}>Copy JSX copySvgToClipboard(Icon)}>Copy SVG - handleCopy('text')}>Copy Name + handleCopy("text")}>Copy Name downloadSvg(Icon, name)}> Download SVG @@ -107,16 +107,16 @@ export function IconListItem({ name, Icon }: IconListItemProps) { const copySvgToClipboard = (IconComponent: React.ComponentType) => { const svgString = ReactDOMServer.renderToStaticMarkup() navigator.clipboard.writeText(svgString).then(() => { - toast('SVG copied to clipboard') + toast("SVG copied to clipboard") }) } const downloadSvg = (IconComponent: React.ComponentType, fileName: string) => { const svgString = ReactDOMServer.renderToStaticMarkup() - const blob = new Blob([svgString], { type: 'image/svg+xml' }) + const blob = new Blob([svgString], { type: "image/svg+xml" }) const url = URL.createObjectURL(blob) - const link = document.createElement('a') + const link = document.createElement("a") link.href = url link.download = `${fileName}.svg` document.body.appendChild(link) diff --git a/app/(app)/icons/partials/styles.ts b/app/(app)/icons/partials/styles.ts index 3e4b1db7..494a39e6 100644 --- a/app/(app)/icons/partials/styles.ts +++ b/app/(app)/icons/partials/styles.ts @@ -1,15 +1,15 @@ -import { tv } from 'tailwind-variants' +import { tv } from "tailwind-variants" const styles = tv({ slots: { - box: 'flex justify-around flex-wrap gap-4', + box: "flex justify-around flex-wrap gap-4", item: [ - 'size-8 sm:size-12 grid cursor-pointer text-fg/80 place-content-center rounded-md', - 'focus:bg-primary focus:text-primary-fg focus:outline-none', - 'selected:bg-primary selected:text-primary-fg', - '[&[data-open=true]]:bg-primary [&[data-open=true]]:text-primary-fg', - 'hover:bg-secondary hover:text-secondary-fg', - 'focus-visible:ring-4 focus-visible:ring-primary-fg/15' + "size-8 sm:size-12 grid cursor-pointer text-fg/80 place-content-center rounded-md", + "focus:bg-primary focus:text-primary-fg focus:outline-none", + "selected:bg-primary selected:text-primary-fg", + "[&[data-open=true]]:bg-primary [&[data-open=true]]:text-primary-fg", + "hover:bg-secondary hover:text-secondary-fg", + "focus-visible:ring-4 focus-visible:ring-primary-fg/15" ] } }) diff --git a/app/(app)/sink/layout.tsx b/app/(app)/sink/layout.tsx index ca13f426..d1588dd0 100644 --- a/app/(app)/sink/layout.tsx +++ b/app/(app)/sink/layout.tsx @@ -1,4 +1,4 @@ -import { Container } from 'ui' +import { Container } from "ui" export default function Layout({ children }: { children: React.ReactNode }) { return {children} diff --git a/app/(app)/sink/page.tsx b/app/(app)/sink/page.tsx index e2a77da3..e51cfef4 100644 --- a/app/(app)/sink/page.tsx +++ b/app/(app)/sink/page.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import React from 'react' +import React from "react" export default function Page() { return
diff --git a/app/(app)/themes/blocks.tsx b/app/(app)/themes/blocks.tsx index 1d9af4df..f0fbb204 100644 --- a/app/(app)/themes/blocks.tsx +++ b/app/(app)/themes/blocks.tsx @@ -1,14 +1,16 @@ -import { LoginRootForm } from '@/app/(app)/themes/blocks/forms/login-root-form' -import { LoginSocial } from '@/app/(app)/themes/blocks/forms/login-social' +"use client" -import { LoginForm } from './blocks/forms/login-form' +import { Buttons } from "@/app/(app)/themes/blocks/buttons" +import { RangeCalendarBlocks } from "@/app/(app)/themes/blocks/range-calendar-blocks" + +import { LoginForm } from "./blocks/login-form" export function Blocks() { return ( -
+
- - + +
) } diff --git a/app/(app)/themes/blocks/buttons.tsx b/app/(app)/themes/blocks/buttons.tsx new file mode 100644 index 00000000..b7aca2a8 --- /dev/null +++ b/app/(app)/themes/blocks/buttons.tsx @@ -0,0 +1,26 @@ +"use client" + +import { Button, Card, Checkbox, Switch } from "ui" + +export function Buttons() { + return ( +
+ +
+ + +
+
+ + +
+ + + Remember me + + + Toggle Theme + +
+ ) +} diff --git a/app/(app)/themes/blocks/forms/login-form.tsx b/app/(app)/themes/blocks/forms/login-form.tsx deleted file mode 100644 index 0ceaae86..00000000 --- a/app/(app)/themes/blocks/forms/login-form.tsx +++ /dev/null @@ -1,31 +0,0 @@ -'use client' - -import { Button, Card, Checkbox, Form, Link, TextField } from 'ui' - -export function LoginForm() { - return ( - - -
{}}> - - - -
- Remember me - - Forgot password? - -
- - - - -
- - ) -} diff --git a/app/(app)/themes/blocks/forms/login-root-form.tsx b/app/(app)/themes/blocks/forms/login-root-form.tsx deleted file mode 100644 index 1236e024..00000000 --- a/app/(app)/themes/blocks/forms/login-root-form.tsx +++ /dev/null @@ -1,32 +0,0 @@ -'use client' - -import { Button, Card, Choicebox, Form, TextField } from 'ui' - -export function LoginRootForm() { - return ( - - -
{}}> - - - - - - - - -
- - ) -} diff --git a/app/(app)/themes/blocks/forms/login-social.tsx b/app/(app)/themes/blocks/forms/login-social.tsx deleted file mode 100644 index afc137c1..00000000 --- a/app/(app)/themes/blocks/forms/login-social.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { IconBrandGithub, IconBrandThreads, IconBrandX } from 'justd-icons' -import { Button, Card, Link, ShowMore } from 'ui' - -export function LoginSocial() { - return ( - - Log in - - - - - - - - - - - - - Continue with Email - - - - ) -} diff --git a/app/(app)/themes/blocks/forms/toggle-form.tsx b/app/(app)/themes/blocks/forms/toggle-form.tsx deleted file mode 100644 index ea77314e..00000000 --- a/app/(app)/themes/blocks/forms/toggle-form.tsx +++ /dev/null @@ -1,29 +0,0 @@ -'use client' - -import { Button, Card, Checkbox, Link, TextField } from 'ui' - -export function ToggleForm() { - return ( - - - -
- - -
-
- Remember me - - Forgot password? - -
- - - - - - ) -} diff --git a/app/(app)/themes/blocks/login-form.tsx b/app/(app)/themes/blocks/login-form.tsx new file mode 100644 index 00000000..2d96632e --- /dev/null +++ b/app/(app)/themes/blocks/login-form.tsx @@ -0,0 +1,27 @@ +"use client" + +import { Button, Card, Checkbox, Link, TextField } from "ui" + +export function LoginForm() { + return ( + + + Login + Don't loose the level, just keep on going. + + + + +
+ Remember me + + Forgot password? + +
+ + + + + + ) +} diff --git a/app/(app)/themes/blocks/range-calendar-blocks.tsx b/app/(app)/themes/blocks/range-calendar-blocks.tsx new file mode 100644 index 00000000..c0dee5ac --- /dev/null +++ b/app/(app)/themes/blocks/range-calendar-blocks.tsx @@ -0,0 +1,21 @@ +"use client" + +import React from "react" + +import { getLocalTimeZone, today } from "@internationalized/date" +import { Card, RangeCalendar } from "ui" + +export function RangeCalendarBlocks() { + const now = today(getLocalTimeZone()) + const tomorrowWeek = today(getLocalTimeZone()).add({ days: 12 }) + + const [value, setValue] = React.useState({ + start: now, + end: tomorrowWeek + }) + return ( + + + + ) +} diff --git a/app/(app)/themes/controller.tsx b/app/(app)/themes/controller.tsx new file mode 100644 index 00000000..247b9951 --- /dev/null +++ b/app/(app)/themes/controller.tsx @@ -0,0 +1,96 @@ +import React from "react" + +import type { Key } from "react-aria-components" +import { toast } from "sonner" +import { Button, Select, Sheet } from "ui" +import { copyToClipboard } from "usemods" + +import type { ThemeProps } from "./themes-list" +import { themesList } from "./themes-list" + +const availableThemes = [ + { id: "default", textValue: "Default" }, + { id: "zinc", textValue: "Zinc" }, + { id: "slate", textValue: "Slate" }, + { id: "regent", textValue: "Regent" } +] + +interface Props { + themeId: ThemeProps + applyTheme: (theme: ThemeProps) => void +} + +export function Controller({ themeId, applyTheme }: Props) { + const [selectedTheme, setSelectedTheme] = React.useState(themeId) + const [open, setOpen] = React.useState(false) + return ( +
+
+ + + + + + 
+                {JSON.stringify(themesList[themeId], null, 2)}
+
+ + + Close + + + + + +
+
+ ) +} diff --git a/app/(app)/themes/controller/index.tsx b/app/(app)/themes/controller/index.tsx deleted file mode 100644 index fed8f22c..00000000 --- a/app/(app)/themes/controller/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function Controller() { - return
-} diff --git a/app/(app)/themes/page.tsx b/app/(app)/themes/page.tsx index d85bfae0..59fef789 100644 --- a/app/(app)/themes/page.tsx +++ b/app/(app)/themes/page.tsx @@ -1,11 +1,12 @@ -import { Header } from '@/components/header' -import { siteConfig } from '@/resources/config/site' -import type { Metadata } from 'next' +import { Themes } from "@/app/(app)/themes/themes" +import { Header } from "@/components/header" +import { siteConfig } from "@/resources/config/site" +import type { Metadata } from "next" export const metadata: Metadata = { - title: 'Themes / ' + siteConfig.name, + title: "Themes / " + siteConfig.name, description: - 'Curated themes, carefully selected just for you, ready to be copied, pasted, and seamlessly integrated into your apps, giving your projects a polished and custom vibe without the hassle.', + "Curated themes, carefully selected just for you, ready to be copied, pasted, and seamlessly integrated into your apps, giving your projects a polished and custom vibe without the hassle.", metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url), applicationName: siteConfig.name } @@ -17,7 +18,7 @@ export default function Page() { es - {/**/} + {/**/}
) } diff --git a/app/(app)/themes/themes-list.ts b/app/(app)/themes/themes-list.ts new file mode 100644 index 00000000..34d55d0a --- /dev/null +++ b/app/(app)/themes/themes-list.ts @@ -0,0 +1,192 @@ +type ThemeProps = "default" | "zinc" | "regent" | "slate" +type ThemeVariables = { + [key: string]: string +} +const themesList: Record = { + default: { + root: { + "--light": "0 0% 98.04%", + "--dark": "240 10% 6%", + "--background": "0 0% 100%", + "--fg": "240 10% 3.9%", + "--overlay": "0 0% 100%", + "--overlay-fg": "240 10% 3.9%", + "--primary": "216.74 100% 50%", + "--primary-fg": "0 0% 100%", + "--secondary": "240 4.8% 95.9%", + "--secondary-fg": "240 5.9% 10%", + "--tertiary": "0 0% 100%", + "--tertiary-fg": "240 4% 16%", + "--success": "152 69% 31%", + "--success-fg": "0 0% 100%", + "--info": "81.97 84.52% 67.06%", + "--info-fg": "89.27 80.39% 10%", + "--muted": "240 4.8% 95.9%", + "--muted-fg": "240 3.8% 46.1%", + "--danger": "0 72.22% 50.59%", + "--danger-fg": "0 85.71% 97.25%", + "--warning": "43.26 96.41% 56.27%", + "--warning-fg": "20.91 91.67% 14.12%", + "--border": "240 5.9% 90%", + "--input": "240 5.9% 90%", + "--ring": "var(--primary)", + "--toggle": "240 5% 84%", + "--radius": "0.55rem" + }, + dark: { + "--background": "0 0% 0%", + "--fg": "0 0% 98%", + "--overlay": "240 6% 6%", + "--overlay-fg": "0 0% 98%", + "--primary": "216 98% 52%", + "--primary-fg": "0 0% 100%", + "--secondary": "240 3.7% 15.9%", + "--secondary-fg": "0 0% 98%", + "--info": "84.91 100% 66.47%", + "--info-fg": "120 100% 13.14%", + "--tertiary": "240 10% 5.5%", + "--tertiary-fg": "240 5% 96%", + "--ring": "var(--primary)", + "--muted": "240 3.7% 15.9%", + "--muted-fg": "240 5% 64.9%", + "--toggle": "240 5% 26%", + "--border": "240 7% 15%", + "--input": "240 3.7% 15.9%" + } + }, + zinc: { + root: { + "--light": "0 0% 98.04%", + "--dark": "240 10% 6%", + "--background": "0 0% 100%", + "--fg": "240 10% 3.9%", + "--overlay": "0 0% 100%", + "--overlay-fg": "240 10% 3.9%", + "--primary": "240 10% 3.92%", + "--primary-fg": "0 0% 98.04%", + "--secondary": "240 4.8% 95.9%", + "--secondary-fg": "240 5.9% 10%", + "--tertiary": "0 0% 100%", + "--tertiary-fg": "240 4% 16%", + "--success": "152 69% 31%", + "--success-fg": "0 0% 100%", + "--muted": "240 4.8% 95.9%", + "--muted-fg": "240 3.8% 46.1%", + "--border": "240 5.9% 90%", + "--input": "240 5.9% 90%", + "--ring": "var(--primary)", + "--toggle": "240 5% 84%" + }, + dark: { + "--background": "0 0% 0%", + "--fg": "0 0% 98.04%", + "--overlay": "240 6% 6%", + "--overlay-fg": "0 0% 98%", + "--primary": "0 0% 98.04%", + "--primary-fg": "240 10% 3.92%", + "--secondary": "240 3.7% 15.9%", + "--secondary-fg": "0 0% 98%", + "--info": "84.91 100% 66.47%", + "--info-fg": "120 100% 13.14%", + "--tertiary": "240 10% 5.5%", + "--tertiary-fg": "240 5% 96%", + "--ring": "var(--primary)", + "--muted": "240 3.7% 15.9%", + "--muted-fg": "240 5% 64.9%", + "--toggle": "240 5% 26%", + "--border": "240 7% 15%", + "--input": "240 3.7% 15.9%" + } + }, + slate: { + root: { + "--light": "210 40% 98.04%", + "--dark": "228.57 84% 4.9%", + "--background": "0 0% 100%", + "--fg": "228.57 84% 4.9%", + "--overlay": "210 40% 98.04%", + "--overlay-fg": "222.22 47.37% 11.18%", + "--primary": "228.57 84% 4.9%", + "--primary-fg": "210 40% 96.08%", + "--secondary": "210 40% 96.08%", + "--secondary-fg": "222.22 47.37% 11.18%", + "--tertiary": "210 40% 96.08%", + "--tertiary-fg": "222.22 47.37% 11.18%", + "--success": "152 69% 31%", + "--success-fg": "0 0% 100%", + "--muted": "222.22 47.37% 11.18%", + "--muted-fg": "215.38 16.32% 46.86%", + "--border": "214.29 31.82% 91.37%", + "--input": "212.73 26.83% 88%", + "--ring": "var(--primary)", + "--toggle": "212.73 26.83% 83.92%" + }, + dark: { + "--background": "228.57 84% 3%", + "--fg": "210 40% 98.04%", + "--overlay": "228.57 84% 4.5%", + "--overlay-fg": "210 40% 98.04%", + "--primary": "210 40% 96.08%", + "--primary-fg": "222.22 47.37% 11.18%", + "--secondary": "222.22 47.37% 11.18%", + "--secondary-fg": "210 40% 96.08%", + "--info": "84.91 100% 66.47%", + "--info-fg": "120 100% 13.14%", + "--tertiary": "228.57 84% 4.5%", + "--tertiary-fg": "210 40% 96.08%", + "--ring": "var(--primary)", + "--muted": "217.24 32.58% 17.45%", + "--muted-fg": "215 20.22% 65.1%", + "--toggle": "215.29 25% 23%", + "--border": "222.22 47.37% 13%", + "--input": "217.24 32.58% 17.45%" + } + }, + regent: { + root: { + "--light": "210 15% 92.16%", + "--dark": "210 13.64% 8.63%", + "--background": "0 0% 100%", + "--fg": "210 13.64% 8.63%", + "--overlay": "210 15% 99%", + "--overlay-fg": "210 13.64% 8.63%", + "--primary": "210 13.64% 8.63%", + "--primary-fg": "210 15% 92.16%", + "--secondary": "210 15% 97%", + "--secondary-fg": "210 13.33% 17.65%", + "--tertiary": "210 15% 92.16%", + "--tertiary-fg": "210 13.33% 17.65%", + "--success": "152 69% 31%", + "--success-fg": "0 0% 100%", + "--muted": "208.24 12.59% 26.47%", + "--muted-fg": "210 14.29% 53.33%", + "--border": "211.76 14.29% 90%", + "--input": "211.76 14.29% 85%", + "--ring": "var(--primary)", + "--toggle": "211.76 14.29% 80%" + }, + dark: { + "--background": "210 13.64% 4%", + "--fg": "210 15% 92.16%", + "--overlay": "240 6% 6%", + "--overlay-fg": "0 0% 98%", + "--primary": "210 40% 96.08%", + "--primary-fg": "222.22 47.37% 11.18%", + "--secondary": "210 13.33% 10%", + "--secondary-fg": "210 15% 84.31%", + "--info": "84.91 100% 66.47%", + "--info-fg": "120 100% 13.14%", + "--tertiary": "210 13.64% 6%", + "--tertiary-fg": "210 15% 84.31%", + "--ring": "var(--primary)", + "--muted": "217.24 32.58% 17.45%", + "--muted-fg": "215 20.22% 65.1%", + "--toggle": "208.24 12.59% 26.47%", + "--border": "210 13.33% 13%", + "--input": "210 13.33% 17.65%" + } + } +} + +export type { ThemeProps } +export { themesList } diff --git a/app/(app)/themes/themes.tsx b/app/(app)/themes/themes.tsx index 3a19d3d5..1ccafff6 100644 --- a/app/(app)/themes/themes.tsx +++ b/app/(app)/themes/themes.tsx @@ -1,13 +1,67 @@ -import { Container } from 'ui' +"use client" -import { Blocks } from './blocks' -import { Controller } from './controller' +import React from "react" + +import { Controller } from "@/app/(app)/themes/controller" +import { useTheme } from "next-themes" +import { Container } from "ui" + +import { Blocks } from "./blocks" +import type { ThemeProps } from "./themes-list" +import { themesList } from "./themes-list" export function Themes() { + const { resolvedTheme } = useTheme() + const [themeId, setThemeId] = React.useState("default") + const themeContainerRef = React.useRef(null) + + // Apply theme for current page + const applyTheme = (theme: ThemeProps) => { + const themeVars = themesList[theme].root + const darkThemeVars = themesList[theme].dark + localStorage.setItem("theme-id", theme) + setThemeId(theme) + const themeElement = themeContainerRef.current + if (themeElement) { + const themeVarsToApply = resolvedTheme === "dark" ? darkThemeVars : themeVars + Object.keys(themeVarsToApply).forEach((key) => { + themeElement.style.setProperty(key, themeVarsToApply[key]) + }) + } + } + + // Apply theme for whole page + // function applyTheme(theme: ThemeProps) { + // const themeVars = themesList[theme].root + // const darkThemeVars = themesList[theme].dark + // localStorage.setItem('theme-id', theme) + // setThemeId(theme) + // const themeElement = document.documentElement + // if (themeElement) { + // const themeVarsToApply = resolvedTheme === 'dark' ? darkThemeVars : themeVars + // Object.keys(themeVarsToApply).forEach((key) => { + // themeElement.style.setProperty(key, themeVarsToApply[key]) + // }) + // } + // } + + React.useEffect(() => { + const savedTheme = localStorage.getItem("theme-id") as ThemeProps + applyTheme(savedTheme) + }, [resolvedTheme, themeId]) return ( - - - - +
+ + + +
+ + + +
+
) } diff --git a/app/layout.tsx b/app/layout.tsx index df093027..c31cb74e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,16 +1,16 @@ -import React from 'react' +import React from "react" -import { Footer } from '@/components/footer' -import { Navbar } from '@/components/navbar' -import { Providers } from '@/components/providers' -import { siteConfig } from '@/resources/config/site' -import { cn } from '@/resources/lib/utils' -import '@/resources/styles/app.css' -import { OpenpanelProvider } from '@openpanel/nextjs' -import type { Metadata, Viewport } from 'next' -import { ViewTransitions } from 'next-view-transitions' -import localFont from 'next/font/local' -import { Toast } from 'ui' +import { Footer } from "@/components/footer" +import { Navbar } from "@/components/navbar" +import { Providers } from "@/components/providers" +import { siteConfig } from "@/resources/config/site" +import { cn } from "@/resources/lib/utils" +import "@/resources/styles/app.css" +import { OpenpanelProvider } from "@openpanel/nextjs" +import type { Metadata, Viewport } from "next" +import { ViewTransitions } from "next-view-transitions" +import localFont from "next/font/local" +import { Toast } from "ui" export const metadata: Metadata = { metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url), @@ -20,71 +20,71 @@ export const metadata: Metadata = { }, description: siteConfig.description, alternates: { - canonical: './' + canonical: "./" }, keywords: [ - 'React', - 'Next.js', - 'Inertia.js', - 'Tailwind CSS', - 'UI Components', - 'UI Kit', - 'UI Library', - 'UI Framework', - 'Justd', - 'Just D.', - 'React Aria', - 'React Aria Components', - 'Server Components', - 'React Components', - 'Next UI Components', - 'UI Design System', - 'UI for Laravel Inertia', - 'Laravel Inertia UI', - 'Laravel Inertia Components', - 'Laravel Inertia UI Components', - 'Laravel Inertia UI Kit', - 'Laravel Inertia UI Library', - 'Laravel Inertia UI Framework', - 'Laravel Inertia Justd', - 'Laravel Justd', - 'Justd Components', - 'Justd UI Components', - 'Justd UI Kit', - 'Justd UI Library', - 'Justd UI Framework', - 'Justd Laravel Inertia', - 'Justd Laravel', - 'Justd Inertia' + "React", + "Next.js", + "Inertia.js", + "Tailwind CSS", + "UI Components", + "UI Kit", + "UI Library", + "UI Framework", + "Justd", + "Just D.", + "React Aria", + "React Aria Components", + "Server Components", + "React Components", + "Next UI Components", + "UI Design System", + "UI for Laravel Inertia", + "Laravel Inertia UI", + "Laravel Inertia Components", + "Laravel Inertia UI Components", + "Laravel Inertia UI Kit", + "Laravel Inertia UI Library", + "Laravel Inertia UI Framework", + "Laravel Inertia Justd", + "Laravel Justd", + "Justd Components", + "Justd UI Components", + "Justd UI Kit", + "Justd UI Library", + "Justd UI Framework", + "Justd Laravel Inertia", + "Justd Laravel", + "Justd Inertia" ], - manifest: '/manifest.json', + manifest: "/manifest.json", authors: [ { - name: 'irsyadadl', - url: 'https://x.com/irsyadadl' + name: "irsyadadl", + url: "https://x.com/irsyadadl" } ], - creator: 'irsyadadl' + creator: "irsyadadl" } export const viewport: Viewport = { themeColor: [ - { media: '(prefers-color-scheme: light)', color: 'white' }, - { media: '(prefers-color-scheme: dark)', color: 'black' } + { media: "(prefers-color-scheme: light)", color: "white" }, + { media: "(prefers-color-scheme: dark)", color: "black" } ], - viewportFit: 'cover', - width: 'device-width', + viewportFit: "cover", + width: "device-width", initialScale: 1 } const fontSans = localFont({ - src: [{ path: './fonts/Inter.woff2' }], - variable: '--font-sans' + src: [{ path: "./fonts/Inter.woff2" }], + variable: "--font-sans" }) const fontMono = localFont({ - src: [{ path: './fonts/GeistMonoVF.woff' }, { path: './fonts/GeistMonoVF.woff2' }], - variable: '--font-mono' + src: [{ path: "./fonts/GeistMonoVF.woff" }, { path: "./fonts/GeistMonoVF.woff2" }], + variable: "--font-mono" }) export default function RootLayout({ @@ -97,7 +97,7 @@ export default function RootLayout({
- {process.env.NODE_ENV === 'production' && ( + {process.env.NODE_ENV === "production" && ( ({ diff --git a/components/aside.tsx b/components/aside.tsx index c1645425..5677d2bd 100644 --- a/components/aside.tsx +++ b/components/aside.tsx @@ -1,21 +1,21 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { type Docs, docs } from '#site/content' -import { goodTitle, sortDocs } from '@/resources/lib/utils' -import { LayoutGroup, motion } from 'framer-motion' -import { IconCircleHalf, IconCube, IconHighlight, IconLayers } from 'justd-icons' -import { Link as NextLink } from 'next-view-transitions' -import type { LinkProps as NextLinkProps } from 'next/link' -import { usePathname } from 'next/navigation' -import { tv } from 'tailwind-variants' -import { Accordion, Badge, cn } from 'ui' +import { type Docs, docs } from "#site/content" +import { goodTitle, sortDocs } from "@/resources/lib/utils" +import { LayoutGroup, motion } from "framer-motion" +import { IconCircleHalf, IconCube, IconHighlight, IconLayers } from "justd-icons" +import { Link as NextLink } from "next-view-transitions" +import type { LinkProps as NextLinkProps } from "next/link" +import { usePathname } from "next/navigation" +import { tv } from "tailwind-variants" +import { Accordion, Badge, cn } from "ui" export interface Doc { slug: string title: string - status?: 'wip' | 'new' | 'beta' | 'help' | 'primitive' | 'alpha' + status?: "wip" | "new" | "beta" | "help" | "primitive" | "alpha" } export interface HierarchyNode { @@ -26,7 +26,7 @@ export const createHierarchy = (docs: Array): HierarchyNode => { const hierarchy: HierarchyNode = {} sortDocs(docs).forEach((doc) => { - const parts = doc.slug.split('/').slice(1) + const parts = doc.slug.split("/").slice(1) let currentLevel = hierarchy parts.forEach((part, index) => { @@ -47,22 +47,22 @@ export const createHierarchy = (docs: Array): HierarchyNode => { const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => { const filteredNodeEntries = Object.entries(node).sort(([a], [b]) => { - const order = ['prologue', 'getting-started', 'dark-mode', 'components'] + const order = ["prologue", "getting-started", "dark-mode", "components"] return order.indexOf(a) - order.indexOf(b) }) return ( {filteredNodeEntries.map(([key, value]) => ( - {key === 'getting-started' ? ( + {key === "getting-started" ? ( - ) : key === 'prologue' ? ( + ) : key === "prologue" ? ( - ) : key === 'dark-mode' ? ( + ) : key === "dark-mode" ? ( ) : ( @@ -70,7 +70,7 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => { {goodTitle(key)} - {typeof value === 'object' && 'title' in value ? ( + {typeof value === "object" && "title" in value ? ( {goodTitle((value as Doc).title)} @@ -78,7 +78,7 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => {
{Object.entries(value as HierarchyNode).map(([subKey, subValue]) => - typeof subValue === 'object' && 'title' in subValue ? ( + typeof subValue === "object" && "title" in subValue ? ( { {subValue.status && ( - {subValue?.status as Doc['status']} + {subValue?.status as Doc["status"]} )} @@ -115,11 +115,11 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => { {goodTitle(subKey)} {Object.entries(subValue as HierarchyNode).map(([childKey, childValue]) => - typeof childValue === 'object' && 'title' in childValue ? ( + typeof childValue === "object" && "title" in childValue ? ( 0 && 'jf320s' + "ml-[-0rem] flex justify-between items-center pl-[3rem]", + defaultValues.length > 0 && "jf320s" )} key={childKey} href={`/${childValue.slug}`} @@ -129,21 +129,21 @@ const renderHierarchy = (node: HierarchyNode, defaultValues: string[]) => { {childValue.status && ( - {childValue?.status as Doc['status']} + {childValue?.status as Doc["status"]} )} @@ -168,7 +168,7 @@ export const Aside = () => { const hierarchicalDocs = createHierarchy(docs) const computeDefaultValuesFromURL = (): string[] => { - const pathParts = pathname.split('/').filter(Boolean) + const pathParts = pathname.split("/").filter(Boolean) const relevantKey = pathParts[2] if (relevantKey) { return [relevantKey] @@ -179,12 +179,12 @@ export const Aside = () => { const defaultValues = computeDefaultValuesFromURL() React.useEffect(() => { - const activeElement = document.querySelector('.jf320s') + const activeElement = document.querySelector(".jf320s") if (activeElement) { activeElement.scrollIntoView({ - behavior: 'smooth', - block: 'center' + behavior: "smooth", + block: "center" }) } }, []) @@ -199,7 +199,7 @@ const Trigger = ({ children, className }: { children: React.ReactNode; className return ( @@ -216,11 +216,11 @@ interface AsideLinkProps extends NextLinkProps { } const asideLinkStyles = tv({ - base: 'relative block focus:outline-none focus-visible:bg-secondary/70 focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-primary rounded-md px-2.5 py-2 text-base transition-colors hover:bg-secondary/70 hover:text-fg lg:text-sm', + base: "relative block focus:outline-none focus-visible:bg-secondary/70 focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-primary rounded-md px-2.5 py-2 text-base transition-colors hover:bg-secondary/70 hover:text-fg lg:text-sm", variants: { isActive: { - true: 'font-medium text-fg', - false: 'text-muted-fg' + true: "font-medium text-fg", + false: "text-muted-fg" } } }) @@ -235,7 +235,7 @@ function AsideLink({ indicatorClassName, className, children, active, ...props } diff --git a/components/blocks.tsx b/components/blocks.tsx index f6e844af..67b9a92b 100644 --- a/components/blocks.tsx +++ b/components/blocks.tsx @@ -1,22 +1,22 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Buttons } from '@/components/blocks/buttons' -import { CheckRadioBlock } from '@/components/blocks/check-radio-block' -import { LoginForm } from '@/components/blocks/login-form' -import { Menus } from '@/components/blocks/menus' -import { ModalOverlays, PopoverOverlays } from '@/components/blocks/overlays' -import { TableDemo } from '@/components/blocks/table-demo' -import { ToolbarBlock } from '@/components/blocks/toolbar-block' -import ColorPickerCombinationDemo from '@/components/docs/colors/color-picker-combination-demo' -import SwitchDemo from '@/components/docs/controls/switch-demo' -import CalendarDemo from '@/components/docs/date-and-time/calendar-demo' -import TagFieldDemo from '@/components/docs/forms/tag-field-demo' -import ComboBoxAvatarDemo from '@/components/docs/pickers/combo-box-avatar-demo' -import MultipleSelectDemo from '@/components/docs/pickers/multiple-select-demo' -import { IconCubeFill } from 'justd-icons' -import { buttonStyles, cn, DatePicker, DateRangePicker, Grid, Heading, Link, Note } from 'ui' +import { Buttons } from "@/components/blocks/buttons" +import { CheckRadioBlock } from "@/components/blocks/check-radio-block" +import { LoginForm } from "@/components/blocks/login-form" +import { Menus } from "@/components/blocks/menus" +import { ModalOverlays, PopoverOverlays } from "@/components/blocks/overlays" +import { TableDemo } from "@/components/blocks/table-demo" +import { ToolbarBlock } from "@/components/blocks/toolbar-block" +import ColorPickerCombinationDemo from "@/components/docs/colors/color-picker-combination-demo" +import SwitchDemo from "@/components/docs/controls/switch-demo" +import CalendarDemo from "@/components/docs/date-and-time/calendar-demo" +import TagFieldDemo from "@/components/docs/forms/tag-field-demo" +import ComboBoxAvatarDemo from "@/components/docs/pickers/combo-box-avatar-demo" +import MultipleSelectDemo from "@/components/docs/pickers/multiple-select-demo" +import { IconCubeFill } from "justd-icons" +import { buttonStyles, cn, DatePicker, DateRangePicker, Grid, Heading, Link, Note } from "ui" export function Blocks() { return ( @@ -130,7 +130,7 @@ export function CardBlock({ >
diff --git a/components/blocks/buttons.tsx b/components/blocks/buttons.tsx index 5cc9de71..7fe437b2 100644 --- a/components/blocks/buttons.tsx +++ b/components/blocks/buttons.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { CardBlock } from '@/components/blocks' -import { Button } from 'ui' +import { CardBlock } from "@/components/blocks" +import { Button } from "ui" export function Buttons() { return ( diff --git a/components/blocks/check-radio-block.tsx b/components/blocks/check-radio-block.tsx index dd5c60e3..65d8429d 100644 --- a/components/blocks/check-radio-block.tsx +++ b/components/blocks/check-radio-block.tsx @@ -1,12 +1,12 @@ -'use client' +"use client" -import React, { useState } from 'react' +import React, { useState } from "react" -import { CardBlock } from '@/components/blocks' -import { Checkbox, CheckboxGroup, Radio, RadioGroup } from 'ui' +import { CardBlock } from "@/components/blocks" +import { Checkbox, CheckboxGroup, Radio, RadioGroup } from "ui" export function CheckRadioBlock() { - const [selectedRadio, setSelectedRadio] = useState('lowSecurity') + const [selectedRadio, setSelectedRadio] = useState("lowSecurity") return ( @@ -14,9 +14,9 @@ export function CheckRadioBlock() { High Security Encryption diff --git a/components/blocks/grid-list-drag-block.tsx b/components/blocks/grid-list-drag-block.tsx index 6def4e4f..7770e6b7 100644 --- a/components/blocks/grid-list-drag-block.tsx +++ b/components/blocks/grid-list-drag-block.tsx @@ -1,19 +1,19 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { CardBlock } from '@/components/blocks' -import { OtherEmptyList } from '@/components/docs/collections/grid-list-drag-between-item-demo' -import GridListDragDemo from '@/components/docs/collections/grid-list-drag-demo' -import { useDragAndDrop } from 'react-aria-components' -import { useListData } from 'react-stately' -import { GridList } from 'ui' +import { CardBlock } from "@/components/blocks" +import { OtherEmptyList } from "@/components/docs/collections/grid-list-drag-between-item-demo" +import GridListDragDemo from "@/components/docs/collections/grid-list-drag-demo" +import { useDragAndDrop } from "react-aria-components" +import { useListData } from "react-stately" +import { GridList } from "ui" export function GridListDragBlock() { const list = useListData({ initialItems: [ - { id: 6, name: 'The Byrds' }, - { id: 7, name: 'The Yardbirds' } + { id: 6, name: "The Byrds" }, + { id: 7, name: "The Yardbirds" } ] }) @@ -21,14 +21,14 @@ export function GridListDragBlock() { async onInsert(e) { const items = await Promise.all( e.items.map(async (item) => { - const name = item.kind === 'text' ? await item.getText('text/plain') : item.name + const name = item.kind === "text" ? await item.getText("text/plain") : item.name return { id: Math.random(), name } }) ) - if (e.target.dropPosition === 'before') { + if (e.target.dropPosition === "before") { list.insertBefore(e.target.key, ...items) - } else if (e.target.dropPosition === 'after') { + } else if (e.target.dropPosition === "after") { list.insertAfter(e.target.key, ...items) } } diff --git a/components/blocks/login-form.tsx b/components/blocks/login-form.tsx index 753c6241..a2b6f58e 100644 --- a/components/blocks/login-form.tsx +++ b/components/blocks/login-form.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Button, Card, Checkbox, Link, TextField } from 'ui' +import { Button, Card, Checkbox, Link, TextField } from "ui" export function LoginForm() { return ( diff --git a/components/blocks/menus.tsx b/components/blocks/menus.tsx index cd3f3686..9f427cc3 100644 --- a/components/blocks/menus.tsx +++ b/components/blocks/menus.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { CardBlock } from '@/components/blocks' +import { CardBlock } from "@/components/blocks" import { IconBrandBluesky, IconBrandTelegram, @@ -14,8 +14,8 @@ import { IconPersonAdd, IconPlus, IconSettings -} from 'justd-icons' -import { Button, Menu } from 'ui' +} from "justd-icons" +import { Button, Menu } from "ui" export function Menus() { return ( diff --git a/components/blocks/overlays.tsx b/components/blocks/overlays.tsx index bec7aef7..fa2d53ab 100644 --- a/components/blocks/overlays.tsx +++ b/components/blocks/overlays.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { CardBlock } from '@/components/blocks' -import { Button, Modal, Popover } from 'ui' +import { CardBlock } from "@/components/blocks" +import { Button, Modal, Popover } from "ui" export function PopoverOverlays() { return ( diff --git a/components/blocks/slider-on-popover-block.tsx b/components/blocks/slider-on-popover-block.tsx index 215152d6..fc3b5e20 100644 --- a/components/blocks/slider-on-popover-block.tsx +++ b/components/blocks/slider-on-popover-block.tsx @@ -1,7 +1,7 @@ -import React from 'react' +import React from "react" -import { IconAdjustment } from 'justd-icons' -import { Button, Description, Popover, Slider } from 'ui' +import { IconAdjustment } from "justd-icons" +import { Button, Description, Popover, Slider } from "ui" export function SliderOnPopoverBlock() { const [fontSize, setFontSize] = React.useState(16) @@ -21,7 +21,7 @@ export function SliderOnPopoverBlock() {
setFontSize(v as number)} label="Font Size" /> - Current font size: {fontSize ?? '-'} + Current font size: {fontSize ?? "-"}
@@ -31,7 +31,7 @@ export function SliderOnPopoverBlock() { label="Line Height" /> - Current line height: {lineHeight ?? '-'} + Current line height: {lineHeight ?? "-"}
diff --git a/components/blocks/table-demo.tsx b/components/blocks/table-demo.tsx index 75f3ba37..e684449c 100644 --- a/components/blocks/table-demo.tsx +++ b/components/blocks/table-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { books } from '@/components/docs/collections/table-bulk-demo' -import { Table } from 'ui' +import { books } from "@/components/docs/collections/table-bulk-demo" +import { Table } from "ui" export function TableDemo() { return ( diff --git a/components/blocks/toolbar-block.tsx b/components/blocks/toolbar-block.tsx index f34658ae..bc3741f8 100644 --- a/components/blocks/toolbar-block.tsx +++ b/components/blocks/toolbar-block.tsx @@ -1,6 +1,6 @@ -import React from 'react' +import React from "react" -import { SliderOnPopoverBlock } from '@/components/blocks/slider-on-popover-block' +import { SliderOnPopoverBlock } from "@/components/blocks/slider-on-popover-block" import { IconCamera, IconCameraFill, @@ -14,8 +14,8 @@ import { IconMagicFill, IconVideoPlaylist, IconVideoPlaylistFill -} from 'justd-icons' -import { Card, Toolbar } from 'ui' +} from "justd-icons" +import { Card, Toolbar } from "ui" export function ToolbarBlock() { return ( diff --git a/components/command-palette.tsx b/components/command-palette.tsx index 36029cea..85e779d5 100644 --- a/components/command-palette.tsx +++ b/components/command-palette.tsx @@ -1,15 +1,15 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { docs } from '#site/content' -import type { Doc, HierarchyNode } from '@/components/aside' -import { createHierarchy } from '@/components/aside' -import { goodTitle } from '@/resources/lib/utils' -import { IconBrandJustd, IconColors, IconCube, IconHome, IconNotes } from 'justd-icons' -import Link from 'next/link' -import { usePathname, useRouter } from 'next/navigation' -import { CommandMenu, useMediaQuery } from 'ui' +import { docs } from "#site/content" +import type { Doc, HierarchyNode } from "@/components/aside" +import { createHierarchy } from "@/components/aside" +import { goodTitle } from "@/resources/lib/utils" +import { IconBrandJustd, IconColors, IconCube, IconHome, IconNotes } from "justd-icons" +import Link from "next/link" +import { usePathname, useRouter } from "next/navigation" +import { CommandMenu, useMediaQuery } from "ui" export interface OpenCloseProps { openCmd: boolean @@ -21,16 +21,16 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) { const pathname = usePathname() React.useEffect(() => { const down = (e: KeyboardEvent) => { - if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { + if (e.key === "k" && (e.metaKey || e.ctrlKey)) { e.preventDefault() // @ts-ignore setOpen((open: boolean) => !open) } } - document.addEventListener('keydown', down) + document.addEventListener("keydown", down) - return () => document.removeEventListener('keydown', down) + return () => document.removeEventListener("keydown", down) }, [pathname, setOpen]) React.useEffect(() => { @@ -39,11 +39,11 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) { } }, [pathname, setOpen]) - const isDesktop = useMediaQuery('(min-width: 1024px)') + const isDesktop = useMediaQuery("(min-width: 1024px)") const data = createHierarchy(docs) const filteredNodeEntries = Object.entries(data).sort(([a], [b]) => { - const order = ['prologue', 'getting-started', 'dark-mode', 'components'] + const order = ["prologue", "getting-started", "dark-mode", "components"] return order.indexOf(a) - order.indexOf(b) }) @@ -83,12 +83,12 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) { {Object.entries(value as HierarchyNode).map(([subKey, subValue]) => - typeof subValue === 'object' && 'title' in subValue ? ( + typeof subValue === "object" && "title" in subValue ? ( router.push(`/${subValue.slug}`)} @@ -97,19 +97,19 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) { {subValue.status && ( - {subValue?.status as Doc['status']} + {subValue?.status as Doc["status"]} )} @@ -118,20 +118,20 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) { {Object.entries(value as HierarchyNode).map(([subKey, subValue]) => - typeof subValue === 'object' && 'title' in subValue ? null : ( + typeof subValue === "object" && "title" in subValue ? null : ( {Object.entries(subValue as HierarchyNode).map(([childKey, childValue]) => - typeof childValue === 'object' && 'title' in childValue ? ( + typeof childValue === "object" && "title" in childValue ? ( router.push(`/${childValue.slug}`)} @@ -140,19 +140,19 @@ export function CommandPalette({ openCmd, setOpen }: OpenCloseProps) { {childValue.status && ( - {childValue?.status as Doc['status']} + {childValue?.status as Doc["status"]} )} diff --git a/components/cta.tsx b/components/cta.tsx index fc58a80f..72b292f7 100644 --- a/components/cta.tsx +++ b/components/cta.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import { siteConfig } from '@/resources/config/site' -import { IconBrandGithub } from 'justd-icons' -import { buttonStyles, Container, Heading, Link } from 'ui' +import { siteConfig } from "@/resources/config/site" +import { IconBrandGithub } from "justd-icons" +import { buttonStyles, Container, Heading, Link } from "ui" export function Cta() { return ( @@ -20,7 +20,7 @@ export function Cta() { GitHub diff --git a/components/doc-composed.tsx b/components/doc-composed.tsx index 7a5ac850..b029eeca 100644 --- a/components/doc-composed.tsx +++ b/components/doc-composed.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import { docs } from '#site/content' -import { usePathname } from 'next/navigation' -import { Card, Grid, Link } from 'ui' +import { docs } from "#site/content" +import { usePathname } from "next/navigation" +import { Card, Grid, Link } from "ui" const simplifiedDocs = docs.map(({ title, slug, description }) => ({ title, slug, description })) @@ -16,8 +16,8 @@ export function DocComposed({ const pathname = usePathname() const name = getLatestOfString(pathname) const filteredComponents = simplifiedDocs.filter((component) => { - const lastSegment = component.slug.split('/').pop() - return components.includes(lastSegment || '') + const lastSegment = component.slug.split("/").pop() + return components.includes(lastSegment || "") }) return (
@@ -71,6 +71,6 @@ export function DocComposed({ } const getLatestOfString = (path: string): string => { - const lastSegment = path.split('/').pop() || '' - return lastSegment.replace(/-/g, ' ').replace(/\b\w/g, (letter) => letter.toUpperCase()) + const lastSegment = path.split("/").pop() || "" + return lastSegment.replace(/-/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase()) } diff --git a/components/doc-how.tsx b/components/doc-how.tsx index ee3b9170..552cdb03 100644 --- a/components/doc-how.tsx +++ b/components/doc-how.tsx @@ -1,17 +1,17 @@ -'use client' +"use client" -import * as React from 'react' +import * as React from "react" -import { previews } from '@/components/docs/generated/previews' -import jsonPreviews from '@/components/docs/generated/previews.json' -import { Code } from '@/components/docs/rehype/code' -import { cn } from '@/resources/lib/utils' -import { Loader, Tabs } from 'ui' +import { previews } from "@/components/docs/generated/previews" +import jsonPreviews from "@/components/docs/generated/previews.json" +import { Code } from "@/components/docs/rehype/code" +import { cn } from "@/resources/lib/utils" +import { Loader, Tabs } from "ui" interface HowProps extends React.HTMLAttributes { toUse: string minW72?: boolean - align?: 'center' | 'start' | 'end' + align?: "center" | "start" | "end" description?: string isCenter?: boolean className?: string @@ -24,7 +24,7 @@ export function DocHow({ className, minW72 = false, isCenter = true, - align = 'center', + align = "center", description, withNoPadding = false, ...props @@ -32,11 +32,11 @@ export function DocHow({ const Preview = previews[toUse] ? previews[toUse].component : null // @ts-ignore - let codeString = jsonPreviews[toUse].raw ?? '' + let codeString = jsonPreviews[toUse].raw ?? "" - codeString = codeString.replace(/function\s+\w+\s*\(/g, 'function App(') + codeString = codeString.replace(/function\s+\w+\s*\(/g, "function App(") return ( -
+
Preview @@ -45,10 +45,10 @@ export function DocHow({
} > -
+
diff --git a/components/doc-note.tsx b/components/doc-note.tsx index 4cf93989..f52730a1 100644 --- a/components/doc-note.tsx +++ b/components/doc-note.tsx @@ -1,21 +1,21 @@ -import { cn } from '@/resources/lib/utils' -import type { TextProps } from 'react-aria-components' -import { Note, type NoteProps } from 'ui' +import { cn } from "@/resources/lib/utils" +import type { TextProps } from "react-aria-components" +import { Note, type NoteProps } from "ui" interface DocsNoteProps extends NoteProps { - children: TextProps['children'] + children: TextProps["children"] } -export function DocNote({ intent = 'primary', children }: DocsNoteProps) { +export function DocNote({ intent = "primary", children }: DocsNoteProps) { return (
span]:!text-amber-400 [&_span[data-line]>span]:!text-amber-950 [&_span[data-line]>span]:bg-amber-400/10 text-[0.6rem] [&_span[data-line]>span]:inline [&_span[data-line]>span]:rounded-sm [&_span[data-line]>span]:!px-1 [&_span[data-line]>span]:py-0.5', - intent === 'primary' && - 'dark:[&_span[data-line]>span]:!text-primary-40 [&_span[data-line]>span]:!text-primary-600 [&_span[data-line]>span]:bg-primary-400/10 text-[0.6rem] [&_span[data-line]>span]:inline [&_span[data-line]>span]:rounded-sm [&_span[data-line]>span]:!px-1 [&_span[data-line]>span]:py-0.5' + "[&_span[data-line]]:font-medium", + intent === "warning" && + "dark:[&_span[data-line]>span]:!text-amber-400 [&_span[data-line]>span]:!text-amber-950 [&_span[data-line]>span]:bg-amber-400/10 text-[0.6rem] [&_span[data-line]>span]:inline [&_span[data-line]>span]:rounded-sm [&_span[data-line]>span]:!px-1 [&_span[data-line]>span]:py-0.5", + intent === "primary" && + "dark:[&_span[data-line]>span]:!text-primary-40 [&_span[data-line]>span]:!text-primary-600 [&_span[data-line]>span]:bg-primary-400/10 text-[0.6rem] [&_span[data-line]>span]:inline [&_span[data-line]>span]:rounded-sm [&_span[data-line]>span]:!px-1 [&_span[data-line]>span]:py-0.5" )} intent={intent} > diff --git a/components/doc-refs.tsx b/components/doc-refs.tsx index 0fa1f666..74ec3c2a 100644 --- a/components/doc-refs.tsx +++ b/components/doc-refs.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import type { FC, SVGProps } from 'react' +import type { FC, SVGProps } from "react" -import { Logo } from '@/components/logo' -import { extractAndFormat } from '@/resources/lib/utils' +import { Logo } from "@/components/logo" +import { extractAndFormat } from "@/resources/lib/utils" import { IconBell, IconBrandAdobe, @@ -11,46 +11,46 @@ import { IconBrandGithub, IconBrandJustd, IconCommandFill -} from 'justd-icons' -import { Menu, MenuItem } from 'react-aria-components' -import { buttonStyles, cn } from 'ui' +} from "justd-icons" +import { Menu, MenuItem } from "react-aria-components" +import { buttonStyles, cn } from "ui" export function DocRefs({ references }: any) { const urls = references.map((url: string) => { - let title = '' + let title = "" let icon: FC> switch (true) { - case url.includes('react-spectrum'): - title = extractAndFormat(url) + ' Props' + case url.includes("react-spectrum"): + title = extractAndFormat(url) + " Props" icon = IconBrandAdobe break - case url.includes('paranoid'): - title = 'Paranoid' + case url.includes("paranoid"): + title = "Paranoid" icon = IconBrandJustd break - case url.includes('framer'): - title = 'Framer Motion' + case url.includes("framer"): + title = "Framer Motion" icon = IconBrandFramer break - case url.includes('docs/components'): - title = 'Internal' + case url.includes("docs/components"): + title = "Internal" icon = Logo break - case url.includes('sonner'): - title = 'Toaster' + case url.includes("sonner"): + title = "Toaster" icon = IconBell break - case url.includes('cmdk'): - title = 'Cmdk' + case url.includes("cmdk"): + title = "Cmdk" icon = IconCommandFill break - case url.includes('github'): - title = 'Github' + case url.includes("github"): + title = "Github" icon = IconBrandGithub break - case url.includes('embla-carousel'): - title = 'Embla Carousel' + case url.includes("embla-carousel"): + title = "Embla Carousel" icon = IconEmblaCarousel break default: @@ -71,16 +71,16 @@ export function DocRefs({ references }: any) { target="_blank" className={cn( buttonStyles({ - appearance: 'outline', - size: 'small', - className: 'focus:outline-0' + appearance: "outline", + size: "small", + className: "focus:outline-0" }) )} id={item.url} href={item.url} > - {item.title === 'Props Reference' ? ( + {item.title === "Props Reference" ? ( Props Reference diff --git a/components/docs/buttons/button-appearance-demo.tsx b/components/docs/buttons/button-appearance-demo.tsx index 71ea47da..07c139a8 100644 --- a/components/docs/buttons/button-appearance-demo.tsx +++ b/components/docs/buttons/button-appearance-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import title from 'title' -import { Button, buttonStyles } from 'ui' +import title from "title" +import { Button, buttonStyles } from "ui" type Appearance = keyof typeof buttonStyles.variants.appearance diff --git a/components/docs/buttons/button-basic-demo.tsx b/components/docs/buttons/button-basic-demo.tsx index c2694bf7..06ffefd4 100644 --- a/components/docs/buttons/button-basic-demo.tsx +++ b/components/docs/buttons/button-basic-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { Button } from 'ui' +import { Button } from "ui" export default function ButtonBasicDemo() { - return + return } diff --git a/components/docs/buttons/button-disabled-demo.tsx b/components/docs/buttons/button-disabled-demo.tsx index 363a7def..4ee54cee 100644 --- a/components/docs/buttons/button-disabled-demo.tsx +++ b/components/docs/buttons/button-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Button } from 'ui' +import { Button } from "ui" export default function ButtonDisabledDemo() { return diff --git a/components/docs/buttons/button-icon-demo.tsx b/components/docs/buttons/button-icon-demo.tsx index 4e757abf..47805f9a 100644 --- a/components/docs/buttons/button-icon-demo.tsx +++ b/components/docs/buttons/button-icon-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { IconBrandLaravel } from 'justd-icons' -import { Button } from 'ui' +import { IconBrandLaravel } from "justd-icons" +import { Button } from "ui" export default function ButtonIconDemo() { return ( diff --git a/components/docs/buttons/button-intent-demo.tsx b/components/docs/buttons/button-intent-demo.tsx index 9d667223..ad9e884c 100644 --- a/components/docs/buttons/button-intent-demo.tsx +++ b/components/docs/buttons/button-intent-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { IconBackspace } from 'justd-icons' -import { Button, gridStyles } from 'ui' +import { IconBackspace } from "justd-icons" +import { Button, gridStyles } from "ui" export default function ButtonIntentDemo() { return ( diff --git a/components/docs/buttons/button-link-demo.tsx b/components/docs/buttons/button-link-demo.tsx index 29b78a39..0ec54efa 100644 --- a/components/docs/buttons/button-link-demo.tsx +++ b/components/docs/buttons/button-link-demo.tsx @@ -1,11 +1,11 @@ -'use client' +"use client" -import { buttonStyles, Link } from 'ui' +import { buttonStyles, Link } from "ui" export default function ButtonLinkDemo() { return ( Choicebox diff --git a/components/docs/buttons/button-loader-demo.tsx b/components/docs/buttons/button-loader-demo.tsx index 205362bb..1328eb71 100644 --- a/components/docs/buttons/button-loader-demo.tsx +++ b/components/docs/buttons/button-loader-demo.tsx @@ -1,40 +1,40 @@ -'use client' +"use client" -import { useState } from 'react' +import { useState } from "react" -import { IconCircleCheckFill, IconKey } from 'justd-icons' -import { Button, Loader } from 'ui' +import { IconCircleCheckFill, IconKey } from "justd-icons" +import { Button, Loader } from "ui" export default function ButtonLoaderDemo() { - const [loading, setLoading] = useState<'idle' | 'loading' | 'success'>('idle') + const [loading, setLoading] = useState<"idle" | "loading" | "success">("idle") const pressHandler = () => { - setLoading('loading') + setLoading("loading") - setTimeout(() => setLoading('success'), 3000) + setTimeout(() => setLoading("success"), 3000) - setTimeout(() => setLoading('idle'), 6000) + setTimeout(() => setLoading("idle"), 6000) } return ( ) } diff --git a/components/docs/buttons/button-only-icon-demo.tsx b/components/docs/buttons/button-only-icon-demo.tsx index 9341c657..77f38ac6 100644 --- a/components/docs/buttons/button-only-icon-demo.tsx +++ b/components/docs/buttons/button-only-icon-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { IconBrandParsinta } from 'justd-icons' -import { Button } from 'ui' +import { IconBrandParsinta } from "justd-icons" +import { Button } from "ui" export default function ButtonOnlyIconDemo() { return ( diff --git a/components/docs/buttons/button-shape-demo.tsx b/components/docs/buttons/button-shape-demo.tsx index 7e39504e..aaac29c3 100644 --- a/components/docs/buttons/button-shape-demo.tsx +++ b/components/docs/buttons/button-shape-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Button } from 'ui' +import { Button } from "ui" export default function ButtonShapeDemo() { return diff --git a/components/docs/buttons/button-size-demo.tsx b/components/docs/buttons/button-size-demo.tsx index 2199a445..30cdea5f 100644 --- a/components/docs/buttons/button-size-demo.tsx +++ b/components/docs/buttons/button-size-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Button } from 'ui' +import { Button } from "ui" export default function ButtonSizeDemo() { return ( diff --git a/components/docs/buttons/file-trigger-avatar-demo.tsx b/components/docs/buttons/file-trigger-avatar-demo.tsx index c4009209..aaf3ada5 100644 --- a/components/docs/buttons/file-trigger-avatar-demo.tsx +++ b/components/docs/buttons/file-trigger-avatar-demo.tsx @@ -1,11 +1,11 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import type { DropEvent } from '@react-types/shared' -import { isFileDropItem } from 'react-aria-components' -import { twJoin } from 'tailwind-merge' -import { Avatar, DropZone, FileTrigger } from 'ui' +import type { DropEvent } from "@react-types/shared" +import { isFileDropItem } from "react-aria-components" +import { twJoin } from "tailwind-merge" +import { Avatar, DropZone, FileTrigger } from "ui" export default function FileTriggerAvatarDemo() { const [droppedImage, setDroppedImage] = React.useState(undefined) @@ -13,7 +13,7 @@ export default function FileTriggerAvatarDemo() { const onDropHandler = async (e: DropEvent) => { const item = e.items .filter(isFileDropItem) - .find((item) => item.type === 'image/jpeg' || item.type === 'image/png') + .find((item) => item.type === "image/jpeg" || item.type === "image/png") if (item) { const file = await item.getFile() setDroppedImage(URL.createObjectURL(file)) @@ -34,10 +34,10 @@ export default function FileTriggerAvatarDemo() { return (
'copy'} + getDropOperation={() => "copy"} onDrop={onDropHandler} className={twJoin( - '[&_[data-slot=avatar]]:bg-transparent [&_[data-slot=avatar]]:outline-none rounded-full p-0 overflow-hidden size-10' + "[&_[data-slot=avatar]]:bg-transparent [&_[data-slot=avatar]]:outline-none rounded-full p-0 overflow-hidden size-10" )} > {droppedImage ? ( @@ -50,7 +50,7 @@ export default function FileTriggerAvatarDemo() { Upload avatar diff --git a/components/docs/buttons/file-trigger-camera-demo.tsx b/components/docs/buttons/file-trigger-camera-demo.tsx index 6307b3af..ee6fc49c 100644 --- a/components/docs/buttons/file-trigger-camera-demo.tsx +++ b/components/docs/buttons/file-trigger-camera-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { FileTrigger } from 'ui' +import { FileTrigger } from "ui" export default function FileTriggerCameraDemo() { return Open a camera diff --git a/components/docs/buttons/file-trigger-controlled-demo.tsx b/components/docs/buttons/file-trigger-controlled-demo.tsx index 17a6e16d..6ebcfa23 100644 --- a/components/docs/buttons/file-trigger-controlled-demo.tsx +++ b/components/docs/buttons/file-trigger-controlled-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Description, FileTrigger } from 'ui' +import { Description, FileTrigger } from "ui" export default function FileTriggerDemo() { const [file, setFile] = React.useState(null) diff --git a/components/docs/buttons/file-trigger-demo.tsx b/components/docs/buttons/file-trigger-demo.tsx index 50d8760e..d045929b 100644 --- a/components/docs/buttons/file-trigger-demo.tsx +++ b/components/docs/buttons/file-trigger-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { FileTrigger } from 'ui' +import { FileTrigger } from "ui" export default function FileTriggerDemo() { return diff --git a/components/docs/buttons/file-trigger-disabled-demo.tsx b/components/docs/buttons/file-trigger-disabled-demo.tsx index 2a53dfc5..065a535a 100644 --- a/components/docs/buttons/file-trigger-disabled-demo.tsx +++ b/components/docs/buttons/file-trigger-disabled-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Description, FileTrigger } from 'ui' +import { Description, FileTrigger } from "ui" export default function FileTriggerDemo() { const [file, setFile] = React.useState(null) diff --git a/components/docs/buttons/file-trigger-folder-demo.tsx b/components/docs/buttons/file-trigger-folder-demo.tsx index ac6ede0b..e44aa643 100644 --- a/components/docs/buttons/file-trigger-folder-demo.tsx +++ b/components/docs/buttons/file-trigger-folder-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { FileTrigger } from 'ui' +import { FileTrigger } from "ui" export default function FileTriggerFolderDemo() { return diff --git a/components/docs/buttons/file-trigger-multiple-demo.tsx b/components/docs/buttons/file-trigger-multiple-demo.tsx index a009100f..abf03eeb 100644 --- a/components/docs/buttons/file-trigger-multiple-demo.tsx +++ b/components/docs/buttons/file-trigger-multiple-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { FileTrigger } from 'ui' +import { FileTrigger } from "ui" export default function FileTriggerMultipleDemo() { return diff --git a/components/docs/buttons/toggle-appearance-demo.tsx b/components/docs/buttons/toggle-appearance-demo.tsx index dc2da2a8..9541442e 100644 --- a/components/docs/buttons/toggle-appearance-demo.tsx +++ b/components/docs/buttons/toggle-appearance-demo.tsx @@ -1,15 +1,15 @@ -'use client' +"use client" -import { Toggle } from 'ui' +import { Toggle } from "ui" export default function ToggleAppearanceDemo() { return (
- {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}} - {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}} - {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}}
) } diff --git a/components/docs/buttons/toggle-controlled-demo.tsx b/components/docs/buttons/toggle-controlled-demo.tsx index ff463971..5f1eeacd 100644 --- a/components/docs/buttons/toggle-controlled-demo.tsx +++ b/components/docs/buttons/toggle-controlled-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { IconPin, IconUnpin } from 'justd-icons' -import { Toggle } from 'ui' +import { IconPin, IconUnpin } from "justd-icons" +import { Toggle } from "ui" export default function ToggleControlledDemo() { const [isSelected, setSelected] = React.useState(false) diff --git a/components/docs/buttons/toggle-demo.tsx b/components/docs/buttons/toggle-demo.tsx index 844b1215..faf7fcbb 100644 --- a/components/docs/buttons/toggle-demo.tsx +++ b/components/docs/buttons/toggle-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { Toggle } from 'ui' +import { Toggle } from "ui" export default function ToggleDemo() { - return {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + return {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}} } diff --git a/components/docs/buttons/toggle-disabled-demo.tsx b/components/docs/buttons/toggle-disabled-demo.tsx index f963e4ea..295edda2 100644 --- a/components/docs/buttons/toggle-disabled-demo.tsx +++ b/components/docs/buttons/toggle-disabled-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { IconPin } from 'justd-icons' -import { Toggle } from 'ui' +import { IconPin } from "justd-icons" +import { Toggle } from "ui" export default function ToggleDisabledDemo() { return ( diff --git a/components/docs/buttons/toggle-shape-demo.tsx b/components/docs/buttons/toggle-shape-demo.tsx index 4c3c95fe..4cc2f2e7 100644 --- a/components/docs/buttons/toggle-shape-demo.tsx +++ b/components/docs/buttons/toggle-shape-demo.tsx @@ -1,11 +1,11 @@ -'use client' +"use client" -import { Toggle } from 'ui' +import { Toggle } from "ui" export default function ToggleShapeDemo() { return ( - {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}} ) } diff --git a/components/docs/buttons/toggle-size-demo.tsx b/components/docs/buttons/toggle-size-demo.tsx index ed3c2b54..df94f3e1 100644 --- a/components/docs/buttons/toggle-size-demo.tsx +++ b/components/docs/buttons/toggle-size-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { IconAccessible, IconAccessibleFill } from 'justd-icons' -import { Toggle } from 'ui' +import { IconAccessible, IconAccessibleFill } from "justd-icons" +import { Toggle } from "ui" export default function ToggleSizeDemo() { return ( @@ -10,13 +10,13 @@ export default function ToggleSizeDemo() { {({ isSelected }) => <>{isSelected ? : }} - {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}} - {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}} - {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + {({ isSelected }) => <>{isSelected ? "Unpin" : "Pin"}}
) diff --git a/components/docs/collections/choicebox-columns-demo.tsx b/components/docs/collections/choicebox-columns-demo.tsx index 13711b9a..4c00e346 100644 --- a/components/docs/collections/choicebox-columns-demo.tsx +++ b/components/docs/collections/choicebox-columns-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Choicebox } from 'ui' +import { Choicebox } from "ui" export default function ChoiceboxColumnsDemo() { return ( @@ -19,10 +19,10 @@ export default function ChoiceboxColumnsDemo() { } const prices = [ - { id: 1, title: 'Basic', description: 'Essentials, get started' }, - { id: 2, title: 'Standard', description: 'More features, support' }, - { id: 3, title: 'Premium', description: 'Advanced, growing needs' }, - { id: 4, title: 'Deluxe', description: 'Top-tier, maximum performance' }, - { id: 5, title: 'Ultimate', description: 'All-inclusive, every feature' }, - { id: 6, title: 'Enterprise', description: 'Custom, large-scale operations' } + { id: 1, title: "Basic", description: "Essentials, get started" }, + { id: 2, title: "Standard", description: "More features, support" }, + { id: 3, title: "Premium", description: "Advanced, growing needs" }, + { id: 4, title: "Deluxe", description: "Top-tier, maximum performance" }, + { id: 5, title: "Ultimate", description: "All-inclusive, every feature" }, + { id: 6, title: "Enterprise", description: "Custom, large-scale operations" } ] diff --git a/components/docs/collections/choicebox-controlled-demo.tsx b/components/docs/collections/choicebox-controlled-demo.tsx index 2dd13e38..9ceea9f3 100644 --- a/components/docs/collections/choicebox-controlled-demo.tsx +++ b/components/docs/collections/choicebox-controlled-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import type { Selection } from 'react-aria-components' -import { Choicebox, Description } from 'ui' +import type { Selection } from "react-aria-components" +import { Choicebox, Description } from "ui" export default function ChoiceboxControlledDemo() { const [selectedKeys, setSelectedKeys] = React.useState(new Set([packages[0].id])) @@ -20,7 +20,7 @@ export default function ChoiceboxControlledDemo() { - You have selected: {Array.from(selectedKeys).join(', ')} + You have selected: {Array.from(selectedKeys).join(", ")} ) @@ -28,23 +28,23 @@ export default function ChoiceboxControlledDemo() { const packages = [ { - id: 'sm', - title: 'Small', - description: 'Perfect for beginners. Basic resources for light projects.' + id: "sm", + title: "Small", + description: "Perfect for beginners. Basic resources for light projects." }, { - id: 'md', - title: 'Medium', - description: 'Great for growing sites. More power and storage.' + id: "md", + title: "Medium", + description: "Great for growing sites. More power and storage." }, { - id: 'lg', - title: 'Large', - description: 'Ideal for busy sites. Lots of resources and support.' + id: "lg", + title: "Large", + description: "Ideal for busy sites. Lots of resources and support." }, { - id: 'xl', - title: 'Extra Large', - description: 'Max power for demanding applications. Top-tier performance.' + id: "xl", + title: "Extra Large", + description: "Max power for demanding applications. Top-tier performance." } ] diff --git a/components/docs/collections/choicebox-demo.tsx b/components/docs/collections/choicebox-demo.tsx index d757b3e6..d25cf8fe 100644 --- a/components/docs/collections/choicebox-demo.tsx +++ b/components/docs/collections/choicebox-demo.tsx @@ -1,29 +1,29 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Choicebox } from 'ui' +import { Choicebox } from "ui" const packages = [ { id: 1, - title: 'Small', - description: 'Perfect for beginners. Basic resources for light projects.' + title: "Small", + description: "Perfect for beginners. Basic resources for light projects." }, { id: 2, - title: 'Medium', - description: 'Great for growing sites. More power and storage.' + title: "Medium", + description: "Great for growing sites. More power and storage." }, { id: 3, - title: 'Large', - description: 'Ideal for busy sites. Lots of resources and support.' + title: "Large", + description: "Ideal for busy sites. Lots of resources and support." }, { id: 4, - title: 'Extra Large', - description: 'Max power for demanding applications. Top-tier performance.' + title: "Extra Large", + description: "Max power for demanding applications. Top-tier performance." } ] diff --git a/components/docs/collections/choicebox-disabled-demo.tsx b/components/docs/collections/choicebox-disabled-demo.tsx index 6082c32c..73a8c736 100644 --- a/components/docs/collections/choicebox-disabled-demo.tsx +++ b/components/docs/collections/choicebox-disabled-demo.tsx @@ -1,36 +1,36 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Choicebox } from 'ui' +import { Choicebox } from "ui" export default function ChoiceboxDisabledDemo() { return ( - {(item) => } + {(item) => } ) } const packages = [ { - id: 'sm', - title: 'Small', - description: 'Perfect for beginners. Basic resources for light projects.' + id: "sm", + title: "Small", + description: "Perfect for beginners. Basic resources for light projects." }, { - id: 'md', - title: 'Medium', - description: 'Great for growing sites. More power and storage.' + id: "md", + title: "Medium", + description: "Great for growing sites. More power and storage." }, { - id: 'lg', - title: 'Large', - description: 'Ideal for busy sites. Lots of resources and support.' + id: "lg", + title: "Large", + description: "Ideal for busy sites. Lots of resources and support." }, { - id: 'xl', - title: 'Extra Large', - description: 'Max power for demanding applications. Top-tier performance.' + id: "xl", + title: "Extra Large", + description: "Max power for demanding applications. Top-tier performance." } ] diff --git a/components/docs/collections/choicebox-single-selection-demo.tsx b/components/docs/collections/choicebox-single-selection-demo.tsx index 3dee2d06..551456b8 100644 --- a/components/docs/collections/choicebox-single-selection-demo.tsx +++ b/components/docs/collections/choicebox-single-selection-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Choicebox } from 'ui' +import { Choicebox } from "ui" export default function ChoiceboxSingleSelectionDemo() { return ( @@ -14,23 +14,23 @@ export default function ChoiceboxSingleSelectionDemo() { const packages = [ { - id: 'sm', - title: 'Small', - description: 'Perfect for beginners. Basic resources for light projects.' + id: "sm", + title: "Small", + description: "Perfect for beginners. Basic resources for light projects." }, { - id: 'md', - title: 'Medium', - description: 'Great for growing sites. More power and storage.' + id: "md", + title: "Medium", + description: "Great for growing sites. More power and storage." }, { - id: 'lg', - title: 'Large', - description: 'Ideal for busy sites. Lots of resources and support.' + id: "lg", + title: "Large", + description: "Ideal for busy sites. Lots of resources and support." }, { - id: 'xl', - title: 'Extra Large', - description: 'Max power for demanding applications. Top-tier performance.' + id: "xl", + title: "Extra Large", + description: "Max power for demanding applications. Top-tier performance." } ] diff --git a/components/docs/collections/command-basic-demo.tsx b/components/docs/collections/command-basic-demo.tsx index 1da4fdeb..aa6e8207 100644 --- a/components/docs/collections/command-basic-demo.tsx +++ b/components/docs/collections/command-basic-demo.tsx @@ -1,20 +1,20 @@ -'use client' +"use client" -import React, { useState } from 'react' +import React, { useState } from "react" export default function CommandBasicDemo() { const [open, setOpen] = useState(false) React.useEffect(() => { const down = (e: KeyboardEvent) => { - if (e.key === 'e') { + if (e.key === "e") { e.preventDefault() setOpen((open: boolean) => !open) } } - document.addEventListener('keydown', down) + document.addEventListener("keydown", down) - return () => document.removeEventListener('keydown', down) + return () => document.removeEventListener("keydown", down) }, []) return <>{/* */} } diff --git a/components/docs/collections/grid-list-controlled-demo.tsx b/components/docs/collections/grid-list-controlled-demo.tsx index f61ad883..c1a16884 100644 --- a/components/docs/collections/grid-list-controlled-demo.tsx +++ b/components/docs/collections/grid-list-controlled-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import type { Selection } from 'react-aria-components' -import { Description, GridList } from 'ui' +import type { Selection } from "react-aria-components" +import { Description, GridList } from "ui" export default function GridListControlledDemo() { const [selectedKeys, setSelectedKeys] = React.useState(new Set([])) @@ -20,16 +20,16 @@ export default function GridListControlledDemo() { {(item) => {item.name}} - You have selected: {Array.from(selectedKeys).join(', ')} + You have selected: {Array.from(selectedKeys).join(", ")}
) } const items = [ - { id: '1', name: 'The Beatles' }, - { id: '2', name: 'Led Zeppelin' }, - { id: '3', name: 'Pink Floyd' }, - { id: '4', name: 'Queen' }, - { id: '5', name: 'The Rolling Stones' } + { id: "1", name: "The Beatles" }, + { id: "2", name: "Led Zeppelin" }, + { id: "3", name: "Pink Floyd" }, + { id: "4", name: "Queen" }, + { id: "5", name: "The Rolling Stones" } ] diff --git a/components/docs/collections/grid-list-demo.tsx b/components/docs/collections/grid-list-demo.tsx index 25834a58..61c7c22a 100644 --- a/components/docs/collections/grid-list-demo.tsx +++ b/components/docs/collections/grid-list-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { GridList } from 'ui' +import { GridList } from "ui" export default function GridListDemo() { return ( @@ -11,9 +11,9 @@ export default function GridListDemo() { } const items = [ - { id: '1', name: 'The Beatles' }, - { id: '2', name: 'Led Zeppelin' }, - { id: '3', name: 'Pink Floyd' }, - { id: '4', name: 'Queen' }, - { id: '5', name: 'The Rolling Stones' } + { id: "1", name: "The Beatles" }, + { id: "2", name: "Led Zeppelin" }, + { id: "3", name: "Pink Floyd" }, + { id: "4", name: "Queen" }, + { id: "5", name: "The Rolling Stones" } ] diff --git a/components/docs/collections/grid-list-disabled-demo.tsx b/components/docs/collections/grid-list-disabled-demo.tsx index 5021e9f8..0da082ba 100644 --- a/components/docs/collections/grid-list-disabled-demo.tsx +++ b/components/docs/collections/grid-list-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { GridList } from 'ui' +import { GridList } from "ui" export default function GridListDisabledDemo() { return ( @@ -20,9 +20,9 @@ export default function GridListDisabledDemo() { } const items = [ - { id: '1', name: 'The Beatles' }, - { id: '2', name: 'Led Zeppelin' }, - { id: '3', name: 'Pink Floyd' }, - { id: '4', name: 'Queen' }, - { id: '5', name: 'The Rolling Stones' } + { id: "1", name: "The Beatles" }, + { id: "2", name: "Led Zeppelin" }, + { id: "3", name: "Pink Floyd" }, + { id: "4", name: "Queen" }, + { id: "5", name: "The Rolling Stones" } ] diff --git a/components/docs/collections/grid-list-drag-between-item-demo.tsx b/components/docs/collections/grid-list-drag-between-item-demo.tsx index 63f0f843..07e16958 100644 --- a/components/docs/collections/grid-list-drag-between-item-demo.tsx +++ b/components/docs/collections/grid-list-drag-between-item-demo.tsx @@ -1,17 +1,17 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import GridListDragDemo from '@/components/docs/collections/grid-list-drag-demo' -import { useDragAndDrop } from 'react-aria-components' -import { useListData } from 'react-stately' -import { GridList } from 'ui' +import GridListDragDemo from "@/components/docs/collections/grid-list-drag-demo" +import { useDragAndDrop } from "react-aria-components" +import { useListData } from "react-stately" +import { GridList } from "ui" export default function GridListDragBetweenItemDemo() { const list = useListData({ initialItems: [ - { id: 6, name: 'The Byrds' }, - { id: 7, name: 'The Yardbirds' } + { id: 6, name: "The Byrds" }, + { id: 7, name: "The Yardbirds" } ] }) @@ -19,14 +19,14 @@ export default function GridListDragBetweenItemDemo() { async onInsert(e) { const items = await Promise.all( e.items.map(async (item) => { - const name = item.kind === 'text' ? await item.getText('text/plain') : item.name + const name = item.kind === "text" ? await item.getText("text/plain") : item.name return { id: Math.random(), name } }) ) - if (e.target.dropPosition === 'before') { + if (e.target.dropPosition === "before") { list.insertBefore(e.target.key, ...items) - } else if (e.target.dropPosition === 'after') { + } else if (e.target.dropPosition === "after") { list.insertAfter(e.target.key, ...items) } } @@ -45,21 +45,21 @@ export default function GridListDragBetweenItemDemo() { export function OtherEmptyList() { const list = useListData({ - initialItems: [{ id: 7, name: 'The Who' }] + initialItems: [{ id: 7, name: "The Who" }] }) const { dragAndDropHooks } = useDragAndDrop({ async onInsert(e) { const items = await Promise.all( e.items.map(async (item) => { - const name = item.kind === 'text' ? await item.getText('text/plain') : item.name + const name = item.kind === "text" ? await item.getText("text/plain") : item.name return { id: Math.random(), name } }) ) - if (e.target.dropPosition === 'before') { + if (e.target.dropPosition === "before") { list.insertBefore(e.target.key, ...items) - } else if (e.target.dropPosition === 'after') { + } else if (e.target.dropPosition === "after") { list.insertAfter(e.target.key, ...items) } } diff --git a/components/docs/collections/grid-list-drag-demo.tsx b/components/docs/collections/grid-list-drag-demo.tsx index 101d9904..eda5bbc7 100644 --- a/components/docs/collections/grid-list-drag-demo.tsx +++ b/components/docs/collections/grid-list-drag-demo.tsx @@ -1,19 +1,19 @@ -'use client' +"use client" -import { useDragAndDrop } from 'react-aria-components' -import { useListData } from 'react-stately' -import { GridList } from 'ui' +import { useDragAndDrop } from "react-aria-components" +import { useListData } from "react-stately" +import { GridList } from "ui" export default function GridListDragDemo() { const list = useListData({ initialItems: items }) const { dragAndDropHooks } = useDragAndDrop({ - getItems: (keys) => [...keys].map((key) => ({ 'text/plain': list.getItem(key).name })), + getItems: (keys) => [...keys].map((key) => ({ "text/plain": list.getItem(key).name })), onReorder(e) { - if (e.target.dropPosition === 'before') { + if (e.target.dropPosition === "before") { list.moveBefore(e.target.key, e.keys) - } else if (e.target.dropPosition === 'after') { + } else if (e.target.dropPosition === "after") { list.moveAfter(e.target.key, e.keys) } } @@ -34,12 +34,12 @@ export default function GridListDragDemo() { } const items = [ - { id: 1, name: 'The Beatles' }, - { id: 2, name: 'Led Zeppelin' }, - { id: 3, name: 'Pink Floyd' }, - { id: 4, name: 'Queen' }, - { id: 5, name: 'The Rolling Stones' }, - { id: 6, name: 'The Beach Boys' }, - { id: 7, name: 'The Kinks' }, - { id: 8, name: 'The Who' } + { id: 1, name: "The Beatles" }, + { id: 2, name: "Led Zeppelin" }, + { id: 3, name: "Pink Floyd" }, + { id: 4, name: "Queen" }, + { id: 5, name: "The Rolling Stones" }, + { id: 6, name: "The Beach Boys" }, + { id: 7, name: "The Kinks" }, + { id: 8, name: "The Who" } ] diff --git a/components/docs/collections/grid-list-multiple-demo.tsx b/components/docs/collections/grid-list-multiple-demo.tsx index 3e942292..ef883ddf 100644 --- a/components/docs/collections/grid-list-multiple-demo.tsx +++ b/components/docs/collections/grid-list-multiple-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { GridList } from 'ui' +import { GridList } from "ui" export default function GridListMultipleDemo() { return ( @@ -18,9 +18,9 @@ export default function GridListMultipleDemo() { } const items = [ - { id: '1', name: 'The Beatles' }, - { id: '2', name: 'Led Zeppelin' }, - { id: '3', name: 'Pink Floyd' }, - { id: '4', name: 'Queen' }, - { id: '5', name: 'The Rolling Stones' } + { id: "1", name: "The Beatles" }, + { id: "2", name: "Led Zeppelin" }, + { id: "3", name: "Pink Floyd" }, + { id: "4", name: "Queen" }, + { id: "5", name: "The Rolling Stones" } ] diff --git a/components/docs/collections/grid-list-render-empty-state-demo.tsx b/components/docs/collections/grid-list-render-empty-state-demo.tsx index b44a2ec1..95f51929 100644 --- a/components/docs/collections/grid-list-render-empty-state-demo.tsx +++ b/components/docs/collections/grid-list-render-empty-state-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { GridList } from 'ui' +import { GridList } from "ui" export default function GridListRenderEmptyStateDemo() { return ( diff --git a/components/docs/collections/list-box-controlled-demo.tsx b/components/docs/collections/list-box-controlled-demo.tsx index 85b0d97a..6df76f56 100644 --- a/components/docs/collections/list-box-controlled-demo.tsx +++ b/components/docs/collections/list-box-controlled-demo.tsx @@ -1,12 +1,12 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import type { Selection } from 'react-aria-components' -import { Description, ListBox } from 'ui' +import type { Selection } from "react-aria-components" +import { Description, ListBox } from "ui" export default function ListBoxControlledDemo() { - const [selected, setSelected] = React.useState(new Set(['2'])) + const [selected, setSelected] = React.useState(new Set(["2"])) return ( <> (new Set(['2'])) + const [selected, setSelected] = React.useState(new Set(["2"])) return ( <> 0 && ( - Selected: {selected === 'all' ? 'All selected' : [...selected].join(', ')} + Selected: {selected === "all" ? "All selected" : [...selected].join(", ")} )} @@ -35,30 +35,30 @@ export default function ListBoxControlledDemo() { const fruits = [ { id: 1, - name: 'Apple' + name: "Apple" }, { id: 2, - name: 'Banana' + name: "Banana" }, { id: 3, - name: 'Orange' + name: "Orange" }, { id: 4, - name: 'Strawberry' + name: "Strawberry" }, { id: 5, - name: 'Grapes' + name: "Grapes" }, { id: 6, - name: 'Mango' + name: "Mango" }, { id: 7, - name: 'Pineapple' + name: "Pineapple" } ] diff --git a/components/docs/collections/list-box-rearrange-demo.tsx b/components/docs/collections/list-box-rearrange-demo.tsx index b4b33a3e..442afb3d 100644 --- a/components/docs/collections/list-box-rearrange-demo.tsx +++ b/components/docs/collections/list-box-rearrange-demo.tsx @@ -1,26 +1,26 @@ -'use client' +"use client" -import { useDragAndDrop } from 'react-aria-components' -import { useListData } from 'react-stately' -import { ListBox } from 'ui' +import { useDragAndDrop } from "react-aria-components" +import { useListData } from "react-stately" +import { ListBox } from "ui" export default function ListBoxRearrangeDemo() { const list = useListData({ initialItems: [ - { id: '1', name: 'Nirvana' }, - { id: '2', name: 'Radiohead' }, - { id: '3', name: 'Foo Fighters' }, - { id: '4', name: 'Arctic Monkeys' }, - { id: '5', name: 'The Strokes' } + { id: "1", name: "Nirvana" }, + { id: "2", name: "Radiohead" }, + { id: "3", name: "Foo Fighters" }, + { id: "4", name: "Arctic Monkeys" }, + { id: "5", name: "The Strokes" } ] }) const { dragAndDropHooks } = useDragAndDrop({ - getItems: (keys) => [...keys].map((key) => ({ 'text/plain': list.getItem(key).name })), + getItems: (keys) => [...keys].map((key) => ({ "text/plain": list.getItem(key).name })), onReorder(e) { - if (e.target.dropPosition === 'before') { + if (e.target.dropPosition === "before") { list.moveBefore(e.target.key, e.keys) - } else if (e.target.dropPosition === 'after') { + } else if (e.target.dropPosition === "after") { list.moveAfter(e.target.key, e.keys) } } diff --git a/components/docs/collections/list-box-section-demo.tsx b/components/docs/collections/list-box-section-demo.tsx index a8427e1c..0ed806dc 100644 --- a/components/docs/collections/list-box-section-demo.tsx +++ b/components/docs/collections/list-box-section-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ListBox } from 'ui' +import { ListBox } from "ui" export default function ListBoxSectionDemo() { return ( @@ -17,11 +17,11 @@ export default function ListBoxSectionDemo() { const bands = [ { id: 1, - name: 'The Beatles', + name: "The Beatles", albums: [ { id: 101, - name: 'Abbey Road' + name: "Abbey Road" }, { id: 102, @@ -29,201 +29,201 @@ const bands = [ }, { id: 103, - name: 'Revolver' + name: "Revolver" } ] }, { id: 2, - name: 'Led Zeppelin', + name: "Led Zeppelin", albums: [ { id: 201, - name: 'Led Zeppelin IV' + name: "Led Zeppelin IV" }, { id: 202, - name: 'Physical Graffiti' + name: "Physical Graffiti" }, { id: 203, - name: 'Houses of the Holy' + name: "Houses of the Holy" }, { id: 204, - name: 'Led Zeppelin II' + name: "Led Zeppelin II" } ] }, { id: 3, - name: 'Pink Floyd', + name: "Pink Floyd", albums: [ { id: 301, - name: 'The Dark Side of the Moon' + name: "The Dark Side of the Moon" }, { id: 302, - name: 'The Wall' + name: "The Wall" }, { id: 303, - name: 'Wish You Were Here' + name: "Wish You Were Here" }, { id: 304, - name: 'Animals' + name: "Animals" }, { id: 305, - name: 'Meddle' + name: "Meddle" } ] }, { id: 4, - name: 'Queen', + name: "Queen", albums: [ { id: 401, - name: 'A Night at the Opera' + name: "A Night at the Opera" }, { id: 402, - name: 'News of the World' + name: "News of the World" }, { id: 403, - name: 'Sheer Heart Attack' + name: "Sheer Heart Attack" }, { id: 404, - name: 'The Game' + name: "The Game" }, { id: 405, - name: 'Jazz' + name: "Jazz" }, { id: 406, - name: 'Queen II' + name: "Queen II" } ] }, { id: 5, - name: 'The Rolling Stones', + name: "The Rolling Stones", albums: [ { id: 501, - name: 'Let It Bleed' + name: "Let It Bleed" }, { id: 502, - name: 'Sticky Fingers' + name: "Sticky Fingers" }, { id: 503, - name: 'Exile on Main St.' + name: "Exile on Main St." }, { id: 504, - name: 'Beggars Banquet' + name: "Beggars Banquet" }, { id: 505, - name: 'Some Girls' + name: "Some Girls" }, { id: 506, - name: 'Tattoo You' + name: "Tattoo You" } ] }, { id: 6, - name: 'Nirvana', + name: "Nirvana", albums: [ { id: 601, - name: 'Nevermind' + name: "Nevermind" }, { id: 602, - name: 'In Utero' + name: "In Utero" }, { id: 603, - name: 'Bleach' + name: "Bleach" } ] }, { id: 7, - name: 'The Doors', + name: "The Doors", albums: [ { id: 701, - name: 'The Doors' + name: "The Doors" }, { id: 702, - name: 'L.A. Woman' + name: "L.A. Woman" }, { id: 703, - name: 'Strange Days' + name: "Strange Days" }, { id: 704, - name: 'Morrison Hotel' + name: "Morrison Hotel" } ] }, { id: 8, - name: 'Radiohead', + name: "Radiohead", albums: [ { id: 801, - name: 'OK Computer' + name: "OK Computer" }, { id: 802, - name: 'Kid A' + name: "Kid A" }, { id: 803, - name: 'The Bends' + name: "The Bends" }, { id: 804, - name: 'In Rainbows' + name: "In Rainbows" } ] }, { id: 9, - name: 'AC/DC', + name: "AC/DC", albums: [ { id: 901, - name: 'Back in Black' + name: "Back in Black" }, { id: 902, - name: 'Highway to Hell' + name: "Highway to Hell" }, { id: 903, - name: 'Let There Be Rock' + name: "Let There Be Rock" } ] }, { id: 10, - name: 'The Who', + name: "The Who", albums: [ { id: 1001, @@ -231,19 +231,19 @@ const bands = [ }, { id: 1002, - name: 'Tommy' + name: "Tommy" }, { id: 1003, - name: 'Quadrophenia' + name: "Quadrophenia" }, { id: 1004, - name: 'My Generation' + name: "My Generation" }, { id: 1005, - name: 'The Who Sell Out' + name: "The Who Sell Out" } ] } diff --git a/components/docs/collections/menu-basic-demo.tsx b/components/docs/collections/menu-basic-demo.tsx index 2ce0d972..d95aa1cf 100644 --- a/components/docs/collections/menu-basic-demo.tsx +++ b/components/docs/collections/menu-basic-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Menu } from 'ui' +import { Menu } from "ui" export default function MenuBasicDemo() { return ( diff --git a/components/docs/collections/menu-collection-demo.tsx b/components/docs/collections/menu-collection-demo.tsx index 99f8a164..b2e5e65c 100644 --- a/components/docs/collections/menu-collection-demo.tsx +++ b/components/docs/collections/menu-collection-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Button, Menu } from 'ui' +import { Button, Menu } from "ui" export default function MenuCollectionDemo() { return ( @@ -17,43 +17,43 @@ export default function MenuCollectionDemo() { const categories = [ { - name: 'Technology', - slug: 'technology' + name: "Technology", + slug: "technology" }, { - name: 'Health', - slug: 'health' + name: "Health", + slug: "health" }, { - name: 'Business', - slug: 'business' + name: "Business", + slug: "business" }, { - name: 'Travel', - slug: 'travel' + name: "Travel", + slug: "travel" }, { - name: 'Education', - slug: 'education' + name: "Education", + slug: "education" }, { - name: 'Entertainment', - slug: 'entertainment' + name: "Entertainment", + slug: "entertainment" }, { - name: 'Sports', - slug: 'sports' + name: "Sports", + slug: "sports" }, { - name: 'Fashion', - slug: 'fashion' + name: "Fashion", + slug: "fashion" }, { - name: 'Food', - slug: 'food' + name: "Food", + slug: "food" }, { - name: 'Science', - slug: 'science' + name: "Science", + slug: "science" } ] diff --git a/components/docs/collections/menu-danger-demo.tsx b/components/docs/collections/menu-danger-demo.tsx index 23ab58ae..f4b8612f 100644 --- a/components/docs/collections/menu-danger-demo.tsx +++ b/components/docs/collections/menu-danger-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Menu } from 'ui' +import { Menu } from "ui" export default function MenuDangerDemo() { return ( diff --git a/components/docs/collections/menu-disabled-demo.tsx b/components/docs/collections/menu-disabled-demo.tsx index ed4e5986..257e805c 100644 --- a/components/docs/collections/menu-disabled-demo.tsx +++ b/components/docs/collections/menu-disabled-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Menu } from 'ui' +import { Menu } from "ui" export default function MenuDisabledDemo() { return ( diff --git a/components/docs/collections/menu-item-details-demo.tsx b/components/docs/collections/menu-item-details-demo.tsx index b5190aed..9f65a52f 100644 --- a/components/docs/collections/menu-item-details-demo.tsx +++ b/components/docs/collections/menu-item-details-demo.tsx @@ -1,4 +1,4 @@ -import { Button, Menu } from 'ui' +import { Button, Menu } from "ui" export default function MenuItemDetailsDemo() { return ( @@ -16,9 +16,9 @@ export default function MenuItemDetailsDemo() { } const roles = [ - { id: 1, name: 'Admin', description: 'Has full access to all resources' }, - { id: 2, name: 'Editor', description: 'Can edit content but has limited access to settings' }, - { id: 3, name: 'Viewer', description: 'Can view content but cannot make changes' }, - { id: 4, name: 'Contributor', description: 'Can contribute content for review' }, - { id: 5, name: 'Guest', description: 'Limited access, mostly for viewing purposes' } + { id: 1, name: "Admin", description: "Has full access to all resources" }, + { id: 2, name: "Editor", description: "Can edit content but has limited access to settings" }, + { id: 3, name: "Viewer", description: "Can view content but cannot make changes" }, + { id: 4, name: "Contributor", description: "Can contribute content for review" }, + { id: 5, name: "Guest", description: "Limited access, mostly for viewing purposes" } ] diff --git a/components/docs/collections/menu-respect-screen-demo.tsx b/components/docs/collections/menu-respect-screen-demo.tsx index cfec1afa..8caef087 100644 --- a/components/docs/collections/menu-respect-screen-demo.tsx +++ b/components/docs/collections/menu-respect-screen-demo.tsx @@ -1,13 +1,13 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { buttonStyles, Menu } from 'ui' +import { buttonStyles, Menu } from "ui" export default function MenuRespectScreenDemo() { return ( - Open + Open Dashboard Reports diff --git a/components/docs/collections/menu-section-demo.tsx b/components/docs/collections/menu-section-demo.tsx index ea5db11f..4cd0d8a8 100644 --- a/components/docs/collections/menu-section-demo.tsx +++ b/components/docs/collections/menu-section-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Menu } from 'ui' +import { Menu } from "ui" export default function MenuSectionDemo() { return ( @@ -20,177 +20,177 @@ export default function MenuSectionDemo() { const cities = [ { id: 1, - name: 'New York City', + name: "New York City", landmarks: [ { id: 101, - name: 'Statue of Liberty' + name: "Statue of Liberty" }, { id: 102, - name: 'Central Park' + name: "Central Park" }, { id: 103, - name: 'Empire State Building' + name: "Empire State Building" }, { id: 104, - name: 'Times Square' + name: "Times Square" } ] }, { id: 2, - name: 'Paris', + name: "Paris", landmarks: [ { id: 201, - name: 'Eiffel Tower' + name: "Eiffel Tower" }, { id: 202, - name: 'Louvre Museum' + name: "Louvre Museum" }, { id: 203, - name: 'Notre-Dame Cathedral' + name: "Notre-Dame Cathedral" }, { id: 204, - name: 'Champs-Élysées' + name: "Champs-Élysées" } ] }, { id: 3, - name: 'Tokyo', + name: "Tokyo", landmarks: [ { id: 301, - name: 'Tokyo Tower' + name: "Tokyo Tower" }, { id: 302, - name: 'Shibuya Crossing' + name: "Shibuya Crossing" }, { id: 303, - name: 'Senso-ji Temple' + name: "Senso-ji Temple" }, { id: 304, - name: 'Meiji Shrine' + name: "Meiji Shrine" }, { id: 305, - name: 'Tokyo Skytree' + name: "Tokyo Skytree" } ] }, { id: 4, - name: 'London', + name: "London", landmarks: [ { id: 401, - name: 'Big Ben' + name: "Big Ben" }, { id: 402, - name: 'Tower of London' + name: "Tower of London" }, { id: 403, - name: 'Buckingham Palace' + name: "Buckingham Palace" }, { id: 404, - name: 'London Eye' + name: "London Eye" }, { id: 405, - name: 'Westminster Abbey' + name: "Westminster Abbey" } ] }, { id: 5, - name: 'Rome', + name: "Rome", landmarks: [ { id: 501, - name: 'Colosseum' + name: "Colosseum" }, { id: 502, - name: 'Vatican City' + name: "Vatican City" }, { id: 503, - name: 'Trevi Fountain' + name: "Trevi Fountain" }, { id: 504, - name: 'Pantheon' + name: "Pantheon" } ] }, { id: 6, - name: 'Sydney', + name: "Sydney", landmarks: [ { id: 601, - name: 'Sydney Opera House' + name: "Sydney Opera House" }, { id: 602, - name: 'Sydney Harbour Bridge' + name: "Sydney Harbour Bridge" }, { id: 603, - name: 'Bondi Beach' + name: "Bondi Beach" }, { id: 604, - name: 'Royal Botanic Garden' + name: "Royal Botanic Garden" } ] }, { id: 7, - name: 'Dubai', + name: "Dubai", landmarks: [ { id: 701, - name: 'Burj Khalifa' + name: "Burj Khalifa" }, { id: 702, - name: 'Palm Jumeirah' + name: "Palm Jumeirah" }, { id: 703, - name: 'Dubai Mall' + name: "Dubai Mall" }, { id: 704, - name: 'Burj Al Arab' + name: "Burj Al Arab" } ] }, { id: 8, - name: 'Moscow', + name: "Moscow", landmarks: [ { id: 801, - name: 'Red Square' + name: "Red Square" }, { id: 802, - name: 'Kremlin' + name: "Kremlin" }, { id: 803, @@ -198,47 +198,47 @@ const cities = [ }, { id: 804, - name: 'Bolshoi Theatre' + name: "Bolshoi Theatre" } ] }, { id: 9, - name: 'Cairo', + name: "Cairo", landmarks: [ { id: 901, - name: 'Pyramids of Giza' + name: "Pyramids of Giza" }, { id: 902, - name: 'Great Sphinx of Giza' + name: "Great Sphinx of Giza" }, { id: 903, - name: 'Egyptian Museum' + name: "Egyptian Museum" } ] }, { id: 10, - name: 'Rio de Janeiro', + name: "Rio de Janeiro", landmarks: [ { id: 1001, - name: 'Christ the Redeemer' + name: "Christ the Redeemer" }, { id: 1002, - name: 'Sugarloaf Mountain' + name: "Sugarloaf Mountain" }, { id: 1003, - name: 'Copacabana Beach' + name: "Copacabana Beach" }, { id: 1004, - name: 'Maracanã Stadium' + name: "Maracanã Stadium" } ] } diff --git a/components/docs/collections/menu-sub-demo.tsx b/components/docs/collections/menu-sub-demo.tsx index c98bfce5..d4bfb478 100644 --- a/components/docs/collections/menu-sub-demo.tsx +++ b/components/docs/collections/menu-sub-demo.tsx @@ -1,13 +1,13 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { buttonStyles, Menu } from 'ui' +import { buttonStyles, Menu } from "ui" export default function MenuSubDemo() { return ( - Open + Open Dashboard Reports diff --git a/components/docs/collections/menu-with-arrow-demo.tsx b/components/docs/collections/menu-with-arrow-demo.tsx index 1166a9b3..d0bf574a 100644 --- a/components/docs/collections/menu-with-arrow-demo.tsx +++ b/components/docs/collections/menu-with-arrow-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { IconHashtag, IconHeadphones, IconLogout, IconPlus, IconSettings } from 'justd-icons' -import { Avatar, Menu } from 'ui' +import { IconHashtag, IconHeadphones, IconLogout, IconPlus, IconSettings } from "justd-icons" +import { Avatar, Menu } from "ui" export default function MenuWithArrowDemo() { return ( diff --git a/components/docs/collections/menu-with-icon-demo.tsx b/components/docs/collections/menu-with-icon-demo.tsx index fd5f2bce..a2c1c697 100644 --- a/components/docs/collections/menu-with-icon-demo.tsx +++ b/components/docs/collections/menu-with-icon-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import React from 'react' +import React from "react" import { IconCommandRegular, @@ -11,9 +11,9 @@ import { IconMoon, IconSettings, IconSun -} from 'justd-icons' -import { useTheme } from 'next-themes' -import { Avatar, Menu } from 'ui' +} from "justd-icons" +import { useTheme } from "next-themes" +import { Avatar, Menu } from "ui" export default function MenuWithIconDemo() { const { resolvedTheme, setTheme } = useTheme() @@ -45,9 +45,9 @@ export default function MenuWithIconDemo() { - {resolvedTheme === 'light' ? ( + {resolvedTheme === "light" ? ( - ) : resolvedTheme === 'dark' ? ( + ) : resolvedTheme === "dark" ? ( ) : ( @@ -55,13 +55,13 @@ export default function MenuWithIconDemo() { Switch theme - setTheme('system')}> + setTheme("system")}> System - setTheme('dark')}> + setTheme("dark")}> Dark - setTheme('light')}> + setTheme("light")}> Light diff --git a/components/docs/collections/multiple-menu-demo.tsx b/components/docs/collections/multiple-menu-demo.tsx index 8f16541e..19c575d3 100644 --- a/components/docs/collections/multiple-menu-demo.tsx +++ b/components/docs/collections/multiple-menu-demo.tsx @@ -1,12 +1,12 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { type Selection } from '@react-types/shared' -import { Button, Menu } from 'ui' +import { type Selection } from "@react-types/shared" +import { Button, Menu } from "ui" export default function MultipleMenuDemo() { - const [selected, setSelected] = React.useState(new Set(['autoPlay'])) + const [selected, setSelected] = React.useState(new Set(["autoPlay"])) return ( @@ -30,31 +30,31 @@ export default function MultipleMenuDemo() { const items = [ { - name: 'Auto-Play Videos', - slug: 'autoPlay' + name: "Auto-Play Videos", + slug: "autoPlay" }, { - name: 'High-Quality Streaming', - slug: 'highQuality' + name: "High-Quality Streaming", + slug: "highQuality" }, { - name: 'Exclusive Releases', - slug: 'exclusiveContent' + name: "Exclusive Releases", + slug: "exclusiveContent" }, { - name: 'Default Subtitles', - slug: 'subtitles' + name: "Default Subtitles", + slug: "subtitles" }, { - name: 'Personalized Recommendations', - slug: 'recommendations' + name: "Personalized Recommendations", + slug: "recommendations" }, { - name: 'Background Play', - slug: 'backgroundPlay' + name: "Background Play", + slug: "backgroundPlay" }, { - name: 'Allow Downloads', - slug: 'download' + name: "Allow Downloads", + slug: "download" } ] diff --git a/components/docs/collections/single-menu-demo.tsx b/components/docs/collections/single-menu-demo.tsx index 39bf8da2..1862d073 100644 --- a/components/docs/collections/single-menu-demo.tsx +++ b/components/docs/collections/single-menu-demo.tsx @@ -1,38 +1,38 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import type { Placement } from '@react-types/overlays' -import type { Selection } from 'react-aria-components' -import { Button, Menu } from 'ui' +import type { Placement } from "@react-types/overlays" +import type { Selection } from "react-aria-components" +import { Button, Menu } from "ui" export const placements = [ - 'bottom', - 'bottom left', - 'bottom right', - 'bottom start', - 'bottom end', - 'top', - 'top left', - 'top right', - 'top start', - 'top end', - 'left', - 'left top', - 'left bottom', - 'start', - 'start top', - 'start bottom', - 'right', - 'right top', - 'right bottom', - 'end', - 'end top', - 'end bottom' + "bottom", + "bottom left", + "bottom right", + "bottom start", + "bottom end", + "top", + "top left", + "top right", + "top start", + "top end", + "left", + "left top", + "left bottom", + "start", + "start top", + "start bottom", + "right", + "right top", + "right bottom", + "end", + "end top", + "end bottom" ].map((item, i) => ({ id: i, name: item })) export default function SingleMenuDemo() { - const [selected, setSelected] = React.useState(new Set(['bottom'])) + const [selected, setSelected] = React.useState(new Set(["bottom"])) return ( diff --git a/components/docs/collections/table-bulk-demo.tsx b/components/docs/collections/table-bulk-demo.tsx index 67598385..74d09b38 100644 --- a/components/docs/collections/table-bulk-demo.tsx +++ b/components/docs/collections/table-bulk-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import type { Selection } from 'react-aria-components' -import { Card, Description, Table } from 'ui' +import type { Selection } from "react-aria-components" +import { Card, Description, Table } from "ui" export default function TableBulkDemo() { const [selectedKeys, setSelectedKeys] = React.useState(new Set()) @@ -39,10 +39,10 @@ export default function TableBulkDemo() { {Array.from(selectedKeys).length > 0 ? ( <> - You have selected: {Array.from(selectedKeys).join(', ')} + You have selected: {Array.from(selectedKeys).join(", ")} ) : ( - 'You have not selected anything.' + "You have not selected anything." )} @@ -51,46 +51,46 @@ export default function TableBulkDemo() { export const books = [ { - id: '1', - title: 'To Kill a Mockingbird', - author: 'Harper Lee', - genre: 'Fiction', + id: "1", + title: "To Kill a Mockingbird", + author: "Harper Lee", + genre: "Fiction", publishedYear: 1960 }, - { id: '2', title: '1984', author: 'George Orwell', genre: 'Dystopian', publishedYear: 1949 }, + { id: "2", title: "1984", author: "George Orwell", genre: "Dystopian", publishedYear: 1949 }, { - id: '3', - title: 'The Great Gatsby', - author: 'F. Scott Fitzgerald', - genre: 'Fiction', + id: "3", + title: "The Great Gatsby", + author: "F. Scott Fitzgerald", + genre: "Fiction", publishedYear: 1925 }, { - id: '4', - title: 'The Catcher in the Rye', - author: 'J.D. Salinger', - genre: 'Fiction', + id: "4", + title: "The Catcher in the Rye", + author: "J.D. Salinger", + genre: "Fiction", publishedYear: 1951 }, { - id: '5', - title: 'Pride and Prejudice', - author: 'Jane Austen', - genre: 'Romance', + id: "5", + title: "Pride and Prejudice", + author: "Jane Austen", + genre: "Romance", publishedYear: 1813 }, { - id: '6', - title: 'The Lord of the Rings', - author: 'J.R.R. Tolkien', - genre: 'Fantasy', + id: "6", + title: "The Lord of the Rings", + author: "J.R.R. Tolkien", + genre: "Fantasy", publishedYear: 1954 }, { - id: '7', + id: "7", title: "Harry Potter and the Sorcerer's Stone", - author: 'J.K. Rowling', - genre: 'Fantasy', + author: "J.K. Rowling", + genre: "Fantasy", publishedYear: 1997 } ] diff --git a/components/docs/collections/table-demo.tsx b/components/docs/collections/table-demo.tsx index 61bb24d1..f9834702 100644 --- a/components/docs/collections/table-demo.tsx +++ b/components/docs/collections/table-demo.tsx @@ -1,11 +1,11 @@ -'use client' +"use client" -import { NumberFormatter } from '@internationalized/number' -import { IconDotsVertical } from 'justd-icons' -import { Card, Menu, Table } from 'ui' +import { NumberFormatter } from "@internationalized/number" +import { IconDotsVertical } from "justd-icons" +import { Card, Menu, Table } from "ui" export default function TableDemo() { - const formatter = new NumberFormatter('en-US', { style: 'currency', currency: 'USD' }) + const formatter = new NumberFormatter("en-US", { style: "currency", currency: "USD" }) const priceFormat = (price: number) => formatter.format(price) return ( @@ -51,32 +51,32 @@ export default function TableDemo() { } export const products = [ - { id: '1', name: 'iPhone 13', category: 'Electronics', price: 799, brand: 'Apple', stock: 150 }, + { id: "1", name: "iPhone 13", category: "Electronics", price: 799, brand: "Apple", stock: 150 }, { - id: '2', - name: 'Galaxy S21', - category: 'Electronics', + id: "2", + name: "Galaxy S21", + category: "Electronics", price: 699, - brand: 'Samsung', + brand: "Samsung", stock: 200 }, - { id: '3', name: 'MacBook Pro', category: 'Computers', price: 1299, brand: 'Apple', stock: 80 }, - { id: '4', name: 'Dell XPS 13', category: 'Computers', price: 999, brand: 'Dell', stock: 50 }, + { id: "3", name: "MacBook Pro", category: "Computers", price: 1299, brand: "Apple", stock: 80 }, + { id: "4", name: "Dell XPS 13", category: "Computers", price: 999, brand: "Dell", stock: 50 }, { - id: '5', - name: 'Sony WH-1000XM4', - category: 'Headphones', + id: "5", + name: "Sony WH-1000XM4", + category: "Headphones", price: 349, - brand: 'Sony', + brand: "Sony", stock: 120 }, - { id: '6', name: 'AirPods Pro', category: 'Headphones', price: 249, brand: 'Apple', stock: 180 }, + { id: "6", name: "AirPods Pro", category: "Headphones", price: 249, brand: "Apple", stock: 180 }, { - id: '7', - name: 'Fitbit Charge 5', - category: 'Wearables', + id: "7", + name: "Fitbit Charge 5", + category: "Wearables", price: 179, - brand: 'Fitbit', + brand: "Fitbit", stock: 75 } ] diff --git a/components/docs/collections/table-drag-demo.tsx b/components/docs/collections/table-drag-demo.tsx index abccce72..ce4f91ff 100644 --- a/components/docs/collections/table-drag-demo.tsx +++ b/components/docs/collections/table-drag-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import { IconStarFill } from 'justd-icons' -import { useDragAndDrop } from 'react-aria-components' -import { useListData } from 'react-stately' -import { Card, Table } from 'ui' +import { IconStarFill } from "justd-icons" +import { useDragAndDrop } from "react-aria-components" +import { useListData } from "react-stately" +import { Card, Table } from "ui" export default function TableDragDemo() { const list = useListData({ @@ -13,12 +13,12 @@ export default function TableDragDemo() { const { dragAndDropHooks } = useDragAndDrop({ getItems: (keys) => [...keys].map((key) => ({ - 'text/plain': list.getItem(key).name + "text/plain": list.getItem(key).name })), onReorder(e) { - if (e.target.dropPosition === 'before') { + if (e.target.dropPosition === "before") { list.moveBefore(e.target.key, e.keys) - } else if (e.target.dropPosition === 'after') { + } else if (e.target.dropPosition === "after") { list.moveAfter(e.target.key, e.keys) } } @@ -55,59 +55,59 @@ export default function TableDragDemo() { const movies = [ { - id: '1', - name: 'The Matrix', - genre: 'Sci-Fi', + id: "1", + name: "The Matrix", + genre: "Sci-Fi", releaseYear: 1999, - director: 'Wachowskis', + director: "Wachowskis", rating: 8.7 }, { - id: '2', - name: 'Inception', - genre: 'Sci-Fi', + id: "2", + name: "Inception", + genre: "Sci-Fi", releaseYear: 2010, - director: 'Christopher Nolan', + director: "Christopher Nolan", rating: 8.8 }, { - id: '3', - name: 'The Godfather', - genre: 'Crime', + id: "3", + name: "The Godfather", + genre: "Crime", releaseYear: 1972, - director: 'Francis Ford Coppola', + director: "Francis Ford Coppola", rating: 9.2 }, { - id: '4', - name: 'Pulp Fiction', - genre: 'Crime', + id: "4", + name: "Pulp Fiction", + genre: "Crime", releaseYear: 1994, - director: 'Quentin Tarantino', + director: "Quentin Tarantino", rating: 8.9 }, { - id: '5', - name: 'The Dark Knight', - genre: 'Action', + id: "5", + name: "The Dark Knight", + genre: "Action", releaseYear: 2008, - director: 'Christopher Nolan', + director: "Christopher Nolan", rating: 9.0 }, { - id: '6', - name: 'Fight Club', - genre: 'Drama', + id: "6", + name: "Fight Club", + genre: "Drama", releaseYear: 1999, - director: 'David Fincher', + director: "David Fincher", rating: 8.8 }, { - id: '7', - name: 'Forrest Gump', - genre: 'Drama', + id: "7", + name: "Forrest Gump", + genre: "Drama", releaseYear: 1994, - director: 'Robert Zemeckis', + director: "Robert Zemeckis", rating: 8.8 } ] diff --git a/components/docs/collections/table-sorting-demo.tsx b/components/docs/collections/table-sorting-demo.tsx index a8b8c949..a0b85c55 100644 --- a/components/docs/collections/table-sorting-demo.tsx +++ b/components/docs/collections/table-sorting-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import { useAsyncList } from '@react-stately/data' -import { IconLoader } from 'justd-icons' -import { Card, Table } from 'ui' +import { useAsyncList } from "@react-stately/data" +import { IconLoader } from "justd-icons" +import { Card, Table } from "ui" interface Character { title: string @@ -30,7 +30,7 @@ export default function TableSortingDemo() { // @ts-ignore const second = b[sortDescriptor.column] let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1 - if (sortDescriptor.direction === 'descending') { + if (sortDescriptor.direction === "descending") { cmp *= -1 } return cmp diff --git a/components/docs/collections/tag-group-controlled-demo.tsx b/components/docs/collections/tag-group-controlled-demo.tsx index bbfa8862..20d3b6ae 100644 --- a/components/docs/collections/tag-group-controlled-demo.tsx +++ b/components/docs/collections/tag-group-controlled-demo.tsx @@ -1,13 +1,13 @@ -import React from 'react' +import React from "react" -import type { Selection } from 'react-aria-components' -import { Description, Tag } from 'ui' +import type { Selection } from "react-aria-components" +import { Description, Tag } from "ui" const fruitList = [ - { id: '1', name: 'Apple', available: false }, - { id: '2', name: 'Banana', available: true }, - { id: '3', name: 'Cherry', available: true }, - { id: '4', name: 'Date', available: false } + { id: "1", name: "Apple", available: false }, + { id: "2", name: "Banana", available: true }, + { id: "3", name: "Cherry", available: true }, + { id: "4", name: "Date", available: false } ] export default function TagGroupControlledDemo() { @@ -19,7 +19,7 @@ export default function TagGroupControlledDemo() { - You have selected: {Array.from(selected).join(', ')} + You have selected: {Array.from(selected).join(", ")}
) diff --git a/components/docs/collections/tag-group-demo.tsx b/components/docs/collections/tag-group-demo.tsx index 29097bdd..11015404 100644 --- a/components/docs/collections/tag-group-demo.tsx +++ b/components/docs/collections/tag-group-demo.tsx @@ -1,12 +1,12 @@ -'use client' +"use client" -import { Tag } from 'ui' +import { Tag } from "ui" export const androidBrands = [ - { id: '1', name: 'Samsung', available: false }, - { id: '2', name: 'OnePlus', available: true }, - { id: '3', name: 'Google', available: true }, - { id: '4', name: 'Xiaomi', available: false } + { id: "1", name: "Samsung", available: false }, + { id: "2", name: "OnePlus", available: true }, + { id: "3", name: "Google", available: true }, + { id: "4", name: "Xiaomi", available: false } ] export default function TagGroupDemo() { diff --git a/components/docs/collections/tag-group-disabled-demo.tsx b/components/docs/collections/tag-group-disabled-demo.tsx index 1d2ec955..2273abb5 100644 --- a/components/docs/collections/tag-group-disabled-demo.tsx +++ b/components/docs/collections/tag-group-disabled-demo.tsx @@ -1,5 +1,5 @@ -import { androidBrands } from '@/components/docs/collections/tag-group-demo' -import { Tag } from 'ui' +import { androidBrands } from "@/components/docs/collections/tag-group-demo" +import { Tag } from "ui" export default function TagGroupDisabledDemo() { return ( diff --git a/components/docs/collections/tag-group-href-demo.tsx b/components/docs/collections/tag-group-href-demo.tsx index 0ff16cf6..f0c6e89b 100644 --- a/components/docs/collections/tag-group-href-demo.tsx +++ b/components/docs/collections/tag-group-href-demo.tsx @@ -1,11 +1,11 @@ -'use client' +"use client" -import { Tag } from 'ui' +import { Tag } from "ui" const articles = [ - { name: 'React Tutorial', url: '#' }, - { name: 'TypeScript Handbook', url: '#' }, - { name: 'JavaScript Guide', url: '#' } + { name: "React Tutorial", url: "#" }, + { name: "TypeScript Handbook", url: "#" }, + { name: "JavaScript Guide", url: "#" } ] export default function TagGroupControlledDemo() { diff --git a/components/docs/collections/tag-group-intent-demo.tsx b/components/docs/collections/tag-group-intent-demo.tsx index 293b581f..2626bf07 100644 --- a/components/docs/collections/tag-group-intent-demo.tsx +++ b/components/docs/collections/tag-group-intent-demo.tsx @@ -1,15 +1,15 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { useListData } from 'react-stately' -import { Tag } from 'ui' +import { useListData } from "react-stately" +import { Tag } from "ui" const shoes = [ - { id: '1', name: 'Nike', available: true }, - { id: '2', name: 'Adidas', available: false }, - { id: '3', name: 'Puma', available: true }, - { id: '4', name: 'Reebok', available: true } + { id: "1", name: "Nike", available: true }, + { id: "2", name: "Adidas", available: false }, + { id: "3", name: "Puma", available: true }, + { id: "4", name: "Reebok", available: true } ] export default function TagGroupIntentDemo() { diff --git a/components/docs/collections/tag-group-shape-demo.tsx b/components/docs/collections/tag-group-shape-demo.tsx index c513db1f..b1cac5a6 100644 --- a/components/docs/collections/tag-group-shape-demo.tsx +++ b/components/docs/collections/tag-group-shape-demo.tsx @@ -1,13 +1,13 @@ -'use client' +"use client" -import { Tag } from 'ui' +import { Tag } from "ui" const carModels = [ - { id: '1', name: 'Tesla Model S', available: true }, - { id: '2', name: 'Ford Mustang', available: false }, - { id: '3', name: 'Chevrolet Camaro', available: true }, - { id: '4', name: 'BMW M3', available: false }, - { id: '5', name: 'Audi R8', available: true } + { id: "1", name: "Tesla Model S", available: true }, + { id: "2", name: "Ford Mustang", available: false }, + { id: "3", name: "Chevrolet Camaro", available: true }, + { id: "4", name: "BMW M3", available: false }, + { id: "5", name: "Audi R8", available: true } ] export default function TagGroupIntentDemo() { diff --git a/components/docs/collections/tag-group-with-remove-demo.tsx b/components/docs/collections/tag-group-with-remove-demo.tsx index 27140456..d136648b 100644 --- a/components/docs/collections/tag-group-with-remove-demo.tsx +++ b/components/docs/collections/tag-group-with-remove-demo.tsx @@ -1,21 +1,21 @@ -'use client' +"use client" -import { useListData } from 'react-stately' -import { Tag } from 'ui' +import { useListData } from "react-stately" +import { Tag } from "ui" export default function TagGroupWithRemoveDemo() { const list = useListData({ initialItems: [ - { id: '1', name: 'Ferrari', available: true }, - { id: '2', name: 'Lamborghini', available: false }, - { id: '3', name: 'Porsche', available: true }, - { id: '4', name: 'Bugatti', available: false }, - { id: '5', name: 'McLaren', available: true }, - { id: '6', name: 'Aston Martin', available: true }, - { id: '7', name: 'Bentley', available: false }, - { id: '8', name: 'Rolls-Royce', available: true }, - { id: '9', name: 'Maserati', available: false }, - { id: '10', name: 'Jaguar', available: true } + { id: "1", name: "Ferrari", available: true }, + { id: "2", name: "Lamborghini", available: false }, + { id: "3", name: "Porsche", available: true }, + { id: "4", name: "Bugatti", available: false }, + { id: "5", name: "McLaren", available: true }, + { id: "6", name: "Aston Martin", available: true }, + { id: "7", name: "Bentley", available: false }, + { id: "8", name: "Rolls-Royce", available: true }, + { id: "9", name: "Maserati", available: false }, + { id: "10", name: "Jaguar", available: true } ] }) diff --git a/components/docs/colors/color-area-channel-demo.tsx b/components/docs/colors/color-area-channel-demo.tsx index 8011d7b2..6b61c79f 100644 --- a/components/docs/colors/color-area-channel-demo.tsx +++ b/components/docs/colors/color-area-channel-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ColorArea, ColorThumb } from 'ui' +import { ColorArea, ColorThumb } from "ui" export default function ColorAreaChannelDemo() { return ( diff --git a/components/docs/colors/color-area-controlled-demo.tsx b/components/docs/colors/color-area-controlled-demo.tsx index acd32a76..90207894 100644 --- a/components/docs/colors/color-area-controlled-demo.tsx +++ b/components/docs/colors/color-area-controlled-demo.tsx @@ -1,13 +1,13 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { ControlledValues } from '@/components/docs/colors/controlled-values' -import { parseColor } from '@react-stately/color' -import { ColorArea, ColorThumb } from 'ui' +import { ControlledValues } from "@/components/docs/colors/controlled-values" +import { parseColor } from "@react-stately/color" +import { ColorArea, ColorThumb } from "ui" export default function ColorAreaControlledDemo() { - const [value, setValue] = React.useState(parseColor('hsl(0, 100%, 50%)')) + const [value, setValue] = React.useState(parseColor("hsl(0, 100%, 50%)")) return (
diff --git a/components/docs/colors/color-area-demo.tsx b/components/docs/colors/color-area-demo.tsx index 68f5efca..7329f92d 100644 --- a/components/docs/colors/color-area-demo.tsx +++ b/components/docs/colors/color-area-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ColorArea, ColorThumb as Thumb } from 'ui' +import { ColorArea, ColorThumb as Thumb } from "ui" export default function ColorAreaDemo() { return ( diff --git a/components/docs/colors/color-area-disabled-demo.tsx b/components/docs/colors/color-area-disabled-demo.tsx index 3f0af325..64f9abb8 100644 --- a/components/docs/colors/color-area-disabled-demo.tsx +++ b/components/docs/colors/color-area-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ColorArea, ColorThumb as Thumb } from 'ui' +import { ColorArea, ColorThumb as Thumb } from "ui" export default function ColorAreaDisabledDemo() { return ( diff --git a/components/docs/colors/color-area-space-demo.tsx b/components/docs/colors/color-area-space-demo.tsx index 041cfa9d..ef99fef2 100644 --- a/components/docs/colors/color-area-space-demo.tsx +++ b/components/docs/colors/color-area-space-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ColorArea, ColorThumb } from 'ui' +import { ColorArea, ColorThumb } from "ui" export default function ColorAreaSpaceDemo() { return ( diff --git a/components/docs/colors/color-field-controlled-demo.tsx b/components/docs/colors/color-field-controlled-demo.tsx index 401f9247..a6c34e12 100644 --- a/components/docs/colors/color-field-controlled-demo.tsx +++ b/components/docs/colors/color-field-controlled-demo.tsx @@ -1,13 +1,13 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { ControlledValues } from '@/components/docs/colors/controlled-values' -import { type Color, parseColor } from '@react-stately/color' -import { ColorField } from 'ui' +import { ControlledValues } from "@/components/docs/colors/controlled-values" +import { type Color, parseColor } from "@react-stately/color" +import { ColorField } from "ui" export default function ColorFieldControlledDemo() { - const [color, setColor] = React.useState(parseColor('#FAFAFA')) + const [color, setColor] = React.useState(parseColor("#FAFAFA")) return (
diff --git a/components/docs/colors/color-field-disabled-demo.tsx b/components/docs/colors/color-field-disabled-demo.tsx index 199bc1ab..d3a7041c 100644 --- a/components/docs/colors/color-field-disabled-demo.tsx +++ b/components/docs/colors/color-field-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ColorField } from 'ui' +import { ColorField } from "ui" export default function ColorFieldDisabledDemo() { return diff --git a/components/docs/colors/color-field-with-prefix-demo.tsx b/components/docs/colors/color-field-with-prefix-demo.tsx index 849bcf58..96f736f7 100644 --- a/components/docs/colors/color-field-with-prefix-demo.tsx +++ b/components/docs/colors/color-field-with-prefix-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { IconColors } from 'justd-icons' -import { ColorField } from 'ui' +import { IconColors } from "justd-icons" +import { ColorField } from "ui" export default function ColorFieldWithPrefixDemo() { return } placeholder="#FAFAFA" /> diff --git a/components/docs/colors/color-field-with-suffix-demo.tsx b/components/docs/colors/color-field-with-suffix-demo.tsx index 85b3e9e9..9f5ca217 100644 --- a/components/docs/colors/color-field-with-suffix-demo.tsx +++ b/components/docs/colors/color-field-with-suffix-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { IconColors } from 'justd-icons' -import { ColorField } from 'ui' +import { IconColors } from "justd-icons" +import { ColorField } from "ui" export default function ColorFieldWithSuffixDemo() { return } placeholder="#FAFAFA" /> diff --git a/components/docs/colors/color-picker-combination-demo.tsx b/components/docs/colors/color-picker-combination-demo.tsx index 868e54ed..4a1b7fc6 100644 --- a/components/docs/colors/color-picker-combination-demo.tsx +++ b/components/docs/colors/color-picker-combination-demo.tsx @@ -1,12 +1,12 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { type Color } from 'react-aria-components' -import { ColorPicker } from 'ui' +import { type Color } from "react-aria-components" +import { ColorPicker } from "ui" export default function ColorPickerCombinationDemo() { - const [color, setColor] = React.useState('') + const [color, setColor] = React.useState("") const handleChange = (value: Color) => { setColor(value as unknown as string) diff --git a/components/docs/colors/color-picker-controlled-demo.tsx b/components/docs/colors/color-picker-controlled-demo.tsx index ed3c67d8..eafffa46 100644 --- a/components/docs/colors/color-picker-controlled-demo.tsx +++ b/components/docs/colors/color-picker-controlled-demo.tsx @@ -1,10 +1,10 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { ControlledValues } from '@/components/docs/colors/controlled-values' -import { type Color } from 'react-aria-components' -import { ColorPicker, defaultColor } from 'ui' +import { ControlledValues } from "@/components/docs/colors/controlled-values" +import { type Color } from "react-aria-components" +import { ColorPicker, defaultColor } from "ui" export default function ColorPickerControlledDemo() { const [color, setColor] = React.useState(defaultColor) diff --git a/components/docs/colors/color-picker-custom-colors-demo.tsx b/components/docs/colors/color-picker-custom-colors-demo.tsx index 27298e42..715b8bb4 100644 --- a/components/docs/colors/color-picker-custom-colors-demo.tsx +++ b/components/docs/colors/color-picker-custom-colors-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { ColorPicker, defaultColor } from 'ui' +import { ColorPicker, defaultColor } from "ui" export default function ColorPickerCustomColorsDemo() { const [color, setColor] = React.useState(defaultColor) @@ -11,17 +11,17 @@ export default function ColorPickerCustomColorsDemo() { enableColorFormatSelection enableColorSwatch colors={[ - '#eef8ff', - '#d8eeff', - '#b9e0ff', - '#89cfff', - '#52b4ff', - '#2a91ff', - '#0d6efd', - '#0c5ae9', - '#1149bc', - '#144194', - '#11295a' + "#eef8ff", + "#d8eeff", + "#b9e0ff", + "#89cfff", + "#52b4ff", + "#2a91ff", + "#0d6efd", + "#0c5ae9", + "#1149bc", + "#144194", + "#11295a" ]} value={color} onChange={setColor} diff --git a/components/docs/colors/color-picker-demo.tsx b/components/docs/colors/color-picker-demo.tsx index f72513e3..737cdeb6 100644 --- a/components/docs/colors/color-picker-demo.tsx +++ b/components/docs/colors/color-picker-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { ColorPicker, defaultColor } from 'ui' +import { ColorPicker, defaultColor } from "ui" export default function ColorPickerDemo() { const [color, setColor] = React.useState(defaultColor) diff --git a/components/docs/colors/color-picker-disabled-demo.tsx b/components/docs/colors/color-picker-disabled-demo.tsx index 1a0f76dc..e8ba0923 100644 --- a/components/docs/colors/color-picker-disabled-demo.tsx +++ b/components/docs/colors/color-picker-disabled-demo.tsx @@ -1,11 +1,11 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { parseColor } from '@react-stately/color' -import { ColorPicker } from 'ui' +import { parseColor } from "@react-stately/color" +import { ColorPicker } from "ui" export default function ColorPickerDemo() { - const [color, setColor] = React.useState(parseColor('hsl(216, 98%, 52%)')) + const [color, setColor] = React.useState(parseColor("hsl(216, 98%, 52%)")) return } diff --git a/components/docs/colors/color-picker-enable-selection-format-demo.tsx b/components/docs/colors/color-picker-enable-selection-format-demo.tsx index b3f3069e..f0e541dc 100644 --- a/components/docs/colors/color-picker-enable-selection-format-demo.tsx +++ b/components/docs/colors/color-picker-enable-selection-format-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { ColorPicker, defaultColor } from 'ui' +import { ColorPicker, defaultColor } from "ui" export default function ColorPickerEnableSelectionFormatDemo() { const [color, setColor] = React.useState(defaultColor) diff --git a/components/docs/colors/color-picker-enable-swatch-demo.tsx b/components/docs/colors/color-picker-enable-swatch-demo.tsx index db26bd0c..530b11bc 100644 --- a/components/docs/colors/color-picker-enable-swatch-demo.tsx +++ b/components/docs/colors/color-picker-enable-swatch-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { type Color } from 'react-aria-components' -import { ColorPicker, defaultColor } from 'ui' +import { type Color } from "react-aria-components" +import { ColorPicker, defaultColor } from "ui" export default function ColorPickerEnableSwatchDemo() { const [color, setColor] = React.useState(defaultColor) diff --git a/components/docs/colors/color-picker-with-description-demo.tsx b/components/docs/colors/color-picker-with-description-demo.tsx index 34cda370..438e6110 100644 --- a/components/docs/colors/color-picker-with-description-demo.tsx +++ b/components/docs/colors/color-picker-with-description-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { ColorPicker, defaultColor } from 'ui' +import { ColorPicker, defaultColor } from "ui" export default function ColorPickerWithDescriptionDemo() { const [color, setColor] = React.useState(defaultColor) diff --git a/components/docs/colors/color-picker-with-label-demo.tsx b/components/docs/colors/color-picker-with-label-demo.tsx index 65a41e2b..822c1934 100644 --- a/components/docs/colors/color-picker-with-label-demo.tsx +++ b/components/docs/colors/color-picker-with-label-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { ColorPicker, defaultColor } from 'ui' +import { ColorPicker, defaultColor } from "ui" export default function ColorPickerWithLabelDemo() { const [color, setColor] = React.useState(defaultColor) diff --git a/components/docs/colors/color-picker-with-placeholder-demo.tsx b/components/docs/colors/color-picker-with-placeholder-demo.tsx index 6cd0a878..9e9c0944 100644 --- a/components/docs/colors/color-picker-with-placeholder-demo.tsx +++ b/components/docs/colors/color-picker-with-placeholder-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { ColorPicker, defaultColor } from 'ui' +import { ColorPicker, defaultColor } from "ui" export default function ColorPickerWithPlaceholderDemo() { const [color, setColor] = React.useState(defaultColor) diff --git a/components/docs/colors/color-slider-controlled-demo.tsx b/components/docs/colors/color-slider-controlled-demo.tsx index d0e8d3e1..e5ec7552 100644 --- a/components/docs/colors/color-slider-controlled-demo.tsx +++ b/components/docs/colors/color-slider-controlled-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { ControlledValues } from '@/components/docs/colors/controlled-values' -import { ColorSlider, defaultColor } from 'ui' +import { ControlledValues } from "@/components/docs/colors/controlled-values" +import { ColorSlider, defaultColor } from "ui" export default function ColorSliderControlledDemo() { const [value, setValue] = React.useState(defaultColor) diff --git a/components/docs/colors/color-slider-demo.tsx b/components/docs/colors/color-slider-demo.tsx index d34b5259..e92e03fb 100644 --- a/components/docs/colors/color-slider-demo.tsx +++ b/components/docs/colors/color-slider-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ColorSlider } from 'ui' +import { ColorSlider } from "ui" export default function ColorSliderDemo() { return diff --git a/components/docs/colors/color-slider-disabled-demo.tsx b/components/docs/colors/color-slider-disabled-demo.tsx index f7b1bd05..555a79e7 100644 --- a/components/docs/colors/color-slider-disabled-demo.tsx +++ b/components/docs/colors/color-slider-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ColorSlider } from 'ui' +import { ColorSlider } from "ui" export default function ColorSliderDisabledDemo() { return diff --git a/components/docs/colors/color-slider-with-label-demo.tsx b/components/docs/colors/color-slider-with-label-demo.tsx index 5d78f668..05c7b46d 100644 --- a/components/docs/colors/color-slider-with-label-demo.tsx +++ b/components/docs/colors/color-slider-with-label-demo.tsx @@ -1,4 +1,4 @@ -import { ColorSlider } from 'ui' +import { ColorSlider } from "ui" export default function ColorSliderWithLabelDemo() { return diff --git a/components/docs/colors/color-slider-without-output-demo.tsx b/components/docs/colors/color-slider-without-output-demo.tsx index 15139012..d7a6ada9 100644 --- a/components/docs/colors/color-slider-without-output-demo.tsx +++ b/components/docs/colors/color-slider-without-output-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ColorSlider } from 'ui' +import { ColorSlider } from "ui" export default function ColorSliderWithoutOutputDemo() { return diff --git a/components/docs/colors/color-swatch-controlled-demo.tsx b/components/docs/colors/color-swatch-controlled-demo.tsx index 42b86c18..0f97d691 100644 --- a/components/docs/colors/color-swatch-controlled-demo.tsx +++ b/components/docs/colors/color-swatch-controlled-demo.tsx @@ -1,13 +1,13 @@ -'use client' +"use client" -import * as React from 'react' +import * as React from "react" -import { ControlledValues } from '@/components/docs/colors/controlled-values' -import { parseColor } from '@react-stately/color' -import { ColorSwatchPicker, ColorSwatchPickerItem } from 'ui' +import { ControlledValues } from "@/components/docs/colors/controlled-values" +import { parseColor } from "@react-stately/color" +import { ColorSwatchPicker, ColorSwatchPickerItem } from "ui" export default function ColorSwatchPickerDemo() { - const [value, setValue] = React.useState(parseColor('#0d6efd')) + const [value, setValue] = React.useState(parseColor("#0d6efd")) return (
diff --git a/components/docs/colors/color-swatch-picker-demo.tsx b/components/docs/colors/color-swatch-picker-demo.tsx index 02f8e411..80906971 100644 --- a/components/docs/colors/color-swatch-picker-demo.tsx +++ b/components/docs/colors/color-swatch-picker-demo.tsx @@ -1,12 +1,12 @@ -'use client' +"use client" -import * as React from 'react' +import * as React from "react" -import { parseColor } from '@react-stately/color' -import { ColorSwatchPicker, ColorSwatchPickerItem } from 'ui' +import { parseColor } from "@react-stately/color" +import { ColorSwatchPicker, ColorSwatchPickerItem } from "ui" export default function ColorSwatchPickerDemo() { - const [value, setValue] = React.useState(parseColor('#0d6efd')) + const [value, setValue] = React.useState(parseColor("#0d6efd")) return (
diff --git a/components/docs/colors/color-wheel-demo.tsx b/components/docs/colors/color-wheel-demo.tsx index e5eff7d4..43122943 100644 --- a/components/docs/colors/color-wheel-demo.tsx +++ b/components/docs/colors/color-wheel-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ColorThumb, ColorWheel, ColorWheelTrack } from 'ui' +import { ColorThumb, ColorWheel, ColorWheelTrack } from "ui" export default function ColorWheelDemo() { return ( diff --git a/components/docs/colors/color-wheel-disabled-demo.tsx b/components/docs/colors/color-wheel-disabled-demo.tsx index c262f309..cdd65b7e 100644 --- a/components/docs/colors/color-wheel-disabled-demo.tsx +++ b/components/docs/colors/color-wheel-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { ColorThumb, ColorWheel, ColorWheelTrack } from 'ui' +import { ColorThumb, ColorWheel, ColorWheelTrack } from "ui" export default function ColorWheelDisabledDemo() { return ( diff --git a/components/docs/colors/controlled-values.tsx b/components/docs/colors/controlled-values.tsx index 5469dc81..554c1915 100644 --- a/components/docs/colors/controlled-values.tsx +++ b/components/docs/colors/controlled-values.tsx @@ -1,9 +1,9 @@ -import React from 'react' +import React from "react" -import type { ColorFormat } from '@react-types/color' -import { Card, ColorSwatch } from 'ui' +import type { ColorFormat } from "@react-types/color" +import { Card, ColorSwatch } from "ui" -const formats: string[] = ['hex', 'hexa', 'rgb', 'rgba', 'hsl', 'hsla', 'hsb', 'hsba'] +const formats: string[] = ["hex", "hexa", "rgb", "rgba", "hsl", "hsla", "hsb", "hsba"] export function ControlledValues({ color }: { color: any }) { return ( @@ -12,12 +12,12 @@ export function ControlledValues({ color }: { color: any }) { {format} - {color.toString(format as ColorFormat | 'css' | undefined)} + {color.toString(format as ColorFormat | "css" | undefined)} ))} diff --git a/components/docs/controls/accordion-border-hidden-demo.tsx b/components/docs/controls/accordion-border-hidden-demo.tsx index 982535ef..6bcaa8f5 100644 --- a/components/docs/controls/accordion-border-hidden-demo.tsx +++ b/components/docs/controls/accordion-border-hidden-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import React from 'react' +import React from "react" import { IconBell, @@ -9,8 +9,8 @@ import { IconSettings, IconShield, IconSupport -} from 'justd-icons' -import { Accordion } from 'ui' +} from "justd-icons" +import { Accordion } from "ui" export default function AccordionWithIconDemo() { return ( @@ -28,37 +28,37 @@ export default function AccordionWithIconDemo() { const items = [ { icon: , - title: 'Personal Settings', + title: "Personal Settings", description: - 'You can update your profile, change your password, and manage your account settings here.' + "You can update your profile, change your password, and manage your account settings here." }, { icon: , - title: 'Notifications', + title: "Notifications", description: - 'Manage your notifications preferences, including alerts, emails, and push notifications.' + "Manage your notifications preferences, including alerts, emails, and push notifications." }, { icon: , - title: 'Privacy Options', + title: "Privacy Options", description: - 'Adjust your privacy settings to control who can see your information and contact you.' + "Adjust your privacy settings to control who can see your information and contact you." }, { icon: , - title: 'Payment Methods', + title: "Payment Methods", description: - 'Add, remove, or update your payment methods including credit cards and digital wallets.' + "Add, remove, or update your payment methods including credit cards and digital wallets." }, { icon: , - title: 'Support Center', - description: 'Find help with common issues, or contact support for further assistance.' + title: "Support Center", + description: "Find help with common issues, or contact support for further assistance." }, { icon: , - title: 'Download Data', + title: "Download Data", description: - 'Request a download of all your data we have stored, including account activity and user data.' + "Request a download of all your data we have stored, including account activity and user data." } ] diff --git a/components/docs/controls/accordion-default-expand-demo.tsx b/components/docs/controls/accordion-default-expand-demo.tsx index 4b83a2de..aab4440b 100644 --- a/components/docs/controls/accordion-default-expand-demo.tsx +++ b/components/docs/controls/accordion-default-expand-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Accordion } from 'ui' +import { Accordion } from "ui" export default function AccordionDefaultExpandDemo() { return ( @@ -19,23 +19,23 @@ export default function AccordionDefaultExpandDemo() { const faqs = [ { - q: 'How do I reset my password?', + q: "How do I reset my password?", a: "You can reset your password by going to the settings page and clicking on 'Reset Password'." }, { - q: 'Can I change my subscription plan?', - a: 'Yes, you can upgrade or downgrade your subscription plan at any time from your account settings.' + q: "Can I change my subscription plan?", + a: "Yes, you can upgrade or downgrade your subscription plan at any time from your account settings." }, { - q: 'Where can I view my past orders?', + q: "Where can I view my past orders?", a: "Your past orders can be viewed in the 'Orders' section of your account dashboard." }, { - q: 'What is the return policy?', - a: 'Our return policy allows you to return products within 30 days of purchase for a full refund or exchange.' + q: "What is the return policy?", + a: "Our return policy allows you to return products within 30 days of purchase for a full refund or exchange." }, { - q: 'How do I contact customer support?', - a: 'You can contact customer support via email at support@example.com or through our online chat system.' + q: "How do I contact customer support?", + a: "You can contact customer support via email at support@example.com or through our online chat system." } ] diff --git a/components/docs/controls/accordion-demo.tsx b/components/docs/controls/accordion-demo.tsx index fd37e621..19426140 100644 --- a/components/docs/controls/accordion-demo.tsx +++ b/components/docs/controls/accordion-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Accordion } from 'ui' +import { Accordion } from "ui" export default function AccordionDemo() { return ( diff --git a/components/docs/controls/accordion-disabled-demo.tsx b/components/docs/controls/accordion-disabled-demo.tsx index 0e785931..e3af10af 100644 --- a/components/docs/controls/accordion-disabled-demo.tsx +++ b/components/docs/controls/accordion-disabled-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Accordion } from 'ui' +import { Accordion } from "ui" export default function AccordionDisabledDemo() { return ( @@ -19,27 +19,27 @@ export default function AccordionDisabledDemo() { const faqs = [ { - q: 'Do you offer gift wrapping options?', - a: 'Yes, we provide gift wrapping services for a small additional charge at checkout.' + q: "Do you offer gift wrapping options?", + a: "Yes, we provide gift wrapping services for a small additional charge at checkout." }, { - q: 'Can I return a gift card?', - a: 'Sorry, gift cards are non-refundable and cannot be returned.' + q: "Can I return a gift card?", + a: "Sorry, gift cards are non-refundable and cannot be returned." }, { - q: 'What are your store hours?', - a: 'Our store is open from 9 AM to 9 PM on weekdays and 10 AM to 6 PM on weekends.' + q: "What are your store hours?", + a: "Our store is open from 9 AM to 9 PM on weekdays and 10 AM to 6 PM on weekends." }, { - q: 'Do you have a loyalty program?', - a: 'Yes, we have a loyalty program where you can earn points for every purchase and redeem them for discounts.' + q: "Do you have a loyalty program?", + a: "Yes, we have a loyalty program where you can earn points for every purchase and redeem them for discounts." }, { - q: 'How do I update my billing information?', - a: 'You can update your billing information through your account settings on our website.' + q: "How do I update my billing information?", + a: "You can update your billing information through your account settings on our website." }, { - q: 'Are there any discounts for bulk orders?', - a: 'Yes, we offer discounts on bulk orders. Please contact our sales team for more details.' + q: "Are there any discounts for bulk orders?", + a: "Yes, we offer discounts on bulk orders. Please contact our sales team for more details." } ] diff --git a/components/docs/controls/accordion-hide-indicator-demo.tsx b/components/docs/controls/accordion-hide-indicator-demo.tsx index 60d0d2ca..39e3eb0e 100644 --- a/components/docs/controls/accordion-hide-indicator-demo.tsx +++ b/components/docs/controls/accordion-hide-indicator-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Accordion } from 'ui' +import { Accordion } from "ui" export default function AccordionHideIndicatorDemo() { return ( @@ -19,15 +19,15 @@ export default function AccordionHideIndicatorDemo() { const faqs = [ { - q: 'What payment methods are accepted?', - a: 'We accept all major credit cards, PayPal, and Apple Pay.' + q: "What payment methods are accepted?", + a: "We accept all major credit cards, PayPal, and Apple Pay." }, { - q: 'How long does shipping take?', - a: 'Shipping times vary by location but typically take between 3-7 business days.' + q: "How long does shipping take?", + a: "Shipping times vary by location but typically take between 3-7 business days." }, { - q: 'Can I track my order?', - a: 'Yes, you can track your order using the tracking link provided in your shipping confirmation email.' + q: "Can I track my order?", + a: "Yes, you can track your order using the tracking link provided in your shipping confirmation email." } ] diff --git a/components/docs/controls/command-menu-controlled-demo.tsx b/components/docs/controls/command-menu-controlled-demo.tsx index 0d8ff328..aead96f1 100644 --- a/components/docs/controls/command-menu-controlled-demo.tsx +++ b/components/docs/controls/command-menu-controlled-demo.tsx @@ -1,12 +1,12 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Avatar, Button, CommandMenu } from 'ui' +import { Avatar, Button, CommandMenu } from "ui" export default function CommandMenuControlledDemo() { const [isOpen, setIsOpen] = React.useState(false) - const [value, setValue] = React.useState('') + const [value, setValue] = React.useState("") return ( <>
@@ -22,7 +22,7 @@ export default function SliderControlledDemo() { value={saturation} onChange={(v) => setSaturation(v as number[])} label="Saturation" - description={`Current saturation: ${saturation ?? '-'}`} + description={`Current saturation: ${saturation ?? "-"}`} />
diff --git a/components/docs/controls/slider-demo.tsx b/components/docs/controls/slider-demo.tsx index 46907d56..b8fc5730 100644 --- a/components/docs/controls/slider-demo.tsx +++ b/components/docs/controls/slider-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Slider } from 'ui' +import { Slider } from "ui" export default function SliderDemo() { return diff --git a/components/docs/controls/slider-disabled-demo.tsx b/components/docs/controls/slider-disabled-demo.tsx index 22c2c0fb..bed8d306 100644 --- a/components/docs/controls/slider-disabled-demo.tsx +++ b/components/docs/controls/slider-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Slider } from 'ui' +import { Slider } from "ui" export default function SliderDisabledDemo() { return diff --git a/components/docs/controls/slider-orientation-demo.tsx b/components/docs/controls/slider-orientation-demo.tsx index 646f6ef5..1cb61edf 100644 --- a/components/docs/controls/slider-orientation-demo.tsx +++ b/components/docs/controls/slider-orientation-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React, { useState } from 'react' +import React, { useState } from "react" -import { Card, Description, Slider } from 'ui' +import { Card, Description, Slider } from "ui" export default function SliderOrientationDemo() { const [equalizer, setEqualizer] = useState({ @@ -25,43 +25,43 @@ export default function SliderOrientationDemo() { handleSliderChange('subBass', newValue as number)} + onChange={(newValue) => handleSliderChange("subBass", newValue as number)} orientation="vertical" /> handleSliderChange('bass', newValue as number)} + onChange={(newValue) => handleSliderChange("bass", newValue as number)} orientation="vertical" /> handleSliderChange('lowMid', newValue as number)} + onChange={(newValue) => handleSliderChange("lowMid", newValue as number)} orientation="vertical" /> handleSliderChange('mid', newValue as number)} + onChange={(newValue) => handleSliderChange("mid", newValue as number)} orientation="vertical" /> handleSliderChange('highMid', newValue as number)} + onChange={(newValue) => handleSliderChange("highMid", newValue as number)} orientation="vertical" /> handleSliderChange('presence', newValue as number)} + onChange={(newValue) => handleSliderChange("presence", newValue as number)} orientation="vertical" /> handleSliderChange('brilliance', newValue as number)} + onChange={(newValue) => handleSliderChange("brilliance", newValue as number)} orientation="vertical" />
diff --git a/components/docs/controls/slider-prefix-suffix-demo.tsx b/components/docs/controls/slider-prefix-suffix-demo.tsx index bce97279..98ecf7f1 100644 --- a/components/docs/controls/slider-prefix-suffix-demo.tsx +++ b/components/docs/controls/slider-prefix-suffix-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { IconVolumeFull, IconVolumeOff } from 'justd-icons' -import { Slider } from 'ui' +import { IconVolumeFull, IconVolumeOff } from "justd-icons" +import { Slider } from "ui" export default function SliderPrefixSuffixDemo() { const [volume, setVolume] = React.useState(0.5) diff --git a/components/docs/controls/slider-range-demo.tsx b/components/docs/controls/slider-range-demo.tsx index 51e602ae..18e3c69f 100644 --- a/components/docs/controls/slider-range-demo.tsx +++ b/components/docs/controls/slider-range-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Slider } from 'ui' +import { Slider } from "ui" export default function SliderRangeDemo() { return diff --git a/components/docs/controls/slider-step-demo.tsx b/components/docs/controls/slider-step-demo.tsx index 6086fafd..03833ccb 100644 --- a/components/docs/controls/slider-step-demo.tsx +++ b/components/docs/controls/slider-step-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Slider } from 'ui' +import { Slider } from "ui" export default function SliderStepDemo() { return diff --git a/components/docs/controls/switch-controlled-demo.tsx b/components/docs/controls/switch-controlled-demo.tsx index 28bb6dca..ca1c4d4d 100644 --- a/components/docs/controls/switch-controlled-demo.tsx +++ b/components/docs/controls/switch-controlled-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Description, Switch } from 'ui' +import { Description, Switch } from "ui" export default function SwitchControlledDemo() { const [darkMode, setDarkMode] = React.useState(false) @@ -13,7 +13,7 @@ export default function SwitchControlledDemo() { - Dark Mode is {darkMode ? 'enabled' : 'disabled'} + Dark Mode is {darkMode ? "enabled" : "disabled"} ) diff --git a/components/docs/controls/switch-demo.tsx b/components/docs/controls/switch-demo.tsx index a55f69fa..db9d650e 100644 --- a/components/docs/controls/switch-demo.tsx +++ b/components/docs/controls/switch-demo.tsx @@ -1,12 +1,12 @@ -'use client' +"use client" -import { useTheme } from 'next-themes' -import { Switch } from 'ui' +import { useTheme } from "next-themes" +import { Switch } from "ui" export default function SwitchDemo() { const { resolvedTheme, setTheme } = useTheme() return ( - setTheme(resolvedTheme === 'light' ? 'dark' : 'light')}> + setTheme(resolvedTheme === "light" ? "dark" : "light")}> Switch Theme ) diff --git a/components/docs/controls/switch-disabled-demo.tsx b/components/docs/controls/switch-disabled-demo.tsx index 4a7c904c..3053face 100644 --- a/components/docs/controls/switch-disabled-demo.tsx +++ b/components/docs/controls/switch-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Switch } from 'ui' +import { Switch } from "ui" export default function SwitchDemo() { return Dark Mode diff --git a/components/docs/controls/switch-variant-demo.tsx b/components/docs/controls/switch-variant-demo.tsx index 43dba2c8..febcf172 100644 --- a/components/docs/controls/switch-variant-demo.tsx +++ b/components/docs/controls/switch-variant-demo.tsx @@ -1,16 +1,16 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { OptionPreview } from '@/components/docs/outside/option-preview' -import { Select, Switch } from 'ui' +import { OptionPreview } from "@/components/docs/outside/option-preview" +import { Select, Switch } from "ui" -const items = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'].map((item) => ({ +const items = ["primary", "secondary", "success", "danger", "warning"].map((item) => ({ value: item, label: item })) export default function SwitchVariantDemo() { - const [intent, setIntent] = React.useState('primary') + const [intent, setIntent] = React.useState("primary") return ( <> diff --git a/components/docs/controls/toolbar-demo.tsx b/components/docs/controls/toolbar-demo.tsx index 5bb14761..8c280545 100644 --- a/components/docs/controls/toolbar-demo.tsx +++ b/components/docs/controls/toolbar-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import React from 'react' +import React from "react" import { IconAlignmentCenter, @@ -25,8 +25,8 @@ import { IconUnderline, IconUnderlineFill, IconUndo -} from 'justd-icons' -import { Button, Checkbox, Menu, Toolbar } from 'ui' +} from "justd-icons" +import { Button, Checkbox, Menu, Toolbar } from "ui" export default function ToolbarDemo() { return ( diff --git a/components/docs/controls/toolbar-disabled-demo.tsx b/components/docs/controls/toolbar-disabled-demo.tsx index f066f342..bfdb62d3 100644 --- a/components/docs/controls/toolbar-disabled-demo.tsx +++ b/components/docs/controls/toolbar-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import React from 'react' +import React from "react" import { IconAlignmentJustify, @@ -17,8 +17,8 @@ import { IconPencilBoxFill, IconToolbox, IconToolboxFill -} from 'justd-icons' -import { Toggle, Toolbar } from 'ui' +} from "justd-icons" +import { Toggle, Toolbar } from "ui" export default function ToolbarDisabledDemo() { return ( diff --git a/components/docs/controls/toolbar-orientation-demo.tsx b/components/docs/controls/toolbar-orientation-demo.tsx index dec6121f..85f13620 100644 --- a/components/docs/controls/toolbar-orientation-demo.tsx +++ b/components/docs/controls/toolbar-orientation-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import React from 'react' +import React from "react" import { IconAlignmentCenter, @@ -24,8 +24,8 @@ import { IconToolbox, IconToolboxFill, IconUndo -} from 'justd-icons' -import { Button, Menu, Toggle, Toolbar } from 'ui' +} from "justd-icons" +import { Button, Menu, Toggle, Toolbar } from "ui" export default function ToolbarOrientationDemo() { return ( diff --git a/components/docs/date-and-time/calendar-demo.tsx b/components/docs/date-and-time/calendar-demo.tsx index 64d967fd..a212fd43 100644 --- a/components/docs/date-and-time/calendar-demo.tsx +++ b/components/docs/date-and-time/calendar-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Calendar } from 'ui' +import { Calendar } from "ui" export default function CalendarDemo() { return diff --git a/components/docs/date-and-time/date-field-controlled-demo.tsx b/components/docs/date-and-time/date-field-controlled-demo.tsx index 1944d047..b3b3d87a 100644 --- a/components/docs/date-and-time/date-field-controlled-demo.tsx +++ b/components/docs/date-and-time/date-field-controlled-demo.tsx @@ -1,22 +1,22 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { getLocalTimeZone, parseDate, today } from '@internationalized/date' -import { useDateFormatter } from '@react-aria/i18n' -import { DateField } from 'ui' +import { getLocalTimeZone, parseDate, today } from "@internationalized/date" +import { useDateFormatter } from "@react-aria/i18n" +import { DateField } from "ui" export default function DateFieldDisabledDemo() { const now = today(getLocalTimeZone()) const [value, setValue] = React.useState(parseDate(now.toString())) - const formatter = useDateFormatter({ dateStyle: 'full' }) + const formatter = useDateFormatter({ dateStyle: "full" }) return (
-

{value ? formatter.format(value.toDate(getLocalTimeZone())) : '--'}

-

{value ? value.toString() : '--'}

+

{value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}

+

{value ? value.toString() : "--"}

diff --git a/components/docs/date-and-time/date-field-demo.tsx b/components/docs/date-and-time/date-field-demo.tsx index 608bfbeb..726f5c9f 100644 --- a/components/docs/date-and-time/date-field-demo.tsx +++ b/components/docs/date-and-time/date-field-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { DateField } from 'ui' +import { DateField } from "ui" export default function DateFieldDemo() { return diff --git a/components/docs/date-and-time/date-field-disabled-demo.tsx b/components/docs/date-and-time/date-field-disabled-demo.tsx index d38c120e..a0c2b652 100644 --- a/components/docs/date-and-time/date-field-disabled-demo.tsx +++ b/components/docs/date-and-time/date-field-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { DateField } from 'ui' +import { DateField } from "ui" export default function DateFieldDisabledDemo() { return diff --git a/components/docs/date-and-time/date-field-validation-demo.tsx b/components/docs/date-and-time/date-field-validation-demo.tsx index ce5c4d26..59b84dd1 100644 --- a/components/docs/date-and-time/date-field-validation-demo.tsx +++ b/components/docs/date-and-time/date-field-validation-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Button, DateField, Form } from 'ui' +import { Button, DateField, Form } from "ui" export default function DateFieldDisabledDemo() { return ( diff --git a/components/docs/date-and-time/date-picker-controlled-demo.tsx b/components/docs/date-and-time/date-picker-controlled-demo.tsx index d9464d32..92491f2b 100644 --- a/components/docs/date-and-time/date-picker-controlled-demo.tsx +++ b/components/docs/date-and-time/date-picker-controlled-demo.tsx @@ -1,23 +1,23 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { getLocalTimeZone, parseDate, today } from '@internationalized/date' -import { useDateFormatter } from '@react-aria/i18n' -import { DatePicker } from 'ui' +import { getLocalTimeZone, parseDate, today } from "@internationalized/date" +import { useDateFormatter } from "@react-aria/i18n" +import { DatePicker } from "ui" export default function DatePickerControlledDemo() { const now = today(getLocalTimeZone()) const [value, setValue] = React.useState(parseDate(now.toString())) - const formatter = useDateFormatter({ dateStyle: 'full' }) + const formatter = useDateFormatter({ dateStyle: "full" }) return (
-

{value ? formatter.format(value.toDate(getLocalTimeZone())) : '--'}

-

{value ? value.toString() : '--'}

+

{value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}

+

{value ? value.toString() : "--"}

diff --git a/components/docs/date-and-time/date-picker-custom-validation-demo.tsx b/components/docs/date-and-time/date-picker-custom-validation-demo.tsx index 33eb8b3b..02f8666f 100644 --- a/components/docs/date-and-time/date-picker-custom-validation-demo.tsx +++ b/components/docs/date-and-time/date-picker-custom-validation-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { getLocalTimeZone, parseDate, startOfYear, today } from '@internationalized/date' -import { Button, DatePicker, Form } from 'ui' +import { getLocalTimeZone, parseDate, startOfYear, today } from "@internationalized/date" +import { Button, DatePicker, Form } from "ui" export default function DatePickerInvalidDemo() { const ly = startOfYear(today(getLocalTimeZone())) @@ -12,7 +12,7 @@ export default function DatePickerInvalidDemo() { return (
e.preventDefault()}> (date < now ? 'Select a future date, please.' : null)} + validate={(date) => (date < now ? "Select a future date, please." : null)} value={value} onChange={setValue} label="Delivery date" diff --git a/components/docs/date-and-time/date-picker-demo.tsx b/components/docs/date-and-time/date-picker-demo.tsx index 9d69eefd..188f0b08 100644 --- a/components/docs/date-and-time/date-picker-demo.tsx +++ b/components/docs/date-and-time/date-picker-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { DatePicker } from 'ui' +import { DatePicker } from "ui" export default function DatePickerDemo() { return diff --git a/components/docs/date-and-time/date-picker-disabled-demo.tsx b/components/docs/date-and-time/date-picker-disabled-demo.tsx index ae2a0443..ab0ae6e6 100644 --- a/components/docs/date-and-time/date-picker-disabled-demo.tsx +++ b/components/docs/date-and-time/date-picker-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { DatePicker } from 'ui' +import { DatePicker } from "ui" export default function DatePickerDisabledDemo() { return diff --git a/components/docs/date-and-time/date-picker-required-demo.tsx b/components/docs/date-and-time/date-picker-required-demo.tsx index 56187150..6867a4fe 100644 --- a/components/docs/date-and-time/date-picker-required-demo.tsx +++ b/components/docs/date-and-time/date-picker-required-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Button, DatePicker, Form } from 'ui' +import { Button, DatePicker, Form } from "ui" export default function DatePickerRequiredDemo() { return ( diff --git a/components/docs/date-and-time/date-range-picker-controlled-demo.tsx b/components/docs/date-and-time/date-range-picker-controlled-demo.tsx index b3067f86..5305e3db 100644 --- a/components/docs/date-and-time/date-range-picker-controlled-demo.tsx +++ b/components/docs/date-and-time/date-range-picker-controlled-demo.tsx @@ -1,15 +1,15 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { getLocalTimeZone, today } from '@internationalized/date' -import { useDateFormatter } from '@react-aria/i18n' -import { DateRangePicker } from 'ui' +import { getLocalTimeZone, today } from "@internationalized/date" +import { useDateFormatter } from "@react-aria/i18n" +import { DateRangePicker } from "ui" export default function DateRangePickerControlledDemo() { const now = today(getLocalTimeZone()) const tomorrowWeek = today(getLocalTimeZone()).add({ days: 12 }) - const formatter = useDateFormatter({ dateStyle: 'full' }) + const formatter = useDateFormatter({ dateStyle: "full" }) const [value, setValue] = React.useState({ start: now, @@ -22,9 +22,9 @@ export default function DateRangePickerControlledDemo() {

{value ? `${formatter.format(value.start.toDate(getLocalTimeZone()))} to ${formatter.format(value.end.toDate(getLocalTimeZone()))}` - : '-- to --'} + : "-- to --"}

-

{value ? `${value.start.toString()} to ${value.end.toString()}` : '-- to --'}

+

{value ? `${value.start.toString()} to ${value.end.toString()}` : "-- to --"}

diff --git a/components/docs/date-and-time/date-range-picker-custom-validation-demo.tsx b/components/docs/date-and-time/date-range-picker-custom-validation-demo.tsx index 1d10f38b..f6cc5466 100644 --- a/components/docs/date-and-time/date-range-picker-custom-validation-demo.tsx +++ b/components/docs/date-and-time/date-range-picker-custom-validation-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { getLocalTimeZone, today } from '@internationalized/date' -import { Button, DateRangePicker, Form } from 'ui' +import { getLocalTimeZone, today } from "@internationalized/date" +import { Button, DateRangePicker, Form } from "ui" export default function DateRangePickerCustomValidationDemo() { return ( @@ -9,7 +9,7 @@ export default function DateRangePickerCustomValidationDemo() { - range?.end.compare(range.start) > 7 ? 'Maximum booking duration is 1 week.' : null + range?.end.compare(range.start) > 7 ? "Maximum booking duration is 1 week." : null } defaultValue={{ start: today(getLocalTimeZone()), diff --git a/components/docs/date-and-time/date-range-picker-demo.tsx b/components/docs/date-and-time/date-range-picker-demo.tsx index cf4572ac..a16edc5a 100644 --- a/components/docs/date-and-time/date-range-picker-demo.tsx +++ b/components/docs/date-and-time/date-range-picker-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { DateRangePicker } from 'ui' +import { DateRangePicker } from "ui" export default function DateRangePickerDemo() { return diff --git a/components/docs/date-and-time/date-range-picker-disabled-demo.tsx b/components/docs/date-and-time/date-range-picker-disabled-demo.tsx index 88410038..dd622b9b 100644 --- a/components/docs/date-and-time/date-range-picker-disabled-demo.tsx +++ b/components/docs/date-and-time/date-range-picker-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { DateRangePicker } from 'ui' +import { DateRangePicker } from "ui" export default function DateRangePickerDisabledDemo() { return diff --git a/components/docs/date-and-time/date-range-picker-time-demo.tsx b/components/docs/date-and-time/date-range-picker-time-demo.tsx index f8a8ec22..09a38c61 100644 --- a/components/docs/date-and-time/date-range-picker-time-demo.tsx +++ b/components/docs/date-and-time/date-range-picker-time-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { getLocalTimeZone, now, parseZonedDateTime } from '@internationalized/date' -import { DateRangePicker } from 'ui' +import { getLocalTimeZone, now, parseZonedDateTime } from "@internationalized/date" +import { DateRangePicker } from "ui" export default function DateRangePickerTimeDemo() { const today = parseZonedDateTime(now(getLocalTimeZone()).toString()) diff --git a/components/docs/date-and-time/date-range-picker-validation-demo.tsx b/components/docs/date-and-time/date-range-picker-validation-demo.tsx index fbc447a7..90d8f826 100644 --- a/components/docs/date-and-time/date-range-picker-validation-demo.tsx +++ b/components/docs/date-and-time/date-range-picker-validation-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Button, DateRangePicker, Form } from 'ui' +import { Button, DateRangePicker, Form } from "ui" export default function DateRangePickerValidationDemo() { return ( diff --git a/components/docs/date-and-time/date-time-demo.tsx b/components/docs/date-and-time/date-time-demo.tsx index 12c7cb81..a29930c9 100644 --- a/components/docs/date-and-time/date-time-demo.tsx +++ b/components/docs/date-and-time/date-time-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { getLocalTimeZone, now, parseZonedDateTime } from '@internationalized/date' -import { DatePicker } from 'ui' +import { getLocalTimeZone, now, parseZonedDateTime } from "@internationalized/date" +import { DatePicker } from "ui" export default function DateTimeDemo() { const today = parseZonedDateTime(now(getLocalTimeZone()).toString()) diff --git a/components/docs/date-and-time/date-time-field-demo.tsx b/components/docs/date-and-time/date-time-field-demo.tsx index 80c7de31..e52a61ba 100644 --- a/components/docs/date-and-time/date-time-field-demo.tsx +++ b/components/docs/date-and-time/date-time-field-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { getLocalTimeZone, now, parseZonedDateTime } from '@internationalized/date' -import { DateField } from 'ui' +import { getLocalTimeZone, now, parseZonedDateTime } from "@internationalized/date" +import { DateField } from "ui" export default function DateTimeFieldDemo() { const today = parseZonedDateTime(now(getLocalTimeZone()).toString()) diff --git a/components/docs/date-and-time/range-calendar-demo.tsx b/components/docs/date-and-time/range-calendar-demo.tsx index 44e1ec72..2ffe6b52 100644 --- a/components/docs/date-and-time/range-calendar-demo.tsx +++ b/components/docs/date-and-time/range-calendar-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { RangeCalendar } from 'ui' +import { RangeCalendar } from "ui" export default function RangeCalendarDemo() { return diff --git a/components/docs/date-and-time/time-field-controlled-demo.tsx b/components/docs/date-and-time/time-field-controlled-demo.tsx index e41c256d..44000697 100644 --- a/components/docs/date-and-time/time-field-controlled-demo.tsx +++ b/components/docs/date-and-time/time-field-controlled-demo.tsx @@ -1,16 +1,16 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Time } from '@internationalized/date' -import { TimeField } from 'ui' +import { Time } from "@internationalized/date" +import { TimeField } from "ui" export default function TimeFieldValidationDemo() { const [value, setValue] = React.useState(new Time(11, 45)) return (
-

{value ? value.toString() : '--'}

+

{value ? value.toString() : "--"}

diff --git a/components/docs/date-and-time/time-field-demo.tsx b/components/docs/date-and-time/time-field-demo.tsx index 3411fdd9..cdaf1b86 100644 --- a/components/docs/date-and-time/time-field-demo.tsx +++ b/components/docs/date-and-time/time-field-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { Time } from '@internationalized/date' -import { TimeField } from 'ui' +import { Time } from "@internationalized/date" +import { TimeField } from "ui" export default function TimeFieldDemo() { return diff --git a/components/docs/date-and-time/time-field-disabled-demo.tsx b/components/docs/date-and-time/time-field-disabled-demo.tsx index 3dd45705..99049e02 100644 --- a/components/docs/date-and-time/time-field-disabled-demo.tsx +++ b/components/docs/date-and-time/time-field-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { TimeField } from 'ui' +import { TimeField } from "ui" export default function TimeFieldDisabledDemo() { return diff --git a/components/docs/date-and-time/time-field-hc-demo.tsx b/components/docs/date-and-time/time-field-hc-demo.tsx index ab73c51e..f8d2a6b1 100644 --- a/components/docs/date-and-time/time-field-hc-demo.tsx +++ b/components/docs/date-and-time/time-field-hc-demo.tsx @@ -1,10 +1,10 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { OptionPreview } from '@/components/docs/outside/option-preview' -import { Time } from '@internationalized/date' -import { Switch, TimeField } from 'ui' +import { OptionPreview } from "@/components/docs/outside/option-preview" +import { Time } from "@internationalized/date" +import { Switch, TimeField } from "ui" export default function TimeFieldHcDemo() { const [hc, setHc] = React.useState<12 | 24>(24) diff --git a/components/docs/date-and-time/time-field-validation-demo.tsx b/components/docs/date-and-time/time-field-validation-demo.tsx index 66b1eeb7..8098d763 100644 --- a/components/docs/date-and-time/time-field-validation-demo.tsx +++ b/components/docs/date-and-time/time-field-validation-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Button, Form, TimeField } from 'ui' +import { Button, Form, TimeField } from "ui" export default function TimeFieldValidationDemo() { return ( diff --git a/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo.tsx b/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo.tsx index 2df53902..333f163f 100644 --- a/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo.tsx +++ b/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo.tsx @@ -1,11 +1,11 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import type { DropEvent } from '@react-types/shared' -import { IconGallery } from 'justd-icons' -import { isFileDropItem } from 'react-aria-components' -import { Description, DropZone, FileTrigger } from 'ui' +import type { DropEvent } from "@react-types/shared" +import { IconGallery } from "justd-icons" +import { isFileDropItem } from "react-aria-components" +import { Description, DropZone, FileTrigger } from "ui" export default function DropZoneAndFileTriggerDemo() { const [droppedImage, setDroppedImage] = React.useState(undefined) @@ -13,7 +13,7 @@ export default function DropZoneAndFileTriggerDemo() { const onDropHandler = async (e: DropEvent) => { const item = e.items .filter(isFileDropItem) - .find((item) => item.type === 'image/jpeg' || item.type === 'image/png') + .find((item) => item.type === "image/jpeg" || item.type === "image/png") if (item) { const file = await item.getFile() setDroppedImage(URL.createObjectURL(file)) @@ -33,7 +33,7 @@ export default function DropZoneAndFileTriggerDemo() { return ( - types.has('image/jpeg') || types.has('image/png') ? 'copy' : 'cancel' + types.has("image/jpeg") || types.has("image/png") ? "copy" : "cancel" } onDrop={onDropHandler} > @@ -46,7 +46,7 @@ export default function DropZoneAndFileTriggerDemo() {
diff --git a/components/docs/drag-and-drop/drop-zone-demo.tsx b/components/docs/drag-and-drop/drop-zone-demo.tsx index 196855e6..54731401 100644 --- a/components/docs/drag-and-drop/drop-zone-demo.tsx +++ b/components/docs/drag-and-drop/drop-zone-demo.tsx @@ -1,15 +1,15 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { DropZone, Label } from 'ui' +import { DropZone, Label } from "ui" export default function DropZoneDemo() { const [dropped, setDropped] = React.useState(false) return ( setDropped(true)}> - + ) } diff --git a/components/docs/forms/checkbox-controlled-demo.tsx b/components/docs/forms/checkbox-controlled-demo.tsx index 1e56b489..1686798e 100644 --- a/components/docs/forms/checkbox-controlled-demo.tsx +++ b/components/docs/forms/checkbox-controlled-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Checkbox, Description } from 'ui' +import { Checkbox, Description } from "ui" export default function CheckboxControlledDemo() { const [selected, setSelection] = React.useState(false) @@ -12,7 +12,7 @@ export default function CheckboxControlledDemo() { Receive Updates - You have {selected ? 'enabled' : 'disabled'} the option. + You have {selected ? "enabled" : "disabled"} the option. ) diff --git a/components/docs/forms/checkbox-demo.tsx b/components/docs/forms/checkbox-demo.tsx index 59e635f9..0579ae20 100644 --- a/components/docs/forms/checkbox-demo.tsx +++ b/components/docs/forms/checkbox-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Checkbox } from 'ui' +import { Checkbox } from "ui" export default function CheckboxDemo() { return Enable notifications diff --git a/components/docs/forms/checkbox-description-demo.tsx b/components/docs/forms/checkbox-description-demo.tsx index 39f8bcb0..3f6aa18a 100644 --- a/components/docs/forms/checkbox-description-demo.tsx +++ b/components/docs/forms/checkbox-description-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Checkbox } from 'ui' +import { Checkbox } from "ui" export default function CheckboxDescriptionDemo() { return diff --git a/components/docs/forms/checkbox-disabled-demo.tsx b/components/docs/forms/checkbox-disabled-demo.tsx index 8ddb4e64..cbad5015 100644 --- a/components/docs/forms/checkbox-disabled-demo.tsx +++ b/components/docs/forms/checkbox-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Checkbox } from 'ui' +import { Checkbox } from "ui" export default function CheckboxDisabledDemo() { return Enable notifications diff --git a/components/docs/forms/checkbox-group-controlled-demo.tsx b/components/docs/forms/checkbox-group-controlled-demo.tsx index f70596c0..2d85fa93 100644 --- a/components/docs/forms/checkbox-group-controlled-demo.tsx +++ b/components/docs/forms/checkbox-group-controlled-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Checkbox, CheckboxGroup, Description } from 'ui' +import { Checkbox, CheckboxGroup, Description } from "ui" export default function CheckboxGroupControlledDemo() { const [values, setValues] = React.useState([]) @@ -17,10 +17,10 @@ export default function CheckboxGroupControlledDemo() { {values.length > 0 ? ( <> - Selected values {values.join(', ')} + Selected values {values.join(", ")} ) : ( - 'No values selected' + "No values selected" )} diff --git a/components/docs/forms/checkbox-group-demo.tsx b/components/docs/forms/checkbox-group-demo.tsx index e8a6ac57..623d1c67 100644 --- a/components/docs/forms/checkbox-group-demo.tsx +++ b/components/docs/forms/checkbox-group-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Checkbox, CheckboxGroup } from 'ui' +import { Checkbox, CheckboxGroup } from "ui" export default function CheckboxGroupDemo() { return ( diff --git a/components/docs/forms/checkbox-group-description-demo.tsx b/components/docs/forms/checkbox-group-description-demo.tsx index c67d60d5..5a152339 100644 --- a/components/docs/forms/checkbox-group-description-demo.tsx +++ b/components/docs/forms/checkbox-group-description-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Checkbox, CheckboxGroup } from 'ui' +import { Checkbox, CheckboxGroup } from "ui" export default function CheckboxGroupDescriptionDemo() { return ( diff --git a/components/docs/forms/checkbox-group-disabled-demo.tsx b/components/docs/forms/checkbox-group-disabled-demo.tsx index 1afd5644..dae85d52 100644 --- a/components/docs/forms/checkbox-group-disabled-demo.tsx +++ b/components/docs/forms/checkbox-group-disabled-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Checkbox, CheckboxGroup } from 'ui' +import { Checkbox, CheckboxGroup } from "ui" export default function CheckboxDisabledDemo() { return ( diff --git a/components/docs/forms/checkbox-indeterminate-demo.tsx b/components/docs/forms/checkbox-indeterminate-demo.tsx index 011ac596..4ff359d9 100644 --- a/components/docs/forms/checkbox-indeterminate-demo.tsx +++ b/components/docs/forms/checkbox-indeterminate-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Checkbox } from 'ui' +import { Checkbox } from "ui" export default function CheckboxIndeterminateDemo() { return ( diff --git a/components/docs/forms/checkbox-invalid-demo.tsx b/components/docs/forms/checkbox-invalid-demo.tsx index e96f5869..8df61ac3 100644 --- a/components/docs/forms/checkbox-invalid-demo.tsx +++ b/components/docs/forms/checkbox-invalid-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Checkbox } from 'ui' +import { Checkbox } from "ui" export default function CheckboxInvalidDemo() { return Enable notifications diff --git a/components/docs/forms/form-demo.tsx b/components/docs/forms/form-demo.tsx index 93e104ee..5895a171 100644 --- a/components/docs/forms/form-demo.tsx +++ b/components/docs/forms/form-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Button, Form, Heading, TextField } from 'ui' +import { Button, Form, Heading, TextField } from "ui" export default function FormDemo() { return ( diff --git a/components/docs/forms/form-validation-demo.tsx b/components/docs/forms/form-validation-demo.tsx index 150e225e..17c7842a 100644 --- a/components/docs/forms/form-validation-demo.tsx +++ b/components/docs/forms/form-validation-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Button, Form, TextField } from 'ui' +import { Button, Form, TextField } from "ui" export default function FormValidationDemo() { return ( diff --git a/components/docs/forms/input-otp-controlled-demo.tsx b/components/docs/forms/input-otp-controlled-demo.tsx index 96bd8a99..d0a4f72c 100644 --- a/components/docs/forms/input-otp-controlled-demo.tsx +++ b/components/docs/forms/input-otp-controlled-demo.tsx @@ -1,9 +1,9 @@ -import React from 'react' +import React from "react" -import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui' +import { InputOTP, InputOTPGroup, InputOTPSlot } from "ui" export default function InputOtpControlledDemo() { - const [value, setValue] = React.useState('') + const [value, setValue] = React.useState("") return (
@@ -15,7 +15,7 @@ export default function InputOtpControlledDemo() {
- {value === '' ? <>Enter your one-time password. : <>You entered: {value}} + {value === "" ? <>Enter your one-time password. : <>You entered: {value}}
) diff --git a/components/docs/forms/input-otp-demo.tsx b/components/docs/forms/input-otp-demo.tsx index af071c8f..a09ed5c0 100644 --- a/components/docs/forms/input-otp-demo.tsx +++ b/components/docs/forms/input-otp-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui' +import { InputOTP, InputOTPGroup, InputOTPSlot } from "ui" export default function InputOtpDemo() { return ( diff --git a/components/docs/forms/input-otp-separator-demo.tsx b/components/docs/forms/input-otp-separator-demo.tsx index b17789ff..6eeccd0f 100644 --- a/components/docs/forms/input-otp-separator-demo.tsx +++ b/components/docs/forms/input-otp-separator-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'ui' +import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "ui" export default function InputOtpSeparatorDemo() { return ( diff --git a/components/docs/forms/number-field-controlled-demo.tsx b/components/docs/forms/number-field-controlled-demo.tsx index 915e6c38..8be20a96 100644 --- a/components/docs/forms/number-field-controlled-demo.tsx +++ b/components/docs/forms/number-field-controlled-demo.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Description, NumberField } from 'ui' +import { Description, NumberField } from "ui" export default function NumberFieldControlledDemo() { const [number, setNumber] = React.useState(1280) @@ -11,7 +11,7 @@ export default function NumberFieldControlledDemo() { - You have typed: {number ?? '-'} + You have typed: {number ?? "-"}
) diff --git a/components/docs/forms/number-field-demo.tsx b/components/docs/forms/number-field-demo.tsx index 496ab9c5..d5b44096 100644 --- a/components/docs/forms/number-field-demo.tsx +++ b/components/docs/forms/number-field-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { NumberField } from 'ui' +import { NumberField } from "ui" export default function NumberFieldDemo() { return diff --git a/components/docs/forms/number-field-disabled-demo.tsx b/components/docs/forms/number-field-disabled-demo.tsx index 7369cadb..002ec003 100644 --- a/components/docs/forms/number-field-disabled-demo.tsx +++ b/components/docs/forms/number-field-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { NumberField } from 'ui' +import { NumberField } from "ui" export default function NumberFieldDisabledDemo() { return diff --git a/components/docs/forms/number-field-invalid-demo.tsx b/components/docs/forms/number-field-invalid-demo.tsx index 8055f3a2..2a56d03e 100644 --- a/components/docs/forms/number-field-invalid-demo.tsx +++ b/components/docs/forms/number-field-invalid-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { NumberField } from 'ui' +import { NumberField } from "ui" export default function NumberFieldInvalidDemo() { return diff --git a/components/docs/forms/radio-group-children-description-demo.tsx b/components/docs/forms/radio-group-children-description-demo.tsx index 047260c1..89e28d93 100644 --- a/components/docs/forms/radio-group-children-description-demo.tsx +++ b/components/docs/forms/radio-group-children-description-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Radio, RadioGroup } from 'ui' +import { Radio, RadioGroup } from "ui" export default function RadioGroupChildrenDescriptionDemo() { return ( diff --git a/components/docs/forms/radio-group-controlled-demo.tsx b/components/docs/forms/radio-group-controlled-demo.tsx index 801a97db..bb0384ef 100644 --- a/components/docs/forms/radio-group-controlled-demo.tsx +++ b/components/docs/forms/radio-group-controlled-demo.tsx @@ -1,11 +1,11 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Description, Radio, RadioGroup } from 'ui' +import { Description, Radio, RadioGroup } from "ui" export default function RadioGroupControlledDemo() { - const [selected, setSelected] = React.useState('') + const [selected, setSelected] = React.useState("") return ( <> @@ -16,7 +16,7 @@ export default function RadioGroupControlledDemo() { Privacy - You have selected: {selected ?? '-'} + You have selected: {selected ?? "-"} ) diff --git a/components/docs/forms/radio-group-demo.tsx b/components/docs/forms/radio-group-demo.tsx index 5cf3de7f..65e44672 100644 --- a/components/docs/forms/radio-group-demo.tsx +++ b/components/docs/forms/radio-group-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Radio, RadioGroup } from 'ui' +import { Radio, RadioGroup } from "ui" export default function RadioGroupDemo() { return ( diff --git a/components/docs/forms/radio-group-description-demo.tsx b/components/docs/forms/radio-group-description-demo.tsx index 036c7a34..a8fe993f 100644 --- a/components/docs/forms/radio-group-description-demo.tsx +++ b/components/docs/forms/radio-group-description-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Radio, RadioGroup } from 'ui' +import { Radio, RadioGroup } from "ui" export default function RadioGroupDescriptionDemo() { return ( diff --git a/components/docs/forms/radio-group-disabled-demo.tsx b/components/docs/forms/radio-group-disabled-demo.tsx index dff401ef..400c27e0 100644 --- a/components/docs/forms/radio-group-disabled-demo.tsx +++ b/components/docs/forms/radio-group-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Radio, RadioGroup } from 'ui' +import { Radio, RadioGroup } from "ui" export default function RadioGroupDisabledDemo() { return ( diff --git a/components/docs/forms/radio-group-invalid-demo.tsx b/components/docs/forms/radio-group-invalid-demo.tsx index 6df607a1..4665db4c 100644 --- a/components/docs/forms/radio-group-invalid-demo.tsx +++ b/components/docs/forms/radio-group-invalid-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Radio, RadioGroup } from 'ui' +import { Radio, RadioGroup } from "ui" export default function RadioGroupInvalidDemo() { return ( diff --git a/components/docs/forms/radio-group-orientation-demo.tsx b/components/docs/forms/radio-group-orientation-demo.tsx index f936a2af..ff9c438b 100644 --- a/components/docs/forms/radio-group-orientation-demo.tsx +++ b/components/docs/forms/radio-group-orientation-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Radio, RadioGroup } from 'ui' +import { Radio, RadioGroup } from "ui" export default function RadioGroupOrientationDemo() { return ( diff --git a/components/docs/forms/search-field-controlled-demo.tsx b/components/docs/forms/search-field-controlled-demo.tsx index 7a79335f..c053cec2 100644 --- a/components/docs/forms/search-field-controlled-demo.tsx +++ b/components/docs/forms/search-field-controlled-demo.tsx @@ -1,16 +1,16 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Description, SearchField } from 'ui' +import { Description, SearchField } from "ui" export default function SearchFieldControlledDemo() { - const [value, setValue] = React.useState('') + const [value, setValue] = React.useState("") return ( <> - You have typed: {value ?? '-'} + You have typed: {value ?? "-"} ) diff --git a/components/docs/forms/search-field-demo.tsx b/components/docs/forms/search-field-demo.tsx index 47958223..cc7459b4 100644 --- a/components/docs/forms/search-field-demo.tsx +++ b/components/docs/forms/search-field-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { SearchField } from 'ui' +import { SearchField } from "ui" export default function SearchFieldDemo() { return diff --git a/components/docs/forms/search-field-disabled-demo.tsx b/components/docs/forms/search-field-disabled-demo.tsx index b2fcb675..d8017d3c 100644 --- a/components/docs/forms/search-field-disabled-demo.tsx +++ b/components/docs/forms/search-field-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { SearchField } from 'ui' +import { SearchField } from "ui" export default function SearchFieldDisabledDemo() { return diff --git a/components/docs/forms/search-field-validation-demo.tsx b/components/docs/forms/search-field-validation-demo.tsx index 907e367a..3709dd42 100644 --- a/components/docs/forms/search-field-validation-demo.tsx +++ b/components/docs/forms/search-field-validation-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Button, Form, SearchField } from 'ui' +import { Button, Form, SearchField } from "ui" export default function SearchFieldValidationDemo() { return ( diff --git a/components/docs/forms/search-field-with-label-demo.tsx b/components/docs/forms/search-field-with-label-demo.tsx index 0a108a73..acc0cac8 100644 --- a/components/docs/forms/search-field-with-label-demo.tsx +++ b/components/docs/forms/search-field-with-label-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { SearchField } from 'ui' +import { SearchField } from "ui" export default function SearchFieldWithLabelDemo() { return diff --git a/components/docs/forms/tag-field-appearance-demo.tsx b/components/docs/forms/tag-field-appearance-demo.tsx index 2dc56b25..bd8ba15d 100644 --- a/components/docs/forms/tag-field-appearance-demo.tsx +++ b/components/docs/forms/tag-field-appearance-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { useListData } from 'react-stately' -import { TagField } from 'ui' +import { useListData } from "react-stately" +import { TagField } from "ui" export default function TagFieldAppearanceDemo() { const selectedItems = useListData({ diff --git a/components/docs/forms/tag-field-controlled-demo.tsx b/components/docs/forms/tag-field-controlled-demo.tsx index da24eda6..0ddab9ce 100644 --- a/components/docs/forms/tag-field-controlled-demo.tsx +++ b/components/docs/forms/tag-field-controlled-demo.tsx @@ -1,13 +1,13 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { useListData } from 'react-stately' -import { Description, TagField } from 'ui' +import { useListData } from "react-stately" +import { Description, TagField } from "ui" export default function TagFieldControlledDemo() { const selectedItems = useListData({ - initialItems: [{ id: 1, name: 'Ferrari' }] + initialItems: [{ id: 1, name: "Ferrari" }] }) return ( @@ -15,8 +15,8 @@ export default function TagFieldControlledDemo() { console.log('on item inserted', key)} - onItemCleared={(key) => console.log('on item cleared', key)} + onItemInserted={(key) => console.log("on item inserted", key)} + onItemCleared={(key) => console.log("on item cleared", key)} description="You can add multiple tags" list={selectedItems} /> diff --git a/components/docs/forms/tag-field-demo.tsx b/components/docs/forms/tag-field-demo.tsx index b772e7e5..02c763e1 100644 --- a/components/docs/forms/tag-field-demo.tsx +++ b/components/docs/forms/tag-field-demo.tsx @@ -1,16 +1,16 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { useListData } from 'react-stately' -import { TagField } from 'ui' +import { useListData } from "react-stately" +import { TagField } from "ui" export default function TagFieldDemo() { const selectedItems = useListData({ initialItems: [ { id: 1, - name: 'Laravel' + name: "Laravel" } ] }) diff --git a/components/docs/forms/tag-field-disabled-demo.tsx b/components/docs/forms/tag-field-disabled-demo.tsx index 92069d8b..98e18663 100644 --- a/components/docs/forms/tag-field-disabled-demo.tsx +++ b/components/docs/forms/tag-field-disabled-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { useListData } from 'react-stately' -import { TagField } from 'ui' +import { useListData } from "react-stately" +import { TagField } from "ui" export default function TagFieldDisabledDemo() { const selectedItems = useListData({ diff --git a/components/docs/forms/tag-field-intent-demo.tsx b/components/docs/forms/tag-field-intent-demo.tsx index 54d53ef7..7d05ee7d 100644 --- a/components/docs/forms/tag-field-intent-demo.tsx +++ b/components/docs/forms/tag-field-intent-demo.tsx @@ -1,28 +1,28 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { useListData } from 'react-stately' -import { TagField } from 'ui' +import { useListData } from "react-stately" +import { TagField } from "ui" export default function TagFieldIntentDemo() { const selectedItems = useListData({ initialItems: [ { id: 1, - name: 'Laravel' + name: "Laravel" }, { id: 2, - name: 'Inertia.js' + name: "Inertia.js" }, { id: 3, - name: 'React' + name: "React" }, { id: 4, - name: 'Tailwind CSS' + name: "Tailwind CSS" } ] }) diff --git a/components/docs/forms/tag-field-max-demo.tsx b/components/docs/forms/tag-field-max-demo.tsx index 0f9fade9..79b00da7 100644 --- a/components/docs/forms/tag-field-max-demo.tsx +++ b/components/docs/forms/tag-field-max-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { useListData } from 'react-stately' -import { TagField } from 'ui' +import { useListData } from "react-stately" +import { TagField } from "ui" export default function TagFieldMaxDemo() { const selectedItems = useListData({ diff --git a/components/docs/forms/tag-field-shape-demo.tsx b/components/docs/forms/tag-field-shape-demo.tsx index bc99c705..fb97bb8b 100644 --- a/components/docs/forms/tag-field-shape-demo.tsx +++ b/components/docs/forms/tag-field-shape-demo.tsx @@ -1,20 +1,20 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { useListData } from 'react-stately' -import { TagField } from 'ui' +import { useListData } from "react-stately" +import { TagField } from "ui" export default function TagFieldShapeDemo() { const selectedItems = useListData({ initialItems: [ { id: 1, - name: 'Laravel' + name: "Laravel" }, { id: 2, - name: 'Inertia.js' + name: "Inertia.js" } ] }) diff --git a/components/docs/forms/text-field-controlled-demo.tsx b/components/docs/forms/text-field-controlled-demo.tsx index b506ac40..e4f3bea5 100644 --- a/components/docs/forms/text-field-controlled-demo.tsx +++ b/components/docs/forms/text-field-controlled-demo.tsx @@ -1,16 +1,16 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Description, TextField } from 'ui' +import { Description, TextField } from "ui" export default function TextFieldControlledDemo() { - const [value, setValue] = React.useState('') + const [value, setValue] = React.useState("") return ( <> - You have typed: {value ?? '-'} + You have typed: {value ?? "-"} ) diff --git a/components/docs/forms/text-field-demo.tsx b/components/docs/forms/text-field-demo.tsx index fad919ca..89508b18 100644 --- a/components/docs/forms/text-field-demo.tsx +++ b/components/docs/forms/text-field-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { TextField } from 'ui' +import { TextField } from "ui" export default function TextFieldDemo() { return diff --git a/components/docs/forms/text-field-disabled-demo.tsx b/components/docs/forms/text-field-disabled-demo.tsx index 24183a9b..9ad9fc4a 100644 --- a/components/docs/forms/text-field-disabled-demo.tsx +++ b/components/docs/forms/text-field-disabled-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { TextField } from 'ui' +import { TextField } from "ui" export default function TextFieldDisabledDemo() { return diff --git a/components/docs/forms/text-field-loading-demo.tsx b/components/docs/forms/text-field-loading-demo.tsx index 881de8aa..087f31ab 100644 --- a/components/docs/forms/text-field-loading-demo.tsx +++ b/components/docs/forms/text-field-loading-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { TextField } from 'ui' +import { TextField } from "ui" export default function TextFieldLoadingDemo() { return diff --git a/components/docs/forms/text-field-prefix-suffix-demo.tsx b/components/docs/forms/text-field-prefix-suffix-demo.tsx index 8a9d6ddb..d8f4613f 100644 --- a/components/docs/forms/text-field-prefix-suffix-demo.tsx +++ b/components/docs/forms/text-field-prefix-suffix-demo.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import { IconBrandTwitter } from 'justd-icons' -import { TextField } from 'ui' +import { IconBrandTwitter } from "justd-icons" +import { TextField } from "ui" export default function TextFieldPrefixSuffixDemo() { return ( diff --git a/components/docs/forms/text-field-readonly-demo.tsx b/components/docs/forms/text-field-readonly-demo.tsx index 5ae220f8..f2aa035f 100644 --- a/components/docs/forms/text-field-readonly-demo.tsx +++ b/components/docs/forms/text-field-readonly-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { TextField } from 'ui' +import { TextField } from "ui" export default function TextFieldReadonlyDemo() { return diff --git a/components/docs/forms/text-field-suffix-button-demo.tsx b/components/docs/forms/text-field-suffix-button-demo.tsx index 7b250087..53084ef8 100644 --- a/components/docs/forms/text-field-suffix-button-demo.tsx +++ b/components/docs/forms/text-field-suffix-button-demo.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { IconPlus } from 'justd-icons' -import { Button, Modal, TextField } from 'ui' +import { IconPlus } from "justd-icons" +import { Button, Modal, TextField } from "ui" export default function TextFieldSuffixButtonDemo() { const [open, setOpen] = React.useState(false) diff --git a/components/docs/forms/text-field-validation-demo.tsx b/components/docs/forms/text-field-validation-demo.tsx index 63606fa1..2a5b9d3f 100644 --- a/components/docs/forms/text-field-validation-demo.tsx +++ b/components/docs/forms/text-field-validation-demo.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import { Button, Form, TextField } from 'ui' +import { Button, Form, TextField } from "ui" export default function TextFieldValidationDemo() { return ( diff --git a/components/docs/forms/textarea-controlled-demo.tsx b/components/docs/forms/textarea-controlled-demo.tsx index 39826188..777a6c41 100644 --- a/components/docs/forms/textarea-controlled-demo.tsx +++ b/components/docs/forms/textarea-controlled-demo.tsx @@ -1,15 +1,15 @@ -'use client' +"use client" -import React from 'react' +import React from "react" -import { Textarea } from 'ui' +import { Textarea } from "ui" export default function TextareaControlledDemo() { - const [value, setValue] = React.useState('') + const [value, setValue] = React.useState("") return ( <>