From 1beb09a8b49b92b85847bbd2dbb5826f76415bfd Mon Sep 17 00:00:00 2001
From: mmelko <mmelko@redhat.com>
Date: Mon, 20 Jan 2025 21:54:22 +0100
Subject: [PATCH 1/5] fix(Datamapper-styles): fix the PF tokens and tweak DnD
 styling

---
 .../ui/src/components/Document/Document.scss  |  5 +++--
 .../components/Document/NodeContainer.scss    | 22 +++++++++++--------
 .../src/components/Document/NodeContainer.tsx |  4 ++--
 .../providers/datamapper-dnd.provider.scss    | 17 ++++++++++++++
 .../src/providers/datamapper-dnd.provider.tsx |  5 ++++-
 5 files changed, 39 insertions(+), 14 deletions(-)
 create mode 100644 packages/ui/src/providers/datamapper-dnd.provider.scss

diff --git a/packages/ui/src/components/Document/Document.scss b/packages/ui/src/components/Document/Document.scss
index ad6b39ba1..8538e1270 100644
--- a/packages/ui/src/components/Document/Document.scss
+++ b/packages/ui/src/components/Document/Document.scss
@@ -22,9 +22,10 @@
 
   &__header,
   &__children {
-    border-bottom: 1px solid var(--pf-v6-global--palette--black-300);
-    border-left: 1px solid var(--pf-v6-global--palette--black-300);
+    border-bottom: 1px solid var(--pf-t--global--color--disabled--100);
+    border-left: 1px solid var(--pf-t--global--color--disabled--100);
     padding-left: var(--pf-t--global--spacer--md);
+    border-bottom-left-radius: var(--pf-v6-c-panel--BorderRadius);
   }
 
   &__children {
diff --git a/packages/ui/src/components/Document/NodeContainer.scss b/packages/ui/src/components/Document/NodeContainer.scss
index 7b43f458b..d41cc7f3b 100644
--- a/packages/ui/src/components/Document/NodeContainer.scss
+++ b/packages/ui/src/components/Document/NodeContainer.scss
@@ -1,20 +1,24 @@
 @use '../../styles/dnd';
 
 .droppable-container {
-  color: var(--pf-v6-global--primary-color--200);
-  border-width: thin;
-  border-style: dashed;
-  border-color: var(--pf-v6-global--primary-color--200);
-  background-color: var(--pf-v6-global--palette--blue-50);
+  color: var(--pf-t--global--text--color--regular);
+  border-width: var(--pf-v6-c-draggable--m-dragging--after--BorderWidth);
+  border-style: solid;
+  border-color: var(--pf-v6-c-droppable--m-dragging--after--BorderColor);
+  background-color: var(--pf-v6-c-droppable-m-dragging--BackgroundColor);
+  border-radius: var(--pf-v6-c-droppable--m-dragging--after--BorderRadius);
+  box-sizing: border-box;
 }
 
 .draggable-container {
   font-weight: bold;
-  color: var(--pf-v6-global--primary-color--100);
-  border-width: thin;
+  color: var(--pf-t--global--icon--color--brand--default);
   border-style: solid;
-  border-color: var(--pf-v6-global--primary-color--200);
-  background-color: var(--pf-v6-global--palette--black-200);
+  border-width: var(--pf-v6-c-draggable--m-dragging--after--BorderWidth);
+  border-color: var(--pf-v6-c-draggable--m-dragging--after--BorderColor);
+  background-color: var(--pf-v6-c-draggable--m-dragging--BackgroundColor);
+  border-radius: var(--pf-v6-c-draggable--m-dragging--after--BorderRadius);
+  box-sizing: border-box;
 
   @include dnd.cursor-grab;
 }
diff --git a/packages/ui/src/components/Document/NodeContainer.tsx b/packages/ui/src/components/Document/NodeContainer.tsx
index 2ebed9fdd..c46c18000 100644
--- a/packages/ui/src/components/Document/NodeContainer.tsx
+++ b/packages/ui/src/components/Document/NodeContainer.tsx
@@ -26,7 +26,7 @@ export const DroppableContainer: FunctionComponent<BaseContainerProps> = ({ clas
     <div
       id={`droppable-${id}`}
       ref={setDroppableNodeRef}
-      className={clsx(className, { 'droppable-container': isOver })}
+      className={clsx(className, { 'droppable-container': isOver }, 'pf-v6-c-droppable')}
     >
       {children}
     </div>
@@ -48,7 +48,7 @@ export const DraggableContainer: FunctionComponent<BaseContainerProps> = ({ id,
     <div
       id={`draggable-${id}`}
       ref={setDraggableNodeRef}
-      className={clsx({ 'draggable-container': isDefined(transform) })}
+      className={clsx({ 'draggable-container': isDefined(transform) }, 'pf-v6-c-draggable')}
       {...listeners}
       {...attributes}
     >
diff --git a/packages/ui/src/providers/datamapper-dnd.provider.scss b/packages/ui/src/providers/datamapper-dnd.provider.scss
new file mode 100644
index 000000000..8ff42a52f
--- /dev/null
+++ b/packages/ui/src/providers/datamapper-dnd.provider.scss
@@ -0,0 +1,17 @@
+@use '../styles/dnd';
+
+.dragging-container {
+  padding: 5px;
+  font-weight: bold;
+  color: var(--pf-t--global--icon--color--brand--default);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--pf-v6-c-draggable--m-dragging--after--BorderColor);
+  background-color: var(--pf-t--global--background--color--100);
+  border-radius: var(--pf-v6-c-draggable--m-dragging--after--BorderRadius);
+  box-shadow: var(--pf-v6-c-draggable--m-dragging--BoxShadow);
+}
+
+.pf-v6-c-draggable.dragging-container {
+  cursor: grabbing;
+}
diff --git a/packages/ui/src/providers/datamapper-dnd.provider.tsx b/packages/ui/src/providers/datamapper-dnd.provider.tsx
index f4e247d0d..4189f66c5 100644
--- a/packages/ui/src/providers/datamapper-dnd.provider.tsx
+++ b/packages/ui/src/providers/datamapper-dnd.provider.tsx
@@ -17,6 +17,7 @@ import { NodeData } from '../models/datamapper';
 import { Label } from '@patternfly/react-core';
 import { useDataMapper } from '../hooks/useDataMapper';
 import { DataMapperDnDMonitor } from './dnd/DataMapperDndMonitor';
+import './datamapper-dnd.provider.scss';
 
 export interface IDataMapperDndContext {
   handler?: DnDHandler;
@@ -80,7 +81,9 @@ export const DatamapperDndProvider: FunctionComponent<DataMapperDndContextProps>
       <DndContext sensors={sensors} onDragStart={handleDragStart} onDragOver={handleDragOver} onDragEnd={handleDragEnd}>
         {props.children}
         <DragOverlay dropAnimation={null}>
-          <Label>{activeData?.current?.title ? activeData.current.title : 'dragging...'}</Label>
+          <div className={'pf-v6-c-draggable node__row dragging-container'}>
+            <Label>{activeData?.current?.title ? activeData.current.title : 'dragging...'}</Label>
+          </div>
         </DragOverlay>
         {debug && <DataMapperDnDMonitor />}
       </DndContext>

From 2099cb069a1ff74c56b7a1c0523a044287818c7d Mon Sep 17 00:00:00 2001
From: "Ricardo M." <lordrip@gmail.com>
Date: Tue, 21 Jan 2025 19:55:46 +0100
Subject: [PATCH 2/5] fix(styles): Reexport DnD styles and variables

---
 packages/ui/src/styles/_dnd.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/ui/src/styles/_dnd.scss b/packages/ui/src/styles/_dnd.scss
index 5ea517ed9..4bb3b52a3 100644
--- a/packages/ui/src/styles/_dnd.scss
+++ b/packages/ui/src/styles/_dnd.scss
@@ -1,3 +1,5 @@
+@forward '~@patternfly/patternfly/components/DragDrop/drag-drop.scss';
+
 @mixin cursor-grab {
   cursor: grab;
 

From 8aaa02bdd7b82218b4496993160589a9cd311dd4 Mon Sep 17 00:00:00 2001
From: Tomohisa Igarashi <tm.igarashi@gmail.com>
Date: Tue, 21 Jan 2025 14:36:42 -0500
Subject: [PATCH 3/5] fix: fix vite build

---
 .../ui/src/components/DataMapper/debug/vite.config.js  | 10 ++++++++++
 packages/ui/vite.config.js                             | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/ui/src/components/DataMapper/debug/vite.config.js b/packages/ui/src/components/DataMapper/debug/vite.config.js
index 71abad075..87a9f3f7d 100644
--- a/packages/ui/src/components/DataMapper/debug/vite.config.js
+++ b/packages/ui/src/components/DataMapper/debug/vite.config.js
@@ -15,5 +15,15 @@ export default defineConfig(async () => {
         },
       },
     },
+    resolve: {
+      alias: [
+        {
+          find: /^~.+/,
+          replacement: (val) => {
+            return val.replace(/^~/, '');
+          },
+        },
+      ],
+    },
   };
 });
diff --git a/packages/ui/vite.config.js b/packages/ui/vite.config.js
index 58e7e04bf..b9cfa2f6c 100644
--- a/packages/ui/vite.config.js
+++ b/packages/ui/vite.config.js
@@ -51,5 +51,15 @@ export default defineConfig(async () => {
         },
       },
     },
+    resolve: {
+      alias: [
+        {
+          find: /^~.+/,
+          replacement: (val) => {
+            return val.replace(/^~/, '');
+          },
+        },
+      ],
+    },
   };
 });

