@testgorilla/tgo-coding-test 0.0.1

package/src/lib/services/test-cases.service.spec.ts

@@ -0,0 +1,53 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TestCasesService } from './test-cases.service';
+
+describe('TestCasesService', () => {
+  let service: TestCasesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TestCasesService);
+  });
+
+  describe('when setActiveTestCase is called', () => {
+    it('should emit index to activeTestCaseIndex$', done => {
+      service.setActiveTestCase(3);
+
+      service.activeTestCaseIndex$.subscribe(index => {
+        expect(index).toBe(3);
+        done();
+      });
+    });
+  });
+
+  describe('when createTestCaseLocalId is called', () => {
+    it('should increment lastTestCaseLocalId by 1 and return it', () => {
+      service.createTestCaseLocalId();
+      const result = service.createTestCaseLocalId();
+
+      expect(result).toBe(2);
+    });
+  });
+
+  describe('when resetLastTestCaseLocalId is called', () => {
+    it('should reset lastTestCaseLocalId to 0', () => {
+      service.createTestCaseLocalId();
+      service.createTestCaseLocalId();
+      service.createTestCaseLocalId();
+
+      service.resetLastTestCaseLocalId();
+
+      expect(service.createTestCaseLocalId()).toBe(1);
+    });
+  });
+
+  describe('when updateTestCaseLocalId is called', () => {
+    it('should update lastTestCaseLocalId to passed value', () => {
+      const localId = 3;
+      service.updateTestCaseLocalId(localId);
+
+      expect(service.createTestCaseLocalId()).toBe(localId + 1);
+    });
+  });
+});

package/src/lib/services/test-cases.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TestCasesService {
+  private lastTestCaseLocalId = 0;
+
+  private activeTestCaseIndexSubj$ = new BehaviorSubject<number | null>(0);
+  activeTestCaseIndex$ = this.activeTestCaseIndexSubj$.asObservable();
+
+  setActiveTestCase(index: number | null): void {
+    this.activeTestCaseIndexSubj$.next(index);
+  }
+
+  createTestCaseLocalId(): number {
+    this.lastTestCaseLocalId += 1;
+    return this.lastTestCaseLocalId;
+  }
+
+  updateTestCaseLocalId(value: number): void {
+    this.lastTestCaseLocalId = value;
+  }
+
+  resetLastTestCaseLocalId(): void {
+    this.lastTestCaseLocalId = 0;
+  }
+}

package/src/lib/services/theme.service.spec.ts

@@ -0,0 +1,76 @@
+import { ThemeService } from './theme.service';
+import { LibCodingTestService } from './lib-coding-test.service';
+import { Themes } from '../models/theme';
+import { BehaviorSubject } from 'rxjs';
+import { TestBed } from '@angular/core/testing';
+
+describe('ThemeService', () => {
+  let service: ThemeService;
+  let libCodingTestServiceMock: Partial<LibCodingTestService>;
+  let themeSubject: BehaviorSubject<Themes>;
+
+  beforeEach(() => {
+    themeSubject = new BehaviorSubject<Themes>(Themes.Default);
+    libCodingTestServiceMock = {
+      themeChanged$: themeSubject.asObservable(),
+    };
+    TestBed.configureTestingModule({
+      providers: [ThemeService, { provide: LibCodingTestService, useValue: libCodingTestServiceMock }],
+    });
+    service = TestBed.inject(ThemeService);
+  });
+
+  describe('when theme is dark', () => {
+    describe('AND rebranded company color', () => {
+      it('should emit companyColor = PINK + themeSpecificColor = WHITE', done => {
+        service.companyColor = '#D410AA';
+        themeSubject.next(Themes.Dark);
+
+        service.themeColors$.subscribe(({ companyColor, themeSpecificColor }) => {
+          expect(companyColor).toBe('#D410AA');
+          expect(themeSpecificColor).toBe('#FFFFFF');
+          done();
+        });
+      });
+    });
+
+    describe('AND default company color', () => {
+      it('should emit companyColor  + themeSpecificColor = TEAL', done => {
+        themeSubject.next(Themes.Dark);
+
+        service.themeColors$.subscribe(({ companyColor, themeSpecificColor }) => {
+          expect(companyColor).toBe('#46a997');
+          expect(themeSpecificColor).toBe('#46a997');
+          done();
+        });
+      });
+    });
+  });
+
+  describe('when theme is light', () => {
+    describe('AND rebranded company color', () => {
+      it('should emit companyColor  + themeSpecificColor = PINK', done => {
+        service.companyColor = '#D410AA';
+        themeSubject.next(Themes.Default);
+
+        service.themeColors$.subscribe(({ companyColor, themeSpecificColor }) => {
+          expect(companyColor).toBe('#D410AA');
+          expect(themeSpecificColor).toBe('#D410AA');
+          done();
+        });
+      });
+    });
+
+    describe('AND default company color', () => {
+      it('should emit companyColor  + themeSpecificColor = TEAL', done => {
+        themeSubject.next(Themes.Default);
+
+        service.themeColors$.subscribe(({ companyColor, themeSpecificColor }) => {
+          expect(companyColor).toBe('#46a997');
+          expect(themeSpecificColor).toBe('#46a997');
+          done();
+        });
+      });
+    });
+  });
+});

