@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/page-not-found/src/page-not-found-invader.component.ts

@@ -0,0 +1,84 @@
+import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
+import { Observable, of, Subject, Subscription, timer } from 'rxjs';
+import { map, startWith, switchMap } from 'rxjs/operators';
+
+@Component({
+    selector: 'page-not-found-invader',
+    styleUrls: ['page-not-found-invader.component.scss'],
+    template: `
+        <img
+            src="/assets/404/Soucoupe.svg"
+            class="invader"
+            [ngClass]="{ 'game-over': gameOver }"
+            [ngStyle]="{
+                width: (size$ | async) + 'px',
+                height: (size$ | async) + 'px',
+                left: left + 'px',
+                top: top + 'px'
+            }"
+            (click)="getScore()"
+        />
+        <div class="score">Score: {{ score }}</div>
+        <!--div class="laser"></div-->
+    `,
+})
+export class PageNotFoundInvaderComponent implements AfterViewInit, OnDestroy {
+    level = 0;
+    size$?: Observable<number>;
+
+    start: Date = new Date();
+    score: number = 0;
+    gameOver = false;
+    sub?: Subscription;
+
+    score$: Subject<number> = new Subject();
+    top: number = 0;
+    left: number = 0;
+
+    constructor(private cd: ChangeDetectorRef) {}
+
+    ngAfterViewInit() {
+        this.size$ = this.score$.pipe(
+            startWith(0),
+            switchMap((score) => {
+                this.level++;
+                if (this.gameOver) {
+                    this.sub?.unsubscribe();
+                    return of(10);
+                }
+
+                const width = window.innerWidth;
+                const height = window.innerHeight;
+
+                this.left = (Math.random() * width) / 2 + width / 3;
+                this.top = Math.random() * height * 0.8 + height / 10;
+
+                const lvl = score < 39 ? score : 39.5;
+                return timer(0, 10).pipe(map((i) => i / (40 - lvl)));
+            })
+        );
+
+        this.sub = this.size$.subscribe((s) => {
+            if (s > 20) {
+                this.gameOver = true;
+                this.score$.next(this.score);
+            }
+        });
+
+        this.cd.detectChanges();
+    }
+
+    ngOnDestroy(): void {
+        this.sub?.unsubscribe();
+    }
+
+    getScore() {
+        if (this.gameOver) {
+            this.score$.next(this.score);
+            this.sub?.unsubscribe();
+            return;
+        }
+        this.score++;
+        this.score$.next(this.score);
+    }
+}

package/projects/onemrva/design-system/page-not-found/src/page-not-found-mixin.component.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin pageNotFound($theme) {
+    .page-not-found {
+        .not-found-section {
+            .oops {
+                color: mat.get-color-from-palette(map-get($theme, 'grayscale'), 800);
+            }
+        }
+    }
+}

package/projects/onemrva/design-system/page-not-found/src/page-not-found.component.html

@@ -0,0 +1,31 @@
+<div class="page-not-found">
+    <!--img src="/assets/404/Arrière-plan.svg" class="ap" /-->
+    <div class="not-found-section">
+        <div class="mat-headline-1">{{ '404.oops' | translate }}</div>
+        <h1>{{ '404.title' | translate }}</h1>
+        <p>{{ '404.body' | translate }}</p>
+        <h2>{{ '404.actions' | translate }}</h2>
+        <div class="actions">
+            <ng-container *ngFor="let action of actions?.toArray(); let i = index">
+                <ng-container *ngIf="action.template">
+                    <ng-container *ngTemplateOutlet="action.template"></ng-container>
+                </ng-container>
+            </ng-container>
+        </div>
+        <ng-container *ngIf="extra?.template as tpl">
+            <ng-container *ngTemplateOutlet="tpl"></ng-container>
+        </ng-container>
+    </div>
+    <div class="not-found-section section-flying-saucer">
+        <div class="not-found-section flying-saucer-container">
+            <img src="/assets/404/Soucoupe.svg" class="soucoupe" alt="{{ '404.flying.saucer' | translate }}"/>
+            <img src="/assets/404/Halo.svg" class="halo" alt="{{ '404.tractor.beam' | translate }}" />
+            <div class="page-container">
+                <img src="/assets/404/Page.svg" class="page" alt="{{ '404.scared.page' | translate }}" />
+            </div>
+            <img src="/assets/404/Ombre.svg" class="ombre" alt="{{ '404.shadow' | translate }}"/>
+        </div>
+    </div>
+
+    <page-not-found-invader *ngIf="konamiMatch"></page-not-found-invader>
+</div>

