@dartech/arsenal-ui 0.0.1 → 0.0.3

package/src/lib/Alert/Alert.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog, { DialogProps } from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Box from '@material-ui/core/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

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

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

@@ -1,74 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/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 item sm={12} md={8} lg={6}>
-          <Box my={2}>
-            <Typography variant="h4">{title}</Typography>
-          </Box>
-        </Grid>
-      )}
-      {!hideNameField && (
-        <Grid item sm={12} md={8} lg={6}>
-          <ControlInput
-            required
-            control={control}
-            name={definitionFieldName ? `${definitionFieldName}.name` : `name`}
-            label="Name"
-          />
-        </Grid>
-      )}
-      {!hideCodeField && (
-        <Grid item sm={12} md={8} lg={6}>
-          <ControlInput
-            required
-            control={control}
-            name={definitionFieldName ? `${definitionFieldName}.code` : `code`}
-            label="Code"
-          />
-        </Grid>
-      )}
-      {!hideVersionField && (
-        <Grid item sm={12} md={8} lg={6}>
-          <ControlNumberInput
-            required
-            control={control}
-            decimal={false}
-            name={definitionFieldName ? `${definitionFieldName}.version` : `version`}
-            label="Version"
-          />
-        </Grid>
-      )}
-
-      <CreatePropertiesList required={required} parentFieldName={definitionFieldName} />
-    </Grid>
-  );
-};
-
-export default CreateDefinition;

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

@@ -1,85 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import StepContent from '@material-ui/core/StepContent';
-import StepConnector from '@material-ui/core/StepConnector';
-
-import PropertyValue from '../../Property/PropertyValueField/PropertyValue';
-import { PropertiesArrayType } from '../../../interfaces';
-import { makeStyles } from '@material-ui/core';
-
-type Props = {
-  properties: PropertiesArrayType;
-  dataFieldName: string;
-};
-
-const useStyles = makeStyles(() => ({
-  content: {
-    marginLeft: '4px',
-  },
-  connector: {
-    marginLeft: '4px',
-  },
-  stepper: {
-    padding: '12px',
-  },
-  label: {
-    display: 'flex',
-    alignItems: 'flex-start',
-  },
-}));
-
-const StepIcon = () => (
-  <div
-    style={{
-      display: 'inline-block',
-      width: '10px',
-      height: '10px',
-      borderRadius: '50%',
-      backgroundColor: '#536DFE',
-      marginTop: '5px',
-    }}
-  />
-);
-
-export const DefinitionFiller = ({ properties, dataFieldName }: Props) => {
-  const classes = useStyles();
-
-  return (
-    <Grid container item direction="column" spacing={2}>
-      {properties?.length ? (
-        <Stepper
-          nonLinear
-          orientation="vertical"
-          className={classes.stepper}
-          connector={<StepConnector className={classes.connector} />}
-        >
-          {properties.map((property, index) => (
-            <Step expanded key={index}>
-              <StepLabel
-                className={classes.label}
-                StepIconComponent={StepIcon}
-                StepIconProps={{ icon: '', completed: false, active: true }}
-              >
-                <Box display="flex" flexDirection="column">
-                  <b>{property.name}</b>
-                  <span>
-                    {property.propertyType} | Key: {property.key}
-                  </span>
-                </Box>
-              </StepLabel>
-              <StepContent className={classes.content}>
-                <PropertyValue name={`${dataFieldName}.${property.key}`} property={property} label={property.name} />
-              </StepContent>
-            </Step>
-          ))}
-          <Step />
-        </Stepper>
-      ) : null}
-    </Grid>
-  );
-};
-
-export default DefinitionFiller;

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

@@ -1,96 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import StepContent from '@material-ui/core/StepContent';
-import StepConnector from '@material-ui/core/StepConnector';
-
-import { useMemo } from 'react';
-import { makeStyles } from '@material-ui/core';
-import { PropertiesArrayType, PropertiesObjectType } from '../../../interfaces';
-import { PropertyWidget } from '../../Property/PropertyWidget';
-import { propertiesObjectToArray } from '../../../utils';
-
-type Props = {
-  properties: PropertiesArrayType | PropertiesObjectType;
-  dataFieldName: string;
-  nullable?: boolean;
-};
-
-const useStyles = makeStyles(() => ({
-  content: {
-    marginLeft: '4px',
-    paddingLeft: '14px',
-  },
-  connector: {
-    marginLeft: '4px',
-  },
-  stepper: {
-    padding: '12px',
-  },
-  label: {
-    display: 'flex',
-    alignItems: 'flex-start',
-  },
-}));
-
-const StepIcon = () => (
-  <div
-    style={{
-      display: 'inline-block',
-      width: '10px',
-      height: '10px',
-      borderRadius: '50%',
-      backgroundColor: '#536DFE',
-      marginTop: '5px',
-    }}
-  />
-);
-
-export const WidgetDefinitionFiller = ({ properties, dataFieldName, nullable = false }: Props) => {
-  const classes = useStyles();
-
-  const propertiesList = useMemo(() => {
-    if (Array.isArray(properties)) {
-      return propertiesObjectToArray(properties);
-    }
-    return properties;
-  }, [properties]);
-
-  return (
-    <Grid container item direction="column" spacing={2}>
-      {propertiesList?.length ? (
-        <Stepper
-          nonLinear
-          orientation="vertical"
-          className={classes.stepper}
-          connector={<StepConnector className={classes.connector} />}
-        >
-          {(propertiesList as PropertiesArrayType).map((property, index) => (
-            <Step expanded key={index}>
-              <StepLabel
-                className={classes.label}
-                StepIconComponent={StepIcon}
-                StepIconProps={{ icon: '', completed: false, active: true }}
-              >
-                <Box display="flex" flexDirection="column">
-                  <b>{property.name}</b>
-                  <span>
-                    {property.propertyType} | Key: {property.key}
-                  </span>
-                </Box>
-              </StepLabel>
-              <StepContent className={classes.content}>
-                <PropertyWidget property={property} nullable={nullable} name={`${dataFieldName}.${property.key}`} />
-              </StepContent>
-            </Step>
-          ))}
-          <Step />
-        </Stepper>
-      ) : null}
-    </Grid>
-  );
-};
-
-export default WidgetDefinitionFiller;

