@flowuent-org/diagramming-core 1.0.5

package/apps/workflow/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "workflow",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/workflow/src",
+  "projectType": "application",
+  "targets": {},
+  "tags": []
+}

package/apps/workflow/src/app/app.module.css

@@ -0,0 +1 @@
+/* Your styles goes here. */

package/apps/workflow/src/app/app.spec.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+
+import App from './app';
+
+describe('App', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<App />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should have a greeting as the title', () => {
+    const { getByText } = render(<App />);
+    expect(getByText(/Welcome react-monorepo/gi)).toBeTruthy();
+  });
+});

package/apps/workflow/src/app/app.tsx

@@ -0,0 +1,370 @@
+import {InputAdornment, SelectChangeEvent, Stack, ThemeProvider,} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+import {Box, Button, Typography} from '@flowuent-labs/atoms';
+// import { UserList } from '@flowuent-labs/organisms';
+import {theme} from '../theme';
+import {
+  ActionTextField,
+  CloseableButton,
+  EditorTab,
+  HTTPVerbSelection,
+  ParamsActionField,
+  TableWithInlineView,
+} from '@flowuent-labs/molecules';
+import {EditorToolbar} from '@flowuent-labs/organisms';
+import {useCallback, useMemo, useState} from 'react';
+import {AccountCircle, AcUnit, MailOutline, NotificationsNone,} from '@mui/icons-material';
+import {ToolbarItem} from '@flowuent-labs/interfaces';
+
+import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
+import SettingsTabForm, {SettingsTabFormData,} from '../../../../packages/atoms/forms/SettingsTabForm';
+import AuthenticationTabForm from '../../../../packages/atoms/forms/AuthenticationTabForm';
+import jsonData from '../../../../packages/atoms/forms/AuthenticationTabForm/authenticationTabForm.json';
+
+const App = () => {
+  const [currentMode, setCurrentMode] = useState<
+    'bulk-edit' | 'key-value-edit'
+  >('bulk-edit');
+  // State to manage the active tab index
+  const [activeTab, setActiveTab] = useState(0);
+
+  // Function to handle tab changes
+  const handleTabChange = (newValue: number) => {
+    setActiveTab(newValue);
+    console.log('Active tab is', newValue);
+  };
+
+  const columns = [
+    {
+      id: 'key',
+      headerRenderer: () => <Typography variant="body2">Key</Typography>,
+      cellRenderer: (record: any) => {
+        return <Typography variant="body2">{record.value}</Typography>;
+      },
+    },
+    {
+      id: 'value',
+      headerRenderer: () => <Typography variant="body2">Value</Typography>,
+      cellRenderer: (record: any) => (
+        <Typography variant="body2">{record.value}</Typography>
+      ),
+    },
+    {
+      id: 'description',
+      headerRenderer: () => (
+        <Typography variant="body2">Description</Typography>
+      ),
+      cellRenderer: (record: any) => (
+        <Typography variant="body2">{record.value}</Typography>
+      ),
+    },
+    // Add more column descriptors as needed
+  ];
+
+  const rows = [
+    {
+      id: 1,
+      key: 'my key 1',
+      value: 'my value 1',
+      description: 'my description 1',
+    },
+    {
+      id: 2,
+      key: 'my key 2',
+      value: 'my value 2',
+      description: 'my description 2',
+    },
+    {
+      id: 3,
+      key: 'my key 3',
+      value: 'my value 3',
+      description: 'my description 3',
+    },
+    {
+      id: 4,
+      key: 'my key 4',
+      value: 'my value 4',
+      description: 'my description 4',
+    },
+  ];
+
+  const defaultValue = useMemo(() => {
+    return rows
+      .map((row) => {
+        return `${row.key}:${row.value} `;
+      })
+      .join('\n');
+  }, [rows]);
+
+  const handleModeSwitching = useCallback(() => {
+    setCurrentMode(
+      currentMode === 'bulk-edit' ? 'key-value-edit' : 'bulk-edit'
+    );
+  }, [currentMode]);
+
+  const onSettingsTabFormSubmit = useCallback(
+    (formData: SettingsTabFormData) => {
+      console.log({formData});
+    },
+    []
+  );
+
+  const onAuthenticationTabFormSubmit = useCallback(
+    (formData: SettingsTabFormData) => {
+      console.log({formData});
+    },
+    []
+  );
+
+  const items: Array<ToolbarItem> = [
+    {
+      id: 1,
+      label: 'Mail',
+      icon: <MailOutline/>,
+      url: '/mail',
+    },
+    {
+      id: 2,
+      label: 'Notifications',
+      icon: <NotificationsNone/>,
+      url: '/notifications',
+    },
+    {
+      id: 3,
+      label: 'Profile',
+      icon: <AccountCircle/>,
+      url: '/profile',
+    },
+    {
+      id: 4,
+      url: '/menu',
+      renderer: () => (
+        <CloseableButton
+          icon={<DeleteIcon/>}
+          label="Custom"
+          url={'/setting'}
+          active={true}
+          onClose={() => {
+          }}
+        />
+      ),
+    },
+    {
+      id: 5,
+      label: 'One',
+      icon: <AccountCircle/>,
+      url: '/profile',
+    },
+    {
+      id: 6,
+      label: 'Two',
+      icon: <AccountCircle/>,
+      url: '/profile',
+    },
+    {
+      id: 7,
+      label: 'Three',
+      icon: <AccountCircle/>,
+      url: '/profile',
+    },
+    {
+      id: 8,
+      label: 'Four',
+      icon: <AccountCircle/>,
+      url: '/profile',
+    },
+    {
+      id: 9,
+      label: 'Five',
+      icon: <AccountCircle/>,
+      url: '/profile',
+    },
+    {
+      id: 10,
+      label: 'Six',
+      icon: <AccountCircle/>,
+      url: '/profile',
+    },
+    {
+      id: 11,
+      label: 'Seven',
+      icon: <AccountCircle/>,
+      url: '/profile',
+    },
+    {
+      id: 12,
+      label: 'Eight',
+      icon: <AccountCircle/>,
+      url: '/profile',
+    },
+  ];
+
+  const tabItems: Array<{ label: string; render: React.FC }> = [
+    {
+      label: 'Params',
+      render: () => {
+        return <h1>One</h1>;
+      },
+    },
+    {
+      label: 'Authentication',
+      render: () => {
+        return (
+          <AuthenticationTabForm
+            data={jsonData}
+            onSubmit={onAuthenticationTabFormSubmit}
+            submitMode="onChange"
+          />
+        );
+      },
+    },
+    {
+      label: 'Headers',
+      render: () => {
+        return <h1>Three</h1>;
+      },
+    },
+    {
+      label: 'Body',
+      render: () => {
+        return <h1>Four</h1>;
+      },
+    },
+    {
+      label: 'Pre-request Script',
+      render: () => {
+        return <h1>Five</h1>;
+      },
+    },
+    {
+      label: 'Tests',
+      render: () => {
+        return <h1>Six</h1>;
+      },
+    },
+    {
+      label: 'Settings',
+      render: () => {
+        return (
+          <SettingsTabForm onSettingsTabFormSubmit={onSettingsTabFormSubmit}/>
+        );
+      },
+    },
+  ];
+
+  const handleDragEnd = (updatedItems: Array<ToolbarItem>) => {
+    console.log({updatedItems});
+  };
+
+  const handleHTTPVerbSelection = (e: SelectChangeEvent) => {
+    console.log('Selected verb is', e?.target?.value);
+  };
+
+  return (
+    <Router>
+      <ThemeProvider theme={theme}>
+        <Box bgcolor="#D3D3D3" height="100%" px={4}>
+          <Stack mt={4} alignItems="self-end">
+            <Button variant="contained" onClick={handleModeSwitching}>
+              Toggle Mode
+            </Button>
+          </Stack>
+          <TableWithInlineView
+            mode={currentMode}
+            columns={columns}
+            records={rows}
+            defaultValue={defaultValue}
+          />
+
+          <Box mt={4}>
+            <ActionTextField
+              fullWidth
+              defaultValue="gRPC"
+              // override input props
+              InputProps={{
+                readOnly: true,
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <AcUnit/>
+                  </InputAdornment>
+                ),
+                endAdornment: (
+                  <Button
+                    variant="contained"
+                    color="info"
+                    onClick={() => console.log('on save button clicked')}
+                  >
+                    Save
+                  </Button>
+                ),
+              }}
+            />
+          </Box>
+          <Box mt={5}>
+            <EditorToolbar items={items} handleDragEnd={handleDragEnd}/>
+          </Box>
+          <Box mt={5}>
+            <CloseableButton
+              icon={<DeleteIcon/>}
+              label="Settings"
+              url="/settings"
+              active={true}
+              onClose={() => {
+                console.log('onclose called');
+              }}
+            />
+            <Routes>
+              <Route path="/home" element={<div>Home</div>}/>
+              <Route path="/settings" element={<div>Settings</div>}/>
+            </Routes>
+          </Box>
+
+          <Stack direction="row" gap={2}>
+            {/* HTTPVerbSelection component start */}
+            <Box mt={5}>
+              <HTTPVerbSelection
+                fullWidth
+                selectedValue="get"
+                onChange={handleHTTPVerbSelection}
+              />
+            </Box>
+            {/* HTTPVerbSelection component end */}
+            {/* Params action field start */}
+            <Box mt={5} width="100%">
+              <ParamsActionField
+                placeholder="?=${{$randomCity}}"
+                fullWidth
+                // override input props
+                InputProps={{
+                  endAdornment: (
+                    <Button
+                      variant="contained"
+                      color="info"
+                      onClick={() => console.log('send button clicked')}
+                    >
+                      Send
+                    </Button>
+                  ),
+                }}
+              />
+            </Box>
+            {/* Params action field end */}
+          </Stack>
+
+          {/* Tab editor start */}
+          <Box my={5}>
+            <EditorTab
+              tabItems={tabItems}
+              value={activeTab}
+              onChange={handleTabChange}
+            />
+          </Box>
+          {/* Tab editor end */}
+        </Box>
+      </ThemeProvider>
+    </Router>
+  );
+};
+
+export default App;

package/apps/workflow/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+import App from './app/app';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/apps/workflow/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */