@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

package/src/old/config/configure.ts

@@ -1,66 +0,0 @@
-import { DI, GenesisElement, Registration } from '@genesislcap/web-core';
-import { ReportingConfig, defaultReportingConfig } from './config';
-
-/**
- * configure.
- *
- * @remarks
- * Configure the reporting micro frontend for host app integration.
- * 
- * @example Providing template options to align to your host application.
- * ```ts
-
- * const { configure } = await import('@genesislcap/pbc-reporting-ui/config');
- *  return configure({
- *    name: 'rapid-document-manager',
- *    templateOptions: {
- *     icon: 'rapid-icon',
- *     button: 'rapid-button',
- *     grid: 'rapid-grid-pro',
- *   },
- *   designSystemPrefix: 'rapid',
- *  });
- * },
- * ```
- *
- * This is just an example, as there is a `RapidReporting` which you can import and use.
- *
- * @param config - A partial ReportingConfig.
- * @public
- */
-export async function configure(config: Partial<ReportingConfig>) {
-  /**
-   * Merge the configs
-   */
-  const value: ReportingConfig = {
-    ...defaultReportingConfig,
-    ...config,
-  };
-  if (config.templateOptions) {
-    value.templateOptions = {
-      ...defaultReportingConfig.templateOptions,
-      designSystemProvider: 'template', // < we can assume by calling configure they will provide the design system.
-      ...config.templateOptions,
-    };
-  }
-  /**
-   * Register a new ReportingConfig
-   */
-  DI.getOrCreateDOMContainer().register(
-    Registration.instance<ReportingConfig>(ReportingConfig, value),
-  );
-  /**
-   * Lazily reference and define the micro frontend element post config setting.
-   */
-  const { LegacyReporting, MainStyles, MainTemplate } = await import('../main');
-  const { Reporting } = LegacyReporting;
-  const { name, attributes, shadowOptions, elementOptions } = value;
-  return GenesisElement.define(Reporting, {
-    name,
-    template: MainTemplate,
-    styles: MainStyles,
-    attributes,
-    shadowOptions,
-    elementOptions,
-  });
-}

package/src/old/config/index.ts

@@ -1,2 +0,0 @@
-export * from './config';
-export * from './configure';

package/src/old/config/templates.ts

@@ -1,59 +0,0 @@
-import { TemplateElementDependency } from '@genesislcap/foundation-ui';
-import { SyntheticViewTemplate } from '@genesislcap/web-core';
-
-/**
- * TemplateComponents.
- * @public
- */
-export type TemplateComponents = {
-  icon: TemplateElementDependency;
-  button: TemplateElementDependency;
-  card: TemplateElementDependency;
-  tabs: TemplateElementDependency;
-  tab: TemplateElementDependency;
-  tabPanel: TemplateElementDependency;
-  textField: TemplateElementDependency;
-  textArea: TemplateElementDependency;
-  radioGroup: TemplateElementDependency;
-  radio: TemplateElementDependency;
-  toast: TemplateElementDependency;
-  designSystemProvider: TemplateElementDependency;
-  grid: TemplateElementDependency;
-  checkbox: TemplateElementDependency;
-};
-
-/**
- * TemplateOptions.
- * @public
- */
-export type TemplateOptions = Partial<TemplateComponents> & {
-  /**
-   * @remarks
-   * Just for reference that template options may be more than tags.
-   * @internal
-   */
-  somePartial?: string | SyntheticViewTemplate;
-};
-
-/**
- * defaultTemplateOptions.
- * @remarks
- * The default template options this MF has been created with.
- * @public
- */
-export const defaultTemplateOptions: TemplateOptions = {
-  icon: 'rapid-icon',
-  button: 'rapid-button',
-  card: 'rapid-card',
-  tabs: 'rapid-tabs',
-  tab: 'rapid-tab',
-  tabPanel: 'rapid-tab-panel',
-  textField: 'rapid-text-field',
-  textArea: 'rapid-text-area',
-  radioGroup: 'rapid-radio-group',
-  radio: 'rapid-radio',
-  toast: 'rapid-toast',
-  designSystemProvider: 'rapid-design-system-provider',
-  grid: 'rapid-grid-pro',
-  checkbox: 'rapid-checkbox',
-};

package/src/old/constants/grid-config.ts

@@ -1,19 +0,0 @@
-// TODO: styling shoould be applied with classes
-export const defaultRowConfig = {
-  rowHeight: 52,
-  rowStyle: {
-    backgroundColor: 'var(--neutral-layer-3)',
-    border: 'none',
-    borderRadius: '6px',
-    maxHeight: '42px',
-  },
-  suppressRowClickSelection: true,
-};
-
-// TODO: styling shoould be applied with classes
-export const defaultCellConfig = {
-  cellStyle: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-};

package/src/old/layouts/default.ts

