├── src
    ├── vite-env.d.ts
    ├── assets
    │   ├── logo_48.png
    │   └── error.svg
    ├── components
    │   ├── Canvas
    │   │   ├── customNodes
    │   │   │   ├── types.d.ts
    │   │   │   ├── index.ts
    │   │   │   ├── SortDataNode.tsx
    │   │   │   ├── FileUploadNode.tsx
    │   │   │   └── FilterDataNode.tsx
    │   │   ├── types.d.ts
    │   │   └── index.tsx
    │   ├── BlockLibrary
    │   │   ├── types.d.ts
    │   │   ├── BlockCategory.tsx
    │   │   ├── index.tsx
    │   │   ├── Block.tsx
    │   │   └── BlockDetails.tsx
    │   ├── Table
    │   │   ├── Cell.tsx
    │   │   ├── types.d.ts
    │   │   ├── Row.tsx
    │   │   └── index.tsx
    │   ├── index.ts
    │   ├── Header
    │   │   ├── types.d.ts
    │   │   ├── SaveModal.tsx
    │   │   └── index.tsx
    │   └── WorkflowCard
    │   │   └── index.tsx
    ├── view
    │   ├── index.ts
    │   ├── WorkflowBuilder
    │   │   ├── style.css
    │   │   ├── index.tsx
    │   │   └── Preview.tsx
    │   ├── Home
    │   │   └── index.tsx
    │   └── NoMatchFound
    │   │   └── index.tsx
    ├── constants
    │   ├── storeConstant.ts
    │   ├── exportConstant.ts
    │   ├── index.ts
    │   └── appConstant.ts
    ├── routes
    │   └── index.ts
    ├── layout
    │   └── index.tsx
    ├── services
    │   ├── hook.ts
    │   ├── workflowStore.ts
    │   ├── index.ts
    │   └── workflowSlice.ts
    ├── hooks
    │   ├── types.d.ts
    │   └── index.tsx
    ├── index.css
    ├── utils
    │   ├── types.d.ts
    │   └── index.ts
    ├── main.tsx
    └── app
    │   └── App.tsx
├── public
    ├── logo_48.png
    ├── template.png
    └── vite.svg
├── template
    ├── screen1.png
    ├── screen2.png
    ├── screen3.png
    └── screen4.png
├── postcss.config.js
├── vite.config.ts
├── tsconfig.node.json
├── data
    └── Data.csv
├── .gitignore
├── .eslintrc.cjs
├── tailwind.config.js
├── types.d.ts
├── tsconfig.json
├── package.json
├── vite.config.ts.timestamp-1714373788821-a7cc1848d7664.mjs
├── index.html
├── CODE_OF_CONDUCT.md
└── README.md


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/public/logo_48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/debrajhyper/workflow-builder/HEAD/public/logo_48.png


--------------------------------------------------------------------------------
/public/template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/debrajhyper/workflow-builder/HEAD/public/template.png


--------------------------------------------------------------------------------
/src/assets/logo_48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/debrajhyper/workflow-builder/HEAD/src/assets/logo_48.png


--------------------------------------------------------------------------------
/template/screen1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/debrajhyper/workflow-builder/HEAD/template/screen1.png


--------------------------------------------------------------------------------
/template/screen2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/debrajhyper/workflow-builder/HEAD/template/screen2.png


--------------------------------------------------------------------------------
/template/screen3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/debrajhyper/workflow-builder/HEAD/template/screen3.png


--------------------------------------------------------------------------------
/template/screen4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/debrajhyper/workflow-builder/HEAD/template/screen4.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/components/Canvas/customNodes/types.d.ts:
--------------------------------------------------------------------------------
1 | type NodeData = {
2 |     name: string;
3 |     list: string[][];
4 |     id: string;
5 | };


--------------------------------------------------------------------------------
/src/components/Canvas/types.d.ts:
--------------------------------------------------------------------------------
1 | import { XYPosition } from 'reactflow';
2 | 
3 | type OnDropCallbackProps = {
4 |     position?: XYPosition;
5 |     type: NodeType;
6 | }


--------------------------------------------------------------------------------
/src/components/BlockLibrary/types.d.ts:
--------------------------------------------------------------------------------
1 | type BlockCategoryProps = {
2 |     name: BlockCategoryType;
3 |     data: BlockType[];
4 | }
5 | 
6 | type BlockProps = {
7 |     data: BlockType;
8 | }


--------------------------------------------------------------------------------
/src/view/index.ts:
--------------------------------------------------------------------------------
1 | import { HomePage } from './Home';
2 | import { WorkflowBuilder } from './WorkflowBuilder';
3 | import { NoMatchFound } from './NoMatchFound';
4 | 
5 | export { HomePage, WorkflowBuilder, NoMatchFound };


--------------------------------------------------------------------------------
/src/constants/storeConstant.ts:
--------------------------------------------------------------------------------
1 | export const STORE_NAME = 'workflowBuilder';
2 | export const MODAL_CLOSE = 'close';
3 | export const MODAL_SAVE = 'save';
4 | export const BLOCK_INPUT = 'input';
5 | export const BLOCK_TRANSFORM = 'transform';


--------------------------------------------------------------------------------
/src/components/Canvas/customNodes/index.ts:
--------------------------------------------------------------------------------
1 | import { FileUploadNode } from "./FileUploadNode";
2 | import { FilterDataNode } from "./FilterDataNode";
3 | import { SortDataNode } from "./SortDataNode";
4 | 
5 | export { FileUploadNode, FilterDataNode, SortDataNode };


--------------------------------------------------------------------------------
/src/constants/exportConstant.ts:
--------------------------------------------------------------------------------
1 | export const CSV_FILE_NAME = "data.csv";
2 | export const JSON_FILE_NAME = "data.json";
3 | export const COMA = ",";
4 | export const NEW_LINE = "\n";
5 | export const BLOB_TYPE = "application/octet-stream";
6 | export const LETTER_A = "a";


--------------------------------------------------------------------------------
/src/view/WorkflowBuilder/style.css:
--------------------------------------------------------------------------------
 1 | .textarea-container {
 2 |     position: relative;
 3 | }
 4 | 
 5 | .textarea {
 6 |     width: 100%;
 7 |     /* height: 200px; */
 8 | }
 9 | 
10 | .component {
11 |     position: absolute;
12 |     bottom: 0;
13 |     left: 0%;
14 | }


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react-swc'
3 | import tsconfigPaths from 'vite-tsconfig-paths'
4 | 
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 |   plugins: [react(), tsconfigPaths()],
8 | })
9 | 


--------------------------------------------------------------------------------
/src/routes/index.ts:
--------------------------------------------------------------------------------
1 | export const HOME_PATH = "/";
2 | export const WORKFLOW_PATH = "workflow";
3 | export const WORKFLOW_ID_PATH = ":id";
4 | export const No_MATCH_FOUND_PATH = "*";
5 | 
6 | export const WORKFLOW_LINK = "/workflow";
7 | export const WORKFLOW_ID_LINK = "/workflow/"


--------------------------------------------------------------------------------
/src/components/Table/Cell.tsx:
--------------------------------------------------------------------------------
1 | export function Cell({ data, isHeader }: CellProps) {
2 |     return (
3 |         <div className={`${isHeader ? 'bg-[#262445]' : 'bg-background'} border border-border p-2 h-full min-w-28 w-28 max-w-28`}>
4 |             {data}
5 |         </div>
6 |     );
7 | }


--------------------------------------------------------------------------------
/src/layout/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from "react-router-dom";
 2 | import { Header } from "@Components";
 3 | 
 4 | export function Layout() {
 5 |     return (
 6 |         <div className="h-screen">
 7 |             <Header />
 8 |             <Outlet />
 9 |         </div>
10 |     )
11 | }


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | import { BlockLibrary } from './BlockLibrary';
2 | import { Canvas } from './Canvas';
3 | import { Header } from './Header';
4 | import { Table } from './Table';
5 | import { WorkflowCard } from './WorkflowCard';
6 | 
7 | export { BlockLibrary, Canvas, Header, Table, WorkflowCard };


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true,
 8 |     "strict": true
 9 |   },
10 |   "include": ["vite.config.ts"]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/services/hook.ts:
--------------------------------------------------------------------------------
1 | import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
2 | import type { RootState, AppDispatch } from './workflowStore';
3 | 
4 | export const useAppDispatch = () => useDispatch<AppDispatch>();
5 | export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;


--------------------------------------------------------------------------------
/src/hooks/types.d.ts:
--------------------------------------------------------------------------------
1 | import { ReactFlowInstance, XYPosition } from "reactflow";
2 | 
3 | type UseDnDProps = {
4 |     setIsHighlight: React.Dispatch<React.SetStateAction<boolean>>;
5 |     onDropCallback: (params: { position?: XYPosition; type: NodeType }) => void;
6 |     reactFlowInstance: ReactFlowInstance | null;
7 | }


--------------------------------------------------------------------------------
/data/Data.csv:
--------------------------------------------------------------------------------
 1 | Name,Age,Phone no
 2 | Neel,25,9658786542
 3 | Debraj,32,7812345678
 4 | John,28,9543218765
 5 | Alice,36,8675309123
 6 | Bob,41,1234567890
 7 | Emily,22,9876543210
 8 | James,30,8765432109
 9 | Sarah,29,7890123456
10 | Michael,35,8901234567
11 | Olivia,27,6789012345
12 | Reece,33,7654321098
13 | Keeley,31,8901234567
14 | Lee,40,9876543210


--------------------------------------------------------------------------------
/src/components/Table/types.d.ts:
--------------------------------------------------------------------------------
 1 | type CellType = string;
 2 | type RowType = CellType[];
 3 | type TableType = RowType[];
 4 | 
 5 | type TableProps = {
 6 |     data: TableType;
 7 | }
 8 | 
 9 | type RowProps = {
10 |     data: RowType;
11 |     isHeader: boolean;
12 | }
13 | 
14 | type CellProps = {
15 |     data: CellType;
16 |     isHeader: boolean;
17 | }


--------------------------------------------------------------------------------
/src/components/Header/types.d.ts:
--------------------------------------------------------------------------------
 1 | import { MODAL_CLOSE, MODAL_SAVE } from "@Constants";
 2 | 
 3 | type OnCloseType = (params: {
 4 |     type: MODAL_CLOSE | MODAL_SAVE;
 5 |     data?: { id, name };
 6 | }) => void;
 7 | 
 8 | type SaveModalProps = {
 9 |     id: number | undefined;
10 |     workflowName: string | undefined;
11 |     onClose: OnCloseType;
12 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |     font-family: "IBM Plex Mono", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans",
 7 |         "Helvetica Neue", sans-serif;
 8 |     background-color: #1b192b;
 9 |     color: #f8f8f2;
10 |     border: 0;
11 |     padding: 0;
12 |     margin: 0;
13 |     box-sizing: border-box;
14 | }


