@flowuent-org/diagramming-core 1.0.5

package/packages/atoms/forms/AuthenticationTabForm/index.tsx

@@ -0,0 +1,255 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { SubmitHandler, Controller, FormProvider } from 'react-hook-form';
+import {
+  Container,
+  Grid,
+  TextField,
+  MenuItem,
+  Button,
+  CircularProgress,
+  Box,
+} from '@mui/material';
+import { useFormValidation } from '../../../../apps/workflow/group/group-form-hooks/useFormValidation';
+import { Accordion, FormTextField } from '../../src/index';
+import { ValidationRules } from '@flowuent-labs/interfaces';
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+interface Field {
+  id: string;
+  fieldType: 'TextField' | 'Select';
+  label: string;
+  condition?: string;
+  props?: {
+    options: Option[];
+    name: string;
+  };
+}
+interface ColumnRow {
+  type: string;
+  fields: Field[];
+  title?: string;
+  condition?: [string];
+}
+interface Column {
+  // columnType: 'plain';
+  id: string;
+  rows: ColumnRow[];
+  // fields: Field[];
+}
+
+interface Row {
+  type: string;
+  columns: Column[];
+}
+
+interface FormData {
+  [key: string]: string;
+}
+
+interface Props {
+  data: {
+    validation: ValidationRules;
+    rows: Row[];
+  };
+  onSubmit: SubmitHandler<FormData>;
+  isLoading?: boolean;
+  submitMode?: 'onChange' | 'onSubmit';
+}
+
+const AuthenticationTabForm: React.FC<Props> = ({
+  data,
+  onSubmit,
+  isLoading = false,
+  submitMode = 'onSubmit',
+}) => {
+  const formMethods = useFormValidation(data.validation);
+  const { control, handleSubmit, getValues, setValue, watch } = formMethods;
+
+  const selectedType = watch('type');
+
+  const mode = useMemo(() => submitMode, [submitMode]);
+
+  const getFilteredFields = useCallback(() => {
+    let fieldSingleObject: { [k: string]: Field } = {};
+    data.rows.forEach((row) => {
+      row.columns.forEach((column) => {
+        column.rows.forEach((columnRow) => {
+          columnRow.fields.forEach((field) => {
+            fieldSingleObject = {
+              ...fieldSingleObject,
+              [field.id]: field,
+            };
+          });
+        });
+      });
+    });
+    return fieldSingleObject;
+  }, [data.rows]);
+
+  const getFormValues = useCallback(
+    (allValues: { [k: string]: any }) => {
+      let values: { [k: string]: any } = {};
+      const fields = getFilteredFields();
+      Object.keys(allValues).forEach((key: string) => {
+        const field = fields[key];
+        if (field.condition) {
+          if (field.condition === selectedType) {
+            values = { ...values, [key]: allValues[key] };
+          }
+        } else {
+          values = { ...values, [key]: allValues[key] };
+        }
+      });
+      return values;
+    },
+    [getFilteredFields, selectedType]
+  );
+
+  console.log({ selectedType });
+
+  useEffect(() => {
+    setValue('type', 'NO_AUTH');
+  }, []);
+
+  const getFormComponent = useCallback(
+    (field: Field) => {
+      switch (field.fieldType) {
+        case 'Select':
+          return (
+            <Controller
+              name={field.id}
+              control={control}
+              defaultValue=""
+              render={({ field: { onChange, value } }) => (
+                <TextField
+                  select
+                  label={field.label}
+                  value={value}
+                  onChange={(e) => {
+                    onChange(e);
+                  }}
+                  fullWidth
+                >
+                  {field.props?.options.map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                      {option.label}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              )}
+            />
+          );
+        case 'TextField':
+          return (
+            <FormTextField
+              {...field}
+              {...field.props}
+              name={field.props?.name || ''}
+              control={control}
+            />
+          );
+        default:
+          break;
+      }
+    },
+    [control]
+  );
+
+  const getFields = useCallback(
+    (columnRow: ColumnRow) => {
+      return columnRow.fields.map((field) =>
+        !field.condition ||
+        (field.condition && field.condition === selectedType) ? (
+          <div style={{ marginTop: '5px' }}>{getFormComponent(field)}</div>
+        ) : (
+          <></>
+        )
+      );
+    },
+    [getFormComponent, selectedType]
+  );
+
+  return (
+    <Container maxWidth="sm">
+      <FormProvider {...formMethods}>
+        <Box
+          component="form"
+          onSubmit={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            if (mode === 'onChange') {
+              handleSubmit(onSubmit);
+              onSubmit(getFormValues(getValues()));
+            }
+          }}
+          onChange={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+
+            if (mode === 'onChange') {
+              handleSubmit(onSubmit);
+              onSubmit(getFormValues(getValues()));
+            }
+          }}
+        >
+          <Grid container spacing={1}>
+            {data.rows.map((row, rowIndex) => {
+              return (
+                <React.Fragment key={rowIndex}>
+                  {row.columns.map((column, colIndex) => (
+                    <Grid item xs={6}>
+                      <Grid key={colIndex}>
+                        {column.rows.map((columnRow, columnRowIndex) => {
+                          return (
+                            <React.Fragment key={columnRowIndex}>
+                              {columnRow.type === 'accordion' &&
+                                (columnRow.condition
+                                  ? columnRow.condition.includes(selectedType)
+                                  : true) && (
+                                  <Accordion title={columnRow.title || ''}>
+                                    <Box
+                                      component="span"
+                                      sx={{ fontSize: '10px' }}
+                                    >
+                                      These are advanced configuration options.
+                                      They are optional. Postman will auto
+                                      generate values for some fields if left
+                                      blank.
+                                    </Box>
+                                    {getFields(columnRow)}
+                                  </Accordion>
+                                )}
+                              {columnRow.type === 'plain' && (
+                                <>{getFields(columnRow)}</>
+                              )}
+                            </React.Fragment>
+                          );
+                        })}
+                      </Grid>
+                    </Grid>
+                  ))}
+                </React.Fragment>
+              );
+            })}
+
+            <Grid item xs={12}>
+              {isLoading ? (
+                <CircularProgress size={24} />
+              ) : (
+                <Button type="submit" variant="contained" color="primary">
+                  Submit
+                </Button>
+              )}
+            </Grid>
+          </Grid>
+        </Box>
+      </FormProvider>
+    </Container>
+  );
+};
+
+export default AuthenticationTabForm;

