🐛 fix: sync route navigation links (#116)

octahedroid · Sep 12, 2024 · d1d7a7a · d1d7a7a
1 parent 9b507ba
commit d1d7a7a
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 236 deletions.
diff --git a/starters/next/components/helpers/ComponentRenderer.tsx b/starters/next/components/helpers/ComponentRenderer.tsx
@@ -12,19 +12,7 @@ export function ComponentRenderer({
 }: ComponentsProps) {
   // If we are in preview mode, render the VisualEditor
   if (environment === 'preview') {
-    const ids = components.map((component) => {
-      return component.props.id
-    })
-
-    const componentMapping = components.reduce(
-      (acc, component) => {
-        acc[component.props.id] = component
-        return acc
-      },
-      {} as { [key: string]: JSX.Element }
-    )
-
-    return <VisualEditor ids={ids} componentMapping={componentMapping} />
+    return <VisualEditor components={components} />
   }
 
   // If we are not in preview mode, render the components as they are

diff --git a/starters/next/components/helpers/VisualEditor.tsx b/starters/next/components/helpers/VisualEditor.tsx
@@ -1,14 +1,8 @@
 'use client'
 
-import { useState, ReactNode } from 'react'
-import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable'
-import { DndContext, DragEndEvent } from '@dnd-kit/core'
-import { CSS } from '@dnd-kit/utilities'
-
 import type { VisualEditorComponentProps } from 'drupal-visual-editor'
 import {
   openVisualEditorComponent,
-  syncDrupalComponentOrder,
 } from 'drupal-visual-editor'
 
 interface VisualEditorComponentContainerProps
@@ -39,90 +33,26 @@ function VisualEditorComponentContainer({
   )
 }
 
-interface SortableItemProps {
-  id: string
-  children: ReactNode
-}
-
 type VisualEditorProps = {
-  ids: Array<string>
-  componentMapping: { [key: string]: JSX.Element }
+  components: Array<JSX.Element>
 }
 
-function SortableComponent({ id, children }: SortableItemProps) {
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id })
-
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  }
+export function VisualEditor({ components }: VisualEditorProps) {
 
   return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      <VisualEditorComponentContainer
-        storage="paragraph"
-        uuid={id}
-        action="edit"
-        key={id}
-      >
-        {children}
-      </VisualEditorComponentContainer>
-    </div>
-  )
-}
-
-export function VisualEditor({ ids, componentMapping }: VisualEditorProps) {
-  const [items, setItems] = useState(ids)
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event
-
-    if (!over) {
-      return
-    }
-
-    if (active.id !== over.id) {
-      setItems((items) => {
-        const oldIndex = items.indexOf(active.id.toString())
-        const newIndex = items.indexOf(over.id.toString())
-
-        const newItems = arrayMove(items, oldIndex, newIndex)
-
-        const changes = {
-          items: {
-            original: items as Array<string>,
-            updated: newItems as Array<string>,
-          },
-          active: {
-            id: active.id as string,
-            index: oldIndex,
-          },
-          over: {
-            id: over.id as string,
-            index: newIndex,
-          },
-        }
-
-        syncDrupalComponentOrder(changes)
-
-        return newItems
-      })
-    }
-  }
-
-  return (
-    <DndContext onDragEnd={handleDragEnd} id="components" key={'components'}>
-      <SortableContext items={items}>
-        {items.map((id: string) => {
-          const component = componentMapping[id]
-          return (
-            <SortableComponent key={id} id={id}>
+    <>
+      {components.map((component) => {
+        const id = component.props.id
+        return (
+        <VisualEditorComponentContainer
+              storage="paragraph"
+              uuid={id}
+              action="edit"
+              key={id}
+            >
               {component}
-            </SortableComponent>
-          )
-        })}
-      </SortableContext>
-    </DndContext>
-  )
+            </VisualEditorComponentContainer>)
+          })}
+        </>
+    )
 }
diff --git a/starters/next/package.json b/starters/next/package.json
@@ -15,8 +15,6 @@
     "format:fix": "prettier --write --ignore-path .gitignore --ignore-path .prettierignore ."
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",

diff --git a/starters/next/yarn.lock b/starters/next/yarn.lock
@@ -1125,37 +1125,6 @@
     react-confetti "^6.1.0"
     strip-ansi "^7.1.0"
 
-"@dnd-kit/accessibility@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz#1054e19be276b5f1154ced7947fc0cb5d99192e0"
-  integrity sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==
-  dependencies:
-    tslib "^2.0.0"
-
-"@dnd-kit/core@^6.1.0":
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-6.1.0.tgz#e81a3d10d9eca5d3b01cbf054171273a3fe01def"
-  integrity sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==
-  dependencies:
-    "@dnd-kit/accessibility" "^3.1.0"
-    "@dnd-kit/utilities" "^3.2.2"
-    tslib "^2.0.0"
-
-"@dnd-kit/sortable@^8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/sortable/-/sortable-8.0.0.tgz#086b7ac6723d4618a4ccb6f0227406d8a8862a96"
-  integrity sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==
-  dependencies:
-    "@dnd-kit/utilities" "^3.2.2"
-    tslib "^2.0.0"
-
-"@dnd-kit/utilities@^3.2.2":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz#5a32b6af356dc5f74d61b37d6f7129a4040ced7b"
-  integrity sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==
-  dependencies:
-    tslib "^2.0.0"
-
 "@emnapi/runtime@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.2.0.tgz#71d018546c3a91f3b51106530edbc056b9f2f2e3"

