@hotosm/ui 0.2.0-b4 → 0.2.0-b5

package/components/toolbar/toolbar.js

@@ -1,121 +0,0 @@
-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/sl-custom.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 registerBundledIcons from '../../components/icons';
-registerBundledIcons();
-// 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("undo"));
-        };
-        this.redo = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("redo"));
-        };
-        this.bold = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("bold"));
-        };
-        this.italic = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("italic"));
-        };
-        this.underline = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("underline"));
-        };
-        this.alignLeft = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("leftalign"));
-        };
-        this.alignCenter = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("centeralign"));
-        };
-        this.alignRight = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("rightalign"));
-        };
-    }
-    // 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 library="bundled" 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/tracking.js

@@ -1,164 +0,0 @@
-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/sl-custom.css";
-import '@shoelace-style/shoelace/dist/components/alert/alert.js';
-import { LitElement, css, html } from "lit";
-import { property, state } from "lit/decorators.js";
-import registerBundledIcons from '../../components/icons';
-registerBundledIcons();
-export class Tracking extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.name = "hot-tracking";
-        /** The Matomo site id for tracking. */
-        this.siteId = "";
-        /** The domains to apply tracking. */
-        this.domain = "";
-        /** Force display the banner. */
-        this.force = false;
-        this.isOpen = true;
-    }
-    render() {
-        return html `<sl-alert
-      variant="danger"
-      ?open=${this.isOpen}
-    >
-    <sl-icon id="hot-red-text" library="bundled" slot="icon" name="info-circle"></sl-icon>
-
-    <p id="tracking-header">
-    About the information we collect
-    </p>
-
-    <p>
-    We use cookies and similar technologies to recognize and analyze your visits,
-    and measure traffic usage and activity. You can learn about how we use the data
-    about your visit or information you provide reading our
-      <a
-        style="color: #d63f3f;"
-        href="https://www.hotosm.org/privacy"
-        target="_blank"
-        rel="noopener noreferrer"
-      >privacy policy</a>.
-    By clicking "I Agree", you consent to the use of cookies.
-    </p>
-
-    <sl-button @click=${(e) => { this._setAgree(e); }}>I Agree</sl-button>
-    <sl-button @click=${(e) => { this._setDisagree(e); }}>I Do Not Agree</sl-button>
-    </sl-alert>`;
-    }
-    _setAgree(_e) {
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        const _paq = (window._paq = window._paq || []);
-        if (_paq.length === 0)
-            return;
-        _paq.push(['rememberConsentGiven']);
-        this.isOpen = false;
-        localStorage.setItem(`${this.siteId}-matomo-agree`, 'true');
-        this.dispatchEvent(new Event('agree', { bubbles: true, composed: true }));
-    }
-    _setDisagree(_e) {
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        const _paq = (window._paq = window._paq || []);
-        if (_paq.length === 0)
-            return;
-        _paq.push(['forgetConsentGiven']);
-        this.isOpen = false;
-        localStorage.setItem(`${this.siteId}-matomo-agree`, 'false');
-        this.dispatchEvent(new Event('disagree', { bubbles: true, composed: true }));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Close and halt execution if wrong domain
-        if (!this.force && window.location.hostname !== this.domain) {
-            console.warn(`Matomo init failed. ${window.location.hostname} does not match ${this.domain}.`);
-            this.isOpen = false;
-            return;
-        }
-        const matomoTrackingId = this.siteId;
-        // Close and halt execution if siteId or domain not set
-        if (!this.force && (matomoTrackingId.length === 0 || this.domain.length === 0)) {
-            console.warn('Matomo init failed. No site id or domains provided.');
-            this.isOpen = false;
-            return;
-        }
-        // Close and halt execution if already disagreed
-        const consent = localStorage.getItem(`${this.siteId}-matomo-agree`);
-        if (consent === 'false') {
-            this.isOpen = false;
-            return;
-        }
-        // Close prompt only if already agreed, continue
-        if (consent === 'true') {
-            this.isOpen = false;
-        }
-        console.log(`Setting Matomo tracking for site=${matomoTrackingId} domain=${this.domain}`);
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        const _paq = (window._paq = window._paq || []);
-        // tracker methods like "setCustomDimension" should be called before "trackPageView"
-        _paq.push(['requireConsent']);
-        _paq.push(['setDomains', [this.domain]]);
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']); // Tracks downloads
-        _paq.push(['trackVisibleContentImpressions']); // Tracks content
-        (function () {
-            const u = '//matomo.hotosm.org/';
-            _paq.push(['setTrackerUrl', u + 'matomo.php']);
-            _paq.push(['setSiteId', matomoTrackingId]);
-            const d = document;
-            const g = d.createElement('script');
-            const s = d.getElementsByTagName('script')[0];
-            if (s?.parentNode != null) {
-                g.async = true;
-                g.src = u + 'matomo.js';
-                s.parentNode.insertBefore(g, s);
-            }
-            else {
-                console.warn('Script insertion failed. Parent node is null.');
-            }
-        })();
-    }
-}
-Tracking.styles = [
-    css `
-      @unocss-placeholder;
-    `,
-    // Temp styles until UnoCSS setup
-    css `
-      #tracking-header {
-        font-weight: var(--sl-font-weight-bold);
-        font-size: var(--sl-font-size-large);
-        text-align: center;
-      }
-      sl-alert::part(base) {
-        position: absolute;
-        bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 1000;
-        width: 80vw;
-        text-align: center;
-      }
-    `
-];
-__decorate([
-    property()
-], Tracking.prototype, "name", void 0);
-__decorate([
-    property({ type: String, attribute: "site-id" })
-], Tracking.prototype, "siteId", void 0);
-__decorate([
-    property({ type: String })
-], Tracking.prototype, "domain", void 0);
-__decorate([
-    property({ type: Boolean })
-], Tracking.prototype, "force", void 0);
-__decorate([
-    state()
-], Tracking.prototype, "isOpen", void 0);
-export default Tracking;
-// Define web component
-customElements.define("hot-tracking", Tracking);

