ish-ui 1.0.2 → 1.0.4

package/src/formFields/UneditableBase.tsx

@@ -1,101 +0,0 @@
-/*
- * Copyright ish group pty ltd 2023.
- *
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
- *
- *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
- */
-
-import clsx from 'clsx';
-import React, { useCallback } from 'react';
-import {
-  FormControl, FormHelperText, Input, InputLabel
-} from '@mui/material';
-import InputAdornment from '@mui/material/InputAdornment';
-import { makeAppStyles } from '@src/styles';
-import { LinkAdornment } from './FieldAdornments';
-import { formatCurrency, openInternalLink } from '@src/utils';
-
-const useStyles = makeAppStyles({
-  rightAlignedLabel: {
-    left: 'unset',
-    right: 0,
-    transformOrigin: '100% 0'
-  }
-});
-
-interface UneditableProps {
-  value: string | number;
-  label: string;
-  labelAdornment?: any;
-  url?: string;
-  currencySymbol?: string;
-  money?: boolean;
-  multiline?: boolean;
-  rightAligned?: boolean;
-  className?: string;
-  placeholder?: string;
-  error?: string;
-  format?: (value) => any;
-}
-
-const UneditableBase = React.memo<UneditableProps>(props => {
-  const {
-    label, labelAdornment, placeholder = 'No value', rightAligned, value, url, money, currencySymbol, className, format, multiline, error
-  } = props;
-
-  const classes = useStyles();
-  const inputId = `input-${label.toLowerCase().replace(' ', '-')}`;
-
-  const openLink = useCallback(() => {
-    openInternalLink(url);
-  }, [url]);
-
-  return (
-    <FormControl
-      className={clsx(className, money && 'money')}
-      error={Boolean(error)}
-      variant="standard"
-      fullWidth
-    >
-      <InputLabel
-        shrink
-        classes={{
-          root: rightAligned ? classes.rightAlignedLabel : null
-        }}
-        htmlFor={inputId}
-      >
-        {label}
-        {url && <LinkAdornment link={url} className="pl-0-5" clickHandler={openLink} />}
-        {labelAdornment && (
-          <span className="pl-0-5">
-            {labelAdornment}
-            {' '}
-          </span>
-        )}
-      </InputLabel>
-      <Input
-        id={inputId}
-        startAdornment={money && <InputAdornment position="start">{currencySymbol}</InputAdornment>}
-        value={
-          money
-            ? formatCurrency(value, '')
-            : value
-              ? (format
-                  ? (format(value))
-                  : (value)
-              ) : ('')
-        }
-        multiline={multiline}
-        placeholder={placeholder}
-        inputProps={{
-          className: rightAligned && 'text-end'
-        }}
-        disabled
-      />
-      <FormHelperText>{error}</FormHelperText>
-    </FormControl>
-  );
-});
-
-export default UneditableBase;

package/src/layout/resizable/ResizableWrapper.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { Resizable } from 're-resizable';
-import { withStyles, createStyles } from '@mui/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import clsx from 'clsx';
-import { AppTheme } from '@src/model';
-
-const LIST_SIDE_BAR_DEFAULT_WIDTH = 265;
-
-const styles = (theme: AppTheme) =>
-  createStyles({
-    sideBar: {
-      borderRight: `1px solid ${theme.palette.divider}`,
-      display: 'flex',
-      paddingRight: '1px',
-      '&.d-none': {
-        display: 'none'
-      }
-    },
-    sideBarWrapper: {
-      overflowX: 'hidden',
-      overflowY: 'auto',
-      flex: 1
-    },
-    line: {
-      height: '100%',
-      width: '2px',
-      transition: 'background 120ms ease-in-out',
-    },
-    resizeLine: {
-      zIndex: theme.zIndex.drawer,
-      display: 'flex',
-      justifyContent: 'center',
-      '&:active $line, &:hover $line': {
-        background: `${theme.palette.secondary.main}`,
-        overflow: 'visible'
-      }
-    }
-  });
-
-interface Props {
-  sidebarWidth: number;
-  minWidth?: number | string;
-  maxWidth?: number | string;
-  onResizeStop?: any;
-  onResize?: any;
-  classes?: any;
-  className?: any;
-  ignoreScreenWidth?: boolean;
-  children?: any;
-}
-
-const ResizableWrapper = (props: Props) => {
-  const {
-    classes,
-    onResizeStop,
-    onResize,
-    sidebarWidth,
-    minWidth,
-    maxWidth,
-    children,
-    className,
-    ignoreScreenWidth
-  } = props;
-
-    return useMediaQuery('(min-width:992px)') || ignoreScreenWidth ? (
-      <Resizable
-        size={{ width: sidebarWidth, height: '100%' }}
-        minWidth={minWidth || LIST_SIDE_BAR_DEFAULT_WIDTH}
-        maxWidth={maxWidth}
-        onResizeStop={onResizeStop}
-        onResize={onResize}
-        enable={{ right: true }}
-        className={clsx(classes.sideBar, className)}
-        handleClasses={{ right: classes.resizeLine }}
-        handleComponent={{ right: <div className={props.classes.line} /> }}
-      >
-        <div className={classes.sideBarWrapper}>{children}</div>
-      </Resizable>
-    ) : (
-      children
-    );
-};
-
-const wrapped: any = (withStyles(styles)(ResizableWrapper) as any);
-
-export default wrapped as React.FC<Props>;

