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 09:02:53 +09:00
parent f957a4b8f2
commit 59505faeb6
5 changed files with 47 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
packages/react/src/docs/components/Checkbox.mdx
View File

@ -4,6 +4,8 @@ import { Checkbox } from "@components/Checkbox";
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs"; import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story"; import { Story } from "@/components/Story";
import { LoadedCode } from "@/components/LoadedCode"; import { LoadedCode } from "@/components/LoadedCode";
import { CheckboxDemo } from "./CheckboxBlocks/Preview";
import Examples from "./CheckboxBlocks/Examples";
# Checkbox # Checkbox
A control that allows the user to toggle between checked and not checked. A control that allows the user to toggle between checked and not checked.
@ -15,26 +17,11 @@ A control that allows the user to toggle between checked and not checked.
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Label direction="horizontal"> <CheckboxDemo />
<Checkbox />
<span>Checkbox</span>
</Label>
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
```tsx <LoadedCode from={`${GITHUB}/packages/react/components/Checkbox.tsx`} />
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function CheckboxExample() {
return (
<Label direction="horizontal">
<Checkbox />
<span>Checkbox</span>
</Label>
);
}
```
</TabContent> </TabContent>
</TabProvider> </TabProvider>
@ -43,7 +30,7 @@ A control that allows the user to toggle between checked and not checked.
1. Create a new file `Checkbox.mdx` in your component folder. 1. Create a new file `Checkbox.mdx` in your component folder.
2. Copy and paste the following code into the file. 2. Copy and paste the following code into the file.
<LoadedCode from="https://raw.githubusercontent.com/p-sw/ui/main/packages/react/components/Checkbox.tsx" /> <LoadedCode from={`${GITHUB}/packages/react/components/Checkbox.tsx`} />
## Usage ## Usage
@ -74,26 +61,11 @@ import { Checkbox } from "@components/Checkbox";
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Label direction="horizontal"> <Examples.Text />
<Checkbox size="base" />
<p>Agree terms and conditions</p>
</Label>
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
```tsx <LoadedCode from={`${GITHUB}/packages/react/components/CheckboxBlocks/Examples/Text.tsx`} />
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function CheckboxExample() {
return (
<Label direction="horizontal">
<Checkbox size="base" />
<span>Agree terms and conditions</span>
</Label>
);
}
```
</TabContent> </TabContent>
</TabProvider> </TabProvider>
@ -106,26 +78,10 @@ import { Checkbox } from "@components/Checkbox";
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Label direction="horizontal"> <Examples.Disabled />
<Checkbox size="base" disabled />
<span>Agree terms and conditions</span>
</Label>
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
```tsx <LoadedCode from={`${GITHUB}/packages/react/components/CheckboxBlocks/Examples/Disabled.tsx`} />
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function CheckboxExample() {
return (
<Label direction="horizontal">
<Checkbox size="base" disabled />
<span>Agree terms and conditions</span>
</Label>
);
}
```
</TabContent> </TabContent>
</TabProvider> </TabProvider>

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

@ -0,0 +1,11 @@
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function Disabled() {
return (
<Label direction="horizontal">
<Checkbox size="base" disabled />
<span>Agree terms and conditions</span>
</Label>
);
}

11
packages/react/src/docs/components/CheckboxBlocks/Examples/Text.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function Text() {
return (
<Label direction="horizontal">
<Checkbox size="base" />
<span>Agree terms and conditions</span>
</Label>
);
}

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

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

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

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