p-sw/pswui-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: apply fixes & formatting from biomejs

Browse Source
This commit is contained in:
p-sw 2024-06-29 20:53:19 +09:00
parent f8562bf2bc
commit 417deb4aa6
77 changed files with 2327 additions and 2148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/site.webmanifest
View File

@ -1 +1,19 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} {
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

546
src/App.tsx
View File

@ -1,256 +1,290 @@
import { import { Code } from "@/components/LoadedCode";
Route, import {
createBrowserRouter, Route,
createRoutesFromElements, RouterProvider,
RouterProvider, createBrowserRouter,
redirect, createRoutesFromElements,
} from "react-router-dom"; redirect,
import MainLayout from "./MainLayout"; } from "react-router-dom";
import Home from "./Home"; import DocsLayout from "./DocsLayout";
import DocsLayout from "./DocsLayout"; import DynamicLayout from "./DynamicLayout";
import ErrorBoundary from "./ErrorHandler"; import ErrorBoundary from "./ErrorHandler";
import DynamicLayout from "./DynamicLayout"; import Home from "./Home";
import { Code } from "@/components/LoadedCode"; import MainLayout from "./MainLayout";
import DocsIntroduction, { import DocsConfiguration, {
tableOfContents as docsIntroductionToc, tableOfContents as docsConfigurationToc,
} from "./docs/introduction.mdx"; } from "./docs/configuration.mdx";
import DocsInstallation, { import DocsInstallation, {
tableOfContents as docsInstallationToc, tableOfContents as docsInstallationToc,
} from "./docs/installation.mdx"; } from "./docs/installation.mdx";
import DocsConfiguration, { import DocsIntroduction, {
tableOfContents as docsConfigurationToc, tableOfContents as docsIntroductionToc,
} from "./docs/configuration.mdx"; } from "./docs/introduction.mdx";
import { HeadingContext } from "./HeadingContext"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
import React, { import React, {
ForwardedRef, type ForwardedRef,
forwardRef, forwardRef,
useContext, useContext,
useEffect, useEffect,
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { HeadingContext } from "./HeadingContext";
function buildThresholdList() { function buildThresholdList() {
const thresholds: number[] = []; const thresholds: number[] = [];
const numSteps = 20; const numSteps = 20;
for (let i = 1.0; i <= numSteps; i++) { for (let i = 1.0; i <= numSteps; i++) {
const ratio = i / numSteps; const ratio = i / numSteps;
thresholds.push(ratio); thresholds.push(ratio);
} }
thresholds.push(0); thresholds.push(0);
return thresholds; return thresholds;
} }
function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) { type HashedHeaderProps = React.ComponentPropsWithoutRef<"h1">;
return (prop: any, ref: ForwardedRef<HTMLHeadingElement>) => {
const internalRef = useRef<HTMLHeadingElement | null>(null); function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
const [_, setActiveHeadings] = useContext(HeadingContext); return (prop: HashedHeaderProps, ref: ForwardedRef<HTMLHeadingElement>) => {
const internalRef = useRef<HTMLHeadingElement | null>(null);
const { children, ...restProp } = prop; const [_, setActiveHeadings] = useContext(HeadingContext);
useEffect(() => { const { children, ...restProp } = prop;
const observer = new IntersectionObserver(
([{ target, intersectionRatio }]) => { useEffect(() => {
if (intersectionRatio > 0.5) { const observer = new IntersectionObserver(
setActiveHeadings((prev) => [...prev, target.id]); ([{ target, intersectionRatio }]) => {
} else { if (intersectionRatio > 0.5) {
setActiveHeadings((prev) => prev.filter((id) => id !== target.id)); setActiveHeadings((prev) => [...prev, target.id]);
} } else {
}, setActiveHeadings((prev) => prev.filter((id) => id !== target.id));
{ }
root: null, },
rootMargin: "0px", {
threshold: buildThresholdList(), root: null,
}, rootMargin: "0px",
); threshold: buildThresholdList(),
if (internalRef.current) { },
observer.observe(internalRef.current); );
} if (internalRef.current) {
return () => { observer.observe(internalRef.current);
observer.disconnect(); }
}; return () => {
}, [internalRef.current]); observer.disconnect();
};
const [status, setStatus] = useState<"normal" | "error" | "success">( }, [setActiveHeadings]);
"normal",
); const [status, setStatus] = useState<"normal" | "error" | "success">(
const messages = { "normal",
normal: "Click to copy link", );
success: "Copied link!", const messages = {
error: "Failed to copy..", normal: "Click to copy link",
}; success: "Copied link!",
error: "Failed to copy..",
useEffect(() => { };
if (status !== "normal") {
const timeout = setTimeout(() => { useEffect(() => {
setStatus("normal"); if (status !== "normal") {
}, 3000); const timeout = setTimeout(() => {
return () => { setStatus("normal");
clearTimeout(timeout); }, 3000);
}; return () => {
} clearTimeout(timeout);
}, [status]); };
}
return ( }, [status]);
<Tooltip asChild position={"right"}>
<Level return (
ref={(el) => { <Tooltip
internalRef.current = el; asChild
if (typeof ref === "function") { position={"right"}
ref(el); >
} else if (el && ref) { <Level
ref.current = el; ref={(el) => {
} internalRef.current = el;
}} if (typeof ref === "function") {
className={`${prop.className} cursor-pointer select-none`} ref(el);
onClick={async (e) => { } else if (el && ref) {
try { ref.current = el;
await navigator.clipboard.writeText( }
window.location.href.split("#")[0] + "#" + e.currentTarget.id, }}
); className={`${prop.className} cursor-pointer select-none`}
setStatus("success"); onClick={async (e) => {
} catch (e) { try {
setStatus("error"); await navigator.clipboard.writeText(
} `${window.location.href.split("#")[0]}#${e.currentTarget.id}`,
}} );
{...restProp} setStatus("success");
> } catch (e) {
{children} setStatus("error");
<TooltipContent status={status} offset={"lg"} delay={"early"}> }
<p className={"text-base font-normal whitespace-nowrap not-prose"}> }}
{messages[status]} {...restProp}
</p> >
</TooltipContent> {children}
</Level> <TooltipContent
</Tooltip> status={status}
); offset={"lg"}
}; delay={"early"}
} >
<p className={"text-base font-normal whitespace-nowrap not-prose"}>
const overrideComponents = { {messages[status]}
pre: (props: any) => { </p>
const { </TooltipContent>
props: { children, className }, </Level>
} = React.cloneElement(React.Children.only(props.children)); </Tooltip>
);
const language = };
(!className || !className.includes("language-") }
? "typescript"
: /language-([a-z]+)/.exec(className)![1]) ?? "typescript"; const overrideComponents = {
pre: (props: React.ComponentPropsWithoutRef<"pre">) => {
return <Code language={language}>{children as string}</Code>; if (!React.isValidElement(props.children)) {
}, return null;
code: forwardRef<HTMLElement, any>((props: any, ref) => ( }
<code
ref={ref} const { props: clonedProps } = React.cloneElement(
{...props} React.Children.only(props.children),
className={`${props.className} rounded-md bg-neutral-800 text-orange-500 font-light p-1 before:content-none after:content-none`} );
/>
)), const { children, className } = clonedProps as {
table: forwardRef<HTMLTableElement, any>((props: any, ref) => ( children: React.ReactNode;
<div className="overflow-auto"> className?: string;
<table ref={ref} {...props} className={`${props.className}`} /> };
</div>
)), let language = "typescript";
h1: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h1")),
h2: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h2")), if (className) {
h3: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h3")), const detectedLanguage = /language-([a-z]+)/.exec(className);
h4: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h4")), if (detectedLanguage) language = detectedLanguage[1];
h5: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h5")), }
h6: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h6")),
}; return <Code language={language}>{children as string}</Code>;
},
const docsModules = import.meta.glob("./docs/components/*.mdx"); code: forwardRef<HTMLElement, { className?: string }>((props, ref) => (
<code
const routes = Object.keys(docsModules).map((path) => { ref={ref}
const sfPath = path.split("/").pop()?.replace(".mdx", ""); {...props}
className={`${props.className} rounded-md bg-neutral-800 text-orange-500 font-light p-1 before:content-none after:content-none`}
return ( />
<Route )),
key={path} table: forwardRef<HTMLTableElement, { className?: string }>((props, ref) => (
path={sfPath} <div className="overflow-auto">
lazy={async () => { <table
const { default: C, tableOfContents } = await import( ref={ref}
`./docs/components/${sfPath}.mdx` {...props}
); className={`${props.className}`}
return { />
Component: () => ( </div>
<DynamicLayout toc={tableOfContents}> )),
<C components={overrideComponents} /> h1: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h1")),
</DynamicLayout> h2: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h2")),
), h3: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h3")),
}; h4: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h4")),
}} h5: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h5")),
/> h6: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h6")),
); };
});
const docsModules = import.meta.glob("./docs/components/*.mdx");
const REDIRECTED_404 = /^\?(\/([a-zA-Z0-9\-_]+\/?)+)(&.*)*$/;
const routes = Object.keys(docsModules).map((path) => {
const router = createBrowserRouter( const sfPath = path.split("/").pop()?.replace(".mdx", "");
createRoutesFromElements(
<Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}> return (
<Route <Route
index key={path}
loader={() => path={sfPath}
REDIRECTED_404.test(window.location.search) lazy={async () => {
? redirect(REDIRECTED_404.exec(window.location.search)?.[1] ?? "/") const { default: C, tableOfContents } = await import(
: true `./docs/components/${sfPath}.mdx`
} );
element={<Home />} return {
/> Component: () => (
<Route path="docs" element={<DocsLayout />}> <DynamicLayout toc={tableOfContents}>
<Route index loader={() => redirect("/docs/introduction")} /> <C components={overrideComponents} />
<Route </DynamicLayout>
path="introduction" ),
element={ };
<DynamicLayout toc={docsIntroductionToc}> }}
<DocsIntroduction components={overrideComponents} /> />
</DynamicLayout> );
} });
/>
<Route const REDIRECTED_404 = /^\?(\/([a-zA-Z0-9\-_]+\/?)+)(&.*)*$/;
path="installation"
element={ const router = createBrowserRouter(
<DynamicLayout toc={docsInstallationToc}> createRoutesFromElements(
<DocsInstallation components={overrideComponents} /> <Route
</DynamicLayout> path="/"
} element={<MainLayout />}
/> errorElement={<ErrorBoundary />}
<Route >
path="configuration" <Route
element={ index
<DynamicLayout toc={docsConfigurationToc}> loader={() =>
<DocsConfiguration components={overrideComponents} /> REDIRECTED_404.test(window.location.search)
</DynamicLayout> ? redirect(REDIRECTED_404.exec(window.location.search)?.[1] ?? "/")
} : true
/> }
<Route path="components"> element={<Home />}
<Route />
index <Route
loader={() => path="docs"
redirect( element={<DocsLayout />}
`/docs/components/${Object.keys(docsModules)[0] >
.split("/") <Route
.pop() index
?.replace(".mdx", "")}`, loader={() => redirect("/docs/introduction")}
) />
} <Route
/> path="introduction"
{routes} element={
</Route> <DynamicLayout toc={docsIntroductionToc}>
</Route> <DocsIntroduction components={overrideComponents} />
</Route>, </DynamicLayout>
), }
); />
<Route
function App() { path="installation"
return <RouterProvider router={router} />; element={
} <DynamicLayout toc={docsInstallationToc}>
<DocsInstallation components={overrideComponents} />
export default App; </DynamicLayout>
}
/>
<Route
path="configuration"
element={
<DynamicLayout toc={docsConfigurationToc}>
<DocsConfiguration components={overrideComponents} />
</DynamicLayout>
}
/>
<Route path="components">
<Route
index
loader={() =>
redirect(
`/docs/components/${Object.keys(docsModules)[0]
.split("/")
.pop()
?.replace(".mdx", "")}`,
)
}
/>
{routes}
</Route>
</Route>
</Route>,
),
);
function App() {
return <RouterProvider router={router} />;
}
export default App;

86
src/DocsLayout.tsx
View File

