feat(playground): apply playground to Button
This commit is contained in:
parent
09aa5e0d78
commit
ba344d4159
@ -1,162 +1,152 @@
|
|||||||
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
|
||||||
import { Story } from "@/components/Story";
|
import { Story } from "@/components/Story";
|
||||||
import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
|
import { LoadedCode, GITHUB_COMP, GITHUB_STORY } from "@/components/LoadedCode";
|
||||||
import { ButtonDemo } from "./ButtonBlocks/Preview";
|
import Examples from "./ButtonBlocks/Examples";
|
||||||
import Examples from "./ButtonBlocks/Examples";
|
import ButtonPlayground from "./ButtonBlocks/Playground";
|
||||||
|
|
||||||
# Button
|
# Button
|
||||||
Displays a button or a component that looks like a button.
|
|
||||||
|
Displays a button or a component that looks like a button.
|
||||||
<TabProvider defaultName="preview">
|
|
||||||
<TabList>
|
## Playground
|
||||||
<TabTrigger name="preview">Preview</TabTrigger>
|
|
||||||
<TabTrigger name="code">Code</TabTrigger>
|
<ButtonPlayground />
|
||||||
</TabList>
|
|
||||||
<TabContent name="preview">
|
## Installation
|
||||||
<Story layout="centered">
|
|
||||||
<ButtonDemo />
|
1. Create a new file `Button.tsx` in your component folder.
|
||||||
</Story>
|
2. Copy and paste the following code into the file.
|
||||||
</TabContent>
|
|
||||||
<TabContent name="code">
|
<LoadedCode from={GITHUB_COMP("Button")} />
|
||||||
<LoadedCode from={GITHUB_COMP_PREVIEW("Button")} />
|
|
||||||
</TabContent>
|
## Usage
|
||||||
</TabProvider>
|
|
||||||
|
```tsx
|
||||||
## Installation
|
import { Button } from "@components/Button";
|
||||||
|
```
|
||||||
1. Create a new file `Button.tsx` in your component folder.
|
|
||||||
2. Copy and paste the following code into the file.
|
```html
|
||||||
|
<button>Button</button>
|
||||||
<LoadedCode from={GITHUB_COMP("Button")} />
|
```
|
||||||
|
|
||||||
## Usage
|
## Props
|
||||||
|
|
||||||
```tsx
|
### Variants
|
||||||
import { Button } from "@components/Button";
|
|
||||||
```
|
| Prop | Type | Default | Description |
|
||||||
|
| :----------- | :---------------------------------------------------------------------------- | :---------- | :-------------------------------------- |
|
||||||
```html
|
| `size` | `"link" \| "sm" \| "md" \| "lg" \| "icon"` | `"md"` | The size of the button |
|
||||||
<Button>Button</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 |
|
||||||
## Props
|
| `presets` | `"default" \| "ghost" \| "link" \| "success" \| "warning" \| "danger"` | `"default"` | The preset of the variant props |
|
||||||
|
|
||||||
### Variants
|
### Special
|
||||||
|
|
||||||
| Prop | Type | Default | Description |
|
| Prop | Type | Default | Description |
|
||||||
|:-------------|:------------------------------------------------------------------------------|:------------|:----------------------------------------|
|
| :-------- | :-------- | :------ | :------------------------------------------------------- |
|
||||||
| `size` | `"link" \| "sm" \| "md" \| "lg" \| "icon"` | `"md"` | The size of the button |
|
| `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component |
|
||||||
| `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 |
|
## Examples
|
||||||
| `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 |
|
### Default
|
||||||
|
|
||||||
### Special
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
| Prop | Type | Default | Description |
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|:----------|:----------|:--------|:---------------------------------------------------------|
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
| `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component |
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
## Examples
|
<Story layout="centered">
|
||||||
|
<Examples.Default />
|
||||||
### Default
|
</Story>
|
||||||
|
</TabContent>
|
||||||
<TabProvider defaultName="preview">
|
<TabContent name="code">
|
||||||
<TabList>
|
<LoadedCode from={GITHUB_STORY("Button", "Default")} />
|
||||||
<TabTrigger name="preview">Preview</TabTrigger>
|
</TabContent>
|
||||||
<TabTrigger name="code">Code</TabTrigger>
|
</TabProvider>
|
||||||
</TabList>
|
|
||||||
<TabContent name="preview">
|
### Ghost
|
||||||
<Story layout="centered">
|
|
||||||
<Examples.Default />
|
<TabProvider defaultName="preview">
|
||||||
</Story>
|
<TabList>
|
||||||
</TabContent>
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
<TabContent name="code">
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
<LoadedCode from={GITHUB_STORY("Button", "Default")} />
|
</TabList>
|
||||||
</TabContent>
|
<TabContent name="preview">
|
||||||
</TabProvider>
|
<Story layout="centered">
|
||||||
|
<Examples.Ghost />
|
||||||
### Ghost
|
</Story>
|
||||||
|
</TabContent>
|
||||||
<TabProvider defaultName="preview">
|
<TabContent name="code">
|
||||||
<TabList>
|
<LoadedCode from={GITHUB_STORY("Button", "Ghost")} />
|
||||||
<TabTrigger name="preview">Preview</TabTrigger>
|
</TabContent>
|
||||||
<TabTrigger name="code">Code</TabTrigger>
|
</TabProvider>
|
||||||
</TabList>
|
|
||||||
<TabContent name="preview">
|
### Link
|
||||||
<Story layout="centered">
|
|
||||||
<Examples.Ghost />
|
<TabProvider defaultName="preview">
|
||||||
</Story>
|
<TabList>
|
||||||
</TabContent>
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
<TabContent name="code">
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
<LoadedCode from={GITHUB_STORY("Button", "Ghost")} />
|
</TabList>
|
||||||
</TabContent>
|
<TabContent name="preview">
|
||||||
</TabProvider>
|
<Story layout="centered">
|
||||||
|
<Examples.Link />
|
||||||
### Link
|
</Story>
|
||||||
|
</TabContent>
|
||||||
<TabProvider defaultName="preview">
|
<TabContent name="code">
|
||||||
<TabList>
|
<LoadedCode from={GITHUB_STORY("Button", "Link")} />
|
||||||
<TabTrigger name="preview">Preview</TabTrigger>
|
</TabContent>
|
||||||
<TabTrigger name="code">Code</TabTrigger>
|
</TabProvider>
|
||||||
</TabList>
|
|
||||||
<TabContent name="preview">
|
### Success
|
||||||
<Story layout="centered">
|
|
||||||
<Examples.Link />
|
<TabProvider defaultName="preview">
|
||||||
</Story>
|
<TabList>
|
||||||
</TabContent>
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
<TabContent name="code">
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
<LoadedCode from={GITHUB_STORY("Button", "Link")} />
|
</TabList>
|
||||||
</TabContent>
|
<TabContent name="preview">
|
||||||
</TabProvider>
|
<Story layout="centered">
|
||||||
|
<Examples.Success />
|
||||||
### Success
|
</Story>
|
||||||
|
</TabContent>
|
||||||
<TabProvider defaultName="preview">
|
<TabContent name="code">
|
||||||
<TabList>
|
<LoadedCode from={GITHUB_STORY("Button", "Success")} />
|
||||||
<TabTrigger name="preview">Preview</TabTrigger>
|
</TabContent>
|
||||||
<TabTrigger name="code">Code</TabTrigger>
|
</TabProvider>
|
||||||
</TabList>
|
|
||||||
<TabContent name="preview">
|
### Warning
|
||||||
<Story layout="centered">
|
|
||||||
<Examples.Success />
|
<TabProvider defaultName="preview">
|
||||||
</Story>
|
<TabList>
|
||||||
</TabContent>
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
<TabContent name="code">
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
<LoadedCode from={GITHUB_STORY("Button", "Success")} />
|
</TabList>
|
||||||
</TabContent>
|
<TabContent name="preview">
|
||||||
</TabProvider>
|
<Story layout="centered">
|
||||||
|
<Examples.Warning />
|
||||||
### Warning
|
</Story>
|
||||||
|
</TabContent>
|
||||||
<TabProvider defaultName="preview">
|
<TabContent name="code">
|
||||||
<TabList>
|
<LoadedCode from={GITHUB_STORY("Button", "Warning")} />
|
||||||
<TabTrigger name="preview">Preview</TabTrigger>
|
</TabContent>
|
||||||
<TabTrigger name="code">Code</TabTrigger>
|
</TabProvider>
|
||||||
</TabList>
|
|
||||||
<TabContent name="preview">
|
### Danger
|
||||||
<Story layout="centered">
|
|
||||||
<Examples.Warning />
|
<TabProvider defaultName="preview">
|
||||||
</Story>
|
<TabList>
|
||||||
</TabContent>
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
<TabContent name="code">
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
<LoadedCode from={GITHUB_STORY("Button", "Warning")} />
|
</TabList>
|
||||||
</TabContent>
|
<TabContent name="preview">
|
||||||
</TabProvider>
|
<Story layout="centered">
|
||||||
|
<Examples.Danger />
|
||||||
### Danger
|
</Story>
|
||||||
|
</TabContent>
|
||||||
<TabProvider defaultName="preview">
|
<TabContent name="code">
|
||||||
<TabList>
|
<LoadedCode from={GITHUB_STORY("Button", "Danger")} />
|
||||||
<TabTrigger name="preview">Preview</TabTrigger>
|
</TabContent>
|
||||||
<TabTrigger name="code">Code</TabTrigger>
|
</TabProvider>
|
||||||
</TabList>
|
|
||||||
<TabContent name="preview">
|
|
||||||
<Story layout="centered">
|
|
||||||
<Examples.Danger />
|
|
||||||
</Story>
|
|
||||||
</TabContent>
|
|
||||||
<TabContent name="code">
|
|
||||||
<LoadedCode from={GITHUB_STORY("Button", "Danger")} />
|
|
||||||
</TabContent>
|
|
||||||
</TabProvider>
|
|
||||||
|
|||||||
78
src/docs/components/ButtonBlocks/Playground.tsx
Normal file
78
src/docs/components/ButtonBlocks/Playground.tsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import {
|
||||||
|
GITHUB_COMP_PREVIEW,
|
||||||
|
LoadedCode,
|
||||||
|
type TEMPLATE,
|
||||||
|
} from "@/components/LoadedCode";
|
||||||
|
import { usePgProps } from "@/components/PgHooks";
|
||||||
|
import { PlaygroundControl } from "@/components/Playground";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { TabContent, TabList, TabProvider, TabTrigger } from "@pswui/Tabs";
|
||||||
|
import { ButtonDemo, type ControlledButtonDemoProps } from "./Preview";
|
||||||
|
|
||||||
|
interface TemplateProps extends TEMPLATE, ControlledButtonDemoProps {}
|
||||||
|
|
||||||
|
export default function ButtonPlayground() {
|
||||||
|
const [props, control] = usePgProps<TemplateProps>({
|
||||||
|
ButtonProps: {
|
||||||
|
preset: {
|
||||||
|
type: "select",
|
||||||
|
options: ["default", "ghost", "link", "success", "warning", "danger"],
|
||||||
|
value: "ghost",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: "select",
|
||||||
|
options: ["link", "sm", "md", "lg", "icon"],
|
||||||
|
value: "md",
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: "select",
|
||||||
|
options: ["none", "solid", "success", "warning", "danger"],
|
||||||
|
value: "solid",
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
type: "select",
|
||||||
|
options: [
|
||||||
|
"default",
|
||||||
|
"ghost",
|
||||||
|
"success",
|
||||||
|
"warning",
|
||||||
|
"danger",
|
||||||
|
"transparent",
|
||||||
|
],
|
||||||
|
value: "default",
|
||||||
|
},
|
||||||
|
decoration: {
|
||||||
|
type: "select",
|
||||||
|
options: ["none", "link"],
|
||||||
|
value: "none",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: "boolean",
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<ButtonDemo {...props} />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode
|
||||||
|
from={GITHUB_COMP_PREVIEW("Button")}
|
||||||
|
template={props}
|
||||||
|
/>
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
<PlaygroundControl props={control} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,5 +1,38 @@
|
|||||||
import { Button } from "@pswui/Button";
|
import { Button } from "@pswui/Button";
|
||||||
|
/* remove */
|
||||||
export function ButtonDemo() {
|
export interface ControlledButtonDemoProps {
|
||||||
return <Button>Button</Button>;
|
ButtonProps: {
|
||||||
|
preset?: "default" | "ghost" | "link" | "success" | "warning" | "danger";
|
||||||
|
size?: "link" | "sm" | "md" | "lg" | "icon";
|
||||||
|
border?: "none" | "solid" | "success" | "warning" | "danger";
|
||||||
|
background?:
|
||||||
|
| "default"
|
||||||
|
| "ghost"
|
||||||
|
| "success"
|
||||||
|
| "warning"
|
||||||
|
| "danger"
|
||||||
|
| "transparent";
|
||||||
|
decoration?: "none" | "link";
|
||||||
|
disabled?: boolean;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
/* end */
|
||||||
|
/* replace */
|
||||||
|
export function ButtonDemo({ ButtonProps }: ControlledButtonDemoProps) {
|
||||||
|
/* with
|
||||||
|
export function ButtonDemo() {
|
||||||
|
*/
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
preset={ButtonProps.preset}
|
||||||
|
size={ButtonProps.size}
|
||||||
|
border={ButtonProps.border}
|
||||||
|
background={ButtonProps.background}
|
||||||
|
decoration={ButtonProps.decoration}
|
||||||
|
disabled={ButtonProps.disabled}
|
||||||
|
className="asdf"
|
||||||
|
>
|
||||||
|
Button
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user