@hotosm/ui 0.2.0-a1 → 0.2.0-a11

package/README.md

@@ -9,7 +9,7 @@
 </p>
 <p align="center">
   <a href="https://github.com/hotosm/ui/actions/workflows/publish.yml" target="_blank">
-      <img src="https://github.com/hotosm/ui/actions/workflows/publish.yml/badge.svg" alt="Publish">
+      <img src="https://github.com/hotosm/ui/actions/workflows/publish.yml/badge.svg?event=release" alt="Publish">
   </a>
   <a href="https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml" target="_blank">
       <img src="https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml/badge.svg?branch=main" alt="CDN Deploy">
@@ -47,69 +47,34 @@ currently written in **Lit**, using TypeScript.
 
 ## Install
 
-Via NPM:
+### Via NPM
 
-```bash
-npm install @hotosm/ui
+- Install package `@hotosm/ui` as a dependency in your `package.json`.
+- Import the components and styles.
 
-yarn add @hotosm/ui
+```html
+<script>
+  import '@hotosm/ui/dist/styles.css';
+  import Toolbar from '@hotosm/ui/dist/components.js';
+</script>
 
-pnpm install @hotosm/ui
+// Use the components in your templates
+<hot-button disabled> </hot-button>
 ```
 
-## Usage
-
-### HTML / HTMX
+### Via CDN
 
 ```html
-// Import the components
-<script
-  type="module"
-  src="https://s3.amazonaws.com/hotosm-ui/latest/ui.js"
-></script>
-
-// Import the styles (or create your own)
 <link
   rel="stylesheet"
-  href="https://s3.amazonaws.com/hotosm-ui/latest/style.css"
+  href="https://cdn.jsdelivr.net/npm/@hotosm/ui@latest/dist/styles.css"
 />
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@hotosm/ui@latest/dist/components.js"
+></script>
 