@ -1,43 +1,43 @@
import { Link, useLocation } from "react-router-dom"; import { Link, useLocation } from "react-router-dom";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import RouteObject from "./RouteObject"; import RouteObject from "./RouteObject";
function SideNav() { function SideNav() {
const location = useLocation(); const location = useLocation();
return ( return (
<nav className="sticky top-16 overflow-auto max-h-[calc(100vh-4rem)] md:flex flex-col justify-start items-start gap-8 p-8 hidden"> <nav className="sticky top-16 overflow-auto max-h-[calc(100vh-4rem)] md:flex flex-col justify-start items-start gap-8 p-8 hidden">
{Object.entries(RouteObject.sideNav).map(([categoryName, links]) => { {Object.entries(RouteObject.sideNav).map(([categoryName, links]) => {
return ( return (
<section <section
className="flex flex-col gap-2 justify-center items-start" className="flex flex-col gap-2 justify-center items-start"
key={categoryName} key={categoryName}
> >
<span className="font-bold">{categoryName}</span> <span className="font-bold">{categoryName}</span>
{links.map((link) => ( {links.map((link) => (
<Link <Link
to={link.path} to={link.path}
key={link.path} key={link.path}
className="text-sm text-neutral-500 hover:text-neutral-700 data-[active=true]:text-current" className="text-sm text-neutral-500 hover:text-neutral-700 data-[active=true]:text-current"
data-active={link.eq(location.pathname)} data-active={link.eq(location.pathname)}
> >
{link.name} {link.name}
</Link> </Link>
))} ))}
</section> </section>
); );
})} })}
</nav> </nav>
); );
} }
function DocsLayout() { function DocsLayout() {
return ( return (
<div className="flex-grow grid grid-cols-1 md:grid-cols-[12rem_1fr] lg:grid-cols-[12rem_1fr_10rem] w-full max-w-5xl mx-auto"> <div className="flex-grow grid grid-cols-1 md:grid-cols-[12rem_1fr] lg:grid-cols-[12rem_1fr_10rem] w-full max-w-5xl mx-auto">
<SideNav /> <SideNav />
<Outlet /> <Outlet />
</div> </div>
); );
} }
export default DocsLayout; export default DocsLayout;

126
src/DynamicLayout.tsx
View File

@ -1,63 +1,63 @@
import { ReactNode, Fragment, useState, useContext } from "react"; import type { Toc } from "@stefanprobst/rehype-extract-toc";
import { type Toc } from "@stefanprobst/rehype-extract-toc"; import { Fragment, type ReactNode, useContext, useState } from "react";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { HeadingContext } from "./HeadingContext"; import { HeadingContext } from "./HeadingContext";
function RecursivelyToc({ toc }: { toc: Toc }) { function RecursivelyToc({ toc }: { toc: Toc }) {
const location = useLocation(); const location = useLocation();
const [activeHeadings] = useContext(HeadingContext); const [activeHeadings] = useContext(HeadingContext);
return ( return (
<ul> <ul>
{toc.map((tocEntry) => { {toc.map((tocEntry) => {
return ( return (
<Fragment key={tocEntry.id}> <Fragment key={tocEntry.id}>
<li <li
key={tocEntry.id} key={tocEntry.id}
data-id={tocEntry.id} data-id={tocEntry.id}
className="text-neutral-500 data-[active='true']:text-black dark:data-[active='true']:text-white text-sm font-medium" className="text-neutral-500 data-[active='true']:text-black dark:data-[active='true']:text-white text-sm font-medium"
style={{ paddingLeft: `${tocEntry.depth - 1}rem` }} style={{ paddingLeft: `${tocEntry.depth - 1}rem` }}
data-active={ data-active={
activeHeadings.includes(tocEntry.id ?? "") activeHeadings.includes(tocEntry.id ?? "")
? true ? true
: location.hash.length > 0 : location.hash.length > 0
? location.hash === `#${tocEntry.id}` ? location.hash === `#${tocEntry.id}`
: false : false
} }
> >
<a href={`#${tocEntry.id}`}>{tocEntry.value}</a> <a href={`#${tocEntry.id}`}>{tocEntry.value}</a>
</li> </li>
{Array.isArray(tocEntry.children) && ( {Array.isArray(tocEntry.children) && (
<RecursivelyToc toc={tocEntry.children} /> <RecursivelyToc toc={tocEntry.children} />
)} )}
</Fragment> </Fragment>
); );
})} })}
</ul> </ul>
); );
} }
export default function DynamicLayout({ export default function DynamicLayout({
children, children,
toc, toc,
}: { }: {
children: ReactNode; children: ReactNode;
toc: Toc; toc: Toc;
}) { }) {
const [activeHeadings, setActiveHeadings] = useState<string[]>([]); const [activeHeadings, setActiveHeadings] = useState<string[]>([]);
return ( return (
<HeadingContext.Provider value={[activeHeadings, setActiveHeadings]}> <HeadingContext.Provider value={[activeHeadings, setActiveHeadings]}>
<div className="w-full flex flex-col items-center"> <div className="w-full flex flex-col items-center">
<main className="w-full [:not(:where([class~='not-prose'],[class~='not-prose']_*))]:prose-sm prose lg:[:not(:where([class~='not-prose'],_[class~='not-prose']_*))]:prose-lg p-8 dark:prose-invert"> <main className="w-full [:not(:where([class~='not-prose'],[class~='not-prose']_*))]:prose-sm prose lg:[:not(:where([class~='not-prose'],_[class~='not-prose']_*))]:prose-lg p-8 dark:prose-invert">
{children} {children}
</main> </main>
</div> </div>
<nav className="hidden lg:flex flex-col gap-2 py-8 px-4 sticky top-16 overflow-auto max-h-[calc(100vh-4rem)]"> <nav className="hidden lg:flex flex-col gap-2 py-8 px-4 sticky top-16 overflow-auto max-h-[calc(100vh-4rem)]">
<span className="font-bold text-sm">On This Page</span> <span className="font-bold text-sm">On This Page</span>
<RecursivelyToc toc={toc} /> <RecursivelyToc toc={toc} />
</nav> </nav>
</HeadingContext.Provider> </HeadingContext.Provider>
); );
} }

36
src/ErrorHandler.tsx
View File

@ -1,19 +1,17 @@
import { isRouteErrorResponse, useRouteError } from "react-router-dom"; import { isRouteErrorResponse, useRouteError } from "react-router-dom";
import UnexpectedError from "./errors/Unexpected"; import PageNotFound from "./errors/PageNotFound";
import PageNotFound from "./errors/PageNotFound"; import UnexpectedError from "./errors/Unexpected";
function ErrorBoundary() { function ErrorBoundary() {
const error = useRouteError(); const error = useRouteError();
if (isRouteErrorResponse(error)) { if (isRouteErrorResponse(error)) {
if (error.status === 404) { if (error.status === 404) {
return <PageNotFound />; return <PageNotFound />;
} else { }
return <UnexpectedError />; }
}
} else { return <UnexpectedError />;
return <UnexpectedError />; }
}
} export default ErrorBoundary;
export default ErrorBoundary;

24
src/HeadingContext.tsx
View File

@ -1,12 +1,12 @@
import { Dispatch, SetStateAction, createContext } from "react"; import { type Dispatch, type SetStateAction, createContext } from "react";
export const HeadingContext = createContext< export const HeadingContext = createContext<
[string[], Dispatch<SetStateAction<string[]>>] [string[], Dispatch<SetStateAction<string[]>>]
>([ >([
[], [],
() => { () => {
if (process.env && process.env.NODE_ENV === "development") { if (process.env && process.env.NODE_ENV === "development") {
console.log("HeadingContext outside"); console.log("HeadingContext outside");
} }
}, },
]); ]);

66
src/Home.tsx
View File

@ -1,30 +1,36 @@
import { Link } from "react-router-dom"; import { Button } from "@pswui/Button";
import { Button } from "@pswui/Button"; import { Link } from "react-router-dom";
function Home() { function Home() {
return ( return (
<main className="flex-grow h-full flex flex-col p-4 justify-center items-center"> <main className="flex-grow h-full flex flex-col p-4 justify-center items-center">
<section className="h-full flex flex-col justify-center items-center text-center gap-8"> <section className="h-full flex flex-col justify-center items-center text-center gap-8">
<header className="flex flex-col justify-center items-center gap-2"> <header className="flex flex-col justify-center items-center gap-2">
<h1 className="text-4xl font-bold"> <h1 className="text-4xl font-bold">
Build your components in isolation Build your components in isolation
</h1> </h1>
<p className="text-xl max-w-xl"> <p className="text-xl max-w-xl">
There are a lot of component libraries out there, but why it install There are a lot of component libraries out there, but why it install
so many things? so many things?
</p> </p>
</header> </header>
<div className="flex flex-row justify-center items-center gap-2"> <div className="flex flex-row justify-center items-center gap-2">
<Button asChild preset="default"> <Button
<Link to="/docs">Get Started</Link> asChild
</Button> preset="default"
<Button asChild preset="ghost"> >
<Link to="/docs/components">Components</Link> <Link to="/docs">Get Started</Link>
</Button> </Button>
</div> <Button
</section> asChild
</main> preset="ghost"
); >
} <Link to="/docs/components">Components</Link>
</Button>
export default Home; </div>
</section>
</main>
);
}
export default Home;

458
src/MainLayout.tsx
View File

