@n1k1t/mock-server 0.1.61 → 0.1.62

package/src/gui/app/components/chart.component/index.ts

@@ -1,173 +0,0 @@
-import Chart from 'chart.js/auto';
-import _ from 'lodash';
-
-import { IPanelConfiguration, PanelComponent, TPanelSize } from '../panel.component';
-import { buildCounter, cast } from '../../../../utils';
-import { calculateColor } from '../../utils';
-import { Component } from '../../models';
-
-interface IPoint {
-  legend: string;
-  values: Record<string, number>;
-}
-
-const calculateLegendsLimit = (size: TPanelSize) => cast<Record<TPanelSize, number>>({
-  L: 20,
-  M: 10,
-  S: 7,
-  XS: 5,
-})[size];
-
-const calculatePointsLimit = (size: TPanelSize) => cast<Record<TPanelSize, number>>({
-  L: 200,
-  M: 100,
-  S: 60,
-  XS: 40,
-})[size];
-
-export class ChartComponent extends Component {
-  private counter = buildCounter();
-
-  private aliases: Record<string, number> = {};
-  private stack: number[] = [];
-
-  private points = new Map<number, IPoint>();
-  private labels = new Set<string>();
-
-  private limits = {
-    legend: calculateLegendsLimit(this.provided.width ?? 'L'),
-    point: this.provided.limit ?? calculatePointsLimit(this.provided.width ?? 'L'),
-  };
-
-  private source = new Chart(document.createElement('canvas'), {
-    type: 'line',
-    data: {
-      labels: cast<string[]>([]),
-      datasets: [],
-    },
-
-    options: {
-      scales: {
-        y: {
-          grid: {
-            color: 'rgba(255, 255, 255, 0.05)',
-          },
-
-          ticks: {
-            maxTicksLimit: this.limits.legend * 2,
-          },
-        },
-
-        x: {
-          grid: {
-            color: 'rgba(255, 255, 255, 0.05)',
-          },
-
-          ticks: {
-            maxTicksLimit: this.limits.legend,
-          },
-        },
-      },
-
-      plugins: {
-        legend: {
-          labels: {
-            usePointStyle: true,
-            pointStyle: 'circle',
-
-            boxHeight: 5,
-            boxWidth: 5,
-          },
-        },
-      },
-    },
-  });
-
-  private panel = PanelComponent.build({ ...this.provided, class: 'chart' }).replace(this.source.canvas);
-
-  constructor(private provided: IPanelConfiguration & {
-    mode?: 'aggregation';
-    limit?: number;
-  }) {
-    super();
-    this.replace(this.panel);
-  }
-
-  public provide(points: IPoint[]) {
-    points.forEach((point) => {
-      if (this.provided.mode === 'aggregation') {
-        const id = this.aliases[point.legend] ?? this.counter();
-        const target = this.points.get(id) ?? cast<IPoint>({ legend: point.legend, values: {} });
-
-        if (!this.aliases[point.legend]) {
-          this.aliases[point.legend] = id;
-
-          this.points.set(id, target);
-          this.stack.push(id);
-        }
-
-        return Object.entries(point.values).forEach(([label, value]) => {
-          target.values[label] = (target.values[label] ?? 0) + value;
-          this.labels.add(label);
-        });
-      }
-
-      const id = this.counter();
-
-      this.stack.push(id);
-      this.points.set(id, point);
-
-      Object.keys(point.values).forEach((label) => this.labels.add(label));
-    });
-
-    this.stack.slice(0, _.clamp(this.stack.length - this.limits.point, 0, Infinity)).forEach((id) => {
-      const point = this.points.get(id);
-      if (point) {
-        _.unset(this.aliases, point.legend);
-      }
-
-      this.points.delete(id);
-      this.stack.shift();
-    });
-
-    const iterated = [...this.points.values()];
-
-    this.source.data = {
-      labels: iterated.map((point) => point.legend),
-
-      datasets: [...this.labels.values()].map((label) => ({
-        label,
-        data: Array(iterated.length).fill(null).map((value, index) => iterated[index].values[label] ?? null),
-
-        tension: 0.3,
-        pointRadius: 2,
-
-        pointHitRadius: 20,
-        pointHoverRadius: 5,
-
-        borderWidth: 1,
-        borderColor: calculateColor(label),
-        backgroundColor: calculateColor(label),
-      })),
-    };
-
-    this.source.update('none');
-    return this;
-  }
-
-  public clear(): this {
-    this.source.reset();
-
-    this.points.clear();
-    this.labels.clear();
-
-    this.aliases = {};
-    this.stack = [];
-
-    return this;
-  }
-
-  static build(provided: ChartComponent['provided']) {
-    return new ChartComponent(provided);
-  }
-}