diff --git a/starters/remix/app/components/helpers/ComponentRenderer.tsx b/starters/remix/app/components/helpers/ComponentRenderer.tsx
@@ -12,19 +12,7 @@ export function ComponentRenderer({
 }: ComponentsProps) {
   // If we are in preview mode, render the VisualEditor
   if (environment === 'preview') {
-    const ids = components.map((component) => {
-      return component.props.id
-    })
-
-    const componentMapping = components.reduce(
-      (acc, component) => {
-        acc[component.props.id] = component
-        return acc
-      },
-      {} as { [key: string]: JSX.Element }
-    )
-
-    return <VisualEditor ids={ids} componentMapping={componentMapping} />
+    return <VisualEditor components={components} />
   }
 
   // If we are not in preview mode, render the components as they are

diff --git a/starters/remix/app/components/helpers/VisualEditor.tsx b/starters/remix/app/components/helpers/VisualEditor.tsx
@@ -1,12 +1,6 @@
-import { useState, ReactNode } from 'react'
-import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable'
-import { DndContext, DragEndEvent } from '@dnd-kit/core'
-import { CSS } from '@dnd-kit/utilities'
-
 import type { VisualEditorComponentProps } from 'drupal-visual-editor'
 import {
   openVisualEditorComponent,
-  syncDrupalComponentOrder,
 } from 'drupal-visual-editor'
 
 interface VisualEditorComponentContainerProps
@@ -37,90 +31,26 @@ function VisualEditorComponentContainer({
   )
 }
 
-interface SortableItemProps {
-  id: string
-  children: ReactNode
-}
-
 type VisualEditorProps = {
-  ids: Array<string>
-  componentMapping: { [key: string]: JSX.Element }
+  components: Array<JSX.Element>
 }
 
-function SortableComponent({ id, children }: SortableItemProps) {
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id })
-
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  }
+export function VisualEditor({ components }: VisualEditorProps) {
 
   return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      <VisualEditorComponentContainer
-        storage="paragraph"
-        uuid={id}
-        action="edit"
-        key={id}
-      >
-        {children}
-      </VisualEditorComponentContainer>
-    </div>
-  )
-}
-
-export function VisualEditor({ ids, componentMapping }: VisualEditorProps) {
-  const [items, setItems] = useState(ids)
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event
-
-    if (!over) {
-      return
-    }
-
-    if (active.id !== over.id) {
-      setItems((items) => {
-        const oldIndex = items.indexOf(active.id.toString())
-        const newIndex = items.indexOf(over.id.toString())
-
-        const newItems = arrayMove(items, oldIndex, newIndex)
-
-        const changes = {
-          items: {
-            original: items as Array<string>,
-            updated: newItems as Array<string>,
-          },
-          active: {
-            id: active.id as string,
-            index: oldIndex,
-          },
-          over: {
-            id: over.id as string,
-            index: newIndex,
-          },
-        }
-
-        syncDrupalComponentOrder(changes)
-
-        return newItems
-      })
-    }
-  }
-
-  return (
-    <DndContext onDragEnd={handleDragEnd} id="components" key={'components'}>
-      <SortableContext items={items}>
-        {items.map((id: string) => {
-          const component = componentMapping[id]
-          return (
-            <SortableComponent key={id} id={id}>
+    <>
+      {components.map((component) => {
+        const id = component.props.id
+        return (
+        <VisualEditorComponentContainer
+              storage="paragraph"
+              uuid={id}
+              action="edit"
+              key={id}
+            >
               {component}
-            </SortableComponent>
-          )
-        })}
-      </SortableContext>
-    </DndContext>
-  )
+            </VisualEditorComponentContainer>)
+          })}
+        </>
+    )
 }
diff --git a/starters/remix/package.json b/starters/remix/package.json
@@ -18,8 +18,6 @@
     "format:fix": "prettier --write --ignore-path .gitignore --ignore-path .prettierignore ."
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
@@ -79,7 +77,6 @@
     "tsx": "^4.7.2",
     "typescript": "^5.4.5",
     "vite": "^5.1.0",
-    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-tsconfig-paths": "^4.2.1",
     "wrangler": "^3.24.0"
   },

diff --git a/starters/remix/vite.config.ts b/starters/remix/vite.config.ts
@@ -4,7 +4,6 @@ import {
 } from '@remix-run/dev'
 import { defineConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 import { getLoadContext } from './load-context'
 
@@ -14,6 +13,5 @@ export default defineConfig({
     remixCloudflareDevProxy({ getLoadContext }),
     !isStorybook && remix(),
     tsconfigPaths(),
-    nodePolyfills({ include: ['crypto'] }),
   ],
 })