@n1k1t/mock-server 0.1.61 → 0.1.62

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

@@ -1,86 +0,0 @@
-import hbs from 'handlebars';
-
-import type { History } from '../../../../server';
-
-import { ViewerComponent } from '../viewer.component';
-import { Component } from '../../models';
-
-const template = hbs.compile(require('./template.hbs'));
-
-export class HistoryComponent extends Component {
-  public viewer = ViewerComponent.build({ depth: 2 }).hide();
-
-  constructor(public data: History['TPlain']) {
-    super();
-    this.refresh();
-  }
-
-  public provide(data: History['TPlain']) {
-    return Object.assign(this, { data });
-  }
-
-  public refresh(): this {
-    this.replace(template(this.data)).append(this.viewer);
-
-    this.viewer.provide({
-      event: this.data.snapshot.event,
-      transport: this.data.snapshot.transport,
-
-      ...(Object.keys(this.data.snapshot.flags).length && { flags: this.data.snapshot.flags }),
-      ...(this.data.expectation && {
-        expectation: {
-          id: this.data.expectation.id,
-          group: this.data.expectation.group,
-
-          ...(this.data.expectation.schema.forward && { forward: this.data.expectation.schema.forward }),
-        },
-      }),
-
-      ...(this.data.snapshot.cache?.isEnabled && { cache: this.data.snapshot.cache }),
-      ...(this.data.snapshot.seed && { seed: this.data.snapshot.seed }),
-      ...(this.data.snapshot.container && { container: this.data.snapshot.container }),
-
-      incoming: this.data.snapshot.incoming,
-
-      ...(this.data.snapshot.error && { error: this.data.snapshot.error }),
-      ...(this.data.status === 'completed' && { outgoing: this.data.snapshot.outgoing }),
-      ...(this.data.snapshot.forwarded && { forwarded: this.data.snapshot.forwarded }),
-      ...(this.data.snapshot.messages?.length && { messages: this.data.snapshot.messages }),
-    });
-
-    this.element.querySelector('div.meta')!.addEventListener('click', (event) =>
-      event.composedPath().some((element) => (<Element>element)?.classList?.contains('meta'))
-        ? this.viewer.isHidden ? this.viewer.show() : this.viewer.hide()
-        : null
-    );
-
-    return this;
-  }
-
-  public match(query: string): boolean {
-    const light = [
-      this.data.group,
-      this.data.expectation?.name,
-      this.data.snapshot.incoming.path,
-      this.data.snapshot.incoming.method,
-      this.data.snapshot.incoming.dataRaw,
-      this.data.snapshot.incoming.error,
-      String(this.data.snapshot.outgoing.status),
-      String(this.data.snapshot.seed ?? ''),
-      this.data.snapshot.outgoing.dataRaw,
-    ].some((value) => value?.includes(query));
-
-    return light || [
-      this.data.snapshot.incoming.query,
-      this.data.snapshot.incoming.headers,
-      this.data.snapshot.outgoing.headers,
-      this.data.snapshot.container,
-      this.data.snapshot.state,
-      this.data.snapshot.cache,
-    ].some((value) => JSON.stringify(value)?.includes(query))
-  }
-
-  static build(history: History['TPlain']) {
-    return new HistoryComponent(history);
-  }
-}

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

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

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

