@lattice-php/lattice 0.1.0

package/dist/table/use-table.js

@@ -0,0 +1,157 @@
+import { withRefHeader } from "../core/component-ref.js";
+import { LATTICE_EVENT } from "../events/event-names.js";
+import { getColumns, getPagination, getRows, getState } from "./payload.js";
+import { buildEndpoint, nextSort } from "./query.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region resources/js/table/use-table.ts
+function useTable(node) {
+	const columns = getColumns(node.props?.columns);
+	const endpoint = typeof node.props?.endpoint === "string" ? node.props.endpoint : null;
+	const componentRef = typeof node.props?.ref === "string" ? node.props.ref : "";
+	const isLazy = node.props?.lazy === true;
+	const initialState = useMemo(() => getState(node.props?.state), [node.props?.state]);
+	const [rows, setRows] = useState(() => getRows(node.props?.data));
+	const [pagination, setPagination] = useState(() => getPagination(node.props?.pagination));
+	const [state, setState] = useState(initialState);
+	const [filters, setFilters] = useState(initialState.filters);
+	const [processing, setProcessing] = useState(isLazy);
+	const [hasLoaded, setHasLoaded] = useState(!isLazy);
+	const infiniteLoaderRef = useRef(null);
+	const currentPage = pagination.currentPage ?? state.page;
+	const isInfinite = (pagination.mode ?? "table") === "infinite";
+	const load = useCallback(async (nextState, append = false) => {
+		if (!endpoint) return;
+		setProcessing(true);
+		try {
+			const result = await (await fetch(buildEndpoint(endpoint, nextState), { headers: {
+				Accept: "application/json",
+				...withRefHeader(componentRef)
+			} })).json();
+			const resultState = getState(result.state);
+			const resultRows = getRows(result.data);
+			setRows((currentRows) => append ? [...currentRows, ...resultRows] : resultRows);
+			setPagination(getPagination(result.pagination));
+			setState(resultState);
+			setFilters(resultState.filters);
+			setHasLoaded(true);
+		} finally {
+			setProcessing(false);
+		}
+	}, [endpoint, componentRef]);
+	function sort(column) {
+		load({
+			...state,
+			page: 1,
+			sorts: nextSort(state.sorts, column)
+		});
+	}
+	function clearSort(sort) {
+		load({
+			...state,
+			page: 1,
+			sorts: state.sorts.filter((currentSort) => currentSort.key !== sort.key)
+		});
+	}
+	function addFilter(clause) {
+		const next = [...filters, clause];
+		setFilters(next);
+		load({
+			...state,
+			filters: next,
+			page: 1
+		});
+	}
+	function updateFilter(index, clause) {
+		const next = filters.map((current, position) => position === index ? clause : current);
+		setFilters(next);
+		load({
+			...state,
+			filters: next,
+			page: 1
+		});
+	}
+	function removeFilter(index) {
+		const next = filters.filter((_, current) => current !== index);
+		setFilters(next);
+		load({
+			...state,
+			filters: next,
+			page: 1
+		});
+	}
+	function goToPage(page) {
+		load({
+			...state,
+			page
+		});
+	}
+	const loadMore = useCallback(() => {
+		if (processing || !pagination.hasMore) return;
+		load({
+			...state,
+			page: pagination.nextPage ?? currentPage + 1
+		}, true);
+	}, [
+		currentPage,
+		load,
+		pagination.hasMore,
+		pagination.nextPage,
+		processing,
+		state
+	]);
+	useEffect(() => {
+		if (!isLazy || hasLoaded) return;
+		load(state);
+	}, [
+		hasLoaded,
+		isLazy,
+		load,
+		state
+	]);
+	useEffect(() => {
+		function reload(event) {
+			if (event.detail?.component !== node.id) return;
+			load(state);
+		}
+		window.addEventListener(LATTICE_EVENT.reloadComponent, reload);
+		return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);
+	}, [
+		load,
+		node.id,
+		state
+	]);
+	useEffect(() => {
+		if (!isInfinite || !pagination.hasMore || processing || !infiniteLoaderRef.current || typeof IntersectionObserver === "undefined") return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) loadMore();
+		}, { rootMargin: "240px" });
+		observer.observe(infiniteLoaderRef.current);
+		return () => observer.disconnect();
+	}, [
+		isInfinite,
+		loadMore,
+		pagination.hasMore,
+		processing
+	]);
+	return {
+		columns,
+		rows,
+		pagination,
+		state,
+		filters,
+		addFilter,
+		updateFilter,
+		removeFilter,
+		processing,
+		hasLoaded,
+		infiniteLoaderRef,
+		sort,
+		clearSort,
+		goToPage,
+		loadMore
+	};
+}
+//#endregion
+export { useTable };
+
+//# sourceMappingURL=use-table.js.map