@ -1,215 +1,243 @@
import { useEffect, useState } from "react"; import { Button } from "@pswui/Button";
import { Link, Outlet, useLocation } from "react-router-dom"; import {
import { Button } from "@pswui/Button"; DrawerClose,
import RouteObject from "./RouteObject"; DrawerContent,
import { Toaster } from "@pswui/Toast"; DrawerOverlay,
import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover"; DrawerRoot,
import { DrawerTrigger,
DrawerClose, } from "@pswui/Drawer";
DrawerContent, import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover";
DrawerOverlay, import { Toaster } from "@pswui/Toast";
DrawerRoot, import { useEffect, useState } from "react";
DrawerTrigger, import { Link, Outlet, useLocation } from "react-router-dom";
} from "@pswui/Drawer"; import RouteObject from "./RouteObject";
type Theme = "light" | "dark" | "system"; type Theme = "light" | "dark" | "system";
function ThemeButton() { function ThemeButton() {
const [theme, setTheme] = useState<Theme>( const [theme, setTheme] = useState<Theme>(
(localStorage.getItem("theme") as Theme) || "system" (localStorage.getItem("theme") as Theme) || "system",
); );
useEffect(() => { useEffect(() => {
document.documentElement.classList.toggle("dark", theme === "dark"); document.documentElement.classList.toggle("dark", theme === "dark");
document.documentElement.classList.toggle("system", theme === "system"); document.documentElement.classList.toggle("system", theme === "system");
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
}, [theme]); }, [theme]);
return ( return (
<Popover> <Popover>
<PopoverTrigger> <PopoverTrigger>
<Button preset="ghost" size="icon"> <Button
{/* material-symbols:light-mode */} preset="ghost"
<svg size="icon"
xmlns="http://www.w3.org/2000/svg" >
width="1.2em" {/* material-symbols:light-mode */}
height="1.2em" <svg
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
className="dark:hidden" width="1.2em"
> height="1.2em"
<path viewBox="0 0 24 24"
fill="currentColor" className="dark:hidden"
d="M12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17m-7-4H1v-2h4zm18 0h-4v-2h4zM11 5V1h2v4zm0 18v-4h2v4zM6.4 7.75L3.875 5.325L5.3 3.85l2.4 2.5zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525z" >
/> <title>Sun</title>
</svg> <path
{/* material-symbols:dark-mode */} fill="currentColor"
<svg d="M12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17m-7-4H1v-2h4zm18 0h-4v-2h4zM11 5V1h2v4zm0 18v-4h2v4zM6.4 7.75L3.875 5.325L5.3 3.85l2.4 2.5zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525z"
xmlns="http://www.w3.org/2000/svg" />
width="1.2em" </svg>
height="1.2em" {/* material-symbols:dark-mode */}
viewBox="0 0 24 24" <svg
className="hidden dark:block" xmlns="http://www.w3.org/2000/svg"
> width="1.2em"
<path height="1.2em"
fill="currentColor" viewBox="0 0 24 24"
d="M12 21q-3.75 0-6.375-2.625T3 12t2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21" className="hidden dark:block"
/> >
</svg> <title>Moon</title>
</Button> <path
</PopoverTrigger> fill="currentColor"
<PopoverContent anchor="bottomLeft" className="w-32"> d="M12 21q-3.75 0-6.375-2.625T3 12t2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21"
<Button />
preset="ghost" </svg>
onClick={() => setTheme("light")} </Button>
className="w-full px-2 py-1.5 text-sm" </PopoverTrigger>
> <PopoverContent
Light anchor="bottomLeft"
</Button> className="w-32"
<Button >
preset="ghost" <Button
onClick={() => setTheme("dark")} preset="ghost"
className="w-full px-2 py-1.5 text-sm" onClick={() => setTheme("light")}
> className="w-full px-2 py-1.5 text-sm"
Dark >
</Button> Light
<Button </Button>
preset="ghost" <Button
onClick={() => setTheme("system")} preset="ghost"
className="w-full px-2 py-1.5 text-sm" onClick={() => setTheme("dark")}
> className="w-full px-2 py-1.5 text-sm"
System >
</Button> Dark
</PopoverContent> </Button>
</Popover> <Button
); preset="ghost"
} onClick={() => setTheme("system")}
className="w-full px-2 py-1.5 text-sm"
function TopNav() { >
const location = useLocation(); System
</Button>
return ( </PopoverContent>
<> </Popover>
<nav className="sticky top-0 z-20 bg-transparent backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800 w-full max-w-screen px-8 flex flex-row justify-center items-center h-16"> );
<div }
data-role="wrapper"
className="flex flex-row items-center justify-between w-full max-w-6xl text-lg" function TopNav() {
> const location = useLocation();
<div
data-role="links" return (
className="hidden md:flex flex-row items-center gap-3" <>
> <nav className="sticky top-0 z-20 bg-transparent backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800 w-full max-w-screen px-8 flex flex-row justify-center items-center h-16">
<Link to="/" className="font-bold"> <div
PSW/UI data-role="wrapper"
</Link> className="flex flex-row items-center justify-between w-full max-w-6xl text-lg"
{RouteObject.mainNav.map((link) => { >
return ( <div
<Link data-role="links"
key={link.path} className="hidden md:flex flex-row items-center gap-3"
to={link.path} >
data-active={link.eq(location.pathname)} <Link
className="font-light text-base data-[active=true]:text-current text-neutral-500 hover:text-neutral-700" to="/"
> className="font-bold"
{link.name} >
</Link> PSW/UI
); </Link>
})} {RouteObject.mainNav.map((link) => {
</div> return (
<div data-role="mobile-links" className="flex md:hidden"> <Link
<DrawerRoot> key={link.path}
<DrawerTrigger> to={link.path}
<Button preset="ghost" size="icon"> data-active={link.eq(location.pathname)}
{/* mdi:menu */} className="font-light text-base data-[active=true]:text-current text-neutral-500 hover:text-neutral-700"
<svg >
xmlns="http://www.w3.org/2000/svg" {link.name}
width="1.2em" </Link>
height="1.2em" );
viewBox="0 0 24 24" })}
> </div>
<path <div
fill="currentColor" data-role="mobile-links"
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" className="flex md:hidden"
/> >
</svg> <DrawerRoot>
</Button> <DrawerTrigger>
</DrawerTrigger> <Button
<DrawerOverlay className="z-[99]"> preset="ghost"
<DrawerContent className="w-[300px] overflow-auto"> size="icon"
<DrawerClose className="absolute top-4 right-4"> >
<Button preset="ghost" size="icon"> {/* mdi:menu */}
{/* mdi:close */} <svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" width="1.2em"
width="1.2em" height="1.2em"
height="1.2em" viewBox="0 0 24 24"
viewBox="0 0 24 24" >
> <title>Menu</title>
<path <path
fill="currentColor" fill="currentColor"
d="M19 6.41L17.59 5 12 9.27 6.41 5 5 6.41 9.27 11 5 17.59 6.41 19 12 14.73 17.59 19 19 17.59 13.41 12 19 6.41" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
/> />
</svg> </svg>
</Button> </Button>
</DrawerClose> </DrawerTrigger>
<div className="flex flex-col justify-start items-start gap-6 text-lg"> <DrawerOverlay className="z-[99]">
<div className="flex flex-col justify-start items-start gap-3"> <DrawerContent className="w-[300px] overflow-auto">
<DrawerClose> <DrawerClose className="absolute top-4 right-4">
<Link to="/" className="font-extrabold"> <Button
PSW/UI preset="ghost"
</Link> size="icon"
</DrawerClose> >
{RouteObject.mainNav.map((link) => { {/* mdi:close */}
return ( <svg
<DrawerClose key={link.path}> xmlns="http://www.w3.org/2000/svg"
<Link to={link.path}>{link.name}</Link> width="1.2em"
</DrawerClose> height="1.2em"
); viewBox="0 0 24 24"
})} >
</div> <title>Close</title>
{Object.entries(RouteObject.sideNav).map( <path
([categoryName, links]) => { fill="currentColor"
return ( d="M19 6.41L17.59 5 12 9.27 6.41 5 5 6.41 9.27 11 5 17.59 6.41 19 12 14.73 17.59 19 19 17.59 13.41 12 19 6.41"
<div />
className="flex flex-col justify-start items-start gap-3" </svg>
key={categoryName} </Button>
> </DrawerClose>
<h2 className="font-bold">{categoryName}</h2> <div className="flex flex-col justify-start items-start gap-6 text-lg">
{links.map((link) => { <div className="flex flex-col justify-start items-start gap-3">
return ( <DrawerClose>
<DrawerClose key={link.path}> <Link
<Link to="/"
to={link.path} className="font-extrabold"
className="text-base opacity-75" >
> PSW/UI
{link.name} </Link>
</Link> </DrawerClose>
</DrawerClose> {RouteObject.mainNav.map((link) => {
); return (
})} <DrawerClose key={link.path}>
</div> <Link to={link.path}>{link.name}</Link>
); </DrawerClose>
} );
)} })}
</div> </div>
</DrawerContent> {Object.entries(RouteObject.sideNav).map(
</DrawerOverlay> ([categoryName, links]) => {
</DrawerRoot> return (
</div> <div
<div data-role="controls" className="flex flex-row items-center"> className="flex flex-col justify-start items-start gap-3"
<ThemeButton /> key={categoryName}
</div> >
</div> <h2 className="font-bold">{categoryName}</h2>
</nav> {links.map((link) => {
</> return (
); <DrawerClose key={link.path}>
} <Link
to={link.path}
function MainLayout() { className="text-base opacity-75"
return ( >
<> {link.name}
<Toaster className="top-16" /> </Link>
<TopNav /> </DrawerClose>
<Outlet /> );
</> })}
); </div>
} );
},
export default MainLayout; )}
</div>
</DrawerContent>
</DrawerOverlay>
</DrawerRoot>
</div>
<div
data-role="controls"
className="flex flex-row items-center"
>
<ThemeButton />
</div>
</div>
</nav>
</>
);
}
function MainLayout() {
return (
<>
<Toaster className="top-16" />
<TopNav />
<Outlet />
</>
);
}
export default MainLayout;

118
src/RouteObject.ts
View File

@ -1,59 +1,59 @@
const docsModules = import.meta.glob("./docs/components/*.mdx"); const docsModules = import.meta.glob("./docs/components/*.mdx");
const mainNav = [ const mainNav = [
{ {
path: "/docs", path: "/docs",
name: "Docs", name: "Docs",
eq: (pathname: string) => eq: (pathname: string) =>
pathname.startsWith("/docs") && !pathname.startsWith("/docs/components"), pathname.startsWith("/docs") && !pathname.startsWith("/docs/components"),
}, },
{ {
path: "/docs/components", path: "/docs/components",
name: "Components", name: "Components",
eq: (pathname: string) => pathname.startsWith("/docs/components"), eq: (pathname: string) => pathname.startsWith("/docs/components"),
}, },
{ {
path: "https://github.com/pswui/ui", path: "https://github.com/pswui/ui",
name: "Github", name: "Github",
eq: () => false, eq: () => false,
}, },
]; ];
const sideNav: Record< const sideNav: Record<
string, string,
{ path: string; name: string; eq: (path: string) => boolean }[] { path: string; name: string; eq: (path: string) => boolean }[]
> = { > = {
Documents: [ Documents: [
{ {
path: "/docs/introduction", path: "/docs/introduction",
name: "Introduction", name: "Introduction",
eq: (pathname: string) => pathname === "/docs/introduction", eq: (pathname: string) => pathname === "/docs/introduction",
}, },
{ {
path: "/docs/installation", path: "/docs/installation",
name: "Installation", name: "Installation",
eq: (pathname: string) => pathname === "/docs/installation", eq: (pathname: string) => pathname === "/docs/installation",
}, },
{ {
path: "/docs/configuration", path: "/docs/configuration",
name: "Configuration", name: "Configuration",
eq: (pathname: string) => pathname === "/docs/configuration", eq: (pathname: string) => pathname === "/docs/configuration",
}, },
], ],
Components: [], Components: [],
}; };
Object.keys(docsModules).forEach((path) => { for (const path of Object.keys(docsModules)) {
const name = (path.split("/").pop() ?? "").replace(".mdx", ""); const name = (path.split("/").pop() ?? "").replace(".mdx", "");
sideNav["Components"].push({ sideNav.Components.push({
path: path.replace("./docs", "/docs").replace(".mdx", ""), path: path.replace("./docs", "/docs").replace(".mdx", ""),
name: name.charAt(0).toUpperCase() + name.slice(1), name: name.charAt(0).toUpperCase() + name.slice(1),
eq: (pathname: string) => eq: (pathname: string) =>
pathname === path.replace("./docs", "/docs").replace(".mdx", ""), pathname === path.replace("./docs", "/docs").replace(".mdx", ""),
}); });
}); }
export default { export default {
mainNav, mainNav,
sideNav, sideNav,
}; };

255
src/components/LoadedCode.tsx
View File

