@serkonda7/solid-components 0.0.1 → 0.0.2

package/README.md

@@ -1,36 +1,51 @@
-# solid-components
+# @serkonda7/solid-components
+[![CI][ci-badge]][ci-status]
+[![npm version][npm-badge]][npm-link]
+[![npm updated][npm-date-badge]][npm-link]
 
 Reusable components for [SolidJS](https://www.solidjs.com/).
 
-## Installation
 
+## 📦 Installation
 ```sh
-bun add solid-components solid-js
-# or: npm install solid-components solid-js
+bun install @serkonda7/solid-components solid-js
 ```
 
-## Usage
-
-Import components from the package root:
 
+## 🚀 Usage
 ```tsx
-import { /* Component */ } from 'solid-components';
+import { /* Component */ } from 'solid-components'
+import '@serkonda7/solid-components/styles.css'
 ```
 
-The package is currently a foundation for the component library. Components
-will be added to `src/` and re-exported from `src/index.ts`.
+These components are available:
+- `DataTable` - generic table with optional sorting, row selection, actions, loading, and empty states.
 
-## Development
 
-Install [Bun](https://bun.sh/), then run:
+## Components
+### DataTable
+The table does not fetch data or perform navigation.
+Consumers provide the rows, cell rendering, and callbacks:
 
-```sh
-bun install
-bun run test       # type-check, build, and run tests
-bun run lint:ci    # check formatting and lint rules
-bun run build      # create the production package in dist/
+```tsx
+<DataTable
+  rows={items}
+  getRowId={(item) => item.id}
+  columns={[{ key: 'name', label: 'Name', sortable: true }]}
+  sortKey={sortKey}
+  sortDirection={sortDirection}
+  onSort={setSortKey}
+  getCell={(item, column) => column.key === 'name' ? item.name : null}
+/>
 ```
 
-## License
 
-MIT
+## 📜 License
+This repo is licensed under the [MIT License](LICENSE.txt).
+
+
+[ci-badge]: https://github.com/serkonda7/solid-components/actions/workflows/ci.yml/badge.svg
+[ci-status]: https://github.com/serkonda7/solid-components/actions/workflows/ci.yml
+[npm-badge]: https://nodei.co/npm/@serkonda7/solid-components.png?style=shields&data=v&color=blue
+[npm-date-badge]: https://nodei.co/npm/@serkonda7/solid-components.png?style=shields&data=u&color=blue
+[npm-link]: https://www.npmjs.com/package/@serkonda7/solid-components

package/dist/data-table.d.ts

@@ -0,0 +1,34 @@
+import type { Accessor, JSX } from 'solid-js';
+export type DataTableSortDirection = 'asc' | 'desc';
+export interface DataTableColumn<TRow> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    class?: string;
+    ariaLabel?: string;
+    getValue?: (row: TRow) => JSX.Element;
+}
+export interface DataTableProps<TRow> {
+    rows: TRow[] | Accessor<TRow[]>;
+    columns: DataTableColumn<TRow>[];
+    getRowId: (row: TRow) => string | number;
+    getCell?: (row: TRow, column: DataTableColumn<TRow>) => JSX.Element;
+    rowActions?: (row: TRow) => JSX.Element;
+    selected?: string[] | number[] | Accessor<string[] | number[]>;
+    onSelectionChange?: (ids: (string | number)[]) => void;
+    selectionLabel?: string;
+    sortKey?: string | Accessor<string | undefined>;
+    sortDirection?: DataTableSortDirection | Accessor<DataTableSortDirection>;
+    onSort?: (key: string) => void;
+    loading?: boolean | Accessor<boolean>;
+    empty?: boolean | Accessor<boolean>;
+    loadingContent?: JSX.Element;
+    emptyContent?: JSX.Element;
+    class?: string;
+}
+/**
+ * Generic accessible data table. Data fetching, navigation, and cell content
+ * stay with the consuming app; this component owns table structure and the
+ * repeated selection/sort/loading states.
+ */
+export declare function DataTable<TRow>(props: DataTableProps<TRow>): JSX.Element;

package/dist/index.d.ts

@@ -4,4 +4,4 @@
  * Add components here as they are implemented so consumers can import them
  * from the package root.
  */
-export {};
+export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSortDirection, } from './data-table';

package/dist/index.js

@@ -1,2 +1,127 @@
-
-//# debugId=1B152D275122871864756E2164756E21
+import { className as e, createComponent as t, delegateEvents as n, effect as r, insert as i, memo as a, setAttribute as o, template as s, use as c } from "solid-js/web";
+import { For as l, Show as u, createEffect as d, createMemo as f } from "solid-js";
+//#region src/data-table.tsx
+var p = /*#__PURE__*/ s("<th class=data-table-checkbox><span class=data-table-visually-hidden>Select rows</span><input type=checkbox>"), m = /*#__PURE__*/ s("<th>Actions"), h = /*#__PURE__*/ s("<div><table class=data-table><thead><tr></tr></thead><tbody>"), g = /*#__PURE__*/ s("<button type=button class=data-table-sort>"), _ = /*#__PURE__*/ s("<th>"), v = /*#__PURE__*/ s("<td class=data-table-checkbox><input type=checkbox>"), y = /*#__PURE__*/ s("<td>"), b = /*#__PURE__*/ s("<tr>"), x = /*#__PURE__*/ s("<p class=data-table-status>Loading…"), S = /*#__PURE__*/ s("<p class=data-table-status>No results.");
+function C(e) {
+	return typeof e == "function" ? e() : e;
+}
+function w(n) {
+	let s = f(() => C(n.rows)), w = () => C(n.loading ?? !1), T = () => C(n.selected ?? []), E = () => C(n.sortKey ?? void 0), D = () => C(n.sortDirection ?? "asc"), O = () => n.selected !== void 0 && n.onSelectionChange !== void 0, k = () => {
+		let e = T();
+		return s().length > 0 && s().every((t) => e.includes(n.getRowId(t)));
+	}, A;
+	d(() => {
+		A && (A.indeterminate = T().length > 0 && !k());
+	});
+	function j(e) {
+		n.onSelectionChange?.(e ? s().map(n.getRowId) : []);
+	}
+	function M(e, t) {
+		let r = n.getRowId(e), i = T(), a = t ? [...i, r] : i.filter((e) => e !== r);
+		n.onSelectionChange?.(a);
+	}
+	function N(e) {
+		return T().includes(n.getRowId(e));
+	}
+	function P(e, t) {
+		return n.getCell?.(e, t) ?? t.getValue?.(e) ?? null;
+	}
+	return (() => {
+		var d = h(), f = d.firstChild.firstChild, T = f.firstChild, F = f.nextSibling;
+		return i(T, t(u, {
+			get when() {
+				return O();
+			},
+			get children() {
+				var e = p(), t = e.firstChild.nextSibling;
+				t.addEventListener("change", (e) => j(e.currentTarget.checked));
+				var i = A;
+				return typeof i == "function" ? c(i, t) : A = t, r(() => o(t, "aria-label", n.selectionLabel ?? "Select all rows")), r(() => t.checked = k()), e;
+			}
+		}), null), i(T, t(l, {
+			get each() {
+				return n.columns;
+			},
+			children: (s) => (() => {
+				var c = _();
+				return i(c, t(u, {
+					get when() {
+						return a(() => !!s.sortable)() && n.onSort;
+					},
+					get fallback() {
+						return s.label;
+					},
+					get children() {
+						var e = g();
+						return e.$$click = () => n.onSort?.(s.key), i(e, () => s.label, null), i(e, (() => {
+							var e = a(() => E() === s.key);
+							return () => e() ? D() === "asc" ? " ▲" : " ▼" : "";
+						})(), null), e;
+					}
+				})), r((t) => {
+					var n = s.class, r = s.sortable ? E() === s.key ? D() === "asc" ? "ascending" : "descending" : "none" : void 0;
+					return n !== t.e && e(c, t.e = n), r !== t.t && o(c, "aria-sort", t.t = r), t;
+				}, {
+					e: void 0,
+					t: void 0
+				}), c;
+			})()
+		}), null), i(T, t(u, {
+			get when() {
+				return n.rowActions;
+			},
+			get children() {
+				return m();
+			}
+		}), null), i(F, t(l, {
+			get each() {
+				return s();
+			},
+			children: (a) => (() => {
+				var s = b();
+				return i(s, t(u, {
+					get when() {
+						return O();
+					},
+					get children() {
+						var e = v(), t = e.firstChild;
+						return t.addEventListener("change", (e) => M(a, e.currentTarget.checked)), r(() => o(t, "aria-label", `Select row ${n.getRowId(a)}`)), r(() => t.checked = N(a)), e;
+					}
+				}), null), i(s, t(l, {
+					get each() {
+						return n.columns;
+					},
+					children: (t) => (() => {
+						var n = y();
+						return i(n, () => P(a, t)), r(() => e(n, t.class)), n;
+					})()
+				}), null), i(s, t(u, {
+					get when() {
+						return n.rowActions;
+					},
+					get children() {
+						var e = y();
+						return i(e, () => n.rowActions?.(a)), e;
+					}
+				}), null), s;
+			})()
+		})), i(d, t(u, {
+			get when() {
+				return w();
+			},
+			get children() {
+				return n.loadingContent ?? x();
+			}
+		}), null), i(d, t(u, {
+			get when() {
+				return a(() => !w())() && (n.empty === void 0 ? s().length === 0 : C(n.empty));
+			},
+			get children() {
+				return n.emptyContent ?? S();
+			}
+		}), null), r(() => e(d, `data-table-wrap${n.class ? ` ${n.class}` : ""}`)), d;
+	})();
+}
+n(["click"]);
+//#endregion
+export { w as DataTable };

package/dist/styles.css

@@ -0,0 +1,44 @@
+.data-table-wrap {
+	overflow-x: auto;
+}
+
+.data-table {
+	width: 100%;
+	max-width: 100%;
+	border-collapse: collapse;
+}
+
+.data-table-checkbox {
+	width: 2rem;
+}
+
+.data-table-sort {
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	text-transform: inherit;
+	letter-spacing: inherit;
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+.data-table-sort:hover {
+	background: transparent;
+	color: inherit;
+	text-decoration: underline;
+}
+
+.data-table-status {
+	color: var(--text-secondary, #616161);
+}
+
+.data-table-visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	white-space: nowrap;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serkonda7/solid-components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Reusable components for SolidJS",
   "license": "MIT",
   "author": "serkonda7",
@@ -18,7 +18,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -27,6 +28,7 @@
     "lint": "biome check --write",
     "lint:ci": "biome ci",
     "check": "tsc --noEmit",
+    "examples": "vite --config examples/vite.config.ts",
     "build:dev": "bun run scripts/build.ts --dev",
     "build": "bun run check && bun run scripts/build.ts --prod",
     "prepack": "bun run build"
@@ -42,6 +44,8 @@
     "@biomejs/biome": "2.5.14",
     "@types/bun": "1.4.2",
     "solid-js": "~1.9.15",
-    "typescript": "~7.0.2"
+    "typescript": "~7.0.2",
+    "vite": "~8.3.0",
+    "vite-plugin-solid": "~2.11.14"
   }
 }

package/dist/index.js.map

@@ -1,9 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [
-  ],
-  "mappings": "",
-  "debugId": "1B152D275122871864756E2164756E21",
-  "names": []
-}