header works

libs/pmt-calendar/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

libs/pmt-calendar/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@pmt/pmt-calendar",
+  "version": "0.0.1",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.js",
+  "es2015": "./dist/esm/index.mjs",
+  "es2017": "./dist/esm/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "collection": "./dist/collection/collection-manifest.json",
+  "collection:main": "./dist/collection/index.js",
+  "unpkg": "./dist/pmt-calendar/pmt-calendar.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ]
+}

libs/pmt-calendar/project.json

@@ -0,0 +1,67 @@
+{
+  "name": "pmt-calendar",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/pmt-calendar/src",
+  "projectType": "library",
+  "generators": {
+    "@nxext/stencil:component": {
+      "style": "scss"
+    }
+  },
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nxext/stencil:test",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "projectType": "library",
+        "tsConfig": "libs/pmt-calendar/tsconfig.lib.json",
+        "configPath": "libs/pmt-calendar/stencil.config.ts",
+        "outputPath": "dist/libs/pmt-calendar"
+      }
+    },
+    "build": {
+      "executor": "@nxext/stencil:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "projectType": "library",
+        "tsConfig": "libs/pmt-calendar/tsconfig.lib.json",
+        "configPath": "libs/pmt-calendar/stencil.config.ts",
+        "outputPath": "dist/libs/pmt-calendar"
+      },
+      "configurations": {
+        "production": {
+          "dev": false,
+          "prod": true
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nxext/stencil:serve",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "projectType": "library",
+        "tsConfig": "libs/pmt-calendar/tsconfig.lib.json",
+        "configPath": "libs/pmt-calendar/stencil.config.ts",
+        "outputPath": "dist/libs/pmt-calendar"
+      }
+    },
+    "e2e": {
+      "executor": "@nxext/stencil:e2e",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "projectType": "library",
+        "tsConfig": "libs/pmt-calendar/tsconfig.lib.json",
+        "configPath": "libs/pmt-calendar/stencil.config.ts",
+        "outputPath": "dist/libs/pmt-calendar"
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": "libs/pmt-calendar/**/*.{ts,tsx}"
+      }
+    }
+  }
+}

libs/pmt-calendar/src/components.d.ts

@@ -0,0 +1,50 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface PmtCalendar {
+    }
+    interface PmtCalendarHeader {
+    }
+}
+declare global {
+    interface HTMLPmtCalendarElement extends Components.PmtCalendar, HTMLStencilElement {
+    }
+    var HTMLPmtCalendarElement: {
+        prototype: HTMLPmtCalendarElement;
+        new (): HTMLPmtCalendarElement;
+    };
+    interface HTMLPmtCalendarHeaderElement extends Components.PmtCalendarHeader, HTMLStencilElement {
+    }
+    var HTMLPmtCalendarHeaderElement: {
+        prototype: HTMLPmtCalendarHeaderElement;
+        new (): HTMLPmtCalendarHeaderElement;
+    };
+    interface HTMLElementTagNameMap {
+        "pmt-calendar": HTMLPmtCalendarElement;
+        "pmt-calendar-header": HTMLPmtCalendarHeaderElement;
+    }
+}
+declare namespace LocalJSX {
+    interface PmtCalendar {
+    }
+    interface PmtCalendarHeader {
+    }
+    interface IntrinsicElements {
+        "pmt-calendar": PmtCalendar;
+        "pmt-calendar-header": PmtCalendarHeader;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "pmt-calendar": LocalJSX.PmtCalendar & JSXBase.HTMLAttributes<HTMLPmtCalendarElement>;
+            "pmt-calendar-header": LocalJSX.PmtCalendarHeader & JSXBase.HTMLAttributes<HTMLPmtCalendarHeaderElement>;
+        }
+    }
+}

libs/pmt-calendar/src/components/calendar-header/calendar-header.scss

@@ -0,0 +1,22 @@
+
+.calendar-header-container {
+    display: inline-flex;
+    justify-content: center;
+    justify-self: center;
+    width: 100%;
+    border: 1px solid #d3d3d3;
+    border-radius: 4px;
+    span {
+        padding: 1rem;
+
+    }
+    button {
+        background-color: #fff;
+        padding: 1rem;
+        font-size: 1.25rem;
+        &.selected {
+            background-color: blue;
+            color: #fff;
+        }
+    }
+}

libs/pmt-calendar/src/components/calendar-header/calendar-header.tsx

