Skip to content

Commit 12b496b

Browse files
sadmann7sadmann7
committed
feat: update sortable examples
1 parent 2014a84 commit 12b496b

11 files changed

+213
-56
lines changed

‎docs/__registry__/index.tsx

+19-3
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,7 @@ export const Index: Record<string, any> = {
329329
name: "sortable-demo",
330330
description: "",
331331
type: "registry:example",
332-
registryDependencies: ["button"],
332+
registryDependencies: ["skeleton"],
333333
files: [{
334334
path: "registry/default/example/sortable-demo.tsx",
335335
type: "registry:example",
@@ -341,11 +341,27 @@ export const Index: Record<string, any> = {
341341
subcategory: "",
342342
chunks: []
343343
},
344+
"sortable-dynamic-overlay-demo": {
345+
name: "sortable-dynamic-overlay-demo",
346+
description: "",
347+
type: "registry:example",
348+
registryDependencies: undefined,
349+
files: [{
350+
path: "registry/default/example/sortable-dynamic-overlay-demo.tsx",
351+
type: "registry:example",
352+
target: ""
353+
}],
354+
component: React.lazy(() => import("@/registry/default/example/sortable-dynamic-overlay-demo.tsx")),
355+
source: "",
356+
category: "",
357+
subcategory: "",
358+
chunks: []
359+
},
344360
"sortable-primitive-values-demo": {
345361
name: "sortable-primitive-values-demo",
346362
description: "",
347363
type: "registry:example",
348-
registryDependencies: ["button"],
364+
registryDependencies: undefined,
349365
files: [{
350366
path: "registry/default/example/sortable-primitive-values-demo.tsx",
351367
type: "registry:example",
@@ -361,7 +377,7 @@ export const Index: Record<string, any> = {
361377
name: "sortable-handle-demo",
362378
description: "",
363379
type: "registry:example",
364-
registryDependencies: ["button","table"],
380+
registryDependencies: ["button","skeleton","table"],
365381
files: [{
366382
path: "registry/default/example/sortable-handle-demo.tsx",
367383
type: "registry:example",

‎docs/components/component-tabs.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ interface ComponentTabsProps {
1111
name: string;
1212
children: React.ReactNode;
1313
preventPreviewFocus?: boolean;
14+
scalePreview?: boolean;
1415
}
1516

1617
export function ComponentTabs({
1718
name,
1819
children,
1920
preventPreviewFocus,
21+
scalePreview,
2022
}: ComponentTabsProps) {
2123
const [config] = useConfig();
2224
const index = styles.findIndex((style) => style.name === config.style);
@@ -52,7 +54,12 @@ export function ComponentTabs({
5254
})}
5355
tabIndex={preventPreviewFocus ? -1 : 0}
5456
>
55-
<div className="flex h-[400px] w-full items-center justify-center p-10">
57+
<div
58+
className={cn(
59+
"flex h-[400px] w-full items-center justify-center",
60+
scalePreview ? "sm:p-10" : "p-10",
61+
)}
62+
>
5663
{Preview}
5764
</div>
5865
</Tab>

‎docs/content/docs/components/sortable.mdx

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ links:
66
doc: https://docs.dndkit.com/presets/sortable
77
---
88

9-
<ComponentTabs name="sortable-demo" />
9+
<ComponentTabs name="sortable-demo" scalePreview />
1010

1111
## Installation
1212

@@ -62,6 +62,12 @@ import * as Sortable from "@/components/ui/sortable";
6262

6363
## Examples
6464

65+
### With Dynamic Overlay
66+
67+
Display a dynamic overlay when an item is being dragged.
68+
69+
<ComponentTabs name="sortable-dynamic-overlay-demo" />
70+
6571
### With Handle
6672

6773
Use `ItemHandle` as a drag handle for sortable items.

‎docs/public/r/styles/default/sortable-demo.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
"@dnd-kit/utilities"
99
],
1010
"registryDependencies": [
11-
"button"
11+
"skeleton"
1212
],
1313
"files": [
1414
{
1515
"path": "example/sortable-demo.tsx",
16-
"content": "\"use client\";\n\nimport * as Sortable from \"@/registry/default/ui/sortable\";\nimport * as React from \"react\";\n\ninterface Trick {\n id: string;\n title: string;\n points: number;\n}\n\nexport default function SortableDemo() {\n const [tricks, setTricks] = React.useState<Trick[]>([\n { id: \"1\", title: \"The 900\", points: 9000 },\n { id: \"2\", title: \"Indy Backflip\", points: 4000 },\n { id: \"3\", title: \"Pizza Guy\", points: 1500 },\n { id: \"4\", title: \"Rocket Air\", points: 5000 },\n { id: \"5\", title: \"Kickflip Backflip\", points: 3000 },\n { id: \"6\", title: \"FS 540\", points: 4500 },\n ]);\n\n return (\n <Sortable.Root\n value={tricks}\n onValueChange={setTricks}\n getItemValue={(item) => item.id}\n orientation=\"mixed\"\n >\n <Sortable.Content className=\"grid grid-cols-3 gap-2.5\">\n {tricks.map((trick) => (\n <TrickCard key={trick.id} trick={trick} asHandle />\n ))}\n </Sortable.Content>\n <Sortable.Overlay>\n {(activeItem) => {\n const trick = tricks.find((trick) => trick.id === activeItem.value);\n\n if (!trick) return null;\n\n return <TrickCard trick={trick} />;\n }}\n </Sortable.Overlay>\n </Sortable.Root>\n );\n}\n\ninterface TrickCardProps\n extends Omit<React.ComponentPropsWithoutRef<typeof Sortable.Item>, \"value\"> {\n trick: Trick;\n}\n\nfunction TrickCard({ trick, ...props }: TrickCardProps) {\n return (\n <Sortable.Item key={trick.id} value={trick.id} asChild {...props}>\n <div className=\"flex size-full flex-col items-center justify-center rounded-md border bg-zinc-100 p-6 text-center text-foreground shadow dark:bg-zinc-900\">\n <div className=\"font-medium text-sm leading-tight sm:text-base\">\n {trick.title}\n </div>\n <div className=\"hidden text-muted-foreground text-sm sm:block\">\n {trick.points} points\n </div>\n </div>\n </Sortable.Item>\n );\n}\n",
16+
"content": "\"use client\";\n\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport * as Sortable from \"@/registry/default/ui/sortable\";\nimport * as React from \"react\";\n\nexport default function SortableDemo() {\n const [tricks, setTricks] = React.useState([\n {\n id: \"1\",\n title: \"The 900\",\n description: \"The 900 is a trick where you spin 900 degrees in the air.\",\n },\n {\n id: \"2\",\n title: \"Indy Backflip\",\n description:\n \"The Indy Backflip is a trick where you backflip in the air.\",\n },\n {\n id: \"3\",\n title: \"Pizza Guy\",\n description: \"The Pizza Guy is a trick where you flip the pizza guy.\",\n },\n {\n id: \"4\",\n title: \"Rocket Air\",\n description: \"The Rocket Air is a trick where you rocket air.\",\n },\n {\n id: \"5\",\n title: \"Kickflip Backflip\",\n description:\n \"The Kickflip Backflip is a trick where you kickflip backflip.\",\n },\n {\n id: \"6\",\n title: \"FS 540\",\n description: \"The FS 540 is a trick where you fs 540.\",\n },\n ]);\n\n return (\n <Sortable.Root\n value={tricks}\n onValueChange={setTricks}\n getItemValue={(item) => item.id}\n orientation=\"mixed\"\n >\n <Sortable.Content className=\"grid auto-rows-fr grid-cols-3 gap-2.5\">\n {tricks.map((trick) => (\n <Sortable.Item key={trick.id} value={trick.id} asChild asHandle>\n <div className=\"flex flex-col gap-1 rounded-md border bg-zinc-100 p-4 text-foreground shadow dark:bg-zinc-900\">\n <div className=\"font-medium text-sm leading-tight sm:text-base\">\n {trick.title}\n </div>\n <span className=\"line-clamp-2 hidden text-muted-foreground text-sm sm:inline-block\">\n {trick.description}\n </span>\n </div>\n </Sortable.Item>\n ))}\n </Sortable.Content>\n <Sortable.Overlay>\n <Skeleton className=\"size-full\" />\n </Sortable.Overlay>\n </Sortable.Root>\n );\n}\n",
1717
"type": "registry:example",
1818
"target": ""
1919
}

‎docs/public/r/styles/default/sortable-dynamic-overlay-demo.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "sortable-dynamic-overlay-demo",
3+
"type": "registry:example",
4+
"dependencies": [
5+
"@dnd-kit/core",
6+
"@dnd-kit/modifiers",
7+
"@dnd-kit/sortable",
8+
"@dnd-kit/utilities",
9+
"lucide-react"
10+
],
11+
"files": [
12+
{
13+
"path": "example/sortable-dynamic-overlay-demo.tsx",
14+
"content": "\"use client\";\n\nimport * as Sortable from \"@/registry/default/ui/sortable\";\nimport * as React from \"react\";\n\ninterface Trick {\n id: string;\n title: string;\n description: string;\n}\n\nexport default function SortableDynamicOverlayDemo() {\n const [tricks, setTricks] = React.useState<Trick[]>([\n {\n id: \"1\",\n title: \"The 900\",\n description: \"The 900 is a trick where you spin 900 degrees in the air.\",\n },\n {\n id: \"2\",\n title: \"Indy Backflip\",\n description:\n \"The Indy Backflip is a trick where you backflip in the air.\",\n },\n {\n id: \"3\",\n title: \"Pizza Guy\",\n description: \"The Pizza Guy is a trick where you flip the pizza guy.\",\n },\n {\n id: \"4\",\n title: \"Rocket Air\",\n description: \"The Rocket Air is a trick where you rocket air.\",\n },\n {\n id: \"5\",\n title: \"Kickflip Backflip\",\n description:\n \"The Kickflip Backflip is a trick where you kickflip backflip.\",\n },\n {\n id: \"6\",\n title: \"FS 540\",\n description: \"The FS 540 is a trick where you fs 540.\",\n },\n ]);\n\n return (\n <Sortable.Root\n value={tricks}\n onValueChange={setTricks}\n getItemValue={(item) => item.id}\n orientation=\"mixed\"\n >\n <Sortable.Content className=\"grid auto-rows-fr grid-cols-3 gap-2.5\">\n {tricks.map((trick) => (\n <TrickCard key={trick.id} trick={trick} asHandle />\n ))}\n </Sortable.Content>\n <Sortable.Overlay>\n {(activeItem) => {\n const trick = tricks.find((trick) => trick.id === activeItem.value);\n\n if (!trick) return null;\n\n return <TrickCard trick={trick} />;\n }}\n </Sortable.Overlay>\n </Sortable.Root>\n );\n}\n\ninterface TrickCardProps\n extends Omit<React.ComponentPropsWithoutRef<typeof Sortable.Item>, \"value\"> {\n trick: Trick;\n}\n\nfunction TrickCard({ trick, ...props }: TrickCardProps) {\n return (\n <Sortable.Item key={trick.id} value={trick.id} asChild {...props}>\n <div className=\"flex flex-col gap-1 rounded-md border bg-zinc-100 p-4 text-foreground shadow dark:bg-zinc-900\">\n <div className=\"font-medium text-sm leading-tight sm:text-base\">\n {trick.title}\n </div>\n <span className=\"line-clamp-2 hidden text-muted-foreground text-sm sm:inline-block\">\n {trick.description}\n </span>\n </div>\n </Sortable.Item>\n );\n}\n",
15+
"type": "registry:example",
16+
"target": ""
17+
}
18+
]
19+
}

‎docs/public/r/styles/default/sortable-handle-demo.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
],
1111
"registryDependencies": [
1212
"button",
13+
"skeleton",
1314
"table"
1415
],
1516
"files": [

‎docs/public/r/styles/default/sortable-primitive-values-demo.json

-3
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@
88
"@dnd-kit/utilities",
99
"lucide-react"
1010
],
11-
"registryDependencies": [
12-
"button"
13-
],
1411
"files": [
1512
{
1613
"path": "example/sortable-primitive-values-demo.tsx",

0 commit comments

Comments
 (0)