ish-ui 1.0.2

package/src/formFields/UneditableBase.tsx

@@ -0,0 +1,101 @@
+/*
+ * 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/formFields/index.ts

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+export * from './CheckboxField';
+export * from './CodeEditorField';
+export * from './ColoredCheckBox';
+export * from './DateTimeField';
+export * from './EditInPlaceDateTimeField';
+export * from './EditInPlaceDurationField';
+export * from './EditInPlaceField';
+export * from './EditInPlaceFieldBase';
+export * from './EditInPlaceFileField';
+export * from './EditInPlaceMoneyField';
+export * from './EditInPlacePhoneField';
+export * from './EditInPlaceSearchSelect';
+export * from './FieldAdornments';
+export * from './FilePreview';
+export * from './FormRadioButtons';
+export * from './SelectCustomComponents';
+export * from './Switch';
+export * from './TextField';
+export * from './UneditableBase';

package/src/index.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+export * from './actions';
+export * from './appBar';
+export * from './buttons';
+export * from './colorPicker';
+export * from './dialog';
+export * from './documents';
+export * from './dynamicSizeList';
+export * from './fieldMessage';
+export * from './fileUploader';
+export * from './formFields';
+export * from './layout';
+export * from './markdownEditor';
+export * from './model';
+export * from './styles';
+export * from './tagsInput';
+export * from './themes';
+export * from './utils';
+export * from './timetable';

package/src/layout/InfoPill.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { Chip } from '@mui/material';
+import React from 'react';
+import { alpha } from '@mui/material/styles';
+import { makeAppStyles } from '@src/styles';
+
+const useStyles = makeAppStyles<Props>(theme => ({
+  chip: {
+    textTransform: 'uppercase',
+    fontWeight: 600,
+    fontSize: '12px',
+    marginLeft: theme.spacing(1),
+    color: ({ color }) => theme.palette[color].light,
+    backgroundColor: ({ color }) => alpha(theme.palette[color].light, 0.15)
+  }
+}));
+
+interface Props {
+  label: string;
+  color?: 'success' | 'primary';
+}
+
+const InfoPill = ({ label, color = label === 'custom' ? 'primary' : 'success' }: Props) => {
+  const classes = useStyles({ label, color });
+  
+  return <Chip className={classes.chip} label={label} size="small" />;
+};
+
+export default InfoPill;

package/src/layout/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export * from './resizable/ResizableWrapper';
+export * from './InfoPill';

package/src/layout/resizable/ResizableWrapper.tsx

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

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

@@ -0,0 +1,137 @@
+/*
+ * 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/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export * from './utils/index';
+export * from './style';
+export * from './HtmlEditor';
+export * from './WysiwygEditor';

package/src/markdownEditor/style.ts

@@ -0,0 +1,188 @@
+/*
+ * 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
+    }
+  }
+}));