package/src/markdownEditor/HtmlEditor.tsx

@@ -1,44 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import AceEditor from 'react-ace';
-import 'ace-builds/webpack-resolver';
-import 'ace-builds/src-noconflict/mode-html';
-import 'ace-builds/src-noconflict/mode-textile';
-import 'ace-builds/src-noconflict/theme-tomorrow';
-import 'ace-builds/src-noconflict/ext-language_tools';
-import 'ace-builds/src-noconflict/snippets/html';
-import 'ace-builds/src-noconflict/snippets/textile';
-
-interface Props {
-  value?: string;
-  mode?: string;
-  onChange?: (html) => void;
-}
-
-const HtmlEditor = props => {
-  const { value, onChange, mode = 'html' } = props;
-
-  return (
-    <AceEditor
-      mode={mode}
-      theme="tomorrow"
-      fontSize={14}
-      height="200px"
-      showGutter={false}
-      width="100%"
-      wrapEnabled
-      highlightActiveLine
-      enableLiveAutocompletion={mode === 'html'}
-      enableBasicAutocompletion={mode === 'html'}
-      setOptions={{
-        enableSnippets: true,
-        showLineNumbers: true,
-        tabSize: 2,
-      }}
-      editorProps={{ $blockScrolling: Infinity }}
-      defaultValue={value}
-      onChange={onChange}
-    />
-  );
-};
-
-export default HtmlEditor as FunctionComponent<Props>;

package/src/markdownEditor/WysiwygEditor.tsx

@@ -1,137 +0,0 @@
-/*
- * Copyright ish group pty ltd 2022.
- *
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
- *
- *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
- */
-
-import React from 'react';
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
-import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
-import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
-import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
-import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
-import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
-import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
-import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown';
-import Table from '@ckeditor/ckeditor5-table/src/table';
-import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
-import Image from '@ckeditor/ckeditor5-image/src/image';
-import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
-import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
-import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
-import { CKEditor } from '@ckeditor/ckeditor5-react/dist/ckeditor';
-import { createRoot } from 'react-dom/client';
-import CodeIcon from '@mui/icons-material/Code';
-
-const SourceEditingSwitch = () => (
-  <div className="ck_source_edit_custom">
-    <CodeIcon className="ck_code_icon_custom" />
-  </div>
-);
-
-const config = {
-  plugins: [
-    Markdown,
-    SourceEditing,
-    EssentialsPlugin,
-    AutoformatPlugin,
-    BoldPlugin,
-    ItalicPlugin,
-    HeadingPlugin,
-    LinkPlugin,
-    ListPlugin,
-    ParagraphPlugin,
-    Table,
-    TableToolbar,
-    Image,
-    LinkImage,
-    ImageStyle,
-    ImageCaption,
-  ],
-  toolbar: [
-    'heading',
-    'bold',
-    'italic',
-    'link',
-    'bulletedList',
-    'numberedList',
-    'insertTable',
-    'sourceEditing',
-  ],
-  table: {
-    defaultHeadings: { rows: 1 },
-    contentToolbar: ['tableColumn', 'tableRow']
-  },
-  heading: {
-    options: [
-      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
-      {
-       model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1',
-      },
-      {
-       model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2',
-      },
-      {
-        model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3',
-      },
-      {
-        model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4',
-      },
-    ],
-  },
-};
-
-interface Props {
-  value?: string;
-  onChange?: (val: any) => void;
-  wysiwygRef?: any;
-}
-
-const WysiwygEditor: React.FC<Props> = ({
-  value,
-  onChange,
-  wysiwygRef
-}) => {
-
-  const onReady = editor => {
-    wysiwygRef.current = editor;
-
-    const sourceEdit = document.querySelector<any>('.ck-source-editing-button');
-    sourceEdit.dataset.ckeTooltipText = 'Edit source';
-    sourceEdit.dataset.ckeTooltipPosition = 's';
-
-    const root = createRoot(sourceEdit);
-
-    root.render(
-      <SourceEditingSwitch />
-    );
-
-    editor.plugins.get('SourceEditing').on('change:isSourceEditingMode', () => {
-      const sourceEdit = document.querySelector('.ck-source-editing-button');
-      if (sourceEdit) {
-        root.render(
-          <SourceEditingSwitch/>,
-        );
-      }
-    });
-  };
-
-  const onChangeHandler = (e, editor) => onChange(editor.getData());
-
-  return (
-    <CKEditor
-      editor={ClassicEditor}
-      config={config}
-      data={value}
-      onChange={onChangeHandler}
-      onReady={onReady}
-    />
-  );
-};
-
-export default WysiwygEditor;

