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 { Story } from "@/components/Story";
|
||||
import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } 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.
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<ButtonDemo />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_COMP_PREVIEW("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={GITHUB_COMP("Button")} />
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Button } from "@components/Button";
|
||||
```
|
||||
|
||||
```html
|
||||
<Button>Button</Button>
|
||||
```
|
||||
|
||||
## 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
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Default />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Default")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Ghost
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Ghost />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Ghost")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Link
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Link />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Link")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Success
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Success />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Success")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Warning
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Warning />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Warning")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Danger
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Danger />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Danger")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
|
||||
import { Story } from "@/components/Story";
|
||||
import { LoadedCode, GITHUB_COMP, GITHUB_STORY } from "@/components/LoadedCode";
|
||||
import Examples from "./ButtonBlocks/Examples";
|
||||
import ButtonPlayground from "./ButtonBlocks/Playground";
|
||||
|
||||
# Button
|
||||
|
||||
Displays a button or a component that looks like a button.
|
||||
|
||||
## Playground
|
||||
|
||||
<ButtonPlayground />
|
||||
|
||||
## Installation
|
||||
|
||||
1. Create a new file `Button.tsx` in your component folder.
|
||||
2. Copy and paste the following code into the file.
|
||||
|
||||
<LoadedCode from={GITHUB_COMP("Button")} />
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Button } from "@components/Button";
|
||||
```
|
||||
|
||||
```html
|
||||
<button>Button</button>
|
||||
```
|
||||
|
||||
## 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
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Default />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Default")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Ghost
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Ghost />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Ghost")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Link
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Link />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Link")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Success
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Success />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Success")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Warning
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.Warning />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Button", "Warning")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Danger
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</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";
|
||||
|
||||
export function ButtonDemo() {
|
||||
return <Button>Button</Button>;
|
||||
/* remove */
|
||||
export interface ControlledButtonDemoProps {
|
||||
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