package/projects/onemrva/design-system/page-not-found/src/page-not-found.component.scss

@@ -0,0 +1,206 @@
+.page-not-found {
+    display: flex;
+    flex-flow: row wrap;
+    position: relative;
+    background-image: url('/assets/404/shape.svg');
+    background-size: auto 160vh;
+    background-position: 40vw -30vh;
+    min-height: 100vh;
+    background-repeat: no-repeat;
+
+    .ap {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    .not-found-section {
+        flex: 1 1 300px;
+        padding: 48px 146px;
+
+        .oops {
+            font-size: 8vw;
+            line-height: 11vw;
+            font-weight: 700;
+            font-family: 'Poppins';
+            margin-bottom: 21px;
+        }
+
+        .nf-title {
+            margin-bottom: 21px;
+        }
+
+        .nf-body {
+            margin-bottom: 40px;
+        }
+
+        .nf-actions {
+            margin-bottom: 32px;
+            font-size: 24px;
+            line-height: 36px;
+            font-weight: 700;
+        }
+
+        .actions {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 40px;
+        }
+
+        &.section-flying-saucer {
+            padding-top: 96px;
+        }
+    }
+
+    not-found-invader {
+        position: absolute;
+    }
+}
+
+.flying-saucer-container {
+    position: relative;
+
+    .soucoupe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+        transform: translateY(0);
+        animation-name: takeOff;
+        animation-duration: 10s;
+    }
+
+    .halo {
+        position: absolute;
+        top: 143px;
+        left: 42px;
+        height: 395px;
+        width: 273px;
+        border-radius: 0 0 130px 130px;
+        opacity: 1;
+        animation-name: retractHalo;
+        animation-duration: 10s;
+    }
+    .page-container {
+        position: absolute;
+        top: 147px;
+        left: 100px;
+        height: 350px;
+        overflow: hidden;
+        animation-direction: normal;
+
+        .page {
+            transform: translateY(100px);
+            animation-name: suckPage;
+            animation-duration: 10s;
+        }
+    }
+    .ombre {
+        position: absolute;
+        top: 536px;
+        animation-name: shadowFade;
+        animation-duration: 10s;
+        opacity: 1;
+        width: 250px;
+        left: 60px;
+    }
+}
+
+@keyframes suckPage {
+    0% {
+        transform: translateY(100px);
+        opacity: 1;
+    }
+    35% {
+        transform: translateY(100px);
+        opacity: 1;
+    }
+    55% {
+        opacity: 0;
+    }
+    85% {
+        transform: translateY(-300px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(100px);
+    }
+}
+
+@keyframes retractHalo {
+    0% {
+        opacity: 0;
+    }
+    25% {
+        opacity: 0;
+    }
+    35% {
+        opacity: 1;
+    }
+    55% {
+        opacity: 1;
+    }
+    85% {
+        opacity: 0;
+    }
+    99% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes takeOff {
+    0% {
+        transform: translateY(-300px);
+    }
+    25% {
+        transform: translateY(0);
+    }
+    70% {
+        transform: translateY(0);
+    }
+    90% {
+        transform: translateY(-300px);
+    }
+    96% {
+        transform: translateY(-300px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes shadowFade {
+    0% {
+        opacity: 0;
+        width: 370px;
+        left: 0;
+    }
+    25% {
+        opacity: 1;
+        width: 250px;
+        left: 60px;
+    }
+    70% {
+        opacity: 1;
+        width: 250px;
+        left: 60px;
+    }
+    90% {
+        opacity: 0;
+        width: 370px;
+        left: 0;
+    }
+    96% {
+        opacity: 0;
+        width: 370px;
+        left: 0;
+    }
+    100% {
+        opacity: 1;
+        width: 250px;
+        left: 60px;
+    }
+}

package/projects/onemrva/design-system/page-not-found/src/page-not-found.component.ts

@@ -0,0 +1,59 @@
+import {
+    AfterViewInit,
+    ChangeDetectorRef,
+    Component,
+    ContentChild,
+    ContentChildren,
+    OnDestroy,
+    QueryList,
+} from '@angular/core';
+import { PageNotFoundActionComponent } from './page-not-found-action.component';
+import { PageNotFoundExtraComponent } from './page-not-found-extra.component';
+
+const konamiPattern = [
+    'ArrowUp',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowLeft',
+    'ArrowRight',
+    'b',
+    'a',
+];
+@Component({
+    selector: 'page-not-found',
+    styleUrls: ['./page-not-found.component.scss'],
+    templateUrl: 'page-not-found.component.html',
+})
+export class PageNotFoundComponent implements AfterViewInit, OnDestroy {
+    @ContentChildren(PageNotFoundActionComponent) actions?: QueryList<PageNotFoundActionComponent>;
+    @ContentChild(PageNotFoundExtraComponent) extra?: PageNotFoundExtraComponent;
+
+    sequence: string[] = ['', '', '', '', '', '', '', '', '', ''];
+    konamiMatch = false;
+
+    constructor(private cd: ChangeDetectorRef) {}
+
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+        window.addEventListener('keydown', this.konami.bind(this));
+    }
+
+    ngOnDestroy() {
+        window.removeEventListener('keydown', this.konami.bind(this));
+    }
+
+    konami($event: any) {
+        this.sequence.shift();
+        this.sequence = [...this.sequence, $event.key];
+
+        if (
+            this.sequence.length === konamiPattern.length &&
+            !this.sequence.map((s, idx) => s === konamiPattern[idx]).includes(false)
+        ) {
+            this.konamiMatch = true;
+        }
+    }
+}

package/projects/onemrva/design-system/page-not-found/src/page-not-found.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PageNotFoundComponent } from './page-not-found.component';
+import { PageNotFoundInvaderComponent } from './page-not-found-invader.component';
+import { PageNotFoundActionComponent } from './page-not-found-action.component';
+import { PageNotFoundExtraComponent } from './page-not-found-extra.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+    declarations: [
+        PageNotFoundComponent,
+        PageNotFoundInvaderComponent,
+        PageNotFoundActionComponent,
+        PageNotFoundExtraComponent,
+    ],
+    imports: [CommonModule, TranslateModule],
+    exports: [
+        PageNotFoundComponent,
+        PageNotFoundInvaderComponent,
+        PageNotFoundActionComponent,
+        PageNotFoundExtraComponent,
+    ],
+})
+export class OnemrvaPageNotFoundModule {}

