Add React/Svelte/Vue app examples, with React component wrapper

.github/workflows/cdn_deploy.yml

@@ -8,7 +8,7 @@ on:
       - "*"
     # Workflow is triggered only if src changes
     paths:
-      - src/**
+      - components/**
   # Allow manual trigger (workflow_dispatch)
   workflow_dispatch:
 

.github/workflows/docs.yml

@@ -4,7 +4,7 @@ on:
   push:
     paths:
       - docs/**
-      - src/**
+      - components/**
       - mkdocs.yml
     branches: [main]
   # Allow manual trigger (workflow_dispatch)

.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from "@storybook/web-components-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.ts"],
+  stories: ["../components/**/*.stories.ts"],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
   framework: {
     name: "@storybook/web-components-vite",

.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/web-components";
-import "../src/theme/hot.css";
+import "../components/theme/hot.css";
 
 const preview: Preview = {
   parameters: {

src/button/Button.ts → components/button/Button.ts

@@ -1,7 +1,8 @@
-import { css, html, LitElement, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
 import reset from "../tailwind-reset";
 import { cva } from "class-variance-authority";
+import type { HotElementProps } from "../hot-element";
 
 const buttonStyle = cva(
   "bg-primary text-white py-3 px-6 rounded leading-[1.15]",
@@ -10,9 +11,9 @@ const buttonStyle = cva(
       intent: {
         primary: "bg-primary border-2 border-primary text-white",
         secondary: `
-          bg-white border-2 border-primary text-primary! hover:bg-lightGray 
+          bg-white border-2 border-primary text-primary! hover:bg-lightGray
           focus:bg-transparent focus:border-primary
-        `
+        `,
       },
       disabled: {
         true: "opacity-50 cursor-not-allowed",
@@ -22,18 +23,14 @@ const buttonStyle = cva(
   },
 );
 
-@customElement("hot-button")
-export class button extends LitElement {
-  /** Disable the button, greyed out, not clickable. */
-  @property({ type: Boolean }) disabled: boolean;
+export class Button extends LitElement implements HotElementProps {
+  @property() name = "hot-button";
 
-  @property({ type: String }) intent: "primary" | "secondary";
+  /** Disable the button, greyed out, not clickable. */
+  @property({ type: Boolean }) disabled: boolean = false;
 
-  constructor() {
-    super();
-    this.disabled = false;
-    this.intent = "primary";
-  }
+  /** CVA button type. */
+  @property({ type: String }) intent: "primary" | "secondary" = "primary";
 
   static styles = [
     css`
@@ -49,7 +46,9 @@ export class button extends LitElement {
         disabled: this.disabled,
       })}
       ?disabled=${this.disabled}
-      @click=${(e: MouseEvent) => {this._handleClick(e)}}
+      @click=${(e: MouseEvent) => {
+        this._handleClick(e);
+      }}
     >
       <slot></slot>
     </button>`;
@@ -62,3 +61,5 @@ export class button extends LitElement {
     this.dispatchEvent(new Event("click"));
   }
 }
+
+export default Button;

src/index.ts → components/index.ts

@@ -1,5 +1,8 @@
 import "./theme/hot.css";
-export { button } from "@/button/Button.js";
+import { Button as ButtonImport } from "./button/Button";
+export { Button } from "./button/Button";
 // export { Card } from "@/card/Card.js";
 // export { Dropdown } from "@/dropdown/Dropdown.js";
 // export { Toggle } from "@/toggle/Toggle.js";
+
+customElements.define("hot-button", ButtonImport);

examples/react/README.md

@@ -0,0 +1,25 @@
+# React Demo
+
+## Running
+
+```bash
+pnpm run dev
+```
+
+This will:
+
+- Serve the compiled web components on <http://localhost:8080>
+- Serve app using the web components on <http://localhost:3000>
+
+> Typically the components would be loaded via NPM package, or via CDN.
+>
+> However, in this example we are building and serving the components
+> on localhost, for the purpose of the demo.
+>
+> <http://localhost:8080> is served via `vite preview`, which is basically just a
+> a small webserver - so we have our own localhost CDN!
+
+## Info
+
+There is a great reference for building React wrappers dynamically here:
+<https://github.com/shoelace-style/shoelace/blob/next/scripts/make-react.js>

examples/react/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/react/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" type="image/svg+xml" href="./favicon.ico">
+  <link
+  rel="stylesheet"
+  href="http://localhost:8080/style.css"
+  />
+  <script
+    type="module"
+    src="http://localhost:8080/ui.js"
+  ></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HOTOSM UI React Example</title>
+</head>
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

examples/react/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "hotosm-ui-react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev:build-web-components": "pnpm --prefix ../../ run build",
+    "dev:serve-web-components": "pnpm --prefix ../../ run serve",
+    "dev:start-server": "vite",
+    "dev": "pnpm run '/^dev:.*/'",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.2",
+    "@tsconfig/vite-react": "^3.0.2",
+    "@types/node": "^20.11.28",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "~5.4.0",
+    "vite": "^5.1.6"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "@lit/react": "^1.0.4"
+  }
+}