diff --git a/app/docs/[slug]/page.tsx b/app/docs/[slug]/page.tsx index da1663a..fbd0f7a 100644 --- a/app/docs/[slug]/page.tsx +++ b/app/docs/[slug]/page.tsx @@ -1,10 +1,6 @@ -import { format, parseISO } from 'date-fns' import { allDocs } from 'contentlayer/generated' -import { getMDXComponent } from 'next-contentlayer/hooks' import { Breadcrumbs } from '@/components/breadcrumbs' -import { Demo } from '@/components/demo' -import { HoverGridCode } from '@/app/gluons/hover-grid/_demo/hover-grid-code' -import { HoverGridPreview } from '@/app/gluons/hover-grid/_demo/hover-grid-preview' +import { Mdx } from '@/components/mdx-components' interface DocPageProps { params: { @@ -39,28 +35,18 @@ const DocPage = ({ if (!doc) throw new Error(`doc not found for slug: ${params.slug}`) - const Content = getMDXComponent(doc.body.code) - - if (!doc) throw new Error(`doc not found for slug: ${params.slug}`) - - const previewCodeTitle = doc.title.toLowerCase().replace(/\s/g, '-') - return (
-

{doc.title}

-

{doc.description}

+

+ {doc.title} +

+

+ {doc.description} +

+
- - -
) } diff --git a/app/gluons/carousel/_demo/carousel-preview.tsx b/app/gluons/carousel/_demo/carousel-preview.tsx deleted file mode 100644 index 8ce9e2c..0000000 --- a/app/gluons/carousel/_demo/carousel-preview.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { Carousel } from "@/components/gluons/carousel" - -export const CarouselPreview = () => { - return ( - - ) -}; \ No newline at end of file diff --git a/app/gluons/carousel/page.tsx b/app/gluons/carousel/page.tsx deleted file mode 100644 index 6363220..0000000 --- a/app/gluons/carousel/page.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Breadcrumbs } from "@/components/breadcrumbs"; -import { Demo } from "@/components/demo"; -import { ContentAccordion } from "@/components/gluons/content-accordion"; -import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, - BreadcrumbSeparator -} from "@/components/ui/breadcrumb"; -import { - Tabs, - TabsContent, - TabsList, - TabsTrigger -} from "@/components/ui/tabs"; -import { CarouselPreview } from "./_demo/carousel-preview"; -import { CarouselCode } from "./_demo/carousel-code"; - -const CarouselPage = () => { - return ( -
-
- -

Carousel

-
- - - -
- ) -} - -export default CarouselPage; \ No newline at end of file diff --git a/app/gluons/content-accordion/_demo/content-accordion-preview.tsx b/app/gluons/content-accordion/_demo/content-accordion-preview.tsx deleted file mode 100644 index ad563ef..0000000 --- a/app/gluons/content-accordion/_demo/content-accordion-preview.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { ContentAccordion } from "@/components/gluons/content-accordion" - -export const ContentAccordionPreview = () => { - return ( - - ) -}; \ No newline at end of file diff --git a/app/gluons/content-accordion/page.tsx b/app/gluons/content-accordion/page.tsx deleted file mode 100644 index 2cfe3cf..0000000 --- a/app/gluons/content-accordion/page.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Breadcrumbs } from "@/components/breadcrumbs"; -import { Demo } from "@/components/demo"; -import { ContentAccordion } from "@/components/gluons/content-accordion"; -import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, - BreadcrumbSeparator -} from "@/components/ui/breadcrumb"; -import { - Tabs, - TabsContent, - TabsList, - TabsTrigger -} from "@/components/ui/tabs"; -import { Code } from "bright"; -import { ContentAccordionPreview } from "./_demo/content-accordion-preview"; -import { ContentAccordionCode } from "./_demo/content-accordion-code"; - -const ContentAccordionPage = () => { - return ( -
-
- -

HoverGrid

-
- - - -
- ) -} - -export default ContentAccordionPage; \ No newline at end of file diff --git a/app/gluons/hover-grid/_demo/hover-grid-code.tsx b/app/gluons/hover-grid/_demo/hover-grid-code.tsx deleted file mode 100644 index 66ddf44..0000000 --- a/app/gluons/hover-grid/_demo/hover-grid-code.tsx +++ /dev/null @@ -1,82 +0,0 @@ -export const HoverGridCode = ` -import { - HoverGrid, - HoverGridCell, - HoverGridContent, - HoverGridDescription, - HoverGridFooter, - HoverGridHeader, - HoverGridLeader, - HoverGridTitle -} from "@/components/hover-grid"; - -export const HoverGridDemo = () => { - return ( - - - - - Leader1 - - - - - Lorem ipsum. - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam. - - - Footer 1 - - - - - Leader1 - - - - - Lorem ipsum. - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam. - - - Footer 1 - - - - - Leader1 - - - - - Lorem ipsum. - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam. - - - Footer 1 - - - ) -} -`.trim(); \ No newline at end of file diff --git a/app/gluons/hover-grid/page.tsx b/app/gluons/hover-grid/page.tsx deleted file mode 100644 index 66c8c6c..0000000 --- a/app/gluons/hover-grid/page.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { - Tabs, - TabsContent, - TabsList, - TabsTrigger -} from "@/components/ui/tabs"; -import { Code } from "bright"; -import { HoverGridPreview } from "./_demo/hover-grid-preview"; -import { HoverGridCode } from "./_demo/hover-grid-code"; -import { Breadcrumbs } from "@/components/breadcrumbs"; -import { PreviewToolbar } from "@/components/preview-toolbar"; -import { Demo } from "@/components/demo"; - -Code.theme = "dark-plus" - -const HoverGridPage = () => { - return ( -
-
- -

HoverGrid

-
- - - -
- ) -} - -export default HoverGridPage; \ No newline at end of file diff --git a/app/gluons/layout.tsx b/app/gluons/layout.tsx deleted file mode 100644 index a34fb50..0000000 --- a/app/gluons/layout.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; -import "@/styles/globals.css"; -import { cn } from "@/lib/utils"; -import { ThemeProvider } from "@/components/providers/theme-provider"; -import { SiteHeader } from "@/components/site-header"; -import { Sidebar } from "@/components/sidebar"; -import { Container } from "@/components/container"; - -const inter = Inter({ subsets: ["latin"] }); - -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function BlocksLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( -
-
- - - {children} - -
-
- ); -} diff --git a/app/gluons/playground/page.tsx b/app/gluons/playground/page.tsx deleted file mode 100644 index 59460b2..0000000 --- a/app/gluons/playground/page.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Demo } from "@/components/demo"; -import { Button } from "@/components/ui/button"; -import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; -import { LayoutDashboard, Menu } from "lucide-react"; -import Image from "next/image"; - -const PlaygroundPage = () => { - return ( - <> - -
-
-
- - - - - - - Glui - Component library built on shadcn/ui - -
Docs
-
Docs
-
Docs
-
Docs
- - - Logo -
-
-
-
-
-
- - Dashboard -
-
- - Dashboard -
-
- - Dashboard -
-
-
-
-
-
-
-
-
-
-
-
- - - ) -} - -export default PlaygroundPage; \ No newline at end of file diff --git a/components/demo-code.tsx b/components/demo-code.tsx index bafb0b5..f311ec7 100644 --- a/components/demo-code.tsx +++ b/components/demo-code.tsx @@ -1,3 +1,5 @@ +"use server" + import { Code, BrightProps} from "bright"; interface DemoCodeProps { diff --git a/components/demo.tsx b/components/gluon-demo.tsx similarity index 56% rename from components/demo.tsx rename to components/gluon-demo.tsx index 948fa6e..da69ca6 100644 --- a/components/demo.tsx +++ b/components/gluon-demo.tsx @@ -1,30 +1,44 @@ +"use client" + +import { Index } from "@/gluons/demo" + import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { DemoCode } from "./demo-code"; -import { DemoPreview } from "./demo-preview"; import { PreviewToolbar } from "./preview-toolbar"; +import { DemoPreview } from "./demo-preview"; +import React from "react"; +import { DemoCode } from "./demo-code"; -interface DemoProps { - title: string, - lang: string, - lineNumbers: boolean, - className: string, - code: string, - children: React.ReactNode +interface GluonDemoProps { + name: string, } -export const Demo = ({ - title, - lang, - lineNumbers, - className, - code, - children, -}: DemoProps) => { +export const GluonDemo = ({ + name +}: GluonDemoProps) => { + + const Preview = React.useMemo(() => { + const Component = Index[name].component + + if (!Component) { + return ( +

+ Component{" "} + + {name} + {" "} + not found. +

+ ) + } + + return + }, [name]) + return (
@@ -37,19 +51,18 @@ export const Demo = ({
- {children} + {Preview} ) -} \ No newline at end of file +} diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx new file mode 100644 index 0000000..8a193d8 --- /dev/null +++ b/components/mdx-components.tsx @@ -0,0 +1,21 @@ +import { GluonDemo } from "@/components/gluon-demo"; +import { useMDXComponent } from "next-contentlayer/hooks"; + +const components = { + GluonDemo, +} + +interface MdxProps { + code: string, +} + +export const Mdx = ({ + code, +}: MdxProps) => { + const Component = useMDXComponent(code) + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/content/carousel.mdx b/content/carousel.mdx new file mode 100644 index 0000000..55f3948 --- /dev/null +++ b/content/carousel.mdx @@ -0,0 +1,7 @@ +--- +title: Carousel +description: An interactive feature slider. +component: true +--- + + \ No newline at end of file diff --git a/content/content-accordion.mdx b/content/content-accordion.mdx new file mode 100644 index 0000000..41ea5ee --- /dev/null +++ b/content/content-accordion.mdx @@ -0,0 +1,7 @@ +--- +title: Content Accordion +description: An accordion to display large-format content. +component: true +--- + + \ No newline at end of file diff --git a/content/doc-01.mdx b/content/doc-01.mdx deleted file mode 100644 index 0dc94de..0000000 --- a/content/doc-01.mdx +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Doc 01 Test -description: Test doc description. -component: true ---- \ No newline at end of file diff --git a/content/header.mdx b/content/header.mdx new file mode 100644 index 0000000..8a1336a --- /dev/null +++ b/content/header.mdx @@ -0,0 +1,7 @@ +--- +title: Header +description: A versatile and responsive header. +component: true +--- + + \ No newline at end of file diff --git a/content/hover-grid.mdx b/content/hover-grid.mdx index c898265..6e9ba96 100644 --- a/content/hover-grid.mdx +++ b/content/hover-grid.mdx @@ -4,4 +4,4 @@ description: A grid comprised of hoverable cells. component: true --- -## Preview \ No newline at end of file + \ No newline at end of file diff --git a/content/sidebar.mdx b/content/sidebar.mdx new file mode 100644 index 0000000..d547bdf --- /dev/null +++ b/content/sidebar.mdx @@ -0,0 +1,7 @@ +--- +title: Sidebar +description: A collapsible sidebar. +component: true +--- + + \ No newline at end of file diff --git a/components/gluons/carousel.tsx b/gluons/carousel.tsx similarity index 100% rename from components/gluons/carousel.tsx rename to gluons/carousel.tsx diff --git a/components/gluons/content-accordion.tsx b/gluons/content-accordion.tsx similarity index 100% rename from components/gluons/content-accordion.tsx rename to gluons/content-accordion.tsx diff --git a/app/gluons/carousel/_demo/carousel-code.tsx b/gluons/demo/carousel-demo.tsx similarity index 94% rename from app/gluons/carousel/_demo/carousel-code.tsx rename to gluons/demo/carousel-demo.tsx index b5aa68a..4778f37 100644 --- a/app/gluons/carousel/_demo/carousel-code.tsx +++ b/gluons/demo/carousel-demo.tsx @@ -1,4 +1,3 @@ -export const CarouselCode = ` "use client" import React, { useEffect, useState } from "react" @@ -46,8 +45,8 @@ const CarouselSlide = ({
{\`Feature @@ -57,7 +56,7 @@ const CarouselSlide = ({ ) } -export const Carousel = () => { +export const CarouselDemo = () => { const [activeFeature, setActiveFeature] = useDebounceValue(1, 50) const [scrollProgress, setScrollProgress] = useState(0) @@ -119,7 +118,7 @@ export const Carousel = () => { ))} @@ -129,7 +128,7 @@ export const Carousel = () => { >
{Array.from({ length: 3 }).map((_, i) => (
{
) -}`.trim(); \ No newline at end of file +} + +export default CarouselDemo; \ No newline at end of file diff --git a/app/gluons/content-accordion/_demo/content-accordion-code.tsx b/gluons/demo/content-accordion-demo.tsx similarity index 98% rename from app/gluons/content-accordion/_demo/content-accordion-code.tsx rename to gluons/demo/content-accordion-demo.tsx index 04e647f..155803c 100644 --- a/app/gluons/content-accordion/_demo/content-accordion-code.tsx +++ b/gluons/demo/content-accordion-demo.tsx @@ -1,4 +1,3 @@ -export const ContentAccordionCode = ` "use client" import { useState } from "react"; @@ -11,7 +10,7 @@ import { AccordionTrigger } from "@/components/ui/accordion"; -export const ContentAccordion = () => { +const ContentAccordionDemo = () => { const [active, setActive] = useState(1); return ( @@ -123,4 +122,6 @@ export const ContentAccordion = () => {
) -}`.trim(); \ No newline at end of file +} + +export default ContentAccordionDemo; \ No newline at end of file diff --git a/app/gluons/header/page.tsx b/gluons/demo/header-demo.tsx similarity index 76% rename from app/gluons/header/page.tsx rename to gluons/demo/header-demo.tsx index 4775cd2..d4f8eb8 100644 --- a/app/gluons/header/page.tsx +++ b/gluons/demo/header-demo.tsx @@ -1,18 +1,15 @@ -import { Demo } from "@/components/demo"; -import { Header, HeaderCenter, HeaderContainer, HeaderLeft, HeaderMobileMenuTrigger, HeaderRight } from "@/components/gluons/header"; -import { Button } from "@/components/ui/button"; -import { AlignLeft } from "lucide-react"; +import { + Header, + HeaderCenter, + HeaderContainer, + HeaderLeft, + HeaderMobileMenuTrigger, + HeaderRight +} from "@/gluons/header"; -const HeaderPage = async () => { - +const HeaderDemo = () => { return ( - + <>
@@ -44,8 +41,8 @@ const HeaderPage = async () => {
- + ) } -export default HeaderPage; \ No newline at end of file +export default HeaderDemo; \ No newline at end of file diff --git a/app/gluons/hover-grid/_demo/hover-grid-preview.tsx b/gluons/demo/hover-grid-demo.tsx similarity index 97% rename from app/gluons/hover-grid/_demo/hover-grid-preview.tsx rename to gluons/demo/hover-grid-demo.tsx index f0fa8a9..fa1297e 100644 --- a/app/gluons/hover-grid/_demo/hover-grid-preview.tsx +++ b/gluons/demo/hover-grid-demo.tsx @@ -9,10 +9,10 @@ import { HoverGridHeader, HoverGridLeader, HoverGridTitle -} from "@/components/gluons/hover-grid"; +} from "@/gluons/hover-grid"; import { ArrowUpRight } from "lucide-react"; -export const HoverGridPreview = () => { +export const HoverGridDemo = () => { return ( @@ -74,4 +74,6 @@ export const HoverGridPreview = () => { ) -} \ No newline at end of file +} + +export default HoverGridDemo; \ No newline at end of file diff --git a/gluons/demo/index.tsx b/gluons/demo/index.tsx new file mode 100644 index 0000000..d9a2e08 --- /dev/null +++ b/gluons/demo/index.tsx @@ -0,0 +1,24 @@ +import { lazy } from "react"; + +export const Index: Record = { + "carousel-demo": { + name: "carousel-demo", + component: lazy(() => import("@/gluons/demo/carousel-demo")), + }, + "content-accordion-demo": { + name: "content-accordion-demo", + component: lazy(() => import("@/gluons/demo/content-accordion-demo")), + }, + "header-demo": { + name: "header-demo", + component: lazy(() => import("@/gluons/demo/header-demo")), + }, + "hover-grid-demo": { + name: "hover-grid-demo", + component: lazy(() => import("@/gluons/demo/hover-grid-demo")), + }, + "sidebar-demo": { + name: "sidebar-demo", + component: lazy(() => import("@/gluons/demo/sidebar-demo")), + }, +} \ No newline at end of file diff --git a/gluons/demo/sidebar-demo.tsx b/gluons/demo/sidebar-demo.tsx new file mode 100644 index 0000000..eb6f584 --- /dev/null +++ b/gluons/demo/sidebar-demo.tsx @@ -0,0 +1,61 @@ +import { Demo } from "@/components/demo"; +import { Button } from "@/components/ui/button"; +import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; +import { LayoutDashboard, Menu } from "lucide-react"; +import Image from "next/image"; + +const SidebarDemo = () => { + return ( +
+
+
+ + + + + + + Glui + Component library built on shadcn/ui + +
Docs
+
Docs
+
Docs
+
Docs
+ + + Logo +
+
+
+
+
+
+ + Dashboard +
+
+ + Dashboard +
+
+ + Dashboard +
+
+
+
+
+
+
+
+
+
+
+
+ ) +} + +export default SidebarDemo; \ No newline at end of file diff --git a/components/gluons/header.tsx b/gluons/header.tsx similarity index 98% rename from components/gluons/header.tsx rename to gluons/header.tsx index fa24692..5d2c926 100644 --- a/components/gluons/header.tsx +++ b/gluons/header.tsx @@ -3,7 +3,7 @@ import React from "react"; import { cn } from "@/lib/utils"; import { Head } from "react-day-picker"; -import { Button } from "../ui/button"; +import { Button } from "../components/ui/button"; import { AlignLeft } from "lucide-react"; import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" diff --git a/components/gluons/hover-grid.tsx b/gluons/hover-grid.tsx similarity index 98% rename from components/gluons/hover-grid.tsx rename to gluons/hover-grid.tsx index 725f54f..c6f9076 100644 --- a/components/gluons/hover-grid.tsx +++ b/gluons/hover-grid.tsx @@ -1,5 +1,4 @@ import { cn } from "@/lib/utils"; -import { ArrowUpRight } from "lucide-react" import React from "react"; const HoverGrid = React.forwardRef< diff --git a/components/gluons/sidebar.tsx b/gluons/sidebar.tsx similarity index 97% rename from components/gluons/sidebar.tsx rename to gluons/sidebar.tsx index 72aae0b..3c15480 100644 --- a/components/gluons/sidebar.tsx +++ b/gluons/sidebar.tsx @@ -1,8 +1,8 @@ "use client" import Link from "next/link" -import { Button } from "../ui/button" -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip" +import { Button } from "../components/ui/button" +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip" import { cn } from "@/lib/utils" import { LayoutDashboard } from "lucide-react" import React from "react" diff --git a/package.json b/package.json index 7812fdf..4fc2112 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "component-library", + "name": "glui", "version": "0.1.0", "private": true, "scripts": { diff --git a/stories/hover-grid.stories.tsx b/stories/hover-grid.stories.tsx index 0a80f23..49c93fc 100644 --- a/stories/hover-grid.stories.tsx +++ b/stories/hover-grid.stories.tsx @@ -9,7 +9,7 @@ import { HoverGridTitle, HoverGridDescription, HoverGridFooter, -} from "@/components/gluons/hover-grid" +} from "@/gluons/hover-grid" import { ArrowUpRight } from "lucide-react" /** diff --git a/utils/get-demo-preview-id.tsx b/utils/get-demo-preview-id.tsx deleted file mode 100644 index db2c113..0000000 --- a/utils/get-demo-preview-id.tsx +++ /dev/null @@ -1,10 +0,0 @@ -"use client" - -let demoContainer: HTMLElement | null = null; - -if (typeof document !== 'undefined') { - demoContainer = document.getElementById("demoPreviewContainer"); - console.log(demoContainer, "demoContainer"); -} - -export const demoPreviewId = demoContainer; \ No newline at end of file