@genesislcap/pbc-documents-ui 0.0.1 → 0.0.2

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

@@ -1,157 +0,0 @@
-import { ElementStyles, css } from '@microsoft/fast-element';
-
-export const DocumentUploadStyles: ElementStyles = css`
-  :host {
-    height: 100%;
-    width: 100%;
-    padding: calc(var(--design-unit) * 3px);
-    position: absolute;
-    background-color: var(--neutral-layer-4);
-    box-sizing: border-box;
-  }
-
-  .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    border-radius: calc(var(--control-corner-radius) * 1px);
-    border: calc(var(--stroke-width) * 1px) dashed var(--accent-fill-rest);
-    background-color: var(--neutral-layer-3);
-    box-sizing: border-box;
-  }
-
-  .clickable {
-    cursor: pointer;
-  }
-
-  .dialog {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: calc(var(--design-unit) * 3px);
-  }
-
-  .document-name {
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-stroke-hover);
-    text-align: center;
-    line-height: var(--type-ramp-base-line-height);
-  }
-
-  .document-size {
-    color: var(--neutral-foreground-hint);
-    font-size: var(--type-ramp-minus-1-font-size);
-    text-align: center;
-    line-height: normal;
-  }
-
-  .drag-prompt {
-    font-size: var(--type-ramp-minus-1-font-size);;
-    color: var(--neutral-foreground-rest);
-    text-align: center;
-    line-height: normal;
-  }
-
-  .drag-prompt > span {
-    color: var(--accent-fill-rest);
-  }
-
-  .progress {
-    width: 261px;
-    height: calc(var(--design-unit) * 1px);
-  }
-
-  .error-progress::part(determinate) {
-    background-color: var(--error-color);
-  }
-
-  .type-prompt {
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-hint);
-    text-align: center;
-    line-height: normal;
-  }
-
-  .upload-icon,
-  .error-icon {
-    fill: var(--neutral-foreground-rest);
-    -webkit-animation: animation-upload-icon 3s infinite;
-    -moz-animation: animation-upload-icon 3s infinite;
-    -o-animation: animation-upload-icon 3s infinite;
-    animation: animation-upload-icon 3s infinite;
-  }
-
-  .upload-successfull::part(determinate) {
-    background-color: var(--success-color);
-  }
-
-  .uploading-prompt {
-    width: 134px;
-    margin-left: 75px;
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-rest);
-    line-height: normal;
-  }
-
-  .uploading-prompt:after {
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: bottom;
-    -webkit-animation: ellipsis steps(4, end) 2s infinite;
-    animation: ellipsis steps(4, end) 2s infinite;
-    content: '...';
-    width: 0px;
-  }
-
-  .success-icon {
-    position: relative;
-    height: calc(var(--base-height-multiplier) * 5px);
-  }
-
-  .success-icon > svg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  @keyframes ellipsis {
-    to {
-      width: 14px;
-    }
-  }
-
-  @-webkit-keyframes ellipsis {
-    to {
-      width: 14px;
-    }
-  }
-
-  .error-icon {
-    fill: var(--error-color);
-  }
-
-  @-webkit-keyframes animation-upload-icon {
-    0% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.3;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  @keyframes animation-upload-icon {
-    0% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.3;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-`;

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