--------------------------------------------------------------------------------
/src/components/Table/Row.tsx:
--------------------------------------------------------------------------------
 1 | import { Cell } from "./Cell";
 2 | 
 3 | export function Row({ data, isHeader }: RowProps) {
 4 |     return (
 5 |         <div className={`flex relative ${isHeader && 'sticky top-0 font-bold z-10'}`}>
 6 |             {data.map((cellData, index) => (
 7 |                 <Cell key={index} data={cellData} isHeader={isHeader} />
 8 |             ))}
 9 |         </div>
10 |     );
11 | }


--------------------------------------------------------------------------------
/src/components/Table/index.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Key } from "react";
 3 | import { Row } from "./Row";
 4 | 
 5 | export function Table({ data }: TableProps) {
 6 |     return (
 7 |         <div className="flex flex-col text-xs">
 8 |             {data.map((rowData: RowType, index: Key | null | undefined) => (
 9 |                 <Row key={index} data={rowData} isHeader={index == 0} />
10 |             ))}
11 |         </div>
12 |     );
13 | }


--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | export { STORE_NAME, MODAL_CLOSE, MODAL_SAVE, BLOCK_INPUT, BLOCK_TRANSFORM } from './storeConstant';
2 | export { LOCAL_STORAGE_KEY, EMPTY_STring, NEGATIVE_ONE, EQUAL, NOT_EQUAL, INCLUDES, NOT_INCLUDES, ORDER_ASC, ORDER_DESC, NO_PREVIEW, TAB_NEW_LINE, ZERO, DEFAULT_WORKFLOW_NAME, UNDEFINED, DND_MOVE, NODE_TYPE_FILE_UPLOAD, NODE_TYPE_FILTER, NODE_TYPE_SORT } from './appConstant';
3 | export { CSV_FILE_NAME, JSON_FILE_NAME, COMA, NEW_LINE, BLOB_TYPE, LETTER_A } from './exportConstant';


--------------------------------------------------------------------------------
/src/components/BlockLibrary/BlockCategory.tsx:
--------------------------------------------------------------------------------
 1 | import { Block } from "./Block";
 2 | import { blockCategory } from "./BlockDetails";
 3 | 
 4 | export function BlockCategory({ name, data }: BlockCategoryProps) {
 5 |     return (
 6 |         <>
 7 |             <div className="font-bold mb-1">{blockCategory[name]}</div>
 8 |             {
 9 |                 data.map((block) => {
10 |                     return <Block key={block.id} data={block} />;
11 |                 })
12 |             }
13 |         </>
14 |     );
15 | }


--------------------------------------------------------------------------------
/src/utils/types.d.ts:
--------------------------------------------------------------------------------
 1 | import { XYPosition } from "reactflow";
 2 | 
 3 | type SortDataProps = {
 4 |     tableData: Array<string[]>;
 5 |     sortConfig: {
 6 |         column: string;
 7 |         order: string
 8 |     };
 9 | }
10 | 
11 | type FilterDataProps = {
12 |     tableData: Array<string[]>;
13 |     filterConfig: {
14 |         column: string;
15 |         operation: string;
16 |         filter: string
17 |     };
18 | }
19 | 
20 | type GetNewNodeProps = {
21 |     type: NodeType;
22 |     position?: XYPosition;
23 | }


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:@typescript-eslint/recommended',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
10 |   parser: '@typescript-eslint/parser',
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': [
14 |       'warn',
15 |       { allowConstantExport: true },
16 |     ],
17 |   },
18 | }
19 | 


--------------------------------------------------------------------------------
/src/services/workflowStore.ts:
--------------------------------------------------------------------------------
 1 | import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
 2 | import workflowReducer from "./workflowSlice";
 3 | 
 4 | export const workflowStore = configureStore({
 5 |     reducer: {
 6 |         workFlowBuilder: workflowReducer,
 7 |     }
 8 | });
 9 | 
10 | export type AppDispatch = typeof workflowStore.dispatch;
11 | export type RootState = ReturnType<typeof workflowStore.getState>;
12 | export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import { BrowserRouter } from "react-router-dom";
 4 | import { Provider } from "react-redux";
 5 | import App from '@App/App';
 6 | import './index.css'
 7 | import { workflowStore } from "@Services";
 8 | 
 9 | ReactDOM.createRoot(document.getElementById('root')!).render(
10 |   <React.StrictMode>
11 |     <Provider store={workflowStore}>
12 |       <BrowserRouter>
13 |         <App />
14 |       </BrowserRouter>
15 |     </Provider>
16 |   </React.StrictMode>,
17 | )
18 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {
 9 |       colors: {
10 |         background: "#1B192B",
11 |         text: "#f8f8f2",
12 |         border: "#333154",
13 |         card: "#333154",
14 |         previewBackground: "#4caf5030",
15 |         previewBorder: "#4caf50",
16 |         exportButton: "#333154",
17 |         exportButtonMenu: "#2d3748",
18 |         exportButtonMenuHover: "#ffffff14",
19 |       },
20 |     },
21 |   },
22 |   plugins: [],
23 | }
24 | 
25 | 


--------------------------------------------------------------------------------
/src/app/App.tsx:
--------------------------------------------------------------------------------
 1 | import { Route, Routes } from "react-router-dom";
 2 | import { Layout } from "@Layout";
 3 | import { HomePage, WorkflowBuilder, NoMatchFound } from "@View";
 4 | import { HOME_PATH, No_MATCH_FOUND_PATH, WORKFLOW_ID_PATH, WORKFLOW_PATH } from "@Routes";
 5 | 
 6 | function App() {
 7 |   return (
 8 |     <Routes>
 9 |       <Route path={HOME_PATH} element={<Layout />}>
10 |         <Route index element={<HomePage />} />
11 | 
12 |         <Route path={WORKFLOW_PATH} element={<WorkflowBuilder />}>
13 |           <Route path={WORKFLOW_ID_PATH} element={<WorkflowBuilder />} />
14 |         </Route>
15 | 
16 |         <Route path={No_MATCH_FOUND_PATH} element={<NoMatchFound />} />
17 |       </Route>
18 |     </Routes>
19 |   )
20 | }
21 | 
22 | export default App
23 | 


--------------------------------------------------------------------------------
/src/constants/appConstant.ts:
--------------------------------------------------------------------------------
 1 | export const EMPTY_STring = "";
 2 | 
 3 | export const EQUAL = "=";
 4 | export const NOT_EQUAL = "!=";
 5 | export const INCLUDES = "^";
 6 | export const NOT_INCLUDES = "!^";
 7 | export const NEGATIVE_ONE = "-1";
 8 | export const ORDER_ASC = "asc";
 9 | export const ORDER_DESC = "desc";
10 | 
11 | export const NO_PREVIEW = "No Preview";
12 | 
13 | export const TAB_NEW_LINE = "\r\n";
14 | export const ZERO = "0";
15 | export const DEFAULT_WORKFLOW_NAME = "New Workflow";
16 | 
17 | export const UNDEFINED = "undefined";
18 | export const DND_MOVE = "move";
19 | 
20 | export const NODE_TYPE_FILE_UPLOAD = "fileUploadNode";
21 | export const NODE_TYPE_FILTER = "filterNode";
22 | export const NODE_TYPE_SORT = "sortNode";
23 | 
24 | export const LOCAL_STORAGE_KEY = "workflowItems";


--------------------------------------------------------------------------------
/src/components/WorkflowCard/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import { WorkflowType } from "types";
 3 | import { WORKFLOW_ID_LINK } from "@Routes";
 4 | import { IconFolderPlus } from '@tabler/icons-react';
 5 | 
 6 | export function WorkflowCard(props: { data: Pick<WorkflowType, "id" | "name"> }) {
 7 |     const { data: { id, name } } = props;
 8 |     return (
 9 |         <Link to={`${WORKFLOW_ID_LINK}${id}`} className="w-44 h-32">
10 |             <div className="rounded overflow-hidden shadow-xl bg-card/60 hover:bg-card flex flex-col p-4 h-full w-full" title={name}>
11 |                 <div className="text-xs opacity-[0.7]"><IconFolderPlus /> ID: {id}</div>
12 |                 <div className="text-md font-bold leading-5 line-clamp-2 mt-3">{name}</div>
13 |             </div>
14 |         </Link>
15 |     );
16 | }


--------------------------------------------------------------------------------
/types.d.ts:
--------------------------------------------------------------------------------
 1 | import { Edge, Node } from "reactflow";
 2 | import { BLOCK_INPUT, BLOCK_TRANSFORM, NODE_TYPE_FILE_UPLOAD, NODE_TYPE_FILTER, NODE_TYPE_SORT } from "@Constants";
 3 | 
 4 | type NodeType = NODE_TYPE_FILE_UPLOAD | NODE_TYPE_FILTER | NODE_TYPE_SORT;
 5 | type BlockCategoryType = BLOCK_INPUT | BLOCK_TRANSFORM;
 6 | type BlockType = {
 7 |     id: string;
 8 |     name: string;
 9 |     icon?: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<Icon>>;
10 |     description: string;
11 |     input: string;
12 |     output: string;
13 |     nodeType: NodeType;
14 | };
15 | 
16 | type WorkflowType = {
17 |     id: number;
18 |     name: string;
19 |     nodes: Node[];
20 |     edges: Edge[];
21 |     preview: string[][] | string;
22 | };
23 | type WorkflowBuilderState = {
24 |     items: WorkflowType[];
25 |     currentItem: WorkflowType | null;
26 | };


--------------------------------------------------------------------------------
/src/components/BlockLibrary/index.tsx:
--------------------------------------------------------------------------------
 1 | import { blockLibrary } from "./BlockDetails";
 2 | import { BlockCategory } from "./BlockCategory";
 3 | import { IconHexagons } from '@tabler/icons-react';
 4 | 
 5 | export function BlockLibrary() {
 6 |     const categoryList = Object.keys(blockLibrary) as (keyof typeof blockLibrary)[];
 7 | 
 8 |     return (
 9 |         <div className="flex flex-col flex-[0.5] md:flex-[0.3] lg:flex-[0.18] border-r border-border">
10 |             <div className="flex items-center justify-start px-2 py-1 h-7">
11 |                 <IconHexagons size={18} />
12 |                 <span className="text-md font-bold ml-1">Block Library</span>
13 |             </div>
14 |             <div className="p-2 overflow-auto">
15 |                 {
16 |                     categoryList.map((key) => (
17 |                         <BlockCategory key={key} name={key} data={blockLibrary[key]} />
18 |                     ))
19 |                 }
20 |             </div>
21 |         </div>
22 |     );
23 | }