package/dist/table/use-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table.js","names":[],"sources":["../../resources/js/table/use-table.ts"],"sourcesContent":["import { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport type { Node } from \"@lattice/lattice/core/types\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice/lattice/events/event-names\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { getColumns, getPagination, getRows, getState } from \"./payload\";\nimport { buildEndpoint, nextSort } from \"./query\";\nimport type { FilterClause, TableColumn, TableResponse, TableSort, TableState } from \"./types\";\n\nexport function useTable(node: Node<\"table\">) {\n  const columns = getColumns(node.props?.columns);\n  const endpoint = typeof node.props?.endpoint === \"string\" ? node.props.endpoint : null;\n  const componentRef = typeof node.props?.ref === \"string\" ? node.props.ref : \"\";\n  const isLazy = node.props?.lazy === true;\n  const initialState = useMemo(() => getState(node.props?.state), [node.props?.state]);\n  const [rows, setRows] = useState(() => getRows(node.props?.data));\n  const [pagination, setPagination] = useState(() => getPagination(node.props?.pagination));\n  const [state, setState] = useState(initialState);\n  const [filters, setFilters] = useState(initialState.filters);\n  const [processing, setProcessing] = useState(isLazy);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const infiniteLoaderRef = useRef<HTMLDivElement | null>(null);\n  const currentPage = pagination.currentPage ?? state.page;\n  const isInfinite = (pagination.mode ?? \"table\") === \"infinite\";\n\n  const load = useCallback(\n    async (nextState: TableState, append = false): Promise<void> => {\n      if (!endpoint) {\n        return;\n      }\n\n      setProcessing(true);\n\n      try {\n        const response = await fetch(buildEndpoint(endpoint, nextState), {\n          headers: {\n            Accept: \"application/json\",\n            ...withRefHeader(componentRef),\n          },\n        });\n        const result = (await response.json()) as TableResponse;\n        const resultState = getState(result.state);\n        const resultRows = getRows(result.data);\n\n        setRows((currentRows) => (append ? [...currentRows, ...resultRows] : resultRows));\n        setPagination(getPagination(result.pagination));\n        setState(resultState);\n        setFilters(resultState.filters);\n        setHasLoaded(true);\n      } finally {\n        setProcessing(false);\n      }\n    },\n    [endpoint, componentRef],\n  );\n\n  function sort(column: TableColumn): void {\n    void load({\n      ...state,\n      page: 1,\n      sorts: nextSort(state.sorts, column),\n    });\n  }\n\n  function clearSort(sort: TableSort): void {\n    void load({\n      ...state,\n      page: 1,\n      sorts: state.sorts.filter((currentSort) => currentSort.key !== sort.key),\n    });\n  }\n\n  function addFilter(clause: FilterClause): void {\n    const next = [...filters, clause];\n\n    setFilters(next);\n    void load({\n      ...state,\n      filters: next,\n      page: 1,\n    });\n  }\n\n  function updateFilter(index: number, clause: FilterClause): void {\n    const next = filters.map((current, position) => (position === index ? clause : current));\n\n    setFilters(next);\n    void load({\n      ...state,\n      filters: next,\n      page: 1,\n    });\n  }\n\n  function removeFilter(index: number): void {\n    const next = filters.filter((_, current) => current !== index);\n\n    setFilters(next);\n    void load({\n      ...state,\n      filters: next,\n      page: 1,\n    });\n  }\n\n  function goToPage(page: number): void {\n    void load({\n      ...state,\n      page,\n    });\n  }\n\n  const loadMore = useCallback((): void => {\n    if (processing || !pagination.hasMore) {\n      return;\n    }\n\n    void load(\n      {\n        ...state,\n        page: pagination.nextPage ?? currentPage + 1,\n      },\n      true,\n    );\n  }, [currentPage, load, pagination.hasMore, pagination.nextPage, processing, state]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load(state);\n  }, [hasLoaded, isLazy, load, state]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load(state);\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id, state]);\n\n  useEffect(() => {\n    if (\n      !isInfinite ||\n      !pagination.hasMore ||\n      processing ||\n      !infiniteLoaderRef.current ||\n      typeof IntersectionObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          loadMore();\n        }\n      },\n      {\n        rootMargin: \"240px\",\n      },\n    );\n\n    observer.observe(infiniteLoaderRef.current);\n\n    return () => observer.disconnect();\n  }, [isInfinite, loadMore, pagination.hasMore, processing]);\n\n  return {\n    columns,\n    rows,\n    pagination,\n    state,\n    filters,\n    addFilter,\n    updateFilter,\n    removeFilter,\n    processing,\n    hasLoaded,\n    infiniteLoaderRef,\n    sort,\n    clearSort,\n    goToPage,\n    loadMore,\n  };\n}\n"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { MenuGroup, MenuItem, MenuPayload, Node, NodeProps, PageContainer, PageBreadcrumb, PagePayload, RendererComponent, } from '../../..';
+export type { Method } from '@inertiajs/core';

package/package.json

@@ -0,0 +1,151 @@
+{
+  "name": "@lattice-php/lattice",
+  "version": "0.1.0",
+  "description": "Server-driven React components for Laravel and Inertia.",
+  "license": "MIT",
+  "author": "Manuel Christlieb <manuel@christlieb.eu>",
+  "type": "module",
+  "homepage": "https://latticephp.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lattice-php/lattice.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lattice-php/lattice/issues"
+  },
+  "keywords": [
+    "laravel",
+    "inertia",
+    "react",
+    "server-driven-ui"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./css": "./dist/lattice.css",
+    "./action": {
+      "types": "./dist/action/index.d.ts",
+      "import": "./dist/action/index.js"
+    },
+    "./appearance": {
+      "types": "./dist/appearance/index.d.ts",
+      "import": "./dist/appearance/index.js"
+    },
+    "./clipboard": {
+      "types": "./dist/clipboard/index.d.ts",
+      "import": "./dist/clipboard/index.js"
+    },
+    "./core/components": {
+      "types": "./dist/core/components/index.d.ts",
+      "import": "./dist/core/components/index.js"
+    },
+    "./form": {
+      "types": "./dist/form/index.d.ts",
+      "import": "./dist/form/index.js"
+    },
+    "./form/components": {
+      "types": "./dist/form/components/index.d.ts",
+      "import": "./dist/form/components/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
+    },
+    "./menu": {
+      "types": "./dist/menu/index.d.ts",
+      "import": "./dist/menu/index.js"
+    },
+    "./table": {
+      "types": "./dist/table/index.d.ts",
+      "import": "./dist/table/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --mode lib",
+    "prepack": "npm run build:lib",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint resources/js workbench/resources/js",
+    "lint:fix": "oxlint resources/js workbench/resources/js --fix",
+    "lint:github": "oxlint resources/js workbench/resources/js --format=github",
+    "format": "oxfmt --write \"resources/js/**/*.{ts,tsx}\" \"workbench/resources/js/**/*.{ts,tsx}\"",
+    "format:check": "oxfmt --check \"resources/js/**/*.{ts,tsx}\" \"workbench/resources/js/**/*.{ts,tsx}\"",
+    "docs:dev": "astro dev",
+    "docs:build": "astro build",
+    "docs:preview": "astro preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@tiptap/extension-details": "^3.26.0",
+    "@tiptap/extension-highlight": "^3.26.0",
+    "@tiptap/extension-link": "^3.26.0",
+    "@tiptap/extension-table": "^3.26.0",
+    "@tiptap/extension-text-align": "^3.26.0",
+    "@tiptap/pm": "^3.26.0",
+    "@tiptap/react": "^3.26.0",
+    "@tiptap/starter-kit": "^3.26.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.17.0",
+    "tailwind-merge": "^3.0.1"
+  },
+  "peerDependencies": {
+    "@inertiajs/react": "^3.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/starlight": "^0.40.0",
+    "@astrojs/starlight-tailwind": "^5.0.0",
+    "@inertiajs/react": "^3.0.0",
+    "@inertiajs/vite": "^3.0.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^25.9.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "astro": "7.0.0-beta.3",
+    "jsdom": "^29.1.1",
+    "laravel-vite-plugin": "^3.0.0",
+    "oxfmt": "^0.54.0",
+    "oxlint": "^1.68.0",
+    "playwright": "^1.60.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.0.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.8"
+  }
+}