@warp-ds/elements 2.1.1 → 2.2.0-next.10

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.1.1",
+  "version": "2.2.0-next.10",
+  "packageManager": "pnpm@10.15.1",
   "description": "Custom elements for Warp",
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./components/affix": "./dist/packages/affix/index.js",
     "./components/alert": "./dist/packages/alert/index.js",
     "./components/attention": "./dist/packages/attention/index.js",
     "./components/badge": "./dist/packages/badge/index.js",
     "./components/box": "./dist/packages/box/index.js",
     "./components/breadcrumbs": "./dist/packages/breadcrumbs/index.js",
-    "./components/broadcast": "./dist/packages/broadcast/index.js",
     "./components/button": "./dist/packages/button/index.js",
     "./components/card": "./dist/packages/card/index.js",
     "./components/expandable": "./dist/packages/expandable/index.js",
@@ -20,82 +23,125 @@
     "./components/select": "./dist/packages/select/index.js",
     "./components/textfield": "./dist/packages/textfield/index.js",
     "./components/toast": "./dist/packages/toast/index.js",
-    "./toast": "./dist/api.js"
+    "./toast": "./dist/api.js",
+    "./custom-elements.json": "./dist/custom-elements.json",
+    "./react/*": {
+      "types": "./dist/packages/*/react.d.ts",
+      "import": "./dist/packages/*/react.js"
+    },
+    "./*": {
+      "types": "./dist/packages/*/index.d.ts",
+      "import": "./dist/packages/*/index.js"
+    }
   },
-  "module": "dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "customElements": "./dist/custom-elements.json",
+  "web-types": "./dist/web-types.json",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist/"
+    "./dist/",
+    "./dist/custom-elements.json"
   ],