@@ -1,82 +0,0 @@
-import { html, ref, when } from '@microsoft/fast-element';
-import { DocumentUpload, UploadState } from './document-upload';
-import {
-  checkmark,
-  checkmarkBackground,
-  checkmarkCircle,
-  uploadIcon,
-  uploadIconLarge,
-} from '../../utils/icons';
-import { formatBytes } from '../../../../utils/formatting';
-
-export const DocumentUploadTemplate = html<DocumentUpload>`
-  <div class="container" ${ref('dropArea')}>
-    ${when(
-      (x) => x.currentState === UploadState.START,
-      html<DocumentUpload>`
-        <div class="dialog">
-          <span class="upload-icon">${uploadIconLarge}</span>
-          <a class="drag-prompt clickable" @click=${(x) => x.fileClick()}>
-            Drag and drop or
-            <span>select</span>
-            a file to upload.
-          </a>
-          <a class="type-prompt">Allows file type: PDF, CSV, JPG, PNG</a>
-        </div>
-      `,
-    )}
-    ${when(
-      (x) =>
-        x.currentState === UploadState.UPLOADING ||
-        x.currentState === UploadState.UPLOADING_UPLOADED,
-      html<DocumentUpload>`
-        <div class="dialog">
-          <span class="upload-icon">${uploadIconLarge}</span>
-          <a
-            class="${(x) =>
-              x.currentState === UploadState.UPLOADING ? 'uploading-prompt' : 'drag-prompt'}"
-          >
-            ${(x) => (x.currentState === UploadState.UPLOADING ? 'Uploading' : 'File Uploaded')}
-          </a>
-          <a class="document-name">${(x) => x.fileName}</a>
-          <a class="document-size">${(x) => formatBytes(x.fileSize, 2)}</a>
-          <zero-progress
-            class="progress ${(x) =>
-              x.currentState === UploadState.UPLOADING_UPLOADED || x.fileUploadProgress >= 100
-                ? 'upload-successfull'
-                : ''}"
-            min="0"
-            max="100"
-            value=${(x) => x.fileUploadProgress}
-          ></zero-progress>
-        </div>
-      `,
-    )}
-    ${when(
-      (x) => x.currentState === UploadState.UPLOADED,
-      html<DocumentUpload>`
-        <div class="dialog">
-          <span class="success-icon">${checkmarkBackground} ${checkmarkCircle} ${checkmark}</span>
-          <a class="drag-prompt">Document successfully uploaded</a>
-        </div>
-      `,
-    )}
-    ${when(
-      (x) => x.currentState === UploadState.ERROR,
-      html<DocumentUpload>`
-        <div class="dialog">
-          <span class="error-icon">${uploadIconLarge}</span>
-          <a class="drag-prompt">Error uploading file. Please try again.</a>
-          <a class="document-name">${(x) => x.fileName}</a>
-          <a class="document-size">${(x) => formatBytes(x.fileSize, 2)}</a>
-          <zero-progress
-            class="progress error-progress"
-            min="0"
-            max="100"
-            value="100"
-          ></zero-progress>
-        </div>
-      `,
-    )}
-  </div>
-`;

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