-<div>
-  <hot-button disabled> </hot-button>
-</div>
+<hot-button disabled> </hot-button>
 ```
 
 See the docs for more [usage examples](https://hotosm.github.io/ui/usage/).
-
-> core.js will contain the minimal low level components.
->
-> extra.js will contain additional wrapper components.
->
-> There should be versioning of the components, plus a /latest/ version too.
-
-### React
-
-Install your required version with a pin, or latest:
-
-```bash
-pnpm install @hotosm/ui
-```
-
-```js
-import { hot-button } from '@hotosm/ui';
-
-const HomePage = ({}) => {
-  return (
-    <div className="your-css-classes">
-      <div
-        ...
-      >
-        <hot-button disabled>
-        </hot-button>
-      </div>
-    </div>
-  );
-};
-
-export default HomePage;
-```

package/components/Button.d.ts

@@ -0,0 +1,16 @@
+import "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import { LitElement } from "lit";
+export declare class Button extends LitElement {
+    name: string;
+    /** Disable the button, greyed out, not clickable. */
+    disabled: boolean;
+    /** CVA button type. */
+    variant: "primary" | "secondary";
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1>;
+    private _handleClick;
+}
+export default Button;

package/components/Button.js

@@ -0,0 +1,75 @@
+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 "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+const buttonStyle = cva("bg-primary text-white py-3 px-6 rounded leading-[1.15]", {
+    variants: {
+        variant: {
+            primary: "bg-primary border-2 border-primary text-white",
+            secondary: `
+          bg-white border-2 border-primary text-primary! hover:bg-lightGray
+          focus:bg-transparent focus:border-primary
+        `,
+        },
+        disabled: {
+            true: "opacity-50 cursor-not-allowed",
+            false: "",
+        },
+    },
+});
+export class Button extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "hot-button";
+        /** Disable the button, greyed out, not clickable. */
+        this.disabled = false;
+        /** CVA button type. */
+        this.variant = "primary";
+    }
+    render() {
+        return html `<sl-button
+      class=${buttonStyle({
+            variant: this.variant,
+            disabled: this.disabled,
+        })}
+      ?disabled=${this.disabled}
+      @click=${(e) => {
+            this._handleClick(e);
+        }}
+    >
+      <slot></slot>
+    </sl-button>`;
+    }
+    _handleClick(e) {
+        // As the original event is also named 'click'
+        // stop propagation of the original event
+        e.stopPropagation();
+        this.dispatchEvent(new Event("click"));
+    }
+}
+Button.styles = [
+    css `
+      @unocss-placeholder;
+    `,
+];
+__decorate([
+    property()
+], Button.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "variant", void 0);
+export default Button;
+// Define web component
+customElements.define("hot-button", Button);

package/components/Header.d.ts

@@ -0,0 +1,16 @@
+import "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import { LitElement } from "lit";
+export declare class Header extends LitElement {
+    name: string;
+    title: string;
+    logo: string | URL;
+    drawer: boolean;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1>;
+}
+export default Header;

package/components/Header.js

@@ -0,0 +1,150 @@
+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 "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+const hotLogo = new URL('../theme/logo.png', import.meta.url);
+// import { cva } from "class-variance-authority";
+// const headerStyle = cva(
+//   "some-css-var",
+//   {
+//     variants: {
+//       someProperty: {
+//         true: "some-css-var",
+//         false: "some-css-var",
+//       },
+//     },
+//   },
+// );
+export class Header extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "hot-header";
+        this.title = '';
+        this.logo = hotLogo;
+        this.drawer = true;
+    }
+    // class=${headerStyle({
+    //   someProperty: this.someProperty,
+    // })}
+    render() {
+        const logoSrc = typeof this.logo === 'string' || this.logo instanceof URL ? (typeof this.logo === 'string' ? this.logo : this.logo.href) : '';
+        return html `
+    <header>
+
+      ${(logoSrc.length > 0) ? html `
+        <div id="logo-block">
+          <img id="logo" src="${this.logo}" alt="Logo">
+        </div>
+      ` : null}
+
+      ${(this.title.length > 0) ? html `
+        <h1>${this.title}</h1>
+      ` : null}
+
+      <sl-tab-group>
+        <sl-tab slot="nav" panel="projects">Explore Projects</sl-tab>
+        <sl-tab slot="nav" panel="organisations">Manage Organizations</sl-tab>
+      </sl-tab-group>
+
+      ${this.drawer ? html `
+        <div id="drawer-block" style="font-size: 32px;">
+          <sl-icon-button name="list" label="drawer-open"></sl-icon-button>
+        </div>
+      ` : null}
+
+    </header>
+    `;
+    }
+}
+Header.styles = [
+    css `
+      @unocss-placeholder;
+    `,
+    // unsafeCSS(reset),
+    css `
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: var(--app-color-primary);
+        color: white;
+        padding: 12px;
+        padding-top: 4px;
+
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: 50px;
+        width: 100%;
+        -webkit-app-region: drag;
+      }
+
+      header h1 {
+        margin-top: 0;
+        margin-bottom: 0;
+        font-size: 12px;
+        font-weight: bold;
+      }
+
+      nav a {
+        margin-left: 10px;
+      }
+
+      #logo-block {
+        height: 40px;
+        max-width: 50%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+      }
+
+      #logo {
+        height: 100%;
+        width: 100%
+      }
+
+      #drawer-block {
+        display: flex;
+        justify-content: space-between;
+        align-items: right;
+        gap: 8px;
+        padding-right: 30px;
+      }
+
+      @media(prefers-color-scheme: light) {
+        header {
+          color: black;
+        }
+
+        nav a {
+          color: initial;
+        }
+      }
+    `
+];
+__decorate([
+    property()
+], Header.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], Header.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], Header.prototype, "logo", void 0);
+__decorate([
+    property({ type: Boolean })
+], Header.prototype, "drawer", void 0);
+export default Header;
+// Define web component
+customElements.define("hot-header", Header);

package/components/Toolbar.d.ts

@@ -0,0 +1,26 @@
+import "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import { LitElement } from "lit";
+export declare class Toolbar extends LitElement {
+    name: string;
+    /** Change the position of the tooltips relative to buttons. */
+    tooltipPosition: string;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1>;
+    private renderButtonGroup;
+    private renderButton;
+    private readonly undo;
+    private readonly redo;
+    private readonly bold;
+    private readonly italic;
+    private readonly underline;
+    private readonly alignLeft;
+    private readonly alignCenter;
+    private readonly alignRight;
+}
+export default Toolbar;

package/components/Toolbar.js

@@ -0,0 +1,121 @@
+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 "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+// import { cva } from "class-variance-authority";
+// const toolbarStyle = cva(
+//   "some-css-var",
+//   {
+//     variants: {
+//       someProperty: {
+//         true: "some-css-var",
+//         false: "some-css-var",
+//       },
+//     },
+//   },
+// );
+export class Toolbar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "hot-toolbar";
+        /** Change the position of the tooltips relative to buttons. */
+        this.tooltipPosition = "top";
+        this.undo = (e) => {
+            // As the original event is also named 'click'
+            // stop propagation of the original event
+            e.stopPropagation();
+            this.dispatchEvent(new Event("hot-undo-click"));
+        };
+        this.redo = (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new Event("hot-redo-click"));
+        };
+        this.bold = (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new Event("hot-bold-click"));
+        };
+        this.italic = (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new Event("hot-italic-click"));
+        };
+        this.underline = (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new Event("hot-underline-click"));
+        };
+        this.alignLeft = (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new Event("hot-leftalign-click"));
+        };
+        this.alignCenter = (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new Event("hot-centeralign-click"));
+        };
+        this.alignRight = (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new Event("hot-rightalign-click"));
+        };
+    }
+    // class=${toolbarStyle({
+    //   someProperty: this.someProperty,
+    // })}
+    render() {
+        return html `
+      <div class="button-group-toolbar">
+        ${this.renderButtonGroup('History', [
+            { content: 'Undo', icon: 'arrow-counterclockwise', label: 'Undo', action: this.undo },
+            { content: 'Redo', icon: 'arrow-clockwise', label: 'Redo', action: this.redo }
+        ])}
+        ${this.renderButtonGroup('Formatting', [
+            { content: 'Bold', icon: 'type-bold', label: 'Bold', action: this.bold },
+            { content: 'Italic', icon: 'type-italic', label: 'Italic', action: this.italic },
+            { content: 'Underline', icon: 'type-underline', label: 'Underline', action: this.underline }
+        ])}
+        ${this.renderButtonGroup('Alignment', [
+            { content: 'Align Left', icon: 'justify-left', label: 'Align Left', action: this.alignLeft },
+            { content: 'Align Center', icon: 'justify', label: 'Align Center', action: this.alignCenter },
+            { content: 'Align Right', icon: 'justify-right', label: 'Align Right', action: this.alignRight }
+        ])}
+      </div>
+    `;
+    }
+    renderButtonGroup(label, buttons) {
+        return html `
+      <sl-button-group label=${label}>
+        ${buttons.map(button => this.renderButton(button))}
+      </sl-button-group>
+    `;
+    }
+    renderButton({ content, icon, label, action }) {
+        return html `
+      <sl-tooltip content=${content} placement="${this.tooltipPosition}">
+        <sl-button @click=${action ?? (() => { })}><sl-icon name=${icon} label=${label}></sl-icon></sl-button>
+      </sl-tooltip>
+    `;
+    }
+}
+Toolbar.styles = [
+    css `
+      @unocss-placeholder;
+    `,
+    // unsafeCSS(reset),
+];
+__decorate([
+    property()
+], Toolbar.prototype, "name", void 0);
+__decorate([
+    property({ type: String, attribute: "tooltip-position" })
+], Toolbar.prototype, "tooltipPosition", void 0);
+export default Toolbar;
+// Define web component
+customElements.define("hot-toolbar", Toolbar);

package/components/Tracking.d.ts

@@ -0,0 +1,25 @@
+import "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/alert/alert.js';
+import { LitElement } from "lit";
+declare global {
+    interface Window {
+        _paq: any[];
+    }
+}
+export declare class Tracking extends LitElement {
+    name: string;
+    /** The Matomo site id for tracking. */
+    siteId: string;
+    /** The domains to apply tracking. */
+    domain: string;
+    isOpen: boolean;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1>;
+    private _closeAlert;
+    private _setAgree;
+    private _setDisagree;
+    connectedCallback(): void;
+}
+export default Tracking;