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

docs: add Label docs

Browse Source
This commit is contained in:
p-sw 2024-06-03 21:18:15 +09:00
parent d9a2f29781
commit 2ce9023084
9 changed files with 208 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,6 +30,9 @@ import ComponentsDialog, {
import ComponentsDrawer, {
tableOfContents as componentsDrawerToc,
} from "./docs/components/Drawer.mdx";
import ComponentsLabel, {
tableOfContents as componentsLabelToc,
} from "./docs/components/Label.mdx";
import ComponentsTabs, {
tableOfContents as componentsTabsToc,
} from "./docs/components/Tabs.mdx";
@ -177,6 +180,14 @@ const router = createBrowserRouter(
</DynamicLayout>
}
/>
<Route
path="label"
element={
<DynamicLayout toc={componentsLabelToc}>
<ComponentsLabel components={overrideComponents} />
</DynamicLayout>
}
/>
<Route
path="tabs"
element={

5
packages/react/src/RouteObject.ts
View File

@ -50,6 +50,11 @@ export default {
name: "Drawer",
eq: (pathname: string) => pathname === "/docs/components/drawer"
},
{
path: "/docs/components/label",
name: "Label",
eq: (pathname: string) => pathname === "/docs/components/label"
},
{
path: "/docs/components/tabs",
name: "Tabs",

125
packages/react/src/docs/components/Label.mdx Normal file
View File

@ -0,0 +1,125 @@
import {
TabProvider, TabTrigger, TabContent, TabList
} from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
import { LabelDemo } from "./LabelBlocks/Preview";
import Examples from "./LabelBlocks/Examples"
# Label
A wrapper that used to tag and describe form elements clearly and accessibly.
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<LabelDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Preview.tsx`} />
</TabContent>
</TabProvider>
## Installation
1. Create a new file `Label.tsx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from={`${GITHUB}/packages/react/components/Label.tsx`} />
## Usage
```tsx
import { Label } from "@components/Label"
```
```html
<Label>
<input />
</Label>
<Label htmlFor="input">Label</Label>
<input id="input" />
```
## Props
### Variants
| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `direction` | `"vertical" \| "horizontal"` | `"vertical"` | The direction of the label. |
## Examples
### Vertical
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Vertical />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Vertical.tsx`} />
</TabContent>
</TabProvider>
### Horizontal
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Horizontal />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Horizontal.tsx`} />
</TabContent>
</TabProvider>
### Invalid
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Invalid />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Invalid.tsx`} />
</TabContent>
</TabProvider>
### Disabled
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Disabled />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Disabled.tsx`} />
</TabContent>
</TabProvider>

11
packages/react/src/docs/components/LabelBlocks/Examples/Disabled.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Label } from "@components/Label";
import { Input } from "@components/Input";
export function Disabled() {
return (
<Label direction="vertical">
<span>Email</span>
<Input type="email" disabled />
</Label>
);
}

11
packages/react/src/docs/components/LabelBlocks/Examples/Horizontal.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function Horizontal() {
return (
<Label direction="horizontal">
<Checkbox />
<span>Checkbox</span>
</Label>
);
}

11
packages/react/src/docs/components/LabelBlocks/Examples/Invalid.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Label } from "@components/Label";
import { Input } from "@components/Input";
export function Invalid() {
return (
<Label direction="vertical">
<span>Email</span>
<Input type="email" invalid="Invalid Email" />
</Label>
);
}

11
packages/react/src/docs/components/LabelBlocks/Examples/Vertical.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Label } from "@components/Label";
import { Input } from "@components/Input";
export function Vertical() {
return (
<Label direction="vertical">
<span>Email</span>
<Input type="email" />
</Label>
);
}

12
packages/react/src/docs/components/LabelBlocks/Examples/index.ts Normal file
View File

@ -0,0 +1,12 @@
import { Vertical } from "./Vertical";
import { Horizontal } from "./Horizontal";
import { Invalid } from "./Invalid";
import { Disabled } from "./Disabled";
export default {
Vertical,
Horizontal,
Invalid,
Disabled,
};

11
packages/react/src/docs/components/LabelBlocks/Preview.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Label } from "@components/Label";
import { Input } from "@components/Input";
export function LabelDemo() {
return (
<Label direction="vertical">
<span>Email</span>
<Input type="email" />
</Label>
);
}