package/src/markdownEditor/style.ts

@@ -1,188 +0,0 @@
-/*
- * Copyright ish group pty ltd 2022.
- *
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
- *
- *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
- */
-
-import { makeStyles } from '@mui/styles';
-import { AppTheme } from '@src/model';
-
-export const useStyles = makeStyles((theme: AppTheme) => ({
-  hoverIcon: {
-    opacity: 0.5,
-    visibility: 'hidden',
-    marginLeft: theme.spacing(1)
-  },
-  editable: {
-    display: 'inline-flex',
-    cursor: 'text',
-    color: theme.palette.text.primaryEditable,
-    minHeight: '32px',
-    padding: '4px 0 4px',
-    marginTop: theme.spacing(2),
-    fontWeight: 400,
-    justifyContent: 'space-between',
-    alignItems: 'flex-end',
-    '&:hover $hoverIcon': {
-      visibility: 'visible'
-    },
-    '&:before': {
-      borderBottom: '1px solid transparent',
-      left: 0,
-      bottom: '4px',
-      content: '\' \'',
-      position: 'absolute',
-      right: 0,
-      transition: theme.transitions.create('border-bottom-color', {
-        duration: theme.transitions.duration.standard,
-        easing: theme.transitions.easing.easeInOut
-      }),
-      pointerEvents: 'none'
-    },
-    '&:hover:before': {
-      borderBottom: `1px solid ${theme.palette.primary.main}`
-    },
-  },
-  editorArea: {
-    '&#editorRoot': {
-      '& .ck-dropdown__button .ck-button__label': {
-        fontSize: '14px'
-      },
-      cursor: 'text',
-      overflowY: 'auto',
-      position: 'relative',
-      '& .ck-list__item .ck-button': {
-        height: 'unset',
-        padding: '5px 10px'
-      },
-      '& .ck-list__item .ck-heading_heading3': {
-        fontSize: '15px'
-      },
-      '& .ck-list__item .ck-heading_heading4': {
-        fontSize: '14px'
-      },
-      '& .ck-toolbar': {
-        height: '45px',
-        background: theme.table.contrastRow.main
-      },
-      '& .ck-list__item': {
-        fontSize: '15px'
-      },
-      '& .ck-dropdown': {
-        fontSize: '15px'
-      },
-      '& .ck.ck-dropdown .ck-button__label': {
-        fontFamily: 'Inter, sans-serif',
-        overflow: 'visible',
-        width: '120px'
-      },
-      '& .content-mode-wrapper': {
-        position: 'absolute',
-        right: '10px',
-        top: '6px',
-        padding: '5px',
-        zIndex: 1000,
-        '& .content-mode': {
-          maxWidth: '85px',
-          border: 0,
-          boxShadow: 'none',
-          backgroundColor: 'black',
-          color: 'white',
-          padding: '2px',
-          fontSize: '9px',
-          '&:hover': {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.primary.contrastText,
-          },
-        }
-      },
-      '& .ck-editor': {
-        '& .ck-content': {
-          resize: 'vertical',
-          maxHeight: '80vh',
-          minHeight: '200px',
-          fontFamily: 'Inter, sans-serif',
-          fontWeight: 400,
-          fontSize: '14px',
-          color: 'black'
-        },
-        '& .ck-content .table': {
-          marginLeft: 0
-        },
-        '& .ck-toolbar': {
-          padding: '3px'
-        },
-        '& .ck-source-editing-button': {
-          marginLeft: 'auto',
-          marginRight: '44px'
-        },
-        '& .ck-source-editing-button > *': {
-          visibility: 'hidden'
-        },
-        '& .ck-source-editing-button .ck_source_edit_custom': {
-          visibility: 'visible'
-        },
-        '& .ck-source-editing-button .ck_code_icon_custom': {
-          width: '24px'
-        },
-      },
-      '&.ace-wrapper': {
-        border: `1px solid ${theme.palette.divider}`,
-        paddingTop: '44px',
-        background: theme.table.contrastRow.main,
-        '& .ace_editor': {
-          borderTop: `1px solid ${theme.palette.divider}`
-        }
-      }
-    }
-  },
-  previewFrame: {
-    width: '100%',
-    maxHeight: '300px',
-    overflow: 'auto',
-    fontSize: '16px',
-    '& > div': {
-      width: '100%'
-    },
-    '& h1,h2,h3,h4': {
-      all: 'revert'
-    },
-    '& table': {
-      marginLeft: 0,
-      marginRight: 'auto',
-      borderCollapse: 'collapse',
-      borderSpacing: 0,
-      border: '1px double #b3b3b3',
-      '& th': {
-        textAlign: 'left',
-        fontWeight: 700,
-        background: 'hsla(0,0%,0%,5%)',
-        minWidth: '2em',
-        padding: '0.4em',
-        border: '1px solid #bfbfbf'
-      },
-      '& td': {
-        minWidth: '2em',
-        padding: '0.4em',
-        border: '1px solid #bfbfbf'
-      },
-    }
-  },
-  readonly: {
-    fontWeight: 300,
-    pointerEvents: 'none'
-  },
-  textField: {
-    paddingLeft: '0',
-    // @ts-ignore
-    paddingBottom: `${theme.spacing(2) - 3}`,
-    margin: 0
-  },
-  '@global': {
-    '.ck.ck-balloon-panel.ck-balloon-panel_visible': {
-      zIndex: 2000
-    }
-  }
-}));