@@ -1,146 +0,0 @@
-import { DOM, FASTElement, customElement, observable } from '@microsoft/fast-element';
-import { DocumentUploadTemplate } from './document-upload.template';
-import { DocumentUploadStyles } from './document-upload.styles';
-import { IDocumentService } from '../../../../services/document.service';
-import { logger } from '../../../../utils';
-
-export enum UploadState {
-  START = 'START',
-  ERROR = 'ERROR',
-  UPLOADING = 'UPLOADING',
-  UPLOADING_UPLOADED = 'UPLOADING_UPLOADED',
-  UPLOADED = 'UPLOADED',
-}
-
-@customElement({
-  name: 'document-upload',
-  template: DocumentUploadTemplate,
-  styles: DocumentUploadStyles,
-})
-export class DocumentUpload extends FASTElement {
-  @IDocumentService docService: IDocumentService;
-
-  @observable currentState: UploadState = UploadState.START;
-  @observable fileName: string;
-  @observable fileSize: number;
-  @observable fileUploadProgress: number = 0;
-
-  public dropArea: HTMLDivElement;
-  public fileSelect: HTMLInputElement;
-  public endpoint: string = '';
-
-  private readonly errorViewTime: number = 7000;
-  private readonly uploadingUploadedViewTime: number = 3000;
-  private readonly uploadedViewTime: number = 3000;
-
-  private file: any;
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    DOM.queueUpdate(() => {
-      this.createFileUploadInput();
-
-      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-        this.dropArea.addEventListener(eventName, this.preventDefaults, false);
-      });
-      this.dropArea.addEventListener('drop', this.handleDrop.bind(this), false);
-    });
-  }
-
-  public fileClick() {
-    this.fileSelect.click();
-  }
-
-  private handleDrop(e) {
-    if (this.currentState === UploadState.START) {
-      const dt = e.dataTransfer;
-      const files = dt.files;
-      const contentTypes = [
-        'text/csv',
-        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-        'application/pdf',
-        'image/jpg',
-        'image/png',
-      ];
-
-      const firstElement = 0;
-
-      if (files[firstElement] && contentTypes.includes(files[firstElement].type)) {
-        const file = files[firstElement];
-        this.updateSelectedFile(file);
-      }
-    }
-  }
-
-  private createFileUploadInput() {
-    this.fileSelect = document.createElement('input') as HTMLInputElement;
-    this.fileSelect.type = 'file';
-    this.fileSelect.accept =
-      'application/pdf,image/jpg,image/png,.csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
-    this.fileSelect.onchange = (event) => {
-      logger.debug('file upload click');
-      this.fileSelected(event);
-    };
-  }
-
-  private fileSelected(event) {
-    // Only take the first file
-    const file = event.target.files[0];
-    this.updateSelectedFile(file);
-  }
-
-  private updateSelectedFile(file: any) {
-    this.file = file;
-    this.fileName = this.file.name;
-    this.fileSize = this.file.size;
-    this.fileSelect.value = '';
-    this.fileUploadProgress = 0;
-    this.uploadedFile();
-  }
-
-  private uploadedFile() {
-    this.currentState = UploadState.UPLOADING;
-    this.docService.uploadDocument(this.file).then((x) => {
-      if (!x.ERROR) {
-        this.fileUploadProgress = 100;
-        this.handleFinishUpload();
-      } else {
-        this.handleError(); // Add logging later
-      }
-    });
-  }
-
-  public cleanData() {
-    this.file = undefined;
-    this.fileName = undefined;
-    this.fileSize = undefined;
-    this.fileSelect.value = '';
-    this.fileUploadProgress = 0;
-    this.currentState = UploadState.START;
-  }
-
-  private preventDefaults(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  private handleError() {
-    this.currentState = UploadState.ERROR;
-    setTimeout(() => {
-      this.currentState = UploadState.START;
-    }, this.errorViewTime);
-  }
-
-  private handleFinishUpload() {
-    this.currentState = UploadState.UPLOADING_UPLOADED;
-    setTimeout(() => {
-      if (this.currentState === UploadState.UPLOADING_UPLOADED) {
-        this.currentState = UploadState.UPLOADED;
-        setTimeout(() => {
-          this.cleanData();
-        }, this.uploadedViewTime);
-      }
-    }, this.uploadingUploadedViewTime);
-  }
-}

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