--------------------------------------------------------------------------------
/src/components/BlockLibrary/Block.tsx:
--------------------------------------------------------------------------------
 1 | import { DragEvent } from "react";
 2 | import { DND_MOVE } from "@Constants";
 3 | import { DND_DATA_TRANSFER } from "@Utils";
 4 | 
 5 | export function Block({ data: { name, icon, description, input, output, nodeType } }: BlockProps) {
 6 |     const onDragStart = (event: DragEvent<HTMLDivElement>, nodeType: string) => {
 7 |         event.dataTransfer.setData(DND_DATA_TRANSFER, nodeType);
 8 |         event.dataTransfer.effectAllowed = DND_MOVE;
 9 |     };
10 | 
11 |     return (
12 |         <div
13 |             onDragStart={(event) => onDragStart(event, nodeType)}
14 |             className="rounded overflow-hidden shadow-lg bg-card flex flex-col p-3 mb-3 cursor-grab"
15 |             draggable
16 |         >
17 |             {icon}
18 |             <div className="text-md font-bold">{name}</div>
19 |             <div className="text-xs opacity-[0.8]">{description}</div>
20 |             <div className="flex flex-col mt-2">
21 |                 <span className="text-xs opacity-[0.4]">Input: {input}</span>
22 |                 <span className="text-xs opacity-[0.4]">Output: {output}</span>
23 |             </div>
24 |         </div>
25 |     );
26 | }


--------------------------------------------------------------------------------
/src/services/index.ts:
--------------------------------------------------------------------------------
 1 | import { useAppDispatch, useAppSelector } from './hook';
 2 | import { workflowStore } from './workflowStore';
 3 | import {
 4 |     createWorkflow,
 5 |     resetCurrentWorkflow,
 6 |     updateWorkflow,
 7 |     addNewNode,
 8 |     setPreview,
 9 |     resetPreview,
10 |     setCurrentWorkflow,
11 |     updateNodes,
12 |     updateEdges,
13 |     updateNodeData,
14 |     getWorkflowByIdSelectors,
15 |     getWorkFlowDataSelector,
16 |     getWorkflowListSelectors,
17 |     getPreviewSelectors,
18 |     getNodesSelectors,
19 |     getEdgesSelectors,
20 |     getCurrentWorkflowSelectors,
21 | } from './workflowSlice';
22 | 
23 | export {
24 |     useAppDispatch, useAppSelector,
25 |     workflowStore,
26 |     createWorkflow,
27 |     resetCurrentWorkflow,
28 |     updateWorkflow,
29 |     addNewNode,
30 |     setPreview,
31 |     resetPreview,
32 |     setCurrentWorkflow,
33 |     updateNodes,
34 |     updateEdges,
35 |     updateNodeData,
36 |     getWorkflowByIdSelectors,
37 |     getWorkFlowDataSelector,
38 |     getWorkflowListSelectors,
39 |     getPreviewSelectors,
40 |     getNodesSelectors,
41 |     getEdgesSelectors,
42 |     getCurrentWorkflowSelectors,
43 | };


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     "baseUrl": ".",
18 |     "paths": {
19 |       "@App/*": ["src/app/*"],
20 |       "@Assets/*": ["src/assets/*"],
21 |       "@Components": ["src/components/"],
22 |       "@Constants": ["src/constants/"],
23 |       "@Hooks": ["src/hooks/"],
24 |       "@Layout": ["src/layout/"],
25 |       "@Routes": ["src/routes/"],
26 |       "@Services": ["src/services/"],
27 |       "@Utils": ["src/utils/"],
28 |       "@View": ["src/view/"],
29 |     },
30 | 
31 |     /* Linting */
32 |     "strict": true,
33 |     "noUnusedLocals": true,
34 |     "noUnusedParameters": true,
35 |     "noFallthroughCasesInSwitch": true
36 |   },
37 |   "include": ["src", "src/*.d.ts", "**/*.ts", "**/*.tsx"],
38 |   "references": [{ "path": "./tsconfig.node.json" }]
39 | }
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "workflow-builder",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@reduxjs/toolkit": "^2.2.3",
14 |     "@tabler/icons-react": "^3.2.0",
15 |     "react": "^18.2.0",
16 |     "react-dom": "^18.2.0",
17 |     "react-redux": "^9.1.1",
18 |     "react-resizable-panels": "^2.0.18",
19 |     "react-router-dom": "^6.23.0",
20 |     "reactflow": "^11.11.2",
21 |     "vite-tsconfig-paths": "^4.3.2"
22 |   },
23 |   "devDependencies": {
24 |     "@types/react": "^18.2.66",
25 |     "@types/react-dom": "^18.2.22",
26 |     "@typescript-eslint/eslint-plugin": "^7.2.0",
27 |     "@typescript-eslint/parser": "^7.2.0",
28 |     "@vitejs/plugin-react-swc": "^3.5.0",
29 |     "autoprefixer": "^10.4.19",
30 |     "eslint": "^8.57.0",
31 |     "eslint-plugin-react-hooks": "^4.6.0",
32 |     "eslint-plugin-react-refresh": "^0.4.6",
33 |     "postcss": "^8.4.38",
34 |     "tailwindcss": "^3.4.3",
35 |     "typescript": "^5.2.2",
36 |     "vite": "^5.2.0"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/hooks/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useCallback } from "react";
 2 | import { NodeType } from "types";
 3 | import { UseDnDProps } from "./types";
 4 | import { DND_DATA_TRANSFER } from "@Utils";
 5 | import { DND_MOVE, UNDEFINED } from "@Constants";
 6 | 
 7 | export const useDnD = ({ setIsHighlight, onDropCallback, reactFlowInstance }: UseDnDProps ) => {
 8 |     const onDropHandler = (event: { dataTransfer: { getData: (arg0: string) => string; }; clientX: number; clientY: number; }) => {
 9 |         setIsHighlight(false);
10 |         const type = event?.dataTransfer.getData(DND_DATA_TRANSFER) as NodeType;
11 |         // check if the dropped element is valid
12 |         if (typeof type === UNDEFINED || !type) {
13 |             return;
14 |         }
15 |         const position = reactFlowInstance?.screenToFlowPosition({
16 |             x: event.clientX,
17 |             y: event.clientY,
18 |         });
19 |         onDropCallback({ position, type });
20 |     };
21 |     const onDragOverHandler = useCallback((event: { preventDefault: () => void; dataTransfer: { dropEffect: string; }; }) => {
22 |         event.preventDefault();
23 |         event.dataTransfer.dropEffect = DND_MOVE;
24 |     }, []);
25 | 
26 |     return { onDropHandler, onDragOverHandler };
27 | };


--------------------------------------------------------------------------------
/src/view/Home/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import { WorkflowType } from "types";
 3 | import { WORKFLOW_LINK } from "@Routes";
 4 | import { WorkflowCard } from "@Components";
 5 | import { useAppSelector, getWorkflowListSelectors } from "@Services";
 6 | import { IconFolderPlus } from '@tabler/icons-react';
 7 | 
 8 | export function HomePage() {
 9 |     const list = useAppSelector(getWorkflowListSelectors);
10 | 
11 |     return (
12 |         <main className="grid 
13 |         grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-8 
14 |         gap-6 sm:gap-8 md:gap-4 lg:gap-5 xl:gap-4 
15 |         p-6 sm:p-8 md:p-4 lg:p-5 xl:p-4 
16 |         justify-items-center">
17 |             {
18 |                 list.map((item: Pick<WorkflowType, "id" | "name">) => <WorkflowCard key={item.id} data={item} />)
19 |             }
20 |             <Link to={WORKFLOW_LINK} className="w-44 h-32">
21 |                 <div className="rounded overflow-hidden shadow-xl bg-card/60 hover:bg-card flex flex-col justify-center items-center p-4 h-full w-full">
22 |                     <IconFolderPlus />
23 |                     <div className="text-md">create workflow</div>
24 |                 </div>
25 |             </Link>
26 |         </main>
27 |     );
28 | }


--------------------------------------------------------------------------------
/src/view/NoMatchFound/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import errorPage from '@Assets/error.svg';
 3 | import { HOME_PATH } from '@Routes';
 4 | 
 5 | export function NoMatchFound() {
 6 |     return (
 7 |         <div className="p-20 w-full flex items-center">
 8 |             <div className="container flex flex-col md:flex-row items-center justify-between px-5 text-gray-700">
 9 |                 <div className="w-full lg:w-1/2 mx-8">
10 |                     <div className="text-7xl text-green-500 font-dark font-extrabold mb-8"> 404</div>
11 |                     <p className="text-2xl md:text-3xl font-light leading-normal mb-8 text-white/80">
12 |                         Sorry we couldn't find the page you're looking for
13 |                     </p>
14 |                     <Link to={HOME_PATH} className="px-5 inline py-3 text-sm font-medium leading-5 shadow-2xl text-white transition-all duration-400 border border-transparent rounded-md focus:outline-none bg-green-700 hover:bg-green-600">
15 |                         Back to homepage
16 |                     </Link>
17 |                 </div>
18 |                 <div className="w-full lg:flex lg:justify-end lg:w-1/2 mx-5 my-12">
19 |                     <img src={errorPage} className="" alt="Page not found" />
20 |                 </div>
21 |             </div>
22 |         </div>
23 |     );
24 | }


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/BlockLibrary/BlockDetails.tsx:
--------------------------------------------------------------------------------
 1 | import { BlockCategoryType, BlockType } from "types";
 2 | import { NODE_TYPE_FILE_UPLOAD, NODE_TYPE_FILTER, NODE_TYPE_SORT } from "@Constants";
 3 | import { IconFileTypeCsv, IconFilter, IconArrowsSort } from '@tabler/icons-react';
 4 | 
 5 | export const blockCategory: Record<BlockCategoryType, string> = {
 6 |     input: "Input",
 7 |     transform: "Transform",
 8 | };
 9 | 
10 | export const blockLibrary: Record<BlockCategoryType, BlockType[]> = {
11 |     input: [
12 |         {
13 |             id: "csv",
14 |             name: "CSV File",
15 |             icon: <IconFileTypeCsv />,
16 |             description: "Handles csv files.",
17 |             input: 'CSV File',
18 |             output: 'Dataset',
19 |             nodeType: NODE_TYPE_FILE_UPLOAD,
20 |         },
21 |     ],
22 |     transform: [
23 |         {
24 |             id: "filter",
25 |             name: "Filter",
26 |             icon: <IconFilter />,
27 |             description: "Groups a data set based on a given column.",
28 |             input: 'Dataset',
29 |             output: 'Dataset',
30 |             nodeType: NODE_TYPE_FILTER,
31 |         },
32 |         {
33 |             id: "sort",
34 |             name: "Sort",
35 |             icon: <IconArrowsSort />,
36 |             description: "Sorts data based on a given column.",
37 |             input: 'Dataset',
38 |             output: 'Dataset',
39 |             nodeType: NODE_TYPE_SORT,
40 |         },
41 |     ],
42 | };


