Skip to content

Commit 0770ee4

Browse files
segunadebayosegunadebayo
committed
docs: clipboard
1 parent 1710558 commit 0770ee4

File tree

14 files changed

+189
-59
lines changed

14 files changed

+189
-59
lines changed

‎packages/react/src/components/clipboard/clipboard.stories.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@ const meta: Meta = {
77
export default meta
88

99
export { Basic } from './examples/basic'
10-
export { RenderFn } from './examples/render-fn'
10+
export { Context } from './examples/context'
11+
export { Controlled } from './examples/controlled'
1112
export { RootProvider } from './examples/root-provider'

‎packages/react/src/components/clipboard/examples/render-fn.tsx renamed to ‎packages/react/src/components/clipboard/examples/context.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
import { Clipboard } from '@ark-ui/react/clipboard'
22
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
33

4-
export const RenderFn = () => {
4+
export const Context = () => {
55
return (
66
<Clipboard.Root value="https://ark-ui.com">
77
<Clipboard.Label>Copy this link</Clipboard.Label>
88
<Clipboard.Control>
9-
<Clipboard.Input />
109
<Clipboard.Trigger>
1110
<Clipboard.Context>
12-
{(clipboard) => (clipboard.copied ? <CheckIcon /> : <ClipboardCopyIcon />)}
11+
{(clipboard) => (
12+
<div>
13+
{clipboard.copied ? <CheckIcon /> : <ClipboardCopyIcon />}
14+
<span>{clipboard.copied ? 'Copied!' : 'Copy'}</span>
15+
<small>Value: {clipboard.value}</small>
16+
</div>
17+
)}
1318
</Clipboard.Context>
1419
</Clipboard.Trigger>
1520
</Clipboard.Control>

‎packages/react/src/components/clipboard/examples/controlled.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Clipboard } from '@ark-ui/react/clipboard'
2+
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
3+
import { useState } from 'react'
4+
5+
export const Controlled = () => {
6+
const [url, setUrl] = useState('https://ark-ui.com')
7+
8+
const handleUrlChange = () => {
9+
setUrl('https://chakra-ui.com')
10+
}
11+
12+
return (
13+
<Clipboard.Root value={url} onValueChange={({ value }) => setUrl(value)}>
14+
<Clipboard.Label>Copy this link</Clipboard.Label>
15+
<Clipboard.Control>
16+
<Clipboard.Input />
17+
<Clipboard.Trigger>
18+
<Clipboard.Indicator copied={<CheckIcon />}>
19+
<ClipboardCopyIcon />
20+
</Clipboard.Indicator>
21+
</Clipboard.Trigger>
22+
</Clipboard.Control>
23+
24+
<button onClick={handleUrlChange}>Change Url</button>
25+
</Clipboard.Root>
26+
)
27+
}

‎packages/solid/src/components/clipboard/clipboard.stories.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@ const meta: Meta = {
77
export default meta
88

99
export { Basic } from './examples/basic'
10-
export { RenderFn } from './examples/render-fn'
10+
export { Context } from './examples/context'
11+
export { Controlled } from './examples/controlled'
1112
export { RootProvider } from './examples/root-provider'

‎packages/solid/src/components/clipboard/examples/render-fn.tsx renamed to ‎packages/solid/src/components/clipboard/examples/context.tsx

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,25 @@ import { Clipboard } from '@ark-ui/solid/clipboard'
22
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
33
import { Show } from 'solid-js'
44

5-
export const RenderFn = () => {
5+
export const Context = () => {
66
return (
77
<Clipboard.Root value="https://ark-ui.com">
88
<Clipboard.Label>Copy this link</Clipboard.Label>
99
<Clipboard.Control>
10-
<Clipboard.Input />
1110
<Clipboard.Trigger>
1211
<Clipboard.Context>
13-
{(context) => (
14-
<Show when={context().copied} fallback={<ClipboardCopyIcon />}>
15-
<CheckIcon />
16-
</Show>
12+
{(clipboard) => (
13+
<div>
14+
<Show when={clipboard().copied} fallback={<ClipboardCopyIcon />}>
15+
<CheckIcon />
16+
</Show>
17+
<span>
18+
<Show when={clipboard().copied} fallback="Copy">
19+
Copied!
20+
</Show>
21+
</span>
22+
<small>Value: {clipboard().value}</small>
23+
</div>
1724
)}
1825
</Clipboard.Context>
1926
</Clipboard.Trigger>

‎packages/solid/src/components/clipboard/examples/controlled.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Clipboard } from '@ark-ui/solid/clipboard'
2+
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
3+
import { Show, createSignal } from 'solid-js'
4+
5+
export const Controlled = () => {
6+
const [url, setUrl] = createSignal('https://ark-ui.com')
7+
8+
const handleUrlChange = () => {
9+
setUrl('https://chakra-ui.com')
10+
}
11+
12+
return (
13+
<Clipboard.Root value={url()} onValueChange={({ value }) => setUrl(value)}>
14+
<Clipboard.Label>Copy this link</Clipboard.Label>
15+
<Clipboard.Control>
16+
<Clipboard.Input />
17+
<Clipboard.Trigger>
18+
<Clipboard.Indicator>
19+
<Show when={false} fallback={<ClipboardCopyIcon />}>
20+
<CheckIcon />
21+
</Show>
22+
</Clipboard.Indicator>
23+
</Clipboard.Trigger>
24+
</Clipboard.Control>
25+
26+
<button onClick={handleUrlChange}>Change Url</button>
27+
</Clipboard.Root>
28+
)
29+
}

‎packages/svelte/src/lib/components/clipboard/clipboard.stories.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Meta } from '@storybook/svelte'
22
import BasicExample from './examples/basic.svelte'
3-
import RenderPropExample from './examples/render-prop.svelte'
3+
import ContextExample from './examples/context.svelte'
4+
import ControlledExample from './examples/controlled.svelte'
45
import RootProviderExample from './examples/root-provider.svelte'
56

67
const meta: Meta = {
@@ -15,9 +16,15 @@ export const Basic = {
1516
}),
1617
}
1718

18-
export const RenderProp = {
19+
export const Context = {
1920
render: () => ({
20-
Component: RenderPropExample,
21+
Component: ContextExample,
22+
}),
23+
}
24+
25+
export const Controlled = {
26+
render: () => ({
27+
Component: ControlledExample,
2128
}),
2229
}
2330

‎packages/svelte/src/lib/components/clipboard/examples/context.svelte

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts">
2+
import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
3+
import { Clipboard } from '@ark-ui/svelte/clipboard'
4+
</script>
5+
6+
<Clipboard.Root value="https://ark-ui.com">
7+
<Clipboard.Label>Copy this link</Clipboard.Label>
8+
<Clipboard.Control>
9+
<Clipboard.Trigger>
10+
<Clipboard.Context>
11+
{#snippet render(clipboard)}
12+
<div>
13+
{#if clipboard().copied}
14+
<CheckIcon />
15+
{:else}
16+
<ClipboardCopyIcon />
17+
{/if}
18+
<span>
19+
{#if clipboard().copied}
20+
Copied!
21+
{:else}
22+
Copy
23+
{/if}
24+
</span>
25+
<small>Value: {clipboard().value}</small>
26+
</div>
27+
{/snippet}
28+
</Clipboard.Context>
29+
</Clipboard.Trigger>
30+
</Clipboard.Control>
31+
</Clipboard.Root>

‎packages/svelte/src/lib/components/clipboard/examples/controlled.svelte

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
3+
import { Clipboard } from '@ark-ui/svelte/clipboard'
4+
5+
let url = $state('https://ark-ui.com')
6+
7+
const handleUrlChange = () => {
8+
url = 'https://chakra-ui.com'
9+
}
10+
</script>
11+
12+
<Clipboard.Root bind:value={url}>
13+
<Clipboard.Label>Copy this link</Clipboard.Label>
14+
<Clipboard.Control>
15+
<Clipboard.Input />
16+
<Clipboard.Trigger>
17+
<Clipboard.Indicator>
18+
<ClipboardCopyIcon />
19+
{#snippet copied()}
20+
<CheckIcon />
21+
{/snippet}
22+
</Clipboard.Indicator>
23+
</Clipboard.Trigger>
24+
</Clipboard.Control>
25+
26+
<button onclick={handleUrlChange}>Change Url</button>
27+
</Clipboard.Root>

‎packages/svelte/src/lib/components/clipboard/examples/render-prop.svelte

Lines changed: 0 additions & 22 deletions
This file was deleted.

0 commit comments

Comments
 (0)