@ -1,123 +1,132 @@
import { forwardRef, useEffect, useState } from "react"; import { Button } from "@pswui/Button";
import SyntaxHighlighter from "react-syntax-highlighter"; import { useToast } from "@pswui/Toast";
import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs"; import { forwardRef, useEffect, useState } from "react";
import { Button } from "@pswui/Button"; import SyntaxHighlighter from "react-syntax-highlighter";
import { useToast } from "@pswui/Toast"; import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
export const GITHUB_UI = "https://raw.githubusercontent.com/pswui/ui/main"; export const GITHUB_UI = "https://raw.githubusercontent.com/pswui/ui/main";
export const GITHUB_DOCS = "https://raw.githubusercontent.com/pswui/docs/main"; export const GITHUB_DOCS = "https://raw.githubusercontent.com/pswui/docs/main";
export const GITHUB_COMP = (componentName: string) => `${GITHUB_UI}/packages/react/components/${componentName}.tsx` export const GITHUB_COMP = (componentName: string) =>
export const GITHUB_DIR_COMP = (componentName: string, source: string) => `${GITHUB_UI}/packages/react/components/${componentName}/${source}` `${GITHUB_UI}/packages/react/components/${componentName}.tsx`;
export const GITHUB_COMP_PREVIEW = (componentName: string) => `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Preview.tsx` export const GITHUB_DIR_COMP = (componentName: string, source: string) =>
export const GITHUB_STORY = (componentName: string, storyName: string) => `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`; `${GITHUB_UI}/packages/react/components/${componentName}/${source}`;
export const GITHUB_COMP_PREVIEW = (componentName: string) =>
export const LoadedCode = ({ `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Preview.tsx`;
from, export const GITHUB_STORY = (componentName: string, storyName: string) =>
className, `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`;
}: {
from: string; export const LoadedCode = ({
className?: string; from,
}) => { className,
const [state, setState] = useState<string | undefined | null>(); }: {
const { toast } = useToast(); from: string;
className?: string;
useEffect(() => { }) => {
(async () => { const [state, setState] = useState<string | undefined | null>();
const res = await fetch(from); const { toast } = useToast();
const text = await res.text();
setState(text); useEffect(() => {
})(); (async () => {
}, [from]); const res = await fetch(from);
const text = await res.text();
return ( setState(text);
<div className={twMerge("relative", className)}> })();
<Button }, [from]);
preset="default"
size="icon" return (
className="absolute top-4 right-4 text-black dark:text-white z-10" <div className={twMerge("relative", className)}>
onClick={() => { <Button
if (state && state.length > 0) { preset="default"
void navigator.clipboard.writeText(state ?? ""); size="icon"
toast({ className="absolute top-4 right-4 text-black dark:text-white z-10"
title: "Copied", onClick={() => {
description: "The code has been copied to your clipboard.", if (state && state.length > 0) {
status: "success", void navigator.clipboard.writeText(state ?? "");
}); toast({
} else { title: "Copied",
toast({ description: "The code has been copied to your clipboard.",
title: "Error", status: "success",
description: "It seems like code is not loaded yet.", });
status: "error", } else {
}); toast({
} title: "Error",
}} description: "It seems like code is not loaded yet.",
> status: "error",
<svg });
xmlns="http://www.w3.org/2000/svg" }
width="1.2em" }}
height="1.2em" >
viewBox="0 0 24 24" <svg
> xmlns="http://www.w3.org/2000/svg"
<path width="1.2em"
fill="currentColor" height="1.2em"
d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z" viewBox="0 0 24 24"
/> >
</svg> <title>Copy</title>
</Button> <path
<SyntaxHighlighter fill="currentColor"
language="typescript" d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z"
style={gruvboxDark} />
className={`w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""} scrollbar-none`} </svg>
customStyle={{ padding: "1rem" }} </Button>
> <SyntaxHighlighter
{state ?? ""} language="typescript"
</SyntaxHighlighter> style={gruvboxDark}
</div> className={`w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""} scrollbar-none`}
); customStyle={{ padding: "1rem" }}
}; >
{state ?? ""}
export const Code = forwardRef< </SyntaxHighlighter>
HTMLDivElement, </div>
{ children: string; className?: string; language: string } );
>(({ children, className, language }, ref) => { };
const { toast } = useToast();
export const Code = forwardRef<
return ( HTMLDivElement,
<div className={twMerge("relative", className)} ref={ref}> { children: string; className?: string; language: string }
<Button >(({ children, className, language }, ref) => {
preset="default" const { toast } = useToast();
size="icon"
className="absolute top-4 right-4 text-black dark:text-white z-10" return (
onClick={() => { <div
void navigator.clipboard.writeText(children ?? ""); className={twMerge("relative", className)}
toast({ ref={ref}
title: "Copied", >
description: "The code has been copied to your clipboard.", <Button
status: "success", preset="default"
}); size="icon"
}} className="absolute top-4 right-4 text-black dark:text-white z-10"
> onClick={() => {
<svg void navigator.clipboard.writeText(children ?? "");
xmlns="http://www.w3.org/2000/svg" toast({
width="1.2em" title: "Copied",
height="1.2em" description: "The code has been copied to your clipboard.",
viewBox="0 0 24 24" status: "success",
> });
<path }}
fill="currentColor" >
d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z" <svg
/> xmlns="http://www.w3.org/2000/svg"
</svg> width="1.2em"
</Button> height="1.2em"
<SyntaxHighlighter viewBox="0 0 24 24"
language={language} >
style={gruvboxDark} <title>Copy</title>
className={`w-full h-auto max-h-64 rounded-lg scrollbar-none`} <path
customStyle={{ padding: "1rem" }} fill="currentColor"
> d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z"
{children} />
</SyntaxHighlighter> </svg>
</div> </Button>
); <SyntaxHighlighter
}); language={language}
style={gruvboxDark}
className={"w-full h-auto max-h-64 rounded-lg scrollbar-none"}
customStyle={{ padding: "1rem" }}
>
{children}
</SyntaxHighlighter>
</div>
);
});

64
src/components/Story.tsx
View File

@ -1,32 +1,32 @@
import React from "react"; import React from "react";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
const layoutClasses = { const layoutClasses = {
default: "", default: "",
centered: "flex items-center justify-center", centered: "flex items-center justify-center",
}; };
const Story = React.forwardRef< const Story = React.forwardRef<
HTMLDivElement, HTMLDivElement,
{ {
layout?: keyof typeof layoutClasses; layout?: keyof typeof layoutClasses;
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
id?: string; id?: string;
} }
>(({ layout = "default", children, className, id }, ref) => { >(({ layout = "default", children, className, id }, ref) => {
return ( return (
<div <div
className={twMerge( className={twMerge(
`bg-white dark:bg-black border border-neutral-300 dark:border-neutral-700 rounded-lg w-full p-4 min-h-48 h-auto my-8 not-prose ${layoutClasses[layout]}`, `bg-white dark:bg-black border border-neutral-300 dark:border-neutral-700 rounded-lg w-full p-4 min-h-48 h-auto my-8 not-prose ${layoutClasses[layout]}`,
className className,
)} )}
ref={ref} ref={ref}
id={id} id={id}
> >
{children} {children}
</div> </div>
); );
}); });
export { Story }; export { Story };

10
src/docs/components/ButtonBlocks/Examples/Danger.tsx
View File

@ -1,5 +1,5 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
export const Danger = () => { export const Danger = () => {
return <Button preset="danger">Danger</Button>; return <Button preset="danger">Danger</Button>;
}; };

10
src/docs/components/ButtonBlocks/Examples/Default.tsx
View File

@ -1,5 +1,5 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
export const Default = () => { export const Default = () => {
return <Button preset="default">Default</Button>; return <Button preset="default">Default</Button>;
}; };

10
src/docs/components/ButtonBlocks/Examples/Ghost.tsx
View File

@ -1,5 +1,5 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
export const Ghost = () => { export const Ghost = () => {
return <Button preset="ghost">Ghost</Button>; return <Button preset="ghost">Ghost</Button>;
}; };

10
src/docs/components/ButtonBlocks/Examples/Link.tsx
View File

@ -1,5 +1,5 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
export const Link = () => { export const Link = () => {
return <Button preset="link">Link</Button>; return <Button preset="link">Link</Button>;
}; };

10
src/docs/components/ButtonBlocks/Examples/Success.tsx
View File

@ -1,5 +1,5 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
export const Success = () => { export const Success = () => {
return <Button preset="success">Success</Button>; return <Button preset="success">Success</Button>;
}; };

10
src/docs/components/ButtonBlocks/Examples/Warning.tsx
View File

@ -1,5 +1,5 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
export const Warning = () => { export const Warning = () => {
return <Button preset="warning">Warning</Button>; return <Button preset="warning">Warning</Button>;
}; };

31
src/docs/components/ButtonBlocks/Examples/index.ts
View File

@ -1,16 +1,15 @@
import { Danger } from "./Danger"; import { Danger } from "./Danger";
import { Warning } from "./Warning"; import { Default } from "./Default";
import { Success } from "./Success"; import { Ghost } from "./Ghost";
import { Link } from "./Link"; import { Link } from "./Link";
import { Ghost } from "./Ghost"; import { Success } from "./Success";
import { Default } from "./Default"; import { Warning } from "./Warning";
export default { export default {
Danger, Danger,
Warning, Warning,
Success, Success,
Link, Link,
Ghost, Ghost,
Default, Default,
}; };

10
src/docs/components/ButtonBlocks/Preview.tsx
View File

@ -1,5 +1,5 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
export function ButtonDemo() { export function ButtonDemo() {
return <Button>Button</Button>; return <Button>Button</Button>;
} }

25
src/docs/components/CheckboxBlocks/Examples/Disabled.tsx
View File

@ -1,11 +1,14 @@
import { Label } from "@pswui/Label"; import { Checkbox } from "@pswui/Checkbox";
import { Checkbox } from "@pswui/Checkbox"; import { Label } from "@pswui/Label";
export function Disabled() { export function Disabled() {
return ( return (
<Label direction="horizontal"> <Label direction="horizontal">
<Checkbox size="base" disabled /> <Checkbox
<span>Agree terms and conditions</span> size="base"
</Label> disabled
); />
} <span>Agree terms and conditions</span>
</Label>
);
}

22
src/docs/components/CheckboxBlocks/Examples/Text.tsx
View File

@ -1,11 +1,11 @@
import { Label } from "@pswui/Label"; import { Checkbox } from "@pswui/Checkbox";
import { Checkbox } from "@pswui/Checkbox"; import { Label } from "@pswui/Label";
export function Text() { export function Text() {
return ( return (
<Label direction="horizontal"> <Label direction="horizontal">
<Checkbox size="base" /> <Checkbox size="base" />
<span>Agree terms and conditions</span> <span>Agree terms and conditions</span>
</Label> </Label>
); );
} }

9
src/docs/components/CheckboxBlocks/Examples/index.ts
View File

@ -1,5 +1,4 @@
import { Text } from "./Text"; import { Disabled } from "./Disabled";
import { Disabled } from "./Disabled"; import { Text } from "./Text";
export default { Text, Disabled }; export default { Text, Disabled };

22
src/docs/components/CheckboxBlocks/Preview.tsx
View File

@ -1,11 +1,11 @@
import { Checkbox } from "@pswui/Checkbox"; import { Checkbox } from "@pswui/Checkbox";
import { Label } from "@pswui/Label"; import { Label } from "@pswui/Label";
export function CheckboxDemo() { export function CheckboxDemo() {
return ( return (
<Label direction="horizontal"> <Label direction="horizontal">
<Checkbox /> <Checkbox />
<span>Checkbox</span> <span>Checkbox</span>
</Label> </Label>
); );
} }

72
src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx
View File

@ -1,36 +1,36 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { import {
DialogRoot, DialogClose,
DialogTrigger, DialogContent,
DialogOverlay, DialogFooter,
DialogContent, DialogHeader,
DialogHeader, DialogOverlay,
DialogTitle, DialogRoot,
DialogSubtitle, DialogSubtitle,
DialogFooter, DialogTitle,
DialogClose, DialogTrigger,
} from "@pswui/Dialog"; } from "@pswui/Dialog";
export function BasicInformationalDialog() { export function BasicInformationalDialog() {
return ( return (
<DialogRoot> <DialogRoot>
<DialogTrigger> <DialogTrigger>
<Button preset="default">What is this?</Button> <Button preset="default">What is this?</Button>
</DialogTrigger> </DialogTrigger>
<DialogOverlay> <DialogOverlay>
<DialogContent size={"fullMd"}> <DialogContent size={"fullMd"}>
<DialogHeader> <DialogHeader>
<DialogTitle>Dialog Title</DialogTitle> <DialogTitle>Dialog Title</DialogTitle>
<DialogSubtitle>Dialog Subtitle</DialogSubtitle> <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
</DialogHeader> </DialogHeader>
<p>This is a dialog. You can put the information you want to show.</p> <p>This is a dialog. You can put the information you want to show.</p>
<DialogFooter> <DialogFooter>
<DialogClose> <DialogClose>
<Button preset="default">Ok!</Button> <Button preset="default">Ok!</Button>
</DialogClose> </DialogClose>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</DialogOverlay> </DialogOverlay>
</DialogRoot> </DialogRoot>
); );
} }

158
src/docs/components/DialogBlocks/Examples/DeletingItem.tsx
View File

@ -1,79 +1,79 @@
import { import { Button } from "@pswui/Button";
DialogRoot, import {
DialogTrigger, DialogClose,
DialogOverlay, DialogContent,
DialogContent, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogOverlay,
DialogSubtitle, DialogRoot,
DialogFooter, DialogSubtitle,
DialogClose, DialogTitle,
} from "@pswui/Dialog"; DialogTrigger,
import { Button } from "@pswui/Button"; } from "@pswui/Dialog";
import { useToast } from "@pswui/Toast"; import { useToast } from "@pswui/Toast";
export function DeletingItem() { export function DeletingItem() {
const { toast } = useToast(); const { toast } = useToast();
return ( return (
<DialogRoot> <DialogRoot>
<DialogTrigger> <DialogTrigger>
<Button preset="danger">Delete Item</Button> <Button preset="danger">Delete Item</Button>
</DialogTrigger> </DialogTrigger>
<DialogOverlay> <DialogOverlay>
<DialogContent size={"fullMd"}> <DialogContent size={"fullMd"}>
<DialogHeader> <DialogHeader>
<DialogTitle>Delete Item</DialogTitle> <DialogTitle>Delete Item</DialogTitle>
<DialogSubtitle> <DialogSubtitle>
Are you sure you want to delete this item? Are you sure you want to delete this item?
</DialogSubtitle> </DialogSubtitle>
</DialogHeader> </DialogHeader>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<ul className="list-disc list-inside"> <ul className="list-disc list-inside">
<li>This action will delete the item, and related data</li> <li>This action will delete the item, and related data</li>
<li>This action cannot be undone</li> <li>This action cannot be undone</li>
</ul> </ul>
</div> </div>
<DialogFooter> <DialogFooter>
<DialogClose> <DialogClose>
<Button <Button
preset="danger" preset="danger"
onClick={async () => { onClick={async () => {
const toasted = toast({ const toasted = toast({
title: "Deleting Item", title: "Deleting Item",
description: "Item deletion is requested", description: "Item deletion is requested",
status: "loading", status: "loading",
}); });
await new Promise((r) => setTimeout(r, 1000)); await new Promise((r) => setTimeout(r, 1000));
toasted.update({ toasted.update({
title: "Item Deleted", title: "Item Deleted",
description: "The item has been deleted", description: "The item has been deleted",
status: "success", status: "success",
}); });
}} }}
> >
Delete Delete
</Button> </Button>
</DialogClose> </DialogClose>
<DialogClose> <DialogClose>
<Button <Button
preset="default" preset="default"
onClick={() => { onClick={() => {
toast({ toast({
title: "Action Canceled", title: "Action Canceled",
description: "The delete action has been canceled", description: "The delete action has been canceled",
status: "error", status: "error",
}); });
}} }}
> >
Cancel Cancel
</Button> </Button>
</DialogClose> </DialogClose>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</DialogOverlay> </DialogOverlay>
</DialogRoot> </DialogRoot>
); );
} }

