diff --git a/public/site.webmanifest b/public/site.webmanifest index 45dc8a2..fa99de7 100644 --- a/public/site.webmanifest +++ b/public/site.webmanifest @@ -1 +1,19 @@ -{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/src/App.tsx b/src/App.tsx index c57c4a7..3bfd1ed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,256 +1,290 @@ -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 "@pswui/Tooltip"; - -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) => { - const internalRef = useRef(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 ( - - { - 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} - -

- {messages[status]} -

- - - - ); - }; -} - -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 {children as string}; - }, - code: forwardRef((props: any, ref) => ( - - )), - table: forwardRef((props: any, ref) => ( -
- - - )), - h1: forwardRef(HashedHeaders("h1")), - h2: forwardRef(HashedHeaders("h2")), - h3: forwardRef(HashedHeaders("h3")), - h4: forwardRef(HashedHeaders("h4")), - h5: forwardRef(HashedHeaders("h5")), - h6: forwardRef(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 ( - { - const { default: C, tableOfContents } = await import( - `./docs/components/${sfPath}.mdx` - ); - return { - Component: () => ( - - - - ), - }; - }} - /> - ); -}); - -const REDIRECTED_404 = /^\?(\/([a-zA-Z0-9\-_]+\/?)+)(&.*)*$/; - -const router = createBrowserRouter( - createRoutesFromElements( - } errorElement={}> - - REDIRECTED_404.test(window.location.search) - ? redirect(REDIRECTED_404.exec(window.location.search)?.[1] ?? "/") - : true - } - element={} - /> - }> - redirect("/docs/introduction")} /> - - - - } - /> - - - - } - /> - - - - } - /> - - - redirect( - `/docs/components/${Object.keys(docsModules)[0] - .split("/") - .pop() - ?.replace(".mdx", "")}`, - ) - } - /> - {routes} - - - , - ), -); - -function App() { - return ; -} - -export default App; +import { Code } from "@/components/LoadedCode"; +import { + Route, + RouterProvider, + createBrowserRouter, + createRoutesFromElements, + redirect, +} from "react-router-dom"; +import DocsLayout from "./DocsLayout"; +import DynamicLayout from "./DynamicLayout"; +import ErrorBoundary from "./ErrorHandler"; +import Home from "./Home"; +import MainLayout from "./MainLayout"; + +import DocsConfiguration, { + tableOfContents as docsConfigurationToc, +} from "./docs/configuration.mdx"; +import DocsInstallation, { + tableOfContents as docsInstallationToc, +} from "./docs/installation.mdx"; +import DocsIntroduction, { + tableOfContents as docsIntroductionToc, +} from "./docs/introduction.mdx"; + +import { Tooltip, TooltipContent } from "@pswui/Tooltip"; +import React, { + type ForwardedRef, + forwardRef, + useContext, + useEffect, + useRef, + useState, +} from "react"; +import { HeadingContext } from "./HeadingContext"; + +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; +} + +type HashedHeaderProps = React.ComponentPropsWithoutRef<"h1">; + +function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) { + return (prop: HashedHeaderProps, ref: ForwardedRef) => { + const internalRef = useRef(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(); + }; + }, [setActiveHeadings]); + + 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 ( + + { + 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} + +

+ {messages[status]} +

+ + + + ); + }; +} + +const overrideComponents = { + pre: (props: React.ComponentPropsWithoutRef<"pre">) => { + if (!React.isValidElement(props.children)) { + return null; + } + + const { props: clonedProps } = React.cloneElement( + React.Children.only(props.children), + ); + + const { children, className } = clonedProps as { + children: React.ReactNode; + className?: string; + }; + + let language = "typescript"; + + if (className) { + const detectedLanguage = /language-([a-z]+)/.exec(className); + if (detectedLanguage) language = detectedLanguage[1]; + } + + return {children as string}; + }, + code: forwardRef((props, ref) => ( + + )), + table: forwardRef((props, ref) => ( +
+
+ + )), + h1: forwardRef(HashedHeaders("h1")), + h2: forwardRef(HashedHeaders("h2")), + h3: forwardRef(HashedHeaders("h3")), + h4: forwardRef(HashedHeaders("h4")), + h5: forwardRef(HashedHeaders("h5")), + h6: forwardRef(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 ( + { + const { default: C, tableOfContents } = await import( + `./docs/components/${sfPath}.mdx` + ); + return { + Component: () => ( + + + + ), + }; + }} + /> + ); +}); + +const REDIRECTED_404 = /^\?(\/([a-zA-Z0-9\-_]+\/?)+)(&.*)*$/; + +const router = createBrowserRouter( + createRoutesFromElements( + } + errorElement={} + > + + REDIRECTED_404.test(window.location.search) + ? redirect(REDIRECTED_404.exec(window.location.search)?.[1] ?? "/") + : true + } + element={} + /> + } + > + redirect("/docs/introduction")} + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + redirect( + `/docs/components/${Object.keys(docsModules)[0] + .split("/") + .pop() + ?.replace(".mdx", "")}`, + ) + } + /> + {routes} + + + , + ), +); + +function App() { + return ; +} + +export default App; diff --git a/src/DocsLayout.tsx b/src/DocsLayout.tsx index 98911c7..228c297 100644 --- a/src/DocsLayout.tsx +++ b/src/DocsLayout.tsx @@ -1,43 +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 ( - - ); -} - -function DocsLayout() { - return ( -
- - -
- ); -} - -export default DocsLayout; +import { Link, useLocation } from "react-router-dom"; +import { Outlet } from "react-router-dom"; +import RouteObject from "./RouteObject"; + +function SideNav() { + const location = useLocation(); + + return ( + + ); +} + +function DocsLayout() { + return ( +
+ + +
+ ); +} + +export default DocsLayout; diff --git a/src/DynamicLayout.tsx b/src/DynamicLayout.tsx index f54596e..16a583e 100644 --- a/src/DynamicLayout.tsx +++ b/src/DynamicLayout.tsx @@ -1,63 +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 ( -
    - {toc.map((tocEntry) => { - return ( - -
  • 0 - ? location.hash === `#${tocEntry.id}` - : false - } - > - {tocEntry.value} -
    • - {Array.isArray(tocEntry.children) && ( - - )} -     - ); - })} -
