Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React flow #41

Merged
merged 2 commits into from
Feb 19, 2024
Merged

React flow #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6f3af8
updated the state with proper Functionality
itsparser Feb 19, 2024
d202887
Added Dev start
itsparser Feb 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions dev-start.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
npm install
npm startgit c
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There seems to be a typo in the command npm startgit c. It likely should be npm start to correctly start the project.

- npm startgit c
+ npm start
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
npm startgit c
npm start

10 changes: 10 additions & 0 deletions src/components/flow/components/new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
PlusIcon
} from "@heroicons/react/24/outline";
import { Fragment, useState } from "react";
import { RFState, useFlowStore } from "stores/flow.store";
import { shallow } from "zustand/shallow";

export const New: React.FC<any> = () => {
let options = [
Expand All @@ -31,6 +33,13 @@ export const New: React.FC<any> = () => {
}
];
const [open, setOpen] = useState(false);
const { addNewNode, nodes } = useFlowStore(
(state: RFState) => ({
addNewNode: state.addNewNode,
nodes: state.nodes
}),
shallow
);
return (
<Listbox>
<Listbox.Button
Expand Down Expand Up @@ -62,6 +71,7 @@ export const New: React.FC<any> = () => {
"text-gray-900 relative cursor-pointer select-none py-2 pl-3 pr-9 hover:bg-indigo-600 hover:text-white"
}
value={item}
onClick={() => addNewNode([])}
>
<div className="flex items-center">
{item["icon"]}
Expand Down
25 changes: 6 additions & 19 deletions src/components/flow/edge/general.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
import { Listbox, Transition } from "@headlessui/react";
import {
ArrowPathRoundedSquareIcon,
CodeBracketSquareIcon,
HashtagIcon,
PlusIcon
HashtagIcon
} from "@heroicons/react/24/outline";
import { Fragment, useState } from "react";
import {
BaseEdge,
EdgeLabelRenderer,
EdgeProps,
getStraightPath
} from "reactflow";
import { useState } from "react";
import { BaseEdge, EdgeProps, getSmoothStepPath } from "reactflow";

// export default function CustomEdge() {
export const DefaultEdge: React.FC<EdgeProps> = ({
Expand Down Expand Up @@ -41,7 +34,7 @@ export const DefaultEdge: React.FC<EdgeProps> = ({
}
];
const [open, setOpen] = useState(false);
const [edgePath, labelX, labelY] = getStraightPath({
const [edgePath, labelX, labelY] = getSmoothStepPath({
sourceX,
sourceY,
targetX,
Expand All @@ -53,7 +46,7 @@ export const DefaultEdge: React.FC<EdgeProps> = ({
return (
<>
<BaseEdge id={id} path={edgePath} style={{ backgroundColor: "black" }} />
<EdgeLabelRenderer>
{/* <EdgeLabelRenderer>
<div
style={{
position: "absolute",
Expand All @@ -65,12 +58,6 @@ export const DefaultEdge: React.FC<EdgeProps> = ({
}}
className="nodrag nopan"
>
{/* <button
className="edgebutton"
onClick={() => console.log("Got click")}
>
×
</button> */}
<Listbox>
<Listbox.Button
className="relative rounded-full p-1 text-blue-600 shadow-sm hover:shadow-md bg-white font-bold"
Expand Down Expand Up @@ -118,7 +105,7 @@ export const DefaultEdge: React.FC<EdgeProps> = ({
</Transition>
</Listbox>
</div>
</EdgeLabelRenderer>
</EdgeLabelRenderer> */}
</>
);
};
12 changes: 3 additions & 9 deletions src/components/flow/edge/no.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
import { useState } from "react";
import {
BaseEdge,
EdgeLabelRenderer,
EdgeProps,
getSmoothStepPath
} from "reactflow";
import { New } from "../components";
import { BaseEdge, EdgeProps, getSmoothStepPath } from "reactflow";

export const NoEdge: React.FC<EdgeProps> = ({
id,
Expand All @@ -29,7 +23,7 @@ export const NoEdge: React.FC<EdgeProps> = ({
return (
<>
<BaseEdge id={id} path={edgePath} style={{ backgroundColor: "black" }} />
<EdgeLabelRenderer>
{/* <EdgeLabelRenderer>
<div
style={{
position: "absolute",
Comment on lines 23 to 29
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [26-41]

Commented-out code found. If this code is not intended for future use, consider removing it to keep the codebase clean. If it might be used later, please add a comment explaining the conditions under which it should be re-enabled.

Expand All @@ -44,7 +38,7 @@ export const NoEdge: React.FC<EdgeProps> = ({
>
<New></New>
</div>
</EdgeLabelRenderer>
</EdgeLabelRenderer> */}
</>
);
};
19 changes: 3 additions & 16 deletions src/components/flow/edge/yes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
import {
BaseEdge,
EdgeLabelRenderer,
EdgeProps,
getSmoothStepPath
} from "reactflow";
import { New } from "../components";
import { BaseEdge, EdgeProps, getSmoothStepPath } from "reactflow";

export type GetSpecialPathParams = {
sourceX: number;
Expand Down Expand Up @@ -56,7 +50,7 @@ export const YesEdge: React.FC<EdgeProps> = ({
return (
<>
<BaseEdge id={id} path={edgePath} style={{ backgroundColor: "black" }} />
<EdgeLabelRenderer>
{/* <EdgeLabelRenderer>
<div
style={{
position: "absolute",
Expand All @@ -70,16 +64,9 @@ export const YesEdge: React.FC<EdgeProps> = ({
}}
className="nodrag nopan"
>
{/* <button
className="edgebutton"
onClick={() => console.log("Got click")}
>
×
</button> */}

<New></New>
</div>
</EdgeLabelRenderer>
</EdgeLabelRenderer> */}
</>
);
};
79 changes: 79 additions & 0 deletions src/components/flow/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { Typography } from "@material-tailwind/react";

function classNames(...classes: any) {

Check warning on line 3 in src/components/flow/form.tsx

View check run for this annotation

codefactor.io / CodeFactor

src/components/flow/form.tsx#L3 

Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
return classes.filter(Boolean).join(" ");
}
export interface WorkflowFormParm {
title: string;
}

export const WorkflowForm: React.FC<WorkflowFormParm> = ({ title }) => {

Check notice on line 10 in src/components/flow/form.tsx

View check run for this annotation

codefactor.io / CodeFactor

src/components/flow/form.tsx#L10 

'title' is defined but never used. (@typescript-eslint/no-unused-vars)
return (
<>
<div className="pl-4 py-4 shadow-md lg:flex lg:items-center lg:justify-between">
<div className="min-w-0">
<h2 className="text-lg font-bold leading-7 text-gray-900 sm:truncate sm:tracking-tight">
Back End Developer
</h2>
</div>
<div className="mt-5 flex lg:ml-4 lg:mt-0">
{/* <span className="hidden sm:block">
<button
type="button"
className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
>
<PencilIcon
className="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</button>
</span> */}

{/* <span className="sm:ml-3">
<button
type="button"
className="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
<CheckIcon
className="-ml-0.5 mr-1.5 h-5 w-5"
aria-hidden="true"
/>
Save
</button>
</span> */}
</div>
</div>
<div className="flex ">
<Typography variant="h5" color="blue-gray">
Recent Transactions
</Typography>
</div>
{/* <Card className="w-full">
<CardHeader
floated={false}
shadow={false}
className="rounded-none bg-indigo-200"
>
<div className="mb-4 flex ">
<Typography variant="h5" color="blue-gray">
Recent Transactions
</Typography>
</div>
</CardHeader>
<CardBody>
<Typography variant="h5" color="blue-gray" className="mb-2">
UI/UX Review Check
</Typography>
<Typography>
The place is close to Barceloneta Beach and bus stop just 2 min by
walk and near to &quot;Naviglio&quot; where you can enjoy the main
night life in Barcelona.
</Typography>
</CardBody>
<CardFooter className="pt-0">
<Button>Read More</Button>
</CardFooter>
</Card> */}
</>
);
};
21 changes: 16 additions & 5 deletions src/components/flow/node/action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { NodeProps, Position, useNodeId } from "reactflow";
import { classNames } from "..";
import CustomHandle from "../handler/test";

export const ActionNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {

Check notice on line 6 in src/components/flow/node/action.tsx

View check run for this annotation

codefactor.io / CodeFactor

src/components/flow/node/action.tsx#L6 

'xPos' is defined but never used. (@typescript-eslint/no-unused-vars)

Check notice on line 6 in src/components/flow/node/action.tsx

View check run for this annotation

codefactor.io / CodeFactor

src/components/flow/node/action.tsx#L6 

'yPos' is defined but never used. (@typescript-eslint/no-unused-vars)
const [selected, setValueSelected] = useState({} as any);
const [open, setOpen] = useState(false);
const nodeId = useNodeId();
console.log("x - ", xPos, ", y -", yPos);
let bgColor =

Check warning on line 10 in src/components/flow/node/action.tsx

View check run for this annotation

codefactor.io / CodeFactor

src/components/flow/node/action.tsx#L10 

'bgColor' is never reassigned. Use 'const' instead. (prefer-const)
data?.payload?.type_field == "Assertion" ? "bg-red-100" : "bg-indigo-100";

useEffect(() => {
classNames;
}, [data]);
Comment on lines +13 to +15
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The useEffect hook is used here without a clear purpose, as it only references classNames without performing any operations. If the intention was to trigger side effects based on specific dependencies, please include those dependencies in the dependency array. If this useEffect is not needed, consider removing it.

return (
<>
<CustomHandle
Expand All @@ -17,9 +23,14 @@
isConnectable={true}
isConnectableStart={false}
/>
<div className="h-10 w-44 border-white bg-indigo-400 rounded-lg shadow-sm hover:shadow-md">
<div className="self-center p-2 align-middle text-center">
[ {data.label} ]{/* [ {data?.payload?.type_field} ] */}
<div
className={classNames(
"h-10 w-44 border-white rounded-lg shadow-sm hover:shadow-md",
bgColor
)}
>
<div className="self-center p-2 align-middle text-center ">
[ {data?.payload?.type_field} ] - {data?.payload?.name}
</div>
</div>

Expand Down
10 changes: 6 additions & 4 deletions src/components/flow/node/condition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@
import { NodeProps, Position, useNodeId } from "reactflow";
import CustomHandle from "../handler/test";

export const ConditionalNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {

Check notice on line 5 in src/components/flow/node/condition.tsx

View check run for this annotation

codefactor.io / CodeFactor

src/components/flow/node/condition.tsx#L5 

'yPos' is defined but never used. (@typescript-eslint/no-unused-vars)
const [selected, setValueSelected] = useState({} as any);
const [open, setOpen] = useState(false);
const nodeId = useNodeId();
console.log("x - ", xPos, ", y -", yPos);
return (
<>
<CustomHandle
Expand All @@ -17,9 +16,12 @@
isConnectable={true}
isConnectableStart={false}
/>
<div className="h-10 w-44 border-white bg-indigo-400 rounded-lg shadow-sm hover:shadow-md">
<div className="self-center p-2 align-middle text-center">
If Condition
<div className="w-96 h-10 border-white bg-orange-100 rounded-lg shadow-sm hover:shadow-md">
<div className="self-center p-2 align-middle text-center ">
<h3 className=" text-ellipsis text-nowrap ">
If new more content comming into this Node[ Condition ] -{" "}
{data?.payload?.name}
</h3>
</div>
</div>

Expand Down
Loading
Loading