-  "types": "dist/index.d.ts",
   "scripts": {
-    "build:docs": "lingui compile && vite build",
+    "clean": "rimraf .pnpm-store node_modules dist eik storybook-static",
+    "build:storybook": "npm run build && storybook build && touch ./storybook-static/.nojekyll",
     "build:eik": "node build.js eik",
     "build:npm": "node build.js npm",
-    "build": "rimraf dist && rimraf eik && lingui compile && tsc && vite build --mode lib && pnpm run build:npm && pnpm build:eik",
+    "build:manifest": "custom-elements-manifest analyze --config .cem/custom-element-manifest.config.js",
+    "build:styles": "node build.js styles",
+    "build": "rimraf dist && rimraf eik && pnpm run messages:compile && tsc && pnpm run build:manifest && pnpm run build:npm && pnpm build:eik",
     "commit": "cz",
-    "dev": "vite",
-    "lint:check": "eslint . --ext js,cjs,mjs --ignore-path .gitignore",
-    "lint": "eslint . --fix --ext js,cjs,mjs --ignore-path .gitignore",
+    "dev": "pnpm run storybook",
+    "storybook": "storybook dev --port 63900",
+    "lint:check": "eslint .",
+    "lint": "eslint . --fix",
     "messages:compile": "lingui compile",
     "messages:extract": "lingui extract",
-    "preview:docs": "vite preview",
     "semantic-release": "semantic-release",
-    "test:mock-backend:ci": "node ./tests/utils/broadcast-backend.js &",
-    "test:mock-backend": "node ./tests/utils/broadcast-backend.js",
-    "test:snapshot": "TAP_SNAPSHOT=1 tap ./packages/**/test.js --no-check-coverage",
-    "test": "tap ./packages/**/test.js --no-check-coverage",
+    "test": "vitest",
     "watch:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2017 --bundle --sourcemap --format=esm --minify --watch"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/warp-ds/elements.git"
+    "url": "git+https://github.com/warp-ds/elements.git"
   },
   "license": "Apache-2.0",
   "peerDependencies": {
     "@lingui/core": "5.x",
     "@warp-ds/css": "2.1.1",
     "@warp-ds/elements-core": "2.x",
-    "lit": "3.x"
+    "lit": "3.x",
+    "react": "^19.1.1"
   },
   "devDependencies": {
     "@chbphone55/classnames": "2.0.0",
+    "@custom-elements-manifest/analyzer": "^0.10.5",
     "@eik/cli": "2.0.38",
     "@eik/esbuild-plugin": "1.1.47",
+    "@eslint/js": "9.16.0",
     "@itsy/animate": "0.0.9",
     "@lingui/cli": "5.2.0",
     "@lingui/conf": "5.2.0",
+    "@open-wc/lit-helpers": "^0.7.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/builder-vite": "^9.1.4",
+    "@storybook/web-components": "^9.1.4",
+    "@storybook/web-components-vite": "^9.1.4",
     "@types/node": "20.14.10",
-    "@warp-ds/eslint-config": "1.0.5",
+    "@types/react": "^19.1.12",
+    "@unocss/core": "^66.5.0",
+    "@vitejs/plugin-react": "^5.0.2",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/utils": "^3.2.4",
+    "@warp-ds/eslint-config": "1.1.0",
     "@warp-ds/uno": "2.1.0",
-    "cors": "2.8.5",
+    "@wc-toolkit/cem-validator": "^1.0.3",
+    "@wc-toolkit/storybook-helpers": "^9.0.1",
+    "@wc-toolkit/type-parser": "^1.2.0",
+    "custom-element-jet-brains-integration": "^1.7.0",
+    "custom-element-vs-code-integration": "^1.5.0",
     "cz-conventional-changelog": "3.3.0",
     "element-collapse": "1.1.0",
     "esbuild": "0.23.0",
-    "eslint": "8.57.0",
-    "eslint-plugin-lit": "1.14.0",
+    "eslint": "9.16.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-lit": "2.1.1",
+    "eslint-plugin-prettier": "5.5.4",
     "express": "4.19.2",
     "glob": "11.0.0",
+    "globals": "15.13.0",
     "html-format": "1.1.7",
+    "lightningcss": "^1.30.1",
     "lit": "3.x",
-    "playwright": "1.45.1",
+    "nanoid": "^5.1.5",
+    "playwright": "^1.55.0",
     "prettier": "3.3.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "rimraf": "6.0.1",
     "semantic-release": "24.0.0",
-    "tap": "21.0.0",
+    "storybook": "^9.1.4",
     "typescript": "5.5.3",
+    "typescript-eslint": "^8.41.0",
     "unocss": "0.x",
-    "vite": "5.3.3",
-    "vite-plugin-html": "3.2.2",
-    "vite-plugin-top-level-await": "1.4.1"
+    "vite": "^6.0.0",
+    "vitest": "^3.2.4",
+    "vitest-browser-lit": "^0.1.0",
+    "vitest-browser-react": "^1.0.1"
   },
   "dependencies": {
     "@lingui/core": "5.2.0",
+    "@lit/react": "^1.0.8",
+    "@open-wc/form-control": "^1.0.0",
     "@warp-ds/core": "1.1.8",
     "@warp-ds/css": "2.1.1",
     "@warp-ds/elements-core": "2.0.1",
     "@warp-ds/icons": "2.5.0",
+    "date-fns": "^4.1.0",
     "scroll-doctor": "2.0.2"
   },
   "publishConfig": {

package/dist/index.d.ts

@@ -1,19 +0,0 @@
-export * from "./packages/affix";
-export * from "./packages/alert";
-export * from "./packages/attention";
-export * from "./packages/badge";
-export * from "./packages/box";
-export * from "./packages/breadcrumbs";
-export * from "./packages/broadcast";
-export * from "./packages/button";
-export * from "./packages/card";
-export * from "./packages/expandable";
-export * from "./packages/modal";
-export * from "./packages/pill";
-export * from "./packages/select";
-export * from "./packages/textfield";
-export * from "./packages/toast/api";
-export * from "./packages/toast/toast-container";
-export * from "./packages/toast/toast";
-export * from "./packages/utils/expand-transition";
-export * from "./packages/utils/unstyled-heading";

package/dist/packages/broadcast/component.d.ts

@@ -1,36 +0,0 @@
-export class WarpBroadcast {
-    static properties: {
-        _messages: {
-            state: boolean;
-            hasChanged(newVal: any, oldVal: any): boolean;
-        };
-        _hiddenMessageIds: {
-            state: boolean;
-            type: ArrayConstructor;
-        };
-        interval: {
-            type: NumberConstructor;
-            attribute: boolean;
-            reflect: boolean;
-        };
-        url: {
-            type: StringConstructor;
-            attribute: boolean;
-            reflect: boolean;
-        };
-        api: {
-            type: StringConstructor;
-            attribute: boolean;
-            reflect: boolean;
-        };
-    };
-    static styles: any[];
-    _messages: any[];
-    interval: number;
-    _hiddenMessageIds: any[];
-    url: string;
-    connectedCallback(): Promise<void>;
-    _fetchMessage(): Promise<void>;
-    _del(id: any): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
-}

package/dist/packages/broadcast/index.d.ts

@@ -1,2 +0,0 @@
-export { WarpBroadcast };
-import { WarpBroadcast } from './component';

package/dist/packages/broadcast/index.js

@@ -1,87 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-
-// packages/broadcast/component.js
-import { html } from "lit";
-import WarpElement from "@warp-ds/elements-core";
-import { repeat } from "lit/directives/repeat.js";
-
-// packages/utils/window-exists.js
-var windowExists = typeof window !== "undefined";
-
-// packages/broadcast/component.js
-var WarpBroadcast = class extends WarpElement {
-  constructor() {
-    super();
-    this._messages = [];
-    this.interval = 3e4;
-    this._hiddenMessageIds = [];
-    this.url = windowExists ? window.location.href : "";
-  }
-  async connectedCallback() {
-    super.connectedCallback();
-    if (!this.api) {
-      console.error('Broadcast "api" attribute invalid or undefined');
-      return;
-    }
-    if (windowExists) {
-      await this._fetchMessage();
-      setInterval(() => this._fetchMessage(), this.interval);
-    }
-  }
-  async _fetchMessage() {
-    const url = `${this.api}?path=${this.url}`;
-    try {
-      const res = await (await fetch(url)).json();
-      this._messages = res.length ? res : [];
-    } catch (err) {
-      console.error(`failed to fetch broadcasts from given url (${url})`, err);
-    }
-  }
-  async _del(id) {
-    const el = this.renderRoot.querySelector(`#broadcast-${id}`);
-    await el.collapse();
-    this._hiddenMessageIds = [.../* @__PURE__ */ new Set([...this._hiddenMessageIds, id])];
-  }
-  render() {
-    const messages = this._messages.filter((item) => !this._hiddenMessageIds.includes(item.id));
-    return html`
-      <aside class=${`${messages.length === 0 ? "hidden" : "mb-16"}`}>
-        ${repeat(
-      messages,
-      ({ id }) => `broadcast-${id}`,
-      ({ id, message }) => html`<w-toast id="broadcast-${id}" type="warning" text="${message}" canclose @close=${() => this._del(id)}> </w-toast>`
-    )}
-      </aside>
-    `;
-  }
-};
-__publicField(WarpBroadcast, "properties", {
-  _messages: {
-    state: true,
-    hasChanged(newVal, oldVal) {
-      if (!oldVal || oldVal.length === 0) return true;
-      const newIds = newVal.map(({ id }) => id).sort();
-      const oldIds = oldVal.map(({ id }) => id).sort();
-      return JSON.stringify(newIds) !== JSON.stringify(oldIds);
-    }
-  },
-  _hiddenMessageIds: {
-    state: true,
-    type: Array
-  },
-  interval: { type: Number, attribute: true, reflect: true },
-  url: { type: String, attribute: true, reflect: true },
-  api: { type: String, attribute: true, reflect: true }
-});
-__publicField(WarpBroadcast, "styles", [WarpElement.styles]);
-
-// packages/broadcast/index.js
-if (!customElements.get("w-broadcast")) {
-  customElements.define("w-broadcast", WarpBroadcast);
-}
-export {
-  WarpBroadcast
-};
-//# sourceMappingURL=index.js.map

package/dist/packages/broadcast/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/broadcast/component.js", "../../../packages/utils/window-exists.js", "../../../packages/broadcast/index.js"],
-  "sourcesContent": ["import { html } from 'lit';\n\nimport WarpElement from '@warp-ds/elements-core';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport { windowExists } from '../utils/window-exists';\n\nexport class WarpBroadcast extends WarpElement {\n  static properties = {\n    _messages: {\n      state: true,\n      hasChanged(newVal, oldVal) {\n        if (!oldVal || oldVal.length === 0) return true;\n        const newIds = newVal.map(({ id }) => id).sort();\n        const oldIds = oldVal.map(({ id }) => id).sort();\n        return JSON.stringify(newIds) !== JSON.stringify(oldIds);\n      },\n    },\n    _hiddenMessageIds: {\n      state: true,\n      type: Array,\n    },\n    interval: { type: Number, attribute: true, reflect: true },\n    url: { type: String, attribute: true, reflect: true },\n    api: { type: String, attribute: true, reflect: true },\n  };\n\n  static styles = [WarpElement.styles];\n\n  constructor() {\n    super();\n    this._messages = [];\n    this.interval = 30000;\n    this._hiddenMessageIds = [];\n    this.url = windowExists ? window.location.href : '';\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    if (!this.api) {\n      console.error('Broadcast \"api\" attribute invalid or undefined');\n      return;\n    }\n    if (windowExists) {\n      await this._fetchMessage();\n      setInterval(() => this._fetchMessage(), this.interval);\n    }\n  }\n\n  async _fetchMessage() {\n    const url = `${this.api}?path=${this.url}`;\n    try {\n      const res = await (await fetch(url)).json();\n      this._messages = res.length ? res : [];\n    } catch (err) {\n      console.error(`failed to fetch broadcasts from given url (${url})`, err);\n    }\n  }\n\n  async _del(id) {\n    const el = this.renderRoot.querySelector(`#broadcast-${id}`);\n    await el.collapse();\n    this._hiddenMessageIds = [...new Set([...this._hiddenMessageIds, id])];\n  }\n\n  render() {\n    const messages = this._messages.filter((item) => !this._hiddenMessageIds.includes(item.id));\n\n    return html`\n      <aside class=${`${messages.length === 0 ? 'hidden' : 'mb-16'}`}>\n        ${repeat(\n          messages,\n          ({ id }) => `broadcast-${id}`,\n          ({ id, message }) =>\n            html`<w-toast id=\"broadcast-${id}\" type=\"warning\" text=\"${message}\" canclose @close=${() => this._del(id)}> </w-toast>`,\n        )}\n      </aside>\n    `;\n  }\n}\n", "export const windowExists = typeof window !== 'undefined';\n", "import { WarpBroadcast } from './component';\n\nif (!customElements.get('w-broadcast')) {\n  customElements.define('w-broadcast', WarpBroadcast);\n}\n\nexport { WarpBroadcast };\n"],
-  "mappings": ";;;;;AAAA,SAAS,YAAY;AAErB,OAAO,iBAAiB;AACxB,SAAS,cAAc;;;ACHhB,IAAM,eAAe,OAAO,WAAW;;;ADOvC,IAAM,gBAAN,cAA4B,YAAY;AAAA,EAsB7C,cAAc;AACZ,UAAM;AACN,SAAK,YAAY,CAAC;AAClB,SAAK,WAAW;AAChB,SAAK,oBAAoB,CAAC;AAC1B,SAAK,MAAM,eAAe,OAAO,SAAS,OAAO;AAAA,EACnD;AAAA,EAEA,MAAM,oBAAoB;AACxB,UAAM,kBAAkB;AACxB,QAAI,CAAC,KAAK,KAAK;AACb,cAAQ,MAAM,gDAAgD;AAC9D;AAAA,IACF;AACA,QAAI,cAAc;AAChB,YAAM,KAAK,cAAc;AACzB,kBAAY,MAAM,KAAK,cAAc,GAAG,KAAK,QAAQ;AAAA,IACvD;AAAA,EACF;AAAA,EAEA,MAAM,gBAAgB;AACpB,UAAM,MAAM,GAAG,KAAK,GAAG,SAAS,KAAK,GAAG;AACxC,QAAI;AACF,YAAM,MAAM,OAAO,MAAM,MAAM,GAAG,GAAG,KAAK;AAC1C,WAAK,YAAY,IAAI,SAAS,MAAM,CAAC;AAAA,IACvC,SAAS,KAAK;AACZ,cAAQ,MAAM,8CAA8C,GAAG,KAAK,GAAG;AAAA,IACzE;AAAA,EACF;AAAA,EAEA,MAAM,KAAK,IAAI;AACb,UAAM,KAAK,KAAK,WAAW,cAAc,cAAc,EAAE,EAAE;AAC3D,UAAM,GAAG,SAAS;AAClB,SAAK,oBAAoB,CAAC,GAAG,oBAAI,IAAI,CAAC,GAAG,KAAK,mBAAmB,EAAE,CAAC,CAAC;AAAA,EACvE;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,UAAU,OAAO,CAAC,SAAS,CAAC,KAAK,kBAAkB,SAAS,KAAK,EAAE,CAAC;AAE1F,WAAO;AAAA,qBACU,GAAG,SAAS,WAAW,IAAI,WAAW,OAAO,EAAE;AAAA,UAC1D;AAAA,MACA;AAAA,MACA,CAAC,EAAE,GAAG,MAAM,aAAa,EAAE;AAAA,MAC3B,CAAC,EAAE,IAAI,QAAQ,MACb,8BAA8B,EAAE,0BAA0B,OAAO,qBAAqB,MAAM,KAAK,KAAK,EAAE,CAAC;AAAA,IAC7G,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;AAvEE,cADW,eACJ,cAAa;AAAA,EAClB,WAAW;AAAA,IACT,OAAO;AAAA,IACP,WAAW,QAAQ,QAAQ;AACzB,UAAI,CAAC,UAAU,OAAO,WAAW,EAAG,QAAO;AAC3C,YAAM,SAAS,OAAO,IAAI,CAAC,EAAE,GAAG,MAAM,EAAE,EAAE,KAAK;AAC/C,YAAM,SAAS,OAAO,IAAI,CAAC,EAAE,GAAG,MAAM,EAAE,EAAE,KAAK;AAC/C,aAAO,KAAK,UAAU,MAAM,MAAM,KAAK,UAAU,MAAM;AAAA,IACzD;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,UAAU,EAAE,MAAM,QAAQ,WAAW,MAAM,SAAS,KAAK;AAAA,EACzD,KAAK,EAAE,MAAM,QAAQ,WAAW,MAAM,SAAS,KAAK;AAAA,EACpD,KAAK,EAAE,MAAM,QAAQ,WAAW,MAAM,SAAS,KAAK;AACtD;AAEA,cApBW,eAoBJ,UAAS,CAAC,YAAY,MAAM;;;AEzBrC,IAAI,CAAC,eAAe,IAAI,aAAa,GAAG;AACtC,iBAAe,OAAO,eAAe,aAAa;AACpD;",
-  "names": []
-}