From 0e6b4dbe09876e2101feb7b340a08ce13734bbc5 Mon Sep 17 00:00:00 2001 From: mehdibha Date: Sun, 22 Mar 2026 16:55:04 +0100 Subject: [PATCH 01/49] refactor: simplify loader component and rename base file rename basic.tsx to base.tsx, remove ring variant, and use lucide Loader2Icon instead of custom svg spinner. Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/registry/src/ui/loader/base.tsx | 26 +++++++++ packages/registry/src/ui/loader/basic.tsx | 65 ----------------------- packages/registry/src/ui/loader/index.tsx | 8 +-- packages/registry/src/ui/loader/ring.tsx | 65 ----------------------- 4 files changed, 28 insertions(+), 136 deletions(-) create mode 100644 packages/registry/src/ui/loader/base.tsx delete mode 100644 packages/registry/src/ui/loader/basic.tsx delete mode 100644 packages/registry/src/ui/loader/ring.tsx diff --git a/packages/registry/src/ui/loader/base.tsx b/packages/registry/src/ui/loader/base.tsx new file mode 100644 index 000000000..f26c32ecb --- /dev/null +++ b/packages/registry/src/ui/loader/base.tsx @@ -0,0 +1,26 @@ +"use client"; + +import { Loader2Icon } from "lucide-react"; +import { ProgressBar as AriaProgressBar } from "react-aria-components"; +import type { ProgressBarProps } from "react-aria-components"; + +import { cn } from "@dotui/registry/lib/utils"; + +interface LoaderProps extends ProgressBarProps {} + +function Loader({ className, ...props }: LoaderProps) { + return ( + + + + ); +} + +export type { LoaderProps }; +export { Loader }; diff --git a/packages/registry/src/ui/loader/basic.tsx b/packages/registry/src/ui/loader/basic.tsx deleted file mode 100644 index f73a8e123..000000000 --- a/packages/registry/src/ui/loader/basic.tsx +++ /dev/null @@ -1,65 +0,0 @@ -"use client"; - -import { ProgressBar as AriaProgressBar, composeRenderProps } from "react-aria-components"; -import type { ProgressBarProps } from "react-aria-components"; - -import { cn } from "@dotui/registry/lib/utils"; - -interface LoaderProps extends ProgressBarProps { - size?: number; - stroke?: number; - speed?: number; - strokeLength?: number; -} - -function Loader({ className, style, size = 20, stroke = 2, strokeLength = 0.25, speed = 0.8, ...props }: LoaderProps) { - const centerPoint = size / 2; - const radius = Math.max(0, size / 2 - stroke / 2); - - return ( - ({ - ...style, - "--loader-size": `${size}px`, - "--loader-speed": `${speed}s`, - "--loader-stroke": "2", - "--loader-dash": String(parseFloat(`${strokeLength}`) * 100), - "--loader-gap": String(100 - parseFloat(`${strokeLength}`) * 100), - }))} - className={cn("inline-flex size-(--loader-size) shrink-0 items-center justify-center", className)} - aria-label="loading..." - {...props} - isIndeterminate - > - - - - - - ); -} - -export type { LoaderProps }; -export { Loader }; diff --git a/packages/registry/src/ui/loader/index.tsx b/packages/registry/src/ui/loader/index.tsx index 4d3dae89e..f56afae5f 100644 --- a/packages/registry/src/ui/loader/index.tsx +++ b/packages/registry/src/ui/loader/index.tsx @@ -1,14 +1,10 @@ "use client"; -import React from "react"; - import { createDynamicComponent } from "@dotui/core/react/dynamic-component"; -import * as Default from "./basic"; +import * as Default from "./base"; import type { LoaderProps } from "./types"; -export const Loader = createDynamicComponent("loader", "Loader", Default.Loader, { - ring: React.lazy(() => import("./ring").then((mod) => ({ default: mod.Loader }))), -}); +export const Loader = createDynamicComponent("loader", "Loader", Default.Loader, {}); export type { LoaderProps }; diff --git a/packages/registry/src/ui/loader/ring.tsx b/packages/registry/src/ui/loader/ring.tsx deleted file mode 100644 index 369abf70f..000000000 --- a/packages/registry/src/ui/loader/ring.tsx +++ /dev/null @@ -1,65 +0,0 @@ -"use client"; - -import { ProgressBar as AriaProgressBar, composeRenderProps } from "react-aria-components"; -import type { ProgressBarProps } from "react-aria-components"; - -import { cn } from "@dotui/registry/lib/utils"; - -interface LoaderProps extends ProgressBarProps { - size?: number; - stroke?: number; - speed?: number; - strokeLength?: number; -} - -function Loader({ className, style, size = 20, stroke = 2, strokeLength = 0.25, speed = 0.8, ...props }: LoaderProps) { - const centerPoint = size / 2; - const radius = Math.max(0, size / 2 - stroke / 2); - - return ( - ({ - ...style, - "--loader-size": `${size}px`, - "--loader-speed": `${speed}s`, - "--loader-stroke": "2", - "--loader-dash": String(parseFloat(`${strokeLength}`) * 100), - "--loader-gap": String(100 - parseFloat(`${strokeLength}`) * 100), - }))} - className={cn("inline-flex size-(--loader-size) shrink-0 items-center justify-center", className)} - aria-label="loading..." - {...props} - isIndeterminate - > - - - - - - ); -} - -export type { LoaderProps }; -export { Loader }; From 6031dadb3fad2a1ffd6e1f23df7549e7b5251e95 Mon Sep 17 00:00:00 2001 From: mehdibha Date: Sun, 22 Mar 2026 16:55:17 +0100 Subject: [PATCH 02/49] refactor: update badge component with size variants and new demos rename basic.tsx to base.tsx, add proper size variants (sm/md/lg) with height and min-width, and add count, link, loader, and pending demos. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/ui/badge/{basic.tsx => base.tsx} | 8 ++++---- packages/registry/src/ui/badge/demos/count.tsx | 5 +++++ packages/registry/src/ui/badge/demos/icon.tsx | 7 ++++--- packages/registry/src/ui/badge/demos/link.tsx | 11 +++++++++++ .../registry/src/ui/badge/demos/loader.tsx | 11 +++++++++++ .../registry/src/ui/badge/demos/pending.tsx | 10 ++++++++++ packages/registry/src/ui/badge/demos/sizes.tsx | 18 +++--------------- packages/registry/src/ui/badge/index.tsx | 2 +- www/content/docs/components/badge.mdx | 4 ++++ 9 files changed, 53 insertions(+), 23 deletions(-) rename packages/registry/src/ui/badge/{basic.tsx => base.tsx} (72%) create mode 100644 packages/registry/src/ui/badge/demos/count.tsx create mode 100644 packages/registry/src/ui/badge/demos/link.tsx create mode 100644 packages/registry/src/ui/badge/demos/loader.tsx create mode 100644 packages/registry/src/ui/badge/demos/pending.tsx diff --git a/packages/registry/src/ui/badge/basic.tsx b/packages/registry/src/ui/badge/base.tsx similarity index 72% rename from packages/registry/src/ui/badge/basic.tsx rename to packages/registry/src/ui/badge/base.tsx index 886105529..9665a16e1 100644 --- a/packages/registry/src/ui/badge/basic.tsx +++ b/packages/registry/src/ui/badge/base.tsx @@ -3,7 +3,7 @@ import type * as React from "react"; import type { VariantProps } from "tailwind-variants"; const badgeStyles = tv({ - base: "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-md px-2 py-0.5 font-medium text-xs [&>svg]:pointer-events-none", + base: "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-md font-medium text-xs [&>svg]:pointer-events-none", variants: { variant: { default: "bg-neutral text-fg-on-neutral", @@ -14,9 +14,9 @@ const badgeStyles = tv({ info: "bg-info text-fg-on-info", }, size: { - sm: "px-1.5 py-0.25 [&>svg]:size-3", - md: "px-2 py-0.5 [&>svg]:size-3", - lg: "px-2.5 py-0.75 [&>svg]:size-3", + sm: "h-4.5 min-w-4.5 px-1.5 text-xs [&>svg]:size-2.5 **:data-loader:*:[svg]:size-2.5", + md: "h-5 min-w-5 px-1.75 text-xs [&>svg]:size-3 **:data-loader:*:[svg]:size-3", + lg: "h-5.5 min-w-5.5 px-2.25 text-xs [&>svg]:size-3.5 **:data-loader:*:[svg]:size-3.5", }, }, defaultVariants: { diff --git a/packages/registry/src/ui/badge/demos/count.tsx b/packages/registry/src/ui/badge/demos/count.tsx new file mode 100644 index 000000000..ac29300eb --- /dev/null +++ b/packages/registry/src/ui/badge/demos/count.tsx @@ -0,0 +1,5 @@ +import { Badge } from "@dotui/registry/ui/badge"; + +export default function Demo() { + return 8; +} diff --git a/packages/registry/src/ui/badge/demos/icon.tsx b/packages/registry/src/ui/badge/demos/icon.tsx index 52412bcab..814b36bdb 100644 --- a/packages/registry/src/ui/badge/demos/icon.tsx +++ b/packages/registry/src/ui/badge/demos/icon.tsx @@ -1,12 +1,13 @@ -import { ShieldIcon } from "@dotui/registry/icons"; +import { BadgeCheck } from "lucide-react"; + import { Badge } from "@dotui/registry/ui/badge"; export default function Demo() { return (
- - Badge + + Verified
); diff --git a/packages/registry/src/ui/badge/demos/link.tsx b/packages/registry/src/ui/badge/demos/link.tsx new file mode 100644 index 000000000..cc5a4239e --- /dev/null +++ b/packages/registry/src/ui/badge/demos/link.tsx @@ -0,0 +1,11 @@ +import { ArrowUpRightIcon } from "lucide-react"; + +import { Badge } from "@dotui/registry/ui/badge"; + +export default function Demo() { + return ( + + Open Link + + ); +} diff --git a/packages/registry/src/ui/badge/demos/loader.tsx b/packages/registry/src/ui/badge/demos/loader.tsx new file mode 100644 index 000000000..422715b99 --- /dev/null +++ b/packages/registry/src/ui/badge/demos/loader.tsx @@ -0,0 +1,11 @@ +import { Badge } from "@dotui/registry/ui/badge"; +import { Loader } from "@dotui/registry/ui/loader"; + +export default function Demo() { + return ( + + + Badge + + ); +} diff --git a/packages/registry/src/ui/badge/demos/pending.tsx b/packages/registry/src/ui/badge/demos/pending.tsx new file mode 100644 index 000000000..52bcd8a3c --- /dev/null +++ b/packages/registry/src/ui/badge/demos/pending.tsx @@ -0,0 +1,10 @@ +import { Badge } from "@dotui/registry/ui/badge"; + +export default function Demo() { + return ( + + + ); +} diff --git a/packages/registry/src/ui/badge/demos/sizes.tsx b/packages/registry/src/ui/badge/demos/sizes.tsx index 3d6a28471..b7fc294a0 100644 --- a/packages/registry/src/ui/badge/demos/sizes.tsx +++ b/packages/registry/src/ui/badge/demos/sizes.tsx @@ -3,21 +3,9 @@ import { Badge } from "@dotui/registry/ui/badge"; export default function Demo() { return (
- - Small - - - Medium - - - Large - + Small + Medium + Large
); } diff --git a/packages/registry/src/ui/badge/index.tsx b/packages/registry/src/ui/badge/index.tsx index 5cbcae1a9..d6ae711ef 100644 --- a/packages/registry/src/ui/badge/index.tsx +++ b/packages/registry/src/ui/badge/index.tsx @@ -2,7 +2,7 @@ import { createDynamicComponent } from "@dotui/core/react/dynamic-component"; -import * as Default from "./basic"; +import * as Default from "./base"; import type { BadgeProps } from "./types"; export const Badge = createDynamicComponent("badge", "Badge", Default.Badge, {}); diff --git a/www/content/docs/components/badge.mdx b/www/content/docs/components/badge.mdx index 84f9a6349..29de1daa8 100644 --- a/www/content/docs/components/badge.mdx +++ b/www/content/docs/components/badge.mdx @@ -55,6 +55,10 @@ wip: true + + + + From fb803a26be57aa0646d9c672c49ae47498af8698 Mon Sep 17 00:00:00 2001 From: mehdibha Date: Mon, 30 Mar 2026 14:53:18 +0100 Subject: [PATCH 03/49] wip --- packages/registry/src/ui/card/basic.tsx | 14 +- www/src/components/layout/app-sidebar.tsx | 190 ----------------- www/src/components/layout/header.tsx | 55 ++--- www/src/config/site.tsx | 9 +- www/src/modules/create/customizer-panel.tsx | 217 ++++++++++++++++++++ www/src/modules/docs/page-tabs.tsx | 2 +- www/src/routeTree.gen.ts | 124 +++++++---- www/src/routes/_app/create.tsx | 20 ++ www/src/routes/_app/docs/route.tsx | 72 +++++++ www/src/routes/_app/index.tsx | 170 +++++++++++++++ www/src/routes/_app/route.tsx | 16 +- www/src/routes/index.tsx | 176 ---------------- 12 files changed, 613 insertions(+), 452 deletions(-) delete mode 100644 www/src/components/layout/app-sidebar.tsx create mode 100644 www/src/modules/create/customizer-panel.tsx create mode 100644 www/src/routes/_app/create.tsx create mode 100644 www/src/routes/_app/docs/route.tsx create mode 100644 www/src/routes/_app/index.tsx delete mode 100644 www/src/routes/index.tsx diff --git a/packages/registry/src/ui/card/basic.tsx b/packages/registry/src/ui/card/basic.tsx index 00f0f5c41..4a1267539 100644 --- a/packages/registry/src/ui/card/basic.tsx +++ b/packages/registry/src/ui/card/basic.tsx @@ -21,7 +21,7 @@ const { root, header, title, description, action, content, footer } = cardStyles interface CardProps extends React.ComponentProps<"div"> {} function Card({ className, ...props }: CardProps) { - return
; + return
; } /* -----------------------------------------------------------------------------------------------*/ @@ -29,7 +29,7 @@ function Card({ className, ...props }: CardProps) { interface CardHeaderProps extends React.ComponentProps<"div"> {} function CardHeader({ className, ...props }: CardHeaderProps) { - return
; + return
; } /* -----------------------------------------------------------------------------------------------*/ @@ -37,7 +37,7 @@ function CardHeader({ className, ...props }: CardHeaderProps) { interface CardTitleProps extends React.ComponentProps<"div"> {} function CardTitle({ className, ...props }: CardTitleProps) { - return
; + return
; } /* -----------------------------------------------------------------------------------------------*/ @@ -45,7 +45,7 @@ function CardTitle({ className, ...props }: CardTitleProps) { interface CardDescriptionProps extends React.ComponentProps<"div"> {} function CardDescription({ className, ...props }: CardDescriptionProps) { - return
; + return
; } /* -----------------------------------------------------------------------------------------------*/ @@ -53,7 +53,7 @@ function CardDescription({ className, ...props }: CardDescriptionProps) { interface CardActionProps extends React.ComponentProps<"div"> {} function CardAction({ className, ...props }: CardActionProps) { - return
; + return
; } /* -----------------------------------------------------------------------------------------------*/ @@ -61,7 +61,7 @@ function CardAction({ className, ...props }: CardActionProps) { interface CardContentProps extends React.ComponentProps<"div"> {} function CardContent({ className, ...props }: CardContentProps) { - return
; + return
; } /* -----------------------------------------------------------------------------------------------*/ @@ -69,7 +69,7 @@ function CardContent({ className, ...props }: CardContentProps) { interface CardFooterProps extends React.ComponentProps<"div"> {} function CardFooter({ className, ...props }: CardFooterProps) { - return
; + return
; } /* -----------------------------------------------------------------------------------------------*/ diff --git a/www/src/components/layout/app-sidebar.tsx b/www/src/components/layout/app-sidebar.tsx deleted file mode 100644 index e16793b85..000000000 --- a/www/src/components/layout/app-sidebar.tsx +++ /dev/null @@ -1,190 +0,0 @@ -import { type ToOptions, useLocation } from "@tanstack/react-router"; -import { SearchIcon, UserIcon } from "lucide-react"; -import { AnimatePresence, motion, type Transition } from "motion/react"; -import { - Disclosure as AriaDisclosure, - DisclosurePanel as AriaDisclosurePanel, - Heading as AriaHeading, - Link as AriaLink, -} from "react-aria-components"; -import type * as PageTree from "fumadocs-core/page-tree"; - -import { GitHubIcon } from "@dotui/registry/components/icons/github"; -import { Button, LinkButton } from "@dotui/registry/ui/button"; -import { Kbd } from "@dotui/registry/ui/kbd"; -import { - Sidebar, - SidebarContent, - SidebarFooter, - SidebarHeader, - SidebarItem, - SidebarList, - SidebarSection, - SidebarSectionHeading, - SidebarTooltip, - sidebarStyles, - useSidebarContext, -} from "@dotui/registry/ui/sidebar"; - -import { Logo } from "@/components/layout/logo"; -import { SearchCommand } from "@/components/search-command"; -import { ThemeToggle } from "@/components/theme-toggle"; -import { navItems } from "@/config/site"; -import { useMounted } from "@/hooks/use-mounted"; -import { authClient } from "@/modules/auth/client"; -import { UserProfileMenu } from "@/modules/auth/user-profile-menu"; -import type { DocsPageItem } from "@/lib/source"; - -export function AppSidebar({ items }: { items: PageTree.Node[] }) { - const { data: session, isPending } = authClient.useSession(); - const { isOpen } = useSidebarContext("Sidebar"); - const isMounted = useMounted(); - const { pathname } = useLocation(); - - return ( - - - -
-
- - - - - - - - - - - - - {navItems.map((item) => ( - - - - {item.icon} - {item.name} - - - - ))} - - - - - Documentation - - {items.map((item) => { - return ( - - {item.name} - {item.type === "folder" && ( - - {item.children.map((child) => { - const pageItem = child as DocsPageItem; - return ( - child.type === "page" && ( - - - {child.name} - - - - ) - ); - })} - - )} - - ); - })} - - - - - - - - - - - -
- - - - - {isMounted && !isPending && session?.user && ( - - - - )} - -
- - - {isMounted && !isPending && !session?.user && ( - -
- - - - - Sign in - - - -
- - )} - - - - ); -} - -const transition: Transition = { - type: "spring", - duration: 0.2, - bounce: 0, -}; diff --git a/www/src/components/layout/header.tsx b/www/src/components/layout/header.tsx index 38c742184..97f199382 100644 --- a/www/src/components/layout/header.tsx +++ b/www/src/components/layout/header.tsx @@ -20,32 +20,35 @@ interface HeaderProps { export function Header({ className, items = [] }: HeaderProps) { return ( -
-
-
- - - -
-
- - - - - - - -
+
+
+ + + +
+
+ + + + + + +
); diff --git a/www/src/config/site.tsx b/www/src/config/site.tsx index c6d22225b..a725b14d3 100644 --- a/www/src/config/site.tsx +++ b/www/src/config/site.tsx @@ -31,8 +31,9 @@ export const siteConfig = { }, } as const; -export const navItems: { icon: React.ReactNode; name: string; href: ToOptions }[] = [ - { icon: , name: "Docs", href: { to: "/docs/$", params: { _splat: "" } } }, - { icon: , name: "Components", href: { to: "/docs/$", params: { _splat: "components" } } }, - { icon: , name: "Blocks", href: { to: "/blocks" } }, +export const navItems: { name: string; href: ToOptions }[] = [ + { name: "Docs", href: { to: "/docs/$", params: { _splat: "" } } }, + { name: "Components", href: { to: "/docs/$", params: { _splat: "components" } } }, + { name: "Blocks", href: { to: "/blocks" } }, + { name: "Create", href: { to: "/create" } }, ]; diff --git a/www/src/modules/create/customizer-panel.tsx b/www/src/modules/create/customizer-panel.tsx new file mode 100644 index 000000000..d1af7d70d --- /dev/null +++ b/www/src/modules/create/customizer-panel.tsx @@ -0,0 +1,217 @@ +import { useRef, useState } from "react"; +import { + BoxIcon, + ChevronDownIcon, + ChevronLeftIcon, + MoonIcon, + PaletteIcon, + ShuffleIcon, + SmileIcon, + TypeIcon, + Undo2Icon, +} from "lucide-react"; +import { AnimatePresence, motion } from "motion/react"; +import { Button as AriaButton } from "react-aria-components"; + +import * as icons from "@dotui/registry/icons"; +import { cn } from "@dotui/registry/lib/utils"; +import { Button } from "@dotui/registry/ui/button"; +import { + Card, + CardAction, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@dotui/registry/ui/card"; +import { ColorSwatch } from "@dotui/registry/ui/color-swatch"; +import { Combobox } from "@dotui/registry/ui/combobox"; +import { Dialog, DialogContent } from "@dotui/registry/ui/dialog"; +import { Input } from "@dotui/registry/ui/input"; +import { ListBox, ListBoxItem } from "@dotui/registry/ui/list-box"; +import { Popover } from "@dotui/registry/ui/popover"; +import { SearchField } from "@dotui/registry/ui/search-field"; +import { Select, SelectValue } from "@dotui/registry/ui/select"; +import { TextField } from "@dotui/registry/ui/text-field"; + +/* -------------------------------- Types -------------------------------- */ + +/* ------------------------------ Animation ------------------------------ */ + +const slideVariants = { + enter: (dir: number) => ({ + x: dir > 0 ? "100%" : "-100%", + opacity: 0, + }), + center: { x: 0, opacity: 1 }, + exit: (dir: number) => ({ + x: dir > 0 ? "-100%" : "100%", + opacity: 0, + }), +}; + +const slideTransition = { + x: { type: "tween" as const, duration: 0.35, ease: [0.32, 0.72, 0, 1] }, + opacity: { duration: 0.25 }, +}; + +const menu = [ + { + id: "colors" as const, + title: "Colors", + preview: ( +
+ + + + +
+ ), + }, + { + id: "typography" as const, + title: "Typography", + preview: ( +
+

Heading

+

body

+
+ ), + }, + { + id: "icongraphy" as const, + title: "Iconography", + preview: ( +
+ {Object.entries(icons) + .slice(0, 100) + .map(([name, IconComponent]) => { + return ( +
+ +
+ ); + })} +
+ ), + }, + { + id: "radius" as const, + title: "Radius", + preview: <>, + }, + { + id: "compactness" as const, + title: "Compactness", + preview: <>, + }, + { + id: "components" as const, + title: "Components", + preview: ( +
+ + + + +
+ ), + }, +]; + +/* -------------------------------- Panel -------------------------------- */ + +export function CustomizerPanel() { + const [stack, setStack] = useState(["home"]); + const direction = useRef(1); + + const currentView = stack[stack.length - 1]; + + function push(viewId: ViewId) { + direction.current = 1; + setStack((prev) => [...prev, viewId]); + } + + function pop() { + if (stack.length <= 1) return; + direction.current = -1; + setStack((prev) => prev.slice(0, -1)); + } + + return ( +
+
+ +
+ + + + Preview + Accordion + Button + Checkbox + Checkbox Group + Date Field + Date Picker + Date Range Picker + Dropdown + Dropdown Menu + + + + + + +
+ +
+ {/* + + {currentView === "home" ? ( + + ) : ( + + )} + + */} +
+ +
+ {menu.map((item) => ( + +
{item.title}
+
{item.preview}
+ + ))} +
+ +
+
+ ); +} diff --git a/www/src/modules/docs/page-tabs.tsx b/www/src/modules/docs/page-tabs.tsx index 90ba478eb..91b609412 100644 --- a/www/src/modules/docs/page-tabs.tsx +++ b/www/src/modules/docs/page-tabs.tsx @@ -48,7 +48,7 @@ export function PageTabPanel({ id, children }: PageTabPanelProps) { >
{children}
{id === "overview" && hasToc && ( -
+

On this page diff --git a/www/src/routeTree.gen.ts b/www/src/routeTree.gen.ts index a14c575cf..96a2f4931 100644 --- a/www/src/routeTree.gen.ts +++ b/www/src/routeTree.gen.ts @@ -12,11 +12,13 @@ import { Route as rootRouteImport } from './routes/__root' import { Route as OgRouteImport } from './routes/og' import { Route as LoginRouteImport } from './routes/login' import { Route as AppRouteRouteImport } from './routes/_app/route' -import { Route as IndexRouteImport } from './routes/index' +import { Route as AppIndexRouteImport } from './routes/_app/index' import { Route as ViewBlockRouteImport } from './routes/view/$block' import { Route as DemosSlugRouteImport } from './routes/demos/$slug' +import { Route as AppCreateRouteImport } from './routes/_app/create' import { Route as legalSplatRouteImport } from './routes/(legal)/$' import { Route as AppStylesRouteRouteImport } from './routes/_app/styles/route' +import { Route as AppDocsRouteRouteImport } from './routes/_app/docs/route' import { Route as AppBlocksRouteRouteImport } from './routes/_app/blocks/route' import { Route as AppStylesIndexRouteImport } from './routes/_app/styles/index' import { Route as ApiTrpcSplatRouteImport } from './routes/api/trpc.$' @@ -42,10 +44,10 @@ const AppRouteRoute = AppRouteRouteImport.update({ id: '/_app', getParentRoute: () => rootRouteImport, } as any) -const IndexRoute = IndexRouteImport.update({ +const AppIndexRoute = AppIndexRouteImport.update({ id: '/', path: '/', - getParentRoute: () => rootRouteImport, + getParentRoute: () => AppRouteRoute, } as any) const ViewBlockRoute = ViewBlockRouteImport.update({ id: '/view/$block', @@ -57,6 +59,11 @@ const DemosSlugRoute = DemosSlugRouteImport.update({ path: '/demos/$slug', getParentRoute: () => rootRouteImport, } as any) +const AppCreateRoute = AppCreateRouteImport.update({ + id: '/create', + path: '/create', + getParentRoute: () => AppRouteRoute, +} as any) const legalSplatRoute = legalSplatRouteImport.update({ id: '/(legal)/$', path: '/$', @@ -67,6 +74,11 @@ const AppStylesRouteRoute = AppStylesRouteRouteImport.update({ path: '/styles', getParentRoute: () => AppRouteRoute, } as any) +const AppDocsRouteRoute = AppDocsRouteRouteImport.update({ + id: '/docs', + path: '/docs', + getParentRoute: () => AppRouteRoute, +} as any) const AppBlocksRouteRoute = AppBlocksRouteRouteImport.update({ id: '/blocks', path: '/blocks', @@ -99,19 +111,19 @@ const AppStylesCommunityRoute = AppStylesCommunityRouteImport.update({ } as any) const AppDocsChar123Char125DotmdRoute = AppDocsChar123Char125DotmdRouteImport.update({ - id: '/docs/{$}.md', - path: '/docs/{$}.md', - getParentRoute: () => AppRouteRoute, + id: '/{$}.md', + path: '/{$}.md', + getParentRoute: () => AppDocsRouteRoute, } as any) const AppDocsComponentsRoute = AppDocsComponentsRouteImport.update({ - id: '/docs/components', - path: '/docs/components', - getParentRoute: () => AppRouteRoute, + id: '/components', + path: '/components', + getParentRoute: () => AppDocsRouteRoute, } as any) const AppDocsSplatRoute = AppDocsSplatRouteImport.update({ - id: '/docs/$', - path: '/docs/$', - getParentRoute: () => AppRouteRoute, + id: '/$', + path: '/$', + getParentRoute: () => AppDocsRouteRoute, } as any) const AppBlocksChar123CategoryChar125Route = AppBlocksChar123CategoryChar125RouteImport.update({ @@ -121,14 +133,16 @@ const AppBlocksChar123CategoryChar125Route = } as any) export interface FileRoutesByFullPath { - '/': typeof IndexRoute '/login': typeof LoginRoute '/og': typeof OgRoute '/blocks': typeof AppBlocksRouteRouteWithChildren + '/docs': typeof AppDocsRouteRouteWithChildren '/styles': typeof AppStylesRouteRouteWithChildren '/$': typeof legalSplatRoute + '/create': typeof AppCreateRoute '/demos/$slug': typeof DemosSlugRoute '/view/$block': typeof ViewBlockRoute + '/': typeof AppIndexRoute '/blocks/{-$category}': typeof AppBlocksChar123CategoryChar125Route '/docs/$': typeof AppDocsSplatRoute '/docs/components': typeof AppDocsComponentsRoute @@ -140,13 +154,15 @@ export interface FileRoutesByFullPath { '/styles/': typeof AppStylesIndexRoute } export interface FileRoutesByTo { - '/': typeof IndexRoute '/login': typeof LoginRoute '/og': typeof OgRoute '/blocks': typeof AppBlocksRouteRouteWithChildren + '/docs': typeof AppDocsRouteRouteWithChildren '/$': typeof legalSplatRoute + '/create': typeof AppCreateRoute '/demos/$slug': typeof DemosSlugRoute '/view/$block': typeof ViewBlockRoute + '/': typeof AppIndexRoute '/blocks/{-$category}': typeof AppBlocksChar123CategoryChar125Route '/docs/$': typeof AppDocsSplatRoute '/docs/components': typeof AppDocsComponentsRoute @@ -159,15 +175,17 @@ export interface FileRoutesByTo { } export interface FileRoutesById { __root__: typeof rootRouteImport - '/': typeof IndexRoute '/_app': typeof AppRouteRouteWithChildren '/login': typeof LoginRoute '/og': typeof OgRoute '/_app/blocks': typeof AppBlocksRouteRouteWithChildren + '/_app/docs': typeof AppDocsRouteRouteWithChildren '/_app/styles': typeof AppStylesRouteRouteWithChildren '/(legal)/$': typeof legalSplatRoute + '/_app/create': typeof AppCreateRoute '/demos/$slug': typeof DemosSlugRoute '/view/$block': typeof ViewBlockRoute + '/_app/': typeof AppIndexRoute '/_app/blocks/{-$category}': typeof AppBlocksChar123CategoryChar125Route '/_app/docs/$': typeof AppDocsSplatRoute '/_app/docs/components': typeof AppDocsComponentsRoute @@ -181,14 +199,16 @@ export interface FileRoutesById { export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath fullPaths: - | '/' | '/login' | '/og' | '/blocks' + | '/docs' | '/styles' | '/$' + | '/create' | '/demos/$slug' | '/view/$block' + | '/' | '/blocks/{-$category}' | '/docs/$' | '/docs/components' @@ -200,13 +220,15 @@ export interface FileRouteTypes { | '/styles/' fileRoutesByTo: FileRoutesByTo to: - | '/' | '/login' | '/og' | '/blocks' + | '/docs' | '/$' + | '/create' | '/demos/$slug' | '/view/$block' + | '/' | '/blocks/{-$category}' | '/docs/$' | '/docs/components' @@ -218,15 +240,17 @@ export interface FileRouteTypes { | '/styles' id: | '__root__' - | '/' | '/_app' | '/login' | '/og' | '/_app/blocks' + | '/_app/docs' | '/_app/styles' | '/(legal)/$' + | '/_app/create' | '/demos/$slug' | '/view/$block' + | '/_app/' | '/_app/blocks/{-$category}' | '/_app/docs/$' | '/_app/docs/components' @@ -239,7 +263,6 @@ export interface FileRouteTypes { fileRoutesById: FileRoutesById } export interface RootRouteChildren { - IndexRoute: typeof IndexRoute AppRouteRoute: typeof AppRouteRouteWithChildren LoginRoute: typeof LoginRoute OgRoute: typeof OgRoute @@ -273,12 +296,12 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof AppRouteRouteImport parentRoute: typeof rootRouteImport } - '/': { - id: '/' + '/_app/': { + id: '/_app/' path: '/' fullPath: '/' - preLoaderRoute: typeof IndexRouteImport - parentRoute: typeof rootRouteImport + preLoaderRoute: typeof AppIndexRouteImport + parentRoute: typeof AppRouteRoute } '/view/$block': { id: '/view/$block' @@ -294,6 +317,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof DemosSlugRouteImport parentRoute: typeof rootRouteImport } + '/_app/create': { + id: '/_app/create' + path: '/create' + fullPath: '/create' + preLoaderRoute: typeof AppCreateRouteImport + parentRoute: typeof AppRouteRoute + } '/(legal)/$': { id: '/(legal)/$' path: '/$' @@ -308,6 +338,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof AppStylesRouteRouteImport parentRoute: typeof AppRouteRoute } + '/_app/docs': { + id: '/_app/docs' + path: '/docs' + fullPath: '/docs' + preLoaderRoute: typeof AppDocsRouteRouteImport + parentRoute: typeof AppRouteRoute + } '/_app/blocks': { id: '/_app/blocks' path: '/blocks' @@ -352,24 +389,24 @@ declare module '@tanstack/react-router' { } '/_app/docs/{$}.md': { id: '/_app/docs/{$}.md' - path: '/docs/{$}.md' + path: '/{$}.md' fullPath: '/docs/{$}.md' preLoaderRoute: typeof AppDocsChar123Char125DotmdRouteImport - parentRoute: typeof AppRouteRoute + parentRoute: typeof AppDocsRouteRoute } '/_app/docs/components': { id: '/_app/docs/components' - path: '/docs/components' + path: '/components' fullPath: '/docs/components' preLoaderRoute: typeof AppDocsComponentsRouteImport - parentRoute: typeof AppRouteRoute + parentRoute: typeof AppDocsRouteRoute } '/_app/docs/$': { id: '/_app/docs/$' - path: '/docs/$' + path: '/$' fullPath: '/docs/$' preLoaderRoute: typeof AppDocsSplatRouteImport - parentRoute: typeof AppRouteRoute + parentRoute: typeof AppDocsRouteRoute } '/_app/blocks/{-$category}': { id: '/_app/blocks/{-$category}' @@ -393,6 +430,22 @@ const AppBlocksRouteRouteWithChildren = AppBlocksRouteRoute._addFileChildren( AppBlocksRouteRouteChildren, ) +interface AppDocsRouteRouteChildren { + AppDocsSplatRoute: typeof AppDocsSplatRoute + AppDocsComponentsRoute: typeof AppDocsComponentsRoute + AppDocsChar123Char125DotmdRoute: typeof AppDocsChar123Char125DotmdRoute +} + +const AppDocsRouteRouteChildren: AppDocsRouteRouteChildren = { + AppDocsSplatRoute: AppDocsSplatRoute, + AppDocsComponentsRoute: AppDocsComponentsRoute, + AppDocsChar123Char125DotmdRoute: AppDocsChar123Char125DotmdRoute, +} + +const AppDocsRouteRouteWithChildren = AppDocsRouteRoute._addFileChildren( + AppDocsRouteRouteChildren, +) + interface AppStylesRouteRouteChildren { AppStylesCommunityRoute: typeof AppStylesCommunityRoute AppStylesMyStylesRoute: typeof AppStylesMyStylesRoute @@ -411,18 +464,18 @@ const AppStylesRouteRouteWithChildren = AppStylesRouteRoute._addFileChildren( interface AppRouteRouteChildren { AppBlocksRouteRoute: typeof AppBlocksRouteRouteWithChildren + AppDocsRouteRoute: typeof AppDocsRouteRouteWithChildren AppStylesRouteRoute: typeof AppStylesRouteRouteWithChildren - AppDocsSplatRoute: typeof AppDocsSplatRoute - AppDocsComponentsRoute: typeof AppDocsComponentsRoute - AppDocsChar123Char125DotmdRoute: typeof AppDocsChar123Char125DotmdRoute + AppCreateRoute: typeof AppCreateRoute + AppIndexRoute: typeof AppIndexRoute } const AppRouteRouteChildren: AppRouteRouteChildren = { AppBlocksRouteRoute: AppBlocksRouteRouteWithChildren, + AppDocsRouteRoute: AppDocsRouteRouteWithChildren, AppStylesRouteRoute: AppStylesRouteRouteWithChildren, - AppDocsSplatRoute: AppDocsSplatRoute, - AppDocsComponentsRoute: AppDocsComponentsRoute, - AppDocsChar123Char125DotmdRoute: AppDocsChar123Char125DotmdRoute, + AppCreateRoute: AppCreateRoute, + AppIndexRoute: AppIndexRoute, } const AppRouteRouteWithChildren = AppRouteRoute._addFileChildren( @@ -430,7 +483,6 @@ const AppRouteRouteWithChildren = AppRouteRoute._addFileChildren( ) const rootRouteChildren: RootRouteChildren = { - IndexRoute: IndexRoute, AppRouteRoute: AppRouteRouteWithChildren, LoginRoute: LoginRoute, OgRoute: OgRoute, diff --git a/www/src/routes/_app/create.tsx b/www/src/routes/_app/create.tsx new file mode 100644 index 000000000..74d2fde65 --- /dev/null +++ b/www/src/routes/_app/create.tsx @@ -0,0 +1,20 @@ +import { createFileRoute } from "@tanstack/react-router"; + +import { CustomizerPanel } from "@/modules/create/customizer-panel"; + +export const Route = createFileRoute("/_app/create")({ + component: CreatePage, +}); + +function CreatePage() { + return ( +
+ +