@dartech/arsenal-ui 1.2.3 → 1.2.5

package/src/lib/Alert/Alert.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import Dialog, { DialogProps } from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Box from '@mui/material/Box';
+import { Loader } from '../Loader';
+
+/**
+ * This interface is referencing the [[AlertDialog]] component props.
+ * @category Common UI components
+ */
+export interface AlertDialogProps {
+  /**
+   * Is dialog open flag
+   */
+  open: boolean;
+  /**
+   * Dialog title
+   */
+  title: string;
+  /**
+   * Dialog description
+   */
+  description?: string;
+  /**
+   * Close button text
+   */
+  closeButtonTitle?: string;
+  /**
+   * Confirm button text
+   */
+  confirmButtonTitle?: string;
+  /**
+   * onClose event handle function
+   */
+  onClose: () => void;
+  /**
+   * onConfirm event handle function
+   */
+  
+  onConfirm?: (values?: any) => void;
+  /**
+   * children components
+   */
+  children?: React.ReactNode;
+  /**
+   * Material UI Dialog component props
+   */
+  dialogProps?: Partial<DialogProps>;
+  loading?: boolean;
+  confirmButtonDisabled?: boolean;
+  maxWidth?: false | "xs" | "sm" | "md" | "lg" | "xl";
+};
+
+/**
+ * Alert dialog component. Used for popup information
+ * @category Common UI components
+ */
+export const AlertDialog = ({
+  open,
+  title,
+  description,
+  closeButtonTitle="Close",
+  onClose,
+  confirmButtonTitle = "Confirm",
+  confirmButtonDisabled = false,
+  onConfirm,
+  children,
+  dialogProps,
+  loading,
+  maxWidth="xs"
+}: AlertDialogProps) => {
+  return (
+    <div>
+      <Dialog
+        open={open}
+        onClose={onClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+        fullWidth
+        maxWidth={maxWidth}
+        {...dialogProps}
+      >
+        {loading && <Loader />}
+        <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+        <DialogContent>
+          { description && <DialogContentText id="alert-dialog-description">{description}</DialogContentText>}          
+          <Box maxWidth="100%" overflow="hidden">{children}</Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} color="primary" variant="contained">
+            {closeButtonTitle}
+          </Button>
+          {confirmButtonTitle && onConfirm ? (
+            <Button onClick={onConfirm} color="secondary" variant="contained" autoFocus disabled={confirmButtonDisabled}>
+              {confirmButtonTitle}
+            </Button>
+          ) : null}
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+};
+
+export default AlertDialog;

package/src/lib/Alert/index.ts

@@ -0,0 +1 @@
+export * from './Alert';

package/src/lib/Breadcrumbs/Breadcrumbs.styled.tsx

@@ -0,0 +1,16 @@
+import { Link } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+
+// export const StyledBreadcrumbs = styled(Breadcrumbs)(() => ({
+//   '& li': {
+//     color: '#6D6E85',
+//     '&:last-child': {
+//       color: '#262842',
+//     },
+//   },
+// }));
+
+export const StyledLink = styled(Link)(() => ({
+  textDecoration: 'none',
+  color: 'inherit',
+}));

package/src/lib/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,40 @@
+import Typography from '@mui/material/Typography';
+import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
+import { StyledLink } from './Breadcrumbs.styled';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+
+type Props = {
+  crumbs: {
+    title: string;
+    link?: string;
+  }[];
+};
+
+export const Breadcrumbs = ({ crumbs }: Props) => {
+  return (
+    <MuiBreadcrumbs
+      separator={<NavigateNextIcon fontSize="small" />}
+      aria-label="breadcrumb"
+      sx={{
+        '& li': {
+          color: '#6D6E85',
+          '&:last-child': {
+            color: '#262842',
+          },
+        },
+      }}
+    >
+      {crumbs.map((crumb, index) =>
+        crumb.link ? (
+          <StyledLink key={index} to={crumb.link} className="breadcrumb">
+            {crumb.title}
+          </StyledLink>
+        ) : (
+          <Typography key={index} className="breadcrumb">
+            {crumb.title}
+          </Typography>
+        )
+      )}
+    </MuiBreadcrumbs>
+  );
+};

package/src/lib/Breadcrumbs/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './Breadcrumbs';
+export * from './Breadcrumbs';

package/src/lib/ContentLayout/ContentLayout.tsx

@@ -0,0 +1,31 @@
+import { Suspense, ReactNode } from 'react';
+import Box from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material/styles';
+import Toolbar from '@mui/material/Toolbar';
+import { Outlet } from 'react-router-dom';
+import { Loader } from '../Loader';
+
+type Props = {
+  children?: ReactNode;
+  toolbar?: ReactNode;
+  contentSx?: SxProps<Theme>;
+}
+
+export const ContentLayout = ({ children, toolbar, contentSx }: Props) => {
+  return (
+    <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default' }}>
+      <Toolbar
+        sx={{
+          borderBottom: '1px solid rgba(38, 40, 66, 0.08)',
+        }}
+      >{toolbar}</Toolbar>
+      <Box sx={{ ...contentSx, height: 'calc(100vh - 56px)', overflow: 'scroll' }}>
+        <Suspense fallback={<Loader />}>
+          {
+            children ?? <Outlet />
+          }          
+        </Suspense>        
+      </Box>
+    </Box>
+  );
+};

package/src/lib/ContentLayout/index.ts

@@ -0,0 +1 @@
+export * from './ContentLayout';

package/src/lib/Definition/CreateDefinition/CreateDefinition.tsx

@@ -0,0 +1,78 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Unstable_Grid2';
+import Typography from '@mui/material/Typography';
+import { ControlInput, ControlNumberInput } from '../../Forms';
+import CreatePropertiesList from '../../Property/UpsertProperty/CreatePropertiesList';
+
+import { useFormContext } from 'react-hook-form';
+
+type Props = {
+  definitionFieldName?: string;
+  title?: string;
+  hideCodeField?: boolean;
+  hideVersionField?: boolean;
+  hideNameField?: boolean;
+  required?: boolean;
+};
+
+export const CreateDefinition = ({
+  definitionFieldName,
+  title,
+  hideCodeField,
+  hideVersionField,
+  hideNameField,
+  required = false,
+}: Props) => {
+  const { control } = useFormContext();
+
+  return (
+    <Grid container direction="column" spacing={2}>
+      {title && (
+        <Grid sm={12}>
+          <Box my={2}>
+            <Typography variant="h6">{title}</Typography>
+          </Box>
+        </Grid>
+      )}
+      {!hideNameField && (
+        <Grid sm={12}>
+          <ControlInput
+            required
+            control={control}
+            name={definitionFieldName ? `${definitionFieldName}.name` : `name`}
+            label="Name"
+          />
+        </Grid>
+      )}
+      {!hideCodeField && (
+        <Grid sm={12}>
+          <ControlInput
+            required
+            control={control}
+            name={definitionFieldName ? `${definitionFieldName}.code` : `code`}
+            label="Code"
+          />
+        </Grid>
+      )}
+      {!hideVersionField && (
+        <Grid sm={12}>
+          <ControlNumberInput
+            required
+            control={control}
+            name={
+              definitionFieldName ? `${definitionFieldName}.version` : `version`
+            }
+            label="Version"
+          />
+        </Grid>
+      )}
+
+      <CreatePropertiesList
+        required={required}
+        parentFieldName={definitionFieldName}
+      />
+    </Grid>
+  );
+};
+
+export default CreateDefinition;

package/src/lib/Definition/CreateDefinition/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './CreateDefinition';
+export * from './CreateDefinition';

package/src/lib/Definition/DefinitionFiller/DefinitionFiller.tsx

@@ -0,0 +1,71 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Unstable_Grid2';
+import { StepperData, StepperView } from '../../StepperView';
+import { PropertyFiller } from '../../Property';
+import { MultiplePropertyFiller } from '../../Property';
+
+import { useMemo } from 'react';
+
+import { PropertiesArrayType } from '../../../interfaces';
+
+type Props = {
+  properties: PropertiesArrayType;
+  dataFieldName: string;
+  useExpression?: boolean;
+  title?: string;
+};
+
+export const DefinitionFiller = ({ properties, dataFieldName, useExpression = false, title }: Props) => {
+  const stepperData: StepperData = useMemo(() => {
+    if (properties) {
+      return properties.map((property) => {
+        const propertyType =
+          typeof property.propertyType === 'string' ? property.propertyType : property['propertyType']['value'];
+        return {
+          label: (
+            <Box display="flex" flexDirection="column">
+              <b>
+                {property.name}
+                {property.isRequired ? '*' : ''}
+              </b>
+              <span>
+                {property.key} | {property.isMultiple ? 'multiple' : 'single'} | {propertyType}
+              </span>
+            </Box>
+          ),
+          content: property.isMultiple ? (
+            <MultiplePropertyFiller
+              property={property}
+              name={`${dataFieldName}.${property.key}`}
+              useExpression={useExpression}
+              label={property.name}
+              required={property.isRequired}
+            />
+          ) : (
+            <PropertyFiller
+              property={property}
+              name={`${dataFieldName}.${property.key}`}
+              useExpression={useExpression}
+              label={property.name}
+              required={property.isRequired}
+            />
+          ),
+        };
+      });
+    }
+    return [];
+  }, [properties, dataFieldName, useExpression]);
+
+  return (
+    <Grid container direction="column" spacing={2}>
+      {title && (
+        <Grid xs={12}>
+          <div style={{ fontWeight: '600' }}>{title}</div>
+        </Grid>
+      )}
+      <StepperView data={stepperData} />
+    </Grid>
+  );
+};
+
+export default DefinitionFiller;

package/src/lib/Definition/DefinitionFiller/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './DefinitionFiller';
+export * from './DefinitionFiller';

package/src/lib/Definition/DefinitionValueView/DefinitionValueView.tsx

@@ -0,0 +1,54 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Unstable_Grid2';
+import { StepperData, StepperView } from '../../StepperView';
+import PropertyDataView from './PropertyDataView';
+
+import { useMemo } from 'react';
+import { PropertiesArrayType, PropertyType } from '../../../interfaces';
+
+type Props = {
+  properties: PropertiesArrayType<unknown>;
+  data: unknown;
+};
+
+export const DefinitionValueView = ({ properties, data }: Props) => {
+  const stepperData: StepperData = useMemo(() => {
+    if (properties && data) {
+      return properties.map((property) => {
+        const { key, name, isMultiple, propertyType } = property;
+        const value = data[property.key] ?? data;
+        return {
+          label: (
+            <Box display="flex" flexDirection="column">
+              <b>{name}</b>
+              <span>
+                {key} | {isMultiple ? 'multiple' : 'single'} | {propertyType}
+              </span>
+            </Box>
+          ),
+          content:
+            isMultiple && Array.isArray(value) && property.propertyType !== PropertyType.ANY ? (
+              <>
+                {value.map((itemValue, index) => (
+                  <Box key={index} mb={2}>
+                    <PropertyDataView property={property} data={itemValue} hasBackground />
+                  </Box>
+                ))}
+              </>
+            ) : (
+              <PropertyDataView property={property} data={value} />
+            ),
+        };
+      });
+    }
+    return [];
+  }, [properties, data]);
+
+  return (
+    <Grid container direction="column" spacing={2}>
+      <StepperView data={stepperData} />
+    </Grid>
+  );
+};
+
+export default DefinitionValueView;

package/src/lib/Definition/DefinitionValueView/PropertyDataView.tsx

@@ -0,0 +1,67 @@
+import Box from '@mui/material/Box';
+import { JsonView } from '../../JsonView';
+import DefinitionValueView from './DefinitionValueView';
+
+import { useMemo } from 'react';
+import { isExpression, propertiesObjectToArray } from '../../../utils';
+
+import { PropertyUnion, PropertyType, PropertiesArrayType } from '../../../interfaces';
+
+type Props = {
+  property: PropertyUnion;
+  data: unknown;
+  hasBackground?: boolean;
+};
+
+type PropertyValueComponentProps = {
+  property: PropertyUnion;
+  data: unknown;
+  properties?: PropertiesArrayType;
+};
+
+const PropertyValueComponent = ({ property, data, properties }: PropertyValueComponentProps) => {
+  const defaultRender = (value: any) => (
+    <Box style={{ backgroundColor: '#fff', border: '1px solid #ccc', borderRadius: '4px', padding: '4px' }}>
+      {value === null ? 'null' : value?.toString()}
+    </Box>
+  )
+  if (isExpression(data)) {
+    return defaultRender(data);
+  } else {
+    switch (property.propertyType) {
+      case PropertyType.JSON:
+        return <JsonView value={data} />;
+      case PropertyType.ENTITY:
+        return <DefinitionValueView properties={properties} data={data} />;
+      case PropertyType.ANY:
+        // TODO need to prefetch data and show as is
+        return (typeof data === 'object' ? <JsonView value={data} /> : defaultRender(data));
+      default:
+        return defaultRender(data);
+    }
+  }
+};
+
+export const PropertyDataView = ({ property, data, hasBackground = false }: Props) => {
+  const properties = useMemo(() => {
+    if (property.propertyType === PropertyType.ENTITY) {
+      if (Array.isArray(property.properties)) {
+        return property.properties;
+      }
+      return propertiesObjectToArray(property.properties);
+    }
+    return [];
+  }, [property]);
+
+  return (
+    <Box
+      style={{
+        backgroundColor: hasBackground ? '#f1f1f1' : 'none',
+      }}
+    >
+      <PropertyValueComponent property={property} data={data} properties={properties} />
+    </Box>
+  );
+};
+
+export default PropertyDataView;

package/src/lib/Definition/DefinitionValueView/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './DefinitionValueView';
+export * from './DefinitionValueView';

package/src/lib/Definition/{index.d.ts → index.ts}

@@ -1,3 +1,3 @@
-export * from './CreateDefinition';
-export * from './DefinitionFiller';
-export * from './DefinitionValueView';
+export * from './CreateDefinition';
+export * from './DefinitionFiller';
+export * from './DefinitionValueView';

package/src/lib/Forms/BackButton.tsx

@@ -0,0 +1,46 @@
+import { useCallback, useMemo } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+import { useNavigate, useLocation, Link } from 'react-router-dom';
+import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+
+type Props = {
+  text?: string;
+  buttonProps?: Record<string, unknown>;
+};
+export const BackButton = ({ text, buttonProps = {} }: Props) => {
+  const navigate = useNavigate();
+  const { state } = useLocation();
+  const fromLocation = useMemo(() => state?.['from'], [state]);
+
+  const handleClick = useCallback(() => {
+    if (fromLocation) {
+      navigate(fromLocation);
+    } else navigate(-1);
+  }, [navigate, fromLocation]);
+
+  return (
+    <Box mr={2}>
+      {text ? (
+        <Button
+          color="inherit"
+          onClick={!fromLocation ? handleClick : null}
+          component={Link}
+          to={fromLocation ?? ''}
+          {...buttonProps}
+        >
+          {text}
+        </Button>
+      ) : (
+          <IconButton onClick={handleClick}>
+            <SvgIcon>
+              <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+            </SvgIcon>
+        </IconButton>
+      )}
+    </Box>
+  );
+};
+
+export default BackButton;

package/src/lib/Forms/ControlAceEditor.tsx

@@ -0,0 +1,125 @@
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-python';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/ext-language_tools';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import FormHelperText from '@mui/material/FormHelperText';
+import { Control, useFormContext, useController, useWatch } from 'react-hook-form';
+import { forwardRef } from 'react';
+
+export interface ControlAceEditorProps {
+  name: string;
+  control: Control<any>;
+  mode?: string;
+  label?: string;
+  width?: string;
+  height?: string;
+  theme?: string;
+  readOnly?: boolean;
+  required?: boolean;
+  validateJson?: boolean;
+  fontSize?: number;
+  validate?: boolean;
+  parseValue?: boolean;
+  [key: string]: unknown;
+}
+
+export const ControlAceEditor = forwardRef<AceEditor, ControlAceEditorProps>(({
+  control,
+  name,
+  mode = 'json',
+  label,
+  width = '100%',
+  height = '200px',
+  theme = 'monokai',
+  readOnly,
+  required = false,
+  validateJson = false,
+  fontSize = 16,
+  validate = true,
+  parseValue,
+  ...otherProps
+}, ref) => {
+  const { setError, clearErrors } = useFormContext();
+  const {
+    field: { onChange },
+    fieldState: { error },
+  } = useController({ control, name });
+  const value = useWatch({ control, name });
+
+  const handleChange = (value) => {
+    if (!value && required) {
+      setError(name, { message: 'Required field' });
+    } else {
+      clearErrors(name);
+    }
+
+    if (validateJson) {
+      try {
+        JSON.parse(value);
+        clearErrors(name);
+      } catch (error) {
+        setError(name, { message: 'Invalid JSON' });
+      }
+    }
+
+    if (parseValue) {
+      try {
+        const val = JSON.parse(value);
+        console.log('parsed val:', val);
+        onChange(val);
+      } catch (e) {
+        onChange(value);
+      }
+    } else {
+      onChange(value);
+    }    
+  };
+
+  return (
+    <Box display="flex" flexDirection="column" width="100%">
+      <Box>
+        {label && (
+          <Typography variant="subtitle1" display="inline" style={{ marginRight: 10 }}>
+            {label}
+          </Typography>
+        )}
+      </Box>
+      <>
+        <AceEditor
+          ref={ref}
+          focus
+          wrapEnabled
+          width={width}
+          height={height}
+          showPrintMargin={false}
+          theme={theme}
+          fontSize={fontSize}
+          setOptions={{
+            enableLiveAutocompletion: true,
+            enableBasicAutocompletion: true,
+            enableSnippets: true,
+            showLineNumbers: true,
+            tabSize: 2,
+            useWorker: false
+          }}          
+          style={{ lineHeight: 1.4, zIndex: 0, isolation: 'isolate' }}
+          readOnly={readOnly}
+          value={mode === 'json' && typeof value !== 'string' ? (value === null ? '' : JSON.stringify(value)) : value}
+          onChange={handleChange}
+          mode={mode}
+          onLoad={(editor) => {
+            if (!validate || !validateJson) {
+              editor.getSession().setUseWorker(false);
+            }
+          }}
+          {...otherProps}
+        />
+        {error && <FormHelperText error>{error.message}</FormHelperText>}
+      </>
+    </Box>
+  );
+});
+
+export default ControlAceEditor;