diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..b436b9f --- /dev/null +++ b/src/App.tsx @@ -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) => { + 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; diff --git a/src/DocsLayout.tsx b/src/DocsLayout.tsx new file mode 100644 index 0000000..98911c7 --- /dev/null +++ b/src/DocsLayout.tsx @@ -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 ( + + ); +} + +function DocsLayout() { + return ( +
+ + +
+ ); +} + +export default DocsLayout; diff --git a/src/DynamicLayout.tsx b/src/DynamicLayout.tsx new file mode 100644 index 0000000..f54596e --- /dev/null +++ b/src/DynamicLayout.tsx @@ -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 ( +
    + {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 new file mode 100644 index 0000000..0a9be29 --- /dev/null +++ b/src/ErrorHandler.tsx @@ -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 ; + } else { + return ; + } + } else { + return ; + } +} + +export default ErrorBoundary; diff --git a/src/HeadingContext.tsx b/src/HeadingContext.tsx new file mode 100644 index 0000000..8712e33 --- /dev/null +++ b/src/HeadingContext.tsx @@ -0,0 +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"); + } + }, +]); diff --git a/src/Home.tsx b/src/Home.tsx new file mode 100644 index 0000000..11e9f3e --- /dev/null +++ b/src/Home.tsx @@ -0,0 +1,30 @@ +import { Link } from "react-router-dom"; +import { Button } from "../components/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; diff --git a/src/MainLayout.tsx b/src/MainLayout.tsx new file mode 100644 index 0000000..e74d67c --- /dev/null +++ b/src/MainLayout.tsx @@ -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( + (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 new file mode 100644 index 0000000..ccecdab --- /dev/null +++ b/src/RouteObject.ts @@ -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, +}; diff --git a/src/components/LoadedCode.tsx b/src/components/LoadedCode.tsx new file mode 100644 index 0000000..1159a8c --- /dev/null +++ b/src/components/LoadedCode.tsx @@ -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(); + 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 new file mode 100644 index 0000000..0e64a9d --- /dev/null +++ b/src/components/Story.tsx @@ -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 ( +
+ {children} +
+ ); +}); + +export { Story }; diff --git a/src/docs/components/Button.mdx b/src/docs/components/Button.mdx new file mode 100644 index 0000000..252652b --- /dev/null +++ b/src/docs/components/Button.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Button.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { Button } from "@components/Button"; +``` + +```html + +``` + +## 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 + + + + Preview + Code + + + + + + + + + + + +### Ghost + + + + Preview + Code + + + + + + + + + + + +### Link + + + + Preview + Code + + + + + + + + + + + +### Success + + + + Preview + Code + + + + + + + + + + + +### Warning + + + + Preview + Code + + + + + + + + + + + +### Danger + + + + Preview + Code + + + + + + + + + + diff --git a/src/docs/components/ButtonBlocks/Examples/Danger.tsx b/src/docs/components/ButtonBlocks/Examples/Danger.tsx new file mode 100644 index 0000000..c841e4e --- /dev/null +++ b/src/docs/components/ButtonBlocks/Examples/Danger.tsx @@ -0,0 +1,5 @@ +import { Button } from "@components/Button"; + +export const Danger = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/Default.tsx b/src/docs/components/ButtonBlocks/Examples/Default.tsx new file mode 100644 index 0000000..0170088 --- /dev/null +++ b/src/docs/components/ButtonBlocks/Examples/Default.tsx @@ -0,0 +1,5 @@ +import { Button } from "@components/Button"; + +export const Default = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/Ghost.tsx b/src/docs/components/ButtonBlocks/Examples/Ghost.tsx new file mode 100644 index 0000000..860ed8d --- /dev/null +++ b/src/docs/components/ButtonBlocks/Examples/Ghost.tsx @@ -0,0 +1,5 @@ +import { Button } from "@components/Button"; + +export const Ghost = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/Link.tsx b/src/docs/components/ButtonBlocks/Examples/Link.tsx new file mode 100644 index 0000000..6c809b1 --- /dev/null +++ b/src/docs/components/ButtonBlocks/Examples/Link.tsx @@ -0,0 +1,5 @@ +import { Button } from "@components/Button"; + +export const Link = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/Success.tsx b/src/docs/components/ButtonBlocks/Examples/Success.tsx new file mode 100644 index 0000000..9501eda --- /dev/null +++ b/src/docs/components/ButtonBlocks/Examples/Success.tsx @@ -0,0 +1,5 @@ +import { Button } from "@components/Button"; + +export const Success = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/Warning.tsx b/src/docs/components/ButtonBlocks/Examples/Warning.tsx new file mode 100644 index 0000000..088454a --- /dev/null +++ b/src/docs/components/ButtonBlocks/Examples/Warning.tsx @@ -0,0 +1,5 @@ +import { Button } from "@components/Button"; + +export const Warning = () => { + return ; +}; diff --git a/src/docs/components/ButtonBlocks/Examples/index.ts b/src/docs/components/ButtonBlocks/Examples/index.ts new file mode 100644 index 0000000..e6f156b --- /dev/null +++ b/src/docs/components/ButtonBlocks/Examples/index.ts @@ -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, +}; + diff --git a/src/docs/components/ButtonBlocks/Preview.tsx b/src/docs/components/ButtonBlocks/Preview.tsx new file mode 100644 index 0000000..e31154f --- /dev/null +++ b/src/docs/components/ButtonBlocks/Preview.tsx @@ -0,0 +1,5 @@ +import { Button } from "@components/Button"; + +export function ButtonDemo() { + return ; +} diff --git a/src/docs/components/Checkbox.mdx b/src/docs/components/Checkbox.mdx new file mode 100644 index 0000000..cddf857 --- /dev/null +++ b/src/docs/components/Checkbox.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Checkbox.mdx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { Checkbox } from "@components/Checkbox"; +``` + +```html + +``` + +## Props + +### Variants + +| Prop | Type | Default | Description | +|:-------|:-------------------------|:--------|:-------------------------| +| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox | + +## Examples + +### Text + + + + Preview + Code + + + + + + + + + + + +### Disabled + + + + Preview + Code + + + + + + + + + + diff --git a/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx b/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx new file mode 100644 index 0000000..3b5f4de --- /dev/null +++ b/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx @@ -0,0 +1,11 @@ +import { Label } from "@components/Label"; +import { Checkbox } from "@components/Checkbox"; + +export function Disabled() { + return ( + + ); +} diff --git a/src/docs/components/CheckboxBlocks/Examples/Text.tsx b/src/docs/components/CheckboxBlocks/Examples/Text.tsx new file mode 100644 index 0000000..b511bca --- /dev/null +++ b/src/docs/components/CheckboxBlocks/Examples/Text.tsx @@ -0,0 +1,11 @@ +import { Label } from "@components/Label"; +import { Checkbox } from "@components/Checkbox"; + +export function Text() { + return ( + + ); +} diff --git a/src/docs/components/CheckboxBlocks/Examples/index.ts b/src/docs/components/CheckboxBlocks/Examples/index.ts new file mode 100644 index 0000000..099c604 --- /dev/null +++ b/src/docs/components/CheckboxBlocks/Examples/index.ts @@ -0,0 +1,5 @@ +import { Text } from "./Text"; +import { Disabled } from "./Disabled"; + +export default { Text, Disabled }; + diff --git a/src/docs/components/CheckboxBlocks/Preview.tsx b/src/docs/components/CheckboxBlocks/Preview.tsx new file mode 100644 index 0000000..0ecb636 --- /dev/null +++ b/src/docs/components/CheckboxBlocks/Preview.tsx @@ -0,0 +1,11 @@ +import { Checkbox } from "@components/Checkbox"; +import { Label } from "@components/Label"; + +export function CheckboxDemo() { + return ( + + ); +} diff --git a/src/docs/components/Dialog.mdx b/src/docs/components/Dialog.mdx new file mode 100644 index 0000000..32ffad2 --- /dev/null +++ b/src/docs/components/Dialog.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Dialog.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { + DialogRoot, + DialogTrigger, + DialogOverlay, + DialogContent, + DialogHeader, + DialogTitle, + DialogSubtitle, + DialogFooter, + DialogClose, +} from "@components/Dialog"; +``` + +```html + + + + + + + + Dialog Title + Dialog Subtitle + + {/* Main Contents */} + + + + + + + + +``` + +> 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 + + + + Preview + Code + + + + + + + + + + + +### Deleting Item + + + + Preview + Code + + + + + + + + + + + diff --git a/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx b/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx new file mode 100644 index 0000000..e89308b --- /dev/null +++ b/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx @@ -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 ( + + + + + + + + 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 new file mode 100644 index 0000000..5e51a58 --- /dev/null +++ b/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx @@ -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 ( + + + + + + + + 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 new file mode 100644 index 0000000..0603673 --- /dev/null +++ b/src/docs/components/DialogBlocks/Examples/index.ts @@ -0,0 +1,8 @@ +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 new file mode 100644 index 0000000..44775e8 --- /dev/null +++ b/src/docs/components/DialogBlocks/Preview.tsx @@ -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 ( + + + + + + + + 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/Drawer.mdx b/src/docs/components/Drawer.mdx new file mode 100644 index 0000000..ea4fa48 --- /dev/null +++ b/src/docs/components/Drawer.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Drawer.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { + DrawerRoot, + DrawerTrigger, + DrawerOverlay, + DrawerContent, + DrawerClose, + DrawerHeader, + DrawerBody, + DrawerFooter, +} from "@components/Drawer"; +``` + +```html + + + + + + + +

