diff --git a/packages/react/index.html b/packages/react/index.html index b7cd84f..0ba5f47 100644 --- a/packages/react/index.html +++ b/packages/react/index.html @@ -3,23 +3,7 @@ - - - - - - - - - - - - - - - - - PSW/UI + Dev Environment
diff --git a/packages/react/public/android-chrome-192x192.png b/packages/react/public/android-chrome-192x192.png deleted file mode 100644 index 5c8371a..0000000 Binary files a/packages/react/public/android-chrome-192x192.png and /dev/null differ diff --git a/packages/react/public/android-chrome-512x512.png b/packages/react/public/android-chrome-512x512.png deleted file mode 100644 index 58c799b..0000000 Binary files a/packages/react/public/android-chrome-512x512.png and /dev/null differ diff --git a/packages/react/public/apple-touch-icon.png b/packages/react/public/apple-touch-icon.png deleted file mode 100644 index 7efb407..0000000 Binary files a/packages/react/public/apple-touch-icon.png and /dev/null differ diff --git a/packages/react/public/favicon-16x16.png b/packages/react/public/favicon-16x16.png deleted file mode 100644 index d255999..0000000 Binary files a/packages/react/public/favicon-16x16.png and /dev/null differ diff --git a/packages/react/public/favicon-32x32.png b/packages/react/public/favicon-32x32.png deleted file mode 100644 index 76f7474..0000000 Binary files a/packages/react/public/favicon-32x32.png and /dev/null differ diff --git a/packages/react/public/favicon.ico b/packages/react/public/favicon.ico deleted file mode 100644 index 79ec661..0000000 Binary files a/packages/react/public/favicon.ico and /dev/null differ diff --git a/packages/react/public/site.webmanifest b/packages/react/public/site.webmanifest deleted file mode 100644 index 78a3b05..0000000 --- a/packages/react/public/site.webmanifest +++ /dev/null @@ -1,20 +0,0 @@ -{ - "name": "PSW/UI", - "short_name": "PSWUI", - "description": "PSW/UI is a UI library with minimum dependency.", - "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/packages/react/src/App.tsx b/packages/react/src/App.tsx deleted file mode 100644 index b559bda..0000000 --- a/packages/react/src/App.tsx +++ /dev/null @@ -1,256 +0,0 @@ -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/packages/react/src/DocsLayout.tsx b/packages/react/src/DocsLayout.tsx deleted file mode 100644 index 228c297..0000000 --- a/packages/react/src/DocsLayout.tsx +++ /dev/null @@ -1,43 +0,0 @@ -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/packages/react/src/DynamicLayout.tsx b/packages/react/src/DynamicLayout.tsx deleted file mode 100644 index b652815..0000000 --- a/packages/react/src/DynamicLayout.tsx +++ /dev/null @@ -1,63 +0,0 @@ -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/packages/react/src/ErrorHandler.tsx b/packages/react/src/ErrorHandler.tsx deleted file mode 100644 index 378965e..0000000 --- a/packages/react/src/ErrorHandler.tsx +++ /dev/null @@ -1,19 +0,0 @@ -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/packages/react/src/HeadingContext.tsx b/packages/react/src/HeadingContext.tsx deleted file mode 100644 index 4ce18e2..0000000 --- a/packages/react/src/HeadingContext.tsx +++ /dev/null @@ -1,12 +0,0 @@ -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/packages/react/src/Home.tsx b/packages/react/src/Home.tsx deleted file mode 100644 index baa8d15..0000000 --- a/packages/react/src/Home.tsx +++ /dev/null @@ -1,30 +0,0 @@ -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/packages/react/src/MainLayout.tsx b/packages/react/src/MainLayout.tsx deleted file mode 100644 index 5d76dc8..0000000 --- a/packages/react/src/MainLayout.tsx +++ /dev/null @@ -1,215 +0,0 @@ -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/packages/react/src/RouteObject.ts b/packages/react/src/RouteObject.ts deleted file mode 100644 index 798de14..0000000 --- a/packages/react/src/RouteObject.ts +++ /dev/null @@ -1,59 +0,0 @@ -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/packages/react/src/components/LoadedCode.tsx b/packages/react/src/components/LoadedCode.tsx deleted file mode 100644 index 4363438..0000000 --- a/packages/react/src/components/LoadedCode.tsx +++ /dev/null @@ -1,118 +0,0 @@ -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/packages/react/src/components/Story.tsx b/packages/react/src/components/Story.tsx deleted file mode 100644 index 3d0577c..0000000 --- a/packages/react/src/components/Story.tsx +++ /dev/null @@ -1,32 +0,0 @@ -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/packages/react/src/docs/components/Button.mdx b/packages/react/src/docs/components/Button.mdx deleted file mode 100644 index 4613fbd..0000000 --- a/packages/react/src/docs/components/Button.mdx +++ /dev/null @@ -1,162 +0,0 @@ -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/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx deleted file mode 100644 index ca271ba..0000000 --- a/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@components/Button"; - -export const Danger = () => { - return ; -}; diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx deleted file mode 100644 index 6a5e111..0000000 --- a/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@components/Button"; - -export const Default = () => { - return ; -}; diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx deleted file mode 100644 index a6ad3ba..0000000 --- a/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@components/Button"; - -export const Ghost = () => { - return ; -}; diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx deleted file mode 100644 index d922088..0000000 --- a/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@components/Button"; - -export const Link = () => { - return ; -}; diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx deleted file mode 100644 index 534a40c..0000000 --- a/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@components/Button"; - -export const Success = () => { - return ; -}; diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx deleted file mode 100644 index 90dea91..0000000 --- a/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@components/Button"; - -export const Warning = () => { - return ; -}; diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/index.ts b/packages/react/src/docs/components/ButtonBlocks/Examples/index.ts deleted file mode 100644 index 0b7aaac..0000000 --- a/packages/react/src/docs/components/ButtonBlocks/Examples/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -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/packages/react/src/docs/components/ButtonBlocks/Preview.tsx b/packages/react/src/docs/components/ButtonBlocks/Preview.tsx deleted file mode 100644 index 3f3a5b1..0000000 --- a/packages/react/src/docs/components/ButtonBlocks/Preview.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@components/Button"; - -export function ButtonDemo() { - return ; -} diff --git a/packages/react/src/docs/components/Checkbox.mdx b/packages/react/src/docs/components/Checkbox.mdx deleted file mode 100644 index 6979ce1..0000000 --- a/packages/react/src/docs/components/Checkbox.mdx +++ /dev/null @@ -1,84 +0,0 @@ -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/packages/react/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx b/packages/react/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx deleted file mode 100644 index 470be3c..0000000 --- a/packages/react/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Label } from "@components/Label"; -import { Checkbox } from "@components/Checkbox"; - -export function Disabled() { - return ( - - ); -} diff --git a/packages/react/src/docs/components/CheckboxBlocks/Examples/Text.tsx b/packages/react/src/docs/components/CheckboxBlocks/Examples/Text.tsx deleted file mode 100644 index 6c19dd0..0000000 --- a/packages/react/src/docs/components/CheckboxBlocks/Examples/Text.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Label } from "@components/Label"; -import { Checkbox } from "@components/Checkbox"; - -export function Text() { - return ( - - ); -} diff --git a/packages/react/src/docs/components/CheckboxBlocks/Examples/index.ts b/packages/react/src/docs/components/CheckboxBlocks/Examples/index.ts deleted file mode 100644 index 8b86020..0000000 --- a/packages/react/src/docs/components/CheckboxBlocks/Examples/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Text } from "./Text"; -import { Disabled } from "./Disabled"; - -export default { Text, Disabled }; - diff --git a/packages/react/src/docs/components/CheckboxBlocks/Preview.tsx b/packages/react/src/docs/components/CheckboxBlocks/Preview.tsx deleted file mode 100644 index 8f83020..0000000 --- a/packages/react/src/docs/components/CheckboxBlocks/Preview.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Checkbox } from "@components/Checkbox"; -import { Label } from "@components/Label"; - -export function CheckboxDemo() { - return ( - - ); -} diff --git a/packages/react/src/docs/components/Dialog.mdx b/packages/react/src/docs/components/Dialog.mdx deleted file mode 100644 index dc01c22..0000000 --- a/packages/react/src/docs/components/Dialog.mdx +++ /dev/null @@ -1,177 +0,0 @@ -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/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx b/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx deleted file mode 100644 index 5051e08..0000000 --- a/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx +++ /dev/null @@ -1,36 +0,0 @@ -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/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx b/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx deleted file mode 100644 index 1c58385..0000000 --- a/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx +++ /dev/null @@ -1,79 +0,0 @@ -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/packages/react/src/docs/components/DialogBlocks/Examples/index.ts b/packages/react/src/docs/components/DialogBlocks/Examples/index.ts deleted file mode 100644 index 1422de3..0000000 --- a/packages/react/src/docs/components/DialogBlocks/Examples/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { BasicInformationalDialog } from "./BasicInformationalDialog"; -import { DeletingItem } from "./DeletingItem"; - -export default { - BasicInformationalDialog, - DeletingItem, -} - diff --git a/packages/react/src/docs/components/DialogBlocks/Preview.tsx b/packages/react/src/docs/components/DialogBlocks/Preview.tsx deleted file mode 100644 index 3392a50..0000000 --- a/packages/react/src/docs/components/DialogBlocks/Preview.tsx +++ /dev/null @@ -1,42 +0,0 @@ -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/packages/react/src/docs/components/Drawer.mdx b/packages/react/src/docs/components/Drawer.mdx deleted file mode 100644 index 091f218..0000000 --- a/packages/react/src/docs/components/Drawer.mdx +++ /dev/null @@ -1,203 +0,0 @@ -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/packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx b/packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx deleted file mode 100644 index 6b9a856..0000000 --- a/packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx +++ /dev/null @@ -1,40 +0,0 @@ -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/packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx b/packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx deleted file mode 100644 index 31928e3..0000000 --- a/packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx +++ /dev/null @@ -1,40 +0,0 @@ -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/packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx b/packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx deleted file mode 100644 index 369bf88..0000000 --- a/packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx +++ /dev/null @@ -1,40 +0,0 @@ -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/packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx b/packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx deleted file mode 100644 index 79fc096..0000000 --- a/packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx +++ /dev/null @@ -1,40 +0,0 @@ -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/packages/react/src/docs/components/DrawerBlocks/Examples/index.ts b/packages/react/src/docs/components/DrawerBlocks/Examples/index.ts deleted file mode 100644 index d1d88b9..0000000 --- a/packages/react/src/docs/components/DrawerBlocks/Examples/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -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/packages/react/src/docs/components/DrawerBlocks/Preview.tsx b/packages/react/src/docs/components/DrawerBlocks/Preview.tsx deleted file mode 100644 index fb749fa..0000000 --- a/packages/react/src/docs/components/DrawerBlocks/Preview.tsx +++ /dev/null @@ -1,40 +0,0 @@ -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/packages/react/src/docs/components/Input.mdx b/packages/react/src/docs/components/Input.mdx deleted file mode 100644 index e879950..0000000 --- a/packages/react/src/docs/components/Input.mdx +++ /dev/null @@ -1,123 +0,0 @@ -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/packages/react/src/docs/components/InputBlocks/Examples/Disabled.tsx b/packages/react/src/docs/components/InputBlocks/Examples/Disabled.tsx deleted file mode 100644 index e81c9db..0000000 --- a/packages/react/src/docs/components/InputBlocks/Examples/Disabled.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Input } from "@components/Input"; - -export function Disabled() { - return ; -} diff --git a/packages/react/src/docs/components/InputBlocks/Examples/Invalid.tsx b/packages/react/src/docs/components/InputBlocks/Examples/Invalid.tsx deleted file mode 100644 index 27fb355..0000000 --- a/packages/react/src/docs/components/InputBlocks/Examples/Invalid.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Input } from "@components/Input"; - -export function Invalid() { - return ; -} diff --git a/packages/react/src/docs/components/InputBlocks/Examples/index.ts b/packages/react/src/docs/components/InputBlocks/Examples/index.ts deleted file mode 100644 index 5c43f37..0000000 --- a/packages/react/src/docs/components/InputBlocks/Examples/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Invalid } from "./Invalid"; -import { Disabled } from "./Disabled"; - -export default { Invalid, Disabled }; - diff --git a/packages/react/src/docs/components/InputBlocks/Preview.tsx b/packages/react/src/docs/components/InputBlocks/Preview.tsx deleted file mode 100644 index b066653..0000000 --- a/packages/react/src/docs/components/InputBlocks/Preview.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Input } from "@components/Input"; - -export function InputDemo() { - return ; -} diff --git a/packages/react/src/docs/components/InputFrameBlocks/Preview.tsx b/packages/react/src/docs/components/InputFrameBlocks/Preview.tsx deleted file mode 100644 index 1068c34..0000000 --- a/packages/react/src/docs/components/InputFrameBlocks/Preview.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Button } from "@components/Button"; -import { Input, InputFrame } from "@components/Input"; - -export function InputFrameDemo() { - return ( - - - - - ); -} diff --git a/packages/react/src/docs/components/Label.mdx b/packages/react/src/docs/components/Label.mdx deleted file mode 100644 index 6c9deeb..0000000 --- a/packages/react/src/docs/components/Label.mdx +++ /dev/null @@ -1,125 +0,0 @@ -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/packages/react/src/docs/components/LabelBlocks/Examples/Disabled.tsx b/packages/react/src/docs/components/LabelBlocks/Examples/Disabled.tsx deleted file mode 100644 index 85f58d4..0000000 --- a/packages/react/src/docs/components/LabelBlocks/Examples/Disabled.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Label } from "@components/Label"; -import { Input } from "@components/Input"; - -export function Disabled() { - return ( - - ); -} diff --git a/packages/react/src/docs/components/LabelBlocks/Examples/Horizontal.tsx b/packages/react/src/docs/components/LabelBlocks/Examples/Horizontal.tsx deleted file mode 100644 index 35d370c..0000000 --- a/packages/react/src/docs/components/LabelBlocks/Examples/Horizontal.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Label } from "@components/Label"; -import { Checkbox } from "@components/Checkbox"; - -export function Horizontal() { - return ( - - ); -} diff --git a/packages/react/src/docs/components/LabelBlocks/Examples/Invalid.tsx b/packages/react/src/docs/components/LabelBlocks/Examples/Invalid.tsx deleted file mode 100644 index 9d1c73d..0000000 --- a/packages/react/src/docs/components/LabelBlocks/Examples/Invalid.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Label } from "@components/Label"; -import { Input } from "@components/Input"; - -export function Invalid() { - return ( - - ); -} diff --git a/packages/react/src/docs/components/LabelBlocks/Examples/Vertical.tsx b/packages/react/src/docs/components/LabelBlocks/Examples/Vertical.tsx deleted file mode 100644 index 701c710..0000000 --- a/packages/react/src/docs/components/LabelBlocks/Examples/Vertical.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Label } from "@components/Label"; -import { Input } from "@components/Input"; - -export function Vertical() { - return ( - - ); -} diff --git a/packages/react/src/docs/components/LabelBlocks/Examples/index.ts b/packages/react/src/docs/components/LabelBlocks/Examples/index.ts deleted file mode 100644 index 4b37b25..0000000 --- a/packages/react/src/docs/components/LabelBlocks/Examples/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -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/packages/react/src/docs/components/LabelBlocks/Preview.tsx b/packages/react/src/docs/components/LabelBlocks/Preview.tsx deleted file mode 100644 index dcc9683..0000000 --- a/packages/react/src/docs/components/LabelBlocks/Preview.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Label } from "@components/Label"; -import { Input } from "@components/Input"; - -export function LabelDemo() { - return ( - - ); -} diff --git a/packages/react/src/docs/components/Popover.mdx b/packages/react/src/docs/components/Popover.mdx deleted file mode 100644 index ef3c6be..0000000 --- a/packages/react/src/docs/components/Popover.mdx +++ /dev/null @@ -1,117 +0,0 @@ -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/packages/react/src/docs/components/PopoverBlocks/Examples/UserControl.tsx b/packages/react/src/docs/components/PopoverBlocks/Examples/UserControl.tsx deleted file mode 100644 index 5ccd52d..0000000 --- a/packages/react/src/docs/components/PopoverBlocks/Examples/UserControl.tsx +++ /dev/null @@ -1,151 +0,0 @@ -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/packages/react/src/docs/components/PopoverBlocks/Examples/index.ts b/packages/react/src/docs/components/PopoverBlocks/Examples/index.ts deleted file mode 100644 index ad9badf..0000000 --- a/packages/react/src/docs/components/PopoverBlocks/Examples/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { ThemeSelector } from "./ThemeSelector"; -import { UserControl } from "./UserControl"; - -export default { - ThemeSelector, - UserControl, -} \ No newline at end of file diff --git a/packages/react/src/docs/components/PopoverBlocks/Preview.tsx b/packages/react/src/docs/components/PopoverBlocks/Preview.tsx deleted file mode 100644 index 7a1f0ca..0000000 --- a/packages/react/src/docs/components/PopoverBlocks/Preview.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Button } from "@components/Button"; -import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover"; - -export function PopoverDemo() { - return ( - - - - - - - - - - ); -} diff --git a/packages/react/src/docs/components/Switch.mdx b/packages/react/src/docs/components/Switch.mdx deleted file mode 100644 index e60cf3f..0000000 --- a/packages/react/src/docs/components/Switch.mdx +++ /dev/null @@ -1,40 +0,0 @@ -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/packages/react/src/docs/components/SwitchBlocks/Preview.tsx b/packages/react/src/docs/components/SwitchBlocks/Preview.tsx deleted file mode 100644 index ccc389b..0000000 --- a/packages/react/src/docs/components/SwitchBlocks/Preview.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Switch } from "@components/Switch"; - -export function SwitchDemo() { - return ; -} diff --git a/packages/react/src/docs/components/Tabs.mdx b/packages/react/src/docs/components/Tabs.mdx deleted file mode 100644 index 97eb77e..0000000 --- a/packages/react/src/docs/components/Tabs.mdx +++ /dev/null @@ -1,79 +0,0 @@ -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/packages/react/src/docs/components/TabsBlocks/Preview.tsx b/packages/react/src/docs/components/TabsBlocks/Preview.tsx deleted file mode 100644 index dc6fc04..0000000 --- a/packages/react/src/docs/components/TabsBlocks/Preview.tsx +++ /dev/null @@ -1,18 +0,0 @@ -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/packages/react/src/docs/components/Toast.mdx b/packages/react/src/docs/components/Toast.mdx deleted file mode 100644 index 1f45981..0000000 --- a/packages/react/src/docs/components/Toast.mdx +++ /dev/null @@ -1,182 +0,0 @@ -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/packages/react/src/docs/components/ToastBlocks/Examples/Error.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/Error.tsx deleted file mode 100644 index 4781572..0000000 --- a/packages/react/src/docs/components/ToastBlocks/Examples/Error.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Button } from "@components/Button"; -import { Toaster, useToast } from "@components/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function Error() { - return ( - <> - - - - ); -} diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/Normal.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/Normal.tsx deleted file mode 100644 index 688140c..0000000 --- a/packages/react/src/docs/components/ToastBlocks/Examples/Normal.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Button } from "@components/Button"; -import { Toaster, useToast } from "@components/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function Normal() { - return ( - <> - - - - ); -} diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/PendingFail.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/PendingFail.tsx deleted file mode 100644 index 856b11a..0000000 --- a/packages/react/src/docs/components/ToastBlocks/Examples/PendingFail.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Button } from "@components/Button"; -import { Toaster, useToast } from "@components/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function PendingFail() { - return ( - <> - - - - ); -} diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx deleted file mode 100644 index 55eb23c..0000000 --- a/packages/react/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Button } from "@components/Button"; -import { Toaster, useToast } from "@components/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function PendingSuccess() { - return ( - <> - - - - ); -} diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/Success.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/Success.tsx deleted file mode 100644 index 4b93466..0000000 --- a/packages/react/src/docs/components/ToastBlocks/Examples/Success.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Button } from "@components/Button"; -import { Toaster, useToast } from "@components/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function Success() { - return ( - <> - - - - ); -} diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/Warning.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/Warning.tsx deleted file mode 100644 index 0facd76..0000000 --- a/packages/react/src/docs/components/ToastBlocks/Examples/Warning.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Button } from "@components/Button"; -import { Toaster, useToast } from "@components/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function Warning() { - return ( - <> - - - - ); -} diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/index.ts b/packages/react/src/docs/components/ToastBlocks/Examples/index.ts deleted file mode 100644 index ae1401c..0000000 --- a/packages/react/src/docs/components/ToastBlocks/Examples/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -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/packages/react/src/docs/components/ToastBlocks/Preview.tsx b/packages/react/src/docs/components/ToastBlocks/Preview.tsx deleted file mode 100644 index f1b05b5..0000000 --- a/packages/react/src/docs/components/ToastBlocks/Preview.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Button } from "@components/Button"; -import { Toaster, useToast } from "@components/Toast"; - -function Children() { - const { toast } = useToast(); - - return ( - - ); -} - -export function ToastDemo() { - return ( - <> - - - - ); -} diff --git a/packages/react/src/docs/components/Tooltip.mdx b/packages/react/src/docs/components/Tooltip.mdx deleted file mode 100644 index 6df9b91..0000000 --- a/packages/react/src/docs/components/Tooltip.mdx +++ /dev/null @@ -1,206 +0,0 @@ -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/packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx b/packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx deleted file mode 100644 index b4f15f2..0000000 --- a/packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Button } from "@components/Button"; -import { Tooltip, TooltipContent } from "@components/Tooltip"; - -export function Bottom() { - return ( - - -

Tooltip!

- - - - ); -} diff --git a/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx b/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx deleted file mode 100644 index a9b72ce..0000000 --- a/packages/react/src/docs/components/TooltipBlocks/Examples/Controlled.tsx +++ /dev/null @@ -1,16 +0,0 @@ -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/packages/react/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx b/packages/react/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx deleted file mode 100644 index 07b0e5e..0000000 --- a/packages/react/src/docs/components/TooltipBlocks/Examples/EarlyDelay.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Button } from "@components/Button"; -import { Tooltip, TooltipContent } from "@components/Tooltip"; - -export function EarlyDelay() { - return ( - - -

Tooltip!

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

Tooltip!

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

Tooltip!

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

Tooltip!

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

Tooltip!

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

Tooltip!

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

Tooltip!

- - - - ); -} diff --git a/packages/react/src/docs/configuration.mdx b/packages/react/src/docs/configuration.mdx deleted file mode 100644 index 3b76791..0000000 --- a/packages/react/src/docs/configuration.mdx +++ /dev/null @@ -1,64 +0,0 @@ -# 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/packages/react/src/docs/installation.mdx b/packages/react/src/docs/installation.mdx deleted file mode 100644 index 205694e..0000000 --- a/packages/react/src/docs/installation.mdx +++ /dev/null @@ -1,36 +0,0 @@ -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/packages/react/src/docs/introduction.mdx b/packages/react/src/docs/introduction.mdx deleted file mode 100644 index 09dccc9..0000000 --- a/packages/react/src/docs/introduction.mdx +++ /dev/null @@ -1,41 +0,0 @@ -# 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/packages/react/src/errors/PageNotFound.tsx b/packages/react/src/errors/PageNotFound.tsx deleted file mode 100644 index bc37876..0000000 --- a/packages/react/src/errors/PageNotFound.tsx +++ /dev/null @@ -1,22 +0,0 @@ -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/packages/react/src/errors/Unexpected.tsx b/packages/react/src/errors/Unexpected.tsx deleted file mode 100644 index 930785f..0000000 --- a/packages/react/src/errors/Unexpected.tsx +++ /dev/null @@ -1,22 +0,0 @@ -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/packages/react/src/mdx.d.ts b/packages/react/src/mdx.d.ts deleted file mode 100644 index 1b6ccf4..0000000 --- a/packages/react/src/mdx.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -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/packages/react/src/vite-env.d.ts b/packages/react/src/vite-env.d.ts deleted file mode 100644 index 14bb4ac..0000000 --- a/packages/react/src/vite-env.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/// -import { ImportGlobFunction } from "vite/types/importGlob"; - -interface ImportMeta { - glob: ImportGlobFunction; -} \ No newline at end of file