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

feat: use separated file for examples

Browse Source
This commit is contained in:
p-sw 2024-06-02 08:40:43 +09:00
parent 3aacc3ff83
commit 425f1325c9
9 changed files with 69 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
packages/react/src/docs/components/Button.mdx
View File

@ -1,7 +1,9 @@
import { Button } from "@components/Button";
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode } from "@/components/LoadedCode";
import { LoadedCode, GITHUB } 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.
@ -13,17 +15,11 @@ Displays a button or a component that looks like a button.
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button>Button</Button>
<ButtonDemo />
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button>Button</Button>
}
```
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Preview.tsx`} />
</TabContent>
</TabProvider>
@ -32,7 +28,7 @@ Displays a button or a component that looks like a button.
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" />
<LoadedCode from={`${GITHUB}/packages/react/components/Button.tsx`} />
## Usage
@ -73,17 +69,11 @@ import { Button } from "@components/Button";
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button>Button</Button>
<Examples.Default />
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="default">Button</Button>
}
```
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx`} />
</TabContent>
</TabProvider>
@ -96,17 +86,11 @@ export function ButtonDemo() {
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button preset="ghost">Button</Button>
<Examples.Ghost />
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="ghost">Button</Button>
}
```
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx`} />
</TabContent>
</TabProvider>
@ -119,17 +103,11 @@ export function ButtonDemo() {
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button preset="link">Button</Button>
<Examples.Link />
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="link">Button</Button>
}
```
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx`} />
</TabContent>
</TabProvider>
@ -142,17 +120,11 @@ export function ButtonDemo() {
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button preset="success">Button</Button>
<Examples.Success />
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="success">Button</Button>
}
```
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx`} />
</TabContent>
</TabProvider>
@ -165,17 +137,11 @@ export function ButtonDemo() {
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button preset="warning">Button</Button>
<Examples.Warning />
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="warning">Button</Button>
}
```
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx`} />
</TabContent>
</TabProvider>
@ -188,16 +154,10 @@ export function ButtonDemo() {
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Button preset="danger">Button</Button>
<Examples.Danger />
</Story>
</TabContent>
<TabContent name="code">
```tsx
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button preset="danger">Button</Button>
}
```
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx`} />
</TabContent>
</TabProvider>

5
packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Danger = () => {
return <Button preset="danger">Danger</Button>;
};

5
packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Default = () => {
return <Button preset="default">Default</Button>;
};

5
packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Ghost = () => {
return <Button preset="ghost">Ghost</Button>;
};

5
packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Link = () => {
return <Button preset="link">Link</Button>;
};

5
packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Success = () => {
return <Button preset="success">Success</Button>;
};

5
packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Warning = () => {
return <Button preset="warning">Warning</Button>;
};

16
packages/react/src/docs/components/ButtonBlocks/Examples/index.ts Normal file
View File

@ -0,0 +1,16 @@
import { Danger } from "./Danger";
import { Warning } from "./Warning";
import { Success } from "./Success";
import { Link } from "./Link";
import { Ghost } from "./Ghost";
import { Default } from "./Default";
export default {
Danger,
Warning,
Success,
Link,
Ghost,
Default,
};

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

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button>Button</Button>;
}