package/packages/atoms/forms/SettingsTabForm/index.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useMemo } from 'react';
+import { Divider, Typography } from '@mui/material';
+import { Box, FormTextField, Stack, Switch } from '@flowuent-labs/atoms';
+import { FormProvider } from 'react-hook-form';
+import settingTabForm from './settingTabForm.json';
+import { useFormValidation } from '../../../../apps/workflow/group/group-form-hooks/useFormValidation';
+
+export interface SettingsTabFormData {
+  // add more when you add new field
+  isCertificateEnabled?: boolean;
+  isOriginHTTPEnabled?: boolean;
+  isFollowRedirectsEnabled?: string;
+}
+interface SettingsTabFormProps {
+  onSettingsTabFormSubmit: (data: SettingsTabFormData) => void;
+}
+
+const SettingsTabForm = ({ onSettingsTabFormSubmit }: SettingsTabFormProps) => {
+  const formMethods = useFormValidation(settingTabForm.validation);
+
+  let mode: 'onChange' | 'onSubmit' = useMemo(() => 'onChange', []);
+
+  const onSettingsFormSubmit = useCallback((data: SettingsTabFormData) => {
+    onSettingsTabFormSubmit(data);
+  }, []);
+
+  const settingsTabItems = useMemo(() => settingTabForm.items, []);
+
+  const getComponent = useCallback((item: any) => {
+    switch (item.component) {
+      case 'Switch':
+        return <Switch {...item.props} />;
+
+      case 'TextField':
+        return <FormTextField {...item.props} />; // FIXME: FormTextField
+    }
+  }, []);
+
+  return (
+    <Stack>
+      {settingsTabItems.map((singleTabItems: any) => {
+        return (
+          <>
+            <Stack
+              justifyContent="space-between"
+              direction="row"
+              alignItems="center"
+            >
+              <Stack>
+                <Typography variant="body1" fontWeight={600}>
+                  {singleTabItems.title}
+                </Typography>
+                <Typography variant="body1">
+                  {singleTabItems.subTitle}
+                </Typography>
+              </Stack>
+              <Box>
+                <FormProvider {...formMethods}>
+                  <Box
+                    component="form"
+                    onSubmit={
+                      mode === 'onSubmit'
+                        ? formMethods.handleSubmit(onSettingsFormSubmit)
+                        : undefined
+                    }
+                    onChange={
+                      mode === 'onChange'
+                        ? formMethods.handleSubmit(onSettingsFormSubmit)
+                        : undefined
+                    }
+                  >
+                    {getComponent(singleTabItems)}
+                  </Box>
+                </FormProvider>
+              </Box>
+            </Stack>
+            <Divider sx={{ my: 2 }} />
+          </>
+        );
+      })}
+    </Stack>
+  );
+};
+
+export default SettingsTabForm;

