@pb33f/cowboy-components 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,9 @@
+# cowboy-components
+
+Used by [pb33f](https://pb33f.io) to user interface components.
+
+If you're not [pb33f](https://pb33f.io), you probably don't want to use this.
+
+Thanks for stopping by though!
+
+Bye. 

package/dist/components/attention-box/attention-box.css.js

@@ -0,0 +1,73 @@
+import { css } from "lit";
+export default css `
+
+    .attention {
+        margin-top: var(--global-space);
+        margin-bottom: var(--global-space);
+        border-top: none;
+        border-right: none;
+        border-bottom: none;
+        border-left: 3px solid;
+    }
+
+    .error {
+        color: var(--error-font-color);
+        border-color: var(--error-color);
+        border-left: 5px solid var(--error-color);
+        animation-name: errorGlow;
+        animation-duration: 1.2s;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+    }
+
+    .context {
+        border-left: 5px solid var(--font-color-sub1);
+    }
+    
+    .info {
+        color: var(--primary-color);
+        border-color: var(--primary-color-lowalpha);
+        border-left: 5px solid var(--primary-color);
+    }
+    
+
+    .success {
+        color: var(--terminal-text);
+        border-color: var(--terminal-text);
+        border-left: 5px solid var(--terminal-text);
+    }
+
+
+    .warning {
+        color: var(--warn-300);
+        border-color: var(--warn-200);
+        border-left: 5px solid var(--warn-200);
+        animation-name: warningGlow;
+        animation-duration: 2s;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+    }
+    
+    @keyframes errorGlow {
+        from {
+            box-shadow: 0 0 1px var(--error-color-lowalpha);
+            border-color: var(--error-color-verylowalpha);
+         
+        }
+        to {
+            border-color: var(--error-color);
+            box-shadow: 0 0 8px var(--error-color);
+        }
+    }
+
+    @keyframes warningGlow {
+        from {
+            box-shadow: 0 0 1px var(--warn-300-lowalpha);
+            border-color: var(--warn-200-lowalpha);
+        }
+        to {
+            border-color: var(--warn-300);
+            box-shadow: 0 0 8px var(--warn-200);
+        }
+    }
+`;

package/dist/components/attention-box/attention-box.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare enum AttentionType {
+    Context = "context",
+    Info = "info",
+    Success = "success",
+    Warning = "warning",
+    Error = "error",
+    Danger = "danger"
+}
+export declare class AttentionBox extends LitElement {
+    static styles: import("lit").CSSResult[];
+    type: AttentionType;
+    headerText: string;
+    getIcon(): "braces-asterisk" | "info-square" | "exclamation-triangle" | "exclamation-square" | "check-square";
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/attention-box/attention-box.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import attentionBoxCss from "./attention-box.css";
+import alertsCss from "../../css/alerts.css";
+export var AttentionType;
+(function (AttentionType) {
+    AttentionType["Context"] = "context";
+    AttentionType["Info"] = "info";
+    AttentionType["Success"] = "success";
+    AttentionType["Warning"] = "warning";
+    AttentionType["Error"] = "error";
+    AttentionType["Danger"] = "danger";
+})(AttentionType || (AttentionType = {}));
+let AttentionBox = class AttentionBox extends LitElement {
+    getIcon() {
+        switch (this.type) {
+            case AttentionType.Context:
+                return 'braces-asterisk';
+            case AttentionType.Info:
+                return 'info-square';
+            case AttentionType.Warning:
+                return 'exclamation-triangle';
+            case AttentionType.Error:
+                return 'exclamation-square';
+            case AttentionType.Danger:
+                return 'exclamation-square';
+            case AttentionType.Success:
+                return 'check-square';
+        }
+    }
+    render() {
+        if (!this.type) {
+            this.type = AttentionType.Context;
+        }
+        if (this.type === AttentionType.Danger) {
+            this.type = AttentionType.Error;
+        }
+        return html `
+            <div class='attention ${this.type}'>
+                <sl-alert class="${this.type}" open>
+                    <sl-icon slot="icon" name="${this.getIcon()}"></sl-icon>
+                    <strong>${this.headerText}</strong>
+                    <slot></slot>
+                </sl-alert>
+            </div>
+        `;
+    }
+};
+AttentionBox.styles = [alertsCss, attentionBoxCss];
+__decorate([
+    property()
+], AttentionBox.prototype, "type", void 0);
+__decorate([
+    property()
+], AttentionBox.prototype, "headerText", void 0);
+AttentionBox = __decorate([
+    customElement('pb33f-attention-box')
+], AttentionBox);
+export { AttentionBox };

package/dist/components/changelog/changelog.css.js

@@ -0,0 +1,95 @@
+import { css } from "lit";
+export default css `
+
+    .summary {
+        font-size: 1.1rem;
+        font-family: var(--font-stack-bold), monospace;
+        color: var(--primary-color);
+    }
+
+    p > code, pre {
+        font-family: var(--font-stack), monospace;
+        border: 1px solid var(--secondary-color-lowalpha);
+        color: var(--secondary-color);
+        border-radius: 0;
+        padding: -1px;
+        background-color: var(--secondary-color-very-lowalpha);
+        vertical-align: top;
+    }
+    
+    p > img {
+        max-width: 800px;
+    }
+    
+    .major {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+    }
+
+    .major-icon {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+    }
+
+    h1, h2, h3, h4, h5, h6, strong, b {
+        font-family: var(--font-stack-bold), monospace;
+        font-weight: normal;
+    }
+    
+    i {
+        font-family: var(--font-stack-italic), monospace;
+    }
+
+    em {
+        font-family: var(--font-stack-bolditalic), monospace;
+    }
+    
+    ul {
+        padding-left: 20px;
+    }
+
+    ul > li {
+        font-family: var(--font-stack), monospace;
+        font-weight: normal;
+        list-style-type:  none;
+        line-height: 1.8em;
+    }
+
+    ul > li code {
+        font-family: var(--font-stack), monospace;
+        border: 1px solid var(--secondary-color-lowalpha);
+        color: var(--secondary-color);
+        border-radius: 0;
+        padding: 0 5px 1px 5px;
+        background-color: var(--secondary-color-very-lowalpha);
+        vertical-align: top;
+    }
+
+    ul > li:before {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+        margin-right: 10px;
+        content: ">"
+    }
+
+    ul > li > ul > li:before {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+        margin-right: 10px;
+        content: "-"
+    }
+    ul > li > ul > li> ul > li:before {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+        margin-right: 10px;
+        content: "*"
+    }
+    
+
+    @media only screen and (max-width: 1000px) {
+       .major-icon {
+           display: none;
+       }
+    }
+
+`;

package/dist/components/changelog/changelog.d.ts

@@ -0,0 +1,12 @@
+import { LitElement, TemplateResult } from "lit";
+export declare class ChangelogComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    apiURL: string;
+    project: string;
+    summaries: ReleaseSummary[];
+    private error;
+    constructor();
+    connectedCallback(): void;
+    fetchChangelogSummary(): Promise<any>;
+    render(): TemplateResult<1>;
+}

package/dist/components/changelog/changelog.js

@@ -0,0 +1,125 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property, state } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { marked } from "marked";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import changelogCss from "./changelog.css";
+import sharedCss from "../../css/shared.css";
+import alertsCss from "../../css/alerts.css";
+let ChangelogComponent = class ChangelogComponent extends LitElement {
+    constructor() {
+        super();
+        this.apiURL = 'https://api.pb33f.io/release-notes/';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchChangelogSummary()
+            .then((summaries) => {
+            this.summaries = summaries;
+        })
+            .catch((err) => {
+            this.error = err;
+        });
+    }
+    async fetchChangelogSummary() {
+        const response = await fetch(`${this.apiURL}/${this.project}`);
+        if (!response.ok) {
+            return Promise.reject(`HTTP Error ${response.status}`);
+        }
+        return response.json();
+    }
+    render() {
+        if (this.error) {
+            return html `
+                <pb33f-attention-box headerText="unable to fetch changelog" type="error">
+                    ${this.error}
+                </pb33f-attention-box>
+            `;
+        }
+        if (this.project && this.summaries?.length > 0) {
+            // const extractMinorVersion = (version: string): number =>
+            //     parseInt(version.split('.')[1])
+            const extractPatchVersion = (version) => parseInt(version.split('.')[2]);
+            const items = [];
+            for (let i = 0; i < this.summaries?.length; i++) {
+                const summary = this.summaries[i];
+                let patchVersion = extractPatchVersion(summary.tag_name);
+                let icon = html ``;
+                let milestone = false;
+                if (patchVersion == 0) {
+                    milestone = true;
+                    icon = html `
+                        <sl-icon name="braces-asterisk" class="major-icon"></sl-icon>`;
+                }
+                const parsed = marked.parse(summary.body).toString();
+                let latest = false;
+                if (i == 0) {
+                    latest = true;
+                }
+                console.log(Date.parse(summary.published_at));
+                console.log(new Date(summary.published_at));
+                items.push(html `
+                    <pb33f-timeline-item>
+                        <span slot="icon">${icon}</span>
+                        <span slot="time" class="${milestone ? `major` : null}">${summary.publish_date}</span>
+                        <div slot="content">
+                            <pb33f-release
+                                    .latest="${latest}"
+                                    .milestone="${milestone}"
+                                    name="${summary.name}"
+                                    published="${summary.published_at}"
+                                    link="${summary.html_url}"
+                                    author="${summary.author}"
+                                    tarball="${summary.tarball_url}"
+                                    authorLink="${summary.author_url}"
+                                    authorImage="${summary.author_image}">
+                                ${unsafeHTML(parsed)}
+                            </pb33f-release>
+                        </div>
+                    </pb33f-timeline-item>`);
+            }
+            return html `
+                <pb33f-timeline>
+                    ${items.map((item) => {
+                return item;
+            })}
+                </pb33f-timeline>
+            `;
+        }
+        else {
+            return html `
+                <pb33f-timeline>
+                    <pb33f-timeline-item>
+                        <div slot="content">
+                            <div class="pb33f-loader">
+                                <div class="spin"></div>
+                                fetching changelog for <em>${this.project}</em></div>
+                        </div>
+                    </pb33f-timeline-item>
+                </pb33f-timeline>
+            `;
+        }
+    }
+};
+ChangelogComponent.styles = [sharedCss, alertsCss, changelogCss];
+__decorate([
+    property()
+], ChangelogComponent.prototype, "apiURL", void 0);
+__decorate([
+    property()
+], ChangelogComponent.prototype, "project", void 0);
+__decorate([
+    state()
+], ChangelogComponent.prototype, "summaries", void 0);
+__decorate([
+    state()
+], ChangelogComponent.prototype, "error", void 0);
+ChangelogComponent = __decorate([
+    customElement('pb33f-changelog')
+], ChangelogComponent);
+export { ChangelogComponent };

