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

docs: add input docs

Browse Source
This commit is contained in:
p-sw 2024-06-03 22:05:31 +09:00
parent a8cdcf92eb
commit 86bf518f2f
8 changed files with 182 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 ComponentsInput, {
tableOfContents as componentsInputToc,
} from "./docs/components/Input.mdx";
import ComponentsLabel, {
tableOfContents as componentsLabelToc,
} from "./docs/components/Label.mdx";
@ -186,6 +189,14 @@ const router = createBrowserRouter(
</DynamicLayout>
}
/>
<Route
path="input"
element={
<DynamicLayout toc={componentsInputToc}>
<ComponentsInput components={overrideComponents} />
</DynamicLayout>
}
/>
<Route
path="label"
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/input",
name: "Input",
eq: (pathname: string) => pathname === "/docs/components/input"
},
{
path: "/docs/components/label",
name: "Label",

123
packages/react/src/docs/components/Input.mdx Normal file
View File

@ -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.
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<InputDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/Preview.tsx`} />
</TabContent>
</TabProvider>
## Installation
1. Create a new file `Input.tsx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from={`${GITHUB}/packages/react/components/Input.tsx`} />
## Usage
```tsx
import { Input } from "@components/Input";
```
```html
<Input type="text" />
```
## 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
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<InputExamples.Invalid />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/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">
<InputExamples.Disabled />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/Examples/Disabled.tsx`} />
</TabContent>
</TabProvider>
# InputFrame
Label with input's style.
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<InputFrameDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputFrameBlocks/Preview.tsx`} />
</TabContent>
</TabProvider>
## Installation
**Included in `Input.tsx`.**
## Usage
```tsx
import {
Input,
InputFrame,
} from "@components/Input";
```
```html
<InputFrame>
<Input type="text" unstyled />
</InputFrame>
```

5
packages/react/src/docs/components/InputBlocks/Examples/Disabled.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Input } from "@components/Input";
export function Disabled() {
return <Input type="text" disabled />;
}

5
packages/react/src/docs/components/InputBlocks/Examples/Invalid.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Input } from "@components/Input";
export function Invalid() {
return <Input type="text" invalid="Invalid Input" />;
}

5
packages/react/src/docs/components/InputBlocks/Examples/index.ts Normal file
View File

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

5
packages/react/src/docs/components/InputBlocks/Preview.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Input } from "@components/Input";
export function InputDemo() {
return <Input type="text" />;
}

23
packages/react/src/docs/components/InputFrameBlocks/Preview.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Button } from "@components/Button";
import { Input, InputFrame } from "@components/Input";
export function InputFrameDemo() {
return (
<InputFrame>
<Input type="text" unstyled />
<Button preset="success" size="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5"
/>
</svg>
</Button>
</InputFrame>
);
}