Drawer

+ + + {/* Main Contents */} + + + + + + + + + +``` + +> 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 + + + + Preview + Code + + + + + + + + + + + +### Right + + + + Preview + Code + + + + + + + + + + + +### Top + + + + Preview + Code + + + + + + + + + + + +### Bottom + + + + Preview + Code + + + + + + + + + + diff --git a/src/docs/components/DrawerBlocks/Examples/Bottom.tsx b/src/docs/components/DrawerBlocks/Examples/Bottom.tsx new file mode 100644 index 0000000..0468639 --- /dev/null +++ b/src/docs/components/DrawerBlocks/Examples/Bottom.tsx @@ -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 ( + + + + + + + +

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 new file mode 100644 index 0000000..4852f3c --- /dev/null +++ b/src/docs/components/DrawerBlocks/Examples/Left.tsx @@ -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 ( + + + + + + + +

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 new file mode 100644 index 0000000..8ab8374 --- /dev/null +++ b/src/docs/components/DrawerBlocks/Examples/Right.tsx @@ -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 ( + + + + + + + +

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 new file mode 100644 index 0000000..2c7aec3 --- /dev/null +++ b/src/docs/components/DrawerBlocks/Examples/Top.tsx @@ -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 ( + + + + + + + +

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 new file mode 100644 index 0000000..e12e733 --- /dev/null +++ b/src/docs/components/DrawerBlocks/Examples/index.ts @@ -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 }; + diff --git a/src/docs/components/DrawerBlocks/Preview.tsx b/src/docs/components/DrawerBlocks/Preview.tsx new file mode 100644 index 0000000..d35ce69 --- /dev/null +++ b/src/docs/components/DrawerBlocks/Preview.tsx @@ -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 ( + + + + + + + +

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/Input.mdx b/src/docs/components/Input.mdx new file mode 100644 index 0000000..710d159 --- /dev/null +++ b/src/docs/components/Input.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Input.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { Input } from "@components/Input"; +``` + +```html + +``` + +## 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 + + + + Preview + Code + + + + + + + + + + + +### Disabled + + + + Preview + Code + + + + + + + + + + + +# InputFrame +Label with input's style. + + + + Preview + Code + + + + + + + + + + + +## Installation + +**Included in `Input.tsx`.** + +## Usage + +```tsx +import { + Input, + InputFrame, +} from "@components/Input"; +``` + +```html + + + +``` \ No newline at end of file diff --git a/src/docs/components/InputBlocks/Examples/Disabled.tsx b/src/docs/components/InputBlocks/Examples/Disabled.tsx new file mode 100644 index 0000000..8acf4f6 --- /dev/null +++ b/src/docs/components/InputBlocks/Examples/Disabled.tsx @@ -0,0 +1,5 @@ +import { Input } from "@components/Input"; + +export function Disabled() { + return ; +} diff --git a/src/docs/components/InputBlocks/Examples/Invalid.tsx b/src/docs/components/InputBlocks/Examples/Invalid.tsx new file mode 100644 index 0000000..67b01d2 --- /dev/null +++ b/src/docs/components/InputBlocks/Examples/Invalid.tsx @@ -0,0 +1,5 @@ +import { Input } from "@components/Input"; + +export function Invalid() { + return ; +} diff --git a/src/docs/components/InputBlocks/Examples/index.ts b/src/docs/components/InputBlocks/Examples/index.ts new file mode 100644 index 0000000..793f982 --- /dev/null +++ b/src/docs/components/InputBlocks/Examples/index.ts @@ -0,0 +1,5 @@ +import { Invalid } from "./Invalid"; +import { Disabled } from "./Disabled"; + +export default { Invalid, Disabled }; + diff --git a/src/docs/components/InputBlocks/Preview.tsx b/src/docs/components/InputBlocks/Preview.tsx new file mode 100644 index 0000000..0f99c37 --- /dev/null +++ b/src/docs/components/InputBlocks/Preview.tsx @@ -0,0 +1,5 @@ +import { Input } from "@components/Input"; + +export function InputDemo() { + return ; +} diff --git a/src/docs/components/InputFrameBlocks/Preview.tsx b/src/docs/components/InputFrameBlocks/Preview.tsx new file mode 100644 index 0000000..608ed34 --- /dev/null +++ b/src/docs/components/InputFrameBlocks/Preview.tsx @@ -0,0 +1,23 @@ +import { Button } from "@components/Button"; +import { Input, InputFrame } from "@components/Input"; + +export function InputFrameDemo() { + return ( + + + + + ); +} diff --git a/src/docs/components/Label.mdx b/src/docs/components/Label.mdx new file mode 100644 index 0000000..6bad455 --- /dev/null +++ b/src/docs/components/Label.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Label.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { Label } from "@components/Label" +``` + +```html + + + + +``` + +## Props + +### Variants + +| Prop | Type | Default | Description | +|:------------|:-----------------------------|:-------------|:----------------------------| +| `direction` | `"vertical" \| "horizontal"` | `"vertical"` | The direction of the label. | + +## Examples + +### Vertical + + + + Preview + Code + + + + + + + + + + + +### Horizontal + + + + Preview + Code + + + + + + + + + + + +### Invalid + + + + Preview + Code + + + + + + + + + + + +### Disabled + + + + Preview + Code + + + + + + + + + + \ No newline at end of file diff --git a/src/docs/components/LabelBlocks/Examples/Disabled.tsx b/src/docs/components/LabelBlocks/Examples/Disabled.tsx new file mode 100644 index 0000000..0f6c9c1 --- /dev/null +++ b/src/docs/components/LabelBlocks/Examples/Disabled.tsx @@ -0,0 +1,11 @@ +import { Label } from "@components/Label"; +import { Input } from "@components/Input"; + +export function Disabled() { + return ( + + ); +} diff --git a/src/docs/components/LabelBlocks/Examples/Horizontal.tsx b/src/docs/components/LabelBlocks/Examples/Horizontal.tsx new file mode 100644 index 0000000..ca4ce0f --- /dev/null +++ b/src/docs/components/LabelBlocks/Examples/Horizontal.tsx @@ -0,0 +1,11 @@ +import { Label } from "@components/Label"; +import { Checkbox } from "@components/Checkbox"; + +export function Horizontal() { + return ( + + ); +} diff --git a/src/docs/components/LabelBlocks/Examples/Invalid.tsx b/src/docs/components/LabelBlocks/Examples/Invalid.tsx new file mode 100644 index 0000000..e716482 --- /dev/null +++ b/src/docs/components/LabelBlocks/Examples/Invalid.tsx @@ -0,0 +1,11 @@ +import { Label } from "@components/Label"; +import { Input } from "@components/Input"; + +export function Invalid() { + return ( + + ); +} diff --git a/src/docs/components/LabelBlocks/Examples/Vertical.tsx b/src/docs/components/LabelBlocks/Examples/Vertical.tsx new file mode 100644 index 0000000..b6a6303 --- /dev/null +++ b/src/docs/components/LabelBlocks/Examples/Vertical.tsx @@ -0,0 +1,11 @@ +import { Label } from "@components/Label"; +import { Input } from "@components/Input"; + +export function Vertical() { + return ( + + ); +} diff --git a/src/docs/components/LabelBlocks/Examples/index.ts b/src/docs/components/LabelBlocks/Examples/index.ts new file mode 100644 index 0000000..113761d --- /dev/null +++ b/src/docs/components/LabelBlocks/Examples/index.ts @@ -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, +}; + diff --git a/src/docs/components/LabelBlocks/Preview.tsx b/src/docs/components/LabelBlocks/Preview.tsx new file mode 100644 index 0000000..fd595b1 --- /dev/null +++ b/src/docs/components/LabelBlocks/Preview.tsx @@ -0,0 +1,11 @@ +import { Label } from "@components/Label"; +import { Input } from "@components/Input"; + +export function LabelDemo() { + return ( + + ); +} diff --git a/src/docs/components/Popover.mdx b/src/docs/components/Popover.mdx new file mode 100644 index 0000000..d5ba2de --- /dev/null +++ b/src/docs/components/Popover.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Popover.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { Popover, PopoverTrigger, PopoverContent } from "@components/popover" +``` + +```html + + + + + + + + + +} \ No newline at end of file diff --git a/src/docs/components/PopoverBlocks/Examples/UserControl.tsx b/src/docs/components/PopoverBlocks/Examples/UserControl.tsx new file mode 100644 index 0000000..cbefd9d --- /dev/null +++ b/src/docs/components/PopoverBlocks/Examples/UserControl.tsx @@ -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>] +>([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 ? : } + + + ); +}; diff --git a/src/docs/components/PopoverBlocks/Examples/index.ts b/src/docs/components/PopoverBlocks/Examples/index.ts new file mode 100644 index 0000000..717dc4c --- /dev/null +++ b/src/docs/components/PopoverBlocks/Examples/index.ts @@ -0,0 +1,7 @@ +import { ThemeSelector } from "./ThemeSelector"; +import { UserControl } from "./UserControl"; + +export default { + ThemeSelector, + UserControl, +} \ No newline at end of file diff --git a/src/docs/components/PopoverBlocks/Preview.tsx b/src/docs/components/PopoverBlocks/Preview.tsx new file mode 100644 index 0000000..6fad0a6 --- /dev/null +++ b/src/docs/components/PopoverBlocks/Preview.tsx @@ -0,0 +1,54 @@ +import { Button } from "@components/Button"; +import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover"; + +export function PopoverDemo() { + return ( + + + + + + + + + + ); +} diff --git a/src/docs/components/Switch.mdx b/src/docs/components/Switch.mdx new file mode 100644 index 0000000..968c9fc --- /dev/null +++ b/src/docs/components/Switch.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Switch.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { Switch } from "@components/Switch"; +``` + +```html + +``` + diff --git a/src/docs/components/SwitchBlocks/Preview.tsx b/src/docs/components/SwitchBlocks/Preview.tsx new file mode 100644 index 0000000..c2cd868 --- /dev/null +++ b/src/docs/components/SwitchBlocks/Preview.tsx @@ -0,0 +1,5 @@ +import { Switch } from "@components/Switch"; + +export function SwitchDemo() { + return ; +} diff --git a/src/docs/components/Tabs.mdx b/src/docs/components/Tabs.mdx new file mode 100644 index 0000000..8c3edd8 --- /dev/null +++ b/src/docs/components/Tabs.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Tabs.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs"; +``` + +```html + + + Tab 1 + Tab 2 + + +
Tab 1 Content
+ + +
Tab 2 Content
+ + +``` + +> 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. | diff --git a/src/docs/components/TabsBlocks/Preview.tsx b/src/docs/components/TabsBlocks/Preview.tsx new file mode 100644 index 0000000..2c27b29 --- /dev/null +++ b/src/docs/components/TabsBlocks/Preview.tsx @@ -0,0 +1,18 @@ +import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs"; + +export function TabsDemo() { + return ( + + + Tab 1 + Tab 2 + + +
Tab 1 Content
+ + +
Tab 2 Content
+ + + ); +} diff --git a/src/docs/components/Toast.mdx b/src/docs/components/Toast.mdx new file mode 100644 index 0000000..ab30975 --- /dev/null +++ b/src/docs/components/Toast.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Toast.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { Toaster } from "@components/Toast"; +``` + +```html + +``` + +> 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 ; +} +``` + +## Props + +### Toaster + +#### Special + +| Prop | Type | Default | Description | +|:----------------|:-----------------------|:---------------------|:--------------------------| +| `defaultOption` | `Partial` | `defaultToastOption` | Global options for toast. | + +```ts +interface ToastOption { + closeButton: boolean; + closeTimeout: number | null; +} + +const defaultToastOption: ToastOption = { + closeButton: true, + closeTimeout: 3000, +}; +``` + +## Examples + +### Normal + + + + Preview + Code + + + + + + + + + + + +### Success + + + + Preview + Code + + + + + + + + + + + +### Error + + + + Preview + Code + + + + + + + + + + + +### Warning + + + + Preview + Code + + + + + + + + + + + +### Pending - Fail + + + + Preview + Code + + + + + + + + + + + +### Pending - Success + + + + Preview + Code + + + + + + + + + + \ No newline at end of file diff --git a/src/docs/components/ToastBlocks/Examples/Error.tsx b/src/docs/components/ToastBlocks/Examples/Error.tsx new file mode 100644 index 0000000..b7be3c5 --- /dev/null +++ b/src/docs/components/ToastBlocks/Examples/Error.tsx @@ -0,0 +1,29 @@ +import { Button } from "@components/Button"; +import { Toaster, useToast } from "@components/Toast"; + +function Children() { + const { toast } = useToast(); + + return ( + + ); +} + +export function Error() { + return ( + <> + + + + ); +} diff --git a/src/docs/components/ToastBlocks/Examples/Normal.tsx b/src/docs/components/ToastBlocks/Examples/Normal.tsx new file mode 100644 index 0000000..b88d8f1 --- /dev/null +++ b/src/docs/components/ToastBlocks/Examples/Normal.tsx @@ -0,0 +1,29 @@ +import { Button } from "@components/Button"; +import { Toaster, useToast } from "@components/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 new file mode 100644 index 0000000..bd2cf48 --- /dev/null +++ b/src/docs/components/ToastBlocks/Examples/PendingFail.tsx @@ -0,0 +1,35 @@ +import { Button } from "@components/Button"; +import { Toaster, useToast } from "@components/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 new file mode 100644 index 0000000..41c1520 --- /dev/null +++ b/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx @@ -0,0 +1,37 @@ +import { Button } from "@components/Button"; +import { Toaster, useToast } from "@components/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 new file mode 100644 index 0000000..4b50806 --- /dev/null +++ b/src/docs/components/ToastBlocks/Examples/Success.tsx @@ -0,0 +1,29 @@ +import { Button } from "@components/Button"; +import { Toaster, useToast } from "@components/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 new file mode 100644 index 0000000..20179bc --- /dev/null +++ b/src/docs/components/ToastBlocks/Examples/Warning.tsx @@ -0,0 +1,29 @@ +import { Button } from "@components/Button"; +import { Toaster, useToast } from "@components/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 new file mode 100644 index 0000000..791b18a --- /dev/null +++ b/src/docs/components/ToastBlocks/Examples/index.ts @@ -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, +}; + diff --git a/src/docs/components/ToastBlocks/Preview.tsx b/src/docs/components/ToastBlocks/Preview.tsx new file mode 100644 index 0000000..2eb0bac --- /dev/null +++ b/src/docs/components/ToastBlocks/Preview.tsx @@ -0,0 +1,25 @@ +import { Button } from "@components/Button"; +import { Toaster, useToast } from "@components/Toast"; + +function Children() { + const { toast } = useToast(); + + return ( + + ); +} + +export function ToastDemo() { + return ( + <> + + + + ); +} diff --git a/src/docs/components/Tooltip.mdx b/src/docs/components/Tooltip.mdx new file mode 100644 index 0000000..dfcb9e1 --- /dev/null +++ b/src/docs/components/Tooltip.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Tooltip.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { Tooltip, TooltipContent } from "@components/Tooltip"; +``` + +```html + + + {/* Tooltip Content */} + + {/* Tooltip Trigger */} + +``` + +## 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 + + + + Preview + Code + + + + + + + + + + + +### Bottom + + + + Preview + Code + + + + + + + + + + + +### Left + + + + Preview + Code + + + + + + + + + + + +### Right + + + + Preview + Code + + + + + + + + + + + +### No Delay + + + + Preview + Code + + + + + + + + + + + +### Early Delay + + + + Preview + Code + + + + + + + + + + + +### Late Delay + + + + Preview + Code + + + + + + + + + + + +### Controlled + + + + Preview + Code + + + + + + + + + + \ No newline at end of file diff --git a/src/docs/components/TooltipBlocks/Examples/Bottom.tsx b/src/docs/components/TooltipBlocks/Examples/Bottom.tsx new file mode 100644 index 0000000..ac39a3b --- /dev/null +++ b/src/docs/components/TooltipBlocks/Examples/Bottom.tsx @@ -0,0 +1,13 @@ +import { Button } from "@components/Button"; +import { Tooltip, TooltipContent } from "@components/Tooltip"; + +export function Bottom() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/Controlled.tsx b/src/docs/components/TooltipBlocks/Examples/Controlled.tsx new file mode 100644 index 0000000..5ee7785 --- /dev/null +++ b/src/docs/components/TooltipBlocks/Examples/Controlled.tsx @@ -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!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx b/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx new file mode 100644 index 0000000..97763a0 --- /dev/null +++ b/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx @@ -0,0 +1,13 @@ +import { Button } from "@components/Button"; +import { Tooltip, TooltipContent } from "@components/Tooltip"; + +export function EarlyDelay() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx b/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx new file mode 100644 index 0000000..84bf27a --- /dev/null +++ b/src/docs/components/TooltipBlocks/Examples/LateDelay.tsx @@ -0,0 +1,13 @@ +import { Button } from "@components/Button"; +import { Tooltip, TooltipContent } from "@components/Tooltip"; + +export function LateDelay() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/Left.tsx b/src/docs/components/TooltipBlocks/Examples/Left.tsx new file mode 100644 index 0000000..2e019f6 --- /dev/null +++ b/src/docs/components/TooltipBlocks/Examples/Left.tsx @@ -0,0 +1,13 @@ +import { Button } from "@components/Button"; +import { Tooltip, TooltipContent } from "@components/Tooltip"; + +export function Left() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx b/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx new file mode 100644 index 0000000..b00aeb1 --- /dev/null +++ b/src/docs/components/TooltipBlocks/Examples/NoDelay.tsx @@ -0,0 +1,13 @@ +import { Button } from "@components/Button"; +import { Tooltip, TooltipContent } from "@components/Tooltip"; + +export function NoDelay() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/Right.tsx b/src/docs/components/TooltipBlocks/Examples/Right.tsx new file mode 100644 index 0000000..aa74fb0 --- /dev/null +++ b/src/docs/components/TooltipBlocks/Examples/Right.tsx @@ -0,0 +1,13 @@ +import { Button } from "@components/Button"; +import { Tooltip, TooltipContent } from "@components/Tooltip"; + +export function Right() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/Top.tsx b/src/docs/components/TooltipBlocks/Examples/Top.tsx new file mode 100644 index 0000000..c9434d9 --- /dev/null +++ b/src/docs/components/TooltipBlocks/Examples/Top.tsx @@ -0,0 +1,13 @@ +import { Button } from "@components/Button"; +import { Tooltip, TooltipContent } from "@components/Tooltip"; + +export function Top() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/components/TooltipBlocks/Examples/index.ts b/src/docs/components/TooltipBlocks/Examples/index.ts new file mode 100644 index 0000000..11508e6 --- /dev/null +++ b/src/docs/components/TooltipBlocks/Examples/index.ts @@ -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, +}; diff --git a/src/docs/components/TooltipBlocks/Preview.tsx b/src/docs/components/TooltipBlocks/Preview.tsx new file mode 100644 index 0000000..d441678 --- /dev/null +++ b/src/docs/components/TooltipBlocks/Preview.tsx @@ -0,0 +1,13 @@ +import { Button } from "@components/Button"; +import { Tooltip, TooltipContent } from "@components/Tooltip"; + +export function TooltipDemo() { + return ( + + +