@@ -1,62 +0,0 @@
-export default `
-  <div class="container history" id="{{id}}">
-    <div class="meta">
-      <div class="segment">
-        <span class="time">{{#toLocaleTime timestamp}}{{/toLocaleTime}}</span>
-
-        {{#if snapshot.error}}
-          <span class="error">
-            {{#compare snapshot.error.code.length 'lte' 24}}{{snapshot.error.code}}{{/compare}}
-            {{#compare snapshot.error.code.length 'gt' 24}}Error{{/compare}}
-          </span>
-        {{/if}}
-
-        {{#compare status 'eq' 'pending'}}
-          <span class="pending"><i class="fas fa-hourglass-start"></i></span>
-        {{/compare}}
-
-        {{#compare status 'eq' 'completed'}}
-          <span class="status
-            {{#compare snapshot.transport 'eq' 'http'}}
-              {{#compare snapshot.outgoing.status 'lt' 400}}green{{/compare}}
-              {{#compare snapshot.outgoing.status 'gte' 400}}red{{/compare}}
-            {{/compare}}
-          "><b>{{snapshot.outgoing.status}}</b> {{toSeconds duration}}s</span>
-        {{/compare}}
-
-        <span class="method" style="color: {{toColor snapshot.incoming.method}};">{{snapshot.incoming.method}}</span>
-        <span class="path">{{> truncated value=snapshot.incoming.path length=45}}</span>
-
-        {{#if snapshot.seed}}<span class="seed">{{snapshot.seed}}</span>{{/if}}
-      </div>
-
-      <span class="arrow"><i class="fas fa-chevron-right"></i></span>
-
-      {{#if expectation}}
-        {{>expectationMeta expectation format='short' isCached=snapshot.forwarded.isCached}}
-      {{else}}
-        <div class="segment"><span class="handled-with red">Nowhere</span></div>
-      {{/if}}
-    </div>
-
-    {{!-- {{#if snapshot.messages}}
-      <p class="messages-title">
-        <span class="count">Total messages <b>{{snapshot.messages.length}}</b></span>
-      </p>
-
-      <div class="messages">
-        {{#each snapshot.messages}}
-          <div id="{{id}}" class="message {{location}}">
-            <p class="header">
-              {{#compare location 'eq' 'incoming'}}<i class="fas fa-angle-right"></i>{{/compare}}
-              {{#compare location 'eq' 'outgoing'}}<i class="fas fa-angle-left"></i>{{/compare}}
-              <span class="time">{{#toLocaleTime timestamp}}{{/toLocaleTime}}</span>
-            </p>
-
-            <pre class="panel hidden"></pre>
-          </div>
-        {{/each}}
-      </div>
-    {{/if}} --}}
-  </div>
-`

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

@@ -1,11 +0,0 @@
-export * from './checkbox-area.component';
-export * from './expectation.component';
-export * from './history.component';
-export * from './curtain.component';
-export * from './loader.component';
-export * from './popups.component';
-export * from './search.component';
-export * from './header.component';
-export * from './empty.component';
-export * from './chart.component';
-export * from './panel.component';

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

@@ -1,12 +0,0 @@
-import { CurtainComponent } from '../curtain.component';
-
-export class LoaderComponent extends CurtainComponent {
-  constructor() {
-    super({ isPreventedToManualClose: true });
-    this.append('<div><p>Ping pong</p><div class="loader"></div></div>').assignId('loader');
-  }
-
-  static build() {
-    return new LoaderComponent();
-  }
-}

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

@@ -1,39 +0,0 @@
-@keyframes l43 {
-  0% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50% }
-  16.67% { background-position: calc(0*100%/3) 0, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50% }
-  33.33% { background-position: calc(0*100%/3) 100%, calc(1*100%/3) 0, calc(2*100%/3) 50%, calc(3*100%/3) 50% }
-  50% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 100%, calc(2*100%/3) 0, calc(3*100%/3) 50% }
-  66.67% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 100%, calc(3*100%/3) 0 }
-  83.33% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 100% }
-  100% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50% }
-}
-
-.loader {
-  height: 20px;
-  aspect-ratio: 2.5;
-  --_g: no-repeat radial-gradient(farthest-side, #fff 90%, #0000);
-  background: var(--_g), var(--_g), var(--_g), var(--_g);
-  background-size: 20% 50%;
-  animation: l43 1s infinite linear;
-}
-
-div.curtain#loader {
-  cursor: default;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 0;
-  height: 100%;
-
-  p {
-    color: #fff;
-    font-weight: 100;
-    font-size: 25px;
-  }
-
-  & > div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-}

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

@@ -1,52 +0,0 @@
-import hbs from 'handlebars';
-import { Component, TElementPredicate } from '../../models';
-
-export type TPanelSize = 'XS' | 'S' | 'M' | 'L';
-
-export interface IPanelConfiguration {
-  title?: {
-    text: string;
-
-    description?: string;
-    icon?: string;
-  };
-
-  height?: TPanelSize;
-  width?: TPanelSize;
-
-  class?: string;
-}
-
-const template = hbs.compile(require('./template.hbs'));
-
-export class PanelComponent extends Component {
-  private content = new Component(this.element.querySelector('div.content'));
-
-  constructor(provided: IPanelConfiguration = {}) {
-    super(template(provided));
-  }
-
-  public clear(): this {
-    this.content.clear();
-    return this;
-  }
-
-  public append(predicate: TElementPredicate): this {
-    this.content.append(predicate);
-    return this;
-  }
-
-  public prepend(predicate: TElementPredicate): this {
-    this.content.prepend(predicate);
-    return this;
-  }
-
-  public replace(predicate: TElementPredicate): this {
-    this.content.replace(predicate);
-    return this;
-  }
-
-  static build(configuration?: IPanelConfiguration) {
-    return new PanelComponent(configuration);
-  }
-}

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