15
src/docs/components/DialogBlocks/Examples/index.ts
View File

@ -1,8 +1,7 @@
import { BasicInformationalDialog } from "./BasicInformationalDialog"; import { BasicInformationalDialog } from "./BasicInformationalDialog";
import { DeletingItem } from "./DeletingItem"; import { DeletingItem } from "./DeletingItem";
export default { export default {
BasicInformationalDialog, BasicInformationalDialog,
DeletingItem, DeletingItem,
} };

84
src/docs/components/DialogBlocks/Preview.tsx
View File

@ -1,42 +1,42 @@
import { import { Button } from "@pswui/Button";
DialogRoot, import {
DialogTrigger, DialogClose,
DialogOverlay, DialogContent,
DialogContent, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogOverlay,
DialogSubtitle, DialogRoot,
DialogFooter, DialogSubtitle,
DialogClose, DialogTitle,
} from "@pswui/Dialog"; DialogTrigger,
import { Button } from "@pswui/Button"; } from "@pswui/Dialog";
export function DialogDemo() { export function DialogDemo() {
return ( return (
<DialogRoot> <DialogRoot>
<DialogTrigger> <DialogTrigger>
<Button preset="default">Open Dialog</Button> <Button preset="default">Open Dialog</Button>
</DialogTrigger> </DialogTrigger>
<DialogOverlay> <DialogOverlay>
<DialogContent size={"fullMd"}> <DialogContent size={"fullMd"}>
<DialogHeader> <DialogHeader>
<DialogTitle>Dialog Title</DialogTitle> <DialogTitle>Dialog Title</DialogTitle>
<DialogSubtitle>Dialog Subtitle</DialogSubtitle> <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
</DialogHeader> </DialogHeader>
<p> <p>
Laborum non adipisicing enim enim culpa esse anim esse consequat Laborum non adipisicing enim enim culpa esse anim esse consequat
Lorem incididunt. Enim mollit laborum sunt cillum voluptate est Lorem incididunt. Enim mollit laborum sunt cillum voluptate est
officia nostrud non consequat adipisicing cupidatat aliquip magna. officia nostrud non consequat adipisicing cupidatat aliquip magna.
Voluptate nisi cupidatat qui nisi in pariatur. Sint consequat labore Voluptate nisi cupidatat qui nisi in pariatur. Sint consequat labore
pariatur mollit sint nostrud tempor commodo pariatur ea laboris. pariatur mollit sint nostrud tempor commodo pariatur ea laboris.
</p> </p>
<DialogFooter> <DialogFooter>
<DialogClose> <DialogClose>
<Button preset="default">Close</Button> <Button preset="default">Close</Button>
</DialogClose> </DialogClose>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</DialogOverlay> </DialogOverlay>
</DialogRoot> </DialogRoot>
); );
} }

80
src/docs/components/DrawerBlocks/Examples/Bottom.tsx
View File

@ -1,40 +1,40 @@
import { import { Button } from "@pswui/Button";
DrawerRoot, import {
DrawerTrigger, DrawerBody,
DrawerOverlay, DrawerClose,
DrawerContent, DrawerContent,
DrawerHeader, DrawerFooter,
DrawerBody, DrawerHeader,
DrawerFooter, DrawerOverlay,
DrawerClose, DrawerRoot,
} from "@pswui/Drawer"; DrawerTrigger,
import { Button } from "@pswui/Button"; } from "@pswui/Drawer";
export const Bottom = () => { export const Bottom = () => {
return ( return (
<DrawerRoot> <DrawerRoot>
<DrawerTrigger> <DrawerTrigger>
<Button>Open Drawer</Button> <Button>Open Drawer</Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-[99]"> <DrawerOverlay className="z-[99]">
<DrawerContent position="bottom"> <DrawerContent position="bottom">
<DrawerHeader> <DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1> <h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader> </DrawerHeader>
<DrawerBody> <DrawerBody>
<p> <p>
Drawers are a type of overlay that slides in from the edge of the Drawers are a type of overlay that slides in from the edge of the
screen. They are typically used for navigation or additional screen. They are typically used for navigation or additional
content. content.
</p> </p>
</DrawerBody> </DrawerBody>
<DrawerFooter> <DrawerFooter>
<DrawerClose> <DrawerClose>
<Button>Done</Button> <Button>Done</Button>
</DrawerClose> </DrawerClose>
</DrawerFooter> </DrawerFooter>
</DrawerContent> </DrawerContent>
</DrawerOverlay> </DrawerOverlay>
</DrawerRoot> </DrawerRoot>
); );
}; };

83
src/docs/components/DrawerBlocks/Examples/Left.tsx
View File

@ -1,40 +1,43 @@
import { import { Button } from "@pswui/Button";
DrawerRoot, import {
DrawerTrigger, DrawerBody,
DrawerOverlay, DrawerClose,
DrawerContent, DrawerContent,
DrawerHeader, DrawerFooter,
DrawerBody, DrawerHeader,
DrawerFooter, DrawerOverlay,
DrawerClose, DrawerRoot,
} from "@pswui/Drawer"; DrawerTrigger,
import { Button } from "@pswui/Button"; } from "@pswui/Drawer";
export const Left = () => { export const Left = () => {
return ( return (
<DrawerRoot> <DrawerRoot>
<DrawerTrigger> <DrawerTrigger>
<Button>Open Drawer</Button> <Button>Open Drawer</Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-[99]"> <DrawerOverlay className="z-[99]">
<DrawerContent position="left" className="max-w-[320px]"> <DrawerContent
<DrawerHeader> position="left"
<h1 className="text-2xl font-bold">Drawer</h1> className="max-w-[320px]"
</DrawerHeader> >
<DrawerBody> <DrawerHeader>
<p> <h1 className="text-2xl font-bold">Drawer</h1>
Drawers are a type of overlay that slides in from the edge of the </DrawerHeader>
screen. They are typically used for navigation or additional <DrawerBody>
content. <p>
</p> Drawers are a type of overlay that slides in from the edge of the
</DrawerBody> screen. They are typically used for navigation or additional
<DrawerFooter> content.
<DrawerClose> </p>
<Button>Done</Button> </DrawerBody>
</DrawerClose> <DrawerFooter>
</DrawerFooter> <DrawerClose>
</DrawerContent> <Button>Done</Button>
</DrawerOverlay> </DrawerClose>
</DrawerRoot> </DrawerFooter>
); </DrawerContent>
}; </DrawerOverlay>
</DrawerRoot>
);
};

83
src/docs/components/DrawerBlocks/Examples/Right.tsx
View File

@ -1,40 +1,43 @@
import { import { Button } from "@pswui/Button";
DrawerRoot, import {
DrawerTrigger, DrawerBody,
DrawerOverlay, DrawerClose,
DrawerContent, DrawerContent,
DrawerHeader, DrawerFooter,
DrawerBody, DrawerHeader,
DrawerFooter, DrawerOverlay,
DrawerClose, DrawerRoot,
} from "@pswui/Drawer"; DrawerTrigger,
import { Button } from "@pswui/Button"; } from "@pswui/Drawer";
export const Right = () => { export const Right = () => {
return ( return (
<DrawerRoot> <DrawerRoot>
<DrawerTrigger> <DrawerTrigger>
<Button>Open Drawer</Button> <Button>Open Drawer</Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-[99]"> <DrawerOverlay className="z-[99]">
<DrawerContent position="right" className="max-w-[320px]"> <DrawerContent
<DrawerHeader> position="right"
<h1 className="text-2xl font-bold">Drawer</h1> className="max-w-[320px]"
</DrawerHeader> >
<DrawerBody> <DrawerHeader>
<p> <h1 className="text-2xl font-bold">Drawer</h1>
Drawers are a type of overlay that slides in from the edge of the </DrawerHeader>
screen. They are typically used for navigation or additional <DrawerBody>
content. <p>
</p> Drawers are a type of overlay that slides in from the edge of the
</DrawerBody> screen. They are typically used for navigation or additional
<DrawerFooter> content.
<DrawerClose> </p>
<Button>Done</Button> </DrawerBody>
</DrawerClose> <DrawerFooter>
</DrawerFooter> <DrawerClose>
</DrawerContent> <Button>Done</Button>
</DrawerOverlay> </DrawerClose>
</DrawerRoot> </DrawerFooter>
); </DrawerContent>
}; </DrawerOverlay>
</DrawerRoot>
);
};

80
src/docs/components/DrawerBlocks/Examples/Top.tsx
View File

@ -1,40 +1,40 @@
import { import { Button } from "@pswui/Button";
DrawerRoot, import {
DrawerTrigger, DrawerBody,
DrawerOverlay, DrawerClose,
DrawerContent, DrawerContent,
DrawerHeader, DrawerFooter,
DrawerBody, DrawerHeader,
DrawerFooter, DrawerOverlay,
DrawerClose, DrawerRoot,
} from "@pswui/Drawer"; DrawerTrigger,
import { Button } from "@pswui/Button"; } from "@pswui/Drawer";
export const Top = () => { export const Top = () => {
return ( return (
<DrawerRoot> <DrawerRoot>
<DrawerTrigger> <DrawerTrigger>
<Button>Open Drawer</Button> <Button>Open Drawer</Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-[99]"> <DrawerOverlay className="z-[99]">
<DrawerContent position="top"> <DrawerContent position="top">
<DrawerHeader> <DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1> <h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader> </DrawerHeader>
<DrawerBody> <DrawerBody>
<p> <p>
Drawers are a type of overlay that slides in from the edge of the Drawers are a type of overlay that slides in from the edge of the
screen. They are typically used for navigation or additional screen. They are typically used for navigation or additional
content. content.
</p> </p>
</DrawerBody> </DrawerBody>
<DrawerFooter> <DrawerFooter>
<DrawerClose> <DrawerClose>
<Button>Done</Button> <Button>Done</Button>
</DrawerClose> </DrawerClose>
</DrawerFooter> </DrawerFooter>
</DrawerContent> </DrawerContent>
</DrawerOverlay> </DrawerOverlay>
</DrawerRoot> </DrawerRoot>
); );
}; };

13
src/docs/components/DrawerBlocks/Examples/index.ts
View File

@ -1,7 +1,6 @@
import { Left } from "./Left"; import { Bottom } from "./Bottom";
import { Right } from "./Right"; import { Left } from "./Left";
import { Top } from "./Top"; import { Right } from "./Right";
import { Bottom } from "./Bottom"; import { Top } from "./Top";
export default { Left, Right, Top, Bottom }; export default { Left, Right, Top, Bottom };

80
src/docs/components/DrawerBlocks/Preview.tsx
View File

@ -1,40 +1,40 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { import {
DrawerRoot, DrawerBody,
DrawerTrigger, DrawerClose,
DrawerOverlay, DrawerContent,
DrawerContent, DrawerFooter,
DrawerClose, DrawerHeader,
DrawerHeader, DrawerOverlay,
DrawerBody, DrawerRoot,
DrawerFooter, DrawerTrigger,
} from "@pswui/Drawer"; } from "@pswui/Drawer";
export const DrawerDemo = () => { export const DrawerDemo = () => {
return ( return (
<DrawerRoot> <DrawerRoot>
<DrawerTrigger> <DrawerTrigger>
<Button>Open Drawer</Button> <Button>Open Drawer</Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-[99]"> <DrawerOverlay className="z-[99]">
<DrawerContent className="max-w-[320px]"> <DrawerContent className="max-w-[320px]">
<DrawerHeader> <DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1> <h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader> </DrawerHeader>
<DrawerBody> <DrawerBody>
<p> <p>
Drawers are a type of overlay that slides in from the edge of the Drawers are a type of overlay that slides in from the edge of the
screen. They are typically used for navigation or additional screen. They are typically used for navigation or additional
content. content.
</p> </p>
</DrawerBody> </DrawerBody>
<DrawerFooter> <DrawerFooter>
<DrawerClose> <DrawerClose>
<Button>Close</Button> <Button>Close</Button>
</DrawerClose> </DrawerClose>
</DrawerFooter> </DrawerFooter>
</DrawerContent> </DrawerContent>
</DrawerOverlay> </DrawerOverlay>
</DrawerRoot> </DrawerRoot>
); );
}; };