- ); -} - -export default function DynamicLayout({ - children, - toc, -}: { - children: ReactNode; - toc: Toc; -}) { - const [activeHeadings, setActiveHeadings] = useState([]); - - return ( - -
-
- {children} -
-
- - - ); -} +import type { Toc } from "@stefanprobst/rehype-extract-toc"; +import { Fragment, type ReactNode, useContext, useState } from "react"; +import { useLocation } from "react-router-dom"; +import { HeadingContext } from "./HeadingContext"; + +function RecursivelyToc({ toc }: { toc: Toc }) { + const location = useLocation(); + const [activeHeadings] = useContext(HeadingContext); + + return ( +
    + {toc.map((tocEntry) => { + return ( + +
  • 0 + ? location.hash === `#${tocEntry.id}` + : false + } + > + {tocEntry.value} +
    • + {Array.isArray(tocEntry.children) && ( + + )} +     + ); + })} +
+ ); +} + +export default function DynamicLayout({ + children, + toc, +}: { + children: ReactNode; + toc: Toc; +}) { + const [activeHeadings, setActiveHeadings] = useState([]); + + return ( + +
+
+ {children} +
+
+ + + ); +} diff --git a/src/ErrorHandler.tsx b/src/ErrorHandler.tsx index 0a9be29..0337456 100644 --- a/src/ErrorHandler.tsx +++ b/src/ErrorHandler.tsx @@ -1,19 +1,17 @@ -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 ; - } else { - return ; - } - } else { - return ; - } -} - -export default ErrorBoundary; +import { isRouteErrorResponse, useRouteError } from "react-router-dom"; +import PageNotFound from "./errors/PageNotFound"; +import UnexpectedError from "./errors/Unexpected"; + +function ErrorBoundary() { + const error = useRouteError(); + + if (isRouteErrorResponse(error)) { + if (error.status === 404) { + return ; + } + } + + return ; +} + +export default ErrorBoundary; diff --git a/src/HeadingContext.tsx b/src/HeadingContext.tsx index 8712e33..2cdc579 100644 --- a/src/HeadingContext.tsx +++ b/src/HeadingContext.tsx @@ -1,12 +1,12 @@ -import { Dispatch, SetStateAction, createContext } from "react"; - -export const HeadingContext = createContext< - [string[], Dispatch>] ->([ - [], - () => { - if (process.env && process.env.NODE_ENV === "development") { - console.log("HeadingContext outside"); - } - }, -]); +import { type Dispatch, type SetStateAction, createContext } from "react"; + +export const HeadingContext = createContext< + [string[], Dispatch>] +>([ + [], + () => { + if (process.env && process.env.NODE_ENV === "development") { + console.log("HeadingContext outside"); + } + }, +]); diff --git a/src/Home.tsx b/src/Home.tsx index 7fdb85c..c703578 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -1,30 +1,36 @@ -import { Link } from "react-router-dom"; -import { Button } from "@pswui/Button"; - -function Home() { - return ( -
-
-
-

- Build your components in isolation -

-

- There are a lot of component libraries out there, but why it install - so many things? -

-
-
- - -
-
-
- ); -} - -export default Home; +import { Button } from "@pswui/Button"; +import { Link } from "react-router-dom"; + +function Home() { + return ( +
+
+
+

+ Build your components in isolation +

+

+ There are a lot of component libraries out there, but why it install + so many things? +

+
+
+ + +
+
+
+ ); +} + +export default Home; diff --git a/src/MainLayout.tsx b/src/MainLayout.tsx index 5cfef08..83698af 100644 --- a/src/MainLayout.tsx +++ b/src/MainLayout.tsx @@ -1,215 +1,243 @@ -import { useEffect, useState } from "react"; -import { Link, Outlet, useLocation } from "react-router-dom"; -import { Button } from "@pswui/Button"; -import RouteObject from "./RouteObject"; -import { Toaster } from "@pswui/Toast"; -import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover"; -import { - DrawerClose, - DrawerContent, - DrawerOverlay, - DrawerRoot, - DrawerTrigger, -} from "@pswui/Drawer"; - -type Theme = "light" | "dark" | "system"; - -function ThemeButton() { - const [theme, setTheme] = useState( - (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 ( - - - - - - - - - - - ); -} - -function TopNav() { - const location = useLocation(); - - return ( - <> - - - ); -} - -function MainLayout() { - return ( - <> - - - - - ); -} - -export default MainLayout; +import { Button } from "@pswui/Button"; +import { + DrawerClose, + DrawerContent, + DrawerOverlay, + DrawerRoot, + DrawerTrigger, +} from "@pswui/Drawer"; +import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover"; +import { Toaster } from "@pswui/Toast"; +import { useEffect, useState } from "react"; +import { Link, Outlet, useLocation } from "react-router-dom"; +import RouteObject from "./RouteObject"; + +type Theme = "light" | "dark" | "system"; + +function ThemeButton() { + const [theme, setTheme] = useState( + (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 ( + + + + + + + + + + + ); +} + +function TopNav() { + const location = useLocation(); + + return ( + <> + + + ); +} + +function MainLayout() { + return ( + <> + + + + + ); +} + +export default MainLayout; diff --git a/src/RouteObject.ts b/src/RouteObject.ts index 5dc2fa2..43b36f8 100644 --- a/src/RouteObject.ts +++ b/src/RouteObject.ts @@ -1,59 +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/pswui/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, -}; +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/pswui/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: [], +}; + +for (const path of Object.keys(docsModules)) { + 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, +}; diff --git a/src/components/LoadedCode.tsx b/src/components/LoadedCode.tsx index 57963e1..a936e3b 100644 --- a/src/components/LoadedCode.tsx +++ b/src/components/LoadedCode.tsx @@ -1,123 +1,132 @@ -import { forwardRef, useEffect, useState } from "react"; -import SyntaxHighlighter from "react-syntax-highlighter"; -import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs"; -import { Button } from "@pswui/Button"; -import { useToast } from "@pswui/Toast"; -import { twMerge } from "tailwind-merge"; - -export const GITHUB_UI = "https://raw.githubusercontent.com/pswui/ui/main"; -export const GITHUB_DOCS = "https://raw.githubusercontent.com/pswui/docs/main"; -export const GITHUB_COMP = (componentName: string) => `${GITHUB_UI}/packages/react/components/${componentName}.tsx` -export const GITHUB_DIR_COMP = (componentName: string, source: string) => `${GITHUB_UI}/packages/react/components/${componentName}/${source}` -export const GITHUB_COMP_PREVIEW = (componentName: string) => `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Preview.tsx` -export const GITHUB_STORY = (componentName: string, storyName: string) => `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`; - -export const LoadedCode = ({ - from, - className, -}: { - from: string; - className?: string; -}) => { - const [state, setState] = useState(); - const { toast } = useToast(); - - useEffect(() => { - (async () => { - const res = await fetch(from); - const text = await res.text(); - setState(text); - })(); - }, [from]); - - return ( -
- - - {state ?? ""} - -
- ); -}; - -export const Code = forwardRef< - HTMLDivElement, - { children: string; className?: string; language: string } ->(({ children, className, language }, ref) => { - const { toast } = useToast(); - - return ( -
- - - {children} - -
- ); -}); +import { Button } from "@pswui/Button"; +import { useToast } from "@pswui/Toast"; +import { forwardRef, useEffect, useState } from "react"; +import SyntaxHighlighter from "react-syntax-highlighter"; +import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs"; +import { twMerge } from "tailwind-merge"; + +export const GITHUB_UI = "https://raw.githubusercontent.com/pswui/ui/main"; +export const GITHUB_DOCS = "https://raw.githubusercontent.com/pswui/docs/main"; +export const GITHUB_COMP = (componentName: string) => + `${GITHUB_UI}/packages/react/components/${componentName}.tsx`; +export const GITHUB_DIR_COMP = (componentName: string, source: string) => + `${GITHUB_UI}/packages/react/components/${componentName}/${source}`; +export const GITHUB_COMP_PREVIEW = (componentName: string) => + `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Preview.tsx`; +export const GITHUB_STORY = (componentName: string, storyName: string) => + `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`; + +export const LoadedCode = ({ + from, + className, +}: { + from: string; + className?: string; +}) => { + const [state, setState] = useState(); + const { toast } = useToast(); + + useEffect(() => { + (async () => { + const res = await fetch(from); + const text = await res.text(); + setState(text); + })(); + }, [from]); + + return ( +
+ + + {state ?? ""} + +
+ ); +}; + +export const Code = forwardRef< + HTMLDivElement, + { children: string; className?: string; language: string } +>(({ children, className, language }, ref) => { + const { toast } = useToast(); + + return ( +
+ + + {children} + +
+ ); +}); diff --git a/src/components/Story.tsx b/src/components/Story.tsx index 0e64a9d..c65602e 100644 --- a/src/components/Story.tsx +++ b/src/components/Story.tsx @@ -1,32 +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 ( -
- {children} -
- ); -}); - -export { Story }; +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 ( +
+ {children} +
+ ); +}); + +export { Story }; diff --git a/src/docs/components/ButtonBlocks/Examples/Danger.tsx b/src/docs/components/ButtonBlocks/Examples/Danger.tsx index 019eb4e..1f937f7 100644 --- a/src/docs/components/ButtonBlocks/Examples/Danger.tsx +++ b/src/docs/components/ButtonBlocks/Examples/Danger.tsx @@ -1,5 +1,5 @@ -import { Button } from "@pswui/Button"; - -export const Danger = () => { - return ; -}; +import { Button } from "@pswui/Button"; + +export const Danger = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/Default.tsx b/src/docs/components/ButtonBlocks/Examples/Default.tsx index 5985aca..109d522 100644 --- a/src/docs/components/ButtonBlocks/Examples/Default.tsx +++ b/src/docs/components/ButtonBlocks/Examples/Default.tsx @@ -1,5 +1,5 @@ -import { Button } from "@pswui/Button"; - -export const Default = () => { - return ; -}; +import { Button } from "@pswui/Button"; + +export const Default = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/Ghost.tsx b/src/docs/components/ButtonBlocks/Examples/Ghost.tsx index 3f706d6..f6037fa 100644 --- a/src/docs/components/ButtonBlocks/Examples/Ghost.tsx +++ b/src/docs/components/ButtonBlocks/Examples/Ghost.tsx @@ -1,5 +1,5 @@ -import { Button } from "@pswui/Button"; - -export const Ghost = () => { - return ; -}; +import { Button } from "@pswui/Button"; + +export const Ghost = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/Link.tsx b/src/docs/components/ButtonBlocks/Examples/Link.tsx index cbbf76b..ae62714 100644 --- a/src/docs/components/ButtonBlocks/Examples/Link.tsx +++ b/src/docs/components/ButtonBlocks/Examples/Link.tsx @@ -1,5 +1,5 @@ -import { Button } from "@pswui/Button"; - -export const Link = () => { - return ; -}; +import { Button } from "@pswui/Button"; + +export const Link = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/Success.tsx b/src/docs/components/ButtonBlocks/Examples/Success.tsx index de115a6..f6a4e9c 100644 --- a/src/docs/components/ButtonBlocks/Examples/Success.tsx +++ b/src/docs/components/ButtonBlocks/Examples/Success.tsx @@ -1,5 +1,5 @@ -import { Button } from "@pswui/Button"; - -export const Success = () => { - return ; -}; +import { Button } from "@pswui/Button"; + +export const Success = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/Warning.tsx b/src/docs/components/ButtonBlocks/Examples/Warning.tsx index 2297642..46db7ea 100644 --- a/src/docs/components/ButtonBlocks/Examples/Warning.tsx +++ b/src/docs/components/ButtonBlocks/Examples/Warning.tsx @@ -1,5 +1,5 @@ -import { Button } from "@pswui/Button"; - -export const Warning = () => { - return ; -}; +import { Button } from "@pswui/Button"; + +export const Warning = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/index.ts b/src/docs/components/ButtonBlocks/Examples/index.ts index e6f156b..c8fcc7d 100644 --- a/src/docs/components/ButtonBlocks/Examples/index.ts +++ b/src/docs/components/ButtonBlocks/Examples/index.ts @@ -1,16 +1,15 @@ -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, -}; - +import { Danger } from "./Danger"; +import { Default } from "./Default"; +import { Ghost } from "./Ghost"; +import { Link } from "./Link"; +import { Success } from "./Success"; +import { Warning } from "./Warning"; + +export default { + Danger, + Warning, + Success, + Link, + Ghost, + Default, +}; diff --git a/src/docs/components/ButtonBlocks/Preview.tsx b/src/docs/components/ButtonBlocks/Preview.tsx index fff80d6..6d858d1 100644 --- a/src/docs/components/ButtonBlocks/Preview.tsx +++ b/src/docs/components/ButtonBlocks/Preview.tsx @@ -1,5 +1,5 @@ -import { Button } from "@pswui/Button"; - -export function ButtonDemo() { - return ; -} +import { Button } from "@pswui/Button"; + +export function ButtonDemo() { + return ; +} diff --git a/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx b/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx index 22884f6..1d6d1ff 100644 --- a/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx +++ b/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx @@ -1,11 +1,14 @@ -import { Label } from "@pswui/Label"; -import { Checkbox } from "@pswui/Checkbox"; - -export function Disabled() { - return ( - - ); -} +import { Checkbox } from "@pswui/Checkbox"; +import { Label } from "@pswui/Label"; + +export function Disabled() { + return ( + + ); +} diff --git a/src/docs/components/CheckboxBlocks/Examples/Text.tsx b/src/docs/components/CheckboxBlocks/Examples/Text.tsx index 762a27e..d7173f4 100644 --- a/src/docs/components/CheckboxBlocks/Examples/Text.tsx +++ b/src/docs/components/CheckboxBlocks/Examples/Text.tsx @@ -1,11 +1,11 @@ -import { Label } from "@pswui/Label"; -import { Checkbox } from "@pswui/Checkbox"; - -export function Text() { - return ( - - ); -} +import { Checkbox } from "@pswui/Checkbox"; +import { Label } from "@pswui/Label"; + +export function Text() { + return ( + + ); +} diff --git a/src/docs/components/CheckboxBlocks/Examples/index.ts b/src/docs/components/CheckboxBlocks/Examples/index.ts index 099c604..6872751 100644 --- a/src/docs/components/CheckboxBlocks/Examples/index.ts +++ b/src/docs/components/CheckboxBlocks/Examples/index.ts @@ -1,5 +1,4 @@ -import { Text } from "./Text"; -import { Disabled } from "./Disabled"; - -export default { Text, Disabled }; - +import { Disabled } from "./Disabled"; +import { Text } from "./Text"; + +export default { Text, Disabled }; diff --git a/src/docs/components/CheckboxBlocks/Preview.tsx b/src/docs/components/CheckboxBlocks/Preview.tsx index fbd0d97..d877750 100644 --- a/src/docs/components/CheckboxBlocks/Preview.tsx +++ b/src/docs/components/CheckboxBlocks/Preview.tsx @@ -1,11 +1,11 @@ -import { Checkbox } from "@pswui/Checkbox"; -import { Label } from "@pswui/Label"; - -export function CheckboxDemo() { - return ( - - ); -} +import { Checkbox } from "@pswui/Checkbox"; +import { Label } from "@pswui/Label"; + +export function CheckboxDemo() { + return ( + + ); +} diff --git a/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx b/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx index 8c2be83..87f247c 100644 --- a/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx +++ b/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx @@ -1,36 +1,36 @@ -import { Button } from "@pswui/Button"; -import { - DialogRoot, - DialogTrigger, - DialogOverlay, - DialogContent, - DialogHeader, - DialogTitle, - DialogSubtitle, - DialogFooter, - DialogClose, -} from "@pswui/Dialog"; - -export function BasicInformationalDialog() { - return ( - - - - - - - - Dialog Title - Dialog Subtitle - -

This is a dialog. You can put the information you want to show.

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

This is a dialog. You can put the information you want to show.

+ + + + + + + + + ); +} diff --git a/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx b/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx index edbe973..6455961 100644 --- a/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx +++ b/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx @@ -1,79 +1,79 @@ -import { - DialogRoot, - DialogTrigger, - DialogOverlay, - DialogContent, - DialogHeader, - DialogTitle, - DialogSubtitle, - DialogFooter, - DialogClose, -} from "@pswui/Dialog"; -import { Button } from "@pswui/Button"; -import { useToast } from "@pswui/Toast"; - -export function DeletingItem() { - const { toast } = useToast(); - - return ( - - - - - - - - Delete Item - - Are you sure you want to delete this item? - - -
-
    -
  • This action will delete the item, and related data
    • -
  • This action cannot be undone
    • -
-
- - - - - - - - - - - - ); -} +import { Button } from "@pswui/Button"; +import { + DialogClose, + DialogContent, + DialogFooter, + DialogHeader, + DialogOverlay, + DialogRoot, + DialogSubtitle, + DialogTitle, + DialogTrigger, +} from "@pswui/Dialog"; +import { useToast } from "@pswui/Toast"; + +export function DeletingItem() { + const { toast } = useToast(); + + return ( + + + + + + + + Delete Item + + Are you sure you want to delete this item? + + +
+
    +
  • This action will delete the item, and related data
    • +
  • This action cannot be undone
    • +
+
+ + + + + + + + + + + + ); +} diff --git a/src/docs/components/DialogBlocks/Examples/index.ts b/src/docs/components/DialogBlocks/Examples/index.ts index 0603673..dda7e36 100644 --- a/src/docs/components/DialogBlocks/Examples/index.ts +++ b/src/docs/components/DialogBlocks/Examples/index.ts @@ -1,8 +1,7 @@ -import { BasicInformationalDialog } from "./BasicInformationalDialog"; -import { DeletingItem } from "./DeletingItem"; - -export default { - BasicInformationalDialog, - DeletingItem, -} - +import { BasicInformationalDialog } from "./BasicInformationalDialog"; +import { DeletingItem } from "./DeletingItem"; + +export default { + BasicInformationalDialog, + DeletingItem, +}; diff --git a/src/docs/components/DialogBlocks/Preview.tsx b/src/docs/components/DialogBlocks/Preview.tsx index be9d3b9..dd606bb 100644 --- a/src/docs/components/DialogBlocks/Preview.tsx +++ b/src/docs/components/DialogBlocks/Preview.tsx @@ -1,42 +1,42 @@ -import { - DialogRoot, - DialogTrigger, - DialogOverlay, - DialogContent, - DialogHeader, - DialogTitle, - DialogSubtitle, - DialogFooter, - DialogClose, -} from "@pswui/Dialog"; -import { Button } from "@pswui/Button"; - -export function DialogDemo() { - return ( - - - - - - - - Dialog Title - Dialog Subtitle - -

- 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. -

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

+ 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. +

+ + + + + + + + + ); +} diff --git a/src/docs/components/DrawerBlocks/Examples/Bottom.tsx b/src/docs/components/DrawerBlocks/Examples/Bottom.tsx index 1870969..09a8cd2 100644 --- a/src/docs/components/DrawerBlocks/Examples/Bottom.tsx +++ b/src/docs/components/DrawerBlocks/Examples/Bottom.tsx @@ -1,40 +1,40 @@ -import { - DrawerRoot, - DrawerTrigger, - DrawerOverlay, - DrawerContent, - DrawerHeader, - DrawerBody, - DrawerFooter, - DrawerClose, -} from "@pswui/Drawer"; -import { Button } from "@pswui/Button"; - -export const Bottom = () => { - return ( - - - - - - - -

Drawer

- - -

- Drawers are a type of overlay that slides in from the edge of the - screen. They are typically used for navigation or additional - content. -

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

Drawer

+ + +

+ Drawers are a type of overlay that slides in from the edge of the + screen. They are typically used for navigation or additional + content. +

+ + + + + + + + + + ); +}; diff --git a/src/docs/components/DrawerBlocks/Examples/Left.tsx b/src/docs/components/DrawerBlocks/Examples/Left.tsx index d890f87..01294a3 100644 --- a/src/docs/components/DrawerBlocks/Examples/Left.tsx +++ b/src/docs/components/DrawerBlocks/Examples/Left.tsx @@ -1,40 +1,43 @@ -import { - DrawerRoot, - DrawerTrigger, - DrawerOverlay, - DrawerContent, - DrawerHeader, - DrawerBody, - DrawerFooter, - DrawerClose, -} from "@pswui/Drawer"; -import { Button } from "@pswui/Button"; - -export const Left = () => { - return ( - - - - - - - -

Drawer

- - -

- Drawers are a type of overlay that slides in from the edge of the - screen. They are typically used for navigation or additional - content. -

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

Drawer

+ + +

+ Drawers are a type of overlay that slides in from the edge of the + screen. They are typically used for navigation or additional + content. +

+ + + + + + + + + + ); +}; diff --git a/src/docs/components/DrawerBlocks/Examples/Right.tsx b/src/docs/components/DrawerBlocks/Examples/Right.tsx index affcaa1..e54d46d 100644 --- a/src/docs/components/DrawerBlocks/Examples/Right.tsx +++ b/src/docs/components/DrawerBlocks/Examples/Right.tsx @@ -1,40 +1,43 @@ -import { - DrawerRoot, - DrawerTrigger, - DrawerOverlay, - DrawerContent, - DrawerHeader, - DrawerBody, - DrawerFooter, - DrawerClose, -} from "@pswui/Drawer"; -import { Button } from "@pswui/Button"; - -export const Right = () => { - return ( - - - - - - - -

Drawer

- - -

- Drawers are a type of overlay that slides in from the edge of the - screen. They are typically used for navigation or additional - content. -

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

Drawer

+ + +

+ Drawers are a type of overlay that slides in from the edge of the + screen. They are typically used for navigation or additional + content. +

+ + + + + + + + + + ); +}; diff --git a/src/docs/components/DrawerBlocks/Examples/Top.tsx b/src/docs/components/DrawerBlocks/Examples/Top.tsx index cf0cdd9..3c7c47e 100644 --- a/src/docs/components/DrawerBlocks/Examples/Top.tsx +++ b/src/docs/components/DrawerBlocks/Examples/Top.tsx @@ -1,40 +1,40 @@ -import { - DrawerRoot, - DrawerTrigger, - DrawerOverlay, - DrawerContent, - DrawerHeader, - DrawerBody, - DrawerFooter, - DrawerClose, -} from "@pswui/Drawer"; -import { Button } from "@pswui/Button"; - -export const Top = () => { - return ( - - - - - - - -

Drawer

- - -

- Drawers are a type of overlay that slides in from the edge of the - screen. They are typically used for navigation or additional - content. -

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

Drawer

+ + +

+ Drawers are a type of overlay that slides in from the edge of the + screen. They are typically used for navigation or additional + content. +

+ + + + + + + + + + ); +}; diff --git a/src/docs/components/DrawerBlocks/Examples/index.ts b/src/docs/components/DrawerBlocks/Examples/index.ts index e12e733..fe386f9 100644 --- a/src/docs/components/DrawerBlocks/Examples/index.ts +++ b/src/docs/components/DrawerBlocks/Examples/index.ts @@ -1,7 +1,6 @@ -import { Left } from "./Left"; -import { Right } from "./Right"; -import { Top } from "./Top"; -import { Bottom } from "./Bottom"; - -export default { Left, Right, Top, Bottom }; - +import { Bottom } from "./Bottom"; +import { Left } from "./Left"; +import { Right } from "./Right"; +import { Top } from "./Top"; + +export default { Left, Right, Top, Bottom }; diff --git a/src/docs/components/DrawerBlocks/Preview.tsx b/src/docs/components/DrawerBlocks/Preview.tsx index e573382..4f03292 100644 --- a/src/docs/components/DrawerBlocks/Preview.tsx +++ b/src/docs/components/DrawerBlocks/Preview.tsx @@ -1,40 +1,40 @@ -import { Button } from "@pswui/Button"; -import { - DrawerRoot, - DrawerTrigger, - DrawerOverlay, - DrawerContent, - DrawerClose, - DrawerHeader, - DrawerBody, - DrawerFooter, -} from "@pswui/Drawer"; - -export const DrawerDemo = () => { - return ( - - - - - - - -

Drawer

- - -

- Drawers are a type of overlay that slides in from the edge of the - screen. They are typically used for navigation or additional - content. -

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

Drawer

+ + +

+ Drawers are a type of overlay that slides in from the edge of the + screen. They are typically used for navigation or additional + content. +

+ + + + + + + + + + ); +}; diff --git a/src/docs/components/InputBlocks/Examples/Disabled.tsx b/src/docs/components/InputBlocks/Examples/Disabled.tsx index 0419500..688df2a 100644 --- a/src/docs/components/InputBlocks/Examples/Disabled.tsx +++ b/src/docs/components/InputBlocks/Examples/Disabled.tsx @@ -1,5 +1,10 @@ -import { Input } from "@pswui/Input"; - -export function Disabled() { - return ; -} +import { Input } from "@pswui/Input"; + +export function Disabled() { + return ( + + ); +} diff --git a/src/docs/components/InputBlocks/Examples/Invalid.tsx b/src/docs/components/InputBlocks/Examples/Invalid.tsx index 0f96767..70cf112 100644 --- a/src/docs/components/InputBlocks/Examples/Invalid.tsx +++ b/src/docs/components/InputBlocks/Examples/Invalid.tsx @@ -1,5 +1,10 @@ -import { Input } from "@pswui/Input"; - -export function Invalid() { - return ; -} +import { Input } from "@pswui/Input"; + +export function Invalid() { + return ( + + ); +} diff --git a/src/docs/components/InputBlocks/Examples/index.ts b/src/docs/components/InputBlocks/Examples/index.ts index 793f982..6bcf4cf 100644 --- a/src/docs/components/InputBlocks/Examples/index.ts +++ b/src/docs/components/InputBlocks/Examples/index.ts @@ -1,5 +1,4 @@ -import { Invalid } from "./Invalid"; -import { Disabled } from "./Disabled"; - -export default { Invalid, Disabled }; - +import { Disabled } from "./Disabled"; +import { Invalid } from "./Invalid"; + +export default { Invalid, Disabled }; diff --git a/src/docs/components/InputBlocks/Preview.tsx b/src/docs/components/InputBlocks/Preview.tsx index f1e1221..146571c 100644 --- a/src/docs/components/InputBlocks/Preview.tsx +++ b/src/docs/components/InputBlocks/Preview.tsx @@ -1,5 +1,5 @@ -import { Input } from "@pswui/Input"; - -export function InputDemo() { - return ; -} +import { Input } from "@pswui/Input"; + +export function InputDemo() { + return ; +} diff --git a/src/docs/components/InputFrameBlocks/Preview.tsx b/src/docs/components/InputFrameBlocks/Preview.tsx index fe3b823..0209a7b 100644 --- a/src/docs/components/InputFrameBlocks/Preview.tsx +++ b/src/docs/components/InputFrameBlocks/Preview.tsx @@ -1,23 +1,30 @@ -import { Button } from "@pswui/Button"; -import { Input, InputFrame } from "@pswui/Input"; - -export function InputFrameDemo() { - return ( - - - - - ); -} +import { Button } from "@pswui/Button"; +import { Input, InputFrame } from "@pswui/Input"; + +export function InputFrameDemo() { + return ( + + + + + ); +} diff --git a/src/docs/components/LabelBlocks/Examples/Disabled.tsx b/src/docs/components/LabelBlocks/Examples/Disabled.tsx index 9befe11..44fd851 100644 --- a/src/docs/components/LabelBlocks/Examples/Disabled.tsx +++ b/src/docs/components/LabelBlocks/Examples/Disabled.tsx @@ -1,11 +1,14 @@ -import { Label } from "@pswui/Label"; -import { Input } from "@pswui/Input"; - -export function Disabled() { - return ( - - ); -} +import { Input } from "@pswui/Input"; +import { Label } from "@pswui/Label"; + +export function Disabled() { + return ( + + ); +} diff --git a/src/docs/components/LabelBlocks/Examples/Horizontal.tsx b/src/docs/components/LabelBlocks/Examples/Horizontal.tsx index b983c65..68b6350 100644 --- a/src/docs/components/LabelBlocks/Examples/Horizontal.tsx +++ b/src/docs/components/LabelBlocks/Examples/Horizontal.tsx @@ -1,11 +1,11 @@ -import { Label } from "@pswui/Label"; -import { Checkbox } from "@pswui/Checkbox"; - -export function Horizontal() { - return ( - - ); -} +import { Checkbox } from "@pswui/Checkbox"; +import { Label } from "@pswui/Label"; + +export function Horizontal() { + return ( + + ); +} diff --git a/src/docs/components/LabelBlocks/Examples/Invalid.tsx b/src/docs/components/LabelBlocks/Examples/Invalid.tsx index a3c12b1..c75c1ed 100644 --- a/src/docs/components/LabelBlocks/Examples/Invalid.tsx +++ b/src/docs/components/LabelBlocks/Examples/Invalid.tsx @@ -1,11 +1,14 @@ -import { Label } from "@pswui/Label"; -import { Input } from "@pswui/Input"; - -export function Invalid() { - return ( - - ); -} +import { Input } from "@pswui/Input"; +import { Label } from "@pswui/Label"; + +export function Invalid() { + return ( + + ); +} diff --git a/src/docs/components/LabelBlocks/Examples/Vertical.tsx b/src/docs/components/LabelBlocks/Examples/Vertical.tsx index a19a164..1f14c70 100644 --- a/src/docs/components/LabelBlocks/Examples/Vertical.tsx +++ b/src/docs/components/LabelBlocks/Examples/Vertical.tsx @@ -1,11 +1,11 @@ -import { Label } from "@pswui/Label"; -import { Input } from "@pswui/Input"; - -export function Vertical() { - return ( - - ); -} +import { Input } from "@pswui/Input"; +import { Label } from "@pswui/Label"; + +export function Vertical() { + return ( + + ); +} diff --git a/src/docs/components/LabelBlocks/Examples/index.ts b/src/docs/components/LabelBlocks/Examples/index.ts index 113761d..6553b70 100644 --- a/src/docs/components/LabelBlocks/Examples/index.ts +++ b/src/docs/components/LabelBlocks/Examples/index.ts @@ -1,12 +1,11 @@ -import { Vertical } from "./Vertical"; -import { Horizontal } from "./Horizontal"; -import { Invalid } from "./Invalid"; -import { Disabled } from "./Disabled"; - -export default { - Vertical, - Horizontal, - Invalid, - Disabled, -}; - +import { Disabled } from "./Disabled"; +import { Horizontal } from "./Horizontal"; +import { Invalid } from "./Invalid"; +import { Vertical } from "./Vertical"; + +export default { + Vertical, + Horizontal, + Invalid, + Disabled, +}; diff --git a/src/docs/components/LabelBlocks/Preview.tsx b/src/docs/components/LabelBlocks/Preview.tsx index 2362321..8f5183c 100644 --- a/src/docs/components/LabelBlocks/Preview.tsx +++ b/src/docs/components/LabelBlocks/Preview.tsx @@ -1,11 +1,11 @@ -import { Label } from "@pswui/Label"; -import { Input } from "@pswui/Input"; - -export function LabelDemo() { - return ( - - ); -} +import { Input } from "@pswui/Input"; +import { Label } from "@pswui/Label"; + +export function LabelDemo() { + return ( + + ); +} diff --git a/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx b/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx index d319d27..1111f09 100644 --- a/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx +++ b/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx @@ -1,43 +1,74 @@ -import { Popover, PopoverTrigger, PopoverContent } from "@pswui/Popover.tsx"; -import { Button } from "@pswui/Button.tsx"; -import { useState } from "react"; - -const DarkIcon = () => { - // ic:baseline-dark-mode - return - - -} - -const LightIcon = () => { - // ic:baseline-light-mode - return - - -} - -export const ThemeSelector = () => { - const [theme, setTheme] = useState<"light" | "dark">("dark"); - - return - - - - - - - - -} \ No newline at end of file +import { Button } from "@pswui/Button.tsx"; +import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover.tsx"; +import { useState } from "react"; + +const DarkIcon = () => { + // ic:baseline-dark-mode + return ( + + Dark + + + ); +}; + +const LightIcon = () => { + // ic:baseline-light-mode + return ( + + Light + + + ); +}; + +export const ThemeSelector = () => { + const [theme, setTheme] = useState<"light" | "dark">("dark"); + + return ( + + + + + + + + + + ); +}; diff --git a/src/docs/components/PopoverBlocks/Examples/UserControl.tsx b/src/docs/components/PopoverBlocks/Examples/UserControl.tsx index de50791..c070658 100644 --- a/src/docs/components/PopoverBlocks/Examples/UserControl.tsx +++ b/src/docs/components/PopoverBlocks/Examples/UserControl.tsx @@ -1,151 +1,157 @@ -import { - Popover, - PopoverTrigger, - PopoverContent, -} from "@pswui/Popover.tsx"; -import { Button } from "@pswui/Button.tsx"; -import { useToast } from "@pswui/Toast"; -import { - createContext, - Dispatch, - SetStateAction, - SVGProps, - useContext, - useState, - useTransition, -} from "react"; -import { Label } from "@pswui/Label.tsx"; -import { Input } from "@pswui/Input.tsx"; - -interface UserControlState { - signIn: boolean; -} -const initialState: UserControlState = { - signIn: false, -}; -const UserControlContext = createContext< - [UserControlState, Dispatch>] ->([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) { - return ( - - - - ); -} - -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 ( - - - -
- -
- - ); -}; - -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 ( - - - - - ); -}; - -export const UserControl = () => { - const [state, setState] = useState({ - signIn: false, - }); - - return ( - - - - - - {state.signIn ? : } - - - ); -}; +import { Button } from "@pswui/Button.tsx"; +import { Input } from "@pswui/Input.tsx"; +import { Label } from "@pswui/Label.tsx"; +import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover.tsx"; +import { useToast } from "@pswui/Toast"; +import { + type Dispatch, + type SVGProps, + type SetStateAction, + createContext, + useContext, + useState, + useTransition, +} from "react"; + +interface UserControlState { + signIn: boolean; +} +const initialState: UserControlState = { + signIn: false, +}; +const UserControlContext = createContext< + [UserControlState, Dispatch>] +>([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) { + return ( + + Loading + + + ); +} + +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 ( + + + +
+ +
+ + ); +}; + +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 ( + + + + + ); +}; + +export const UserControl = () => { + const [state, setState] = useState({ + signIn: false, + }); + + return ( + + + + + + {state.signIn ? : } + + + ); +}; diff --git a/src/docs/components/PopoverBlocks/Examples/index.ts b/src/docs/components/PopoverBlocks/Examples/index.ts index 717dc4c..567322d 100644 --- a/src/docs/components/PopoverBlocks/Examples/index.ts +++ b/src/docs/components/PopoverBlocks/Examples/index.ts @@ -1,7 +1,7 @@ -import { ThemeSelector } from "./ThemeSelector"; -import { UserControl } from "./UserControl"; - -export default { - ThemeSelector, - UserControl, -} \ No newline at end of file +import { ThemeSelector } from "./ThemeSelector"; +import { UserControl } from "./UserControl"; + +export default { + ThemeSelector, + UserControl, +}; diff --git a/src/docs/components/PopoverBlocks/Preview.tsx b/src/docs/components/PopoverBlocks/Preview.tsx index 280308c..f01797c 100644 --- a/src/docs/components/PopoverBlocks/Preview.tsx +++ b/src/docs/components/PopoverBlocks/Preview.tsx @@ -1,54 +1,63 @@ -import { Button } from "@pswui/Button"; -import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover"; - -export function PopoverDemo() { - return ( - - - - - - - - - - ); -} +import { Button } from "@pswui/Button"; +import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover"; + +export function PopoverDemo() { + return ( + + + + + + + + + + ); +} diff --git a/src/docs/components/SwitchBlocks/Preview.tsx b/src/docs/components/SwitchBlocks/Preview.tsx index 7b76c63..3902093 100644 --- a/src/docs/components/SwitchBlocks/Preview.tsx +++ b/src/docs/components/SwitchBlocks/Preview.tsx @@ -1,5 +1,5 @@ -import { Switch } from "@pswui/Switch"; - -export function SwitchDemo() { - return ; -} +import { Switch } from "@pswui/Switch"; + +export function SwitchDemo() { + return ; +} diff --git a/src/docs/components/TabsBlocks/Preview.tsx b/src/docs/components/TabsBlocks/Preview.tsx index 8ed9056..1f781a4 100644 --- a/src/docs/components/TabsBlocks/Preview.tsx +++ b/src/docs/components/TabsBlocks/Preview.tsx @@ -1,18 +1,18 @@ -import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"; - -export function TabsDemo() { - return ( - - - Tab 1 - Tab 2 - - -
Tab 1 Content
- - -
Tab 2 Content
- - - ); -} +import { TabContent, TabList, TabProvider, TabTrigger } from "@pswui/Tabs"; + +export function TabsDemo() { + return ( + + + Tab 1 + Tab 2 + + +
Tab 1 Content
+ + +
Tab 2 Content
+ + + ); +} diff --git a/src/docs/components/ToastBlocks/Examples/Error.tsx b/src/docs/components/ToastBlocks/Examples/Error.tsx index 9a1fd02..91a8136 100644 --- a/src/docs/components/ToastBlocks/Examples/Error.tsx +++ b/src/docs/components/ToastBlocks/Examples/Error.tsx @@ -1,29 +1,30 @@ -import { Button } from "@pswui/Button"; -import { Toaster, useToast } from "@pswui/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function Error() { - return ( - <> - - - - ); -} +import { Button } from "@pswui/Button"; +import { Toaster, useToast } from "@pswui/Toast"; + +function Children() { + const { toast } = useToast(); + + return ( + + ); +} + +/* not shadowing global Error (lol) */ +export function _Error() { + return ( + <> + + + + ); +} diff --git a/src/docs/components/ToastBlocks/Examples/Normal.tsx b/src/docs/components/ToastBlocks/Examples/Normal.tsx index 9c07db3..676f4de 100644 --- a/src/docs/components/ToastBlocks/Examples/Normal.tsx +++ b/src/docs/components/ToastBlocks/Examples/Normal.tsx @@ -1,29 +1,29 @@ -import { Button } from "@pswui/Button"; -import { Toaster, useToast } from "@pswui/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function Normal() { - return ( - <> - - - - ); -} +import { Button } from "@pswui/Button"; +import { Toaster, useToast } from "@pswui/Toast"; + +function Children() { + const { toast } = useToast(); + + return ( + + ); +} + +export function Normal() { + return ( + <> + + + + ); +} diff --git a/src/docs/components/ToastBlocks/Examples/PendingFail.tsx b/src/docs/components/ToastBlocks/Examples/PendingFail.tsx index dfc2a58..80a45be 100644 --- a/src/docs/components/ToastBlocks/Examples/PendingFail.tsx +++ b/src/docs/components/ToastBlocks/Examples/PendingFail.tsx @@ -1,35 +1,35 @@ -import { Button } from "@pswui/Button"; -import { Toaster, useToast } from "@pswui/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function PendingFail() { - return ( - <> - - - - ); -} +import { Button } from "@pswui/Button"; +import { Toaster, useToast } from "@pswui/Toast"; + +function Children() { + const { toast } = useToast(); + + return ( + + ); +} + +export function PendingFail() { + return ( + <> + + + + ); +} diff --git a/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx b/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx index 58d73cc..25c53f6 100644 --- a/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx +++ b/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx @@ -1,37 +1,37 @@ -import { Button } from "@pswui/Button"; -import { Toaster, useToast } from "@pswui/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function PendingSuccess() { - return ( - <> - - - - ); -} +import { Button } from "@pswui/Button"; +import { Toaster, useToast } from "@pswui/Toast"; + +function Children() { + const { toast } = useToast(); + + return ( + + ); +} + +export function PendingSuccess() { + return ( + <> + + + + ); +} diff --git a/src/docs/components/ToastBlocks/Examples/Success.tsx b/src/docs/components/ToastBlocks/Examples/Success.tsx index ad56f4c..10d54f0 100644 --- a/src/docs/components/ToastBlocks/Examples/Success.tsx +++ b/src/docs/components/ToastBlocks/Examples/Success.tsx @@ -1,29 +1,29 @@ -import { Button } from "@pswui/Button"; -import { Toaster, useToast } from "@pswui/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function Success() { - return ( - <> - - - - ); -} +import { Button } from "@pswui/Button"; +import { Toaster, useToast } from "@pswui/Toast"; + +function Children() { + const { toast } = useToast(); + + return ( + + ); +} + +export function Success() { + return ( + <> + + + + ); +} diff --git a/src/docs/components/ToastBlocks/Examples/Warning.tsx b/src/docs/components/ToastBlocks/Examples/Warning.tsx index d067bdb..61abb13 100644 --- a/src/docs/components/ToastBlocks/Examples/Warning.tsx +++ b/src/docs/components/ToastBlocks/Examples/Warning.tsx @@ -1,29 +1,29 @@ -import { Button } from "@pswui/Button"; -import { Toaster, useToast } from "@pswui/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function Warning() { - return ( - <> - - - - ); -} +import { Button } from "@pswui/Button"; +import { Toaster, useToast } from "@pswui/Toast"; + +function Children() { + const { toast } = useToast(); + + return ( + + ); +} + +export function Warning() { + return ( + <> + + + + ); +} diff --git a/src/docs/components/ToastBlocks/Examples/index.ts b/src/docs/components/ToastBlocks/Examples/index.ts index 791b18a..4116175 100644 --- a/src/docs/components/ToastBlocks/Examples/index.ts +++ b/src/docs/components/ToastBlocks/Examples/index.ts @@ -1,16 +1,15 @@ -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, -}; - +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: _Error /* not shadowing global Error (lol) */, + Normal, + PendingFail, + PendingSuccess, + Success, + Warning, +}; diff --git a/src/docs/components/ToastBlocks/Preview.tsx b/src/docs/components/ToastBlocks/Preview.tsx index 7b8494a..0973795 100644 --- a/src/docs/components/ToastBlocks/Preview.tsx +++ b/src/docs/components/ToastBlocks/Preview.tsx @@ -1,25 +1,25 @@ -import { Button } from "@pswui/Button"; -import { Toaster, useToast } from "@pswui/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function ToastDemo() { - return ( - <> - - - - ); -} +import { Button } from "@pswui/Button"; +import { Toaster, useToast } from "@pswui/Toast"; + +function Children() { + const { toast } = useToast(); + + return ( + + ); +} + +export function ToastDemo() { + return ( + <> + + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/Bottom.tsx b/src/docs/components/TooltipBlocks/Examples/Bottom.tsx index 4e8ba15..eedd484 100644 --- a/src/docs/components/TooltipBlocks/Examples/Bottom.tsx +++ b/src/docs/components/TooltipBlocks/Examples/Bottom.tsx @@ -1,13 +1,13 @@ -import { Button } from "@pswui/Button"; -import { Tooltip, TooltipContent } from "@pswui/Tooltip"; - -export function Bottom() { - return ( - - -