--------------------------------------------------------------------------------
/vite.config.ts.timestamp-1714373788821-a7cc1848d7664.mjs:
--------------------------------------------------------------------------------
 1 | // vite.config.ts
 2 | import { defineConfig } from "file:///F:/Projects/workflow-builder/node_modules/vite/dist/node/index.js";
 3 | import react from "file:///F:/Projects/workflow-builder/node_modules/@vitejs/plugin-react-swc/index.mjs";
 4 | import tsconfigPaths from "file:///F:/Projects/workflow-builder/node_modules/vite-tsconfig-paths/dist/index.mjs";
 5 | var vite_config_default = defineConfig({
 6 |   plugins: [react(), tsconfigPaths()]
 7 | });
 8 | export {
 9 |   vite_config_default as default
10 | };
11 | //# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJGOlxcXFxQcm9qZWN0c1xcXFx3b3JrZmxvdy1idWlsZGVyXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJGOlxcXFxQcm9qZWN0c1xcXFx3b3JrZmxvdy1idWlsZGVyXFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9GOi9Qcm9qZWN0cy93b3JrZmxvdy1idWlsZGVyL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdC1zd2MnXG5pbXBvcnQgdHNjb25maWdQYXRocyBmcm9tICd2aXRlLXRzY29uZmlnLXBhdGhzJ1xuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW3JlYWN0KCksIHRzY29uZmlnUGF0aHMoKV0sXG59KVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE0USxTQUFTLG9CQUFvQjtBQUN6UyxPQUFPLFdBQVc7QUFDbEIsT0FBTyxtQkFBbUI7QUFHMUIsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUyxDQUFDLE1BQU0sR0FBRyxjQUFjLENBQUM7QUFDcEMsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
12 | 


--------------------------------------------------------------------------------
/src/view/WorkflowBuilder/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from "react";
 2 | import { useParams, useNavigate } from "react-router-dom";
 3 | import { ReactFlowProvider } from "reactflow";
 4 | import { HOME_PATH } from "@Routes";
 5 | import { newWorkflow } from "@Utils";
 6 | import { Preview } from "./Preview";
 7 | import { Canvas, BlockLibrary } from "@Components";
 8 | import { useAppSelector, useAppDispatch, getWorkflowByIdSelectors, setCurrentWorkflow } from "@Services";
 9 | import { PanelGroup, Panel, PanelResizeHandle, ImperativePanelGroupHandle } from "react-resizable-panels";
10 | 
11 | export function WorkflowBuilder() {
12 |     const { id: workflowId = 0 } = useParams();
13 |     const navigate = useNavigate();
14 |     const dispatch = useAppDispatch();
15 |     const currentItem = useAppSelector((state) =>
16 |         getWorkflowByIdSelectors(state, Number(workflowId))
17 |     );
18 |     const panelRef = useRef<ImperativePanelGroupHandle | null>(null);
19 | 
20 |     useEffect(() => {
21 |         const panelGroup = panelRef.current;
22 |         if (panelGroup) {
23 |             panelGroup.setLayout([70, 30]);
24 |         }
25 |     }, [panelRef])
26 | 
27 |     useEffect(() => {
28 |         if (currentItem === null) {
29 |             if (workflowId !== 0) {
30 |                 navigate(HOME_PATH);
31 |             } else {
32 |                 dispatch(setCurrentWorkflow(newWorkflow));
33 |             }
34 |         } else {
35 |             dispatch(setCurrentWorkflow(currentItem));
36 |         }
37 |     }, [currentItem, dispatch, navigate, workflowId]);
38 | 
39 |     return (
40 |         <>
41 |             <PanelGroup autoSaveId="persistence" direction="vertical" className="!h-[93vh]" ref={panelRef}>
42 |                 <Panel maxSize={95} className="flex w-full">
43 |                     <ReactFlowProvider>
44 |                         <BlockLibrary />
45 |                         <Canvas />
46 |                     </ReactFlowProvider>
47 |                 </Panel>
48 |                 <PanelResizeHandle />
49 |                 <Panel collapsible maxSize={75} className="flex flex-col">
50 |                     <Preview />
51 |                 </Panel>
52 |             </PanelGroup>
53 |         </>
54 |     );
55 | }


