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"
}

112
src/App.tsx
View File

@ -1,37 +1,37 @@
import { Code } from "@/components/LoadedCode";
import {
Route,
RouterProvider,
createBrowserRouter,
createRoutesFromElements,
RouterProvider,
redirect,
} from "react-router-dom";
import MainLayout from "./MainLayout";
import Home from "./Home";
import DocsLayout from "./DocsLayout";
import ErrorBoundary from "./ErrorHandler";
import DynamicLayout from "./DynamicLayout";
import { Code } from "@/components/LoadedCode";
import ErrorBoundary from "./ErrorHandler";
import Home from "./Home";
import MainLayout from "./MainLayout";
import DocsIntroduction, {
tableOfContents as docsIntroductionToc,
} from "./docs/introduction.mdx";
import DocsInstallation, {
tableOfContents as docsInstallationToc,
} from "./docs/installation.mdx";
import DocsConfiguration, {
tableOfContents as docsConfigurationToc,
} from "./docs/configuration.mdx";
import DocsInstallation, {
tableOfContents as docsInstallationToc,
} from "./docs/installation.mdx";
import DocsIntroduction, {
tableOfContents as docsIntroductionToc,
} from "./docs/introduction.mdx";
import { HeadingContext } from "./HeadingContext";
import { Tooltip, TooltipContent } from "@pswui/Tooltip";
import React, {
ForwardedRef,
type ForwardedRef,
forwardRef,
useContext,
useEffect,
useRef,
useState,
} from "react";
import { Tooltip, TooltipContent } from "@pswui/Tooltip";
import { HeadingContext } from "./HeadingContext";
function buildThresholdList() {
const thresholds: number[] = [];
@ -46,8 +46,10 @@ function buildThresholdList() {
return thresholds;
}
type HashedHeaderProps = React.ComponentPropsWithoutRef<"h1">;
function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
return (prop: any, ref: ForwardedRef<HTMLHeadingElement>) => {
return (prop: HashedHeaderProps, ref: ForwardedRef<HTMLHeadingElement>) => {
const internalRef = useRef<HTMLHeadingElement | null>(null);
const [_, setActiveHeadings] = useContext(HeadingContext);
@ -74,7 +76,7 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
return () => {
observer.disconnect();
};
}, [internalRef.current]);
}, [setActiveHeadings]);
const [status, setStatus] = useState<"normal" | "error" | "success">(
"normal",
@ -97,7 +99,10 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
}, [status]);
return (
<Tooltip asChild position={"right"}>
<Tooltip
asChild
position={"right"}
>
<Level
ref={(el) => {
internalRef.current = el;
@ -111,7 +116,7 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
onClick={async (e) => {
try {
await navigator.clipboard.writeText(
window.location.href.split("#")[0] + "#" + e.currentTarget.id,
`${window.location.href.split("#")[0]}#${e.currentTarget.id}`,
);
setStatus("success");
} catch (e) {
@ -121,7 +126,11 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
{...restProp}
>
{children}
<TooltipContent status={status} offset={"lg"} delay={"early"}>
<TooltipContent
status={status}
offset={"lg"}
delay={"early"}
>
<p className={"text-base font-normal whitespace-nowrap not-prose"}>
{messages[status]}
</p>
@ -133,36 +142,51 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
}
const overrideComponents = {
pre: (props: any) => {
const {
props: { children, className },
} = React.cloneElement(React.Children.only(props.children));
pre: (props: React.ComponentPropsWithoutRef<"pre">) => {
if (!React.isValidElement(props.children)) {
return null;
}
const language =
(!className || !className.includes("language-")
? "typescript"
: /language-([a-z]+)/.exec(className)![1]) ?? "typescript";
const { props: clonedProps } = React.cloneElement(
React.Children.only(props.children),
);
const { children, className } = clonedProps as {
children: React.ReactNode;
className?: string;
};
let language = "typescript";
if (className) {
const detectedLanguage = /language-([a-z]+)/.exec(className);
if (detectedLanguage) language = detectedLanguage[1];
}
return <Code language={language}>{children as string}</Code>;
},
code: forwardRef<HTMLElement, any>((props: any, ref) => (
code: forwardRef<HTMLElement, { className?: string }>((props, ref) => (
<code
ref={ref}
{...props}
className={`${props.className} rounded-md bg-neutral-800 text-orange-500 font-light p-1 before:content-none after:content-none`}
/>
)),
table: forwardRef<HTMLTableElement, any>((props: any, ref) => (
table: forwardRef<HTMLTableElement, { className?: string }>((props, ref) => (
<div className="overflow-auto">
<table ref={ref} {...props} className={`${props.className}`} />
<table
ref={ref}
{...props}
className={`${props.className}`}
/>
</div>
)),
h1: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h1")),
h2: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h2")),
h3: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h3")),
h4: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h4")),
h5: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h5")),
h6: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h6")),
h1: forwardRef<HTMLHeadingElement, HashedHeaderProps>(HashedHeaders("h1")),
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");
@ -194,7 +218,11 @@ const REDIRECTED_404 = /^\?(\/([a-zA-Z0-9\-_]+\/?)+)(&.*)*$/;
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}>
<Route
path="/"
element={<MainLayout />}
errorElement={<ErrorBoundary />}
>
<Route
index
loader={() =>
@ -204,8 +232,14 @@ const router = createBrowserRouter(
}
element={<Home />}
/>
<Route path="docs" element={<DocsLayout />}>
<Route index loader={() => redirect("/docs/introduction")} />
<Route
path="docs"
element={<DocsLayout />}
>
<Route
index
loader={() => redirect("/docs/introduction")}
/>
<Route
path="introduction"
element={

8
src/DynamicLayout.tsx
View File

@ -1,5 +1,5 @@
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 { HeadingContext } from "./HeadingContext";
@ -21,8 +21,8 @@ function RecursivelyToc({ toc }: { toc: Toc }) {
activeHeadings.includes(tocEntry.id ?? "")
? true
: location.hash.length > 0
? location.hash === `#${tocEntry.id}`
: false
? location.hash === `#${tocEntry.id}`
: false
}
>
<a href={`#${tocEntry.id}`}>{tocEntry.value}</a>

8
src/ErrorHandler.tsx
View File

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

2
src/HeadingContext.tsx
View File

@ -1,4 +1,4 @@
import { Dispatch, SetStateAction, createContext } from "react";
import { type Dispatch, type SetStateAction, createContext } from "react";
export const HeadingContext = createContext<
[string[], Dispatch<SetStateAction<string[]>>]

12
src/Home.tsx
View File

@ -1,5 +1,5 @@
import { Link } from "react-router-dom";
import { Button } from "@pswui/Button";
import { Link } from "react-router-dom";
function Home() {
return (
@ -15,10 +15,16 @@ function Home() {
</p>
</header>
<div className="flex flex-row justify-center items-center gap-2">
<Button asChild preset="default">
<Button
asChild
preset="default"
>
<Link to="/docs">Get Started</Link>
</Button>
<Button asChild preset="ghost">
<Button
asChild
preset="ghost"
>
<Link to="/docs/components">Components</Link>
</Button>
</div>

58
src/MainLayout.tsx
View File

@ -1,9 +1,4 @@
import { useEffect, useState } from "react";
import { Link, Outlet, useLocation } from "react-router-dom";
import { Button } from "@pswui/Button";
import RouteObject from "./RouteObject";
import { Toaster } from "@pswui/Toast";
import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover";
import {
DrawerClose,
DrawerContent,
@ -11,12 +6,17 @@ import {
DrawerRoot,
DrawerTrigger,
} from "@pswui/Drawer";
import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover";
import { Toaster } from "@pswui/Toast";
import { useEffect, useState } from "react";
import { Link, Outlet, useLocation } from "react-router-dom";
import RouteObject from "./RouteObject";
type Theme = "light" | "dark" | "system";
function ThemeButton() {
const [theme, setTheme] = useState<Theme>(
(localStorage.getItem("theme") as Theme) || "system"
(localStorage.getItem("theme") as Theme) || "system",
);
useEffect(() => {
document.documentElement.classList.toggle("dark", theme === "dark");
@ -27,7 +27,10 @@ function ThemeButton() {
return (
<Popover>
<PopoverTrigger>
<Button preset="ghost" size="icon">
<Button
preset="ghost"
size="icon"
>
{/* material-symbols:light-mode */}
<svg
xmlns="http://www.w3.org/2000/svg"
@ -36,6 +39,7 @@ function ThemeButton() {
viewBox="0 0 24 24"
className="dark:hidden"
>
<title>Sun</title>
<path
fill="currentColor"
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"
@ -49,6 +53,7 @@ function ThemeButton() {
viewBox="0 0 24 24"
className="hidden dark:block"
>
<title>Moon</title>
<path
fill="currentColor"
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"
@ -56,7 +61,10 @@ function ThemeButton() {
</svg>
</Button>
</PopoverTrigger>
<PopoverContent anchor="bottomLeft" className="w-32">
<PopoverContent
anchor="bottomLeft"
className="w-32"
>
<Button
preset="ghost"
onClick={() => setTheme("light")}
@ -97,7 +105,10 @@ function TopNav() {
data-role="links"
className="hidden md:flex flex-row items-center gap-3"
>
<Link to="/" className="font-bold">
<Link
to="/"
className="font-bold"
>
PSW/UI
</Link>
{RouteObject.mainNav.map((link) => {
@ -113,10 +124,16 @@ function TopNav() {
);
})}
</div>
<div data-role="mobile-links" className="flex md:hidden">
<div
data-role="mobile-links"
className="flex md:hidden"
>
<DrawerRoot>
<DrawerTrigger>
<Button preset="ghost" size="icon">
<Button
preset="ghost"
size="icon"
>
{/* mdi:menu */}
<svg
xmlns="http://www.w3.org/2000/svg"
@ -124,6 +141,7 @@ function TopNav() {
height="1.2em"
viewBox="0 0 24 24"
>
<title>Menu</title>
<path
fill="currentColor"
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
@ -134,7 +152,10 @@ function TopNav() {
<DrawerOverlay className="z-[99]">
<DrawerContent className="w-[300px] overflow-auto">
<DrawerClose className="absolute top-4 right-4">
<Button preset="ghost" size="icon">
<Button
preset="ghost"
size="icon"
>
{/* mdi:close */}
<svg
xmlns="http://www.w3.org/2000/svg"
@ -142,6 +163,7 @@ function TopNav() {
height="1.2em"
viewBox="0 0 24 24"
>
<title>Close</title>
<path
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"
@ -152,7 +174,10 @@ function TopNav() {
<div className="flex flex-col justify-start items-start gap-6 text-lg">
<div className="flex flex-col justify-start items-start gap-3">
<DrawerClose>
<Link to="/" className="font-extrabold">
<Link
to="/"
className="font-extrabold"
>
PSW/UI
</Link>
</DrawerClose>
@ -186,14 +211,17 @@ function TopNav() {
})}
</div>
);
}
},
)}
</div>
</DrawerContent>
</DrawerOverlay>
</DrawerRoot>
</div>
<div data-role="controls" className="flex flex-row items-center">
<div
data-role="controls"
className="flex flex-row items-center"
>
<ThemeButton />
</div>
</div>

6
src/RouteObject.ts
View File

@ -43,15 +43,15 @@ const sideNav: Record<
Components: [],
};
Object.keys(docsModules).forEach((path) => {
for (const path of Object.keys(docsModules)) {
const name = (path.split("/").pop() ?? "").replace(".mdx", "");
sideNav["Components"].push({
sideNav.Components.push({
path: path.replace("./docs", "/docs").replace(".mdx", ""),
name: name.charAt(0).toUpperCase() + name.slice(1),
eq: (pathname: string) =>
pathname === path.replace("./docs", "/docs").replace(".mdx", ""),
});
});
}
export default {
mainNav,

25
src/components/LoadedCode.tsx
View File

@ -1,16 +1,20 @@
import { Button } from "@pswui/Button";
import { useToast } from "@pswui/Toast";
import { forwardRef, useEffect, useState } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { Button } from "@pswui/Button";
import { useToast } from "@pswui/Toast";
import { twMerge } from "tailwind-merge";
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_COMP = (componentName: string) => `${GITHUB_UI}/packages/react/components/${componentName}.tsx`
export const GITHUB_DIR_COMP = (componentName: string, source: string) => `${GITHUB_UI}/packages/react/components/${componentName}/${source}`
export const GITHUB_COMP_PREVIEW = (componentName: string) => `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Preview.tsx`
export const GITHUB_STORY = (componentName: string, storyName: string) => `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`;
export const GITHUB_COMP = (componentName: string) =>
`${GITHUB_UI}/packages/react/components/${componentName}.tsx`;
export const GITHUB_DIR_COMP = (componentName: string, source: string) =>
`${GITHUB_UI}/packages/react/components/${componentName}/${source}`;
export const GITHUB_COMP_PREVIEW = (componentName: string) =>
`${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Preview.tsx`;
export const GITHUB_STORY = (componentName: string, storyName: string) =>
`${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`;
export const LoadedCode = ({
from,
@ -59,6 +63,7 @@ export const LoadedCode = ({
height="1.2em"
viewBox="0 0 24 24"
>
<title>Copy</title>
<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"
@ -84,7 +89,10 @@ export const Code = forwardRef<
const { toast } = useToast();
return (
<div className={twMerge("relative", className)} ref={ref}>
<div
className={twMerge("relative", className)}
ref={ref}
>
<Button
preset="default"
size="icon"
@ -104,6 +112,7 @@ export const Code = forwardRef<
height="1.2em"
viewBox="0 0 24 24"
>
<title>Copy</title>
<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"
@ -113,7 +122,7 @@ export const Code = forwardRef<
<SyntaxHighlighter
language={language}
style={gruvboxDark}
className={`w-full h-auto max-h-64 rounded-lg scrollbar-none`}
className={"w-full h-auto max-h-64 rounded-lg scrollbar-none"}
customStyle={{ padding: "1rem" }}
>
{children}

2
src/components/Story.tsx
View File

@ -19,7 +19,7 @@ const Story = React.forwardRef<
<div
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]}`,
className
className,
)}
ref={ref}
id={id}

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

@ -1,9 +1,9 @@
import { Danger } from "./Danger";
import { Warning } from "./Warning";
import { Success } from "./Success";
import { Link } from "./Link";
import { Ghost } from "./Ghost";
import { Default } from "./Default";
import { Ghost } from "./Ghost";
import { Link } from "./Link";
import { Success } from "./Success";
import { Warning } from "./Warning";
export default {
Danger,
@ -13,4 +13,3 @@ export default {
Ghost,
Default,
};

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

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

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

@ -1,5 +1,5 @@
import { Label } from "@pswui/Label";
import { Checkbox } from "@pswui/Checkbox";
import { Label } from "@pswui/Label";
export function Text() {
return (

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

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

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

@ -1,14 +1,14 @@
import { Button } from "@pswui/Button";
import {
DialogRoot,
DialogTrigger,
DialogOverlay,
DialogContent,
DialogHeader,
DialogTitle,
DialogSubtitle,
DialogFooter,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogRoot,
DialogSubtitle,
DialogTitle,
DialogTrigger,
} from "@pswui/Dialog";
export function BasicInformationalDialog() {

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

@ -1,15 +1,15 @@
import {
DialogRoot,
DialogTrigger,
DialogOverlay,
DialogContent,
DialogHeader,
DialogTitle,
DialogSubtitle,
DialogFooter,
DialogClose,
} from "@pswui/Dialog";
import { Button } from "@pswui/Button";
import {
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogRoot,
DialogSubtitle,
DialogTitle,
DialogTrigger,
} from "@pswui/Dialog";
import { useToast } from "@pswui/Toast";
export function DeletingItem() {

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

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

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

@ -1,15 +1,15 @@
import {
DialogRoot,
DialogTrigger,
DialogOverlay,
DialogContent,
DialogHeader,
DialogTitle,
DialogSubtitle,
DialogFooter,
DialogClose,
} from "@pswui/Dialog";
import { Button } from "@pswui/Button";
import {
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogRoot,
DialogSubtitle,
DialogTitle,
DialogTrigger,
} from "@pswui/Dialog";
export function DialogDemo() {
return (

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

@ -1,14 +1,14 @@
import { Button } from "@pswui/Button";
import {
DrawerBody,
DrawerClose,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerHeader,
DrawerBody,
DrawerFooter,
DrawerClose,
} from "@pswui/Drawer";
import { Button } from "@pswui/Button";
export const Bottom = () => {
return (

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

@ -1,14 +1,14 @@
import { Button } from "@pswui/Button";
import {
DrawerBody,
DrawerClose,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerHeader,
DrawerBody,
DrawerFooter,
DrawerClose,
} from "@pswui/Drawer";
import { Button } from "@pswui/Button";
export const Left = () => {
return (
@ -17,7 +17,10 @@ export const Left = () => {
<Button>Open Drawer</Button>
</DrawerTrigger>
<DrawerOverlay className="z-[99]">
<DrawerContent position="left" className="max-w-[320px]">
<DrawerContent
position="left"
className="max-w-[320px]"
>
<DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader>

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

@ -1,14 +1,14 @@
import { Button } from "@pswui/Button";
import {
DrawerBody,
DrawerClose,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerHeader,
DrawerBody,
DrawerFooter,
DrawerClose,
} from "@pswui/Drawer";
import { Button } from "@pswui/Button";
export const Right = () => {
return (
@ -17,7 +17,10 @@ export const Right = () => {
<Button>Open Drawer</Button>
</DrawerTrigger>
<DrawerOverlay className="z-[99]">
<DrawerContent position="right" className="max-w-[320px]">
<DrawerContent
position="right"
className="max-w-[320px]"
>
<DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader>

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

@ -1,14 +1,14 @@
import { Button } from "@pswui/Button";
import {
DrawerBody,
DrawerClose,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerHeader,
DrawerBody,
DrawerFooter,
DrawerClose,
} from "@pswui/Drawer";
import { Button } from "@pswui/Button";
export const Top = () => {
return (

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

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

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

@ -1,13 +1,13 @@
import { Button } from "@pswui/Button";
import {
DrawerBody,
DrawerClose,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerClose,
DrawerHeader,
DrawerBody,
DrawerFooter,
} from "@pswui/Drawer";
export const DrawerDemo = () => {

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

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

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

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

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

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

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

@ -4,14 +4,21 @@ import { Input, InputFrame } from "@pswui/Input";
export function InputFrameDemo() {
return (
<InputFrame>
<Input type="text" unstyled />
<Button preset="success" size="icon">
<Input
type="text"
unstyled
/>
<Button
preset="success"
size="icon"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<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"

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

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

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

@ -1,5 +1,5 @@
import { Label } from "@pswui/Label";
import { Checkbox } from "@pswui/Checkbox";
import { Label } from "@pswui/Label";
export function Horizontal() {
return (

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

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

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

@ -1,5 +1,5 @@
import { Label } from "@pswui/Label";
import { Input } from "@pswui/Input";
import { Label } from "@pswui/Label";
export function Vertical() {
return (

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

@ -1,7 +1,7 @@
import { Vertical } from "./Vertical";
import { Disabled } from "./Disabled";
import { Horizontal } from "./Horizontal";
import { Invalid } from "./Invalid";
import { Disabled } from "./Disabled";
import { Vertical } from "./Vertical";
export default {
Vertical,
@ -9,4 +9,3 @@ export default {
Invalid,
Disabled,
};

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

@ -1,5 +1,5 @@
import { Label } from "@pswui/Label";
import { Input } from "@pswui/Input";
import { Label } from "@pswui/Label";
export function LabelDemo() {
return (

93
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 { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover.tsx";
import { useState } from "react";
const DarkIcon = () => {
// ic:baseline-dark-mode
return <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path fill="currentColor"
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>
}
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<title>Dark</title>
<path
fill="currentColor"
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>
);
};
const LightIcon = () => {
// ic:baseline-light-mode
return <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path 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"/>
</svg>
}
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<title>Light</title>
<path
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"
/>
</svg>
);
};
export const ThemeSelector = () => {
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>
}
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>
);
};

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

@ -1,21 +1,17 @@
import {
Popover,
PopoverTrigger,
PopoverContent,
} from "@pswui/Popover.tsx";
import { Button } from "@pswui/Button.tsx";
import { Input } from "@pswui/Input.tsx";
import { Label } from "@pswui/Label.tsx";
import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover.tsx";
import { useToast } from "@pswui/Toast";
import {
type Dispatch,
type SVGProps,
type SetStateAction,
createContext,
Dispatch,
SetStateAction,
SVGProps,
useContext,
useState,
useTransition,
} from "react";
import { Label } from "@pswui/Label.tsx";
import { Input } from "@pswui/Input.tsx";
interface UserControlState {
signIn: boolean;
@ -44,10 +40,11 @@ function MdiLoading(props: SVGProps<SVGSVGElement>) {
viewBox="0 0 24 24"
{...props}
>
<title>Loading</title>
<path
fill="currentColor"
d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8"
></path>
/>
</svg>
);
}
@ -79,7 +76,10 @@ const SignInForm = () => {
}
return (
<PopoverContent anchor={"bottomLeft"} className={"p-4 space-y-3"}>
<PopoverContent
anchor={"bottomLeft"}
className={"p-4 space-y-3"}
>
<Label>
<span>Username</span>
<Input type={"text"} />
@ -89,7 +89,10 @@ const SignInForm = () => {
<Input type={"password"} />
</Label>
<div className={"flex flex-row justify-end"}>
<Button preset={"success"} onClick={startSignIn}>
<Button
preset={"success"}
onClick={startSignIn}
>
{isSigningIn ? <MdiLoading className={"animate-spin"} /> : "Sign In"}
</Button>
</div>
@ -126,7 +129,10 @@ const UserControlContent = () => {
return (
<PopoverContent anchor={"bottomLeft"}>
<Button preset={"ghost"}>Dashboard</Button>
<Button preset={"ghost"} onClick={startSignOut}>
<Button
preset={"ghost"}
onClick={startSignOut}
>
{isSigningOut ? <MdiLoading className={"animate-spin"} /> : "Sign Out"}
</Button>
</PopoverContent>

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

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

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

@ -12,6 +12,7 @@ export function PopoverDemo() {
height="1.2em"
viewBox="0 0 24 24"
>
<title>User</title>
<path
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"
@ -20,13 +21,17 @@ export function PopoverDemo() {
</Button>
</PopoverTrigger>
<PopoverContent>
<Button preset="ghost" className="gap-2">
<Button
preset="ghost"
className="gap-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<title>Dashboard</title>
<path
fill="currentColor"
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
@ -34,13 +39,17 @@ export function PopoverDemo() {
</svg>
<span className="flex-grow text-left">Dashboard</span>
</Button>
<Button preset="ghost" className="gap-2">
<Button
preset="ghost"
className="gap-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<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"

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

@ -1,4 +1,4 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { TabContent, TabList, TabProvider, TabTrigger } from "@pswui/Tabs";
export function TabsDemo() {
return (

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

@ -19,7 +19,8 @@ function Children() {
);
}
export function Error() {
/* not shadowing global Error (lol) */
export function _Error() {
return (
<>
<Toaster />

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

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

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

@ -6,7 +6,11 @@ export function Controlled() {
const [opened, setOpened] = useState(false);
return (
<Tooltip position="top" controlled opened={opened}>
<Tooltip
position="top"
controlled
opened={opened}
>
<TooltipContent delay={"early"}>
<p>Tooltip!</p>
</TooltipContent>

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

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

7
src/errors/PageNotFound.tsx
View File

@ -1,5 +1,5 @@
import { Link } from "react-router-dom";
import { Button } from "@pswui/Button";
import { Link } from "react-router-dom";
function PageNotFound() {
return (
@ -11,7 +11,10 @@ function PageNotFound() {
</p>
</section>
<section className="flex flex-row justify-center items-center text-center gap-2">
<Button asChild preset="default">
<Button
asChild
preset="default"
>
<Link to="/">Go home</Link>
</Button>
</section>

7
src/errors/Unexpected.tsx
View File

@ -1,5 +1,5 @@
import { Link } from "react-router-dom";
import { Button } from "@pswui/Button";
import { Link } from "react-router-dom";
function UnexpectedError() {
return (
@ -11,7 +11,10 @@ function UnexpectedError() {
</p>
</section>
<section className="flex flex-row justify-center items-center text-center gap-2">
<Button asChild preset="default">
<Button
asChild
preset="default"
>
<Link to="/">Go home</Link>
</Button>
</section>

8
src/main.tsx
View File

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

10
src/mdx.d.ts vendored
View File

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

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

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

14
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 remarkGfm from "remark-gfm";
import withSlug from "rehype-slug";
import mdx from "@mdx-js/rollup";
import withToc from "@stefanprobst/rehype-extract-toc";
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";
// https://vitejs.dev/config/
@ -31,5 +31,5 @@ export default defineConfig({
"@pswui-lib": resolve(__dirname, "./src/pswui/lib"),
},
},
cacheDir: './.vite'
cacheDir: "./.vite",
});