From 052a372aa4f1715342f80179cb6d09e862bf796b Mon Sep 17 00:00:00 2001
From: Tomohisa Igarashi <tm.igarashi@gmail.com>
Date: Tue, 21 Jan 2025 15:59:49 -0500
Subject: [PATCH 4/5] fix: fix storybook build

---
 packages/ui-tests/.storybook/main.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/ui-tests/.storybook/main.ts b/packages/ui-tests/.storybook/main.ts
index b54121c70..59f93988d 100644
--- a/packages/ui-tests/.storybook/main.ts
+++ b/packages/ui-tests/.storybook/main.ts
@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
-import { dirname, join } from 'path';
+import { dirname, join, resolve } from 'path';
 import packageJson from '../../../package.json';
 
 /**
@@ -54,6 +54,14 @@ const config: StorybookConfig = {
           },
         },
       },
+      resolve: {
+        alias: [
+          {
+            find: '~@patternfly',
+            replacement: '@patternfly',
+          },
+        ],
+      },
     };
   },
 };

From 17188ca286ce8ec4f782b1f289f06d0b2a09b662 Mon Sep 17 00:00:00 2001
From: Tomohisa Igarashi <tm.igarashi@gmail.com>
Date: Tue, 21 Jan 2025 16:19:43 -0500
Subject: [PATCH 5/5] fix: use regex to be more generic

---
 packages/ui-tests/.storybook/main.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-tests/.storybook/main.ts b/packages/ui-tests/.storybook/main.ts
index 59f93988d..36b70c59d 100644
--- a/packages/ui-tests/.storybook/main.ts
+++ b/packages/ui-tests/.storybook/main.ts
@@ -57,8 +57,8 @@ const config: StorybookConfig = {
       resolve: {
         alias: [
           {
-            find: '~@patternfly',
-            replacement: '@patternfly',
+            find: /~(.*)/,
+            replacement: '$1',
           },
         ],
       },