Skip to content

Commit 350adf5

Browse files
nelsonlaidevnelsonlaidev
committed
chore: add more examples
1 parent cadf27a commit 350adf5

File tree

20 files changed

+426
-0
lines changed

20 files changed

+426
-0
lines changed

‎packages/react/src/components/image-cropper/examples/circle.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { ImageCropper } from '@ark-ui/react/image-cropper'
2+
3+
export const Circle = () => {
4+
return (
5+
<ImageCropper.Root cropShape="circle">
6+
<ImageCropper.Viewport>
7+
<ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
8+
<ImageCropper.Selection>
9+
{ImageCropper.handles.map((position) => (
10+
<ImageCropper.Handle key={position} position={position}>
11+
<div />
12+
</ImageCropper.Handle>
13+
))}
14+
</ImageCropper.Selection>
15+
</ImageCropper.Viewport>
16+
</ImageCropper.Root>
17+
)
18+
}

‎packages/react/src/components/image-cropper/examples/controlled.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { ImageCropper } from '@ark-ui/react/image-cropper'
2+
import { useState } from 'react'
3+
4+
export const Controlled = () => {
5+
const [zoom, setZoom] = useState(1)
6+
7+
return (
8+
<>
9+
<button onClick={() => setZoom(zoom + 0.1)}>Zoom In</button>
10+
<button onClick={() => setZoom(zoom - 0.1)}>Zoom Out</button>
11+
12+
<ImageCropper.Root zoom={zoom} onZoomChange={(e) => setZoom(e.zoom)}>
13+
<ImageCropper.Viewport>
14+
<ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
15+
<ImageCropper.Selection>
16+
{ImageCropper.handles.map((position) => (
17+
<ImageCropper.Handle key={position} position={position}>
18+
<div />
19+
</ImageCropper.Handle>
20+
))}
21+
<ImageCropper.Grid axis="horizontal" />
22+
<ImageCropper.Grid axis="vertical" />
23+
</ImageCropper.Selection>
24+
</ImageCropper.Viewport>
25+
</ImageCropper.Root>
26+
</>
27+
)
28+
}

‎packages/react/src/components/image-cropper/examples/fixed.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ImageCropper } from '@ark-ui/react/image-cropper'
2+
3+
export const Fixed = () => {
4+
return (
5+
<ImageCropper.Root fixedCropArea>
6+
<ImageCropper.Viewport>
7+
<ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
8+
<ImageCropper.Selection>
9+
<ImageCropper.Grid axis="horizontal" />
10+
<ImageCropper.Grid axis="vertical" />
11+
</ImageCropper.Selection>
12+
</ImageCropper.Viewport>
13+
</ImageCropper.Root>
14+
)
15+
}

‎packages/react/src/components/image-cropper/examples/root-provider.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { ImageCropper, useImageCropper } from '@ark-ui/react/image-cropper'
2+
3+
export const RootProvider = () => {
4+
const imageCropper = useImageCropper()
5+
6+
return (
7+
<>
8+
<button onClick={() => imageCropper.setZoom(imageCropper.zoom + 0.1)}>Zoom In</button>
9+
<button onClick={() => imageCropper.setZoom(imageCropper.zoom - 0.1)}>Zoom Out</button>
10+
11+
<ImageCropper.RootProvider value={imageCropper}>
12+
<ImageCropper.Viewport>
13+
<ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
14+
<ImageCropper.Selection>
15+
{ImageCropper.handles.map((position) => (
16+
<ImageCropper.Handle key={position} position={position}>
17+
<div />
18+
</ImageCropper.Handle>
19+
))}
20+
<ImageCropper.Grid axis="horizontal" />
21+
<ImageCropper.Grid axis="vertical" />
22+
</ImageCropper.Selection>
23+
</ImageCropper.Viewport>
24+
</ImageCropper.RootProvider>
25+
</>
26+
)
27+
}