15
src/docs/components/InputBlocks/Examples/Disabled.tsx
View File

@ -1,5 +1,10 @@
import { Input } from "@pswui/Input"; import { Input } from "@pswui/Input";
export function Disabled() { export function Disabled() {
return <Input type="text" disabled />; return (
} <Input
type="text"
disabled
/>
);
}

15
src/docs/components/InputBlocks/Examples/Invalid.tsx
View File

@ -1,5 +1,10 @@
import { Input } from "@pswui/Input"; import { Input } from "@pswui/Input";
export function Invalid() { export function Invalid() {
return <Input type="text" invalid="Invalid Input" />; return (
} <Input
type="text"
invalid="Invalid Input"
/>
);
}

9
src/docs/components/InputBlocks/Examples/index.ts
View File

@ -1,5 +1,4 @@
import { Invalid } from "./Invalid"; import { Disabled } from "./Disabled";
import { Disabled } from "./Disabled"; import { Invalid } from "./Invalid";
export default { Invalid, Disabled }; export default { Invalid, Disabled };

10
src/docs/components/InputBlocks/Preview.tsx
View File

@ -1,5 +1,5 @@
import { Input } from "@pswui/Input"; import { Input } from "@pswui/Input";
export function InputDemo() { export function InputDemo() {
return <Input type="text" />; return <Input type="text" />;
} }

53
src/docs/components/InputFrameBlocks/Preview.tsx
View File

@ -1,23 +1,30 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Input, InputFrame } from "@pswui/Input"; import { Input, InputFrame } from "@pswui/Input";
export function InputFrameDemo() { export function InputFrameDemo() {
return ( return (
<InputFrame> <InputFrame>
<Input type="text" unstyled /> <Input
<Button preset="success" size="icon"> type="text"
<svg unstyled
xmlns="http://www.w3.org/2000/svg" />
width="1.2em" <Button
height="1.2em" preset="success"
viewBox="0 0 24 24" size="icon"
> >
<path <svg
fill="currentColor" xmlns="http://www.w3.org/2000/svg"
d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5" width="1.2em"
/> height="1.2em"
</svg> viewBox="0 0 24 24"
</Button> >
</InputFrame> <title>Search</title>
); <path
} fill="currentColor"
d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5"
/>
</svg>
</Button>
</InputFrame>
);
}

25
src/docs/components/LabelBlocks/Examples/Disabled.tsx
View File

@ -1,11 +1,14 @@
import { Label } from "@pswui/Label"; import { Input } from "@pswui/Input";
import { Input } from "@pswui/Input"; import { Label } from "@pswui/Label";
export function Disabled() { export function Disabled() {
return ( return (
<Label direction="vertical"> <Label direction="vertical">
<span>Email</span> <span>Email</span>
<Input type="email" disabled /> <Input
</Label> type="email"
); disabled
} />
</Label>
);
}

22
src/docs/components/LabelBlocks/Examples/Horizontal.tsx
View File

@ -1,11 +1,11 @@
import { Label } from "@pswui/Label"; import { Checkbox } from "@pswui/Checkbox";
import { Checkbox } from "@pswui/Checkbox"; import { Label } from "@pswui/Label";
export function Horizontal() { export function Horizontal() {
return ( return (
<Label direction="horizontal"> <Label direction="horizontal">
<Checkbox /> <Checkbox />
<span>Checkbox</span> <span>Checkbox</span>
</Label> </Label>
); );
} }

25
src/docs/components/LabelBlocks/Examples/Invalid.tsx
View File

@ -1,11 +1,14 @@
import { Label } from "@pswui/Label"; import { Input } from "@pswui/Input";
import { Input } from "@pswui/Input"; import { Label } from "@pswui/Label";
export function Invalid() { export function Invalid() {
return ( return (
<Label direction="vertical"> <Label direction="vertical">
<span>Email</span> <span>Email</span>
<Input type="email" invalid="Invalid Email" /> <Input
</Label> type="email"
); invalid="Invalid Email"
} />
</Label>
);
}

22
src/docs/components/LabelBlocks/Examples/Vertical.tsx
View File

@ -1,11 +1,11 @@
import { Label } from "@pswui/Label"; import { Input } from "@pswui/Input";
import { Input } from "@pswui/Input"; import { Label } from "@pswui/Label";
export function Vertical() { export function Vertical() {
return ( return (
<Label direction="vertical"> <Label direction="vertical">
<span>Email</span> <span>Email</span>
<Input type="email" /> <Input type="email" />
</Label> </Label>
); );
} }

23
src/docs/components/LabelBlocks/Examples/index.ts
View File

@ -1,12 +1,11 @@
import { Vertical } from "./Vertical"; import { Disabled } from "./Disabled";
import { Horizontal } from "./Horizontal"; import { Horizontal } from "./Horizontal";
import { Invalid } from "./Invalid"; import { Invalid } from "./Invalid";
import { Disabled } from "./Disabled"; import { Vertical } from "./Vertical";
export default { export default {
Vertical, Vertical,
Horizontal, Horizontal,
Invalid, Invalid,
Disabled, Disabled,
}; };

22
src/docs/components/LabelBlocks/Preview.tsx
View File

@ -1,11 +1,11 @@
import { Label } from "@pswui/Label"; import { Input } from "@pswui/Input";
import { Input } from "@pswui/Input"; import { Label } from "@pswui/Label";
export function LabelDemo() { export function LabelDemo() {
return ( return (
<Label direction="vertical"> <Label direction="vertical">
<span>Email</span> <span>Email</span>
<Input type="email" /> <Input type="email" />
</Label> </Label>
); );
} }

117
src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx
View File

@ -1,43 +1,74 @@
import { Popover, PopoverTrigger, PopoverContent } from "@pswui/Popover.tsx"; import { Button } from "@pswui/Button.tsx";
import { Button } from "@pswui/Button.tsx"; import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover.tsx";
import { useState } from "react"; import { useState } from "react";
const DarkIcon = () => { const DarkIcon = () => {
// ic:baseline-dark-mode // ic:baseline-dark-mode
return <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24"> return (
<path fill="currentColor" <svg
d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1"/> xmlns="http://www.w3.org/2000/svg"
</svg> width="1.2em"
} height="1.2em"
viewBox="0 0 24 24"
const LightIcon = () => { >
// ic:baseline-light-mode <title>Dark</title>
return <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24"> <path
<path fill="currentColor" fill="currentColor"
d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z"/> d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1"
</svg> />
} </svg>
);
export const ThemeSelector = () => { };
const [theme, setTheme] = useState<"light" | "dark">("dark");
const LightIcon = () => {
return <Popover> // ic:baseline-light-mode
<PopoverTrigger> return (
<Button preset={"default"} size={"icon"}> <svg
{ xmlns="http://www.w3.org/2000/svg"
theme === "light" ? <LightIcon /> : <DarkIcon /> width="1.2em"
} height="1.2em"
</Button> viewBox="0 0 24 24"
</PopoverTrigger> >
<PopoverContent anchor={"bottomCenter"}> <title>Light</title>
<Button onClick={() => setTheme("dark")} preset={"ghost"} className={"gap-2"}> <path
<DarkIcon /> fill="currentColor"
<span className={"whitespace-nowrap"}>Dark Mode</span> d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z"
</Button> />
<Button onClick={() => setTheme("light")} preset={"ghost"} className={"gap-2"}> </svg>
<LightIcon /> );
<span className={"whitespace-nowrap"}>Light Mode</span> };
</Button>
</PopoverContent> export const ThemeSelector = () => {
</Popover> const [theme, setTheme] = useState<"light" | "dark">("dark");
}
return (
<Popover>
<PopoverTrigger>
<Button
preset={"default"}
size={"icon"}
>
{theme === "light" ? <LightIcon /> : <DarkIcon />}
</Button>
</PopoverTrigger>
<PopoverContent anchor={"bottomCenter"}>
<Button
onClick={() => setTheme("dark")}
preset={"ghost"}
className={"gap-2"}
>
<DarkIcon />
<span className={"whitespace-nowrap"}>Dark Mode</span>
</Button>
<Button
onClick={() => setTheme("light")}
preset={"ghost"}
className={"gap-2"}
>
<LightIcon />
<span className={"whitespace-nowrap"}>Light Mode</span>
</Button>
</PopoverContent>
</Popover>
);
};

308
src/docs/components/PopoverBlocks/Examples/UserControl.tsx
View File