@@ -1,30 +0,0 @@
-import { css, GenesisElementLayout, html } from '@genesislcap/web-core';
-
-export const defaultLayout = new GenesisElementLayout(
-  html`
-    <div class="container">
-      <div class="content">
-        <slot></slot>
-      </div>
-    </div>
-  `,
-  css`
-    :host {
-    }
-
-    .container {
-      width: 100%;
-      height: 100%;
-      display: block;
-      position: relative;
-    }
-
-    .content {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-  `,
-);

package/src/old/layouts/index.ts

@@ -1,2 +0,0 @@
-export * from './default';
-export * from './two-pane-horizontal';

package/src/old/layouts/two-pane-horizontal.ts

@@ -1,81 +0,0 @@
-import { attr, css, customElement, GenesisElement, html, when } from '@genesislcap/web-core';
-import { iconTag } from '../tags';
-
-/* oxlint-disable typescript/no-duplicate-enum-values -- layout CSS tokens: equal and rightMain both use hyphen */
-enum Divider {
-  equal = 'hyphen',
-  leftMain = '',
-  rightMain = 'hyphen',
-}
-/* oxlint-enable typescript/no-duplicate-enum-values */
-
-const name = 'layout-two-pane-horizontal';
-
-const styles = css`
-  .container {
-    align-items: stretch;
-    column-gap: 4rem;
-    display: grid;
-    height: 100%;
-  }
-
-  .container.equal {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .container.left-main {
-    grid-template-columns: 3fr 1fr;
-  }
-
-  .container.right-main {
-    grid-template-columns: 1fr 3fr;
-  }
-
-  .left {
-    position: relative;
-  }
-
-  .left .divider {
-    display: flex;
-    font-size: 3.2rem;
-    justify-content: center;
-    position: absolute;
-    right: -4rem;
-    top: 50%;
-    width: 4rem;
-    color: var(--neutral-foreground-hint);
-  }
-`;
-
-const template = html`
-  <div class="container ${(x) => x.splitRatio}" part="split-container">
-    <section class="left" part="left-section">
-      <slot name="left-section"></slot>
-
-      ${when(
-        (x) => !x.hideDivider,
-        html`
-          <div class="divider" part="divider">
-            <slot name="divider">
-              <${iconTag} name="chevron-right"></${iconTag}>
-            </slot>
-          </div>
-        `,
-      )}
-    </section>
-
-    <section class="right" part="right-section">
-      <slot name="right-section"></slot>
-    </section>
-  </div>
-`;
-
-@customElement({
-  name,
-  styles,
-  template,
-})
-export class LayoutTwoPaneHorizontal extends GenesisElement {
-  @attr({ mode: 'boolean' }) hideDivider: boolean = false;
-  @attr splitRatio: string = 'equal';
-}

package/src/old/main/index.ts

@@ -1,3 +0,0 @@
-export * from './main.template';
-export * from './main';
-export * from './main.styles';

package/src/old/main/main.styles.ts

@@ -1,69 +0,0 @@
-import { css } from '@genesislcap/web-core';
-import { helperStyles } from '../styles';
-import { designSystemProviderTag, tabPanelTag } from '../tags';
-
-export const MainStyles = css`
-  ${helperStyles}
-  :host {
-    display: block;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-  }
-
-  ${designSystemProviderTag} {
-    height: 100%;
-  }
-
-  .container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-  }
-
-  .notification-container {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    z-index: 10;
-    right: calc(var(--design-unit) * 10px);
-    bottom: calc(var(--design-unit) * 10px);
-    color: var(--neutral-foreground-rest);
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: calc(var(--design-unit) * 4px) 0;
-  }
-
-  .title {
-    font-size: var(--type-ramp-plus-4-font-size);
-    font-weight: 700;
-  }
-
-  .tabs {
-    width: 100%;
-    height: 100%;
-    background-color: var(--neutral-layer-4);
-  }
-
-  ::part(tablist),
-  .tabs .tablist {
-    height: 37;
-  }
-
-  ${tabPanelTag} {
-    background-color: var(--neutral-layer-4);
-    height: calc(100% - 110px);
-    padding: 0 calc(var(--design-unit) * 4px);
-  }
-
-  .controls {
-    align-items: center;
-    display: flex;
-    gap: calc(var(--design-unit) * 2px);
-  }
-`;

package/src/old/main/main.template.ts

