@ds-mo/ui 0.2.4 → 0.4.0

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@ds-mo/ui",
-  "version": "0.2.4",
-  "description": "CompoMo — composable React UI components styled with TokoMo design tokens",
+  "version": "0.4.0",
+  "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
+    "web-components",
+    "custom-elements",
     "react",
+    "angular",
     "components",
     "ui",
     "design-system",
     "component-library",
-    "css-modules",
     "typescript"
   ],
   "homepage": "https://zainadeel.github.io/compomo/",
@@ -21,22 +23,26 @@
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/components/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
     },
-    "./css": "./dist/index.css"
+    "./angular": {
+      "import": "./src/angular/index.ts"
+    }
   },
   "files": [
     "dist",
-    "src"
+    "src/angular"
   ],
   "scripts": {
-    "build": "vite build",
-    "dev": "npm run registry:build && storybook dev -p 6006",
-    "storybook:build": "npm run registry:build && storybook build",
+    "build": "stencil build",
+    "build:docs": "stencil build --docs",
+    "dev": "stencil build --dev --watch",
+    "storybook": "stencil build && storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
@@ -44,9 +50,7 @@
     "mcp": "node scripts/mcp-server.mjs"
   },
   "peerDependencies": {
-    "@ds-mo/tokens": ">=0.3.0",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "@ds-mo/tokens": ">=0.3.0"
   },
   "peerDependenciesMeta": {
     "@ds-mo/icons": {
@@ -54,22 +58,22 @@
     }
   },
   "devDependencies": {
-    "@ds-mo/icons": "^0.7.2",
-    "@ds-mo/tokens": "^0.4.0",
+    "@ds-mo/icons": "^2.0.0",
+    "@ds-mo/tokens": "^2.5.0",
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/react": "^10.3.5",
-    "@storybook/react-vite": "^10.3.5",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.5",
-    "storybook": "^10.3.5",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.0",
-    "vite-plugin-dts": "^4.3.0",
-    "zod": "^4.3.6"
+    "@stencil/angular-output-target": "^1.3.1",
+    "@stencil/core": "^4.43.4",
+    "@storybook/addon-docs": "^8.6.18",
+    "@storybook/web-components": "^8.6.18",
+    "@storybook/web-components-vite": "^8.6.18",
+    "eslint": "^9.39.4",
+    "globals": "^17.6.0",
+    "lit": "^3.3.3",
+    "storybook": "^8.6.18",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.59.1",
+    "vite": "^5.4.21",
+    "zod": "^4.4.3"
   },
   "engines": {
     "node": ">=18.0.0"

package/src/angular/angular-component-lib/utils.ts

@@ -0,0 +1,65 @@
+/* eslint-disable */
+/* tslint:disable */
+import { fromEvent } from 'rxjs';
+
+export const proxyInputs = (Cmp: any, inputs: string[]) => {
+  const Prototype = Cmp.prototype;
+  inputs.forEach((item) => {
+    Object.defineProperty(Prototype, item, {
+      get() {
+        return this.el[item];
+      },
+      set(val: any) {
+        this.z.runOutsideAngular(() => (this.el[item] = val));
+      },
+      /**
+       * In the event that proxyInputs is called
+       * multiple times re-defining these inputs
+       * will cause an error to be thrown. As a result
+       * we set configurable: true to indicate these
+       * properties can be changed.
+       */
+      configurable: true,
+    });
+  });
+};
+
+export const proxyMethods = (Cmp: any, methods: string[]) => {
+  const Prototype = Cmp.prototype;
+  methods.forEach((methodName) => {
+    Prototype[methodName] = function () {
+      const args = arguments;
+      return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
+    };
+  });
+};
+
+export const proxyOutputs = (instance: any, el: any, events: string[]) => {
+  events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
+
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+    customElements.define(tagName, customElement);
+  }
+};
+
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { defineCustomElementFn, inputs, methods } = opts;
+
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
+    }
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
+    }
+    if (methods) {
+      proxyMethods(cls, methods);
+    }
+    return cls;
+  };
+  return decorator;
+}

package/src/angular/index.ts

@@ -0,0 +1,35 @@
+
+import * as d from './proxies';
+
+export const DIRECTIVES = [
+  d.DsAccordion,
+  d.DsBadge,
+  d.DsBanner,
+  d.DsBreadcrumb,
+  d.DsButton,
+  d.DsCard,
+  d.DsCheckbox,
+  d.DsDivider,
+  d.DsEmptyState,
+  d.DsFade,
+  d.DsField,
+  d.DsHeader,
+  d.DsInput,
+  d.DsLoader,
+  d.DsMenu,
+  d.DsModal,
+  d.DsPagination,
+  d.DsRadioGroup,
+  d.DsScrollbar,
+  d.DsSidebar,
+  d.DsSkeleton,
+  d.DsSlider,
+  d.DsSurface,
+  d.DsTabGroup,
+  d.DsTable,
+  d.DsTag,
+  d.DsText,
+  d.DsToastProvider,
+  d.DsToggle,
+  d.DsTooltip
+];