package/packages/atoms/forms/SettingsTabForm/settingTabForm.json

@@ -0,0 +1,27 @@
+{
+  "validation": {
+    "isCertificateEnabled": ["boolean", "required"],
+    "isFollowRedirectsEnabled": ["string", "required"],
+    "age": ["number", "required", "positive", "integer"]
+  },
+  "items": [
+    {
+      "title": "Enable server certificate verification",
+      "subTitle": "Enable server certificate verification Enable server certificate verification",
+      "component": "Switch",
+      "props": { "name": "isCertificateEnabled", "items": [] }
+    },
+    {
+      "title": "Enter isFollowRedirectsEnabled",
+      "subTitle": "Its needed for records",
+      "component": "TextField",
+      "props": { "name": "isFollowRedirectsEnabled" }
+    },
+    {
+      "title": "Enter age",
+      "subTitle": "Its needed for records",
+      "component": "TextField",
+      "props": { "name": "age", "type": "number" }
+    }
+  ]
+}

package/packages/atoms/forms/index.ts

@@ -0,0 +1,4 @@
+import SettingsTabForm from './SettingsTabForm/index';
+import AuthenticationTabForm from './AuthenticationTabForm/index';
+
+export { SettingsTabForm, AuthenticationTabForm };

package/packages/atoms/project.json

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

package/packages/atoms/src/index.ts

@@ -0,0 +1,33 @@
+import Button from './lib/Button/Button';
+import Avatar from './lib/Avatar/Avatar';
+import Alert from './lib/Alert/Alert';
+import TextField from './lib/TextField/TextField';
+import Typography from './lib/Typography/Typography';
+import Box from './lib/Box/Box';
+import Card from './lib/Card/Card';
+import CardContent from './lib/CardContent/CardContent';
+import Grid from './lib/Grid/Grid';
+import Stack from './lib/Stack/Stack';
+import TableView from './lib/TableView/TableView';
+import BulkEdit from './lib/BulkEdit/BulkEdit';
+import Switch from './lib/Switch/Switch';
+import FormTextField from './lib/FormTextField/FormTextField';
+import Accordion from './lib/Accordion/Accordion';
+
+export {
+  Button,
+  Avatar,
+  Alert,
+  TextField,
+  Typography,
+  Box,
+  Card,
+  CardContent,
+  Grid,
+  Stack,
+  TableView,
+  BulkEdit,
+  Switch,
+  FormTextField,
+  Accordion,
+};

package/packages/atoms/src/lib/Accordion/Accordion.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .Accordion {
+ * }
+*/

package/packages/atoms/src/lib/Accordion/Accordion.spec.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+
+import Accordion from './Accordion';
+import React from 'react';
+
+describe('Accordion', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <Accordion title="This is title">Hello</Accordion>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+});

package/packages/atoms/src/lib/Accordion/Accordion.tsx

