p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Button documentation

Browse Source
This commit is contained in:
p-sw 2024-06-01 08:04:55 +09:00
parent 6e889f180f
commit 4917908695
2 changed files with 185 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/react/src/App.tsx
View File

@ -13,6 +13,12 @@ import ErrorBoundary from "./ErrorHandler";
import DocsIntroduction from "./docs/docs/introduction.mdx";
import DocsInstallation from "./docs/docs/installation.mdx";
import ComponentsButton from "./docs/components/Button.mdx";
const overrideComponents = {
pre: (props: any) => <pre {...props} className={`${props.className} hljs`} />,
};
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}>
@ -22,6 +28,10 @@ const router = createBrowserRouter(
<Route path="installation" element={<DocsInstallation />} />
<Route path="components">
<Route index loader={() => redirect("/docs/components/button")} />
<Route
path="button"
element={<ComponentsButton components={overrideComponents} />}
/>
</Route>
</Route>
</Route>

175
packages/react/src/docs/components/Button.mdx Normal file
View File

@ -0,0 +1,175 @@
import { Button } from "@components/Button";
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode } from "@/components/LoadedCode";
# Button
Displays a button or a component that looks like a button.
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button>Button</Button>
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button>Button</Button>
}
```
</TabContent>
</TabProvider>
## Installation
1. Create a new file `Button.tsx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from="https://raw.githubusercontent.com/p-sw/ui/main/packages/react/components/Button.tsx" />
## Examples
### Default
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button>Button</Button>
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="default">Button</Button>
}
```
</TabContent>
</TabProvider>
### Ghost
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button preset="ghost">Button</Button>
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="ghost">Button</Button>
}
```
</TabContent>
</TabProvider>
### Link
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button preset="link">Button</Button>
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="link">Button</Button>
}
```
</TabContent>
</TabProvider>
### Success
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button preset="success">Button</Button>
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="success">Button</Button>
}
```
</TabContent>
</TabProvider>
### Warning
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button preset="warning">Button</Button>
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="warning">Button</Button>
}
```
</TabContent>
</TabProvider>
### Danger
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button preset="danger">Button</Button>
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="danger">Button</Button>
}
```
</TabContent>
</TabProvider>