Skip to content

Commit

Permalink
docs: cleanup and updated toaster docs #skip_publish
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaaakher
zaaakher committed Jan 31, 2024
1 parent b3ecc03 commit 5b21d39
Show file tree
Hide file tree
Showing 13 changed files with 818 additions and 832 deletions.
2 changes: 0 additions & 2 deletions apps/docs/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,8 @@ import Image from "next/image";
import Link from "next/link";

import { CodeBlock, Button } from "@sikka/hawa/elements";
import { useToast } from "@sikka/hawa/hooks";

export default function IndexPage() {
const { toast } = useToast();
return (
<div className="container relative">
<PageHeader>
Expand Down
167 changes: 98 additions & 69 deletions apps/docs/components/component-preview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,28 @@
"use client"
"use client";

import * as React from "react"
import { Index } from "@/__registry__"
import * as React from "react";

import { cn } from "@/lib/utils"
import { useConfig } from "@/hooks/use-config"
import { CopyButton, CopyWithClassNames } from "@/components/copy-button"
import { Icons } from "@/components/icons"
import { StyleSwitcher } from "@/components/style-switcher"
import { ThemeWrapper } from "@/components/theme-wrapper"
import { Index } from "@/__registry__";
import { CopyButton, CopyWithClassNames } from "@/components/copy-button";
import { Icons } from "@/components/icons";
import { StyleSwitcher } from "@/components/style-switcher";
import { ThemeWrapper } from "@/components/theme-wrapper";
import { useConfig } from "@/hooks/use-config";
import { cn } from "@/lib/utils";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/registry/new-york/ui/tabs"
import { styles } from "@/registry/styles"
TabsTrigger
} from "@/registry/new-york/ui/tabs";
import { styles } from "@/registry/styles";

interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
name: string
extractClassname?: boolean
extractedClassNames?: string
align?: "center" | "start" | "end"
name: string;
extractClassname?: boolean;
extractedClassNames?: string;
align?: "center" | "start" | "end";
previewOnly?: boolean;
}

export function ComponentPreview({
Expand All @@ -33,89 +34,62 @@ export function ComponentPreview({
align = "center",
...props
}: ComponentPreviewProps) {
const [config] = useConfig()
const index = styles.findIndex((style) => style.name === config.style)
const [config] = useConfig();
const index = styles.findIndex((style) => style.name === config.style);

const Codes = React.Children.toArray(children) as React.ReactElement[]
const Code = Codes[index]
const Codes = React.Children.toArray(children) as React.ReactElement[];
const Code = Codes[index];

const Preview = React.useMemo(() => {
const Component = Index[config.style][name]?.component
const Component = Index[config.style][name]?.component;

if (!Component) {
return (
<p className="text-sm text-muted-foreground">
<p className="text-muted-foreground text-sm">
Component{" "}
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
<code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
{name}
</code>{" "}
not found in registry.
</p>
)
);
}

return <Component />
}, [name, config.style])
return <Component />;
}, [name, config.style]);

const codeString = React.useMemo(() => {
if (
typeof Code?.props["data-rehype-pretty-code-fragment"] !== "undefined"
) {
const [, Button] = React.Children.toArray(
Code.props.children
) as React.ReactElement[]
return Button?.props?.value || Button?.props?.__rawString__ || null
) as React.ReactElement[];
return Button?.props?.value || Button?.props?.__rawString__ || null;
}
}, [Code])
}, [Code]);

return (
<div
className={cn("group relative my-4 flex flex-col space-y-2", className)}
{...props}
>
<Tabs defaultValue="preview" className="relative mr-auto w-full">
<div className="flex items-center justify-between pb-3">
<TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
<TabsTrigger
value="preview"
className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
>
Preview
</TabsTrigger>
<TabsTrigger
value="code"
className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
>
Code
</TabsTrigger>
</TabsList>
</div>
<TabsContent value="preview" className="relative rounded-md border">
<div className="flex items-center justify-between p-4">
{/* <StyleSwitcher /> */}
{extractedClassNames ? (
<CopyWithClassNames
value={codeString}
classNames={extractedClassNames}
/>
) : (
codeString && <CopyButton value={codeString} />
)}
</div>
{props.previewOnly ? (
<div className="relative rounded-md border">
<ThemeWrapper defaultTheme="zinc">
<div
className={cn(
"preview flex min-h-[350px] w-full justify-center p-10",
{
"items-center": align === "center",
"items-start": align === "start",
"items-end": align === "end",
"items-end": align === "end"
}
)}
>
<React.Suspense
fallback={
<div className="flex items-center text-sm text-muted-foreground">
<div className="text-muted-foreground flex items-center text-sm">
<Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
Loading...
</div>
Expand All @@ -125,15 +99,70 @@ export function ComponentPreview({
</React.Suspense>
</div>
</ThemeWrapper>
</TabsContent>
<TabsContent value="code">
<div className="flex flex-col space-y-4">
<div className="w-full rounded-md [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
{Code}
</div>
</div>
) : (
<Tabs defaultValue="preview" className="relative mr-auto w-full">
<div className="flex items-center justify-between pb-3">
<TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
<TabsTrigger
value="preview"
className="text-muted-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold shadow-none transition-none data-[state=active]:shadow-none"
>
Preview
</TabsTrigger>
<TabsTrigger
value="code"
className="text-muted-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold shadow-none transition-none data-[state=active]:shadow-none"
>
Code
</TabsTrigger>
</TabsList>
</div>
</TabsContent>
</Tabs>
<TabsContent value="preview" className="relative rounded-md border">
<div className="flex items-center justify-between p-4">
{/* <StyleSwitcher /> */}
{extractedClassNames ? (
<CopyWithClassNames
value={codeString}
classNames={extractedClassNames}
/>
) : (
codeString && <CopyButton value={codeString} />
)}
</div>
<ThemeWrapper defaultTheme="zinc">
<div
className={cn(
"preview flex min-h-[350px] w-full justify-center p-10",
{
"items-center": align === "center",
"items-start": align === "start",
"items-end": align === "end"
}
)}
>
<React.Suspense
fallback={
<div className="text-muted-foreground flex items-center text-sm">
<Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
Loading...
</div>
}
>
{Preview}
</React.Suspense>
</div>
</ThemeWrapper>
</TabsContent>
<TabsContent value="code">
<div className="flex flex-col space-y-4">
<div className="w-full rounded-md [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
{Code}
</div>
</div>
</TabsContent>
</Tabs>
)}
</div>
)
);
}
1 change: 1 addition & 0 deletions apps/docs/components/mdx-components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,3 +306,4 @@ export function Mdx({ code }: MdxProps) {
</div>
);
}

4 changes: 2 additions & 2 deletions apps/docs/config/docs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,8 +236,8 @@ export const docsConfig: DocsConfig = {
// items: []
// },
{
title: "Toast",
href: "/docs/elements/toast",
title: "Toaster",
href: "/docs/elements/toaster",
items: []
}
// {
Expand Down
Loading

0 comments on commit 5b21d39

Please sign in to comment.