@hotosm/ui 0.2.0-a6 → 0.2.0-a8

package/README.md

@@ -59,35 +59,43 @@ pnpm install @hotosm/ui
 
 ## Usage
 
-### HTML / HTMX
+### CDN (HTML / HTMX)
 
 ```html
-// Import the components
+// Import Shoelace dependency
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@shoelace-style
+  /shoelace@2.15.1/cdn/themes/light.css" />
 <script
   type="module"
-  src="https://s3.amazonaws.com/hotosm-ui/latest/components/Button.js"
+  src="https://cdn.jsdelivr.net/npm/@shoelace-style/
+  shoelace@2.15.1/cdn/shoelace-autoloader.js"
 ></script>
 
-// Import the styles (or create your own)
+// 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"
+  src="https://s3.amazonaws.com/hotosm-ui/latest/components/Button.js"
+></script>
 
 <div>
   <hot-button disabled> </hot-button>
 </div>
 ```
 
+> Using the Shoelace autoloader will lazy load only the components you use.
+
 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.
+> Components are versioned under subdirectories, with /latest/ tracking the
+> `main` branch, plus versioned releases.
 
-### React
+### ES6 Imports (most frameworks)
 
 Install your required version with a pin, or latest:
 
@@ -96,7 +104,80 @@ pnpm install @hotosm/ui
 ```
 
 ```js
-import '@hotosm/ui/components/Button'
+<script>
+  import '@hotosm/ui/theme/styles.css'
+  import '@hotosm/ui/components/Button'
+</script>
+
+<hot-button disabled></hot-button>
+```
+
+> Note that web components must always have a closing tag.
+
+#### Importing Icons
+
+The icon pack for Shoelace must be imported to display in components.
+
+There are two options:
+
+##### 1. CDN Assets
+
+Just add the Shoelace icons via CDN in your HTML file:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style
+/shoelace@2.15.1/cdn/themes/light.css" />
+
+// Or dark
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style
+/shoelace@2.15.1/cdn/themes/dark.css" />
+```
+
+##### 2. Bundle Assets Yourself
+
+- Add Shoelace as a `peerDependency` and to your `package.json`:
+
+    ```json
+      "peerDependencies": {
+        "@shoelace-style/shoelace": "^2.15.1"
+      }
+    ```
+
+- Also add `vite-plugin-static-copy` as a devDependency:
+    `pnpm install -D vite-plugin-static-copy`
+- Add to your `vite.config.ts`:
+
+    ```js
+    import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+    export default defineConfig({
+      plugins: [
+        viteStaticCopy({
+          targets: [
+            {
+            src: 'node_modules/@shoelace-style/shoelace/dist/assets',
+            dest: ''
+            }
+          ]
+        }),
+      ],
+    ```
+
+- Now the Shoelace assets will be bundled with your dist, under `/shoelace`.
+
+#### React
+
+Versions of React below v19 require a specific 'wrapper' component to use the
+web components.
+
+Use these instead of the standard `@hotosm/ui/components/xxx`:
+
+```bash
+pnpm install @hotosm/ui
+```
+
+```js
+import { Button } from '@hotosm/ui/react/Button'
 
 const HomePage = ({}) => {
   return (
@@ -104,8 +185,7 @@ const HomePage = ({}) => {
       <div
         ...
       >
-        <hot-button disabled>
-        </hot-button>
+        <Button disabled />
       </div>
     </div>
   );
@@ -113,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

@@ -0,0 +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

@@ -0,0 +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.0a6",
+  "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/Button.d.ts

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

package/react/Button.js

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

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

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

package/react/Tracking.d.ts

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

package/react/index.d.ts

@@ -0,0 +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

@@ -0,0 +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';

package/react/HotToolbar.d.ts

@@ -1,12 +0,0 @@
-import Toolbar from '../components/Toolbar';
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Toolbar, {
-    onHotUndoClick: string;
-    onHotRedoClick: string;
-    onHotBoldClick: string;
-    onHotItalicClick: string;
-    onHotUnderlineClick: string;
-    onHotLeftalignClick: string;
-    onHotCenteralignClick: string;
-    onHotRightalignClick: string;
-}>;
-export default reactWrapper;

package/react/HotTracking.d.ts

@@ -1,6 +0,0 @@
-import Tracking from '../components/Tracking';
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Tracking, {
-    onHotAgree: string;
-    onHotDisagree: string;
-}>;
-export default reactWrapper;