package/dist/components/changelog/model.d.ts

@@ -0,0 +1,68 @@
+interface Asset {
+    id: number;
+    url: string;
+    name: string;
+    label: string;
+    state: string;
+    content_type: string;
+    size: number;
+    download_count: number;
+    created_at: string;
+    updated_at: string;
+    browser_download_url: string;
+    uploader: Uploader;
+    node_id: string;
+}
+interface Uploader {
+    login: string;
+    id: number;
+    node_id: string;
+    avatar_url: string;
+    html_url: string;
+    gravatar_id: string;
+    type: string;
+    site_admin: boolean;
+    url: string;
+    events_url: string;
+    following_url: string;
+    followers_url: string;
+    gists_url: string;
+    organizations_url: string;
+    received_events_url: string;
+    repos_url: string;
+    starred_url: string;
+    subscriptions_url: string;
+}
+interface Release {
+    tag_name: string;
+    target_commitish: string;
+    name: string;
+    body: string;
+    draft: boolean;
+    prerelease: boolean;
+    id: number;
+    created_at: string;
+    published_at: string;
+    url: string;
+    html_url: string;
+    assets_url: string;
+    assets: Asset[];
+    upload_url: string;
+    zipball_url: string;
+    tarball_url: string;
+    author: Uploader;
+    node_id: string;
+}
+interface ReleaseSummary {
+    id: number;
+    name: string;
+    tag_name: string;
+    published_at: string;
+    publish_date: string;
+    html_url: string;
+    body: string;
+    tarball_url: string;
+    author: string;
+    author_url: string;
+    author_image: string;
+}

