@hotosm/ui 0.2.0-a7 → 0.2.0-a8

package/README.md

@@ -76,7 +76,7 @@ pnpm install @hotosm/ui
 // Import the components & styles (or add your own styling)
 <link
   rel="stylesheet"
-  href="https://s3.amazonaws.com/hotosm-ui/latest/theme/hot.css"
+  href="https://s3.amazonaws.com/hotosm-ui/latest/theme/styles.css"
 />
 <script
   type="module"
@@ -105,7 +105,7 @@ pnpm install @hotosm/ui
 
 ```js
 <script>
-  import '@hotosm/ui/theme/hot.css'
+  import '@hotosm/ui/theme/styles.css'
   import '@hotosm/ui/components/Button'
 </script>
 
@@ -193,3 +193,23 @@ const HomePage = ({}) => {
 
 export default HomePage;
 ```
+
+## Using Extra Shoelace Components
+
+The UI library is not comprehensive & you may wish to use additional components
+from Shoelace in your app.
+
+Ideally you should install the same version of @shoelace-style/shoelace as this
+library.
+
+To determine which version:
+
+- View the
+  [@hotosm/ui](https://www.npmjs.com/package/@hotosm/ui?activeTab=versions)
+  package on npmjs.com.
+- Select the version you are using.
+- Go to the `Code` tab, then open the `package.json` file.
+- The version of shoelace used should be in the `dependencies` section.
+
+If you are using a bundler, you must bundle the (icon) assets yourself,
+as described above.

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/index.d.ts

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

package/components/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/ui",
-  "version": "0.2.0a7",
+  "version": "0.2.0a8",
   "description": "Shared UI components with theming for use across HOTOSM tools.",
   "type": "module",
   "engines": {
@@ -35,6 +35,8 @@
   },
   "devDependencies": {
     "@lit/react": "^1.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@storybook/addon-essentials": "^7.6.5",
     "@storybook/addon-links": "^7.6.5",
     "@storybook/blocks": "^7.6.5",
@@ -42,6 +44,8 @@
     "@storybook/web-components-vite": "^7.6.19",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@unocss/postcss": "^0.58.5",
+    "@web/rollup-plugin-html": "^2.3.0",
+    "@web/rollup-plugin-import-meta-assets": "^2.2.1",
     "autoprefixer": "^10.4.16",
     "class-variance-authority": "0.7.0",
     "clsx": "2.0.0",
@@ -56,6 +60,10 @@
     "lit": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup": "^4.18.0",
+    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
+    "rollup-plugin-summary": "^2.0.1",
     "storybook": "^7.6.5",
     "typescript": "^5.2.2",
     "unocss": "^0.58.0",
@@ -66,6 +74,7 @@
     "react-dom": "Required for Storybook"
   },
   "files": [
+    "dist/**/*",
     "components/*.js",
     "components/*.d.ts",
     "react/*.js",
@@ -85,8 +94,10 @@
   },
   "homepage": "https://github.com/hotosm/ui#readme",
   "scripts": {
-    "dev": "pnpm run build && storybook dev -p 3001",
-    "build": "tsc",
+    "dev": "pnpm run compile && storybook dev -p 3001 --no-open",
+    "compile": "tsc",
+    "copy-shoelace-assets": "rm -rf dist/assets/icons && cp -r node_modules/@shoelace-style/shoelace/dist/assets dist/",
+    "build": "pnpm run compile && rollup --config && pnpm run copy-shoelace-assets",
     "build:docstrings": "wca analyze 'components/*.ts' --outDir 'docs/components' --format 'markdown'",
     "build:stories": "pnpm run build && storybook build --output-dir=docs/stories",
     "build:docs": "pnpm run build:docstrings && pnpm run build:stories",

package/react/Header.d.ts

@@ -0,0 +1,2 @@
+declare const reactWrapper: React.ForwardRefExoticComponent<any>;
+export default reactWrapper;

package/react/Header.js

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

package/react/index.d.ts

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

package/react/index.js

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