package/src/markdownEditor/utils/index.ts

@@ -1,48 +0,0 @@
-/*
- * Copyright ish group pty ltd 2020.
- *
- * This program is free software: you can redistribute it and/or modify it under the terms of the
- * GNU Affero General Public License version 3 as published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
- * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
- * See the GNU Affero General Public License for more details.
- */
-
-export type ContentMode = 'textile' | 'html' | 'md';
-
-export const CONTENT_MODES: {
-  id: ContentMode,
-  title: string
-}[] = [
-  { id: 'md', title: 'rich text' },
-  { id: 'textile', title: 'legacy' },
-  { id: 'html', title: 'advanced (html)' }
-];
-
-export const getContentMarker = text => {
-  if (!text) return CONTENT_MODES[0].id;
-  const match = text.match(/\s*{render:"(.*)"}/, '');
-  return match && match[1] ? match[1] : CONTENT_MODES[1].id;
-};
-
-export const removeContentMarker = text => {
-  if (!text) return text;
-  return text.replace(/\s*{render:.*/g, '');
-};
-
-export const addContentMarker = (text, contentMode) => (
-  `${text}
-  {render:"${contentMode}"}`
-);
-
-export const getEditorModeLabel = (mode: ContentMode) => {
-  switch (mode) {
-    case 'md':
-      return 'RICH';
-    case 'html':
-      return 'HTML';
-    case 'textile':
-      return 'LEGACY';
-  }
-};

package/src/model/AppBar.ts

@@ -1,20 +0,0 @@
-/*
- * Copyright ish group pty ltd 2023.
- *
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
- *
- *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
- */
-
-import { ReactNode } from 'react';
-import { AnyArgFunction } from '@src/model/CommonFunctions';
-
-export interface AppBarAction {
-  action: AnyArgFunction;
-  icon: ReactNode;
-  tooltip: string;
-  confirmText?: string;
-  confirmButtonText?: string;
-  disabled?: boolean;
-  tooltipError?: boolean;
-}

package/src/model/CommomObjects.ts

@@ -1,8 +0,0 @@
-export type StringKeyObject<V = any> = { [key: string]: V };
-
-export type StringKeyAndValueObject = StringKeyObject<string>;
-
-// Helper type for creating types from string arrays
-export type StringValueType<T extends ReadonlyArray<unknown>> = T extends ReadonlyArray<infer ElementType>
-  ? ElementType
-  : never;

package/src/model/Confirm.ts

@@ -1,27 +0,0 @@
-/*
- * Copyright ish group pty ltd 2023.
- *
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
- *
- *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
- */
-
-import { ReactNode } from 'react';
-import { AnyArgFunction } from '@src/model/CommonFunctions';
-
-export interface ConfirmProps {
-  onCancel?: AnyArgFunction;
-  onConfirm?: AnyArgFunction;
-  title?: string;
-  confirmMessage?: ReactNode;
-  cancelButtonText?: string;
-  confirmButtonText?: string;
-  onCancelCustom?: AnyArgFunction;
-  confirmCustomComponent?: ReactNode;
-}
-
-export interface ConfirmState extends ConfirmProps {
-  open: boolean;
-}
-
-export type ShowConfirmCaller = (props: ConfirmProps) => any;