@ -1,151 +1,157 @@
import { import { Button } from "@pswui/Button.tsx";
Popover, import { Input } from "@pswui/Input.tsx";
PopoverTrigger, import { Label } from "@pswui/Label.tsx";
PopoverContent, import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover.tsx";
} from "@pswui/Popover.tsx"; import { useToast } from "@pswui/Toast";
import { Button } from "@pswui/Button.tsx"; import {
import { useToast } from "@pswui/Toast"; type Dispatch,
import { type SVGProps,
createContext, type SetStateAction,
Dispatch, createContext,
SetStateAction, useContext,
SVGProps, useState,
useContext, useTransition,
useState, } from "react";
useTransition,
} from "react"; interface UserControlState {
import { Label } from "@pswui/Label.tsx"; signIn: boolean;
import { Input } from "@pswui/Input.tsx"; }
const initialState: UserControlState = {
interface UserControlState { signIn: false,
signIn: boolean; };
} const UserControlContext = createContext<
const initialState: UserControlState = { [UserControlState, Dispatch<SetStateAction<UserControlState>>]
signIn: false, >([initialState, () => {}]);
};
const UserControlContext = createContext< const logInServerAction = async () => {
[UserControlState, Dispatch<SetStateAction<UserControlState>>] return new Promise((r) => setTimeout(r, 2000));
>([initialState, () => {}]); };
const logInServerAction = async () => { const logOutServerAction = async () => {
return new Promise((r) => setTimeout(r, 2000)); return new Promise((r) => setTimeout(r, 1000));
}; };
const logOutServerAction = async () => { function MdiLoading(props: SVGProps<SVGSVGElement>) {
return new Promise((r) => setTimeout(r, 1000)); return (
}; <svg
xmlns="http://www.w3.org/2000/svg"
function MdiLoading(props: SVGProps<SVGSVGElement>) { width="1.2em"
return ( height="1.2em"
<svg viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" {...props}
width="1.2em" >
height="1.2em" <title>Loading</title>
viewBox="0 0 24 24" <path
{...props} fill="currentColor"
> d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8"
<path />
fill="currentColor" </svg>
d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8" );
></path> }
</svg>
); const SignInForm = () => {
} const [isSigningIn, setIsSigningIn] = useState(false);
const transition = useTransition();
const SignInForm = () => { const [_, setState] = useContext(UserControlContext);
const [isSigningIn, setIsSigningIn] = useState(false); const { toast } = useToast();
const transition = useTransition();
const [_, setState] = useContext(UserControlContext); function startSignIn() {
const { toast } = useToast(); transition[1](() => {
setIsSigningIn(true);
function startSignIn() { const toasted = toast({
transition[1](() => { title: "Logging In...",
setIsSigningIn(true); description: "Please wait until server responses",
const toasted = toast({ status: "loading",
title: "Logging In...", });
description: "Please wait until server responses", logInServerAction().then(() => {
status: "loading", toasted.update({
}); title: "Log In Success",
logInServerAction().then(() => { description: "Successfully logged in!",
toasted.update({ status: "success",
title: "Log In Success", });
description: "Successfully logged in!", setIsSigningIn(false);
status: "success", setState((prev) => ({ ...prev, signIn: true }));
}); });
setIsSigningIn(false); });
setState((prev) => ({ ...prev, signIn: true })); }
});
}); return (
} <PopoverContent
anchor={"bottomLeft"}
return ( className={"p-4 space-y-3"}
<PopoverContent anchor={"bottomLeft"} className={"p-4 space-y-3"}> >
<Label> <Label>
<span>Username</span> <span>Username</span>
<Input type={"text"} /> <Input type={"text"} />
</Label> </Label>
<Label> <Label>
<span>Password</span> <span>Password</span>
<Input type={"password"} /> <Input type={"password"} />
</Label> </Label>
<div className={"flex flex-row justify-end"}> <div className={"flex flex-row justify-end"}>
<Button preset={"success"} onClick={startSignIn}> <Button
{isSigningIn ? <MdiLoading className={"animate-spin"} /> : "Sign In"} preset={"success"}
</Button> onClick={startSignIn}
</div> >
</PopoverContent> {isSigningIn ? <MdiLoading className={"animate-spin"} /> : "Sign In"}
); </Button>
}; </div>
</PopoverContent>
const UserControlContent = () => { );
const [isSigningOut, setIsSigningOut] = useState(false); };
const transition = useTransition();
const [_, setState] = useContext(UserControlContext); const UserControlContent = () => {
const { toast } = useToast(); const [isSigningOut, setIsSigningOut] = useState(false);
const transition = useTransition();
function startSignOut() { const [_, setState] = useContext(UserControlContext);
transition[1](() => { const { toast } = useToast();
setIsSigningOut(true);
const toasted = toast({ function startSignOut() {
title: "Logging Out", transition[1](() => {
description: "Please wait until server responses", setIsSigningOut(true);
status: "loading", const toasted = toast({
}); title: "Logging Out",
logOutServerAction().then(() => { description: "Please wait until server responses",
toasted.update({ status: "loading",
title: "Log Out Success", });
description: "Successfully logged out!", logOutServerAction().then(() => {
status: "success", toasted.update({
}); title: "Log Out Success",
setIsSigningOut(false); description: "Successfully logged out!",
setState((prev) => ({ ...prev, signIn: false })); status: "success",
}); });
}); setIsSigningOut(false);
} setState((prev) => ({ ...prev, signIn: false }));
});
return ( });
<PopoverContent anchor={"bottomLeft"}> }
<Button preset={"ghost"}>Dashboard</Button>
<Button preset={"ghost"} onClick={startSignOut}> return (
{isSigningOut ? <MdiLoading className={"animate-spin"} /> : "Sign Out"} <PopoverContent anchor={"bottomLeft"}>
</Button> <Button preset={"ghost"}>Dashboard</Button>
</PopoverContent> <Button
); preset={"ghost"}
}; onClick={startSignOut}
>
export const UserControl = () => { {isSigningOut ? <MdiLoading className={"animate-spin"} /> : "Sign Out"}
const [state, setState] = useState<UserControlState>({ </Button>
signIn: false, </PopoverContent>
}); );
};
return (
<Popover> export const UserControl = () => {
<PopoverTrigger> const [state, setState] = useState<UserControlState>({
<Button>{state.signIn ? "Log Out" : "Log In"}</Button> signIn: false,
</PopoverTrigger> });
<UserControlContext.Provider value={[state, setState]}>
{state.signIn ? <UserControlContent /> : <SignInForm />} return (
</UserControlContext.Provider> <Popover>
</Popover> <PopoverTrigger>
); <Button>{state.signIn ? "Log Out" : "Log In"}</Button>
}; </PopoverTrigger>
<UserControlContext.Provider value={[state, setState]}>
{state.signIn ? <UserControlContent /> : <SignInForm />}
</UserControlContext.Provider>
</Popover>
);
};

14
src/docs/components/PopoverBlocks/Examples/index.ts
View File

@ -1,7 +1,7 @@
import { ThemeSelector } from "./ThemeSelector"; import { ThemeSelector } from "./ThemeSelector";
import { UserControl } from "./UserControl"; import { UserControl } from "./UserControl";
export default { export default {
ThemeSelector, ThemeSelector,
UserControl, UserControl,
} };

117
src/docs/components/PopoverBlocks/Preview.tsx
View File

@ -1,54 +1,63 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover"; import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover";
export function PopoverDemo() { export function PopoverDemo() {
return ( return (
<Popover> <Popover>
<PopoverTrigger> <PopoverTrigger>
<Button size="icon"> <Button size="icon">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="1.2em" width="1.2em"
height="1.2em" height="1.2em"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
<path <title>User</title>
fill="currentColor" <path
d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4" fill="currentColor"
/> d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"
</svg> />
</Button> </svg>
</PopoverTrigger> </Button>
<PopoverContent> </PopoverTrigger>
<Button preset="ghost" className="gap-2"> <PopoverContent>
<svg <Button
xmlns="http://www.w3.org/2000/svg" preset="ghost"
width="1.2em" className="gap-2"
height="1.2em" >
viewBox="0 0 24 24" <svg
> xmlns="http://www.w3.org/2000/svg"
<path width="1.2em"
fill="currentColor" height="1.2em"
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" viewBox="0 0 24 24"
/> >
</svg> <title>Dashboard</title>
<span className="flex-grow text-left">Dashboard</span> <path
</Button> fill="currentColor"
<Button preset="ghost" className="gap-2"> d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
<svg />
xmlns="http://www.w3.org/2000/svg" </svg>
width="1.2em" <span className="flex-grow text-left">Dashboard</span>
height="1.2em" </Button>
viewBox="0 0 24 24" <Button
> preset="ghost"
<path className="gap-2"
fill="currentColor" >
d="m17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5M4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z" <svg
/> xmlns="http://www.w3.org/2000/svg"
</svg> width="1.2em"
<span className="flex-grow text-left">Log out</span> height="1.2em"
</Button> viewBox="0 0 24 24"
</PopoverContent> >
</Popover> <title>Log out</title>
); <path
} fill="currentColor"
d="m17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5M4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z"
/>
</svg>
<span className="flex-grow text-left">Log out</span>
</Button>
</PopoverContent>
</Popover>
);
}

10
src/docs/components/SwitchBlocks/Preview.tsx
View File

@ -1,5 +1,5 @@
import { Switch } from "@pswui/Switch"; import { Switch } from "@pswui/Switch";
export function SwitchDemo() { export function SwitchDemo() {
return <Switch />; return <Switch />;
} }

36
src/docs/components/TabsBlocks/Preview.tsx
View File

@ -1,18 +1,18 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"; import { TabContent, TabList, TabProvider, TabTrigger } from "@pswui/Tabs";
export function TabsDemo() { export function TabsDemo() {
return ( return (
<TabProvider defaultName="tab1"> <TabProvider defaultName="tab1">
<TabList> <TabList>
<TabTrigger name="tab1">Tab 1</TabTrigger> <TabTrigger name="tab1">Tab 1</TabTrigger>
<TabTrigger name="tab2">Tab 2</TabTrigger> <TabTrigger name="tab2">Tab 2</TabTrigger>
</TabList> </TabList>
<TabContent name="tab1"> <TabContent name="tab1">
<div className="w-full text-center">Tab 1 Content</div> <div className="w-full text-center">Tab 1 Content</div>
</TabContent> </TabContent>
<TabContent name="tab2"> <TabContent name="tab2">
<div className="w-full text-center">Tab 2 Content</div> <div className="w-full text-center">Tab 2 Content</div>
</TabContent> </TabContent>
</TabProvider> </TabProvider>
); );
} }

59
src/docs/components/ToastBlocks/Examples/Error.tsx
View File

@ -1,29 +1,30 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Toaster, useToast } from "@pswui/Toast"; import { Toaster, useToast } from "@pswui/Toast";
function Children() { function Children() {
const { toast } = useToast(); const { toast } = useToast();
return ( return (
<Button <Button
onClick={() => onClick={() =>
toast({ toast({
title: "Toast Title", title: "Toast Title",
description: "Toast Description", description: "Toast Description",
status: "error", status: "error",
}) })
} }
> >
Toast Toast
</Button> </Button>
); );
} }
export function Error() { /* not shadowing global Error (lol) */
return ( export function _Error() {
<> return (
<Toaster /> <>
<Children /> <Toaster />
</> <Children />
); </>
} );
}

58
src/docs/components/ToastBlocks/Examples/Normal.tsx
View File

@ -1,29 +1,29 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Toaster, useToast } from "@pswui/Toast"; import { Toaster, useToast } from "@pswui/Toast";
function Children() { function Children() {
const { toast } = useToast(); const { toast } = useToast();
return ( return (
<Button <Button
onClick={() => onClick={() =>
toast({ toast({
title: "Toast Title", title: "Toast Title",
description: "Toast Description", description: "Toast Description",
status: "default", status: "default",
}) })
} }
> >
Toast Toast
</Button> </Button>
); );
} }
export function Normal() { export function Normal() {
return ( return (
<> <>
<Toaster /> <Toaster />
<Children /> <Children />
</> </>
); );
} }

70
src/docs/components/ToastBlocks/Examples/PendingFail.tsx
View File

@ -1,35 +1,35 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Toaster, useToast } from "@pswui/Toast"; import { Toaster, useToast } from "@pswui/Toast";
function Children() { function Children() {
const { toast } = useToast(); const { toast } = useToast();
return ( return (
<Button <Button
onClick={async () => { onClick={async () => {
const toasted = toast({ const toasted = toast({
title: "Waiting...", title: "Waiting...",
description: "Waiting for result...", description: "Waiting for result...",
status: "loading", status: "loading",
}); });
await new Promise((r) => setTimeout(r, 1000)); await new Promise((r) => setTimeout(r, 1000));
toasted.update({ toasted.update({
title: "Promise Failed", title: "Promise Failed",
description: "Something went wrong!", description: "Something went wrong!",
status: "error", status: "error",
}); });
}} }}
> >
Toast Toast
</Button> </Button>
); );
} }
export function PendingFail() { export function PendingFail() {
return ( return (
<> <>
<Toaster /> <Toaster />
<Children /> <Children />
</> </>
); );
} }

74
src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx
View File

@ -1,37 +1,37 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Toaster, useToast } from "@pswui/Toast"; import { Toaster, useToast } from "@pswui/Toast";
function Children() { function Children() {
const { toast } = useToast(); const { toast } = useToast();
return ( return (
<Button <Button
onClick={async () => { onClick={async () => {
const toasted = toast({ const toasted = toast({
title: "Waiting...", title: "Waiting...",
description: "Waiting for result...", description: "Waiting for result...",
status: "loading", status: "loading",
}); });
await new Promise((r) => setTimeout(r, 1000)); await new Promise((r) => setTimeout(r, 1000));
toasted.update({ toasted.update({
title: "Promise Success", title: "Promise Success",
description: "Promise resolved!", description: "Promise resolved!",
status: "success", status: "success",
}); });
}} }}
> >
Toast Toast
</Button> </Button>
); );
} }
export function PendingSuccess() { export function PendingSuccess() {
return ( return (
<> <>
<Toaster /> <Toaster />
<Children /> <Children />
</> </>
); );
} }

58
src/docs/components/ToastBlocks/Examples/Success.tsx
View File

@ -1,29 +1,29 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Toaster, useToast } from "@pswui/Toast"; import { Toaster, useToast } from "@pswui/Toast";
function Children() { function Children() {
const { toast } = useToast(); const { toast } = useToast();
return ( return (
<Button <Button
onClick={() => onClick={() =>
toast({ toast({
title: "Toast Title", title: "Toast Title",
description: "Toast Description", description: "Toast Description",
status: "success", status: "success",
}) })
} }
> >
Toast Toast
</Button> </Button>
); );
} }
export function Success() { export function Success() {
return ( return (
<> <>
<Toaster /> <Toaster />
<Children /> <Children />
</> </>
); );
} }

58
src/docs/components/ToastBlocks/Examples/Warning.tsx
View File

@ -1,29 +1,29 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Toaster, useToast } from "@pswui/Toast"; import { Toaster, useToast } from "@pswui/Toast";
function Children() { function Children() {
const { toast } = useToast(); const { toast } = useToast();
return ( return (
<Button <Button
onClick={() => onClick={() =>
toast({ toast({
title: "Toast Title", title: "Toast Title",
description: "Toast Description", description: "Toast Description",
status: "warning", status: "warning",
}) })
} }
> >
Toast Toast
</Button> </Button>
); );
} }
export function Warning() { export function Warning() {
return ( return (
<> <>
<Toaster /> <Toaster />
<Children /> <Children />
</> </>
); );
} }

31
src/docs/components/ToastBlocks/Examples/index.ts
View File