@@ -1,127 +0,0 @@
-import { avoidTreeShaking } from '@genesislcap/foundation-utils';
-import { html, repeat, ref, when, ViewTemplate } from '@genesislcap/web-core';
-import { CreateEdit } from '../components/create-edit';
-import { List } from '../components/list';
-import { Preview } from '../components/preview';
-import { SelectFields } from '../components/select-fields';
-import { SelectFilters } from '../components/select-filters';
-import { Wizard } from '../components/wizard';
-import { LayoutTwoPaneHorizontal } from '../layouts';
-import { buttonTag, tabPanelTag, tabTag, tabsTag, toastTag } from '../tags';
-import type { LegacyReporting } from './main';
-
-avoidTreeShaking(
-  List,
-  Preview,
-  SelectFields,
-  SelectFilters,
-  Wizard,
-  CreateEdit,
-  LayoutTwoPaneHorizontal,
-);
-
-const notificationToast: ViewTemplate<LegacyReporting.Reporting> = html`
-  <div class="notification-container" data-test-id="notification-container">
-    ${repeat(
-      (x) => x.notifications,
-      html`
-        <${toastTag}
-          notify=${(notification) => notification.type}
-          auto-close=${(notification) => notification.autoClose}
-          data-test-id="toast"
-        >
-          <div slot="top" data-test-id="toast-title">${(notification) => notification.title}</div>
-          <p slot="content" data-test-id="toast-message">
-            ${(notification) => notification.message}
-          </p>
-        </${toastTag}>
-      `,
-    )}
-  </div>
-`;
-
-const header: ViewTemplate<LegacyReporting.Reporting> = html`
-  <div class="header" data-test-id="header">
-    <h1 id="title" class="title" data-test-id="report-title">All Reports</h1>
-    <div class="controls" data-test-id="controls">
-      <${buttonTag}
-        appearance="neutral-grey"
-        class="button"
-        ?disabled=${(x) => !x.selectedRows.length}
-        @click=${(x) => x.reportsGrid.batchDelete()}
-        data-test-id="delete-reports-button"
-      >
-        Delete Reports
-      </${buttonTag}>
-
-      <${buttonTag}
-        appearance="${(x) => x.config.buttonAppearance}"
-        class="button"
-        @click=${(x) => x.create()}
-        data-test-id="add-report-button"
-      >
-        Add new report
-      </${buttonTag}>
-    </div>
-  </div>
-`;
-
-export const MainTemplate = html<LegacyReporting.Reporting>`
-  ${when((x) => x.notifications.length, notificationToast)}
-  ${when(
-    (x) => x.ready,
-    html<LegacyReporting.Reporting>`
-    <div class="container" data-test-id="reporting-home">
-      <${tabsTag} ${ref('tabs')} class="tabs" data-test-id="tabs" @change=${(x, c) => x.handleTabsChange(c.event as CustomEvent)}>
-        <span part="start" class="start" slot="start" data-test-id="reporting-tab">Reporting</span>
-        <${tabTag} id="list-reports" slot="tab" data-test-id="list-reports-tab">
-          All Reports
-        </${tabTag}>
-        <${tabTag} id="${(x) => x.createEditTabId}" slot="tab" data-test-id="create-edit-report-tab" action="create">
-          Create Report
-        </${tabTag}>
-        ${when(
-          (x) => Object.keys(x.activeReport).length > 0,
-          html`
-            <${tabTag} id="run-report" slot="tab" data-test-id="run-report-tab">Run Report</${tabTag}>
-          `,
-        )}
-
-        <${tabPanelTag} slot="tabpanel" class="tab-panel" data-test-id="list-reports-panel">
-          ${header}
-          <reporting-list
-            ${ref('reportsGrid')}
-            @rowSelectionEvent=${(x, c) => x.handleRowSelectionEvent(c.event as CustomEvent)}
-            @runReport=${(x, c) => x.handleRunReportEvent(c.event as CustomEvent)}
-            @editReport=${(x, c) => x.handleEditReportEvent(c.event as CustomEvent)}
-            data-test-id="report-list"
-          >
-          </reporting-list>
-        </${tabPanelTag}>
-
-        <${tabPanelTag} slot="tabpanel" class="tab-panel" data-test-id="create-edit-report-panel">
-          <reporting-create-edit
-            :report=${(x) => x.activeReport}
-            :setPageTab=${(x) => x.setPageTab}
-            :datasourceSettings=${(x) => x.datasourceSettings}
-            data-test-id="create-edit-report-component"
-          />
-        </${tabPanelTag}>
-        ${when(
-          (x) => Object.keys(x.activeReport).length > 0,
-          html`
-            <${tabPanelTag} slot="tabpanel" class="tab-panel" data-test-id="report-preview-panel">
-              <reporting-preview
-                :report=${(x) => x.activeReport}
-                :datasourceSettings=${(x) => x.datasourceSettings}
-                data-test-id="report-preview-component"
-              />
-            </${tabPanelTag}>
-          `,
-        )}
-      </${tabsTag}>
-
-  </div>
-`,
-  )}
-`;

package/src/old/main/main.test.ts

@@ -1,7 +0,0 @@
-import { assert, test } from '@genesislcap/foundation-testing';
-
-test('baseline', () => {
-  assert.is(true, true, 'Something is very wrong!');
-});
-
-test.run();