package/dist/components/changelog/model.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/changelog/release.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/changelog/release.css.js

@@ -0,0 +1,66 @@
+import { css } from "lit";
+export default css `
+
+    .summary {
+        font-size: 1.1rem;
+        font-family: var(--font-stack-bold), monospace;
+        color: var(--secondary-color);
+    }
+    
+    sl-details::part(header) {
+        padding-top: 12px;
+        height: 15px;
+    }
+
+    sl-details::part(base) {
+        border: 1px dashed var(--bars-and-borders-dim);
+        margin-bottom: var(--global-space);
+        background-color: var(--background-color);
+        border-radius: 0;
+    }
+
+    sl-details::part(content) {
+        font-size: 0.9rem;
+        padding: 0 0 0 var(--global-space);
+        margin:0;
+        overflow-x: auto;
+        max-width: 800px;
+        padding-bottom: var(--global-space)
+    }
+    
+    .published {
+        color: var(--font-color-sub1);
+    }
+    hr {
+        margin-top: 0;
+        border-top: 1px dashed var(--bars-and-borders);
+        height: 1px;
+        margin-bottom: var(--global-space);
+    }
+    
+    .github_link {
+        display: block;
+        margin-bottom: var(--global-space)
+    }
+    
+    .milestone {
+        color: var(--primary-color);
+        text-shadow:  0 0 10px var(--primary-text-shadow)
+    }
+
+    .latest {
+        color: var(--terminal-text);
+        text-shadow:  0 0 1rem var(--terminal-text-shadow);
+        font-size: 1.2rem;
+    }
+
+    html[theme="light"] .latest {
+        text-shadow:  none;
+    }
+
+  
+;
+
+
+
+`;