package/src/gui/app/components/chart.component/style.scss

@@ -1,4 +0,0 @@
-div.chart {
-  div.source { padding-top: 10px }
-  canvas { margin-bottom: 5px }
-}

package/src/gui/app/components/checkbox-area.component/index.ts

@@ -1,101 +0,0 @@
-import EventEmitter from 'events';
-import hbs from 'handlebars';
-
-import { IPanelConfiguration, PanelComponent } from '../panel.component';
-import { CheckboxAreaButtonComponent } from './item.component';
-import { TFunction } from '../../../../../types';
-import { Component } from '../../models';
-import { cast } from '../../../../utils';
-
-interface IEvents {
-  enable: [CheckboxAreaButtonComponent];
-  disable: [CheckboxAreaButtonComponent];
-}
-
-const template = hbs.compile(require('./template.hbs'));
-
-export class CheckboxAreaComponent extends Component {
-  public buttons = {
-    all: CheckboxAreaButtonComponent.build({ name: 'ALL', isEnabled: true }),
-    provided: cast<Record<string, CheckboxAreaButtonComponent>>({}),
-  };
-
-  private events = new EventEmitter();
-
-  private panel = new PanelComponent({ ...this.provided, class: 'checkbox-area' }).append(template(this.provided));
-  private area = new Component(this.panel.element.querySelector('div.buttons')).append(this.buttons.all);
-
-  constructor(private provided: IPanelConfiguration) {
-    super();
-    this.replace(this.panel);
-
-    this.buttons.all.on('enable', (button, trigger) =>
-      trigger === 'click' ? this.extract().forEach((button) => button.enable()) : null
-    );
-
-    this.buttons.all.on('disable', (button, trigger) =>
-      trigger === 'click' ? this.extract().forEach((button) => button.disable()) : null
-    );
-  }
-
-  public extract(): CheckboxAreaButtonComponent[] {
-    return Object.values(this.buttons.provided);
-  }
-
-  public provide(...provided: (CheckboxAreaButtonComponent | CheckboxAreaButtonComponent['configuration'])[]): this {
-    provided.forEach((predicate) => {
-      const button = predicate instanceof CheckboxAreaButtonComponent
-        ? predicate
-        : CheckboxAreaButtonComponent.build(predicate);
-
-      this.buttons.provided[button.name] = button;
-      this.area.append(button);
-
-      button.on('enable', (button, trigger) => {
-        if (this.extract().every((nested) => nested.isEnabled)) {
-          this.buttons.all.enable();
-        }
-        if (trigger !== 'silent') {
-          this.emit('enable', button);
-        }
-      });
-
-      button.on('disable', (button, trigger) => {
-        if (this.extract().some((nested) => !nested.isEnabled)) {
-          this.buttons.all.disable();
-        }
-        if (trigger !== 'silent') {
-          this.emit('disable', button);
-        }
-      });
-    });
-
-    return this;
-  }
-
-  public clear(): this {
-    this.extract().forEach((button) => button.delete());
-    this.buttons.provided = {};
-
-    return this;
-  }
-
-  public on<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
-    this.events.on(event, handler);
-    return this;
-  }
-
-  public once<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
-    this.events.once(event, handler);
-    return this;
-  }
-
-  private emit<K extends keyof IEvents>(event: K, ...args: IEvents[K]) {
-    this.events.emit(event, ...args);
-    return this;
-  }
-
-  static build(provided: CheckboxAreaComponent['provided']) {
-    return new CheckboxAreaComponent(provided);
-  }
-}

