fix(Flow): react flow styles import

lumada-design · Oct 17, 2023 · 637db33 · 637db33
1 parent 5f92bd9
commit 637db33
Show file tree

Hide file tree

Showing 4 changed files with 476 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,8 @@
     "publish:test": "lerna publish --conventional-graduate --yes --no-git-tag-version --no-push",
     "publish:release": "lerna publish --conventional-graduate --yes",
     "publish:next": "lerna publish --conventional-prerelease --yes --preid next --dist-tag next",
-    "prepare": "npx husky install .config/husky"
+    "prepare": "npx husky install .config/husky",
+    "lab:flow": "node scripts/flow-styles"
   },
   "devDependencies": {
     "@applitools/eyes-storybook": "^3.41.2",

diff --git a/packages/lab/src/components/Flow/DroppableFlow.tsx b/packages/lab/src/components/Flow/DroppableFlow.tsx
@@ -13,7 +13,8 @@ import ReactFlow, {
   Edge,
   Node,
 } from "reactflow";
-import "reactflow/dist/style.css";
+
+import { Global } from "@emotion/react";
 
 import { DragEndEvent, useDndMonitor, useDroppable } from "@dnd-kit/core";
 
@@ -24,6 +25,7 @@ import { ExtractNames, useUniqueId } from "@hitachivantara/uikit-react-core";
 import { HvFlowNodeTypes } from "./types";
 import { staticClasses, useClasses } from "./Flow.styles";
 import { useFlowContext } from "./FlowContext";
+import { flowStyles } from "./base";
 
 export { staticClasses as flowClasses };
 
@@ -218,24 +220,27 @@ export const HvDroppableFlow = ({
   };
 
   return (
-    <div
-      id={elementId}
-      ref={setNodeRef}
-      className={cx(classes.root, className)}
-    >
-      <ReactFlow
-        nodes={nodes}
-        edges={validEdges}
-        nodeTypes={nodeTypes}
-        onNodesChange={handleNodesChange}
-        onEdgesChange={handleEdgesChange}
-        onConnect={handleConnect}
-        isValidConnection={isValidConnection}
-        defaultEdgeOptions={defaultEdgeOptions}
-        {...others}
+    <>
+      <Global styles={flowStyles} />
+      <div
+        id={elementId}
+        ref={setNodeRef}
+        className={cx(classes.root, className)}
       >
-        {children}
-      </ReactFlow>
-    </div>
+        <ReactFlow
+          nodes={nodes}
+          edges={validEdges}
+          nodeTypes={nodeTypes}
+          onNodesChange={handleNodesChange}
+          onEdgesChange={handleEdgesChange}
+          onConnect={handleConnect}
+          isValidConnection={isValidConnection}
+          defaultEdgeOptions={defaultEdgeOptions}
+          {...others}
+        >
+          {children}
+        </ReactFlow>
+      </div>
+    </>
   );
 };