@@ -1,60 +0,0 @@
-div.panel {
-  display: inline-block;
-  border-radius: 5px;
-  margin: 0 5px 5px 0;
-  padding: 5px 10px;
-  background-color: lighten($color-dark, 3);
-
-  button { flex-shrink: 0 }
-
-  & > p {
-    margin-top: 5px;
-    margin-left: 5px;
-    margin-bottom: 10px;
-    color: rgba(#fff, .2);
-    font-size: 14px;
-
-    i { margin-right: 10px }
-    i, span.title { color: rgba(#fff, .5) }
-    span.description { margin-left: 10px }
-
-    span.description:before {
-      content: '—';
-      margin-right: 10px;
-    }
-  }
-
-  & > div.content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &.width-L {
-    max-width: 1300px;
-    width: 100%;
-  }
-
-  &.width-M {
-    max-width: 630px;
-    width: calc(50% - 25px);
-  }
-
-  &.width-S {
-    max-width: 410px;
-    width: calc(33.33% - 25px);
-  }
-
-  &.width-XS {
-    max-width: 305px;
-    width: calc(25% - 25px);
-  }
-
-  &.height-S > div.content {
-    min-height: 100px;
-  }
-
-  &.height-XS > div.content {
-    min-height: 60px;
-  }
-}

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

@@ -1,13 +0,0 @@
-export default `
-  <div class="panel {{class}} {{#if width}}width-{{width}}{{/if}} {{#if height}}height-{{height}}{{/if}}">
-    {{#if title}}
-      <p class="title">
-        {{#if title.icon}}<i class="{{title.icon}}"></i>{{/if}}
-        <span class="title">{{{title.text}}}</span>
-        {{#if title.description}}<span class="description">{{{title.description}}}</span>{{/if}}
-      </p>
-    {{/if}}
-
-    <div class="content"></div>
-  </div>
-`

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

@@ -1,26 +0,0 @@
-import hbs from 'handlebars';
-import { Component } from '../../models';
-
-export interface IPopupPushOptions {
-  level?: 'info' | 'warning' | 'error';
-}
-
-const template = hbs.compile(require('./template.hbs'));
-
-export class PopupsComponent extends Component {
-  constructor() {
-    super();
-    this.element.classList.add('popups');
-  }
-
-  public push(message: string, options: IPopupPushOptions = {}) {
-    const popup = this.compileHtmlStringToElement(template({ message, level: options.level ?? 'info' }));
-
-    this.element.prepend(popup);
-    setTimeout(() => popup.remove(), 3000);
-  }
-
-  static build() {
-    return new PopupsComponent();
-  }
-}

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

@@ -1,51 +0,0 @@
-@keyframes popup {
-  0% {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  5% {
-    opacity: 1;
-    transform: none;
-  }
-  95% {
-    opacity: 1;
-    transform: none;
-  }
-  100% {
-    transform: translateY(-10px);
-    opacity: 0;
-  }
-}
-
-div.popups {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: +101;
-
-  div.popup-message {
-    display: flex;
-    background-color: lighten($color-dark, 80);
-    color: $color-dark;
-    padding: 10px 15px;
-    width: 240px;
-    border-radius: 10px;
-    font-size: 14px;
-    text-align: center;
-    align-items: center;
-    margin-top: 5px;
-    box-shadow: 0 5px 10px 10px rgba(#000, .1);
-    animation: popup 3s ease-in-out forwards;
-
-    &.error { background-color: $color-red }
-    &.warning { background-color: $color-main }
-
-    span { flex-basis: 90%; }
-
-    i {
-      font-size: 25px;
-      margin-right: 10px;
-      margin-left: 5px;
-    }
-  }
-}

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

@@ -1,9 +0,0 @@
-export default `
-  <div class="popup-message {{level}}">
-    {{#compare level 'eq' 'info'}}<i class="fas fa-check"></i>{{/compare}}
-    {{#compare level 'eq' 'warning'}}<i class="fas fa-exclamation-triangle"></i>{{/compare}}
-    {{#compare level 'eq' 'error'}}<i class="fas fa-times"></i>{{/compare}}
-
-    <span>{{{message}}}</span>
-  </div>
-`

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

@@ -1,67 +0,0 @@
-import hbs from 'handlebars';
-import _ from 'lodash';
-
-import { EventEmitter } from 'events';
-
-import { Component } from '../../models';
-import { TFunction } from '../../../../../types';
-
-interface IEvents {
-  input: [string];
-  clear: [];
-}
-
-const template = hbs.compile(require('./template.hbs'));
-
-export class SearchComponent extends Component {
-  private events = new EventEmitter();
-
-  private input = this.element.querySelector('input')!;
-  private button = this.element.querySelector('button')!;
-
-  constructor(public options?: { title?: string }) {
-    super(template({ title: options?.title ?? 'Type something' }));
-
-    this.button.classList.add('hidden');
-    this.button.addEventListener('click', () => this.clear());
-
-    this.on('input', () => {
-      this.button.classList.remove('hidden');
-      this.element.classList.add('filled');
-    });
-
-    this.on('clear', () => {
-      this.button.classList.add('hidden');
-      this.element.classList.remove('filled');
-    });
-
-    this.input.addEventListener('keydown', _.debounce(
-      () => this.input.value ? this.emit('input', this.input.value) : this.clear(),
-      350
-    ));
-  }
-
-  public clear(): this {
-    this.input.value = '';
-    return this.emit('clear');
-  }
-
-  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(options?: SearchComponent['options']) {
-    return new SearchComponent(options);
-  }
-}

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

@@ -1,43 +0,0 @@
-div.search {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  border-radius: 10px;
-  width: 410px;
-  padding: 2px 10px;
-  margin: auto;
-  margin-bottom: 50px;
-  background-color: rgba(#fff, .05);
-  opacity: .4;
-  transition-duration: .1s;
-
-  & > i {
-    width: 20px;
-    margin: 0 15px;
-  }
-
-  &:hover, &.filled {
-    opacity: 1;
-  }
-
-  button {
-    display: inline-block !important;
-    background-color: transparent;
-    font-size: 20px;
-    padding: 10px 15px;
-    margin: 0;
-    color: rgba(#fff, .2);
-
-    i { margin: 0 }
-    &:hover { color: #fff }
-  }
-
-  div.input {
-    background-color: transparent;
-    width: 380px;
-
-    &:before {
-      text-align: center;
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-export default `
-  <div class="search">
-    <i class="fas fa-search"></i>
-    <div class="input" title="{{title}}"><input data-key="search" type="text"></div>
-    <button><i class="far fa-times-circle"></i></button>
-  </div>
-`

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

@@ -1,28 +0,0 @@
-import JsonFormatter from '../../../../../../../packages/json-formatter';
-import hbs from 'handlebars';
-
-import { Component } from '../../models';
-import context from '../../context';
-
-const template = hbs.compile(require('./template.hbs'));
-
-export class ViewerComponent extends Component {
-  public instance = new JsonFormatter({}, this.options?.depth ?? 3, {
-    theme: 'custom',
-    afterCopyHandler: () => context.shared.popups.push('Copied!'),
-  });
-
-  constructor(public options?: { depth?: number }) {
-    super(template({}));
-    this.provide({});
-  }
-
-  public provide(payload: object | null): this {
-    this.instance.json = payload;
-    return this.clear().append(this.instance.render());
-  }
-
-  static build(options?: ViewerComponent['options']) {
-    return new ViewerComponent(options);
-  }
-}

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

@@ -1,38 +0,0 @@
-@import '../../../../../../../packages/json-formatter/src/theme';
-
-div.viewer {
-  background-color: lighten($color-dark, 3);
-  margin-bottom: 20px;
-  margin-top: 0;
-  padding: 10px;
-  overflow: hidden;
-
-  &.hidden {
-    display: none;
-  }
-  &:not(:last-child) {
-    margin-bottom: 20px;
-  }
-
-  .json-formatter-custom.json-formatter-row {
-    @include jsonFormatterTheme(
-      $font-family: $font-family,
-      $default-color: rgba(#fff, .2),
-      $string-color: white,
-      $number-color: adjust-hue($color-main, 80),
-      $boolean-color: adjust-hue($color-main, 320),
-      $null-color: #EEC97D,
-      $undefined-color: rgb(239, 143, 190),
-      $rotate-time: 100ms,
-      $toggler-opacity: .2,
-      $toggler-color: #fff,
-      $bracket-color: rgba(#fff, .2),
-      $key-color: adjust-hue($color-main, 180),
-      $url-color: #027BFF
-    );
-
-    .json-formatter-string {
-      max-height: 60px;
-    }
-  }
-}

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

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