package/projects/onemrva/design-system/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of material
+ */
+
+export const konami = 'https://onem.be/konami';

package/projects/onemrva/design-system/tsconfig.lib.json

@@ -0,0 +1,12 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../out-tsc/lib",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "exclude": ["src/test.ts", "**/*.spec.ts"]
+}

package/projects/onemrva/design-system/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/onemrva/design-system/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './src/enums';
+export * from './src/enum.utils';

package/projects/onemrva/design-system/utils/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

package/projects/onemrva/design-system/utils/src/enum.utils.ts

@@ -0,0 +1,6 @@
+/**
+ * This utility type fills several purposes:
+ * - possibility to merge the enumeration and the list of possible values (not possible with an enum)
+ * - possibility to hardcode the value without using the enumeration (with enum, you have to use an enum option, not one of the strings listed among the enum options)
+ */
+export const mkenum = <T extends { [index: string]: U }, U extends string>(x: T) => x;

package/projects/onemrva/design-system/utils/src/enums/color.enum.ts

@@ -0,0 +1,14 @@
+import { mkenum } from '../enum.utils';
+
+export const OnemrvaMatColor = mkenum({
+  NONE: '',
+  PRIMARY: 'primary',
+  ACCENT: 'accent',
+  WARN: 'warn',
+  SUCCESS: 'success',
+  INFO: 'info',
+  ERROR: 'error',
+  GRAYSCALE: 'grayscale',
+});
+export type OnemrvaMatColor =
+  (typeof OnemrvaMatColor)[keyof typeof OnemrvaMatColor];

package/projects/onemrva/design-system/utils/src/enums/index.ts

@@ -0,0 +1,2 @@
+export * from './color.enum';
+export * from './size.enum';

package/projects/onemrva/design-system/utils/src/enums/size.enum.ts

@@ -0,0 +1,11 @@
+import { mkenum } from '../enum.utils';
+
+export const OnemrvaMatSize = mkenum({
+  XSMALL: 'extrasmall',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  XLARGE: 'extralarge',
+});
+export type OnemrvaMatSize =
+  (typeof OnemrvaMatSize)[keyof typeof OnemrvaMatSize];

package/projects/schematics/README.md