package/src/lib/DemPropertyField/DemPropertyField.tsx

@@ -1,93 +0,0 @@
-import { useMemo } from 'react';
-import { Control } from 'react-hook-form';
-import { PropertyUnion } from '../../interfaces';
-import { MultipleDemField } from './MultipleDemField';
-import { SingleDemField } from './SingleDemField';
-
-/**
- * This interface is referencing the [[DemPropertyField]] component props.
- * @category DEM Property Field
- */
-export interface DemPropertyFieldProps {
-  /**
-   * Material-UI TextField `variant` prop
-   */
-  variant?: 'standard' | 'outlined' | 'filled';
-  /**
-   * Parent field name for nest field
-   */
-  parentKey?: string;
-  /**
-   * propKey for React Hook Form control name propery
-   */
-  propKey: string;
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * React Hook Form `errors` object
-   */
-  errors: Record<string, any>;
-  /**
-   * Is readOnly field flag
-   */
-  readOnly?: boolean;
-  /**
-   * Is nullable value flag
-   */
-  isNullable?: boolean;
-  /**
-   * DEM property
-   */
-  property: PropertyUnion;
-  /**
-   * @ignore Validation function for JSON type field
-   */
-  jsonValidator?: (attrs: { name: string; errors: any[] }) => void;
-  hasBooleanProperties?: boolean;
-  /**
-   * React Hook Form `watch` function
-   */
-  watch?: any;
-  hideCopy?: boolean;
-}
-/**
- * Main DEM property field component
- * @category DEM Property Field
- */
-export const DemPropertyField = ({ propKey, property, parentKey }: DemPropertyFieldProps) => {
-  const name = useMemo(() => (parentKey ? `${parentKey}.${propKey}` : propKey), [propKey, parentKey]);
-  const label = useMemo(() => `${property?.name || propKey} ${property?.isRequired ? '*' : ''}`, [propKey, property]);
-
-  // const propsKeys = useMemo(() => {
-  //   if (property?.properties) {
-  //     const { properties } = property;
-  //     return Object.keys(properties).sort((keyA, keyB) => properties[keyA].sortOrder - properties[keyB].sortOrder);
-  //   }
-  //   return [];
-  // }, [property]);
-
-  if (property.isMultiple) {
-    return <MultipleDemField property={property} name={name} label={label} />;
-  } else {
-    return <SingleDemField property={property} name={name} label={label} />;
-  }
-
-  //   case EntityPropertyTypes.ENTITY: {
-  //     return (
-  //       <Box marginLeft={parentKey ? 2 : 0} paddingY={parentKey ? 4 : 0}>
-  //         <Typography variant="subtitle1">{property.name}</Typography>
-  //         {propsKeys.map((key) => (
-  //           <DemPropertyField
-  //             propKey={key}
-  //             control={control}
-  //             property={property.properties[key]}
-  //             errors={errors}
-  //             parentKey={name}
-  //           />
-  //         ))}
-  //       </Box>
-  //     );
-  //   }
-};

package/src/lib/DemPropertyField/DemPropertyView/DemPropertyView.tsx

@@ -1,44 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import { InfoItem } from '../../InfoItem';
-
-import { PropertyUnion } from '../../../interfaces';
-import { useMemo } from 'react';
-
-type Props = {
-  property: PropertyUnion;
-  value: any;
-};
-
-export const DemPropertyView = ({ property, value }: Props) => {
-  const infoProps = useMemo(() => {
-    const res: { title: string; text?: string; json?: any } = {
-      title: '',
-    };
-
-    if (property && value) {
-      res.title = property.name;
-
-      switch (property.propertyType) {
-        case 'JSON':
-          res.json = JSON.stringify(value, null, 2);
-          break;
-        case 'BOOLEAN':
-          res.json = value.toString();
-          break;
-        default:
-          res.text = value;
-          break;
-      }
-    }
-
-    return res;
-  }, [property, value]);
-
-  return (
-    <Grid item xs={12}>
-      <InfoItem {...infoProps} />
-    </Grid>
-  );
-};
-
-export default DemPropertyView;