Tooltip!

+ + + + ); +} diff --git a/src/docs/configuration.mdx b/src/docs/configuration.mdx new file mode 100644 index 0000000..1ab6225 --- /dev/null +++ b/src/docs/configuration.mdx @@ -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({ + /* ... */ +}) +``` \ No newline at end of file diff --git a/src/docs/installation.mdx b/src/docs/installation.mdx new file mode 100644 index 0000000..d604bda --- /dev/null +++ b/src/docs/installation.mdx @@ -0,0 +1,36 @@ +import {TabProvider, TabContent, TabList, TabTrigger} from "@components/Tabs"; +import {Code} from "@/components/LoadedCode"; + +# Installation + + + + Using CLI + Manual Install + + + 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. + + {`{\n "compilerOptions": {\n "paths": {\n "@pswui-lib": ["./pswui/lib.tsx"]\n }\n }\n}`} + + 3. Install [@psw-ui/cli](https://www.npmjs.com/package/@psw-ui/cli). + + {`$ npm install -D \@psw-ui/cli\n$ yarn add -D @psw-ui/cli\n$ pnpm add -D @psw-ui/cli`} + + 4. Run CLI to add components + + {`$ npx pswui add \n$ yarn pswui add \n$ pnpm pswui add `} + + 5. Import component, and use it. + + + 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. + + {`{\n "compilerOptions": {\n "paths": {\n "@pswui-lib": [""]\n }\n }\n}`} + + 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. + + diff --git a/src/docs/introduction.mdx b/src/docs/introduction.mdx new file mode 100644 index 0000000..f286d8f --- /dev/null +++ b/src/docs/introduction.mdx @@ -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). diff --git a/src/errors/PageNotFound.tsx b/src/errors/PageNotFound.tsx new file mode 100644 index 0000000..22c1e20 --- /dev/null +++ b/src/errors/PageNotFound.tsx @@ -0,0 +1,22 @@ +import { Link } from "react-router-dom"; +import { Button } from "../../components/Button"; + +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 new file mode 100644 index 0000000..ff11ead --- /dev/null +++ b/src/errors/Unexpected.tsx @@ -0,0 +1,22 @@ +import { Link } from "react-router-dom"; +import { Button } from "../../components/Button"; + +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 new file mode 100644 index 0000000..af59505 --- /dev/null +++ b/src/main.tsx @@ -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( + + + +); diff --git a/src/mdx.d.ts b/src/mdx.d.ts new file mode 100644 index 0000000..a609f8d --- /dev/null +++ b/src/mdx.d.ts @@ -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 +} \ No newline at end of file diff --git a/src/tailwind.css b/src/tailwind.css new file mode 100644 index 0000000..cf35ee8 --- /dev/null +++ b/src/tailwind.css @@ -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; + } +} + diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..3cac0d0 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,6 @@ +/// +import { ImportGlobFunction } from "vite/types/importGlob"; + +interface ImportMeta { + glob: ImportGlobFunction; +} \ No newline at end of file