Skip to content
Commits on Source (2)
  • pratyush's avatar
    Initialize Vite + React + TypeScript setup · c5438b05
    pratyush authored 
    Added Vite as the build tool with React and TypeScript integration. Included essential configurations like ESLint setup, CSS styling, and npm scripts. Provides a basic app structure with React components and HMR functionality.
    c5438b05
  • pratyush's avatar
    Merge branch 'develop' into 'main' · e69499ce
    pratyush authored 
    Initialize Vite + React + TypeScript setup

See merge request !1
    e69499ce
Expand all Hide whitespace changes
Inline Side-by-side
index.html
View file @ e69499ce
......@@ -8,6 +8,7 @@
</head>
<body>
<div id="root"></div>
<div id="svg-tree"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
package-lock.json
View file @ e69499ce
This diff is collapsed.
src/Activity/ACTIVITY_TYPES.ts 0 → 100644
View file @ e69499ce
export enum ACTIVITY_TYPES {
HS = "HS",
SYSTEM = "SYSTEM",
DECISION = "DECISION",
START = "START",
END = "END"
}
\ No newline at end of file
src/Activity/Activity.module.css 0 → 100644
View file @ e69499ce
.ACTIVITY {
position: relative;
border: 1px solid red;
width: 100px;
height: 100px;
border-radius: 5px;
}
.START, .END {
border-radius: 50%;
width: 50px;
height: 50px;
}
.START .ACTIVITY_TYPE, .END .ACTIVITY_TYPE {
position: relative;
left: 0;
top: 0;
/*font-size: 1.5em;*/
font-weight: bold;
color: white;
text-align: center;
line-height: 50px;
vertical-align: middle;
}
.ACTIVITY_TYPE {
position: absolute;
left: 5px;
top: 5px;
}
\ No newline at end of file
src/Activity/Activity.tsx 0 → 100644
View file @ e69499ce
import {ACTIVITY_TYPES} from "./ACTIVITY_TYPES.ts";
import classes from "./Activity.module.css";
import {FontAwesomeIcon, FontAwesomeIconProps} from "@fortawesome/react-fontawesome";
import {faUser, faGear, faPlay} from "@fortawesome/free-solid-svg-icons";
// import RenderCont from "../aaaa/RenderContent.tsx";
export default function ({type}: { type: ACTIVITY_TYPES }) {
let icon: FontAwesomeIconProps['icon'];
switch (type) {
case ACTIVITY_TYPES.START:
icon = faPlay;
break
case ACTIVITY_TYPES.HS:
icon = faUser;
break;
default:
icon = faGear;
}
return <div className={classes.ACTIVITY + " " + classes[type]}>
<FontAwesomeIcon icon={icon} className={classes.ACTIVITY_TYPE}/>
</div>
// return <div className={classes.ACTIVITY + " " + classes[type]}>
// {/*<RenderCont></RenderCont>*/}
// <FontAwesomeIcon icon={icon} className={classes.ACTIVITY_TYPE}/>
// </div>
}
\ No newline at end of file
src/App.css
View file @ e69499ce
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
padding: 0rem;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
color: #222;
background-color: #fff;
text-align: center;
}
......
src/App.tsx
View file @ e69499ce
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import WorkflowDetail from "./Workflows/view";
function App() {
const [count, setCount] = useState(0)
return (
<Router>
<Routes>
<Route path="/workflow/:id" element={<WorkflowDetail/>}/>
</Routes>
</Router>
);
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
src/Mermaid.tsx 0 → 100644
View file @ e69499ce
import mermaid from "mermaid";
import { useEffect } from "react";
mermaid.initialize({});
const Mermaid = ({ chart, id }: { chart: string; id: string }) => {
useEffect(() => {
console.log(chart);
document.getElementById(id)?.removeAttribute("data-processed");
mermaid.contentLoaded();
}, [chart, id]);
return (
<div className="mermaid" id={id}>
{chart}
</div>
);
};
export default Mermaid;
\ No newline at end of file
src/Workflows/view.tsx 0 → 100644
View file @ e69499ce
import {useState, useEffect} from "react";
import {useParams} from "react-router-dom";
import Mermaid from "../Mermaid.tsx";
const WorkflowDetail = () => {
const {id} = useParams();
const [data, setData] = useState<any>(null);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
const fetchWorkflow = async () => {
setLoading(true);
setError(null);
try {
// const response = await fetch(`/api/workFlow/${id}`);
// if (!response.ok) {
// throw new Error(`Error: ${response.status} ${response.statusText}`);
// }
// const responseData = await response.json();
let responseData = `
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`;
setData(responseData);
} catch (err: any) {
setError(err.message || "An unexpected error occurred.");
} finally {
setLoading(false);
}
};
fetchWorkflow();
}, [id]);
return (
<div>
{loading && <p>Loading...</p>}
{error && <p style={{color: "red"}}>{error}</p>}
{data && (
<div>
<h1>Workflow Data:</h1>
<Mermaid chart={data} id={id || ""}/>
</div>
)}
</div>
);
};
export default WorkflowDetail;
\ No newline at end of file
src/aaaa/RenderContent.tsx 0 → 100644
View file @ e69499ce
// import ApexTree from "apextree";
// import {TreeOptions} from "apextree/lib/settings/Options";
// import {ACTIVITY_TYPES} from "../Activity/ACTIVITY_TYPES.ts";
//
// export default function RenderCont() {
// const data = {
// "id": "idA",
// "data": {n: "Na", s: "Sa"},
// "children": [
// {
// "id": "idB",
// data: {n: "Nb", s: "Sb", t: ACTIVITY_TYPES.HS},
// "children": [
// {
// "id": "idC",
// data: {n: "Nc", s: "Sc", t: ACTIVITY_TYPES.DECISION}
// },
// {
// "id": "idD",
// data: {n: "Nd", s: "Sd", t: ACTIVITY_TYPES.START}
// }
// ]
// },
// {
// "id": "idD",
// data: {n: "Nd", s: "Sd", t: ACTIVITY_TYPES.START}
// }
// ]
// };
//
// const options: TreeOptions = {
// width: 700,
// height: 700,
// nodeWidth: 120,
// nodeHeight: 80,
// childrenSpacing: 100,
// siblingSpacing: 30,
// direction: 'top',
// contentKey: "data",
// canvasStyle: 'border: 1px solid black; background: #f6f6f6;',
// // nodeTemplate: (content) => {
// // console.log({content});
// // return <div>{content}</div>
// // }
// nodeTemplate: (content: { n: string; s: string; t: ACTIVITY_TYPES; }) => {
// let name = content?.n || "";
// let status = content?.s || "";
// let type: ACTIVITY_TYPES = content?.t || ACTIVITY_TYPES.HS;
// switch (type) {
// case ACTIVITY_TYPES.HS:
// return `<div style='display: flex;justify-content: space-around;align-items: center;height: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;'>name:${name} <br> status : ${status}</div>`;
// case ACTIVITY_TYPES.START:
// return `<div style='display: flex;justify-content: space-around;align-items: center;height: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; border-radius: :50%;'>name:${name}</div>`;
// case ACTIVITY_TYPES.DECISION:
// return `<div style='display: flex;justify-content: space-around;align-items: center;height: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; rotate: 45'>name:${name} <br> status : ${status}</div>`;
// }
//
// },
// tooltipMaxWidth: 120,
// enableTooltip: true,
// tooltipTemplate: (content: { n: any; }) => {
// return `<div style='display: flex;justify-content: space-between;text-align: center; align-items: center;padding: 10px;background-color: grey;color: white;'>${content.n}</div>`;
// },
// };
//
// const tree = new ApexTree(document.getElementById('svg-tree'), options);
// const graph = tree.render(data);
// console.log(graph);
// return <></>
// }
\ No newline at end of file
vite.config.ts 0 → 100644
View file @ e69499ce
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, "")
}
}
}
})