package/src/gui/app/components/checkbox-area.component/item.component.ts

@@ -1,72 +0,0 @@
-import EventEmitter from 'events';
-
-import { calculateColor } from '../../utils';
-import { Component } from '../../models';
-import { TFunction } from '../../../../../types';
-
-type TTrigger = 'click' | 'auto' | 'silent';
-
-interface IEvents {
-  enable: [CheckboxAreaButtonComponent, TTrigger];
-  disable: [CheckboxAreaButtonComponent, TTrigger];
-}
-
-export class CheckboxAreaButtonComponent extends Component {
-  private events = new EventEmitter();
-
-  constructor(public configuration: { name: string, isEnabled?: boolean, colorify?: boolean }) {
-    super(`
-      <button
-        style="${configuration?.colorify ? `color: ${calculateColor(configuration.name)}` : ''}"
-        class="${configuration.isEnabled ? 'checked' : ''}"
-      >${configuration.name}</button>
-    `);
-
-    this.element.addEventListener('click', () => this.isEnabled ? this.disable('click') : this.enable('click'));
-  }
-
-  public get name(): string {
-    return this.configuration.name;
-  }
-
-  public get isEnabled(): boolean {
-    return this.element.classList.contains('checked');
-  }
-
-  public enable(trigger: TTrigger = 'auto'): this {
-    if (this.isEnabled) {
-      return this;
-    }
-
-    this.element.classList.add('checked');
-    return this.emit('enable', this, trigger);
-  }
-
-  public disable(trigger: TTrigger = 'auto'): this {
-    if (!this.isEnabled) {
-      return this;
-    }
-
-    this.element.classList.remove('checked');
-    return this.emit('disable', this, trigger);
-  }
-
-  public on<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
-    this.events.on(event, handler);
-    return this;
-  }
-
-  public once<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
-    this.events.once(event, handler);
-    return this;
-  }
-
-  private emit<K extends keyof IEvents>(event: K, ...args: IEvents[K]) {
-    this.events.emit(event, ...args);
-    return this;
-  }
-
-  static build(configuration: CheckboxAreaButtonComponent['configuration']) {
-    return new CheckboxAreaButtonComponent(configuration);
-  }
-}

package/src/gui/app/components/checkbox-area.component/style.scss