@@ -0,0 +1,35 @@
+import {Component, h, State} from '@stencil/core';
+import {CALENDAR_VIEW} from '../../models/calendar.const';
+import { CalendarView } from '../../models/calendar.types';
+
+@Component({
+    tag: 'pmt-calendar-header',
+    shadow: true,
+    styleUrl: './calendar-header.scss'
+})
+
+export class CalendarHeader {
+
+    @State()
+    currentView: CalendarView = 'Month';
+
+    updateCurrentView(view: CalendarView) {
+        this.currentView = view;
+    }
+
+    render() {
+        return (
+            <div class="calendar-header-container">
+                {Object.keys(CALENDAR_VIEW).map(key => {
+                    return (
+                        <button 
+                            class={CALENDAR_VIEW[key] === this.currentView ? 'selected' : ''} 
+                            onClick={() => this.updateCurrentView(CALENDAR_VIEW[key])} key={key}>
+                                {CALENDAR_VIEW[key]}
+                        </button>
+                    );
+                })}
+            </div>
+        );
+    }
+}

libs/pmt-calendar/src/components/calendar-header/readme.md

@@ -0,0 +1,23 @@
+# pmt-calendar-month-header
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Dependencies
+
+### Used by
+
+ - [pmt-calendar](../calendar)
+
+### Graph
+```mermaid
+graph TD;
+  pmt-calendar --> pmt-calendar-header
+  style pmt-calendar-header fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

libs/pmt-calendar/src/components/calendar/calendar.e2e.ts

@@ -0,0 +1,32 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('my-component', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<my-component></my-component>');
+    const element = await page.find('my-component');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('renders changes to the name data', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<my-component></my-component>');
+    const component = await page.find('my-component');
+    const element = await page.find('my-component >>> div');
+    expect(element.textContent).toEqual(`Hello, World! I'm `);
+
+    component.setProperty('first', 'James');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James`);
+
+    component.setProperty('last', 'Quincy');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James Quincy`);
+
+    component.setProperty('middle', 'Earl');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James Earl Quincy`);
+  });
+});

libs/pmt-calendar/src/components/calendar/calendar.scss

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+}
+
+.container {
+  padding: 1rem;
+  display: inline-flex;
+  justify-content: center;
+  width: 100vw;
+  pmt-calendar-header {
+    width: 100%;
+  }
+}

libs/pmt-calendar/src/components/calendar/calendar.spec.ts

@@ -0,0 +1,36 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { CalendarComponent } from './calendar';
+
+describe('my-component', () => {
+  it('renders', async () => {
+    const { root } = await newSpecPage({
+      components: [CalendarComponent],
+      html: '<pmt-calendar></pmt-calendar>',
+    });
+    expect(root).toEqualHtml(`
+      <pmt-calendar>
+        <mock:shadow-root>
+          <div>
+            Hello, World! I'm
+          </div>
+        </mock:shadow-root>
+      </pmt-calendar>
+    `);
+  });
+
+  it('renders with values', async () => {
+    const { root } = await newSpecPage({
+      components: [CalendarComponent],
+      html: `<pmt-calendar first="Stencil" last="'Don't call me a framework' JS"></pmt-calendar>`,
+    });
+    expect(root).toEqualHtml(`
+      <pmt-calendar first="Stencil" last="'Don't call me a framework' JS">
+        <mock:shadow-root>
+          <div>
+            Hello, World! I'm Stencil 'Don't call me a framework' JS
+          </div>
+        </mock:shadow-root>
+      </pmt-calendar>
+    `);
+  });
+});

libs/pmt-calendar/src/components/calendar/calendar.tsx

@@ -0,0 +1,20 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'pmt-calendar',
+  styleUrl: 'calendar.scss',
+  shadow: true,
+})
+export class CalendarComponent {
+
+  render() {
+    return (
+      <section class="container">
+        <div class="header">
+          <pmt-calendar-header></pmt-calendar-header>
+      </div>  
+      </section>
+
+    )
+  }
+}

libs/pmt-calendar/src/components/calendar/readme.md

@@ -0,0 +1,21 @@
+# my-component
+
+<!-- Auto Generated Below -->
+
+
+## Dependencies
+
+### Depends on
+
+- [pmt-calendar-header](../calendar-header)
+
+### Graph
+```mermaid
+graph TD;
+  pmt-calendar --> pmt-calendar-header
+  style pmt-calendar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

libs/pmt-calendar/src/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+
+    <script type="module" src="/build/pmt-calendar.esm.js"></script>
+    <script nomodule src="/build/pmt-calendar.js"></script>
+  </head>
+  <body>
+    <pmt-calendar
+      first="Stencil"
+      last="'Don't call me a framework' JS"
+    ></pmt-calendar>
+  </body>
+</html>

libs/pmt-calendar/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

libs/pmt-calendar/src/models/calendar.const.ts

@@ -0,0 +1,6 @@
+export const CALENDAR_VIEW = {
+    day: 'Day',
+    week: 'Week',
+    month: 'Month',
+    year: 'Year'
+}