@azmr/ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alshafaraz Gazi / Azmara Technologies
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+# @azmr/ui
+
+React components wired to reactive Signals. The `Grid` component re-renders automatically when its Signal changes — no state management needed.
+
+## Install
+
+```bash
+pnpm add @azmr/ui @azmr/core react react-dom
+# or
+npm install @azmr/ui @azmr/core react react-dom
+```
+
+## Grid
+
+```tsx
+import { Signal } from "@azmr/core";
+import { Grid } from "@azmr/ui";
+
+const customers = new Signal([
+  { name: "Aroha", balance: 150 },
+  { name: "Mere",  balance: 320 },
+]);
+
+function App() {
+  return (
+    <Grid
+      signal={customers}
+      labels={{ name: "Customer", balance: "Balance ($)" }}
+    />
+  );
+}
+
+// Grid updates automatically
+customers.set([...customers.peek(), { name: "Tane", balance: 0 }]);
+```
+
+## useSignal
+
+Hook to subscribe any React component to a Signal.
+
+```tsx
+import { useSignal } from "@azmr/ui";
+
+function Counter({ count }: { count: Signal<number> }) {
+  const value = useSignal(count); // push-based, no polling
+  return <span>{value}</span>;
+}
+```
+
+## Grid Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `signal` | `Signal<T[]>` | Reactive data source |
+| `columns` | `(keyof T)[]` | Optional column order |
+| `labels` | `Partial<Record<keyof T, string>>` | Optional column label overrides |
+| `emptyMessage` | `string` | Message shown when Signal is empty |
+
+All cell values are rendered through React's JSX escaping — `dangerouslySetInnerHTML` is never used.
+
+## Requirements
+
+- Node.js ≥ 18
+- React 18 or 19
+- TypeScript ≥ 5 (types included)
+
+## Documentation
+
+Full docs at [docs.azmara.io](https://docs.azmara.io)
+
+## License
+
+MIT © [Azmara Technologies](https://azmara.io)

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Signal } from '@azmr/core';
+
+interface GridProps<T extends Record<string, unknown>> {
+    signal: Signal<T[]>;
+    /** Optional column order. Defaults to keys from first row. */
+    columns?: (keyof T)[];
+    /** Optional label overrides per column key. */
+    labels?: Partial<Record<keyof T, string>>;
+    emptyMessage?: string;
+}
+/**
+ * A reactive data grid that automatically re-renders when the Signal updates.
+ * All cell values are rendered via React's JSX escaping — no dangerouslySetInnerHTML.
+ */
+declare function Grid<T extends Record<string, unknown>>({ signal, columns, labels, emptyMessage, }: GridProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * React hook that subscribes to a Signal and triggers re-renders on change.
+ */
+declare function useSignal<T>(signal: Signal<T>): T;
+
+export { Grid, useSignal };

package/dist/index.js

@@ -0,0 +1,62 @@
+// src/useSignal.ts
+import { useEffect, useState } from "react";
+function useSignal(signal) {
+  const [value, setValue] = useState(() => signal.get());
+  useEffect(() => {
+    setValue(signal.get());
+    return signal.subscribe(setValue);
+  }, [signal]);
+  return value;
+}
+
+// src/Grid.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Grid({
+  signal,
+  columns,
+  labels,
+  emptyMessage = "No records found."
+}) {
+  const data = useSignal(signal);
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx("p", { style: { color: "#888", fontStyle: "italic" }, children: emptyMessage });
+  }
+  const cols = columns ?? Object.keys(data[0]);
+  return /* @__PURE__ */ jsxs("table", { style: { borderCollapse: "collapse", width: "100%" }, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: cols.map((col) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        style: {
+          textAlign: "left",
+          padding: "8px 12px",
+          borderBottom: "2px solid #e2e8f0",
+          fontWeight: 600,
+          fontSize: "0.875rem",
+          color: "#374151"
+        },
+        children: labels?.[col] ?? String(col)
+      },
+      String(col)
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: data.map((row, rowIndex) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: row has no guaranteed unique ID at this layer
+      /* @__PURE__ */ jsx("tr", { style: { backgroundColor: rowIndex % 2 === 0 ? "#fff" : "#f9fafb" }, children: cols.map((col) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          style: {
+            padding: "8px 12px",
+            borderBottom: "1px solid #e2e8f0",
+            fontSize: "0.875rem",
+            color: "#1f2937"
+          },
+          children: String(row[col] ?? "")
+        },
+        String(col)
+      )) }, rowIndex)
+    )) })
+  ] });
+}
+export {
+  Grid,
+  useSignal
+};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@azmr/ui",
+  "version": "0.0.1",
+  "description": "React UI components wired to reactive Signals — Grid, useSignal",
+  "type": "module",
+  "license": "MIT",
+  "author": "Alshafaraz Gazi <alshafaraz.gazi@gmail.com>",
+  "homepage": "https://docs.azmara.io",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/coderchef26/azmara-platform.git",
+    "directory": "packages/ui"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "grid",
+    "reactive",
+    "signals",
+    "data-table",
+    "azmara"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@azmr/core": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitest/browser": "^2.1.9",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "vitest": "^2.1.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "dev": "tsup src/index.ts --format esm --dts --watch",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run",
+    "clean": "rm -rf dist"
+  }
+}