@@ -0,0 +1,40 @@
+## Prerequisites
+
+npm install -g @angular-devkit/schematics-cli
+
+## Installation
+
+This step is going to install the schematics in the project (in node_modules)
+
+\*\*\_NOTE:\*\*\* _The next four commands can executed with npm run link:schematics_
+
+(the next 4 commands can be run with npm run link:schematics. )
+
+-   cd onemrva
+-   npm run build
+-   cd ..
+-   npm link ./onemrva .
+
+## Generation of custom component named calendar in @onemrvapublic/design-system with demo
+
+\*\*\_NOTE:\*\*\* _The name must be in kebap-case_
+
+\*\*\_NOTE2:\*\*\* _If not supplied, the project is material by default_
+
+schematics onemrva:cmpDemo --name=calendar (--project=sandbox)
+
+## Generation of custom component only in @onemrvapublic/design-system
+
+\*\*\_NOTE:\*\*\* _The name must be in kebap-case_
+
+\*\*\_NOTE2:\*\*\* _If not supplied, the project is material by default_
+
+schematics onemrva:component --name=calendar (--project=sandbox)
+
+## Generation of demo only for that component
+
+\*\*\_NOTE:\*\*\* _The name must be in kebap-case_
+
+\*\*\_NOTE2:\*\*\* _If not supplied, the project is material by default_
+
+schematics onemrva:demo --name=calendar (--project=sandbox)

package/projects/schematics/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "onemrva",
+  "version": "0.0.0",
+  "description": "Scaffolding schematics for @onemrvapublic/design-system",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "npm run build && jasmine src/**/*_spec.js"
+  },
+  "keywords": [
+    "schematics"
+  ],
+  "author": "",
+  "license": "MIT",
+  "schematics": "./src/collection.json",
+  "dependencies": {
+    "@angular-devkit/core": "^14.2.3",
+    "@angular-devkit/schematics": "^14.2.3",
+    "typescript": "^4.9.4"
+  },
+  "devDependencies": {
+    "@types/jasmine": "~4.0.0",
+    "@types/node": "^14.15.0",
+    "jasmine": "^4.0.0"
+  }
+}

package/projects/schematics/src/cmp-demo/schema.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "Component",
+    "title": "New @onemrvapublic/design-system component",
+    "properties": {
+        "name": {
+            "type": "string",
+            "description": "component name in camel case format"
+        },
+        "project": {
+            "type": "string",
+            "description": "project name"
+        }
+    }
+}

package/projects/schematics/src/collection.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+    "schematics": {
+        "component": {
+            "description": "Generation of @onemrvapublic/design-system/component.",
+            "factory": "./component/index#component"
+        },
+        "demo": {
+            "description": "Generation of demo for @onemrvapublic/design-system/component (does not include configuration in Demos.ts).",
+            "factory": "./demo/index#demo"
+        },
+        "cmpDemo": {
+            "description": "Composition of schematics onemrva:component and onemrva:demo",
+            "factory": "./cmp-demo/index#cmpDemo"
+        }
+    }
+}

package/projects/schematics/src/component/files/root/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

package/projects/schematics/src/component/files/src/onemrva-mat-__name__.component.html

@@ -0,0 +1,4 @@
+<div>Je suis un composant</div>
+<div>Je suis un composant</div>
+<div>Je suis un composant</div>
+<div>Je suis un composant</div>

package/projects/schematics/src/component/schema.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "Component",
+  "title": "New @onemrvapublic/design-system component",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "component name in camel case format"
+    }
+  }
+}

package/projects/schematics/src/demo/files/demo/demo-__name__.component.html

@@ -0,0 +1,2 @@
+
+<onemrva-mat-<%=dasherize(name)%>></onemrva-mat-<%=dasherize(name)%>>

package/projects/schematics/src/demo/files/demo/readme.md

@@ -0,0 +1,26 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system
+```
+
+In style.scss:
+
+```scss
+@use "@onemrvapublic/theme" as theme;
+@use "@onemrvapublic/design-system" as onemrvaMat;
+
+@include theme.reset();
+
+.onemrva-theme {
+  @include theme.onemrva();
+  @include onemrvaMat.<%=camelize(name) %>(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 14.2.XXX
+
+Thibaut, tu as oublié de mettre à jour le changeLog

package/projects/schematics/src/demo/schema.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "Component",
+    "title": "New @onemrvapublic/design-system component",
+    "properties": {
+        "name": {
+            "type": "string",
+            "description": "component name in camel case format"
+        },
+        "project": {
+            "type": "string",
+            "description": "project name"
+        }
+    }
+}