package/react/Header.js

@@ -1,14 +0,0 @@
-// @ts-ignore
-import * as React from 'react';
-import { createComponent } from '@lit/react';
-import Header from '../components/header/header';
-const reactWrapper = createComponent({
-    tagName: 'hot-header',
-    elementClass: Header,
-    react: React,
-    events: {
-        onLogin: 'login',
-    },
-    displayName: 'hot-header'
-});
-export default reactWrapper;

package/react/Toolbar.js

@@ -1,21 +0,0 @@
-// @ts-ignore
-import * as React from 'react';
-import { createComponent } from '@lit/react';
-import Toolbar from '../components/toolbar/toolbar';
-const reactWrapper = createComponent({
-    tagName: 'hot-toolbar',
-    elementClass: Toolbar,
-    react: React,
-    events: {
-        onUndoClick: 'undo',
-        onRedoClick: 'redo',
-        onBoldClick: 'bold',
-        onItalicClick: 'italic',
-        onUnderlineClick: 'underline',
-        onLeftalignClick: 'leftalign',
-        onCenteralignClick: 'centeralign',
-        onRightalignClick: 'rightalign',
-    },
-    displayName: 'hot-toolbar'
-});
-export default reactWrapper;

package/react/Tracking.js

@@ -1,15 +0,0 @@
-// @ts-ignore
-import * as React from 'react';
-import { createComponent } from '@lit/react';
-import Tracking from '../components/tracking/tracking';
-const reactWrapper = createComponent({
-    tagName: 'hot-tracking',
-    elementClass: Tracking,
-    react: React,
-    events: {
-        onAgree: 'agree',
-        onDisagree: 'disagree',
-    },
-    displayName: 'hot-tracking'
-});
-export default reactWrapper;

package/react/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Header } from './Header';
-export { default as Toolbar } from './Toolbar';
-export { default as Tracking } from './Tracking';

package/react/index.js

@@ -1,5 +0,0 @@
-// Index to import all components together
-// import '@hotosm/ui/react';
-export { default as Header } from './Header';
-export { default as Toolbar } from './Toolbar';
-export { default as Tracking } from './Tracking';