--------------------------------------------------------------------------------
/src/components/Header/SaveModal.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { SaveModalProps } from "./types";
 3 | import { MODAL_CLOSE, MODAL_SAVE, EMPTY_STring, DEFAULT_WORKFLOW_NAME } from "@Constants";
 4 | import { IconX, IconDeviceFloppy } from '@tabler/icons-react';
 5 | 
 6 | export function SaveModal({ id, workflowName, onClose }: SaveModalProps) {
 7 |     const [name, setName] = useState<string>(id !== 0 ? workflowName != undefined ? workflowName : DEFAULT_WORKFLOW_NAME : EMPTY_STring);
 8 | 
 9 |     return (
10 |         <div id="modal" className="items-center justify-center h-screen w-screen fixed top-0 bg-black bg-opacity-60 flex z-10">
11 |             <div className="bg-background max-w-xl w-full rounded-lg shadow-lg">
12 |                 <div className="p-4 py-3 flex items-center justify-between border-b border-border">
13 |                     <h3 className="font-semibold text-xl">Save Workflow</h3>
14 |                     <span onClick={() => onClose({ type: MODAL_CLOSE })} className="modal-close cursor-pointer border border-border rounded-md p-2 hover:bg-border">
15 |                         <IconX size={18} />
16 |                     </span>
17 |                 </div>
18 |                 <div className="p-4 py-3 border-b border-border">
19 |                     <div className="flex flex-col">
20 |                         <label className="mb-2">Workflow Name</label>
21 |                         <input
22 |                             type="text"
23 |                             value={name}
24 |                             className="block appearance-none w-full bg-gray-900 border border-gray-600 text-gray-100 py-2 px-2 rounded leading-tight focus:outline-none mb-4"
25 |                             onChange={(e) => setName(e?.target?.value)}
26 |                         />
27 |                     </div>
28 |                 </div>
29 |                 <div className="p-4 py-3 flex items-center justify-end">
30 |                     <button onClick={() => onClose({ type: MODAL_SAVE, data: { id, name } })} className="flex justify-center items-center text-sm bg-border border border-border rounded-md px-4 py-2 hover:bg-transparent">
31 |                         <IconDeviceFloppy size={18} />
32 |                         <span className="ml-1">Save</span>
33 |                     </button>
34 |                 </div>
35 |             </div>
36 |         </div>
37 |     );
38 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/logo_48.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <!-- Primary Meta Tags -->
 9 |   <meta name="title" content="Workflow Builder | Debraj Karmakar">
10 |   <meta name="meta-title" content="Workflow Builder | Debraj Karmakar">
11 |   <meta name="description" content="Workflow Builder - Done by Debraj Karmakar" />
12 |   <meta name="keywords"
13 |     content="Workflow, Workflow Builder, Builder, user, form, react, redux, react-redux, redux-toolkit, tailwind ui, react-hook, tailwind components, react flow, drag and drop, move, modular ">
14 |   <meta name="language" content="English">
15 |   <meta name="robots" content="index, follow">
16 |   <meta name="revisit-after" content="10 days">
17 |   <meta name="author" content="Debraj karmakar">
18 |   <!-- Open Graph / Facebook -->
19 |   <meta property="og:type" content="website">
20 |   <meta property="og:url" content="https://wbuilder.vercel.app/">
21 |   <meta property="og:title" content="Workflow Builder | Debraj Karmakar">
22 |   <meta property="og:description" content="Workflow Builder - Done by Debraj Karmakar">
23 |   <meta property="og:image" content="https://wbuilder.vercel.app/template.png">
24 |   <meta property="og:site_name" content="Onito Registration">
25 |   <!-- Twitter -->
26 |   <meta property="twitter:card" content="summary_large_image">
27 |   <meta property="twitter:url" content="https://wbuilder.vercel.app/">
28 |   <meta property="twitter:title" content="Workflow Builder | Debraj Karmakar">
29 |   <meta property="twitter:description" content="Workflow Builder - Done by Debraj Karmakar">
30 |   <meta property="twitter:image" content="https://wbuilder.vercel.app/template.png">
31 |   <meta name="twitter:site" content="@debraj_010">
32 |   <meta name="twitter:creator" content="@debraj_010">
33 |   <!-- Extra -->
34 |   <meta name="full-screen" content="yes">
35 |   <meta name="apple-mobile-web-app-capable" content="yes">
36 |   <meta name="mobile-web-app-capable" content="yes">
37 |   <meta name="apple-mobile-web-app-title" content="Workflow Builder | Debraj Karmakar">
38 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
39 |   <link rel="apple-touch-icon" href="https://wbuilder.vercel.app/logo_48.png" />
40 | 
41 |     <title>Workflow Builder | Debraj Karmakar</title>
42 |   </head>
43 |   <body>
44 |     <div id="root"></div>
45 |     <script type="module" src="/src/main.tsx"></script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
 1 | import { FilterDataProps, GetNewNodeProps, SortDataProps } from "./types";
 2 | import { EMPTY_STring, NOT_EQUAL, TAB_NEW_LINE, ZERO, DEFAULT_WORKFLOW_NAME, COMA, EQUAL, INCLUDES, NEGATIVE_ONE, NOT_INCLUDES, NO_PREVIEW, ORDER_DESC } from "@Constants";
 3 | 
 4 | export const DND_DATA_TRANSFER = "application/reactflow";
 5 | 
 6 | export const newWorkflow = {
 7 |     id: 0,
 8 |     name: DEFAULT_WORKFLOW_NAME,
 9 |     nodes: [],
10 |     edges: [],
11 |     preview: NO_PREVIEW,
12 | };
13 | 
14 | export const getNewNode = ({ type, position }: GetNewNodeProps) => {
15 |     return {
16 |         id: ZERO,
17 |         type,
18 |         position,
19 |         data: null,
20 |     };
21 | };
22 | 
23 | export const getTableDataFromText = (csvText: string) => {
24 |     const data = csvText.split(TAB_NEW_LINE);
25 |     return data.map((rows) => {
26 |         return rows
27 |             .split(/(".*?"|[^",]+)(?=\s*,|\s*$)/)
28 |             .filter((item) => ![EMPTY_STring, COMA].includes(item));
29 |     });
30 | };
31 | 
32 | export const filterData = ({ tableData, filterConfig: { column, operation, filter } }: FilterDataProps) => {
33 |     if (!tableData || tableData.length === 0) {
34 |         return NO_PREVIEW;
35 |     }
36 |     return tableData.filter((row, index) => {
37 |         if (index === 0 || column === NEGATIVE_ONE || filter === EMPTY_STring) {
38 |             return true;
39 |         }
40 |         if (operation === EQUAL) {
41 |             if (row[+column] !== filter) {
42 |                 return false;
43 |             }
44 |         }
45 |         if (operation === NOT_EQUAL) {
46 |             if (row[+column] === filter) {
47 |                 return false;
48 |             }
49 |         }
50 |         if (operation === INCLUDES) {
51 |             if (!row[+column].includes(filter)) {
52 |                 return false;
53 |             }
54 |         }
55 |         if (operation === NOT_INCLUDES) {
56 |             if (row[+column].includes(filter)) {
57 |                 return false;
58 |             }
59 |         }
60 |         return true;
61 |     });
62 | };
63 | 
64 | 
65 | export const sortData = ({ tableData, sortConfig: { column, order } }: SortDataProps) => {
66 |     // Check if tableData is empty or undefined
67 |     if (!tableData || tableData.length === 0) {
68 |         return [[NO_PREVIEW]];
69 |     }
70 |     // Check if column is set to "-1" indicating no sorting needed
71 |     if (column === NEGATIVE_ONE) {
72 |         return tableData;
73 |     }
74 |     // Sort the tableData based on the specified column and order
75 |     const sortedTableData = [...tableData];
76 |     // Return the sorted tableData with the header row
77 |     return [sortedTableData[0], ...sortedTableData.slice(1).sort((a, b) => {
78 |         if (a[+column] && b[+column]) {
79 |             return (
80 |                 (a[+column].localeCompare(b[+column])) *
81 |                 (order === ORDER_DESC ? -1 : 1)
82 |             );
83 |         }
84 |         return 0;
85 |     })];
86 | };


--------------------------------------------------------------------------------
/src/components/Canvas/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import ReactFlow, { addEdge, applyEdgeChanges, applyNodeChanges, Background, Controls, Node, NodeTypes, ReactFlowInstance } from "reactflow";
 3 | import "reactflow/dist/style.css";
 4 | import { useDnD } from "@Hooks";
 5 | import { getNewNode } from "@Utils";
 6 | import { OnDropCallbackProps } from "./types";
 7 | import { FileUploadNode, FilterDataNode, SortDataNode } from "./customNodes";
 8 | import { addNewNode, getEdgesSelectors, getNodesSelectors, updateEdges, updateNodes, useAppDispatch, useAppSelector } from "@Services";
 9 | 
10 | const nodeTypes: NodeTypes = {
11 |     fileUploadNode: FileUploadNode,
12 |     filterNode: FilterDataNode,
13 |     sortNode: SortDataNode,
14 | };
15 | 
16 | export function Canvas() {
17 |     const [isHighlight, setIsHighlight] = useState(false);
18 |     const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance | null>(null);
19 |     const nodes = useAppSelector(getNodesSelectors);
20 |     const edges = useAppSelector(getEdgesSelectors);
21 |     const dispatch = useAppDispatch();
22 | 
23 |     const onDropCallback = ({ position, type }: OnDropCallbackProps) => {
24 |         const node = getNewNode({ position, type });
25 |         dispatch(addNewNode(node as Node));
26 |     };
27 | 
28 |     const { onDragOverHandler, onDropHandler } = useDnD({
29 |         setIsHighlight,
30 |         reactFlowInstance,
31 |         onDropCallback,
32 |     });
33 | 
34 |     return (
35 |         <div className="flex-[0.85] flex h-full w-full relative text-xs">
36 |             {isHighlight && (
37 |                 <div className="bg-previewBackground absolute inset-y-0 inset-x-0 border border-previewBorder rounded"></div>
38 |             )}
39 | 
40 |             <ReactFlow
41 |                 nodes={nodes}
42 |                 onNodesChange={(changes) => {
43 |                     dispatch(updateNodes(applyNodeChanges(changes, nodes)));
44 |                 }}
45 |                 onEdgesChange={(changes) => {
46 |                     dispatch(
47 |                         updateEdges({
48 |                             edges: applyEdgeChanges(changes, edges),
49 |                             currentEdge: changes,
50 |                         })
51 |                     );
52 |                 }}
53 |                 edges={edges}
54 |                 onInit={setReactFlowInstance}
55 |                 onDrop={onDropHandler}
56 |                 onDragEnter={() => setIsHighlight(true)}
57 |                 onDragLeave={() => setIsHighlight(false)}
58 |                 onConnect={(params) => {
59 |                     dispatch(
60 |                         updateEdges({ edges: addEdge(params, edges), currentEdge: params })
61 |                     );
62 |                 }}
63 |                 onDragOver={onDragOverHandler}
64 |                 nodeTypes={nodeTypes}
65 |                 fitView
66 |             >
67 |                 <Background />
68 |                 <Controls className="bg-white" />
69 |             </ReactFlow>
70 |         </div>
71 |     );
72 | }


--------------------------------------------------------------------------------
/src/view/WorkflowBuilder/Preview.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import { Table } from "@Components";
 3 | import { getPreviewSelectors, useAppSelector } from "@Services";
 4 | import { BLOB_TYPE, COMA, CSV_FILE_NAME, JSON_FILE_NAME, LETTER_A, NEW_LINE } from '@Constants';
 5 | 
 6 | export function Preview() {
 7 |     const preview = useAppSelector(getPreviewSelectors);
 8 |     const [exportMenu, setExportMenu] = useState(false);
 9 | 
10 |     type Data = string[][] | string;
11 | 
12 |     function exportToJSON(data: Data): void {
13 |         const jsonData = JSON.stringify(data, null, 2);
14 |         downloadFile(jsonData, JSON_FILE_NAME);
15 |     }
16 | 
17 |     function exportToCSV(data: Data): void {
18 |         let csvData: string;
19 |         if (Array.isArray(data)) {
20 |             csvData = data.map(row => row.join(COMA)).join(NEW_LINE);
21 |         } else {
22 |             csvData = data;
23 |         }
24 |         downloadFile(csvData, CSV_FILE_NAME);
25 |     }
26 | 
27 |     function downloadFile(data: string, fileName: string): void {
28 |         const blob = new Blob([data], { type: BLOB_TYPE });
29 |         const url = URL.createObjectURL(blob);
30 |         const a = document.createElement(LETTER_A);
31 |         a.href = url;
32 |         a.download = fileName;
33 |         document.body.appendChild(a);
34 |         a.click();
35 |         document.body.removeChild(a);
36 |         URL.revokeObjectURL(url);
37 |         setExportMenu(false)
38 |     }
39 | 
40 |     return (
41 |         <>
42 |             <div className="flex items-center justify-start gap-4 border-y border-border px-4 py-1 cursor-pointer h-8">
43 |                 <span className="text-sm font-bold">Output</span>
44 |                 <div className="dropdown inline-block relative">
45 |                     <button className="bg-exportButton text-xs py-1 px-2 rounded inline-flex items-center" onClick={() => setExportMenu(prev => !prev)}>
46 |                         <span className="mr-1">Export data</span>
47 |                         <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /> </svg>
48 |                     </button>
49 |                     {
50 |                         exportMenu
51 |                             ? (
52 |                                 <ul className="dropdown-menu absolute w-full shadow-xl bg-exportButtonMenu mt-1 rounded-md overflow-hidden z-50">
53 |                                     <li onClick={() => exportToCSV(preview)} className="hover:bg-exportButtonMenuHover py-1 px-2 block whitespace-no-wrap">.csv</li>
54 |                                     <li onClick={() => exportToJSON(preview)} className="hover:bg-exportButtonMenuHover py-1 px-2 block whitespace-no-wrap">.json</li>
55 |                                 </ul>
56 |                             )
57 |                             : null
58 |                     }
59 | 
60 |                 </div>
61 |             </div>
62 |             <div className="mt-2 pt-0 p-4 h-full overflow-y-auto">
63 |                 {typeof preview === "string" ? (
64 |                     <div>{preview}</div>
65 |                 ) : (
66 |                     <Table data={preview} />
67 |                 )}
68 |             </div>
69 |         </>
70 |     );
71 | }


--------------------------------------------------------------------------------
/src/components/Canvas/customNodes/SortDataNode.tsx:
--------------------------------------------------------------------------------
 1 | import { startTransition, useCallback, useEffect, useMemo, useState } from "react";
 2 | import { Handle, NodeProps, Position } from "reactflow";
 3 | import { sortData } from "@Utils";
 4 | import { EMPTY_STring } from "@Constants";
 5 | import { IconArrowsSort } from '@tabler/icons-react';
 6 | import { setPreview, useAppDispatch } from "@Services";
 7 | import { ORDER_ASC, NEGATIVE_ONE, ORDER_DESC } from '@Constants';
 8 | 
 9 | export function SortDataNode({ id, data }: NodeProps<NodeData>) {
10 |     const [column, setColumn] = useState<string>(EMPTY_STring);
11 |     const [order, setOrder] = useState<string>(ORDER_ASC);
12 |     const dispatch = useAppDispatch();
13 | 
14 |     useEffect(() => {
15 |         setColumn(EMPTY_STring);
16 |     }, [data]);
17 | 
18 |     const options = useMemo(() => {
19 |         return [
20 |             ...(data
21 |                 ? data.list[0].map((item: string, index: number) => (
22 |                     <option key={item} value={index} className="text-sm cursor-pointer">{item}</option>
23 |                 ))
24 |                 : [<option value={NEGATIVE_ONE}>No column selected</option>]),
25 |         ];
26 |     }, [data]);
27 | 
28 |     const previewClickHandler = useCallback(() => {
29 |         startTransition(() => {
30 |             dispatch(
31 |                 setPreview(
32 |                     sortData({
33 |                         tableData: data?.list || [],
34 |                         sortConfig: { column, order },
35 |                     })
36 |                 )
37 |             );
38 |         });
39 |     }, [column, data?.list, dispatch, order]);
40 | 
41 |     console.log(data)
42 | 
43 |     return (
44 |         <>
45 |             <Handle type="target" position={Position.Left} id={`${id}_target`} />
46 |             <div className="rounded-md overflow-hidden shadow-lg bg-card flex flex-col p-2 min-w-44 justify-center items-start">
47 |                 <span className="flex justify-center items-start text-sm font-bold mb-2"><IconArrowsSort size={18} className="mr-1" />Sort</span>
48 |                 <label className="mb-1">Column</label>
49 |                 <select
50 |                     value={column}
51 |                     className="block appearance-none w-full bg-gray-900 border border-gray-600 text-gray-100 py-2 px-2 rounded leading-tight focus:outline-none mb-2"
52 |                     onChange={(e) => {
53 |                         setColumn(e.target.value);
54 |                     }}
55 |                 >
56 |                     {options}
57 |                 </select>
58 |                 <label className="mb-1">Sort by</label>
59 |                 <select
60 |                     value={order}
61 |                     className="block appearance-none w-full bg-gray-900 border border-gray-600 text-gray-100 py-2 px-2 rounded leading-tight focus:outline-none mb-2"
62 |                     onChange={(e) => {
63 |                         setOrder(e.target.value);
64 |                     }}
65 |                 >
66 |                     <option value={ORDER_ASC}>asc</option>
67 |                     <option value={ORDER_DESC}>desc</option>
68 |                 </select>
69 |                 <button
70 |                     className="rounded bg-background/60 hover:bg-background p-1.5 px-2.5 self-end"
71 |                     onClick={previewClickHandler}
72 |                 >
73 |                     Run
74 |                 </button>
75 |             </div>
76 |         </>
77 |     );
78 | }


--------------------------------------------------------------------------------
/src/components/Canvas/customNodes/FileUploadNode.tsx:
--------------------------------------------------------------------------------
 1 | import { startTransition, useCallback } from "react";
 2 | import { Handle, NodeProps, Position } from "reactflow";
 3 | import { getTableDataFromText } from "@Utils";
 4 | import { IconFileTypeCsv } from '@tabler/icons-react';
 5 | import { setPreview, updateNodeData, useAppDispatch } from "@Services";
 6 | 
 7 | const fileReader = new FileReader();
 8 | 
 9 | export function FileUploadNode({ id, data }: NodeProps<NodeData>) {
10 |     const dispatch = useAppDispatch();
11 | 
12 |     const saveFile = useCallback(
13 |         (e: { target: { files: FileList | null; }; }) => {
14 |             const file = e.target?.files;
15 |             if (file) {
16 |                 fileReader.onload = (event) => {
17 |                     const csvOutput = event?.target?.result;
18 |                     dispatch(
19 |                         updateNodeData({
20 |                             id,
21 |                             data: {
22 |                                 name: file[0].name,
23 |                                 list: getTableDataFromText(csvOutput as string),
24 |                             },
25 |                         })
26 |                     );
27 |                     startTransition(() => {
28 |                         dispatch(setPreview(getTableDataFromText(csvOutput as string) || []));
29 |                     });
30 |                 };
31 |                 fileReader.readAsText(file[0]);
32 |             }
33 |         },
34 |         [dispatch, id]
35 |     );
36 | 
37 |     const previewClickHandler = useCallback(() => {
38 |         startTransition(() => {
39 |             dispatch(setPreview(data?.list || []));
40 |         });
41 |     }, [data, dispatch]);
42 | 
43 |     return (
44 |         <>
45 |             <div className="rounded-md overflow-hidden shadow-lg bg-card flex flex-col p-2 min-w-44 justify-center items-center">
46 |                 <span className="flex justify-center items-start text-sm font-bold mb-2 self-start">
47 |                     <IconFileTypeCsv size={18} className="mr-1"/>
48 |                     {data ? "CSV File" : "Upload CSV File"}
49 |                 </span>
50 |                 {data ? (
51 |                     <>
52 |                         {data.name && (
53 |                             <span className="text-sm font-bold mb-2 self-start">
54 |                                 {data.name}
55 |                             </span>
56 |                         )}
57 |                         <button
58 |                             className="nodrag rounded bg-background/60 p-1.5 px-2.5 self-end mt-2 hover:bg-background"
59 |                             onClick={previewClickHandler}
60 |                         >
61 |                             Run
62 |                         </button>
63 |                     </>
64 |                 ) : (
65 |                     <input
66 |                         type="file"
67 |                         className="nodrag block w-full
68 |           file:mr-4 file:py-2 file:px-4 file:rounded-md
69 |           file:border-0 file:text-sm file:font-semibold
70 |           file:bg-background file:text-white
71 |           hover:text-slate cursor-pointer"
72 |                         id="custom-input"
73 |                         onChange={saveFile}
74 |                         hidden
75 |                     />
76 |                 )}
77 |             </div>
78 |             {
79 |                 data
80 |                     ? <span>[DATASET] {data?.list?.length - 1} rows | {data?.list?.[0]?.length} columns</span>
81 |                     : null
82 |             }
83 |             <Handle type="source" position={Position.Right} id={`${id}_source`} />
84 |         </>
85 |     );
86 | }


--------------------------------------------------------------------------------
/src/components/Header/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useCallback, useState, useEffect } from "react";
 2 | import { Link, useNavigate, useLocation } from "react-router-dom";
 3 | import logo from '@Assets/logo_48.png';
 4 | import { OnCloseType } from "./types";
 5 | import { HOME_PATH } from "@Routes";
 6 | import { SaveModal } from "./SaveModal";
 7 | import { MODAL_SAVE } from "@Constants";
 8 | import { IconFolderPlus, IconDeviceFloppy, IconX } from '@tabler/icons-react';
 9 | import { createWorkflow, getCurrentWorkflowSelectors, updateWorkflow, useAppDispatch, useAppSelector, resetCurrentWorkflow } from "@Services";
10 | 
11 | export function Header() {
12 |     const dispatch = useAppDispatch();
13 |     const currentWorkflow = useAppSelector(getCurrentWorkflowSelectors);
14 |     const [isOpen, setIsOpen] = useState(false);
15 |     const location = useLocation();
16 |     const navigate = useNavigate();
17 | 
18 |     useEffect(() => {
19 |         document.title = `Workflow Builder ${currentWorkflow?.name ? `| ${currentWorkflow?.name}` : ''}`;
20 |     }, [currentWorkflow]);
21 | 
22 |     const onClose = useCallback(
23 |         ({ type, data }: Parameters<OnCloseType>[0]) => {
24 |             setIsOpen(false);
25 |             if (type === MODAL_SAVE && currentWorkflow) {
26 |                 if (data?.id === 0) {
27 |                     dispatch(createWorkflow({ ...currentWorkflow, id: data?.id, name: data?.name }));
28 |                 } else {
29 |                     dispatch(
30 |                         updateWorkflow({
31 |                             id: data?.id,
32 |                             data: { ...currentWorkflow, name: data?.name },
33 |                         })
34 |                     );
35 |                 }
36 |                 navigate(HOME_PATH);
37 |             }
38 |         },
39 |         [currentWorkflow, dispatch, navigate]
40 |     );
41 | 
42 |     return (
43 |         <>
44 |             <header className="flex justify-between items-center bg-header border-b border-border px-4 h-12">
45 |                 <div className="flex items-center h-full font-extrabold text-2xl tracking-tighter text-[#4f4e60]">
46 |                     <img src={logo} alt="logo" className="w-8 mr-2" />
47 |                     <span className="hidden md:block">Workflow Builder</span>
48 |                 </div>
49 |                 {
50 |                     currentWorkflow && location?.pathname !== HOME_PATH
51 |                         ? (
52 |                             <span className="flex justify-center items-center text-sm font-semibold">
53 |                                 <IconFolderPlus size={18} />
54 |                                 <span className="ml-1">{currentWorkflow?.name}</span>
55 |                             </span>
56 |                         )
57 |                         : null
58 |                 }
59 |                 {
60 |                     currentWorkflow && location?.pathname !== HOME_PATH
61 |                         ? (
62 |                             <div className="flex gap-1 md:gap-2 lg:gap-4">
63 |                                 <button onClick={() => setIsOpen(true)} title="Click to save workflow" className="flex justify-center items-center rounded border border-border p-1.5 px-4 text-xs font-bold hover:bg-border">
64 |                                     <IconDeviceFloppy size={18} />
65 |                                     <span className="ml-1">Save workflow</span>
66 |                                 </button>
67 |                                 <Link onClick={() => dispatch(resetCurrentWorkflow())} to={HOME_PATH} title="Click to close workflow" className="flex justify-center items-center rounded border border-border p-1.5 px-1.5 text-xs font-bold hover:bg-border">
68 |                                     <IconX size={18} />
69 |                                 </Link>
70 |                             </div>
71 |                         )
72 |                         : null
73 |                 }
74 |             </header>
75 |             {isOpen && (
76 |                 <SaveModal
77 |                     id={currentWorkflow?.id}
78 |                     workflowName={currentWorkflow?.name}
79 |                     onClose={onClose}
80 |                 />
81 |             )}
82 |         </>
83 |     );
84 | }


--------------------------------------------------------------------------------
/src/components/Canvas/customNodes/FilterDataNode.tsx:
--------------------------------------------------------------------------------
 1 | import { startTransition, useCallback, useEffect, useMemo, useState } from "react";
 2 | import { Handle, NodeProps, Position } from "reactflow";
 3 | import { filterData } from "@Utils";
 4 | import { IconFilter } from '@tabler/icons-react';
 5 | import { EMPTY_STring, NEGATIVE_ONE, EQUAL, NOT_EQUAL, INCLUDES, NOT_INCLUDES } from "@Constants";
 6 | import { setPreview, useAppDispatch } from "@Services";
 7 | 
 8 | export function FilterDataNode({ id, data }: NodeProps<NodeData>) {
 9 |     const [column, setColumn] = useState<string>(EMPTY_STring);
10 |     const [operation, setOperation] = useState<string>(EQUAL);
11 |     const [filter, setFilter] = useState<string>(EMPTY_STring);
12 |     const dispatch = useAppDispatch();
13 | 
14 |     useEffect(() => {
15 |         setColumn(EMPTY_STring);
16 |     }, [data]);
17 | 
18 |     const options = useMemo(() => {
19 |         return [
20 |             ...(data
21 |                 ? data.list[0].map((item: string, index: number) => (
22 |                     <option key={item} value={index} className="text-sm cursor-pointer">{item}</option>
23 |                 ))
24 |                 : [<option value={NEGATIVE_ONE}>No column selected</option>]
25 |             ),
26 |         ];
27 |     }, [data]);
28 | 
29 |     const previewClickHandler = useCallback(() => {
30 |         startTransition(() => {
31 |             dispatch(
32 |                 setPreview(
33 |                     filterData({
34 |                         tableData: data?.list || [],
35 |                         filterConfig: { column, operation, filter },
36 |                     })
37 |                 )
38 |             );
39 |         });
40 |     }, [column, data?.list, dispatch, filter, operation]);
41 | 
42 |     return (
43 |         <>
44 |             <Handle type="target" position={Position.Left} id={`${id}_target`} />
45 |             <div className="rounded-md overflow-hidden shadow-lg bg-card flex flex-col p-2 min-w-44 justify-center items-start">
46 |                 <span className="flex justify-center items-start text-sm font-bold mb-2"><IconFilter size={18} className="mr-1" />Filter</span>
47 |                 <label className="mb-1">Column</label>
48 |                 <select
49 |                     value={column}
50 |                     defaultValue=""
51 |                     className="nodrag block appearance-none w-full bg-gray-900 border border-gray-600 text-gray-100 py-2 px-2 rounded leading-tight focus:outline-none mb-2"
52 |                     onChange={(e) => {
53 |                         setColumn(e.target.value);
54 |                     }}
55 |                 >
56 |                     {options}
57 |                 </select>
58 |                 <label className="mb-1">Condition</label>
59 |                 <select
60 |                     value={operation}
61 |                     className="nodrag block appearance-none w-full bg-gray-900 border border-gray-600 text-gray-100 py-2 px-2 rounded leading-tight focus:outline-none mb-2"
62 |                     onChange={(e) => {
63 |                         setOperation(e.target.value);
64 |                     }}
65 |                 >
66 |                     <option value={EQUAL}>equals to</option>
67 |                     <option value={NOT_EQUAL}>not equals to</option>
68 |                     <option value={INCLUDES}>includes</option>
69 |                     <option value={NOT_INCLUDES}>does not include</option>
70 |                 </select>
71 |                 <label className="mb-1">Filter</label>
72 |                 <input
73 |                     value={filter}
74 |                     type="text"
75 |                     className="nodrag block appearance-none w-full bg-gray-900 border border-gray-600 text-gray-100 py-2 px-2 rounded leading-tight focus:outline-none mb-2"
76 |                     onChange={(e) => {
77 |                         setFilter(e.target.value);
78 |                     }}
79 |                 />
80 | 
81 |                 <button
82 |                     className="nodrag rounded bg-background/60 hover:bg-background p-1.5 px-2.5 self-end"
83 |                     onClick={previewClickHandler}
84 |                 >
85 |                     Run
86 |                 </button>
87 |             </div>
88 |         </>
89 |     );
90 | }


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | .
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior,  harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Drag & Drop workflow builder
  2 | 
  3 | 🌐 Website : [wbuilder](https://wbuilder.vercel.app/)
  4 | 
  5 | ## 📑Project Description
  6 | 
  7 |     Create a Workflow Builder application where users can create, edit, and visualize different workflows. Each workflow consists of multiple steps (nodes) and the relationships (edges) between them. Users should be able to drag and drop different types of nodes (e.g., filter, find, reduce, map, array methods) onto a canvas, and then draw lines between them to represent the workflow.
  8 | 
  9 |     Task is to create a workflow building that performs dynamic operations on large amounts of data. You will have multiple CSVs in your local project. User can perform various operations on data to see final result on the CSV user has selected. This CSV might contain million records too.
 10 | 
 11 | ![screen1](./template/screen1.png)
 12 | ![screen2](./template/screen2.png)
 13 | ![screen3](./template/screen3.png)
 14 | ![screen4](./template/screen4.png)
 15 | 
 16 | <br/>
 17 | 
 18 | ## 👨🏻‍💻 Developer's Talk
 19 | Developed by <a href="https://github.com/debrajhyper">Debraj Karmakar</a>
 20 | <span style="display:inline-flex; justify-content:space-evenly; width:20%;">
 21 | <a href="https://twitter.com/debraj_010">
 22 |   <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/twitter/twitter-original.svg" width="20px"/>
 23 | </a>
 24 | <a href="https://www.linkedin.com/in/debrajkarmakar010/">
 25 |   <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" width="20px"/>
 26 | </a>
 27 | </span>
 28 | 
 29 | >Just wrapped up <a href="https://wbuilder.vercel.app/">Workflow Builder</a>, a React& Redux advance project. A compact journey with big learnings. From UI design to workflow canvas state management, faced challenges that shaped my skills as a front-end dev.
 30 | 
 31 | <br/>
 32 | 
 33 | ## 🚀 Tech Stack
 34 | 
 35 | - HTML5
 36 | - CSS3
 37 | - Vite
 38 | - React
 39 | - Typescript
 40 | - React Flow
 41 | - React Hooks
 42 | - React Redux
 43 | - React Router
 44 | - Tailwind CSS
 45 | - Redux Toolkit
 46 | - Tabler Icons
 47 | - React Resizable Panels
 48 | 
 49 | <br/>
 50 | 
 51 | ## 📁Folder Structure
 52 | ```typescript
 53 | ├───data
 54 | ├───public
 55 | ├───src
 56 | │   ├───app
 57 | │   ├───assets
 58 | │   ├───components
 59 | │   │   ├───BlockLibrary
 60 | │   │   ├───Canvas
 61 | │   │   │   └───customNodes      
 62 | │   │   ├───Header
 63 | │   │   ├───Table
 64 | │   │   └───WorkflowCard
 65 | │   ├───constants
 66 | │   ├───hooks
 67 | │   ├───layout
 68 | │   ├───routes
 69 | │   ├───services
 70 | │   ├───utils
 71 | │   └───view
 72 | │       ├───Home
 73 | │       ├───NoMatchFound
 74 | │       └───WorkflowBuilder
 75 | └───template
 76 | ```
 77 | <br/>
 78 | 
 79 | ## 🔐Key Features
 80 | 
 81 | - [✔] The dashboard will display all the workflows user has created. Users can either create a new workflow or edit the existing one.
 82 | - [✔] The user will be represented with a blank canvas.
 83 | - [✔] In the left panel,
 84 |     - there will be options to choose CSV data to perform operations on. (These CSVs will reside in the local project folder).
 85 |     - These CSV data will be input of the next node.
 86 |     - there will be nodes which represents Array methods such as filter, map, find etc.
 87 | - [✔] User will select any node and will drop in canvas and will take few required inputs such as,
 88 |     - in sort method, column name & order
 89 |     - in filter method,
 90 |         - column name,
 91 |         - condition (is equal, is not equal to, includes, does not include)
 92 |         - value (this will be dynamically shown based on condition type selection)
 93 | - [✔] All these blocks connected via each other and output of this block passed to the next connected block and perform operation only on the previous node’s output data.
 94 | - [✔] There is a ``Run`` button inside every block and upon clicking it, final output will be shown in table format in bottom panel (which is collapsible)
 95 | - [✔] These data has option to “Export data” in json or in CSV format again.
 96 | - [✔] There is a ``Save workflow`` button on header. By clicking it that workflow along with its unique name should be stored in web storage (localStorage)
 97 | - [✔] The application should handle large data efficiently and demonstrate good performance.
 98 | 
 99 | <br/>
100 | 
101 | ## ✅Development Technology
102 | 
103 | 1. [✅] The application is built using React and related technology stack (Redux, React-Router, etc).
104 | 2. [✅] The workflow builder uses [React Flow](https://reactflow.dev/) and provides a seamless user experience.
105 | 3. [✅] Components are well-structured and properly organized.
106 | 4. [✅] State management is handled efficiently using Redux and context API.
107 | 5. [✅] Use of Redux-toolkit for state management.
108 | 6. [✅] React hooks are used where necessary.
109 | 7. [✅] React best practices are followed.
110 | 8. [✅] Proper error handling is implemented.
111 | 9. [✅] Proper use of async operations and Promises.
112 | 10. [✅] The code is clean, well-structured, and follows a recognized style guide ``(Airbnb's style guide)``.
113 | 11. [✅] Code runs with eslint enabled.
114 | 12. [✅] Error messages is proper along with fallback UI where there are no data.
115 | 13. [✅] Runtime UI crashes are not allowed, even if it happens anyhow, It should have a fallback UI  with a gradient background and error message texts upon it which should be clearly readable.
116 | 
117 | <br/>
118 | 
119 | ## 🏃🏻‍♂️ Run Locally
120 | 
121 | Clone the project
122 | ```
123 |   $git clone https://github.com/debrajhyper/workflow-builder.git
124 | ```
125 | 
126 | Go to the project directory
127 | ```
128 |   cd workflow-builder
129 | ```
130 | 
131 | Install dependencies
132 | ```
133 |   $npm install
134 | ```
135 | 
136 | Start the dev server
137 | ```
138 |   $npm run dev
139 | ```
140 | 
141 | <br/>
142 | 


--------------------------------------------------------------------------------
/src/assets/error.svg:
--------------------------------------------------------------------------------
1 | <svg id="aa03ddf9-f8f2-4819-a4ce-be9b0a220741" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1119.60911" height="699" viewBox="0 0 1119.60911 699"><title>server down</title><circle cx="292.60911" cy="213" r="213" fill="#f2f2f2"/><path d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819" transform="translate(-31.39089 -100.5)" fill="#2f2e41"/><path d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356" transform="translate(-31.39089 -100.5)" fill="#30e0a1"/><path d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288" transform="translate(-31.39089 -100.5)" fill="#30e0a1"/><path d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788" transform="translate(-31.39089 -100.5)" fill="#2f2e41"/><path d="M117.22379,292.83905s15.41555-.47479,20.06141-3.783,23.713-7.2585,24.86553-1.95278,23.16671,26.38821,5.76263,26.5286-40.43935-2.711-45.07627-5.53549S117.22379,292.83905,117.22379,292.83905Z" transform="translate(-31.39089 -100.5)" fill="#a8a8a8"/><path d="M168.224,311.78489c-17.40408.14042-40.43933-2.71094-45.07626-5.53548-3.53126-2.151-4.93843-9.86945-5.40926-13.43043-.32607.014-.51463.02-.51463.02s.97638,12.43276,5.61331,15.2573,27.67217,5.67589,45.07626,5.53547c5.02386-.04052,6.7592-1.82793,6.66391-4.47526C173.87935,310.756,171.96329,311.75474,168.224,311.78489Z" transform="translate(-31.39089 -100.5)" opacity="0.2"/><ellipse cx="198.60911" cy="424.5" rx="187" ry="25.43993" fill="#3f3d56"/><ellipse cx="198.60911" cy="424.5" rx="157" ry="21.35866" opacity="0.1"/><ellipse cx="836.60911" cy="660.5" rx="283" ry="38.5" fill="#3f3d56"/><ellipse cx="310.60911" cy="645.5" rx="170" ry="23.12721" fill="#3f3d56"/><path d="M494,726.5c90,23,263-30,282-90" transform="translate(-31.39089 -100.5)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2"/><path d="M341,359.5s130-36,138,80-107,149-17,172" transform="translate(-31.39089 -100.5)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2"/><path d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566" transform="translate(-31.39089 -100.5)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2"/><path d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z" transform="translate(-31.39089 -100.5)" fill="#2f2e41"/><path d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z" transform="translate(-31.39089 -100.5)" opacity="0.1"/><rect x="578.43291" y="212.68859" width="513.25314" height="357.51989" rx="18.04568" fill="#2f2e41"/><rect x="595.70294" y="231.77652" width="478.71308" height="267.83694" fill="#3f3d56"/><circle cx="835.05948" cy="223.29299" r="3.02983" fill="#f2f2f2"/><path d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z" transform="translate(-31.39089 -100.5)" fill="#2f2e41"/><polygon points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466" fill="#2f2e41"/><path d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z" transform="translate(-31.39089 -100.5)" fill="#2f2e41"/><path d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z" transform="translate(-31.39089 -100.5)" opacity="0.1"/><ellipse cx="1066.53846" cy="654.13477" rx="7.87756" ry="2.42386" fill="#f2f2f2"/><circle cx="835.05948" cy="545.66686" r="11.51335" fill="#f2f2f2"/><polygon points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466" opacity="0.1"/><rect x="108.60911" y="159" width="208" height="242" fill="#2f2e41"/><rect x="87.60911" y="135" width="250" height="86" fill="#3f3d56"/><rect x="87.60911" y="237" width="250" height="86" fill="#3f3d56"/><rect x="87.60911" y="339" width="250" height="86" fill="#3f3d56"/><rect x="271.60911" y="150" width="16" height="16" fill="#30e0a1" opacity="0.4"/><rect x="294.60911" y="150" width="16" height="16" fill="#30e0a1" opacity="0.8"/><rect x="317.60911" y="150" width="16" height="16" fill="#30e0a1"/><rect x="271.60911" y="251" width="16" height="16" fill="#30e0a1" opacity="0.4"/><rect x="294.60911" y="251" width="16" height="16" fill="#30e0a1" opacity="0.8"/><rect x="317.60911" y="251" width="16" height="16" fill="#30e0a1"/><rect x="271.60911" y="352" width="16" height="16" fill="#30e0a1" opacity="0.4"/><rect x="294.60911" y="352" width="16" height="16" fill="#30e0a1" opacity="0.8"/><rect x="317.60911" y="352" width="16" height="16" fill="#30e0a1"/><circle cx="316.60911" cy="538" r="79" fill="#2f2e41"/><rect x="280.60911" y="600" width="24" height="43" fill="#2f2e41"/><rect x="328.60911" y="600" width="24" height="43" fill="#2f2e41"/><ellipse cx="300.60911" cy="643.5" rx="20" ry="7.5" fill="#2f2e41"/><ellipse cx="348.60911" cy="642.5" rx="20" ry="7.5" fill="#2f2e41"/><circle cx="318.60911" cy="518" r="27" fill="#fff"/><circle cx="318.60911" cy="518" r="9" fill="#3f3d56"/><path d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z" transform="translate(-31.39089 -100.5)" fill="#30e0a1"/><ellipse cx="417.21511" cy="611.34365" rx="39.5" ry="12.40027" transform="translate(-238.28665 112.98044) rotate(-23.17116)" fill="#2f2e41"/><ellipse cx="269.21511" cy="664.34365" rx="39.5" ry="12.40027" transform="translate(-271.07969 59.02084) rotate(-23.17116)" fill="#2f2e41"/><path d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z" transform="translate(-31.39089 -100.5)" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/src/services/workflowSlice.ts:
--------------------------------------------------------------------------------
  1 | import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit";
  2 | import { LOCAL_STORAGE_KEY, NO_PREVIEW, NODE_TYPE_FILE_UPLOAD, STORE_NAME } from "@Constants";
  3 | import { RootState } from "./workflowStore";
  4 | import { Connection, Edge, EdgeChange, Node, NodeRemoveChange } from "reactflow";
  5 | import { WorkflowBuilderState, WorkflowType } from "types";
  6 | 
  7 | const storedItems: string | null = localStorage.getItem(LOCAL_STORAGE_KEY);
  8 | const parsedItems = storedItems ? JSON.parse(storedItems) : null;
  9 | const localItems = parsedItems !== null ? parsedItems : [];
 10 | const initialState: WorkflowBuilderState = {
 11 |     items: localItems || [],
 12 |     currentItem: null,
 13 | };
 14 | 
 15 | export const workflowBuilderSlice = createSlice({
 16 |     name: STORE_NAME,
 17 |     initialState,
 18 |     reducers: {
 19 |         setCurrentWorkflow: (state, action: PayloadAction<WorkflowType>) => {
 20 |             state.currentItem = action.payload;
 21 |         },
 22 |         resetCurrentWorkflow: (state) => {
 23 |             state.currentItem = initialState.currentItem;
 24 |         },
 25 |         createWorkflow: (state, action: PayloadAction<WorkflowType>) => {
 26 |             // state.currentItem = initialState.currentItem;
 27 |             const newWorkflow = { ...action.payload, id: state.items.length + 1 };
 28 |             state.items.push(newWorkflow);
 29 |             state.currentItem = newWorkflow;
 30 |             localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(state.items));
 31 |         },
 32 |         updateWorkflow: (state, action: PayloadAction<{ id: number; data: WorkflowType }>) => {
 33 |             // state.currentItem = initialState.currentItem;
 34 |             const { id, data } = action.payload;
 35 |             const index = state.items.findIndex((item) => item.id === id);
 36 |             state.items[index] = data;
 37 |             state.currentItem = data;
 38 |             localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(state.items));
 39 |         },
 40 |         addNewNode: (state, action: PayloadAction<Node>) => {
 41 |             state.currentItem?.nodes.push({
 42 |                 ...action.payload,
 43 |                 id: (state.currentItem?.nodes.length + 1).toString(),
 44 |             });
 45 |         },
 46 |         updateNodes: (state, action: PayloadAction<Node[]>) => {
 47 |             if (state.currentItem) {
 48 |                 state.currentItem.nodes = action.payload;
 49 |             }
 50 |         },
 51 |         updateNodeData: (state, action: PayloadAction<{ id: string; data: unknown }>) => {
 52 |             const { id, data } = action.payload;
 53 |             if (state.currentItem) {
 54 |                 const index = state.currentItem.nodes.findIndex(
 55 |                     (node: { id: string; }) => node.id === id
 56 |                 );
 57 |                 state.currentItem.nodes[index].data = data;
 58 | 
 59 |                 if (
 60 |                     state.currentItem.nodes[index].type === NODE_TYPE_FILE_UPLOAD &&
 61 |                     state.currentItem.edges.some((edge: { source: string; }) => edge.source === id)
 62 |                 ) {
 63 |                     const filteredEdges = state.currentItem.edges.filter(
 64 |                         (edge: { source: string; }) => edge.source === id
 65 |                     );
 66 |                     filteredEdges.forEach((edge) => {
 67 |                         if (state.currentItem) {
 68 |                             const index = state.currentItem.nodes.findIndex(
 69 |                                 (node) => node.id === edge.target
 70 |                             );
 71 |                             state.currentItem.nodes[index].data = data;
 72 |                         }
 73 |                     });
 74 |                 }
 75 |             }
 76 |         },
 77 |         updateEdges: (
 78 |             state,
 79 |             action: PayloadAction<{
 80 |                 edges: Edge[];
 81 |                 currentEdge: Connection | EdgeChange[];
 82 |             }>
 83 |         ) => {
 84 |             const { edges, currentEdge } = action.payload;
 85 |             if (state.currentItem) {
 86 |                 if (currentEdge instanceof Array) {
 87 |                     if (currentEdge[0].type === "remove") {
 88 |                         const edgeIndex = state.currentItem.edges.findIndex(
 89 |                             (edge) => edge.id === (currentEdge[0] as NodeRemoveChange).id
 90 |                         );
 91 |                         const foundEdge = state.currentItem.edges[edgeIndex];
 92 |                         const targetNodeIndex = state.currentItem.nodes.findIndex(
 93 |                             (node) => node.id === foundEdge.target
 94 |                         );
 95 |                         state.currentItem.nodes[targetNodeIndex].data = null;
 96 |                     }
 97 |                 } else {
 98 |                     const sourceNodeIndex = state.currentItem.nodes.findIndex(
 99 |                         (node) => node.id === currentEdge.source
100 |                     );
101 |                     const targetNodeIndex = state.currentItem.nodes.findIndex(
102 |                         (node) => node.id === currentEdge.target
103 |                     );
104 |                     if (
105 |                         state.currentItem.nodes[sourceNodeIndex].type === NODE_TYPE_FILE_UPLOAD
106 |                     ) {
107 |                         state.currentItem.nodes[targetNodeIndex].data =
108 |                             state.currentItem.nodes[sourceNodeIndex].data;
109 |                     } else {
110 |                         state.currentItem.nodes[targetNodeIndex].data = null;
111 |                     }
112 |                 }
113 |                 state.currentItem.edges = edges;
114 |             }
115 |         },
116 |         setPreview: (state, action) => {
117 |             if (state.currentItem) {
118 |                 state.currentItem.preview = action.payload;
119 |             }
120 |         },
121 |         resetPreview: (state) => {
122 |             if (state.currentItem) {
123 |                 state.currentItem.preview =
124 |                     initialState.currentItem?.preview || NO_PREVIEW;
125 |             }
126 |         },
127 |     }
128 | });
129 | 
130 | export const {
131 |     createWorkflow,
132 |     resetCurrentWorkflow,
133 |     updateWorkflow,
134 |     addNewNode,
135 |     setPreview,
136 |     resetPreview,
137 |     setCurrentWorkflow,
138 |     updateNodes,
139 |     updateEdges,
140 |     updateNodeData, } = workflowBuilderSlice.actions;
141 | 
142 | 
143 | export const getWorkflowByIdSelectors = (state: RootState, workflowId?: number) => {
144 |     return (
145 |         state.workFlowBuilder.items.find((item: { id: number | undefined; }) => item.id === workflowId) || null
146 |     );
147 | };
148 | 
149 | export const getWorkFlowDataSelector = (state: RootState) => {
150 |     return state.workFlowBuilder;
151 | };
152 | 
153 | export const getWorkflowListSelectors = createSelector(getWorkFlowDataSelector, ({ items }) => {
154 |     return items.map((workflow: { id: number; name: string; }) => ({
155 |         id: workflow.id,
156 |         name: workflow.name,
157 |     }));
158 | }
159 | );
160 | 
161 | export const getPreviewSelectors = createSelector(
162 |     getWorkFlowDataSelector,
163 |     ({ currentItem }) => {
164 |         return currentItem?.preview || NO_PREVIEW;
165 |     }
166 | );
167 | 
168 | export const getNodesSelectors = createSelector(
169 |     getWorkFlowDataSelector,
170 |     ({ currentItem }) => {
171 |         return currentItem?.nodes || [];
172 |     }
173 | );
174 | 
175 | export const getEdgesSelectors = createSelector(
176 |     getWorkFlowDataSelector,
177 |     ({ currentItem }) => {
178 |         return currentItem?.edges || [];
179 |     }
180 | );
181 | 
182 | export const getCurrentWorkflowSelectors = createSelector(
183 |     getWorkFlowDataSelector,
184 |     ({ currentItem }) => {
185 |         return currentItem || null;
186 |     }
187 | );
188 | 
189 | 
190 | 
191 | 
192 | 
193 | export default workflowBuilderSlice.reducer;


--------------------------------------------------------------------------------