@@ -0,0 +1,29 @@
+import {
+  Accordion as MuiAccordion,
+  AccordionDetails,
+  AccordionProps as MuiAccordionProps,
+  AccordionSummary,
+  Box,
+} from '@mui/material';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+/* eslint-disable-next-line */
+export interface AccordionProps extends MuiAccordionProps {
+  // if needed then add extra prop
+  title: string;
+}
+
+const Accordion = (props: AccordionProps) => {
+  return (
+    <Box sx={{ marginTop: '2px' }}>
+      <MuiAccordion {...props}>
+        <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
+          {props.title}
+        </AccordionSummary>
+        <AccordionDetails>{props.children}</AccordionDetails>
+      </MuiAccordion>
+    </Box>
+  );
+};
+
+export default Accordion;

package/packages/atoms/src/lib/Alert/Alert.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .alert {
+ * }
+*/

package/packages/atoms/src/lib/Alert/Alert.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Alert from './Alert';
+
+describe('Alert', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Alert />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/packages/atoms/src/lib/Alert/Alert.tsx

@@ -0,0 +1,19 @@
+import styles from './Alert.module.css';
+import { Alert as MuiAlert, AlertProps as MuiAlertProps } from '@mui/material';
+
+/* eslint-disable-next-line */
+export interface AlertProps extends MuiAlertProps {
+  // if needed then add extra prop
+}
+
+const Alert = (props: AlertProps) => {
+  return (
+    <>
+      <MuiAlert {...props} className={styles['alert']}>
+        {props.children}
+      </MuiAlert>
+    </>
+  );
+};
+
+export default Alert;

package/packages/atoms/src/lib/Avatar/Avatar.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .avatar {
+ * }
+*/

package/packages/atoms/src/lib/Avatar/Avatar.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Avatar from './Avatar';
+
+describe('Avatar', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Avatar />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/packages/atoms/src/lib/Avatar/Avatar.tsx

@@ -0,0 +1,22 @@
+import styles from './Avatar.module.css';
+import {
+  Avatar as MuiAvatar,
+  AvatarProps as MuiAvatarProps,
+} from '@mui/material';
+
+/* eslint-disable-next-line */
+export interface AvatarProps extends MuiAvatarProps {
+  // if needed then add extra prop
+}
+
+const Avatar = (props: AvatarProps) => {
+  return (
+    <>
+      <MuiAvatar {...props} className={styles['avatar']}>
+        {props.children}
+      </MuiAvatar>
+    </>
+  );
+};
+
+export default Avatar;

package/packages/atoms/src/lib/Box/Box.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .box {
+ * }
+*/

package/packages/atoms/src/lib/Box/Box.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Box from './Box';
+
+describe('Box', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Box />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/packages/atoms/src/lib/Box/Box.tsx

@@ -0,0 +1,19 @@
+import styles from './Box.module.css';
+import { Box as MuiBox, BoxProps as MuiBoxProps } from '@mui/material';
+
+/* eslint-disable-next-line */
+export interface BoxProps extends MuiBoxProps {
+  // if needed then add extra prop
+}
+
+const Box = (props: BoxProps) => {
+  return (
+    <>
+      <MuiBox {...props} className={styles['box']}>
+        {props.children}
+      </MuiBox>
+    </>
+  );
+};
+
+export default Box;

package/packages/atoms/src/lib/BulkEdit/BulkEdit.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .bulk-edit {
+ * }
+*/

package/packages/atoms/src/lib/BulkEdit/BulkEdit.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import BulkEdit from './BulkEdit';
+
+describe('BulkEdit', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<BulkEdit />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/packages/atoms/src/lib/BulkEdit/BulkEdit.tsx

@@ -0,0 +1,15 @@
+import {
+  TextField as MuiTextField,
+  TextFieldProps as MuiTextFieldProps,
+} from '@mui/material';
+
+/* eslint-disable-next-line */
+// export interface MuiTextFieldProps extends TextFieldProps {
+// if needed then add extra prop
+// }
+
+const BulkEdit = (props: MuiTextFieldProps) => {
+  return <MuiTextField {...props} />;
+};
+
+export default BulkEdit;

package/packages/atoms/src/lib/Button/Button.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .btn {
+ * }
+*/

package/packages/atoms/src/lib/Button/Button.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Button from './Button';
+
+describe('Button', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Button />);
+    expect(baseElement).toBeTruthy();
+  });
+});