@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

@@ -1,255 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,27 +0,0 @@
-{
-  "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

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

package/packages/atoms/project.json

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

package/packages/atoms/src/index.ts

@@ -1,33 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

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

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