diff --git a/package-lock.json b/package-lock.json index ad6b0be0..754a248a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "@fold-dev/docs", - "version": "24.4.20.0", + "version": "24.5.5.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@fold-dev/docs", - "version": "24.4.20.0", + "version": "24.5.5.0", "license": "ISC", "dependencies": { - "@fold-dev/core": "^0.9.0", - "@fold-dev/design": "^0.9.0", + "@fold-dev/core": "^0.10.0", + "@fold-dev/design": "^0.10.0", "@heroicons/react": "^2.0.18", "@mdx-js/loader": "^2.3.0", "@mdx-js/react": "^2.3.0", @@ -54,9 +54,9 @@ } }, "node_modules/@fold-dev/core": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@fold-dev/core/-/core-0.9.0.tgz", - "integrity": "sha512-sPyfVNQ67st64gHPoV91Y4r03lnV2Z1xQyQKrSDdZfmx8ZidmTi3bOXkUVuavaiyt4QtrO2pliSwLLm/+QwYUw==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@fold-dev/core/-/core-0.10.0.tgz", + "integrity": "sha512-qohWdgzTUBRkuf81rzgNFYDIjAg63P+HxIwulNF9FxPXkp515qPRe1uVMaJufAkkPAgsimx6T8lzCxAcLP9zGg==", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" @@ -70,9 +70,9 @@ } }, "node_modules/@fold-dev/design": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@fold-dev/design/-/design-0.9.0.tgz", - "integrity": "sha512-FkGSN+E8s1LD1yALS/U8K7JhF7P6jxXhC95Nh0GwMTTkpu2Rv7HrsEmEI/NujP0uVPOfyLSw8PjX+v0mngZ6lQ==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@fold-dev/design/-/design-0.10.0.tgz", + "integrity": "sha512-rMKJfSPE9wTzPb37tgXVJLlYuY9gb8AGDrYOfdgPNLFwBQqORuJXZOX++T0yUC/4OP8cJGMZ1wD7rwAR1xOqlQ==", "dependencies": { "chroma-js": "^2.4.2" }, @@ -8447,18 +8447,18 @@ } }, "@fold-dev/core": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@fold-dev/core/-/core-0.9.0.tgz", - "integrity": "sha512-sPyfVNQ67st64gHPoV91Y4r03lnV2Z1xQyQKrSDdZfmx8ZidmTi3bOXkUVuavaiyt4QtrO2pliSwLLm/+QwYUw==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@fold-dev/core/-/core-0.10.0.tgz", + "integrity": "sha512-qohWdgzTUBRkuf81rzgNFYDIjAg63P+HxIwulNF9FxPXkp515qPRe1uVMaJufAkkPAgsimx6T8lzCxAcLP9zGg==", "requires": { "react": "^18.2.0", "react-dom": "^18.2.0" } }, "@fold-dev/design": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@fold-dev/design/-/design-0.9.0.tgz", - "integrity": "sha512-FkGSN+E8s1LD1yALS/U8K7JhF7P6jxXhC95Nh0GwMTTkpu2Rv7HrsEmEI/NujP0uVPOfyLSw8PjX+v0mngZ6lQ==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@fold-dev/design/-/design-0.10.0.tgz", + "integrity": "sha512-rMKJfSPE9wTzPb37tgXVJLlYuY9gb8AGDrYOfdgPNLFwBQqORuJXZOX++T0yUC/4OP8cJGMZ1wD7rwAR1xOqlQ==", "requires": { "chroma-js": "^2.4.2" } diff --git a/package.json b/package.json index 9da3de27..eb24bd7f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fold-dev/docs", - "version": "24.4.20.0", + "version": "24.5.5.0", "description": "UI components for product teams.", "scripts": { "prepare": "husky install", @@ -11,8 +11,8 @@ "prettier": "prettier --write 'src/**/*.{ts,tsx}' --print-width 120" }, "dependencies": { - "@fold-dev/core": "^0.9.0", - "@fold-dev/design": "^0.9.0", + "@fold-dev/core": "^0.10.0", + "@fold-dev/design": "^0.10.0", "@heroicons/react": "^2.0.18", "@mdx-js/loader": "^2.3.0", "@mdx-js/react": "^2.3.0", diff --git a/src/layouts/docs.layout.tsx b/src/layouts/docs.layout.tsx index 1778f02c..90429048 100644 --- a/src/layouts/docs.layout.tsx +++ b/src/layouts/docs.layout.tsx @@ -628,7 +628,7 @@ export default function DocsLayout(props: any) { color={Token.ColorNeonpink400} subtle fontWeight={800}> - v0.9.0 + v0.10.0 ( ✅ Pick up a lifetime supply of laughter at the comedy club. - ✅ Purchase a left-handed screwdriver and a bucket of steam at the hardware store (not focusable). + ❌ Purchase a left-handed screwdriver and a bucket of steam at the hardware store (not focusable). ✅ Head to the time-traveling bookstore to find a rare edition of "Wizards and Wyrms: A @@ -335,7 +338,7 @@ export const Variants = () => ( ✅ Get a selfie with Bigfoot in the deep woods. - ✅ GVisit the enchanted forest to exchange potions with the woodland creatures. + ✅ Go visit the enchanted forest to exchange potions with the woodland creatures. @@ -365,7 +368,7 @@ export const Variants = () => ( - + ```tsx export const Variants = () => ( @@ -437,7 +440,7 @@ export const Variants = () => ( bgToken="surface-strong" width="100%" data-nofocus={true}> - ✅ Purchase a left-handed screwdriver and a bucket of steam at the hardware store (not focusable). + ❌ Purchase a left-handed screwdriver and a bucket of steam at the hardware store (not focusable). ( p={10} bgToken="surface-strong" width="100%"> - ✅ GVisit the enchanted forest to exchange potions with the woodland creatures. + ✅ Go visit the enchanted forest to exchange potions with the woodland creatures. @@ -610,7 +613,7 @@ export const TargetVariants = () => ( ✅ Get a selfie with Bigfoot in the deep woods. - ✅ GVisit the enchanted forest to exchange potions with the woodland creatures. + ✅ Go visit the enchanted forest to exchange potions with the woodland creatures. @@ -641,7 +644,7 @@ export const TargetVariants = () => ( - + ```tsx export const TargetVariants = () => ( @@ -795,7 +798,7 @@ export const TargetVariants = () => ( p={10} bgToken="surface-strong" width="100%"> - ✅ GVisit the enchanted forest to exchange potions with the woodland creatures. + ✅ Go visit the enchanted forest to exchange potions with the woodland creatures. @@ -896,7 +899,7 @@ export const BasicKanban = () => ( ✅ Get a selfie with Bigfoot in the deep woods. - ✅ GVisit the enchanted forest to exchange potions with the woodland creatures. + ✅ Go visit the enchanted forest to exchange potions with the woodland creatures. @@ -925,7 +928,7 @@ export const BasicKanban = () => ( - + ```tsx export const BasicKanban = () => ( @@ -1029,7 +1032,7 @@ export const BasicKanban = () => ( p={10} bgToken="surface-strong" width="100%"> - ✅ GVisit the enchanted forest to exchange potions with the woodland creatures. + ✅ Go visit the enchanted forest to exchange potions with the woodland creatures. @@ -1140,6 +1143,147 @@ export const SavingAfterDrop = () => { ) } ``` +### Custom Ghost Element + +export const CustomGhostElement = () => { + const { setCustomGhostElement } = useDrag(); + const [items, setItems] = useState([ + { id: 'id1', text: 'Swing by the intergalactic post office to mail a package to Mars.' }, + { id: 'id2', text: "Drop off the dragon's dry cleaning at the fireproof laundromat." }, + { id: 'id3', text: 'Fetch a special blend of star-dust coffee beans from the celestial coffee shop.' }, + { id: 'id4', text: 'Deliver a message to the mermaids in the underwater kingdom.' }, + { id: 'id5', text: 'Break into the secret underground hotel.' }, + { id: 'id6', text: 'Clean up after my pet Pheonix.' }, + ]); + const handleDragOnDrop = ({ detail: { target, origin } }) => { + if (origin.group == 'custom-ghost-element') { + setItems(moveElementInArray(items, origin, target)); + } + }; + useDragEvent('ondrop', handleDragOnDrop); + return ( + Drag Area + + {items.map((item, index) => ( { + console.log('1'); + setCustomGhostElement(renderToString(
+
+ Dragging {items[index].text.toLowerCase().substring(0, 10)} ... +
+
)); + }}> + {item.text} (index #{index}) + ))} + + Drag Element Area + + {items.map((item, index) => ( { + setCustomGhostElement(renderToString(
+
+ Dragging {items[index].text.toLowerCase().substring(0, 10)} ... +
+
)); + }}> + + {item.text} (index #{index}) + + ))} + + ); +}; + +
+ +
+ + + +```tsx +export const CustomGhostElement = () => { + const { setCustomGhostElement } = useDrag() + const [items, setItems] = useState([ + { id: 'id1', text: 'Swing by the intergalactic post office to mail a package to Mars.' }, + { id: 'id2', text: "Drop off the dragon's dry cleaning at the fireproof laundromat." }, + { id: 'id3', text: 'Fetch a special blend of star-dust coffee beans from the celestial coffee shop.' }, + { id: 'id4', text: 'Deliver a message to the mermaids in the underwater kingdom.' }, + { id: 'id5', text: 'Break into the secret underground hotel.' }, + { id: 'id6', text: 'Clean up after my pet Pheonix.' }, + ]) + + const handleDragOnDrop = ({ detail: { target, origin } }) => { + if (origin.group == 'custom-ghost-element') { + setItems(moveElementInArray(items, origin, target)) + } + } + + useDragEvent('ondrop', handleDragOnDrop) + + return ( + + Drag Area + + {items.map((item, index) => ( + { + console.log('1') + setCustomGhostElement(renderToString( +
+
+ Dragging {items[index].text.toLowerCase().substring(0, 10)} ... +
+
+ )) + }}> + {item.text} (index #{index}) + + ))} + + Drag Element Area + + {items.map((item, index) => ( + { + setCustomGhostElement(renderToString( +
+
+ Dragging {items[index].text.toLowerCase().substring(0, 10)} ... +
+
+ )) + }}> + + {item.text} (index #{index}) + + + ))} + + + ) +} +``` ### Drag Element Target Variants > The `` & `` components offer a more granular control over draggable items, instead of `` that wraps each child in a `` automatically. @@ -1203,7 +1347,7 @@ export const DragElementTargetVariants = () => ( - ✅ GVisit the enchanted forest to exchange potions with the woodland creatures. + ✅ Go visit the enchanted forest to exchange potions with the woodland creatures. @@ -1298,7 +1442,7 @@ export const DragElementTargetVariants = () => ( - ✅ GVisit the enchanted forest to exchange potions with the woodland creatures. + ✅ Go visit the enchanted forest to exchange potions with the woodland creatures. @@ -1311,7 +1455,7 @@ export const DragElementTargetVariants = () => ( - + ```tsx export const DragElementTargetVariants = () => ( @@ -1414,7 +1558,7 @@ export const DragElementTargetVariants = () => ( p={10} bgToken="surface-strong" width="100%"> - ✅ GVisit the enchanted forest to exchange potions with the woodland creatures. + ✅ Go visit the enchanted forest to exchange potions with the woodland creatures. @@ -1569,7 +1713,7 @@ export const DragElementTargetVariants = () => ( p={10} bgToken="surface-strong" width="100%"> - ✅ GVisit the enchanted forest to exchange potions with the woodland creatures. + ✅ Go visit the enchanted forest to exchange potions with the woodland creatures.