package/theme/sl-custom.css

@@ -1,74 +0,0 @@
-/* Custom theme for Shoelace components, using HOT CSS */
-
-@import './hot.css';
-/* https://github.com/shoelace-style/shoelace/blob/next/src/themes/light.css */
-@import '@shoelace-style/shoelace/dist/themes/light.css';
-/* @import '@shoelace-style/shoelace/dist/themes/dark.css'; */
-/* https://shoelace.style/getting-started/themes#detecting-the-users-color-scheme-preference */
-
-@unocss preflights;
-@unocss default;
-
-:root,
-:host,
-.sl-theme-light {
-  --sl-color-primary-50: var(--hot-red-50);
-  --sl-color-primary-100: var(--hot-red-100);
-  --sl-color-primary-200: var(--hot-red-200);
-  --sl-color-primary-300: var(--hot-red-300);
-  --sl-color-primary-400: var(--hot-red-400);
-  --sl-color-primary-500: var(--hot-red-500);
-  --sl-color-primary-600: var(--hot-red-600);
-  --sl-color-primary-700: var(--hot-red-700);
-  --sl-color-primary-800: var(--hot-red-800);
-  --sl-color-primary-900: var(--hot-red-900);
-  --sl-color-primary-950: var(--hot-red-900);
-
-  --sl-color-danger-50: var(--hot-darkred-50);
-  --sl-color-danger-100: var(--hot-darkred-100);
-  --sl-color-danger-200: var(--hot-darkred-200);
-  --sl-color-danger-300: var(--hot-darkred-300);
-  --sl-color-danger-400: var(--hot-darkred-400);
-  --sl-color-danger-500: var(--hot-darkred-500);
-  --sl-color-danger-600: var(--hot-darkred-600);
-  --sl-color-danger-700: var(--hot-darkred-700);
-  --sl-color-danger-800: var(--hot-darkred-800);
-  --sl-color-danger-900: var(--hot-darkred-900);
-  --sl-color-danger-950: var(--hot-darkred-900);
-
-  --sl-color-neutral-50: var(--hot-gray-50);
-  --sl-color-neutral-100: var(--hot-gray-100);
-  --sl-color-neutral-200: var(--hot-gray-200);
-  --sl-color-neutral-300: var(--hot-gray-300);
-  --sl-color-neutral-400: var(--hot-gray-400);
-  --sl-color-neutral-500: var(--hot-gray-500);
-  --sl-color-neutral-600: var(--hot-gray-600);
-  --sl-color-neutral-700: var(--hot-gray-700);
-  --sl-color-neutral-800: var(--hot-gray-800);
-  --sl-color-neutral-900: var(--hot-gray-900);
-  --sl-color-neutral-950: var(--hot-gray-900);
-
-  --sl-color-success-50: var(--hot-green-50);
-  --sl-color-success-100: var(--hot-green-100);
-  --sl-color-success-200: var(--hot-green-200);
-  --sl-color-success-300: var(--hot-green-300);
-  --sl-color-success-400: var(--hot-green-400);
-  --sl-color-success-500: var(--hot-green-500);
-  --sl-color-success-600: var(--hot-green-600);
-  --sl-color-success-700: var(--hot-green-700);
-  --sl-color-success-800: var(--hot-green-800);
-  --sl-color-success-900: var(--hot-green-900);
-  --sl-color-success-950: var(--hot-green-900);
-
-  --sl-color-warning-50: var(--hot-yellow-50);
-  --sl-color-warning-100: var(--hot-yellow-100);
-  --sl-color-warning-200: var(--hot-yellow-200);
-  --sl-color-warning-300: var(--hot-yellow-300);
-  --sl-color-warning-400: var(--hot-yellow-400);
-  --sl-color-warning-500: var(--hot-yellow-500);
-  --sl-color-warning-600: var(--hot-yellow-600);
-  --sl-color-warning-700: var(--hot-yellow-700);
-  --sl-color-warning-800: var(--hot-yellow-800);
-  --sl-color-warning-900: var(--hot-yellow-900);
-  --sl-color-warning-950: var(--hot-yellow-900);
-}