‎packages/react/src/components/image-cropper/image-cropper.stories.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,7 @@ const meta: Meta = {
77
export default meta
88

99
export { Basic } from './examples/basic'
10+
export { Circle } from './examples/circle'
11+
export { Controlled } from './examples/controlled'
12+
export { Fixed } from './examples/fixed'
13+
export { RootProvider } from './examples/root-provider'

‎packages/solid/src/components/image-cropper/examples/circle.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { For } from 'solid-js'
2+
import { ImageCropper } from '@ark-ui/solid/image-cropper'
3+
4+
export const Circle = () => {
5+
return (
6+
<ImageCropper.Root cropShape="circle">
7+
<ImageCropper.Viewport>
8+
<ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
9+
<ImageCropper.Selection>
10+
<For each={ImageCropper.handles}>
11+
{(position) => (
12+
<ImageCropper.Handle position={position}>
13+
<div />
14+
</ImageCropper.Handle>
15+
)}
16+
</For>
17+
</ImageCropper.Selection>
18+
</ImageCropper.Viewport>
19+
</ImageCropper.Root>
20+
)
21+
}

‎packages/solid/src/components/image-cropper/examples/controlled.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { For, createSignal } from 'solid-js'
2+
import { ImageCropper } from '@ark-ui/solid/image-cropper'
3+
4+
export const Controlled = () => {
5+
const [zoom, setZoom] = createSignal(1)
6+
7+
return (
8+
<>
9+
<button onClick={() => setZoom(zoom() + 0.1)}>Zoom In</button>
10+
<button onClick={() => setZoom(zoom() - 0.1)}>Zoom Out</button>
11+
12+
<ImageCropper.Root zoom={zoom()} onZoomChange={(details) => setZoom(details.zoom)}>
13+
<ImageCropper.Viewport>
14+
<ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
15+
<ImageCropper.Selection>
16+
<For each={ImageCropper.handles}>
17+
{(position) => (
18+
<ImageCropper.Handle position={position}>
19+
<div />
20+
</ImageCropper.Handle>
21+
)}
22+
</For>
23+
<ImageCropper.Grid axis="horizontal" />
24+
<ImageCropper.Grid axis="vertical" />
25+
</ImageCropper.Selection>
26+
</ImageCropper.Viewport>
27+
</ImageCropper.Root>
28+
</>
29+
)
30+
}

‎packages/solid/src/components/image-cropper/examples/fixed.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ImageCropper } from '@ark-ui/solid/image-cropper'
2+
3+
export const Fixed = () => {
4+
return (
5+
<ImageCropper.Root fixedCropArea>
6+
<ImageCropper.Viewport>
7+
<ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
8+
<ImageCropper.Selection>
9+
<ImageCropper.Grid axis="horizontal" />
10+
<ImageCropper.Grid axis="vertical" />
11+
</ImageCropper.Selection>
12+
</ImageCropper.Viewport>
13+
</ImageCropper.Root>
14+
)
15+
}

‎packages/solid/src/components/image-cropper/examples/root-provider.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { For } from 'solid-js'
2+
import { ImageCropper, useImageCropper } from '@ark-ui/solid/image-cropper'
3+
4+
export const RootProvider = () => {
5+
const imageCropper = useImageCropper()
6+
7+
return (
8+
<>
9+
<button onClick={() => imageCropper().setZoom(imageCropper().zoom + 0.1)}>Zoom In</button>
10+
<button onClick={() => imageCropper().setZoom(imageCropper().zoom - 0.1)}>Zoom Out</button>
11+
12+
<ImageCropper.RootProvider value={imageCropper}>
13+
<ImageCropper.Viewport>
14+
<ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
15+
<ImageCropper.Selection>
16+
<For each={ImageCropper.handles}>
17+
{(position) => (
18+
<ImageCropper.Handle position={position}>
19+
<div />
20+
</ImageCropper.Handle>
21+
)}
22+
</For>
23+
<ImageCropper.Grid axis="horizontal" />
24+
<ImageCropper.Grid axis="vertical" />
25+
</ImageCropper.Selection>
26+
</ImageCropper.Viewport>
27+
</ImageCropper.RootProvider>
28+
</>
29+
)
30+
}

‎packages/solid/src/components/image-cropper/image-cropper.stories.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,7 @@ const meta: Meta = {
77
export default meta
88

99
export { Basic } from './examples/basic'
10+
export { Circle } from './examples/circle'
11+
export { Controlled } from './examples/controlled'
12+
export { Fixed } from './examples/fixed'
13+
export { RootProvider } from './examples/root-provider'

0 commit comments

Comments
 (0)