@hotosm/ui 0.2.0-b5 → 0.3.0-b2

package/package.json

@@ -1,12 +1,8 @@
 {
   "name": "@hotosm/ui",
-  "version": "0.2.0b5",
+  "version": "0.3.0-b2",
   "description": "Shared UI components with HOT theming.",
-  "type": "module",
-  "engines": {
-    "node": ">=14.17"
-  },
-  "keywords": [],
+  "homepage": "https://github.com/hotosm/ui#readme",
   "author": {
     "name": "HOTOSM",
     "email": "sysadmin@hotosm.org"
@@ -30,69 +26,51 @@
     }
   ],
   "license": "AGPL-3.0-only",
-  "devDependencies": {
-    "@lit/react": "^1.0.4",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/web-components": "^8.2.9",
-    "@storybook/web-components-vite": "^8.2.9",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "autoprefixer": "^10.4.16",
-    "clsx": "2.0.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard-with-typescript": "^43.0.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-lit": "^1.10.1",
-    "eslint-plugin-n": "^16.4.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-wc": "^2.0.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^8.2.9",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.12",
-    "vite-plugin-dts": "4.0.0-beta.1",
-    "web-component-analyzer": "^2.0.0"
-  },
-  "dependencies-comments": {
-    "react": "Required for Storybook",
-    "react-dom": "Required for Storybook"
+  "type": "module",
+  "types": "dist/hotosm-ui.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/hotosm-ui.d.ts",
+      "import": "./dist/hotosm-ui.js"
+    },
+    "./dist/hotosm-ui.js": "./dist/hotosm-ui.js",
+    "./dist/components/*": "./dist/components/*",
+    "./dist/themes/*": "./dist/themes/*",
+    "./dist/style.css": "./dist/style.css"
   },
   "files": [
-    "dist/**/*",
-    "components/**/*",
-    "theme/**/*",
-    "i18n/*.xliff"
+    "dist"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hotosm/ui.git"
   },
-  "bugs": {
-    "url": "https://github.com/hotosm/ui/issues"
+  "engines": {
+    "node": ">=14.17.0"
   },
-  "homepage": "https://github.com/hotosm/ui#readme",
   "dependencies": {
-    "@shoelace-style/shoelace": "^2.16.0",
+    "@shoelace-style/shoelace": "^2.17.1",
     "class-variance-authority": "^0.7.0",
-    "lit": "^3.2.0"
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/web-components": "^8.2.9",
+    "@storybook/web-components-vite": "^8.2.9",
+    "globby": "^14.0.2",
+    "del": "^7.1.0",
+    "esbuild": "^0.19.4",
+    "storybook": "^8.2.9",
+    "typescript": "^5.2.2",
+    "user-agent-data-types": "^0.3.1"
   },
   "scripts": {
-    "dev": "pnpm run compile && storybook dev -p 3001 --no-open",
-    "dev-react": "pnpm run compile && storybook dev -c .storybook-react -p 3002 --no-open",
-    "compile": "tsc --noEmit",
-    "build": "pnpm run compile && vite build",
-    "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",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint --ext .js,.ts ./"
+    "dev": "storybook dev -p 3001 --no-open",
+    "build:docs": "storybook build --output-dir docs",
+    "build": "node scripts/build.js && npm run build-themes && npm run build-assets",
+    "build-themes": "cp -R src/themes dist && cp src/style.css dist",
+    "build-assets": "cp -R src/assets dist"
   }
 }

package/components/header/header.styles.ts

