@genesislcap/pbc-documents-ui 0.0.1 → 0.0.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@genesislcap/pbc-documents-ui",
   "description": "Genesis Document Management UI",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "license": "SEE LICENSE IN license.txt",
-  "main": "src/index.ts",
+  "main": "dist/esm/index.js",
   "types": "dist/foundation-file-server.d.ts",
   "engines": {
     "node": ">=20.0.0"
@@ -15,7 +15,7 @@
   "exports": {
     ".": {
       "types": "./dist/foundation-file-server.d.ts",
-      "default": "./src/index.ts"
+      "default": "./dist/esm/index.js"
     },
     "./e2e": {
       "default": "./test/e2e/index.ts"

package/src/components/components.ts

@@ -1,49 +0,0 @@
-import { logger } from '../utils';
-import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
-import { FoundationDocumentManager } from './foundation-document-manager/document-manager';
-import { zeroDesignSystemProvider } from '@genesislcap/foundation-zero';
-import { zeroGridComponents, zeroGridPro } from '@genesislcap/foundation-zero-grid-pro';
-import { allComponents, provideFASTDesignSystem } from '@microsoft/fast-components';
-
-// Components
-FoundationDocumentManager;
-
-enum ResourceType {
-  LOCAL = 'LOCAL',
-  REMOTE = 'REMOTE',
-}
-
-// TODO: Think about sharing import functions across micro frontends.
-function loadZeroFallback() {
-  return import(
-    /* webpackMode: "lazy" */
-    '@genesislcap/foundation-zero'
-  );
-}
-
-// Granular
-async function loadZeroDesignSystem() {
-  let type = ResourceType.REMOTE;
-  try {
-    // @ts-ignore
-    return await import('foundationZero/ZeroDesignSystem');
-  } catch (e) {
-    type = ResourceType.LOCAL;
-    return await loadZeroFallback();
-  } finally {
-    logger.debug(`Using '${type}' version of foundationZero/ZeroDesignSystem`);
-  }
-}
-
-export async function loadRemotes() {
-  const { registerZeroDesignSystem, provideDesignSystem } = await loadZeroDesignSystem();
-
-  return {
-    ZeroDesignSystem: {
-      ...registerZeroDesignSystem(),
-      ...provideDesignSystem().register(foundationLayoutComponents),
-    },
-  };
-}
-
-provideFASTDesignSystem().register(allComponents, zeroGridComponents, zeroDesignSystemProvider());

package/src/components/foundation-document-manager/component/document-grid/column-config.ts

@@ -1,108 +0,0 @@
-import { GridProRendererTypes, getActionsMenuDef } from '@genesislcap/grid-pro';
-import { formatBytes, formatDateLong, getFileType } from '../../../../utils/formatting';
-import { FileTypeCellRenderer } from '../../utils/file-type-cell-renderer';
-import { ActionCellRenderer } from '../../utils/action-cell-renderer';
-import { DocumentGrid } from './document-grid';
-import { downloadIcon, optionsIcon } from '../../utils/icons';
-
-export enum COLUMN_FIELDS {
-  FILE_STORAGE_ID = 'FILE_STORAGE_ID',
-  STORAGE_MANAGER = 'STORAGE_MANAGER',
-  FILE_NAME = 'FILE_NAME',
-  FILE_SIZE = 'FILE_SIZE',
-  MODIFIED_AT = 'MODIFIED_AT',
-  MODIFIED_BY = 'MODIFIED_BY',
-  CREATED_BY = 'CREATED_BY',
-  CREATED_AT = 'CREATED_AT',
-  LOCATION_DETAILS = 'LOCATION_DETAILS',
-}
-
-export function DOCUMENT_COLUMNS(context: DocumentGrid) {
-  return [
-    {
-      headerName: 'Type',
-      suppressMenu: true,
-      width: 90,
-      flex: 1,
-      valueGetter: (props) => {
-        return getFileType(props.data.FILE_NAME);
-      },
-      cellStyle: () => ({
-        display: 'flex',
-        alignItems: 'center',
-      }),
-      cellRenderer: FileTypeCellRenderer,
-      cellRendererParams: (params) => {
-        const hyperlinkParams = {
-          data: params.data,
-        };
-        return hyperlinkParams;
-      },
-    },
-
-    {
-      field: COLUMN_FIELDS.FILE_NAME,
-      headerName: 'Name',
-      suppressMenu: true,
-      flex: 3,
-    },
-    {
-      field: COLUMN_FIELDS.CREATED_BY,
-      headerName: 'Owner',
-      suppressMenu: true,
-      flex: 2,
-    },
-    {
-      field: COLUMN_FIELDS.MODIFIED_AT,
-      headerName: 'Last Modified',
-      suppressMenu: true,
-      flex: 2,
-      valueFormatter: (props) => {
-        return formatDateLong(props?.data?.MODIFIED_AT);
-      },
-    },
-    {
-      field: COLUMN_FIELDS.FILE_SIZE,
-      headerName: 'Size',
-      suppressMenu: true,
-      flex: 2,
-      valueFormatter: (props) => {
-        return formatBytes(props?.data?.FILE_SIZE, 0);
-      },
-    },
-    {
-      headerName: '',
-      suppressMenu: true,
-      flex: 1,
-      resizable: false,
-      sortable: false,
-      cellStyle: () => ({
-        display: 'flex',
-        alignItems: 'center',
-      }),
-      cellRenderer: ActionCellRenderer,
-      cellRendererParams: (params) => {
-        const downloadBtn = {
-          name: downloadIcon,
-          callback: (detail) => {
-            context.$emit('download-document', detail.FILE_STORAGE_ID);
-          },
-          actionName: 'Download',
-        };
-        const removeBtn = {
-          name: optionsIcon,
-          callback: (detail) => {
-            context.$emit('remove-document', detail.FILE_STORAGE_ID);
-          },
-          actionName: 'remove',
-        };
-        const actions = [downloadBtn, removeBtn];
-        const enabled = true;
-        return {
-          actions,
-          enabled,
-        };
-      },
-    },
-  ];
-}

package/src/components/foundation-document-manager/component/document-grid/document-grid.styles.ts

@@ -1,10 +0,0 @@
-import { ElementStyles, css } from '@microsoft/fast-element';
-
-export const DocumentGridStyles: ElementStyles = css`
-  :host {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    display: flex;
-  }
-`;

package/src/components/foundation-document-manager/component/document-grid/document-grid.template.ts

@@ -1,14 +0,0 @@
-import { html, ref, repeat } from '@microsoft/fast-element';
-import { DocumentGrid } from './document-grid';
-import { DOCUMENT_COLUMNS } from './column-config';
-
-export const DocumentGridTemplate = html<DocumentGrid>`
-  <zero-grid-pro ${ref('documentGrid')} @onGridReady="${(x) => x.onGridReady()}">
-    ${repeat(
-      (x) => DOCUMENT_COLUMNS(x),
-      html`
-        <grid-pro-column :definition="${(x) => x}"></grid-pro-column>
-      `,
-    )}
-  </zero-grid-pro>
-`;

package/src/components/foundation-document-manager/component/document-grid/document-grid.ts

@@ -1,39 +0,0 @@
-import { FASTElement, attr, customElement } from '@microsoft/fast-element';
-import { DocumentGridTemplate } from './document-grid.template';
-import { DocumentGridStyles } from './document-grid.styles';
-import { GridPro } from '@genesislcap/grid-pro';
-import { IFileStorage } from '../../../../utils/types';
-
-@customElement({
-  name: 'document-grid',
-  template: DocumentGridTemplate,
-  styles: DocumentGridStyles,
-})
-export class DocumentGrid extends FASTElement {
-  @attr data: IFileStorage[] = [];
-
-  public documentGrid!: GridPro;
-
-  connectedCallback() {
-    super.connectedCallback();
-    const gridOptions = {
-      animateRows: true,
-      scrollbarWidth: 10,
-      suppressHorizontalScroll: true,
-      suppressCellFocus: true,
-      getRowId: (params) => params.data.FILE_STORAGE_ID,
-    };
-
-    this.documentGrid.gridOptions = gridOptions;
-  }
-
-  onGridReady() {
-    this.documentGrid.gridApi.setRowData(this.data);
-  }
-
-  dataChanged() {
-    if (this.documentGrid?.gridApi) {
-      this.documentGrid.gridApi.setRowData(this.data);
-    }
-  }
-}

package/src/components/foundation-document-manager/component/document-tile/document-tile.styles.ts

@@ -1,137 +0,0 @@
-import { ElementStyles, css } from '@microsoft/fast-element';
-
-export const DocumentTileStyles: ElementStyles = css`
-  :host {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    overflow: hidden auto;
-    background-color: var(--neutral-layer-4);
-    box-sizing: border-box;
-  }
-
-  .file-icon {
-    display: flex;
-    justify-content: center;
-    fill: var(--neutral-foreground-hint);
-  }
-
-  .file-name {
-    position: absolute;
-    bottom: 60px;
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-rest);
-    text-align: left;
-    line-height: normal;
-  }
-
-  .file-type {
-    height: fit-content;
-    width: fit-content;
-    padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 2px);
-    border-radius: calc(var(--control-corner-radius) * 1px);
-    font-size: 10px;
-    font-weight: 700;
-    color: rgba(20, 20, 20, 0.89);
-    text-align: center;
-    line-height: normal;
-  }
-
-  .footer-actions {
-    display: flex;
-    flex-direction: row;
-    gap: calc(var(--design-unit) * 2px);
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    fill: var(--neutral-foreground-hint);
-  }
-
-  .footer-actions > span,
-  .top-section > zero-icon {
-    cursor: pointer;
-  }
-
-  .footer-actions > span:hover,
-  .top-section > zero-icon:hover {
-    fill: var(--neutral-foreground-rest);
-  }
-
-  .footer-left {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    bottom: 10px;
-    left: 10px;
-  }
-
-  .footer-left > a {
-    box-sizing: border-box;
-    color: var(--neutral-foreground-hint);
-    text-align: left;
-    line-height: normal;
-    font-size: var(--type-ramp-minus-2-font-size);
-  }
-
-  .options-icon {
-    fill: var(--neutral-foreground-hint);
-    cursor: pointer;
-  }
-
-  .options-icon:hover {
-    fill: var(--neutral-foreground-rest);
-  }
-
-  .tile {
-    position: relative;
-    width: 251px;
-    height: 192px;
-    padding: calc(var(--design-unit) * 3px);
-    border-radius: calc((var(--control-corner-radius) - 1) * 2px);
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
-    background-color: var(--neutral-layer-3);
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 3px);
-  }
-
-  .tile > .top-section {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .tile:hover {
-    background-color: var(--neutral-layer-2);
-  }
-
-  .tile-container,
-  .tile-container-temp {
-    position: relative;
-    min-height: inherit;
-    display: grid;
-    padding: calc(var(--design-unit) * 3px);
-    gap: calc(var(--design-unit) * 2px);
-    grid-template-columns: repeat(auto-fill, 252px);
-    grid-template-rows: repeat(auto-fill, 192px);
-    align-items: center;
-    justify-items: center;
-  }
-
-  .tile-container-temp {
-    pointer-events: none;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-  }
-
-  .tile-container-temp > .tile {
-    opacity: 0;
-  }
-
-  zero-icon::part(icon-ellipsis-vertical-md-solid > svg > path):hover {
-    fill: var(--neutral-foreground-rest);
-  }
-`;

package/src/components/foundation-document-manager/component/document-tile/document-tile.template.ts

@@ -1,71 +0,0 @@
-import { html, ref, repeat } from '@microsoft/fast-element';
-import { DocumentTile } from './document-tile';
-import { IFileStorage } from '../../../../utils/types';
-import {
-  formatBytes,
-  formatDateLong,
-  getFileColor,
-  getFileType,
-} from '../../../../utils/formatting';
-import { downloadIcon, optionsIcon } from '../../utils/icons';
-
-const tileTemplate = (hidden = false) => html<IFileStorage>`
-  <div class="tile" id="id-${(x) => x.FILE_STORAGE_ID}${() => (hidden ? '-temp' : '')}">
-    <div class="top-section">
-      <div
-        class="file-type"
-        style="background-color: ${(x) => getFileColor(getFileType(x.FILE_NAME))}"
-      >
-        ${(x) => getFileType(x.FILE_NAME)}
-      </div>
-      <span
-        class="options-icon"
-        title="Options"
-        @click=${(x, c) => c.parent.$emit('remove-document', x.FILE_STORAGE_ID)}
-      >
-        ${optionsIcon}
-      </span>
-    </div>
-    <div class="file-icon">${(x, c) => c.parent.getFileIcon(getFileType(x.FILE_NAME))}</div>
-    <a class="file-name">${(x) => x.FILE_NAME}</a>
-    <div class="footer">
-      <div class="footer-left">
-        <a>${(x) => x.CREATED_BY}</a>
-        <a>${(x) => formatDateLong(x.CREATED_AT)}</a>
-        <a>${(x) => formatBytes(x.FILE_SIZE, 0)}</a>
-      </div>
-      <div class="footer-actions">
-        <span
-          title="Download"
-          @click=${(x, c) => c.parent.$emit('download-document', x.FILE_STORAGE_ID)}
-        >
-          ${downloadIcon}
-        </span>
-      </div>
-    </div>
-  </div>
-`;
-
-export const DocumentTileTemplate = html<DocumentTile>`
-  <div ${ref('tileContainer')} class="tile-container">
-    ${repeat(
-      (x) => x.dataAfterTransition,
-      html<IFileStorage>`
-        ${tileTemplate()}
-      `,
-      { recycle: false },
-    )}
-  </div>
-  <div ${ref('tileContainerTemp')} class="tile-container-temp">
-    ${repeat(
-      (x) => x.tempData,
-      html<IFileStorage>`
-        ${tileTemplate(true)}
-      `,
-      { recycle: true },
-    )}
-  </div>
-  <zero-anchored-region vertical-positioning-mode="right" vertical-default-position="top">
-    <zero-button>Click me</zero-button>
-  </zero-anchored-region>
-`;

package/src/components/foundation-document-manager/component/document-tile/document-tile.ts

@@ -1,119 +0,0 @@
-import { FASTElement, attr, customElement, observable } from '@microsoft/fast-element';
-import { DocumentTileTemplate } from './document-tile.template';
-import { DocumentTileStyles } from './document-tile.styles';
-import { IFileStorage } from '../../../../utils/types';
-import { csvIcon, jpgIcon, pdfIcon } from '../../utils/icons';
-
-@customElement({
-  name: 'document-tile',
-  template: DocumentTileTemplate,
-  styles: DocumentTileStyles,
-})
-export class DocumentTile extends FASTElement {
-  public tileContainer: HTMLElement;
-  public tileContainerTemp: HTMLElement;
-
-  @attr data: IFileStorage[] = [];
-  @observable tempData: IFileStorage[] = [];
-  @observable dataAfterTransition: IFileStorage[] = [];
-
-  connectedCallback() {
-    super.connectedCallback();
-  }
-
-  public dataChanged(old: IFileStorage[], newData: IFileStorage[]) {
-    if (old && old.length > 0) {
-      this.tempData = newData;
-      const animationTime = 500;
-
-      const tempnewData = newData.filter(
-        (x) => old.findIndex((y) => y.FILE_STORAGE_ID === x.FILE_STORAGE_ID) == -1,
-      );
-
-      setTimeout(() => {
-        const map = new Map<string, any>();
-        Array.from(this.tileContainer.children).forEach((x: HTMLElement) =>
-          map.set(x.id, { left: x.offsetLeft, top: x.offsetTop }),
-        );
-        Array.from(this.tileContainer.children).forEach(async (x: HTMLElement) => {
-          const position = map.get(x.id);
-          x.setAttribute(
-            'style',
-            `position: absolute; left: ${position.left}px; top: ${position.top}px`,
-          );
-        });
-
-        old.forEach((doc, index) => {
-          const newIndex = newData.findIndex((x) => x.FILE_STORAGE_ID === doc.FILE_STORAGE_ID);
-          const element: HTMLElement = this.tileContainer.querySelector(
-            `#id-${doc.FILE_STORAGE_ID}`,
-          );
-          const newEle: HTMLElement = this.tileContainerTemp.querySelector(
-            `#id-${doc.FILE_STORAGE_ID}-temp`,
-          );
-
-          if (newIndex === -1) {
-            const animation = element.animate({ opacity: [1, 0] }, { duration: animationTime });
-            if (index === old.length - 1 && tempnewData.length === 0) {
-              animation.onfinish = () => {
-                this.animationFinish(newData);
-              };
-            }
-          } else if (index != newIndex) {
-            const animation = element.animate(
-              [
-                {
-                  left: `${element.offsetLeft}px`,
-                  top: `${element.offsetTop}px`,
-                },
-                {
-                  left: `${newEle.offsetLeft}px`,
-                  top: `${newEle.offsetTop}px`,
-                },
-              ],
-              { duration: animationTime },
-            );
-            if (index === old.length - 1 && tempnewData.length === 0) {
-              animation.onfinish = () => {
-                this.animationFinish(newData);
-              };
-            }
-          }
-        });
-
-        tempnewData.forEach((doc, index) => {
-          const newEle: HTMLElement = this.tileContainerTemp.querySelector(
-            `#id-${doc.FILE_STORAGE_ID}-temp`,
-          );
-          const animation = newEle.animate({ opacity: [0, 1] }, { duration: animationTime });
-          if (index === tempnewData.length - 1) {
-            animation.onfinish = () => {
-              this.animationFinish(newData);
-            };
-          }
-        });
-      }, 0);
-    } else {
-      this.dataAfterTransition = newData;
-      this.tempData = [];
-    }
-  }
-
-  private animationFinish(newData) {
-    this.dataAfterTransition = newData;
-    this.tempData = [];
-  }
-
-  public getFileIcon(fileType: string) {
-    switch (fileType) {
-      case 'CSV':
-        return csvIcon;
-      case 'JPG':
-        return jpgIcon;
-      case 'PDF':
-        return pdfIcon;
-      default:
-        return '';
-    }
-  }
-}