@@ -1,245 +0,0 @@
-import { ElementStyles, css } from '@microsoft/fast-element';
-
-export const DocumentManagerStyles: ElementStyles = css`
-  :host {
-    font-family: var(--body-font);
-  }
-
-  ::-webkit-scrollbar {
-    width: calc(var(--base-height-multiplier) * 1px);
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--neutral-layer-1);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--neutral-fill-rest);
-  }
-
-  .body {
-    display: flex;
-    height: inherit;
-  }
-
-  .container {
-    height: 100%;
-    width: 100%;
-    background: var(--neutral-layer-3);
-    position: relative;
-    border-radius: calc((var(--control-corner-radius) + 2) * 1px);
-    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.44);
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
-    display: flex;
-    flex-direction: column;
-  }
-
-  .close-btn {
-    min-width: calc((var(--base-height-multiplier) - 2 )* 3px);
-    display: flex;
-    width: calc((var(--base-height-multiplier) - 2 ) * 3px);
-    height: calc((var(--base-height-multiplier) - 2 ) * 3px);
-    border-radius: calc(var(--control-corner-radius) * 1px);
-    background-color: var(--neutral-layer-3);
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-  }
-
-  .close-btn:hover {
-    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);
-  }
-
-  .close-btn::part(control):focus-visible {
-    border-color: transparent;
-    box-shadow: none;
-  }
-
-  .directory-list {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .directory-btn,
-  .directory-btn-selected {
-    border-left: 3px solid transparent;
-    margin: 0;
-    border-radius: 0px;
-    height: calc((var(--base-height-multiplier) - 1) * 4px);
-    background-color: transparent;
-    box-sizing: border-box;
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-hint);
-    text-align: left;
-    line-height: var(--type-ramp-base-line-height);
-  }
-
-  .directory-btn-selected {
-    border-left: 3px solid;
-    color: var(--neutral-foreground-rest);
-    border-image-slice: 1;
-    border-image-source: linear-gradient(to bottom, #47bce0, #654df9);
-    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 96%);
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 4px);
-    font-size: var(--type-ramp-minus-2-font-size);
-    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
-  }
-
-  .header {
-    padding: calc(var(--design-unit) * 2px);
-    padding-left: calc(var(--design-unit) * 4px);
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
-  }
-
-  .title {
-    font-weight: 500;
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-rest);
-    text-align: left;
-    line-height: normal;
-  }
-
-  .pinned-left {
-    width: 163px;
-    padding: 0;
-    border-right: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
-    background-color: var(--neutral-layer-4);
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .pinned-left-header {
-    display: flex;
-    height: calc(var(--base-height-multiplier) * 4px);
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
-    font-weight: 500;
-    font-size: var(--type-ramp-minus-2-font-size);
-    color: var(--neutral-foreground-hint);
-    line-height: var(--type-ramp-base-line-height);
-    align-items: center;
-  }
-
-  .pinned-right {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    flex-direction: column;
-  }
-
-  .pinned-right-body {
-    height: 100%;
-    position: relative;
-  }
-
-  .pinned-right-header {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit) * 4px);
-    height: calc(var(--base-height-multiplier) * 4px);
-    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
-    justify-content: space-between;
-  }
-
-  .pinned-right-header-left-group {
-    flex: 1 1;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: calc(var(--design-unit) * 4px);
-  }
-
-  .pinned-right-header-left-group > zero-text-field {
-    max-width: 418px;
-    flex: 1 1;
-  }
-
-  .upload-btn {
-    color: var(--neutral-foreground-hint);
-    font-size: var(--type-ramp-minus-1-font-size);
-    background-color: var(--neutral-layer-3);
-    margin: 0;
-  }
-
-  .uploading {
-    color: var(--neutral-foreground-rest);
-    background-color: var(--neutral-layer-1);
-  }
-
-  .upload-btn:hover {
-    color: var(--neutral-foreground-rest);
-  }
-
-  .upload-btn > svg {
-    width: calc((var(--base-height-multiplier) - 2 )* 3px);
-  }
-
-  .upload-btn::part(start) {
-    margin-inline-end: calc(var(--design-unit) * 2px);
-  }
-
-  fast-dialog {
-    --dialog-height: 668px;
-    --dialog-width: 952px;
-  }
-
-  zero-segmented-control:first-child {
-    border-top-left-radius: calc(var(--control-corner-radius) * 1px);
-    border-bottom-left-radius: calc(var(--control-corner-radius) * 1px);
-  }
-
-  zero-segmented-control:last-child {
-    border-top-right-radius: calc(var(--control-corner-radius) * 1px);
-    border-bottom-right-radius: calc(var(--control-corner-radius) * 1px);
-  }
-
-  zero-segmented-item {
-    height: calc((var(--base-height-multiplier) - 1 ) * 4px);
-    padding: 0 calc(var(--design-unit) * 3px);
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-foreground-hint);
-    fill: var(--neutral-foreground-hint);
-  }
-
-  zero-segmented-item > svg:focus,
-  zero-segmented-item > svg > g:focus,
-  zero-segmented-item > svg > g > path:focus {
-    outline: none !important;
-  }
-
-  zero-segmented-item[aria-checked='true'] {
-    box-shadow: none;
-    fill: var(--neutral-foreground-rest);
-    background-image: linear-gradient(
-      -141.41742576267188deg,
-      rgba(71, 188, 224, 0.5) 0%,
-      rgba(101, 77, 249, 0.5) 100%
-    );
-    border-image-slice: 1;
-    border-image-source: linear-gradient(to bottom, #47bce0, #654df9);
-    border-width: calc(var(--stroke-width) * 1px);
-    border-style: solid;
-  }
-
-  zero-modal::part(dialog) {
-    padding: 0;
-    background: var(--neutral-layer-4);
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
-  }
-
-  zero-modal::part(top) {
-    padding: calc(var(--design-unit) * 4px);
-    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
-  }
-`;