@ -1,16 +1,15 @@
import { Error } from "./Error"; import { _Error } from "./Error";
import { Normal } from "./Normal"; import { Normal } from "./Normal";
import { PendingFail } from "./PendingFail"; import { PendingFail } from "./PendingFail";
import { PendingSuccess } from "./PendingSuccess"; import { PendingSuccess } from "./PendingSuccess";
import { Success } from "./Success"; import { Success } from "./Success";
import { Warning } from "./Warning"; import { Warning } from "./Warning";
export default { export default {
Error, Error: _Error /* not shadowing global Error (lol) */,
Normal, Normal,
PendingFail, PendingFail,
PendingSuccess, PendingSuccess,
Success, Success,
Warning, Warning,
}; };

50
src/docs/components/ToastBlocks/Preview.tsx
View File

@ -1,25 +1,25 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Toaster, useToast } from "@pswui/Toast"; import { Toaster, useToast } from "@pswui/Toast";
function Children() { function Children() {
const { toast } = useToast(); const { toast } = useToast();
return ( return (
<Button <Button
onClick={() => onClick={() =>
toast({ title: "Toast Title", description: "Toast Description" }) toast({ title: "Toast Title", description: "Toast Description" })
} }
> >
Toast Toast
</Button> </Button>
); );
} }
export function ToastDemo() { export function ToastDemo() {
return ( return (
<> <>
<Toaster /> <Toaster />
<Children /> <Children />
</> </>
); );
} }

26
src/docs/components/TooltipBlocks/Examples/Bottom.tsx
View File

@ -1,13 +1,13 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
export function Bottom() { export function Bottom() {
return ( return (
<Tooltip position="bottom"> <Tooltip position="bottom">
<TooltipContent> <TooltipContent>
<p>Tooltip!</p> <p>Tooltip!</p>
</TooltipContent> </TooltipContent>
<Button>Hover me</Button> <Button>Hover me</Button>
</Tooltip> </Tooltip>
); );
} }

36
src/docs/components/TooltipBlocks/Examples/Controlled.tsx
View File

@ -1,16 +1,20 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
import { useState } from "react"; import { useState } from "react";
export function Controlled() { export function Controlled() {
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
return ( return (
<Tooltip position="top" controlled opened={opened}> <Tooltip
<TooltipContent delay={"early"}> position="top"
<p>Tooltip!</p> controlled
</TooltipContent> opened={opened}
<Button onClick={() => setOpened((p) => !p)}>Open hover</Button> >
</Tooltip> <TooltipContent delay={"early"}>
); <p>Tooltip!</p>
} </TooltipContent>
<Button onClick={() => setOpened((p) => !p)}>Open hover</Button>
</Tooltip>
);
}

26
src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx
View File

@ -1,13 +1,13 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
export function EarlyDelay() { export function EarlyDelay() {
return ( return (
<Tooltip position="bottom"> <Tooltip position="bottom">
<TooltipContent delay={"early"}> <TooltipContent delay={"early"}>
<p>Tooltip!</p> <p>Tooltip!</p>
</TooltipContent> </TooltipContent>
<Button>Hover me</Button> <Button>Hover me</Button>
</Tooltip> </Tooltip>
); );
} }

26
src/docs/components/TooltipBlocks/Examples/LateDelay.tsx
View File

@ -1,13 +1,13 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
export function LateDelay() { export function LateDelay() {
return ( return (
<Tooltip position="bottom"> <Tooltip position="bottom">
<TooltipContent delay={"late"}> <TooltipContent delay={"late"}>
<p>Tooltip!</p> <p>Tooltip!</p>
</TooltipContent> </TooltipContent>
<Button>Hover me</Button> <Button>Hover me</Button>
</Tooltip> </Tooltip>
); );
} }

26
src/docs/components/TooltipBlocks/Examples/Left.tsx
View File

@ -1,13 +1,13 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
export function Left() { export function Left() {
return ( return (
<Tooltip position="left"> <Tooltip position="left">
<TooltipContent> <TooltipContent>
<p>Tooltip!</p> <p>Tooltip!</p>
</TooltipContent> </TooltipContent>
<Button>Hover me</Button> <Button>Hover me</Button>
</Tooltip> </Tooltip>
); );
} }

26
src/docs/components/TooltipBlocks/Examples/NoDelay.tsx
View File

@ -1,13 +1,13 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
export function NoDelay() { export function NoDelay() {
return ( return (
<Tooltip position="bottom"> <Tooltip position="bottom">
<TooltipContent delay={"none"}> <TooltipContent delay={"none"}>
<p>Tooltip!</p> <p>Tooltip!</p>
</TooltipContent> </TooltipContent>
<Button>Hover me</Button> <Button>Hover me</Button>
</Tooltip> </Tooltip>
); );
} }

26
src/docs/components/TooltipBlocks/Examples/Right.tsx
View File

@ -1,13 +1,13 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
export function Right() { export function Right() {
return ( return (
<Tooltip position="right"> <Tooltip position="right">
<TooltipContent> <TooltipContent>
<p>Tooltip!</p> <p>Tooltip!</p>
</TooltipContent> </TooltipContent>
<Button>Hover me</Button> <Button>Hover me</Button>
</Tooltip> </Tooltip>
); );
} }

26
src/docs/components/TooltipBlocks/Examples/Top.tsx
View File

@ -1,13 +1,13 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
export function Top() { export function Top() {
return ( return (
<Tooltip position="top"> <Tooltip position="top">
<TooltipContent> <TooltipContent>
<p>Tooltip!</p> <p>Tooltip!</p>
</TooltipContent> </TooltipContent>
<Button>Hover me</Button> <Button>Hover me</Button>
</Tooltip> </Tooltip>
); );
} }

38
src/docs/components/TooltipBlocks/Examples/index.ts
View File

@ -1,19 +1,19 @@
import { Bottom } from "./Bottom"; import { Bottom } from "./Bottom";
import { Left } from "./Left"; import { Controlled } from "./Controlled";
import { Right } from "./Right"; import { EarlyDelay } from "./EarlyDelay";
import { Top } from "./Top"; import { LateDelay } from "./LateDelay";
import { NoDelay } from "./NoDelay"; import { Left } from "./Left";
import { EarlyDelay } from "./EarlyDelay"; import { NoDelay } from "./NoDelay";
import { LateDelay } from "./LateDelay"; import { Right } from "./Right";
import { Controlled } from "./Controlled"; import { Top } from "./Top";
export default { export default {
Bottom, Bottom,
Left, Left,
Right, Right,
Top, Top,
NoDelay, NoDelay,
EarlyDelay, EarlyDelay,
LateDelay, LateDelay,
Controlled, Controlled,
}; };

26
src/docs/components/TooltipBlocks/Preview.tsx
View File

@ -1,13 +1,13 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
export function TooltipDemo() { export function TooltipDemo() {
return ( return (
<Tooltip> <Tooltip>
<TooltipContent> <TooltipContent>
<p>Tooltip!</p> <p>Tooltip!</p>
</TooltipContent> </TooltipContent>
<Button>Hover me</Button> <Button>Hover me</Button>
</Tooltip> </Tooltip>
); );
} }

47
src/errors/PageNotFound.tsx
View File

@ -1,22 +1,25 @@
import { Link } from "react-router-dom"; import { Button } from "@pswui/Button";
import { Button } from "@pswui/Button"; import { Link } from "react-router-dom";
function PageNotFound() { function PageNotFound() {
return ( return (
<main className="flex-grow h-full flex flex-col justify-center items-center gap-8"> <main className="flex-grow h-full flex flex-col justify-center items-center gap-8">
<section className="flex flex-col justify-center items-center text-center gap-2"> <section className="flex flex-col justify-center items-center text-center gap-2">
<h1 className="text-4xl font-bold">Page not found</h1> <h1 className="text-4xl font-bold">Page not found</h1>
<p className="text-base"> <p className="text-base">
The page you are looking for does not exist. The page you are looking for does not exist.
</p> </p>
</section> </section>
<section className="flex flex-row justify-center items-center text-center gap-2"> <section className="flex flex-row justify-center items-center text-center gap-2">
<Button asChild preset="default"> <Button
<Link to="/">Go home</Link> asChild
</Button> preset="default"
</section> >
</main> <Link to="/">Go home</Link>
); </Button>
} </section>
</main>
export default PageNotFound; );
}
export default PageNotFound;

47
src/errors/Unexpected.tsx
View File

@ -1,22 +1,25 @@
import { Link } from "react-router-dom"; import { Button } from "@pswui/Button";
import { Button } from "@pswui/Button"; import { Link } from "react-router-dom";
function UnexpectedError() { function UnexpectedError() {
return ( return (
<main className="flex-grow h-full flex flex-col justify-center items-center gap-8"> <main className="flex-grow h-full flex flex-col justify-center items-center gap-8">
<section className="flex flex-col justify-center items-center text-center gap-2"> <section className="flex flex-col justify-center items-center text-center gap-2">
<h1 className="text-4xl font-bold">Something went wrong</h1> <h1 className="text-4xl font-bold">Something went wrong</h1>
<p className="text-base"> <p className="text-base">
There was an unexpected error while loading the page. There was an unexpected error while loading the page.
</p> </p>
</section> </section>
<section className="flex flex-row justify-center items-center text-center gap-2"> <section className="flex flex-row justify-center items-center text-center gap-2">
<Button asChild preset="default"> <Button
<Link to="/">Go home</Link> asChild
</Button> preset="default"
</section> >
</main> <Link to="/">Go home</Link>
); </Button>
} </section>
</main>
export default UnexpectedError; );
}
export default UnexpectedError;

24
src/main.tsx
View File

@ -1,10 +1,14 @@
import "./tailwind.css"; import "./tailwind.css";
import React from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import App from "./App.tsx"; import App from "./App.tsx";
ReactDOM.createRoot(document.getElementById("root")!).render( const ROOT = document.getElementById("root");
<React.StrictMode>
<App /> if (!ROOT) throw new Error("root is not found");
</React.StrictMode>
); ReactDOM.createRoot(ROOT).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);

14
src/mdx.d.ts vendored
View File

@ -1,7 +1,7 @@
declare module '*.mdx' { declare module "*.mdx" {
import type { MDXProps } from 'mdx/types' import type { MDXProps } from "mdx/types";
import type { Toc } from '@stefanprobst/rehype-extract-toc' import type { Toc } from "@stefanprobst/rehype-extract-toc";
export const tableOfContents: Toc export const tableOfContents: Toc;
export default function MDXContent(props: MDXProps): JSX.Element export default function MDXContent(props: MDXProps): JSX.Element;
} }

12
src/vite-env.d.ts vendored
View File

@ -1,6 +1,6 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
import { ImportGlobFunction } from "vite/types/importGlob"; import type { ImportGlobFunction } from "vite/types/importGlob";
interface ImportMeta { interface ImportMeta {
glob: ImportGlobFunction; glob: ImportGlobFunction;
} }

2
tailwind.config.js
View File

@ -12,4 +12,4 @@ module.exports = {
extend: {}, extend: {},
}, },
plugins: [require("@tailwindcss/typography"), require("tailwind-scrollbar")], plugins: [require("@tailwindcss/typography"), require("tailwind-scrollbar")],
}; };

2
tsconfig.json
View File

@ -30,4 +30,4 @@
}, },
"include": ["src"], "include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }] "references": [{ "path": "./tsconfig.node.json" }]
} }

2
tsconfig.node.json
View File

@ -8,4 +8,4 @@
"strict": true "strict": true
}, },
"include": ["vite.config.ts"] "include": ["vite.config.ts"]
} }

16
vite.config.ts
View File

@ -1,12 +1,12 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";
import mdx from "@mdx-js/rollup";
import { resolve } from "node:path"; import { resolve } from "node:path";
import remarkGfm from "remark-gfm"; import mdx from "@mdx-js/rollup";
import withSlug from "rehype-slug";
import withToc from "@stefanprobst/rehype-extract-toc"; import withToc from "@stefanprobst/rehype-extract-toc";
import withTocExport from "@stefanprobst/rehype-extract-toc/mdx"; import withTocExport from "@stefanprobst/rehype-extract-toc/mdx";
import react from "@vitejs/plugin-react";
import withSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite";
import dynamicImport from "vite-plugin-dynamic-import"; import dynamicImport from "vite-plugin-dynamic-import";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
@ -31,5 +31,5 @@ export default defineConfig({
"@pswui-lib": resolve(__dirname, "./src/pswui/lib"), "@pswui-lib": resolve(__dirname, "./src/pswui/lib"),
}, },
}, },
cacheDir: './.vite' cacheDir: "./.vite",
}); });