Tooltip!

- - - - ); -} +import { Button } from "@pswui/Button"; +import { Tooltip, TooltipContent } from "@pswui/Tooltip"; + +export function Bottom() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/Controlled.tsx b/src/docs/components/TooltipBlocks/Examples/Controlled.tsx index 3bada77..47c231c 100644 --- a/src/docs/components/TooltipBlocks/Examples/Controlled.tsx +++ b/src/docs/components/TooltipBlocks/Examples/Controlled.tsx @@ -1,16 +1,20 @@ -import { Button } from "@pswui/Button"; -import { Tooltip, TooltipContent } from "@pswui/Tooltip"; -import { useState } from "react"; - -export function Controlled() { - const [opened, setOpened] = useState(false); - - return ( - - -

Tooltip!

- - - - ); -} +import { Button } from "@pswui/Button"; +import { Tooltip, TooltipContent } from "@pswui/Tooltip"; +import { useState } from "react"; + +export function Controlled() { + const [opened, setOpened] = useState(false); + + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx b/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx index cac6205..aad956d 100644 --- a/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx +++ b/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx @@ -1,13 +1,13 @@ -import { Button } from "@pswui/Button"; -import { Tooltip, TooltipContent } from "@pswui/Tooltip"; - -export function EarlyDelay() { - return ( - - -

Tooltip!

- - - - ); -} +import { Button } from "@pswui/Button"; +import { Tooltip, TooltipContent } from "@pswui/Tooltip"; + +export function EarlyDelay() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx b/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx index 9a4c817..48d6897 100644 --- a/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx +++ b/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx @@ -1,13 +1,13 @@ -import { Button } from "@pswui/Button"; -import { Tooltip, TooltipContent } from "@pswui/Tooltip"; - -export function LateDelay() { - return ( - - -

Tooltip!

- - - - ); -} +import { Button } from "@pswui/Button"; +import { Tooltip, TooltipContent } from "@pswui/Tooltip"; + +export function LateDelay() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/Left.tsx b/src/docs/components/TooltipBlocks/Examples/Left.tsx index 73dd8bc..b4b90cb 100644 --- a/src/docs/components/TooltipBlocks/Examples/Left.tsx +++ b/src/docs/components/TooltipBlocks/Examples/Left.tsx @@ -1,13 +1,13 @@ -import { Button } from "@pswui/Button"; -import { Tooltip, TooltipContent } from "@pswui/Tooltip"; - -export function Left() { - return ( - - -

Tooltip!

- - - - ); -} +import { Button } from "@pswui/Button"; +import { Tooltip, TooltipContent } from "@pswui/Tooltip"; + +export function Left() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx b/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx index 4784522..5181d7d 100644 --- a/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx +++ b/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx @@ -1,13 +1,13 @@ -import { Button } from "@pswui/Button"; -import { Tooltip, TooltipContent } from "@pswui/Tooltip"; - -export function NoDelay() { - return ( - - -

Tooltip!

- - - - ); -} +import { Button } from "@pswui/Button"; +import { Tooltip, TooltipContent } from "@pswui/Tooltip"; + +export function NoDelay() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/Right.tsx b/src/docs/components/TooltipBlocks/Examples/Right.tsx index 6b900d6..1eac95f 100644 --- a/src/docs/components/TooltipBlocks/Examples/Right.tsx +++ b/src/docs/components/TooltipBlocks/Examples/Right.tsx @@ -1,13 +1,13 @@ -import { Button } from "@pswui/Button"; -import { Tooltip, TooltipContent } from "@pswui/Tooltip"; - -export function Right() { - return ( - - -

Tooltip!

- - - - ); -} +import { Button } from "@pswui/Button"; +import { Tooltip, TooltipContent } from "@pswui/Tooltip"; + +export function Right() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/Top.tsx b/src/docs/components/TooltipBlocks/Examples/Top.tsx index fec84a1..9cd552a 100644 --- a/src/docs/components/TooltipBlocks/Examples/Top.tsx +++ b/src/docs/components/TooltipBlocks/Examples/Top.tsx @@ -1,13 +1,13 @@ -import { Button } from "@pswui/Button"; -import { Tooltip, TooltipContent } from "@pswui/Tooltip"; - -export function Top() { - return ( - - -

Tooltip!

- - - - ); -} +import { Button } from "@pswui/Button"; +import { Tooltip, TooltipContent } from "@pswui/Tooltip"; + +export function Top() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/index.ts b/src/docs/components/TooltipBlocks/Examples/index.ts index 11508e6..c12eff6 100644 --- a/src/docs/components/TooltipBlocks/Examples/index.ts +++ b/src/docs/components/TooltipBlocks/Examples/index.ts @@ -1,19 +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, -}; +import { Bottom } from "./Bottom"; +import { Controlled } from "./Controlled"; +import { EarlyDelay } from "./EarlyDelay"; +import { LateDelay } from "./LateDelay"; +import { Left } from "./Left"; +import { NoDelay } from "./NoDelay"; +import { Right } from "./Right"; +import { Top } from "./Top"; + +export default { + Bottom, + Left, + Right, + Top, + NoDelay, + EarlyDelay, + LateDelay, + Controlled, +}; diff --git a/src/docs/components/TooltipBlocks/Preview.tsx b/src/docs/components/TooltipBlocks/Preview.tsx index 62f862c..ffab606 100644 --- a/src/docs/components/TooltipBlocks/Preview.tsx +++ b/src/docs/components/TooltipBlocks/Preview.tsx @@ -1,13 +1,13 @@ -import { Button } from "@pswui/Button"; -import { Tooltip, TooltipContent } from "@pswui/Tooltip"; - -export function TooltipDemo() { - return ( - - -

Tooltip!

- - - - ); -} +import { Button } from "@pswui/Button"; +import { Tooltip, TooltipContent } from "@pswui/Tooltip"; + +export function TooltipDemo() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/errors/PageNotFound.tsx b/src/errors/PageNotFound.tsx index 766b3c8..3c45414 100644 --- a/src/errors/PageNotFound.tsx +++ b/src/errors/PageNotFound.tsx @@ -1,22 +1,25 @@ -import { Link } from "react-router-dom"; -import { Button } from "@pswui/Button"; - -function PageNotFound() { - return ( -
-
-

Page not found

-

- The page you are looking for does not exist. -

-
-
- -
-
- ); -} - -export default PageNotFound; +import { Button } from "@pswui/Button"; +import { Link } from "react-router-dom"; + +function PageNotFound() { + return ( +
+
+

Page not found

+

+ The page you are looking for does not exist. +

+
+
+ +
+
+ ); +} + +export default PageNotFound; diff --git a/src/errors/Unexpected.tsx b/src/errors/Unexpected.tsx index e1b7c43..561092b 100644 --- a/src/errors/Unexpected.tsx +++ b/src/errors/Unexpected.tsx @@ -1,22 +1,25 @@ -import { Link } from "react-router-dom"; -import { Button } from "@pswui/Button"; - -function UnexpectedError() { - return ( -
-
-

Something went wrong

-

- There was an unexpected error while loading the page. -

-
-
- -
-
- ); -} - -export default UnexpectedError; +import { Button } from "@pswui/Button"; +import { Link } from "react-router-dom"; + +function UnexpectedError() { + return ( +
+
+

Something went wrong

+

+ There was an unexpected error while loading the page. +

+
+
+ +
+
+ ); +} + +export default UnexpectedError; diff --git a/src/main.tsx b/src/main.tsx index af59505..ee03476 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,14 @@ -import "./tailwind.css"; -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "./App.tsx"; - -ReactDOM.createRoot(document.getElementById("root")!).render( - - - -); +import "./tailwind.css"; +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.tsx"; + +const ROOT = document.getElementById("root"); + +if (!ROOT) throw new Error("root is not found"); + +ReactDOM.createRoot(ROOT).render( + + + , +); diff --git a/src/mdx.d.ts b/src/mdx.d.ts index a609f8d..f08052d 100644 --- a/src/mdx.d.ts +++ b/src/mdx.d.ts @@ -1,7 +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 -} \ No newline at end of file +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; +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 3cac0d0..a8e080c 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1,6 +1,6 @@ -/// -import { ImportGlobFunction } from "vite/types/importGlob"; - -interface ImportMeta { - glob: ImportGlobFunction; -} \ No newline at end of file +/// +import type { ImportGlobFunction } from "vite/types/importGlob"; + +interface ImportMeta { + glob: ImportGlobFunction; +} diff --git a/tailwind.config.js b/tailwind.config.js index 1255663..008e4f7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,4 +12,4 @@ module.exports = { extend: {}, }, plugins: [require("@tailwindcss/typography"), require("tailwind-scrollbar")], -}; \ No newline at end of file +}; diff --git a/tsconfig.json b/tsconfig.json index 5fedfc6..5fa521d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -30,4 +30,4 @@ }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] -} \ No newline at end of file +} diff --git a/tsconfig.node.json b/tsconfig.node.json index 4eb43d0..97ede7e 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -8,4 +8,4 @@ "strict": true }, "include": ["vite.config.ts"] -} \ No newline at end of file +} diff --git a/vite.config.ts b/vite.config.ts index 0cba168..2de60fb 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,12 +1,12 @@ -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; -import tailwindcss from "tailwindcss"; -import mdx from "@mdx-js/rollup"; import { resolve } from "node:path"; -import remarkGfm from "remark-gfm"; -import withSlug from "rehype-slug"; +import mdx from "@mdx-js/rollup"; import withToc from "@stefanprobst/rehype-extract-toc"; import withTocExport from "@stefanprobst/rehype-extract-toc/mdx"; +import react from "@vitejs/plugin-react"; +import withSlug from "rehype-slug"; +import remarkGfm from "remark-gfm"; +import tailwindcss from "tailwindcss"; +import { defineConfig } from "vite"; import dynamicImport from "vite-plugin-dynamic-import"; // https://vitejs.dev/config/ @@ -31,5 +31,5 @@ export default defineConfig({ "@pswui-lib": resolve(__dirname, "./src/pswui/lib"), }, }, - cacheDir: './.vite' -}); \ No newline at end of file + cacheDir: "./.vite", +});