@@ -1,103 +0,0 @@
-import { css } from 'lit';
-import { cva } from "class-variance-authority";
-
-export const headerVariants = cva(
-  // Defaults to include in all variants
-  `
-      header
-  `,
-  {
-    variants: {
-      size: {
-          small: "header--size-small",
-          medium: "header--size-medium",
-          large: "header--size-large",
-      },
-      borderBottom: {
-          true: "border-bottom",
-      }
-    },
-  }
-);
-
-export type sizes = "small" | "medium" | "large";
-
-export const styles = css`
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 var(--sl-spacing-small);
-  }
-
-  .header.border-bottom {
-    border-bottom: var(--sl-spacing-3x-small) solid var(--sl-color-neutral-50);
-  }
-
-  .header--size-small {
-    height: var(--sl-spacing-4x-large);
-  }
-
-  .header--size-medium {
-    height: calc(var(--sl-spacing-4x-large) * 2);
-  }
-
-  .header--size-large {
-    height: calc(var(--sl-spacing-4x-large) * 4);
-  }
-
-  .header--link {
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--sl-spacing-small);
-  }
-
-  .header--title {
-    color: var(--sl-color-neutral-950);
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-x-large);
-  }
-
-  .header--tab-group {
-    flex-direction: column;
-  }
-
-  .header--tab::part(base) {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-950);
-    padding: var(--sl-spacing-small) var(--sl-spacing-small);
-  }
-
-  .header--tab-group::part(base) {
-    --track-color: transparent;
-    --indicator-color: var(--sl-color-neutral-950);
-  }
-
-  .header--nav {
-    justify-content: space-between;
-    justify-items: center;
-    gap: var(--sl-spacing-medium);
-    font-weight: var(--sl-font-weight-semibold);
-  }
-
-  .header--nav-mobile {
-  }
-
-  .header--person-circle {
-    font-size: var(--sl-font-size-x-large);
-  }
-
-  .header--drawer {
-    font-size: var(--sl-font-size-x-large)
-  }
-
-  .header--right-section {
-  }
-
-  .header--logo-img {
-  }
-}
-`

package/components/header/header.ts

@@ -1,160 +0,0 @@
-import "../../theme/hot-sl.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-group/tab-group.js";
-import "@shoelace-style/shoelace/dist/components/tab/tab.js";
-
-import { LitElement, html } from "lit";
-import { property } from "lit/decorators.js";
-import { headerVariants, type sizes, styles } from './header.styles.js';
-import type { CSSResultGroup } from 'lit';
-
-import registerBundledIcons from "../../components/icons";
-
-registerBundledIcons();
-
-interface MenuItem {
-  label: string;
-  clickEvent: () => void;
-}
-
-export class Header extends LitElement {
-
-  static styles: CSSResultGroup = [styles];
-
-  name = "hot-header";
-
-  /** Use a text-based title in the header. */
-  @property({ type: String })
-  accessor title: string = "";
-
-  /** Display a logo on the left of the header. */
-  @property({ type: String })
-  accessor logo: string | URL = "";
-
-  /** Add a drawer icon with a click event to e.g. open a sidebar. */
-  @property({ type: Boolean })
-  accessor drawer: boolean = true;
-
-  /** Array of menu items to include as navigation tabs. */
-  @property({ type: Array })
-  accessor tabs: MenuItem[] = [];
-
-  /** Size of toolbar vertically. */
-  @property({ type: String })
-  accessor size: sizes = "small";
-
-  /** Border bottom. */
-  @property({ type: Boolean })
-  accessor borderBottom: boolean = true;
-  
-  @property()
-  accessor selectedTab: number = 0;
-
-  protected render() {
-    const logoSrc =
-      typeof this.logo === "string" || this.logo instanceof URL
-        ? typeof this.logo === "string"
-          ? this.logo
-          : this.logo.href
-        : "";
-
-    return html`
-      <header class=${headerVariants({ 
-          size: this.size,
-          borderBottom: this.borderBottom
-        })}>
-        <a href="/" class="header--link">
-          ${logoSrc.length > 0
-            ? html`
-                <img
-                  id="logo"
-                  src="${this.logo}"
-                  alt="Logo"
-                  class="header--logo-img"
-                />
-              `
-            : html`
-            <hot-logo
-              ?iconOnly="${this.title.length > 0}"
-            >
-            </hot-logo>
-            `}
-          ${this.title.length > 0
-            ? html`
-                <h1 class="header--title">
-                  ${this.title}
-                </h1>
-              `
-            : null}
-        </a>
-
-        ${/* Navigation bar for desktop, hide on mobile */ ""}
-        <nav
-          class="header--nav"
-        >
-          <sl-tab-group class="header--tab-group">
-            ${this.tabs.map(
-              (item, index) => html`
-                <sl-tab
-                  class="header--tab"
-                  slot="nav"
-                  panel="general"
-                  @click=${(e: MouseEvent) => {
-                    this._selectTab(e, item.clickEvent, index);
-                  }}
-                  ?selected=${this.selectedTab === index}
-                  >${item.label}</sl-tab
-                >
-              `
-            )}
-          </sl-tab-group>
-        </nav>
-
-        ${/* Stacked navigation drawer for mobile */ ""}
-        ${/* NOTE this should probably be in a drawer instead */ ""}
-        <nav
-          class="header--nav-mobile"
-        ></nav>
-
-        <div id="right-section" class="header--right-section">
-          <sl-icon-button
-            library="bundled"
-            name="person-circle"
-            class="header--person-circle"
-            label="login"
-            @click=${(e: MouseEvent) => {
-              this._handleLogin(e);
-            }}
-          ></sl-icon-button>
-            ${this.drawer
-              ? html`
-                  <sl-icon-button
-                    library="bundled"
-                    class="header--drawer"
-                    name="list"
-                    label="drawer-open"
-                  ></sl-icon-button>
-                `
-              : null}
-          </div>
-        </div>
-      </header>
-    `;
-  }
-
-  private _selectTab(_e: MouseEvent, clickAction: () => void, index: number) {
-    this.selectedTab = index;
-    clickAction();
-  }
-
-  private _handleLogin(_e: MouseEvent) {
-    this.dispatchEvent(new Event("login"));
-  }
-}
-
-export default Header;
-
-// Define web component
-customElements.define("hot-header", Header);