package/src/lib/services/theme.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { LibCodingTestService } from './lib-coding-test.service';
+import { Themes } from '../models/theme';
+import { BehaviorSubject, combineLatest, map } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  private defaultCompanyColor = '#46a997';
+  private companyColorSubject = new BehaviorSubject<string>(this.defaultCompanyColor);
+  private themeSubject = new BehaviorSubject<Themes>(Themes.Default);
+
+  themeColors$ = combineLatest([this.themeSubject, this.companyColorSubject]).pipe(
+    map(([theme, companyColor]) => {
+      const themeSpecificColor = this.getAdjustedColorForTheme(theme, companyColor);
+      return { companyColor, themeSpecificColor };
+    })
+  );
+
+  constructor(private libCodingService: LibCodingTestService) {
+    this.libCodingService.themeChanged$.subscribe(theme => {
+      this.themeSubject.next(theme);
+    });
+  }
+
+  set companyColor(color: string) {
+    this.companyColorSubject.next(color);
+  }
+
+  private getAdjustedColorForTheme(theme: Themes, color: string): string {
+    return theme === Themes.Dark && color.toUpperCase() === '#D410AA' ? '#FFFFFF' : color;
+  }
+}

package/src/lib/styles/mixins.scss

@@ -0,0 +1,86 @@
+@mixin as-split-styles() {
+  .as-split {
+    min-height: 500px;
+
+    ::ng-deep .as-split-gutter {
+      position: relative;
+      background-color: #D9D9D9 !important;
+      transition: background 200ms ease-in-out;
+
+      &-icon {
+        background-image: none !important;
+
+        position: absolute;
+        border-radius: 5px;
+        background: #D9D9D9;
+        transition: background 200ms ease-in-out;
+
+        &::before, &::after {
+          content: "";
+          position: absolute;
+        }
+      }
+
+      &:hover, &.as-dragged {
+        background-color: var(--company-color, #46A997) !important;
+
+        .as-split-gutter-icon {
+          background: var(--company-color, #46A997);
+        }
+      }
+    }
+
+    &.as-horizontal {
+      ::ng-deep > .as-split-gutter {
+        .as-split-gutter-icon {
+          height: 34px !important;
+          width: 12px !important;
+          z-index: 1;
+
+          &::before, &::after {
+            top: 9px;
+            bottom: 9px;
+            background-color: var(--bg-mat-card);
+            width: 2px;
+            border-radius: 5px;
+          }
+
+          &::before {
+            left: 2px;
+          }
+
+          &::after {
+            right: 2px;
+          }
+        }
+      }
+    }
+
+    &.as-vertical {
+      ::ng-deep > .as-split-gutter {
+        .as-split-gutter-icon {
+          height: 12px !important;
+          width: 34px !important;
+
+          &::before, &::after {
+            left: 9px;
+            right: 9px;
+            background-color: var(--bg-mat-card);
+            height: 2px;
+            width: auto;
+            border-radius: 5px;
+          }
+
+          &::before {
+            top: 2px;
+          }
+
+          &::after {
+            top: auto;
+            bottom: 2px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/styles/styles.scss

@@ -0,0 +1,112 @@
+@import "@testgorilla/tgo-ui/projects/tgo-canopy-ui/theme/typography";
+@import "@testgorilla/tgo-ui/projects/tgo-canopy-ui/theme/input";
+@import "variables";
+
+lib-coding-test .theme-default {
+  --page-bg: var(--color-accent-10);
+  --bg-mat-card: #ffffff;
+  --icon-bg-color: #323232;
+  --icon-bg-hover-color: #f6f6f6;
+  --icon-secondary-bg-color: #000000;
+  --petrol-text-color: #276678;
+  --status-bg-color: #f6f6f6;
+  --button-bg-color: #ededed;
+  --info-panel-color: #c8d7de;
+  --code-editor-background: #fffffe;
+  --select-chosen-text-color: #888888;
+  --select-chosen-bg-color: #e9f0f1;
+  --select-hovered-bg-color: rgba(0, 0, 0, 0.04);
+  --select-options-text-color: #000000;
+  --select-bg-color: #ffffff;
+  --select-bg-color-light: #ffffff;
+  --select-border-color: #eeeeee;
+  --select-border-color-light: rgba(0, 0, 0, 0.12);
+  --select-shadow-color: #cccccc;
+  --select-arrow-color: rgba(0, 0, 0, 0.54);
+  --drawer-bg-color: #ffffff;
+  --toggle-thumb-bg-color: #ffffff;
+  --toggle-body-bg-color: #ededed;
+  --main-text-color: rgba(0, 0, 0, 0.87);
+  --secondary-text-color: #000000;
+  --status-empty-color: #888888;
+  --border-bg-color: #e0e0e0;
+  --teal-disabled-color: #B5DDD5;
+}
+
+lib-coding-test .theme-dark {
+  --page-bg: #181818;
+  --bg-mat-card: #2d2d2d;
+  --icon-bg-color: #f6f6f6;
+  --icon-bg-hover-color: #1e1e1e;
+  --icon-secondary-bg-color: #f6f6f6;
+  --petrol-text-color: #6894A0;
+  --status-bg-color: #3c3c3c;
+  --button-bg-color: #2d2d2d;
+  --info-panel-color: #c8d7de;
+  --code-editor-background: #1e1e1e;
+  --select-chosen-text-color: #f6f6f6;
+  --select-chosen-bg-color: #2d2d2d;
+  --select-hovered-bg-color: rgba(45, 45, 45, 0.5);
+  --select-options-text-color: #f6f6f6;
+  --select-bg-color: #000000;
+  --select-bg-color-light: #2D2D2D;
+  --select-border-color: #2d2d2d;
+  --select-border-color-light: #888888;
+  --select-shadow-color: #2d2d2d;
+  --select-arrow-color: #ffffff;
+  --drawer-bg-color: #181818;
+  --toggle-thumb-bg-color: #000000;
+  --toggle-body-bg-color: #888888;
+  --main-text-color: #ffffff;
+  --secondary-text-color: #ffffff;
+  --status-empty-color: #E0E0E0;
+  --border-bg-color: #888888;
+  --teal-disabled-color: #888888;
+  --mdc-plain-tooltip-supporting-text-color: #000000;
+
+  &.coding-question-fullscreen {
+    --bg-mat-card: #181818;
+  }
+}
+
+lib-coding-test {
+  .themed-button {
+    button:not(.tertiary) mat-icon svg {
+      color: var(--icon-bg-color);
+      fill: var(--icon-bg-color);
+    }
+
+    button.tertiary mat-icon svg {
+      color: var(--company-color, #46A997);
+      fill: var(--company-color, #46A997);
+    }
+
+    .button-wrapper {
+      .icon-button:hover,
+      .mdc-button:hover {
+        // needed temporarily until mat-themes are defined in the main app, so ui-button colors can be defined globally
+        background-color: var(--icon-bg-hover-color) !important;
+      }
+    }
+  }
+
+  // todo: remove when the ui-icon has these styles for mat-icon, not only svg
+  mat-icon.size-24 {
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+  }
+
+  mat-icon.size-16 {
+    min-width: 16px;
+    min-height: 16px;
+    width: 16px;
+    height: 16px;
+  }
+
+  ui-toggle.config-toggle mat-icon {
+    width: auto;
+    height: auto;
+  }
+}

package/src/lib/styles/variables.scss

@@ -0,0 +1,105 @@
+/*
+ * COLORS
+ */
+:root {
+  // Brand
+  --color-primary-10: #FFF2FC;
+  --color-primary-20: #FFE6FA;
+  --color-primary-30: #FFB3EE;
+  --color-primary-40: #FF54DA;
+  --color-primary-50: #D410AA;
+  --color-primary-60: #A90686;
+
+  // Accent
+  --color-accent-10: #FFFAF6;
+  --color-accent-20: #FFF5ED;
+
+  // Base
+  --color-black: #242424;
+  --color-black-opa-70: rgba(36, 36, 36, 0.70);
+  --color-white: #FFFFFF;
+
+  // Greyscale
+  --color-grey-10: #F4F4F4;
+  --color-grey-20: #E9E9E9;
+  --color-grey-30: #D3D3D3;
+  --color-grey-40: #919191;
+  --color-grey-50: #666666;
+
+  // Informative
+  --color-info-10: #D9E8FF;
+  --color-info-20: #99C1FE;
+  --color-info-30: #277CFD;
+  --color-info-40: #0165FC;
+  --color-info-50: #1447AA;
+
+  // Success
+  --color-success-10: #F5FAE3;
+  --color-success-20: #E2F4B3;
+  --color-success-30: #C6E866;
+  --color-success-40: #A0D90D;
+  --color-success-50: #88B901;
+
+  // Error
+  --color-error-10: #FFEAE6;
+  --color-error-20: #FFAC9A;
+  --color-error-30: #FF6E4F;
+  --color-error-40: #FF3003;
+  --color-error-50: #E02800;
+
+  // Warning
+  --color-warning-10: #FFF5E6;
+  --color-warning-20: #FFE1B3;
+  --color-warning-30: #FFC268;
+  --color-warning-40: #FF9A03;
+  --color-warning-50: #D07D00;
+}
+/*
+ * FONTS
+ */
+:root {
+  --font-family-main: "Modern Gothic", sans-serif;
+  --font-h1: 900 40px/52px var(--font-family-main);
+  --font-h2: 900 24px/30px var(--font-family-main);
+  --font-h3: 700 20px/26px var(--font-family-main);
+  --font-h4: 700 16px/20px var(--font-family-main);
+  --font-h5: 700 14px/18px var(--font-family-main);
+  --font-body-large: 400 16px/24px var(--font-family-main);
+  --font-body-default: 400 14px/22px var(--font-family-main);
+  --font-body-small: 400 12px/16px var(--font-family-main);
+  --font-hyperlink-large: 500 16px/24px var(--font-family-main);
+  --font-hyperlink-default: 500 14px/22px var(--font-family-main);
+  --font-hyperlink-small: 500 12px/16px var(--font-family-main);
+  --font-button-label: 500 14px/1.4 var(--font-family-main);
+  --font-label: 400 14px/1.4 var(--font-family-main);
+}
+/*
+ * BORDER RADIUS
+ */
+:root {
+  --border-radius-none: 0px;
+  --border-radius-small: 4px;
+  --border-radius-small-top: var(--border-radius-small) var(--border-radius-small) 0 0;
+  --border-radius-small-bottom: 0 0 var(--border-radius-small) var(--border-radius-small);
+  --border-radius-default: 10px;
+  --border-radius-default-top: var(--border-radius-default) var(--border-radius-default) 0 0;
+  --border-radius-default-bottom: 0 0 var(--border-radius-default) var(--border-radius-default);
+  --border-radius-large: 36px;
+  --border-radius-round: 50%;
+  --color-grey-border: #DDDDDD;
+  --color-grey-border-hover: #F6F6F6;
+}
+/*
+ * BOX-SHADOWS
+ */
+:root {
+  --box-shadow-hover: 0px 4px 16px 0px rgba(36,36,36,0.08);
+  --box-shadow-card: 0px 4px 100px 0px rgba(36,36,36,0.04);
+  --box-shadow-notification: 0px 4px 16px 0px rgba(36,36,36,0.04);
+}
+/*
+ * OTHERS
+ */
+:root {
+  --viewport-width: 1312px;
+}

package/src/lib/utils/additional-languages/erlang.ts

@@ -0,0 +1,115 @@
+export const erlangLanguage = {
+  // Define default token
+  defaultToken: '',
+
+  // Define keywords
+  keywords: [
+    'after',
+    'and',
+    'andalso',
+    'band',
+    'begin',
+    'bnot',
+    'bor',
+    'bsl',
+    'bsr',
+    'bxor',
+    'case',
+    'catch',
+    'cond',
+    'div',
+    'end',
+    'fun',
+    'if',
+    'let',
+    'not',
+    'of',
+    'or',
+    'orelse',
+    'query',
+    'receive',
+    'rem',
+    'try',
+    'when',
+    'xor',
+    'define',
+    'elif',
+    'else',
+    'endif',
+    'error',
+    'ifdef',
+    'ifndef',
+    'include',
+    'include_lib',
+    'undef',
+  ],
+
+  // Define type and function patterns
+  typeKeywords: [
+    'atom',
+    'binary',
+    'bitstring',
+    'boolean',
+    'byte',
+    'char',
+    'float',
+    'integer',
+    'list',
+    'number',
+    'pid',
+    'port',
+    'reference',
+    'term',
+    'tuple',
+  ],
+
+  // Define operators
+  operators: ['+', '-', '*', '/', '>', '<', '=', '==', '/=', '=:=', '=/=', '=<', '=>', '&&', '||', '!'],
+
+  // Define symbols and delimiters
+  symbols: /[=><!~?:&|+\-*/^%]+/,
+
+  // The main tokenizer for Erlang
+  tokenizer: {
+    root: [
+      // Identifiers and keywords
+      [/[a-z][\w$]*/, { cases: { '@keywords': 'keyword', '@default': 'identifier' } }],
+      [/[A-Z][\w$]*/, 'type.identifier'], // to handle the type and module names
+
+      // Whitespace
+      { include: '@whitespace' },
+
+      // Delimiters and operators
+      [/[{}()[\]\\]]/, '@brackets'],
+      [/@symbols/, { cases: { '@operators': 'operator', '@default': '' } }],
+
+      // Numbers
+      [/\d+\.\d*([eE][-+]?\d+)?/, 'number.float'],
+      [/\d+/, 'number'],
+
+      // Strings
+      [/"/, { token: 'string', bracket: '@open', next: '@string' }],
+
+      // Atoms
+      [/'([^'\\]|\\.)*$/, 'string.invalid'], // non-terminated atom
+      [/'/, { token: 'string', bracket: '@open', next: '@atom' }],
+    ],
+
+    string: [
+      [/[^\\"]+/, 'string'],
+      [/\\./, 'string.escape'],
+      [/"/, { token: 'string', bracket: '@close', next: '@pop' }],
+    ],
+
+    atom: [
+      [/[^\\']+/, 'string'],
+      [/\\./, 'string.escape'],
+      [/'/, { token: 'string', bracket: '@close', next: '@pop' }],
+    ],
+
+    whitespace: [
+      [/[ \t\r\n]+/, 'white'],
+      [/%.*$/, 'comment'], // Single line comment
+    ],
+  },
+};

package/src/lib/utils/resize-element.ts

@@ -0,0 +1,15 @@
+import { Observable, Subscriber } from 'rxjs';
+
+export function resizeElement(element: Element): Observable<ResizeObserverEntry> {
+  return new Observable((observer: Subscriber<ResizeObserverEntry>) => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      observer.next(entry);
+    });
+
+    resizeObserver.observe(element);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+}

package/src/lib/utils/time-to-ms.util.ts

@@ -0,0 +1,10 @@
+export function timeToMs(time: number, type: 'days' | 'hours' = 'days'): number {
+  switch (type) {
+    case 'hours':
+      return time * 60 * 60 * 1000;
+    case 'days':
+      return time * 24 * 60 * 60 * 1000;
+    default:
+      throw new Error('Invalid type. Use "hours" or "days".');
+  }
+}

package/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es2022"
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}