@@ -1,19 +0,0 @@
-div.checkbox-area {
-  div.buttons {
-    width: 100%;
-  }
-
-  button {
-    background-color: rgba(#fff, .05);
-    font-weight: normal;
-  }
-
-  button:not(.checked) {
-    background-color: rgba(#fff, 0);
-    color: rgba(#fff, .4) !important;
-  }
-
-  button.checked {
-    pointer-events: all;
-  }
-}

package/src/gui/app/components/checkbox-area.component/template.hbs

@@ -1,3 +0,0 @@
-export default `
-  <div class="buttons"></div>
-`

package/src/gui/app/components/curtain.component/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '../../models';
-
-interface ICurtainComponentOptions {
-  isPreventedToManualClose?: boolean;
-}
-
-export class CurtainComponent extends Component {
-  constructor(public options: ICurtainComponentOptions = {}) {
-    super('<div class="curtain hidden"></div>');
-
-    if (!options.isPreventedToManualClose) {
-      this.element.addEventListener('click', (event) => event.target === this.element ? this.hide() : null);
-    }
-  }
-
-  static build(options: ICurtainComponentOptions) {
-    return new CurtainComponent(options);
-  }
-}

package/src/gui/app/components/curtain.component/style.scss

@@ -1,14 +0,0 @@
-div.curtain {
-  cursor: pointer;
-  position: fixed;
-  overflow-y: auto;
-  top: 0;
-  left: 0;
-  height: calc(100% - 50px);
-  width: 100%;
-  padding-top: 50px;
-  background-color: rgba($color-dark, .95);
-  z-index: +100;
-
-  & > * { cursor: auto }
-}

package/src/gui/app/components/empty.component/index.ts

@@ -1,10 +0,0 @@
-import hbs from 'handlebars';
-import { Component } from '../../models';
-
-const template = hbs.compile(require('./template.hbs'));
-
-export class EmptyComponent extends Component {
-  static build() {
-    return new EmptyComponent(template({}));
-  }
-}

package/src/gui/app/components/empty.component/style.scss

@@ -1,34 +0,0 @@
-@keyframes pending {
-  0% {
-    content: '\f251';
-  }
-  33% {
-    content: '\f252';
-  }
-  66% {
-    content: '\f253';
-  }
-}
-
-div.empty {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 50px;
-
-  i {
-    color: $color-main;
-    font-size: 50px;
-    margin-right: 30px;
-
-    &:before {
-      animation: pending 1s infinite;
-    }
-  }
-
-  p {
-    color: rgba(#fff, .3);
-    font-size: 25px;
-    font-weight: 300;
-  }
-}

package/src/gui/app/components/empty.component/template.hbs

@@ -1,6 +0,0 @@
-export default `
-  <div class="empty">
-    <i class="fas fa-hourglass-start"></i>
-    <p>There's still nothing...</p>
-  </div>
-`

package/src/gui/app/components/expectation.component/index.ts

@@ -1,60 +0,0 @@
-import hbs from 'handlebars';
-import _ from 'lodash';
-
-import type { Expectation } from '../../../../expectations';
-
-import { Button, Component } from '../../models';
-import { ViewerComponent } from '../viewer.component';
-
-import context from '../../context';
-
-const template = hbs.compile(require('./template.hbs'));
-
-export class ExpectationComponent extends Component {
-  public viewer = ViewerComponent.build({ depth: 3 }).hide();
-
-  constructor(public data: Expectation['TPlain']) {
-    super();
-    this.refresh();
-  }
-
-  public provide(data: Expectation['TPlain']) {
-    return Object.assign(this, { data });
-  }
-
-  public refresh(): this {
-    this.replace(template(this.data)).append(this.viewer);
-    this.viewer.provide(_.pick(this.data, ['id', 'type', 'transports', 'schema']));
-
-    Button
-      .build(this.element.querySelector('button.activity'))
-      .handle(() => context.services.io.exec('expectations:update', {
-        id: this.data.id,
-        set: { isEnabled: !this.data.isEnabled },
-      }));
-
-    this.element.querySelector('div.meta')!.addEventListener('click', (event) =>
-      event.composedPath().some((element) => (<Element>element)?.classList?.contains('meta'))
-        ? (<Element>event.target).nodeName !== 'BUTTON'
-          ? this.viewer.isHidden ? this.viewer.show() : this.viewer.hide()
-          : null
-        : null
-    );
-
-    return this;
-  }
-
-  public match(query: string): boolean {
-    return [
-      this.data.group,
-      this.data.name,
-      this.data.schema.forward?.baseUrl,
-      this.data.schema.forward?.url,
-      this.data.meta.tags.map(({ value }) => value).join(),
-    ].some((value) => value?.includes(query));
-  }
-
-  static build(expectation: Expectation['TPlain']) {
-    return new ExpectationComponent(expectation);
-  }
-}

package/src/gui/app/components/expectation.component/style.scss

@@ -1,5 +0,0 @@
-div.expectation {
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-top: 0;
-}

package/src/gui/app/components/expectation.component/template.hbs

@@ -1,5 +0,0 @@
-export default `
-  <div class="container expectation" id="{{id}}">
-    <div class="meta">{{> expectationMeta this}}</div>
-  </div>
-`

package/src/gui/app/components/header.component/index.ts

@@ -1,81 +0,0 @@
-import EventEmitter from 'events';
-import hbs from 'handlebars';
-import _ from 'lodash';
-
-import { Component, Section } from '../../models';
-import { TFunction } from '../../../../../types';
-
-import context from '../../context';
-
-const template = hbs.compile(require('./template.hbs'));
-
-type TTab = { type: 'section', entity: Section } | { type: 'separator' };
-
-interface IEvents {
-  select: [Section];
-}
-
-export class HeaderComponent extends Component {
-  public sections = this.tabs
-    .map((tab) => tab.type === 'section' ? tab.entity : null)
-    .filter(Boolean)
-    .reduce<Record<string, Section>>((acc, section) => _.set(acc, section!.id, section), {});
-
-  private events = new EventEmitter();
-
-  constructor(public tabs: TTab[]) {
-    super(
-      template({
-        tabs: tabs.map(
-          (tab) => tab.type === 'section'
-            ? Object.assign(tab, { id: tab.entity.id, isSelected: !tab.entity.isHidden })
-            : tab
-        ),
-      })
-    );
-
-    Object.values(this.sections).forEach((section) => section.on('select', () => {
-      const button = this.element.querySelector(`button#${section.id}`);
-
-      this.element.querySelectorAll('div#tabs button').forEach((element) => element.classList.remove('checked'));
-      button?.classList.add('checked');
-    }));
-
-    this.element.querySelector('div#tabs')!.addEventListener('click', (source) => {
-      const event = <Event & { target: Element }>source;
-
-      event.target?.nodeName !== 'BUTTON' || !this.sections[event.target.id]
-        ? null
-        : this.emit('select', this.sections[event.target.id]);
-    });
-
-    this.on('select', (section) => {
-      Object.values(this.sections).forEach((nested) => nested.hide());
-
-      context.switchStorage(section.storage);
-
-      !section.isInitialized
-        ? section.initialize().show().select()
-        : section.show().select();
-    })
-  }
-
-  public on<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
-    this.events.on(event, handler);
-    return this;
-  }
-
-  public once<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
-    this.events.once(event, handler);
-    return this;
-  }
-
-  private emit<K extends keyof IEvents>(event: K, ...args: IEvents[K]) {
-    this.events.emit(event, ...args);
-    return this;
-  }
-
-  static build(tabs: TTab[]) {
-    return new HeaderComponent(tabs);
-  }
-}

package/src/gui/app/components/header.component/style.scss

@@ -1,46 +0,0 @@
-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-
-  button {
-    text-decoration: none;
-    font-size: 14px;
-    color: rgba(#fff, .5);
-    vertical-align: top;
-
-    i { margin-right: 10px }
-
-    &.icon-only i {
-      font-size: 16px;
-    }
-
-    &.checked {
-      background-color: $color-main;
-      color: $color-dark;
-    }
-
-    &:not(.checked) {
-      color: rgba(#fff, .5);
-      background-color: rgba(#fff, .05);
-    }
-  }
-
-  hr {
-    position: relative;
-    width: 1px;
-    height: 25px;
-    border: none;
-    background-color: rgba(#fff, .1);
-    margin: 10px 10px;
-  }
-
-  div#tabs {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    button { padding: 10px 20px }
-  }
-}

package/src/gui/app/components/header.component/template.hbs

@@ -1,15 +0,0 @@
-export default `
-  <header>
-    <div id="tabs">
-      {{#each tabs}}
-        {{#compare type 'eq' 'separator'}}<hr>{{/compare}}
-
-        {{#compare type 'eq' 'section'}}
-          <button class="{{#unless entity.meta.name}}icon-only{{/unless}} {{#if isSelected}}checked{{/if}}" id="{{id}}">
-            <i class="{{entity.meta.icon}}"></i>{{entity.meta.name}}
-          </button>
-        {{/compare}}
-      {{/each}}
-    </div>
-  </header>
-`