feat: add existing codes from pswui/ui repo
This commit is contained in:
Shinwoo PARK
parent
d075eac114
commit
7f92a235d1
256
src/App.tsx
Normal file
256
src/App.tsx
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
import {
|
||||||
|
Route,
|
||||||
|
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 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 { HeadingContext } from "./HeadingContext";
|
||||||
|
import React, {
|
||||||
|
ForwardedRef,
|
||||||
|
forwardRef,
|
||||||
|
useContext,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip.tsx";
|
||||||
|
|
||||||
|
function buildThresholdList() {
|
||||||
|
const thresholds: number[] = [];
|
||||||
|
const numSteps = 20;
|
||||||
|
|
||||||
|
for (let i = 1.0; i <= numSteps; i++) {
|
||||||
|
const ratio = i / numSteps;
|
||||||
|
thresholds.push(ratio);
|
||||||
|
}
|
||||||
|
|
||||||
|
thresholds.push(0);
|
||||||
|
return thresholds;
|
||||||
|
}
|
||||||
|
|
||||||
|
function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
|
||||||
|
return (prop: any, ref: ForwardedRef<HTMLHeadingElement>) => {
|
||||||
|
const internalRef = useRef<HTMLHeadingElement | null>(null);
|
||||||
|
const [_, setActiveHeadings] = useContext(HeadingContext);
|
||||||
|
|
||||||
|
const { children, ...restProp } = prop;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
([{ target, intersectionRatio }]) => {
|
||||||
|
if (intersectionRatio > 0.5) {
|
||||||
|
setActiveHeadings((prev) => [...prev, target.id]);
|
||||||
|
} else {
|
||||||
|
setActiveHeadings((prev) => prev.filter((id) => id !== target.id));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root: null,
|
||||||
|
rootMargin: "0px",
|
||||||
|
threshold: buildThresholdList(),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
if (internalRef.current) {
|
||||||
|
observer.observe(internalRef.current);
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
observer.disconnect();
|
||||||
|
};
|
||||||
|
}, [internalRef.current]);
|
||||||
|
|
||||||
|
const [status, setStatus] = useState<"normal" | "error" | "success">(
|
||||||
|
"normal",
|
||||||
|
);
|
||||||
|
const messages = {
|
||||||
|
normal: "Click to copy link",
|
||||||
|
success: "Copied link!",
|
||||||
|
error: "Failed to copy..",
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (status !== "normal") {
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
setStatus("normal");
|
||||||
|
}, 3000);
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [status]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip asChild position={"right"}>
|
||||||
|
<Level
|
||||||
|
ref={(el) => {
|
||||||
|
internalRef.current = el;
|
||||||
|
if (typeof ref === "function") {
|
||||||
|
ref(el);
|
||||||
|
} else if (el && ref) {
|
||||||
|
ref.current = el;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`${prop.className} cursor-pointer select-none`}
|
||||||
|
onClick={async (e) => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(
|
||||||
|
window.location.href.split("#")[0] + "#" + e.currentTarget.id,
|
||||||
|
);
|
||||||
|
setStatus("success");
|
||||||
|
} catch (e) {
|
||||||
|
setStatus("error");
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
{...restProp}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<TooltipContent status={status} offset={"lg"} delay={"early"}>
|
||||||
|
<p className={"text-base font-normal whitespace-nowrap not-prose"}>
|
||||||
|
{messages[status]}
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Level>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const overrideComponents = {
|
||||||
|
pre: (props: any) => {
|
||||||
|
const {
|
||||||
|
props: { children, className },
|
||||||
|
} = React.cloneElement(React.Children.only(props.children));
|
||||||
|
|
||||||
|
const language =
|
||||||
|
(!className || !className.includes("language-")
|
||||||
|
? "typescript"
|
||||||
|
: /language-([a-z]+)/.exec(className)![1]) ?? "typescript";
|
||||||
|
|
||||||
|
return <Code language={language}>{children as string}</Code>;
|
||||||
|
},
|
||||||
|
code: forwardRef<HTMLElement, any>((props: any, 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) => (
|
||||||
|
<div className="overflow-auto">
|
||||||
|
<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")),
|
||||||
|
};
|
||||||
|
|
||||||
|
const docsModules = import.meta.glob("./docs/components/*.mdx");
|
||||||
|
|
||||||
|
const routes = Object.keys(docsModules).map((path) => {
|
||||||
|
const sfPath = path.split("/").pop()?.replace(".mdx", "");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Route
|
||||||
|
key={path}
|
||||||
|
path={sfPath}
|
||||||
|
lazy={async () => {
|
||||||
|
const { default: C, tableOfContents } = await import(
|
||||||
|
`./docs/components/${sfPath}.mdx`
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
Component: () => (
|
||||||
|
<DynamicLayout toc={tableOfContents}>
|
||||||
|
<C components={overrideComponents} />
|
||||||
|
</DynamicLayout>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const REDIRECTED_404 = /^\?(\/([a-zA-Z0-9\-_]+\/?)+)(&.*)*$/;
|
||||||
|
|
||||||
|
const router = createBrowserRouter(
|
||||||
|
createRoutesFromElements(
|
||||||
|
<Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}>
|
||||||
|
<Route
|
||||||
|
index
|
||||||
|
loader={() =>
|
||||||
|
REDIRECTED_404.test(window.location.search)
|
||||||
|
? redirect(REDIRECTED_404.exec(window.location.search)?.[1] ?? "/")
|
||||||
|
: true
|
||||||
|
}
|
||||||
|
element={<Home />}
|
||||||
|
/>
|
||||||
|
<Route path="docs" element={<DocsLayout />}>
|
||||||
|
<Route index loader={() => redirect("/docs/introduction")} />
|
||||||
|
<Route
|
||||||
|
path="introduction"
|
||||||
|
element={
|
||||||
|
<DynamicLayout toc={docsIntroductionToc}>
|
||||||
|
<DocsIntroduction components={overrideComponents} />
|
||||||
|
</DynamicLayout>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="installation"
|
||||||
|
element={
|
||||||
|
<DynamicLayout toc={docsInstallationToc}>
|
||||||
|
<DocsInstallation components={overrideComponents} />
|
||||||
|
</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;
|
||||||
43
src/DocsLayout.tsx
Normal file
43
src/DocsLayout.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import { Link, useLocation } from "react-router-dom";
|
||||||
|
import { Outlet } from "react-router-dom";
|
||||||
|
import RouteObject from "./RouteObject";
|
||||||
|
|
||||||
|
function SideNav() {
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
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">
|
||||||
|
{Object.entries(RouteObject.sideNav).map(([categoryName, links]) => {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className="flex flex-col gap-2 justify-center items-start"
|
||||||
|
key={categoryName}
|
||||||
|
>
|
||||||
|
<span className="font-bold">{categoryName}</span>
|
||||||
|
{links.map((link) => (
|
||||||
|
<Link
|
||||||
|
to={link.path}
|
||||||
|
key={link.path}
|
||||||
|
className="text-sm text-neutral-500 hover:text-neutral-700 data-[active=true]:text-current"
|
||||||
|
data-active={link.eq(location.pathname)}
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DocsLayout() {
|
||||||
|
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">
|
||||||
|
<SideNav />
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DocsLayout;
|
||||||
63
src/DynamicLayout.tsx
Normal file
63
src/DynamicLayout.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import { ReactNode, Fragment, useState, useContext } from "react";
|
||||||
|
import { type Toc } from "@stefanprobst/rehype-extract-toc";
|
||||||
|
import { useLocation } from "react-router-dom";
|
||||||
|
import { HeadingContext } from "./HeadingContext";
|
||||||
|
|
||||||
|
function RecursivelyToc({ toc }: { toc: Toc }) {
|
||||||
|
const location = useLocation();
|
||||||
|
const [activeHeadings] = useContext(HeadingContext);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ul>
|
||||||
|
{toc.map((tocEntry) => {
|
||||||
|
return (
|
||||||
|
<Fragment key={tocEntry.id}>
|
||||||
|
<li
|
||||||
|
key={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"
|
||||||
|
style={{ paddingLeft: `${tocEntry.depth - 1}rem` }}
|
||||||
|
data-active={
|
||||||
|
activeHeadings.includes(tocEntry.id ?? "")
|
||||||
|
? true
|
||||||
|
: location.hash.length > 0
|
||||||
|
? location.hash === `#${tocEntry.id}`
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<a href={`#${tocEntry.id}`}>{tocEntry.value}</a>
|
||||||
|
</li>
|
||||||
|
{Array.isArray(tocEntry.children) && (
|
||||||
|
<RecursivelyToc toc={tocEntry.children} />
|
||||||
|
)}
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DynamicLayout({
|
||||||
|
children,
|
||||||
|
toc,
|
||||||
|
}: {
|
||||||
|
children: ReactNode;
|
||||||
|
toc: Toc;
|
||||||
|
}) {
|
||||||
|
const [activeHeadings, setActiveHeadings] = useState<string[]>([]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HeadingContext.Provider value={[activeHeadings, setActiveHeadings]}>
|
||||||
|
<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">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<RecursivelyToc toc={toc} />
|
||||||
|
</nav>
|
||||||
|
</HeadingContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
19
src/ErrorHandler.tsx
Normal file
19
src/ErrorHandler.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { isRouteErrorResponse, useRouteError } from "react-router-dom";
|
||||||
|
import UnexpectedError from "./errors/Unexpected";
|
||||||
|
import PageNotFound from "./errors/PageNotFound";
|
||||||
|
|
||||||
|
function ErrorBoundary() {
|
||||||
|
const error = useRouteError();
|
||||||
|
|
||||||
|
if (isRouteErrorResponse(error)) {
|
||||||
|
if (error.status === 404) {
|
||||||
|
return <PageNotFound />;
|
||||||
|
} else {
|
||||||
|
return <UnexpectedError />;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return <UnexpectedError />;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ErrorBoundary;
|
||||||
12
src/HeadingContext.tsx
Normal file
12
src/HeadingContext.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { Dispatch, SetStateAction, createContext } from "react";
|
||||||
|
|
||||||
|
export const HeadingContext = createContext<
|
||||||
|
[string[], Dispatch<SetStateAction<string[]>>]
|
||||||
|
>([
|
||||||
|
[],
|
||||||
|
() => {
|
||||||
|
if (process.env && process.env.NODE_ENV === "development") {
|
||||||
|
console.log("HeadingContext outside");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]);
|
||||||
30
src/Home.tsx
Normal file
30
src/Home.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "../components/Button";
|
||||||
|
|
||||||
|
function Home() {
|
||||||
|
return (
|
||||||
|
<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">
|
||||||
|
<header className="flex flex-col justify-center items-center gap-2">
|
||||||
|
<h1 className="text-4xl font-bold">
|
||||||
|
Build your components in isolation
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl max-w-xl">
|
||||||
|
There are a lot of component libraries out there, but why it install
|
||||||
|
so many things?
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div className="flex flex-row justify-center items-center gap-2">
|
||||||
|
<Button asChild preset="default">
|
||||||
|
<Link to="/docs">Get Started</Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild preset="ghost">
|
||||||
|
<Link to="/docs/components">Components</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Home;
|
||||||
215
src/MainLayout.tsx
Normal file
215
src/MainLayout.tsx
Normal file
@ -0,0 +1,215 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Link, Outlet, useLocation } from "react-router-dom";
|
||||||
|
import { Button } from "../components/Button";
|
||||||
|
import RouteObject from "./RouteObject";
|
||||||
|
import { Toaster } from "@components/Toast";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
|
||||||
|
import {
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerOverlay,
|
||||||
|
DrawerRoot,
|
||||||
|
DrawerTrigger,
|
||||||
|
} from "@components/Drawer";
|
||||||
|
|
||||||
|
type Theme = "light" | "dark" | "system";
|
||||||
|
|
||||||
|
function ThemeButton() {
|
||||||
|
const [theme, setTheme] = useState<Theme>(
|
||||||
|
(localStorage.getItem("theme") as Theme) || "system"
|
||||||
|
);
|
||||||
|
useEffect(() => {
|
||||||
|
document.documentElement.classList.toggle("dark", theme === "dark");
|
||||||
|
document.documentElement.classList.toggle("system", theme === "system");
|
||||||
|
localStorage.setItem("theme", theme);
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger>
|
||||||
|
<Button preset="ghost" size="icon">
|
||||||
|
{/* material-symbols:light-mode */}
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
className="dark:hidden"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{/* material-symbols:dark-mode */}
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
className="hidden dark:block"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent anchor="bottomLeft" className="w-32">
|
||||||
|
<Button
|
||||||
|
preset="ghost"
|
||||||
|
onClick={() => setTheme("light")}
|
||||||
|
className="w-full px-2 py-1.5 text-sm"
|
||||||
|
>
|
||||||
|
Light
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
preset="ghost"
|
||||||
|
onClick={() => setTheme("dark")}
|
||||||
|
className="w-full px-2 py-1.5 text-sm"
|
||||||
|
>
|
||||||
|
Dark
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
preset="ghost"
|
||||||
|
onClick={() => setTheme("system")}
|
||||||
|
className="w-full px-2 py-1.5 text-sm"
|
||||||
|
>
|
||||||
|
System
|
||||||
|
</Button>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TopNav() {
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-role="links"
|
||||||
|
className="hidden md:flex flex-row items-center gap-3"
|
||||||
|
>
|
||||||
|
<Link to="/" className="font-bold">
|
||||||
|
PSW/UI
|
||||||
|
</Link>
|
||||||
|
{RouteObject.mainNav.map((link) => {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={link.path}
|
||||||
|
to={link.path}
|
||||||
|
data-active={link.eq(location.pathname)}
|
||||||
|
className="font-light text-base data-[active=true]:text-current text-neutral-500 hover:text-neutral-700"
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div data-role="mobile-links" className="flex md:hidden">
|
||||||
|
<DrawerRoot>
|
||||||
|
<DrawerTrigger>
|
||||||
|
<Button preset="ghost" size="icon">
|
||||||
|
{/* mdi:menu */}
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerOverlay className="z-[99]">
|
||||||
|
<DrawerContent className="w-[300px] overflow-auto">
|
||||||
|
<DrawerClose className="absolute top-4 right-4">
|
||||||
|
<Button preset="ghost" size="icon">
|
||||||
|
{/* mdi:close */}
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
<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">
|
||||||
|
PSW/UI
|
||||||
|
</Link>
|
||||||
|
</DrawerClose>
|
||||||
|
{RouteObject.mainNav.map((link) => {
|
||||||
|
return (
|
||||||
|
<DrawerClose key={link.path}>
|
||||||
|
<Link to={link.path}>{link.name}</Link>
|
||||||
|
</DrawerClose>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
{Object.entries(RouteObject.sideNav).map(
|
||||||
|
([categoryName, links]) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex flex-col justify-start items-start gap-3"
|
||||||
|
key={categoryName}
|
||||||
|
>
|
||||||
|
<h2 className="font-bold">{categoryName}</h2>
|
||||||
|
{links.map((link) => {
|
||||||
|
return (
|
||||||
|
<DrawerClose key={link.path}>
|
||||||
|
<Link
|
||||||
|
to={link.path}
|
||||||
|
className="text-base opacity-75"
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</Link>
|
||||||
|
</DrawerClose>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</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;
|
||||||
59
src/RouteObject.ts
Normal file
59
src/RouteObject.ts
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
const docsModules = import.meta.glob("./docs/components/*.mdx");
|
||||||
|
|
||||||
|
const mainNav = [
|
||||||
|
{
|
||||||
|
path: "/docs",
|
||||||
|
name: "Docs",
|
||||||
|
eq: (pathname: string) =>
|
||||||
|
pathname.startsWith("/docs") && !pathname.startsWith("/docs/components"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/docs/components",
|
||||||
|
name: "Components",
|
||||||
|
eq: (pathname: string) => pathname.startsWith("/docs/components"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "https://github.com/p-sw/ui",
|
||||||
|
name: "Github",
|
||||||
|
eq: () => false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const sideNav: Record<
|
||||||
|
string,
|
||||||
|
{ path: string; name: string; eq: (path: string) => boolean }[]
|
||||||
|
> = {
|
||||||
|
Documents: [
|
||||||
|
{
|
||||||
|
path: "/docs/introduction",
|
||||||
|
name: "Introduction",
|
||||||
|
eq: (pathname: string) => pathname === "/docs/introduction",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/docs/installation",
|
||||||
|
name: "Installation",
|
||||||
|
eq: (pathname: string) => pathname === "/docs/installation",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/docs/configuration",
|
||||||
|
name: "Configuration",
|
||||||
|
eq: (pathname: string) => pathname === "/docs/configuration",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
Components: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
Object.keys(docsModules).forEach((path) => {
|
||||||
|
const name = (path.split("/").pop() ?? "").replace(".mdx", "");
|
||||||
|
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,
|
||||||
|
sideNav,
|
||||||
|
};
|
||||||
118
src/components/LoadedCode.tsx
Normal file
118
src/components/LoadedCode.tsx
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
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 "@components/Button";
|
||||||
|
import { useToast } from "@components/Toast";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export const GITHUB = "https://raw.githubusercontent.com/p-sw/ui/main";
|
||||||
|
|
||||||
|
export const LoadedCode = ({
|
||||||
|
from,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
from: string;
|
||||||
|
className?: string;
|
||||||
|
}) => {
|
||||||
|
const [state, setState] = useState<string | undefined | null>();
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
const res = await fetch(from);
|
||||||
|
const text = await res.text();
|
||||||
|
setState(text);
|
||||||
|
})();
|
||||||
|
}, [from]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={twMerge("relative", className)}>
|
||||||
|
<Button
|
||||||
|
preset="default"
|
||||||
|
size="icon"
|
||||||
|
className="absolute top-4 right-4 text-black dark:text-white z-10"
|
||||||
|
onClick={() => {
|
||||||
|
if (state && state.length > 0) {
|
||||||
|
void navigator.clipboard.writeText(state ?? "");
|
||||||
|
toast({
|
||||||
|
title: "Copied",
|
||||||
|
description: "The code has been copied to your clipboard.",
|
||||||
|
status: "success",
|
||||||
|
});
|
||||||
|
} 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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</Button>
|
||||||
|
<SyntaxHighlighter
|
||||||
|
language="typescript"
|
||||||
|
style={gruvboxDark}
|
||||||
|
className={`w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""} scrollbar-none`}
|
||||||
|
customStyle={{ padding: "1rem" }}
|
||||||
|
>
|
||||||
|
{state ?? ""}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Code = forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
{ children: string; className?: string; language: string }
|
||||||
|
>(({ children, className, language }, ref) => {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={twMerge("relative", className)} ref={ref}>
|
||||||
|
<Button
|
||||||
|
preset="default"
|
||||||
|
size="icon"
|
||||||
|
className="absolute top-4 right-4 text-black dark:text-white z-10"
|
||||||
|
onClick={() => {
|
||||||
|
void navigator.clipboard.writeText(children ?? "");
|
||||||
|
toast({
|
||||||
|
title: "Copied",
|
||||||
|
description: "The code has been copied to your clipboard.",
|
||||||
|
status: "success",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</Button>
|
||||||
|
<SyntaxHighlighter
|
||||||
|
language={language}
|
||||||
|
style={gruvboxDark}
|
||||||
|
className={`w-full h-auto max-h-64 rounded-lg scrollbar-none`}
|
||||||
|
customStyle={{ padding: "1rem" }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
32
src/components/Story.tsx
Normal file
32
src/components/Story.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
const layoutClasses = {
|
||||||
|
default: "",
|
||||||
|
centered: "flex items-center justify-center",
|
||||||
|
};
|
||||||
|
|
||||||
|
const Story = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
{
|
||||||
|
layout?: keyof typeof layoutClasses;
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
id?: string;
|
||||||
|
}
|
||||||
|
>(({ layout = "default", children, className, id }, ref) => {
|
||||||
|
return (
|
||||||
|
<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
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
id={id}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Story };
|
||||||
162
src/docs/components/Button.mdx
Normal file
162
src/docs/components/Button.mdx
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { ButtonDemo } from "./ButtonBlocks/Preview";
|
||||||
|
import Examples from "./ButtonBlocks/Examples";
|
||||||
|
|
||||||
|
# Button
|
||||||
|
Displays a button or a component that looks like a button.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<ButtonDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Button.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Button.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Button } from "@components/Button";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Button>Button</Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:-------------|:------------------------------------------------------------------------------|:------------|:----------------------------------------|
|
||||||
|
| `size` | `"link" \| "sm" \| "md" \| "lg" \| "icon"` | `"md"` | The size of the button |
|
||||||
|
| `border` | `"none" \| "solid" \| "success" \| "warning" \| "danger"` | `"solid"` | The border color of the button |
|
||||||
|
| `background` | `"default" \| "ghost" \| "success" \| "warning" \| "danger" \| "transparent"` | `"default"` | The background color of the button |
|
||||||
|
| `decoration` | `"none" \| "link"` | `"none"` | The inner text decoration of the button |
|
||||||
|
| `presets` | `"default" \| "ghost" \| "link" \| "success" \| "warning" \| "danger"` | `"default"` | The preset of the variant props |
|
||||||
|
|
||||||
|
### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:----------|:--------|:---------------------------------------------------------|
|
||||||
|
| `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component |
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Default
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Default />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Ghost
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Ghost />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Link
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Link />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Success
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Success />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Warning
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Warning />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Danger
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Danger />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
5
src/docs/components/ButtonBlocks/Examples/Danger.tsx
Normal file
5
src/docs/components/ButtonBlocks/Examples/Danger.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export const Danger = () => {
|
||||||
|
return <Button preset="danger">Danger</Button>;
|
||||||
|
};
|
||||||
5
src/docs/components/ButtonBlocks/Examples/Default.tsx
Normal file
5
src/docs/components/ButtonBlocks/Examples/Default.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export const Default = () => {
|
||||||
|
return <Button preset="default">Default</Button>;
|
||||||
|
};
|
||||||
5
src/docs/components/ButtonBlocks/Examples/Ghost.tsx
Normal file
5
src/docs/components/ButtonBlocks/Examples/Ghost.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export const Ghost = () => {
|
||||||
|
return <Button preset="ghost">Ghost</Button>;
|
||||||
|
};
|
||||||
5
src/docs/components/ButtonBlocks/Examples/Link.tsx
Normal file
5
src/docs/components/ButtonBlocks/Examples/Link.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export const Link = () => {
|
||||||
|
return <Button preset="link">Link</Button>;
|
||||||
|
};
|
||||||
5
src/docs/components/ButtonBlocks/Examples/Success.tsx
Normal file
5
src/docs/components/ButtonBlocks/Examples/Success.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export const Success = () => {
|
||||||
|
return <Button preset="success">Success</Button>;
|
||||||
|
};
|
||||||
5
src/docs/components/ButtonBlocks/Examples/Warning.tsx
Normal file
5
src/docs/components/ButtonBlocks/Examples/Warning.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export const Warning = () => {
|
||||||
|
return <Button preset="warning">Warning</Button>;
|
||||||
|
};
|
||||||
16
src/docs/components/ButtonBlocks/Examples/index.ts
Normal file
16
src/docs/components/ButtonBlocks/Examples/index.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { Danger } from "./Danger";
|
||||||
|
import { Warning } from "./Warning";
|
||||||
|
import { Success } from "./Success";
|
||||||
|
import { Link } from "./Link";
|
||||||
|
import { Ghost } from "./Ghost";
|
||||||
|
import { Default } from "./Default";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
Danger,
|
||||||
|
Warning,
|
||||||
|
Success,
|
||||||
|
Link,
|
||||||
|
Ghost,
|
||||||
|
Default,
|
||||||
|
};
|
||||||
|
|
||||||
5
src/docs/components/ButtonBlocks/Preview.tsx
Normal file
5
src/docs/components/ButtonBlocks/Preview.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export function ButtonDemo() {
|
||||||
|
return <Button>Button</Button>;
|
||||||
|
}
|
||||||
84
src/docs/components/Checkbox.mdx
Normal file
84
src/docs/components/Checkbox.mdx
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { CheckboxDemo } from "./CheckboxBlocks/Preview";
|
||||||
|
import Examples from "./CheckboxBlocks/Examples";
|
||||||
|
|
||||||
|
# Checkbox
|
||||||
|
A control that allows the user to toggle between checked and not checked.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<CheckboxDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/CheckboxBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Checkbox.mdx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Checkbox.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Checkbox } from "@components/Checkbox";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Checkbox />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:-------|:-------------------------|:--------|:-------------------------|
|
||||||
|
| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox |
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Text
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Text />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/CheckboxBlocks/Examples/Text.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Disabled
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Disabled />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
11
src/docs/components/CheckboxBlocks/Examples/Disabled.tsx
Normal file
11
src/docs/components/CheckboxBlocks/Examples/Disabled.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Label } from "@components/Label";
|
||||||
|
import { Checkbox } from "@components/Checkbox";
|
||||||
|
|
||||||
|
export function Disabled() {
|
||||||
|
return (
|
||||||
|
<Label direction="horizontal">
|
||||||
|
<Checkbox size="base" disabled />
|
||||||
|
<span>Agree terms and conditions</span>
|
||||||
|
</Label>
|
||||||
|
);
|
||||||
|
}
|
||||||
11
src/docs/components/CheckboxBlocks/Examples/Text.tsx
Normal file
11
src/docs/components/CheckboxBlocks/Examples/Text.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Label } from "@components/Label";
|
||||||
|
import { Checkbox } from "@components/Checkbox";
|
||||||
|
|
||||||
|
export function Text() {
|
||||||
|
return (
|
||||||
|
<Label direction="horizontal">
|
||||||
|
<Checkbox size="base" />
|
||||||
|
<span>Agree terms and conditions</span>
|
||||||
|
</Label>
|
||||||
|
);
|
||||||
|
}
|
||||||
5
src/docs/components/CheckboxBlocks/Examples/index.ts
Normal file
5
src/docs/components/CheckboxBlocks/Examples/index.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Text } from "./Text";
|
||||||
|
import { Disabled } from "./Disabled";
|
||||||
|
|
||||||
|
export default { Text, Disabled };
|
||||||
|
|
||||||
11
src/docs/components/CheckboxBlocks/Preview.tsx
Normal file
11
src/docs/components/CheckboxBlocks/Preview.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Checkbox } from "@components/Checkbox";
|
||||||
|
import { Label } from "@components/Label";
|
||||||
|
|
||||||
|
export function CheckboxDemo() {
|
||||||
|
return (
|
||||||
|
<Label direction="horizontal">
|
||||||
|
<Checkbox />
|
||||||
|
<span>Checkbox</span>
|
||||||
|
</Label>
|
||||||
|
);
|
||||||
|
}
|
||||||
177
src/docs/components/Dialog.mdx
Normal file
177
src/docs/components/Dialog.mdx
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { DialogDemo } from "./DialogBlocks/Preview";
|
||||||
|
import Examples from "./DialogBlocks/Examples";
|
||||||
|
|
||||||
|
# Dialog
|
||||||
|
A modal window that prompts the user to take an action or provides critical information.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<DialogDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Dialog.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Dialog.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {
|
||||||
|
DialogRoot,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogSubtitle,
|
||||||
|
DialogFooter,
|
||||||
|
DialogClose,
|
||||||
|
} from "@components/Dialog";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<DialogRoot>
|
||||||
|
<DialogTrigger>
|
||||||
|
<Button>Open Dialog</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogOverlay>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Dialog Title</DialogTitle>
|
||||||
|
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
||||||
|
</DialogHeader>
|
||||||
|
{/* Main Contents */}
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose>
|
||||||
|
<Button>Close</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</DialogOverlay>
|
||||||
|
</DialogRoot>
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note:
|
||||||
|
>
|
||||||
|
> DialogTrigger and DialogClose will merge its onClick event handler to its children.
|
||||||
|
> Also, there is no default element for those.
|
||||||
|
> So you always have to provide the clickable children for DialogTrigger and DialogClose.
|
||||||
|
>
|
||||||
|
> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### DialogOverlay
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:-----------------------|:--------|:---------------------------------------------|
|
||||||
|
| `blur` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is blurred |
|
||||||
|
| `darken` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is darkened |
|
||||||
|
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Minimum margin of the dialog |
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:---------------|:----------|:--------|:-----------------------------------------------|
|
||||||
|
| `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked |
|
||||||
|
|
||||||
|
### DialogContent
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:---------------------------------------------------------------------|:--------|:-----------------------------------------------|
|
||||||
|
| `size` | `"fit" \| "fullSm" \| "fullMd" \| "fullLg" \| "fullXl" \| "full2xl"` | `fit` | Size of the dialog - width and max width |
|
||||||
|
| `rounded` | `"sm" \| "md" \| "lg" \| "xl"` | `md` | Roundness of the dialog |
|
||||||
|
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Padding of the dialog |
|
||||||
|
| `gap` | `"sm" \| "md" \| "lg"` | `md` | Works like flex's gap - space between children |
|
||||||
|
|
||||||
|
### DialogHeader
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:------|:-----------------------|:--------|:----------------------------------------------|
|
||||||
|
| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children - title and subtitle |
|
||||||
|
|
||||||
|
### DialogTitle
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:---------|:-----------------------|:--------|:--------------------|
|
||||||
|
| `size` | `"sm" \| "md" \| "lg"` | `md` | Size of the title |
|
||||||
|
| `weight` | `"sm" \| "md" \| "lg"` | `lg` | Weight of the title |
|
||||||
|
|
||||||
|
### DialogSubtitle
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:-----------------------|:--------|:------------------------|
|
||||||
|
| `size` | `"sm" \| "md" \| "lg"` | `sm` | Size of the subtitle |
|
||||||
|
| `weight` | `"sm" \| "md" \| "lg"` | `md` | Weight of the subtitle |
|
||||||
|
| `opacity` | `"sm" \| "md" \| "lg"` | `sm` | Opacity of the subtitle |
|
||||||
|
|
||||||
|
### DialogFooter
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:------|:-----------------------|:--------|:-------------------------|
|
||||||
|
| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children |
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Basic Informational Dialog
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.BasicInformationalDialog />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Deleting Item
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.DeletingItem />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import {
|
||||||
|
DialogRoot,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogSubtitle,
|
||||||
|
DialogFooter,
|
||||||
|
DialogClose,
|
||||||
|
} from "@components/Dialog";
|
||||||
|
|
||||||
|
export function BasicInformationalDialog() {
|
||||||
|
return (
|
||||||
|
<DialogRoot>
|
||||||
|
<DialogTrigger>
|
||||||
|
<Button preset="default">What is this?</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogOverlay>
|
||||||
|
<DialogContent size={"fullMd"}>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Dialog Title</DialogTitle>
|
||||||
|
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<p>This is a dialog. You can put the information you want to show.</p>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose>
|
||||||
|
<Button preset="default">Ok!</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</DialogOverlay>
|
||||||
|
</DialogRoot>
|
||||||
|
);
|
||||||
|
}
|
||||||
79
src/docs/components/DialogBlocks/Examples/DeletingItem.tsx
Normal file
79
src/docs/components/DialogBlocks/Examples/DeletingItem.tsx
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import {
|
||||||
|
DialogRoot,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogSubtitle,
|
||||||
|
DialogFooter,
|
||||||
|
DialogClose,
|
||||||
|
} from "@components/Dialog";
|
||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
export function DeletingItem() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DialogRoot>
|
||||||
|
<DialogTrigger>
|
||||||
|
<Button preset="danger">Delete Item</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogOverlay>
|
||||||
|
<DialogContent size={"fullMd"}>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Delete Item</DialogTitle>
|
||||||
|
<DialogSubtitle>
|
||||||
|
Are you sure you want to delete this item?
|
||||||
|
</DialogSubtitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<ul className="list-disc list-inside">
|
||||||
|
<li>This action will delete the item, and related data</li>
|
||||||
|
<li>This action cannot be undone</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose>
|
||||||
|
<Button
|
||||||
|
preset="danger"
|
||||||
|
onClick={async () => {
|
||||||
|
const toasted = toast({
|
||||||
|
title: "Deleting Item",
|
||||||
|
description: "Item deletion is requested",
|
||||||
|
status: "loading",
|
||||||
|
});
|
||||||
|
|
||||||
|
await new Promise((r) => setTimeout(r, 1000));
|
||||||
|
|
||||||
|
toasted.update({
|
||||||
|
title: "Item Deleted",
|
||||||
|
description: "The item has been deleted",
|
||||||
|
status: "success",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
<DialogClose>
|
||||||
|
<Button
|
||||||
|
preset="default"
|
||||||
|
onClick={() => {
|
||||||
|
toast({
|
||||||
|
title: "Action Canceled",
|
||||||
|
description: "The delete action has been canceled",
|
||||||
|
status: "error",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</DialogOverlay>
|
||||||
|
</DialogRoot>
|
||||||
|
);
|
||||||
|
}
|
||||||
8
src/docs/components/DialogBlocks/Examples/index.ts
Normal file
8
src/docs/components/DialogBlocks/Examples/index.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { BasicInformationalDialog } from "./BasicInformationalDialog";
|
||||||
|
import { DeletingItem } from "./DeletingItem";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
BasicInformationalDialog,
|
||||||
|
DeletingItem,
|
||||||
|
}
|
||||||
|
|
||||||
42
src/docs/components/DialogBlocks/Preview.tsx
Normal file
42
src/docs/components/DialogBlocks/Preview.tsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import {
|
||||||
|
DialogRoot,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogSubtitle,
|
||||||
|
DialogFooter,
|
||||||
|
DialogClose,
|
||||||
|
} from "@components/Dialog";
|
||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export function DialogDemo() {
|
||||||
|
return (
|
||||||
|
<DialogRoot>
|
||||||
|
<DialogTrigger>
|
||||||
|
<Button preset="default">Open Dialog</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogOverlay>
|
||||||
|
<DialogContent size={"fullMd"}>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Dialog Title</DialogTitle>
|
||||||
|
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<p>
|
||||||
|
Laborum non adipisicing enim enim culpa esse anim esse consequat
|
||||||
|
Lorem incididunt. Enim mollit laborum sunt cillum voluptate est
|
||||||
|
officia nostrud non consequat adipisicing cupidatat aliquip magna.
|
||||||
|
Voluptate nisi cupidatat qui nisi in pariatur. Sint consequat labore
|
||||||
|
pariatur mollit sint nostrud tempor commodo pariatur ea laboris.
|
||||||
|
</p>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose>
|
||||||
|
<Button preset="default">Close</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</DialogOverlay>
|
||||||
|
</DialogRoot>
|
||||||
|
);
|
||||||
|
}
|
||||||
203
src/docs/components/Drawer.mdx
Normal file
203
src/docs/components/Drawer.mdx
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from '@/components/LoadedCode';
|
||||||
|
import { DrawerDemo } from "./DrawerBlocks/Preview";
|
||||||
|
import Examples from "./DrawerBlocks/Examples";
|
||||||
|
|
||||||
|
# Drawer
|
||||||
|
Displays a panel that slides out from the edge of the screen, typically used for navigation or additional content.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<DrawerDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Drawer.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Drawer.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {
|
||||||
|
DrawerRoot,
|
||||||
|
DrawerTrigger,
|
||||||
|
DrawerOverlay,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerBody,
|
||||||
|
DrawerFooter,
|
||||||
|
} from "@components/Drawer";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<DrawerRoot>
|
||||||
|
<DrawerTrigger>
|
||||||
|
<Button>Open Drawer</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerOverlay>
|
||||||
|
<DrawerContent>
|
||||||
|
<DrawerHeader>
|
||||||
|
<h1 className="text-2xl font-bold">Drawer</h1>
|
||||||
|
</DrawerHeader>
|
||||||
|
<DrawerBody>
|
||||||
|
{/* Main Contents */}
|
||||||
|
</DrawerBody>
|
||||||
|
<DrawerFooter>
|
||||||
|
<DrawerClose>
|
||||||
|
<Button>Close Drawer</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</DrawerContent>
|
||||||
|
</DrawerOverlay>
|
||||||
|
</DrawerRoot>
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note:
|
||||||
|
>
|
||||||
|
> DrawerTrigger and DrawerClose will merge its onClick event handler to its children.
|
||||||
|
> Also, there is no default element for those.
|
||||||
|
> So you always have to provide the clickable children for DialogTrigger and DialogClose.
|
||||||
|
>
|
||||||
|
> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### DrawerRoot
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:-----------------|:----------|:---------------|:----------------------------------------------------------|
|
||||||
|
| `closeThreshold` | `number` | `0.3` | The threshold for the drawer to close with swipe or drag. |
|
||||||
|
| `opened` | `boolean` | - (Controlled) | Whether the drawer is opened. |
|
||||||
|
|
||||||
|
### DrawerOverlay
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:----------|:--------|:------------------------------------------------------------|
|
||||||
|
| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
|
||||||
|
|
||||||
|
### DrawerContent
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:-----------|:-----------------------------------------|:---------|:---------------------------|
|
||||||
|
| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"left"` | The position of the drawer |
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:----------|:--------|:------------------------------------------------------------|
|
||||||
|
| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
|
||||||
|
|
||||||
|
### DrawerHeader
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:----------|:--------|:------------------------------------------------------------|
|
||||||
|
| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
|
||||||
|
|
||||||
|
### DrawerBody
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:----------|:--------|:------------------------------------------------------------|
|
||||||
|
| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
|
||||||
|
|
||||||
|
### DrawerFooter
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:----------|:--------|:------------------------------------------------------------|
|
||||||
|
| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Left
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Left />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Right
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Right />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Top
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Top />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Bottom
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Bottom />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
40
src/docs/components/DrawerBlocks/Examples/Bottom.tsx
Normal file
40
src/docs/components/DrawerBlocks/Examples/Bottom.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import {
|
||||||
|
DrawerRoot,
|
||||||
|
DrawerTrigger,
|
||||||
|
DrawerOverlay,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerBody,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerClose,
|
||||||
|
} from "@components/Drawer";
|
||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export const Bottom = () => {
|
||||||
|
return (
|
||||||
|
<DrawerRoot>
|
||||||
|
<DrawerTrigger>
|
||||||
|
<Button>Open Drawer</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerOverlay className="z-[99]">
|
||||||
|
<DrawerContent position="bottom">
|
||||||
|
<DrawerHeader>
|
||||||
|
<h1 className="text-2xl font-bold">Drawer</h1>
|
||||||
|
</DrawerHeader>
|
||||||
|
<DrawerBody>
|
||||||
|
<p>
|
||||||
|
Drawers are a type of overlay that slides in from the edge of the
|
||||||
|
screen. They are typically used for navigation or additional
|
||||||
|
content.
|
||||||
|
</p>
|
||||||
|
</DrawerBody>
|
||||||
|
<DrawerFooter>
|
||||||
|
<DrawerClose>
|
||||||
|
<Button>Done</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</DrawerContent>
|
||||||
|
</DrawerOverlay>
|
||||||
|
</DrawerRoot>
|
||||||
|
);
|
||||||
|
};
|
||||||
40
src/docs/components/DrawerBlocks/Examples/Left.tsx
Normal file
40
src/docs/components/DrawerBlocks/Examples/Left.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import {
|
||||||
|
DrawerRoot,
|
||||||
|
DrawerTrigger,
|
||||||
|
DrawerOverlay,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerBody,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerClose,
|
||||||
|
} from "@components/Drawer";
|
||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export const Left = () => {
|
||||||
|
return (
|
||||||
|
<DrawerRoot>
|
||||||
|
<DrawerTrigger>
|
||||||
|
<Button>Open Drawer</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerOverlay className="z-[99]">
|
||||||
|
<DrawerContent position="left" className="max-w-[320px]">
|
||||||
|
<DrawerHeader>
|
||||||
|
<h1 className="text-2xl font-bold">Drawer</h1>
|
||||||
|
</DrawerHeader>
|
||||||
|
<DrawerBody>
|
||||||
|
<p>
|
||||||
|
Drawers are a type of overlay that slides in from the edge of the
|
||||||
|
screen. They are typically used for navigation or additional
|
||||||
|
content.
|
||||||
|
</p>
|
||||||
|
</DrawerBody>
|
||||||
|
<DrawerFooter>
|
||||||
|
<DrawerClose>
|
||||||
|
<Button>Done</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</DrawerContent>
|
||||||
|
</DrawerOverlay>
|
||||||
|
</DrawerRoot>
|
||||||
|
);
|
||||||
|
};
|
||||||
40
src/docs/components/DrawerBlocks/Examples/Right.tsx
Normal file
40
src/docs/components/DrawerBlocks/Examples/Right.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import {
|
||||||
|
DrawerRoot,
|
||||||
|
DrawerTrigger,
|
||||||
|
DrawerOverlay,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerBody,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerClose,
|
||||||
|
} from "@components/Drawer";
|
||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export const Right = () => {
|
||||||
|
return (
|
||||||
|
<DrawerRoot>
|
||||||
|
<DrawerTrigger>
|
||||||
|
<Button>Open Drawer</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerOverlay className="z-[99]">
|
||||||
|
<DrawerContent position="right" className="max-w-[320px]">
|
||||||
|
<DrawerHeader>
|
||||||
|
<h1 className="text-2xl font-bold">Drawer</h1>
|
||||||
|
</DrawerHeader>
|
||||||
|
<DrawerBody>
|
||||||
|
<p>
|
||||||
|
Drawers are a type of overlay that slides in from the edge of the
|
||||||
|
screen. They are typically used for navigation or additional
|
||||||
|
content.
|
||||||
|
</p>
|
||||||
|
</DrawerBody>
|
||||||
|
<DrawerFooter>
|
||||||
|
<DrawerClose>
|
||||||
|
<Button>Done</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</DrawerContent>
|
||||||
|
</DrawerOverlay>
|
||||||
|
</DrawerRoot>
|
||||||
|
);
|
||||||
|
};
|
||||||
40
src/docs/components/DrawerBlocks/Examples/Top.tsx
Normal file
40
src/docs/components/DrawerBlocks/Examples/Top.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import {
|
||||||
|
DrawerRoot,
|
||||||
|
DrawerTrigger,
|
||||||
|
DrawerOverlay,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerBody,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerClose,
|
||||||
|
} from "@components/Drawer";
|
||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export const Top = () => {
|
||||||
|
return (
|
||||||
|
<DrawerRoot>
|
||||||
|
<DrawerTrigger>
|
||||||
|
<Button>Open Drawer</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerOverlay className="z-[99]">
|
||||||
|
<DrawerContent position="top">
|
||||||
|
<DrawerHeader>
|
||||||
|
<h1 className="text-2xl font-bold">Drawer</h1>
|
||||||
|
</DrawerHeader>
|
||||||
|
<DrawerBody>
|
||||||
|
<p>
|
||||||
|
Drawers are a type of overlay that slides in from the edge of the
|
||||||
|
screen. They are typically used for navigation or additional
|
||||||
|
content.
|
||||||
|
</p>
|
||||||
|
</DrawerBody>
|
||||||
|
<DrawerFooter>
|
||||||
|
<DrawerClose>
|
||||||
|
<Button>Done</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</DrawerContent>
|
||||||
|
</DrawerOverlay>
|
||||||
|
</DrawerRoot>
|
||||||
|
);
|
||||||
|
};
|
||||||
7
src/docs/components/DrawerBlocks/Examples/index.ts
Normal file
7
src/docs/components/DrawerBlocks/Examples/index.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { Left } from "./Left";
|
||||||
|
import { Right } from "./Right";
|
||||||
|
import { Top } from "./Top";
|
||||||
|
import { Bottom } from "./Bottom";
|
||||||
|
|
||||||
|
export default { Left, Right, Top, Bottom };
|
||||||
|
|
||||||
40
src/docs/components/DrawerBlocks/Preview.tsx
Normal file
40
src/docs/components/DrawerBlocks/Preview.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import {
|
||||||
|
DrawerRoot,
|
||||||
|
DrawerTrigger,
|
||||||
|
DrawerOverlay,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerBody,
|
||||||
|
DrawerFooter,
|
||||||
|
} from "@components/Drawer";
|
||||||
|
|
||||||
|
export const DrawerDemo = () => {
|
||||||
|
return (
|
||||||
|
<DrawerRoot>
|
||||||
|
<DrawerTrigger>
|
||||||
|
<Button>Open Drawer</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerOverlay className="z-[99]">
|
||||||
|
<DrawerContent className="max-w-[320px]">
|
||||||
|
<DrawerHeader>
|
||||||
|
<h1 className="text-2xl font-bold">Drawer</h1>
|
||||||
|
</DrawerHeader>
|
||||||
|
<DrawerBody>
|
||||||
|
<p>
|
||||||
|
Drawers are a type of overlay that slides in from the edge of the
|
||||||
|
screen. They are typically used for navigation or additional
|
||||||
|
content.
|
||||||
|
</p>
|
||||||
|
</DrawerBody>
|
||||||
|
<DrawerFooter>
|
||||||
|
<DrawerClose>
|
||||||
|
<Button>Close</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</DrawerContent>
|
||||||
|
</DrawerOverlay>
|
||||||
|
</DrawerRoot>
|
||||||
|
);
|
||||||
|
};
|
||||||
123
src/docs/components/Input.mdx
Normal file
123
src/docs/components/Input.mdx
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { InputDemo } from "./InputBlocks/Preview";
|
||||||
|
import { InputFrameDemo } from "./InputFrameBlocks/Preview";
|
||||||
|
import InputExamples from "./InputBlocks/Examples";
|
||||||
|
|
||||||
|
# Input
|
||||||
|
Element that captures user's input.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<InputDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Input.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Input.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Input } from "@components/Input";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Input type="text" />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:-----------|:----------|:--------|:-----------------------------------------------------------------------------------------|
|
||||||
|
| `unstyled` | `boolean` | `false` | Remove style of input, so it can be real transparent input. Mostly used with InputFrame. |
|
||||||
|
| `full` | `boolean` | `false` | Make input take full width of its container. |
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Invalid
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<InputExamples.Invalid />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/Examples/Invalid.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Disabled
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<InputExamples.Disabled />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/Examples/Disabled.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
# InputFrame
|
||||||
|
Label with input's style.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<InputFrameDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputFrameBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
**Included in `Input.tsx`.**
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {
|
||||||
|
Input,
|
||||||
|
InputFrame,
|
||||||
|
} from "@components/Input";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<InputFrame>
|
||||||
|
<Input type="text" unstyled />
|
||||||
|
</InputFrame>
|
||||||
|
```
|
||||||
5
src/docs/components/InputBlocks/Examples/Disabled.tsx
Normal file
5
src/docs/components/InputBlocks/Examples/Disabled.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Input } from "@components/Input";
|
||||||
|
|
||||||
|
export function Disabled() {
|
||||||
|
return <Input type="text" disabled />;
|
||||||
|
}
|
||||||
5
src/docs/components/InputBlocks/Examples/Invalid.tsx
Normal file
5
src/docs/components/InputBlocks/Examples/Invalid.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Input } from "@components/Input";
|
||||||
|
|
||||||
|
export function Invalid() {
|
||||||
|
return <Input type="text" invalid="Invalid Input" />;
|
||||||
|
}
|
||||||
5
src/docs/components/InputBlocks/Examples/index.ts
Normal file
5
src/docs/components/InputBlocks/Examples/index.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Invalid } from "./Invalid";
|
||||||
|
import { Disabled } from "./Disabled";
|
||||||
|
|
||||||
|
export default { Invalid, Disabled };
|
||||||
|
|
||||||
5
src/docs/components/InputBlocks/Preview.tsx
Normal file
5
src/docs/components/InputBlocks/Preview.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Input } from "@components/Input";
|
||||||
|
|
||||||
|
export function InputDemo() {
|
||||||
|
return <Input type="text" />;
|
||||||
|
}
|
||||||
23
src/docs/components/InputFrameBlocks/Preview.tsx
Normal file
23
src/docs/components/InputFrameBlocks/Preview.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Input, InputFrame } from "@components/Input";
|
||||||
|
|
||||||
|
export function InputFrameDemo() {
|
||||||
|
return (
|
||||||
|
<InputFrame>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
125
src/docs/components/Label.mdx
Normal file
125
src/docs/components/Label.mdx
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
import {
|
||||||
|
TabProvider, TabTrigger, TabContent, TabList
|
||||||
|
} from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { LabelDemo } from "./LabelBlocks/Preview";
|
||||||
|
import Examples from "./LabelBlocks/Examples"
|
||||||
|
|
||||||
|
# Label
|
||||||
|
A wrapper that used to tag and describe form elements clearly and accessibly.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<LabelDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Label.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Label.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Label } from "@components/Label"
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Label>
|
||||||
|
<input />
|
||||||
|
</Label>
|
||||||
|
|
||||||
|
<Label htmlFor="input">Label</Label>
|
||||||
|
<input id="input" />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:------------|:-----------------------------|:-------------|:----------------------------|
|
||||||
|
| `direction` | `"vertical" \| "horizontal"` | `"vertical"` | The direction of the label. |
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Vertical
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Vertical />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Vertical.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Horizontal
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Horizontal />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Horizontal.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Invalid
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Invalid />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Invalid.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Disabled
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Disabled />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Disabled.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
11
src/docs/components/LabelBlocks/Examples/Disabled.tsx
Normal file
11
src/docs/components/LabelBlocks/Examples/Disabled.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Label } from "@components/Label";
|
||||||
|
import { Input } from "@components/Input";
|
||||||
|
|
||||||
|
export function Disabled() {
|
||||||
|
return (
|
||||||
|
<Label direction="vertical">
|
||||||
|
<span>Email</span>
|
||||||
|
<Input type="email" disabled />
|
||||||
|
</Label>
|
||||||
|
);
|
||||||
|
}
|
||||||
11
src/docs/components/LabelBlocks/Examples/Horizontal.tsx
Normal file
11
src/docs/components/LabelBlocks/Examples/Horizontal.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Label } from "@components/Label";
|
||||||
|
import { Checkbox } from "@components/Checkbox";
|
||||||
|
|
||||||
|
export function Horizontal() {
|
||||||
|
return (
|
||||||
|
<Label direction="horizontal">
|
||||||
|
<Checkbox />
|
||||||
|
<span>Checkbox</span>
|
||||||
|
</Label>
|
||||||
|
);
|
||||||
|
}
|
||||||
11
src/docs/components/LabelBlocks/Examples/Invalid.tsx
Normal file
11
src/docs/components/LabelBlocks/Examples/Invalid.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Label } from "@components/Label";
|
||||||
|
import { Input } from "@components/Input";
|
||||||
|
|
||||||
|
export function Invalid() {
|
||||||
|
return (
|
||||||
|
<Label direction="vertical">
|
||||||
|
<span>Email</span>
|
||||||
|
<Input type="email" invalid="Invalid Email" />
|
||||||
|
</Label>
|
||||||
|
);
|
||||||
|
}
|
||||||
11
src/docs/components/LabelBlocks/Examples/Vertical.tsx
Normal file
11
src/docs/components/LabelBlocks/Examples/Vertical.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Label } from "@components/Label";
|
||||||
|
import { Input } from "@components/Input";
|
||||||
|
|
||||||
|
export function Vertical() {
|
||||||
|
return (
|
||||||
|
<Label direction="vertical">
|
||||||
|
<span>Email</span>
|
||||||
|
<Input type="email" />
|
||||||
|
</Label>
|
||||||
|
);
|
||||||
|
}
|
||||||
12
src/docs/components/LabelBlocks/Examples/index.ts
Normal file
12
src/docs/components/LabelBlocks/Examples/index.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { Vertical } from "./Vertical";
|
||||||
|
import { Horizontal } from "./Horizontal";
|
||||||
|
import { Invalid } from "./Invalid";
|
||||||
|
import { Disabled } from "./Disabled";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
Vertical,
|
||||||
|
Horizontal,
|
||||||
|
Invalid,
|
||||||
|
Disabled,
|
||||||
|
};
|
||||||
|
|
||||||
11
src/docs/components/LabelBlocks/Preview.tsx
Normal file
11
src/docs/components/LabelBlocks/Preview.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Label } from "@components/Label";
|
||||||
|
import { Input } from "@components/Input";
|
||||||
|
|
||||||
|
export function LabelDemo() {
|
||||||
|
return (
|
||||||
|
<Label direction="vertical">
|
||||||
|
<span>Email</span>
|
||||||
|
<Input type="email" />
|
||||||
|
</Label>
|
||||||
|
);
|
||||||
|
}
|
||||||
117
src/docs/components/Popover.mdx
Normal file
117
src/docs/components/Popover.mdx
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { PopoverDemo } from "./PopoverBlocks/Preview";
|
||||||
|
import Examples from "./PopoverBlocks/Examples";
|
||||||
|
|
||||||
|
# Popover
|
||||||
|
Displays rich content in a portal, triggered by a button.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<PopoverDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/PopoverBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Popover.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Popover.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Popover, PopoverTrigger, PopoverContent } from "@components/popover"
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger>
|
||||||
|
<Button />
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent>
|
||||||
|
{/* content of popover */}
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note:
|
||||||
|
>
|
||||||
|
> PopoverTrigger will merge its onClick event handler to its children.
|
||||||
|
> Also, there is no default element for those.
|
||||||
|
> So you always have to provide the clickable children for PopoverTrigger.
|
||||||
|
>
|
||||||
|
> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### Popover
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:----------|:--------|:------------------------------------------------------------------|
|
||||||
|
| `opened` | `boolean` | `false` | Initial open state |
|
||||||
|
| `asChild` | `boolean` | `false` | Whether the root of popover is rendered as a child of a component |
|
||||||
|
|
||||||
|
### PopoverContent
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:---------|:-------------------------------------------------------------------------|:-----------------|:--------------------------------|
|
||||||
|
| `anchor` | `` `${"top" \| "middle" \| "bottom"}${"Left" \| "Center" \| "Right"}` `` | `"bottomCenter"` | Position of Popover content |
|
||||||
|
| `offset` | `"sm" \| "md" \| "lg"` | `"md"` | Gap between trigger and popover |
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:----------|:--------|:--------------------------------------------------------------------------------|
|
||||||
|
| `asChild` | `boolean` | `false` | `Whether the container of popover content is rendered as a child of a component |
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Theme Selector
|
||||||
|
|
||||||
|
<TabProvider defaultName={"preview"}>
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name={"preview"}>Preview</TabTrigger>
|
||||||
|
<TabTrigger name={"code"}>Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name={"preview"}>
|
||||||
|
<Story layout={"centered"}>
|
||||||
|
<Examples.ThemeSelector />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name={"code"}>
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### User Control
|
||||||
|
|
||||||
|
<TabProvider defaultName={"preview"}>
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name={"preview"}>Preview</TabTrigger>
|
||||||
|
<TabTrigger name={"code"}>Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name={"preview"}>
|
||||||
|
<Story layout={"centered"}>
|
||||||
|
<Examples.UserControl />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name={"code"}>
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/PopoverBlocks/Examples/UserControl.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
43
src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx
Normal file
43
src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import { Popover, PopoverTrigger, PopoverContent } from "@components/Popover.tsx";
|
||||||
|
import { Button } from "@components/Button.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>
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
}
|
||||||
151
src/docs/components/PopoverBlocks/Examples/UserControl.tsx
Normal file
151
src/docs/components/PopoverBlocks/Examples/UserControl.tsx
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverTrigger,
|
||||||
|
PopoverContent,
|
||||||
|
} from "@components/Popover.tsx";
|
||||||
|
import { Button } from "@components/Button.tsx";
|
||||||
|
import { useToast } from "@components/Toast.tsx";
|
||||||
|
import {
|
||||||
|
createContext,
|
||||||
|
Dispatch,
|
||||||
|
SetStateAction,
|
||||||
|
SVGProps,
|
||||||
|
useContext,
|
||||||
|
useState,
|
||||||
|
useTransition,
|
||||||
|
} from "react";
|
||||||
|
import { Label } from "@components/Label.tsx";
|
||||||
|
import { Input } from "@components/Input.tsx";
|
||||||
|
|
||||||
|
interface UserControlState {
|
||||||
|
signIn: boolean;
|
||||||
|
}
|
||||||
|
const initialState: UserControlState = {
|
||||||
|
signIn: false,
|
||||||
|
};
|
||||||
|
const UserControlContext = createContext<
|
||||||
|
[UserControlState, Dispatch<SetStateAction<UserControlState>>]
|
||||||
|
>([initialState, () => {}]);
|
||||||
|
|
||||||
|
const logInServerAction = async () => {
|
||||||
|
return new Promise((r) => setTimeout(r, 2000));
|
||||||
|
};
|
||||||
|
|
||||||
|
const logOutServerAction = async () => {
|
||||||
|
return new Promise((r) => setTimeout(r, 1000));
|
||||||
|
};
|
||||||
|
|
||||||
|
function MdiLoading(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
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 [_, setState] = useContext(UserControlContext);
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
function startSignIn() {
|
||||||
|
transition[1](() => {
|
||||||
|
setIsSigningIn(true);
|
||||||
|
const toasted = toast({
|
||||||
|
title: "Logging In...",
|
||||||
|
description: "Please wait until server responses",
|
||||||
|
status: "loading",
|
||||||
|
});
|
||||||
|
logInServerAction().then(() => {
|
||||||
|
toasted.update({
|
||||||
|
title: "Log In Success",
|
||||||
|
description: "Successfully logged in!",
|
||||||
|
status: "success",
|
||||||
|
});
|
||||||
|
setIsSigningIn(false);
|
||||||
|
setState((prev) => ({ ...prev, signIn: true }));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PopoverContent anchor={"bottomLeft"} className={"p-4 space-y-3"}>
|
||||||
|
<Label>
|
||||||
|
<span>Username</span>
|
||||||
|
<Input type={"text"} />
|
||||||
|
</Label>
|
||||||
|
<Label>
|
||||||
|
<span>Password</span>
|
||||||
|
<Input type={"password"} />
|
||||||
|
</Label>
|
||||||
|
<div className={"flex flex-row justify-end"}>
|
||||||
|
<Button preset={"success"} onClick={startSignIn}>
|
||||||
|
{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 { toast } = useToast();
|
||||||
|
|
||||||
|
function startSignOut() {
|
||||||
|
transition[1](() => {
|
||||||
|
setIsSigningOut(true);
|
||||||
|
const toasted = toast({
|
||||||
|
title: "Logging Out",
|
||||||
|
description: "Please wait until server responses",
|
||||||
|
status: "loading",
|
||||||
|
});
|
||||||
|
logOutServerAction().then(() => {
|
||||||
|
toasted.update({
|
||||||
|
title: "Log Out Success",
|
||||||
|
description: "Successfully logged out!",
|
||||||
|
status: "success",
|
||||||
|
});
|
||||||
|
setIsSigningOut(false);
|
||||||
|
setState((prev) => ({ ...prev, signIn: false }));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PopoverContent anchor={"bottomLeft"}>
|
||||||
|
<Button preset={"ghost"}>Dashboard</Button>
|
||||||
|
<Button preset={"ghost"} onClick={startSignOut}>
|
||||||
|
{isSigningOut ? <MdiLoading className={"animate-spin"} /> : "Sign Out"}
|
||||||
|
</Button>
|
||||||
|
</PopoverContent>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const UserControl = () => {
|
||||||
|
const [state, setState] = useState<UserControlState>({
|
||||||
|
signIn: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger>
|
||||||
|
<Button>{state.signIn ? "Log Out" : "Log In"}</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<UserControlContext.Provider value={[state, setState]}>
|
||||||
|
{state.signIn ? <UserControlContent /> : <SignInForm />}
|
||||||
|
</UserControlContext.Provider>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
};
|
||||||
7
src/docs/components/PopoverBlocks/Examples/index.ts
Normal file
7
src/docs/components/PopoverBlocks/Examples/index.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { ThemeSelector } from "./ThemeSelector";
|
||||||
|
import { UserControl } from "./UserControl";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
ThemeSelector,
|
||||||
|
UserControl,
|
||||||
|
}
|
||||||
54
src/docs/components/PopoverBlocks/Preview.tsx
Normal file
54
src/docs/components/PopoverBlocks/Preview.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
|
||||||
|
|
||||||
|
export function PopoverDemo() {
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger>
|
||||||
|
<Button size="icon">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="flex-grow text-left">Dashboard</span>
|
||||||
|
</Button>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
40
src/docs/components/Switch.mdx
Normal file
40
src/docs/components/Switch.mdx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { SwitchDemo } from "./SwitchBlocks/Preview";
|
||||||
|
|
||||||
|
# Switch
|
||||||
|
Toggle between two states with a sleek design. Perfect for enabling/disabling options.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<SwitchDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/SwitchBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Switch.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Switch.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Switch } from "@components/Switch";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Switch />
|
||||||
|
```
|
||||||
|
|
||||||
5
src/docs/components/SwitchBlocks/Preview.tsx
Normal file
5
src/docs/components/SwitchBlocks/Preview.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Switch } from "@components/Switch";
|
||||||
|
|
||||||
|
export function SwitchDemo() {
|
||||||
|
return <Switch />;
|
||||||
|
}
|
||||||
79
src/docs/components/Tabs.mdx
Normal file
79
src/docs/components/Tabs.mdx
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { TabsDemo } from "./TabsBlocks/Preview";
|
||||||
|
|
||||||
|
# Tabs
|
||||||
|
Organizes content into multiple sections with tabbed navigation.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered" className="flex-col [&>*]:w-full">
|
||||||
|
<TabsDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TabsBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Tabs.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Tabs.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<TabProvider defaultName="tab1">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="tab1">Tab 1</TabTrigger>
|
||||||
|
<TabTrigger name="tab2">Tab 2</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="tab1">
|
||||||
|
<div>Tab 1 Content</div>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="tab2">
|
||||||
|
<div>Tab 2 Content</div>
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note:
|
||||||
|
>
|
||||||
|
> TabContent requires a element as children.
|
||||||
|
> There is no default element in the tab, so you have to provide it.
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### TabProvider
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
|:--------------|:---------|:-----------------|:---------------------------------------------|
|
||||||
|
| `defaultName` | `string` | - (**required**) | The name of the tab to be active by default. |
|
||||||
|
|
||||||
|
### TabTrigger
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
|:----------|:----------|:-----------------|:----------------------------------------------------------|
|
||||||
|
| `name` | `string` | - (**required**) | The name of the tab. |
|
||||||
|
| `asChild` | `boolean` | `false` | Whether the element is rendered as a child of a component |
|
||||||
|
|
||||||
|
### TabContent
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
|:-------|:---------|:-----------------|:---------------------|
|
||||||
|
| `name` | `string` | - (**required**) | The name of the tab. |
|
||||||
18
src/docs/components/TabsBlocks/Preview.tsx
Normal file
18
src/docs/components/TabsBlocks/Preview.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
|
||||||
|
export function TabsDemo() {
|
||||||
|
return (
|
||||||
|
<TabProvider defaultName="tab1">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="tab1">Tab 1</TabTrigger>
|
||||||
|
<TabTrigger name="tab2">Tab 2</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="tab1">
|
||||||
|
<div className="w-full text-center">Tab 1 Content</div>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="tab2">
|
||||||
|
<div className="w-full text-center">Tab 2 Content</div>
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
182
src/docs/components/Toast.mdx
Normal file
182
src/docs/components/Toast.mdx
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs"
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { ToastDemo } from "./ToastBlocks/Preview";
|
||||||
|
import Examples from "./ToastBlocks/Examples";
|
||||||
|
|
||||||
|
# Toast
|
||||||
|
A brief message alert to inform users about events or actions.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<ToastDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Toast.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Toast.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Toaster } from "@components/Toast";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Toaster />
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note:
|
||||||
|
>
|
||||||
|
> You can put Toaster in anywhere. It will automatically go to document.body through portal.
|
||||||
|
> But, it is recommended to place it at the root of the application, just once.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
return <button onClick={() => toast("Hello, world!")}>Toast</button>;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### Toaster
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------------|:-----------------------|:---------------------|:--------------------------|
|
||||||
|
| `defaultOption` | `Partial<ToastOption>` | `defaultToastOption` | Global options for toast. |
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface ToastOption {
|
||||||
|
closeButton: boolean;
|
||||||
|
closeTimeout: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultToastOption: ToastOption = {
|
||||||
|
closeButton: true,
|
||||||
|
closeTimeout: 3000,
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Normal
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Normal />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Success
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Success />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Error
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Error />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Warning
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Warning />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Pending - Fail
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.PendingFail />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Pending - Success
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.PendingSuccess />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
29
src/docs/components/ToastBlocks/Examples/Error.tsx
Normal file
29
src/docs/components/ToastBlocks/Examples/Error.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
toast({
|
||||||
|
title: "Toast Title",
|
||||||
|
description: "Toast Description",
|
||||||
|
status: "error",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Error() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
29
src/docs/components/ToastBlocks/Examples/Normal.tsx
Normal file
29
src/docs/components/ToastBlocks/Examples/Normal.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
toast({
|
||||||
|
title: "Toast Title",
|
||||||
|
description: "Toast Description",
|
||||||
|
status: "default",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Normal() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
35
src/docs/components/ToastBlocks/Examples/PendingFail.tsx
Normal file
35
src/docs/components/ToastBlocks/Examples/PendingFail.tsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
const toasted = toast({
|
||||||
|
title: "Waiting...",
|
||||||
|
description: "Waiting for result...",
|
||||||
|
status: "loading",
|
||||||
|
});
|
||||||
|
await new Promise((r) => setTimeout(r, 1000));
|
||||||
|
toasted.update({
|
||||||
|
title: "Promise Failed",
|
||||||
|
description: "Something went wrong!",
|
||||||
|
status: "error",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PendingFail() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
37
src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx
Normal file
37
src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
const toasted = toast({
|
||||||
|
title: "Waiting...",
|
||||||
|
description: "Waiting for result...",
|
||||||
|
status: "loading",
|
||||||
|
});
|
||||||
|
|
||||||
|
await new Promise((r) => setTimeout(r, 1000));
|
||||||
|
|
||||||
|
toasted.update({
|
||||||
|
title: "Promise Success",
|
||||||
|
description: "Promise resolved!",
|
||||||
|
status: "success",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PendingSuccess() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
29
src/docs/components/ToastBlocks/Examples/Success.tsx
Normal file
29
src/docs/components/ToastBlocks/Examples/Success.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
toast({
|
||||||
|
title: "Toast Title",
|
||||||
|
description: "Toast Description",
|
||||||
|
status: "success",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Success() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
29
src/docs/components/ToastBlocks/Examples/Warning.tsx
Normal file
29
src/docs/components/ToastBlocks/Examples/Warning.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
toast({
|
||||||
|
title: "Toast Title",
|
||||||
|
description: "Toast Description",
|
||||||
|
status: "warning",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Warning() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
16
src/docs/components/ToastBlocks/Examples/index.ts
Normal file
16
src/docs/components/ToastBlocks/Examples/index.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { Error } from "./Error";
|
||||||
|
import { Normal } from "./Normal";
|
||||||
|
import { PendingFail } from "./PendingFail";
|
||||||
|
import { PendingSuccess } from "./PendingSuccess";
|
||||||
|
import { Success } from "./Success";
|
||||||
|
import { Warning } from "./Warning";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
Error,
|
||||||
|
Normal,
|
||||||
|
PendingFail,
|
||||||
|
PendingSuccess,
|
||||||
|
Success,
|
||||||
|
Warning,
|
||||||
|
};
|
||||||
|
|
||||||
25
src/docs/components/ToastBlocks/Preview.tsx
Normal file
25
src/docs/components/ToastBlocks/Preview.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
toast({ title: "Toast Title", description: "Toast Description" })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ToastDemo() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
206
src/docs/components/Tooltip.mdx
Normal file
206
src/docs/components/Tooltip.mdx
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { TooltipDemo } from "./TooltipBlocks/Preview";
|
||||||
|
import Examples from "./TooltipBlocks/Examples";
|
||||||
|
|
||||||
|
# Tooltip
|
||||||
|
A brief helper for providing contextual information or guiding user interactions.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<TooltipDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Tooltip.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Tooltip.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipContent>
|
||||||
|
{/* Tooltip Content */}
|
||||||
|
</TooltipContent>
|
||||||
|
{/* Tooltip Trigger */}
|
||||||
|
</Tooltip>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### Tooltip
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:-------------|:-----------------------------------------|:--------|:----------------------------------------|
|
||||||
|
| `position` | `"bottom" \| "left" \| "right" \| "top"` | `"top"` | The position of the tooltip. |
|
||||||
|
| `controlled` | `boolean` | `false` | Blocks tooltip triggered by hover state |
|
||||||
|
| `opened` | `boolean` | `false` | Forces to be opened |
|
||||||
|
|
||||||
|
### TooltipContent
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:---------|:------------------------------------------------|:-----------|:---------------------------------------------------|
|
||||||
|
| `offset` | `"sm" \| "md" \| "lg"` | `"md"` | Gap between the tooltip and the trigger. |
|
||||||
|
| `delay` | `"none" \| "early" \| "normal" \| "late"` | `"normal"` | The time between hover start and appear of tooltip |
|
||||||
|
| `status` | `"normal" \| "error" \| "success" \| "warning"` | `"normal"` | Color of tooltip |
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
|
||||||
|
### Top
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Top />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Top.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Bottom
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Bottom />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Left
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Left />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Left.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Right
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Right />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Right.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### No Delay
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name={"preview"}>Preview</TabTrigger>
|
||||||
|
<TabTrigger name={"code"}>Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.NoDelay />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Early Delay
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name={"preview"}>Preview</TabTrigger>
|
||||||
|
<TabTrigger name={"code"}>Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.EarlyDelay />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Late Delay
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name={"preview"}>Preview</TabTrigger>
|
||||||
|
<TabTrigger name={"code"}>Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.LateDelay />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Controlled
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name={"preview"}>Preview</TabTrigger>
|
||||||
|
<TabTrigger name={"code"}>Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name={"preview"}>
|
||||||
|
<Story layout={"centered"}>
|
||||||
|
<Examples.Controlled />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name={"code"}>
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
13
src/docs/components/TooltipBlocks/Examples/Bottom.tsx
Normal file
13
src/docs/components/TooltipBlocks/Examples/Bottom.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function Bottom() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="bottom">
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
16
src/docs/components/TooltipBlocks/Examples/Controlled.tsx
Normal file
16
src/docs/components/TooltipBlocks/Examples/Controlled.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export function Controlled() {
|
||||||
|
const [opened, setOpened] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip position="top" controlled opened={opened}>
|
||||||
|
<TooltipContent delay={"early"}>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button onClick={() => setOpened((p) => !p)}>Open hover</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx
Normal file
13
src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function EarlyDelay() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="bottom">
|
||||||
|
<TooltipContent delay={"early"}>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
src/docs/components/TooltipBlocks/Examples/LateDelay.tsx
Normal file
13
src/docs/components/TooltipBlocks/Examples/LateDelay.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function LateDelay() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="bottom">
|
||||||
|
<TooltipContent delay={"late"}>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
src/docs/components/TooltipBlocks/Examples/Left.tsx
Normal file
13
src/docs/components/TooltipBlocks/Examples/Left.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function Left() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="left">
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
src/docs/components/TooltipBlocks/Examples/NoDelay.tsx
Normal file
13
src/docs/components/TooltipBlocks/Examples/NoDelay.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function NoDelay() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="bottom">
|
||||||
|
<TooltipContent delay={"none"}>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
src/docs/components/TooltipBlocks/Examples/Right.tsx
Normal file
13
src/docs/components/TooltipBlocks/Examples/Right.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function Right() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="right">
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
src/docs/components/TooltipBlocks/Examples/Top.tsx
Normal file
13
src/docs/components/TooltipBlocks/Examples/Top.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function Top() {
|
||||||
|
return (
|
||||||
|
<Tooltip position="top">
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
19
src/docs/components/TooltipBlocks/Examples/index.ts
Normal file
19
src/docs/components/TooltipBlocks/Examples/index.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { Bottom } from "./Bottom";
|
||||||
|
import { Left } from "./Left";
|
||||||
|
import { Right } from "./Right";
|
||||||
|
import { Top } from "./Top";
|
||||||
|
import { NoDelay } from "./NoDelay";
|
||||||
|
import { EarlyDelay } from "./EarlyDelay";
|
||||||
|
import { LateDelay } from "./LateDelay";
|
||||||
|
import { Controlled } from "./Controlled";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
Bottom,
|
||||||
|
Left,
|
||||||
|
Right,
|
||||||
|
Top,
|
||||||
|
NoDelay,
|
||||||
|
EarlyDelay,
|
||||||
|
LateDelay,
|
||||||
|
Controlled,
|
||||||
|
};
|
||||||
13
src/docs/components/TooltipBlocks/Preview.tsx
Normal file
13
src/docs/components/TooltipBlocks/Preview.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Tooltip, TooltipContent } from "@components/Tooltip";
|
||||||
|
|
||||||
|
export function TooltipDemo() {
|
||||||
|
return (
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
<Button>Hover me</Button>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
64
src/docs/configuration.mdx
Normal file
64
src/docs/configuration.mdx
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
# Configuration
|
||||||
|
|
||||||
|
## Library File
|
||||||
|
|
||||||
|
Library file is a shared utility container every component uses.
|
||||||
|
You can put it anywhere as long as you properly update import path.
|
||||||
|
|
||||||
|
PSW/UI manages its import path using tsconfig path.
|
||||||
|
|
||||||
|
If you want to follow our rule, you can add a path to your `tsconfig.json`.
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@pswui-lib": ["./pswui/lib.tsx"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## CLI
|
||||||
|
|
||||||
|
You can use configuration file to change things of CLI.
|
||||||
|
|
||||||
|
Default config file name is `pswui.config.js`.
|
||||||
|
|
||||||
|
Here is our config structure:
|
||||||
|
```typescript
|
||||||
|
export interface Config {
|
||||||
|
/**
|
||||||
|
* Path that cli will create a file.
|
||||||
|
*/
|
||||||
|
paths?: {
|
||||||
|
components?: 'src/pswui/components' | string
|
||||||
|
lib?: 'src/pswui/lib.tsx' | string
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Absolute path that will used for import in component
|
||||||
|
*/
|
||||||
|
import?: {
|
||||||
|
lib?: '@pswui-lib' | string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You can import `Config` type or `buildConfig` function to use typescript intellisense.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { Config } from "@psw-ui/cli"
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { buildConfig } from "@psw-ui/cli"
|
||||||
|
|
||||||
|
export default buildConfig({
|
||||||
|
/* ... */
|
||||||
|
})
|
||||||
|
```
|
||||||
36
src/docs/installation.mdx
Normal file
36
src/docs/installation.mdx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import {TabProvider, TabContent, TabList, TabTrigger} from "@components/Tabs";
|
||||||
|
import {Code} from "@/components/LoadedCode";
|
||||||
|
|
||||||
|
# Installation
|
||||||
|
|
||||||
|
<TabProvider defaultName="cli">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="cli">Using CLI</TabTrigger>
|
||||||
|
<TabTrigger name="manual">Manual Install</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="cli">
|
||||||
|
1. Install [TailwindCSS](https://tailwindcss.com/docs/installation) and [tailwind-merge](https://github.com/dhiwise/tailwind-merge) and configure it yourself.
|
||||||
|
2. Add import alias for `@pswui-lib` in your `tsconfig.json` file.
|
||||||
|
<Code language={"json"}>
|
||||||
|
{`{\n "compilerOptions": {\n "paths": {\n "@pswui-lib": ["./pswui/lib.tsx"]\n }\n }\n}`}
|
||||||
|
</Code>
|
||||||
|
3. Install [@psw-ui/cli](https://www.npmjs.com/package/@psw-ui/cli).
|
||||||
|
<Code language={"plaintext"}>
|
||||||
|
{`$ npm install -D \@psw-ui/cli\n$ yarn add -D @psw-ui/cli\n$ pnpm add -D @psw-ui/cli`}
|
||||||
|
</Code>
|
||||||
|
4. Run CLI to add components
|
||||||
|
<Code language={"plaintext"}>
|
||||||
|
{`$ npx pswui add <component>\n$ yarn pswui add <component>\n$ pnpm pswui add <component>`}
|
||||||
|
</Code>
|
||||||
|
5. Import component, and use it.
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="manual">
|
||||||
|
1. Install [TailwindCSS](https://tailwindcss.com/docs/installation) and [tailwind-merge](https://github.com/dhiwise/tailwind-merge) and configure it yourself.
|
||||||
|
2. Add import alias for `@pswui-lib` in your `tsconfig.json` file.
|
||||||
|
<Code language={"json"}>
|
||||||
|
{`{\n "compilerOptions": {\n "paths": {\n "@pswui-lib": ["<your library file>"]\n }\n }\n}`}
|
||||||
|
</Code>
|
||||||
|
3. Grab the library file from [here](https://raw.githubusercontent.com/pswui/ui/main/packages/react/lib.tsx) and put it in the library file path in the tsconfig.
|
||||||
|
4. Now you can copy & paste your component in your project.
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
41
src/docs/introduction.mdx
Normal file
41
src/docs/introduction.mdx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
# Introduction
|
||||||
|
|
||||||
|
> Beautifully designed, easily copy & pastable, fully customizable - that means it only depends on few dependencies.
|
||||||
|
|
||||||
|
This is **UI kit**, a collection of re-usable components that you can copy and paste into your apps.
|
||||||
|
This UI kit is inspired by [shadcn/ui](https://ui.shadcn.com/) - but it is more customizable.
|
||||||
|
|
||||||
|
**More customizable?**
|
||||||
|
|
||||||
|
shadcn/ui depends on a lot of packages to provide functionality to its components.
|
||||||
|
Radix UI, React DayPicker, Embla Carousel...
|
||||||
|
|
||||||
|
I'm not saying it's a bad thing.
|
||||||
|
|
||||||
|
But when you depends on a lot of package - you easily mess up your package.json, and you can't even edit a single feature.
|
||||||
|
The only thing you can customize is **style**.
|
||||||
|
|
||||||
|
If there's a bug that needs to be fixed quickly, or a feature that doesn't work the way you want it to,
|
||||||
|
you'll want to tweak it to your liking. This is where relying on a lot of packages can be poison.
|
||||||
|
|
||||||
|
PSW/UI solves this - by **NOT** depending on any other packages than framework like React, TailwindCSS, and tailwind-merge.
|
||||||
|
|
||||||
|
You can just copy it, and all functionality is contained in a single file.
|
||||||
|
|
||||||
|
# Roadmap
|
||||||
|
|
||||||
|
First of all, this project is alpha.
|
||||||
|
|
||||||
|
You can see a lot of components are missing, and some component is buggy.
|
||||||
|
|
||||||
|
I'm working with this priority:
|
||||||
|
|
||||||
|
1. Adding new component, with stable features.
|
||||||
|
2. Fixing bugs with existing components.
|
||||||
|
3. Make it looks nice.
|
||||||
|
|
||||||
|
Also, there is a [Github README](https://github.com/p-sw/ui) for component implementation plans.
|
||||||
|
|
||||||
|
You can see what component is implemented, or planned to be implemented.
|
||||||
|
|
||||||
|
If you have any ideas or suggestions, please let me know in [Github Issues](https://github.com/p-sw/ui/issues).
|
||||||
22
src/errors/PageNotFound.tsx
Normal file
22
src/errors/PageNotFound.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "../../components/Button";
|
||||||
|
|
||||||
|
function PageNotFound() {
|
||||||
|
return (
|
||||||
|
<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">
|
||||||
|
<h1 className="text-4xl font-bold">Page not found</h1>
|
||||||
|
<p className="text-base">
|
||||||
|
The page you are looking for does not exist.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section className="flex flex-row justify-center items-center text-center gap-2">
|
||||||
|
<Button asChild preset="default">
|
||||||
|
<Link to="/">Go home</Link>
|
||||||
|
</Button>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PageNotFound;
|
||||||
22
src/errors/Unexpected.tsx
Normal file
22
src/errors/Unexpected.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "../../components/Button";
|
||||||
|
|
||||||
|
function UnexpectedError() {
|
||||||
|
return (
|
||||||
|
<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">
|
||||||
|
<h1 className="text-4xl font-bold">Something went wrong</h1>
|
||||||
|
<p className="text-base">
|
||||||
|
There was an unexpected error while loading the page.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section className="flex flex-row justify-center items-center text-center gap-2">
|
||||||
|
<Button asChild preset="default">
|
||||||
|
<Link to="/">Go home</Link>
|
||||||
|
</Button>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UnexpectedError;
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import "./tailwind.css";
|
||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import App from "./App.tsx";
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
7
src/mdx.d.ts
vendored
Normal file
7
src/mdx.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
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
|
||||||
|
}
|
||||||
37
src/tailwind.css
Normal file
37
src/tailwind.css
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--dark-bg-color: #000;
|
||||||
|
--dark-text-color: #fff;
|
||||||
|
--dark-btn-bg-color: #2f2f2f;
|
||||||
|
--dark-btn-text-color: #fff;
|
||||||
|
--dark-code-bg-color: #1f1f1f;
|
||||||
|
--font-wanted: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: var(--font-wanted);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-white dark:bg-[var(--dark-bg-color)] text-black dark:text-[var(--dark-text-color)] transition-colors duration-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,body,div#root {
|
||||||
|
height: auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
div#root {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
@apply transition-colors;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
6
src/vite-env.d.ts
vendored
Normal file
6
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
import { ImportGlobFunction } from "vite/types/importGlob";
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
glob: ImportGlobFunction;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user