package/components/logo/logo.styles.ts

@@ -1,8 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .logo {
-    line-height: 0;
-    height: var(--sl-spacing-3x-large)
-  }
-`

package/components/logo/logo.ts

@@ -1,37 +0,0 @@
-
-import HotLogoIconSVG from '../../theme/logo/hot-logo-icon.svg';
-import HotLogoTextSVG from '../../theme/logo/hot-logo-text.svg';
-
-import { LitElement, html } from "lit";
-import { property } from "lit/decorators.js";
-import styles from './logo.styles.js';
-import type { CSSResultGroup } from 'lit';
-
-export class Logo extends LitElement {
-
-  static styles: CSSResultGroup = [styles];
-
-  name = 'hot-logo';
-
-  @property({ type: Boolean })
-  accessor iconOnly = false;
-
-  @property({ type: Boolean })
-  accessor textOnly = false;
-
-  protected render() {
-
-    return html`
-      <div class="logo">
-        ${ !this.textOnly ? html`<img src=${HotLogoIconSVG} />` : null }
-        ${ !this.iconOnly ? html`<img src=${HotLogoTextSVG} />` : null }
-      </div>
-    `;
-  }
-
-}
-
-export default Logo;
-
-// Define web component
-customElements.define("hot-logo", Logo);

package/components/react/Header.ts

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

package/components/react/Logo.ts

@@ -1,15 +0,0 @@
-
-// @ts-ignore
-import * as React from 'react';
-import { createComponent } from '@lit/react';
-import Logo from '../logo/logo';
-
-const reactWrapper = createComponent({
-  tagName: 'hot-logo',
-  elementClass: Logo,
-  react: React,
-  events: {},
-  displayName: 'HotLogo'
-});
-
-export default reactWrapper;

package/components/react/Toolbar.ts

@@ -1,24 +0,0 @@
-
-// @ts-ignore
-import * as React from 'react';
-import { createComponent } from '@lit/react';
-import Toolbar from '../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: 'HotToolbar'
-});
-
-export default reactWrapper;

package/components/react/Tracking.ts

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

package/components/react/index.ts

@@ -1,63 +0,0 @@
-export { default as Header } from './Header';
-export { default as Toolbar } from './Toolbar';
-export { default as Tracking } from './Tracking';
-export { default as Logo } from './Logo';
-
-export { default as Alert } from '@shoelace-style/shoelace/dist/react/alert/index.js';
-export { default as AnimatedImage } from '@shoelace-style/shoelace/dist/react/animated-image/index.js';
-export { default as Animation } from '@shoelace-style/shoelace/dist/react/animation/index.js';
-export { default as Avatar } from '@shoelace-style/shoelace/dist/react/avatar/index.js';
-export { default as Badge } from '@shoelace-style/shoelace/dist/react/badge/index.js';
-export { default as Breadcrumb } from '@shoelace-style/shoelace/dist/react/breadcrumb/index.js';
-export { default as BreadcrumbItem } from '@shoelace-style/shoelace/dist/react/breadcrumb-item/index.js';
-export { default as Button } from '@shoelace-style/shoelace/dist/react/button/index.js';
-export { default as ButtonGroup } from '@shoelace-style/shoelace/dist/react/button-group/index.js';
-export { default as Card } from '@shoelace-style/shoelace/dist/react/card/index.js';
-export { default as Carousel } from '@shoelace-style/shoelace/dist/react/carousel/index.js';
-export { default as CarouselItem } from '@shoelace-style/shoelace/dist/react/carousel-item/index.js';
-export { default as Checkbox } from '@shoelace-style/shoelace/dist/react/checkbox/index.js';
-export { default as ColorPicker } from '@shoelace-style/shoelace/dist/react/color-picker/index.js';
-export { default as CopyButton } from '@shoelace-style/shoelace/dist/react/copy-button/index.js';
-export { default as Details } from '@shoelace-style/shoelace/dist/react/details/index.js';
-export { default as Dialog } from '@shoelace-style/shoelace/dist/react/dialog/index.js';
-export { default as Divider } from '@shoelace-style/shoelace/dist/react/divider/index.js';
-export { default as Drawer } from '@shoelace-style/shoelace/dist/react/drawer/index.js';
-export { default as Dropdown } from '@shoelace-style/shoelace/dist/react/dropdown/index.js';
-export { default as FormatBytes } from '@shoelace-style/shoelace/dist/react/format-bytes/index.js';
-export { default as FormatDate } from '@shoelace-style/shoelace/dist/react/format-date/index.js';
-export { default as FormatNumber } from '@shoelace-style/shoelace/dist/react/format-number/index.js';
-export { default as Icon } from '@shoelace-style/shoelace/dist/react/icon/index.js';
-export { default as IconButton } from '@shoelace-style/shoelace/dist/react/icon-button/index.js';
-export { default as ImageComparer } from '@shoelace-style/shoelace/dist/react/image-comparer/index.js';
-export { default as Include } from '@shoelace-style/shoelace/dist/react/include/index.js';
-export { default as Input } from '@shoelace-style/shoelace/dist/react/input/index.js';
-export { default as Menu } from '@shoelace-style/shoelace/dist/react/menu/index.js';
-export { default as MenuItem } from '@shoelace-style/shoelace/dist/react/menu-item/index.js';
-export { default as MenuLabel } from '@shoelace-style/shoelace/dist/react/menu-label/index.js';
-export { default as MutationObserver } from '@shoelace-style/shoelace/dist/react/mutation-observer/index.js';
-export { default as Option } from '@shoelace-style/shoelace/dist/react/option/index.js';
-export { default as Popup } from '@shoelace-style/shoelace/dist/react/popup/index.js';
-export { default as ProgressBar } from '@shoelace-style/shoelace/dist/react/progress-bar/index.js';
-export { default as ProgressRing } from '@shoelace-style/shoelace/dist/react/progress-ring/index.js';
-export { default as QRCode } from '@shoelace-style/shoelace/dist/react/qr-code/index.js';
-export { default as Radio } from '@shoelace-style/shoelace/dist/react/radio/index.js';
-export { default as RadioButton } from '@shoelace-style/shoelace/dist/react/radio-button/index.js';
-export { default as RadioGroup } from '@shoelace-style/shoelace/dist/react/radio-group/index.js';
-export { default as Range } from '@shoelace-style/shoelace/dist/react/range/index.js';
-export { default as Rating } from '@shoelace-style/shoelace/dist/react/rating/index.js';
-export { default as RelativeTime } from '@shoelace-style/shoelace/dist/react/relative-time/index.js';
-export { default as ResizeObserver } from '@shoelace-style/shoelace/dist/react/resize-observer/index.js';
-export { default as Select } from '@shoelace-style/shoelace/dist/react/select/index.js';
-export { default as Skeleton } from '@shoelace-style/shoelace/dist/react/skeleton/index.js';
-export { default as Spinner } from '@shoelace-style/shoelace/dist/react/spinner/index.js';
-export { default as SplitPanel } from '@shoelace-style/shoelace/dist/react/split-panel/index.js';
-export { default as Switch } from '@shoelace-style/shoelace/dist/react/switch/index.js';
-export { default as Tab } from '@shoelace-style/shoelace/dist/react/tab/index.js';
-export { default as TabGroup } from '@shoelace-style/shoelace/dist/react/tab-group/index.js';
-export { default as TabPanel } from '@shoelace-style/shoelace/dist/react/tab-panel/index.js';
-export { default as Tag } from '@shoelace-style/shoelace/dist/react/tag/index.js';
-export { default as Textarea } from '@shoelace-style/shoelace/dist/react/textarea/index.js';
-export { default as Tooltip } from '@shoelace-style/shoelace/dist/react/tooltip/index.js';
-export { default as Tree } from '@shoelace-style/shoelace/dist/react/tree/index.js';
-export { default as TreeItem } from '@shoelace-style/shoelace/dist/react/tree-item/index.js';
-export { default as VisuallyHidden } from '@shoelace-style/shoelace/dist/react/visually-hidden/index.js';

package/components/toolbar/toolbar.styles.ts

@@ -1,6 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .toolbar {
-  }
-`