package/dist/components/changelog/release.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from "lit";
+export declare class ReleaseComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    name: string;
+    body: string;
+    published: string;
+    link: string;
+    author: string;
+    authorLink: string;
+    authorImage: string;
+    tarball: string;
+    milestone: boolean;
+    latest: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/changelog/release.js

@@ -0,0 +1,96 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { KVViewComponent } from "../kv-view/kv-view";
+import releaseCss from "./release.css";
+import sharedCss from "../../css/shared.css";
+let ReleaseComponent = class ReleaseComponent extends LitElement {
+    constructor() {
+        super();
+    }
+    render() {
+        const kv = new Map();
+        if (this.link) {
+            kv.set('Release ', `<a href="${this.link}">${this.link}</a>`);
+        }
+        if (this.author && this.authorImage) {
+            let name = this.author;
+            if (this.author == 'daveshanley') {
+                name = 'quobix';
+            }
+            kv.set('Author', `<sl-avatar image="${this.authorImage}" label="Avatar of ${name}"></sl-avatar>
+<a href="${this.authorLink}">${name}</a>`);
+        }
+        if (this.author && !this.authorImage) {
+            let name = this.author;
+            if (this.author == 'daveshanley') {
+                name = 'quobix';
+            }
+            kv.set('Author', `<a href="${this.authorLink}">${name}</a>`);
+        }
+        if (this.tarball) {
+            kv.set('Tarball', `<a href="${this.tarball}">${this.tarball}</a>`);
+        }
+        const kvView = new KVViewComponent();
+        kvView.data = kv;
+        kvView.keyLabel = "";
+        kvView.valueLabel = "";
+        return html `
+            <sl-details>
+                <span class="summary ${this.milestone ? 'milestone' : ''} ${this.latest ? 'latest' : ''}" slot="summary">
+                    ${this.name}<slot name="name"></slot> 
+                    ${this.latest ? '(latest)' : ''}
+                </span>
+                <hr/>
+                <p class="published">Published: ${this.published}
+                    <slot name="published"></slot>
+                </p>
+                ${unsafeHTML(this.body)}
+                <slot></slot>
+                <hr/>
+                ${kvView}
+            </sl-details>
+        `;
+    }
+};
+ReleaseComponent.styles = [sharedCss, releaseCss];
+__decorate([
+    property()
+], ReleaseComponent.prototype, "name", void 0);
+__decorate([
+    property()
+], ReleaseComponent.prototype, "body", void 0);
+__decorate([
+    property()
+], ReleaseComponent.prototype, "published", void 0);
+__decorate([
+    property()
+], ReleaseComponent.prototype, "link", void 0);
+__decorate([
+    property()
+], ReleaseComponent.prototype, "author", void 0);
+__decorate([
+    property()
+], ReleaseComponent.prototype, "authorLink", void 0);
+__decorate([
+    property()
+], ReleaseComponent.prototype, "authorImage", void 0);
+__decorate([
+    property()
+], ReleaseComponent.prototype, "tarball", void 0);
+__decorate([
+    property({ type: Boolean })
+], ReleaseComponent.prototype, "milestone", void 0);
+__decorate([
+    property({ type: Boolean })
+], ReleaseComponent.prototype, "latest", void 0);
+ReleaseComponent = __decorate([
+    customElement('pb33f-release')
+], ReleaseComponent);
+export { ReleaseComponent };