@asteby/metacore-runtime-react 7.1.3 → 7.1.5

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @asteby/metacore-runtime-react
 
+## 7.1.5
+
+### Patch Changes
+
+- 922d63b: Add `<MetacoreAppShell>` — single-line provider wiring for metacore apps.
+
+  Today every app reproduces the same eight-deep wedding cake of providers (QueryClient + ApiProvider + PWAProvider + Toaster + install/update/offline prompts + metadata cache invalidation). The new shell collapses it into:
+
+  ```tsx
+  import { MetacoreAppShell } from "@asteby/metacore-app-providers";
+
+  <MetacoreAppShell api={api} queryClient={queryClient}>
+    <RouterProvider router={router} />
+  </MetacoreAppShell>;
+  ```
+
+  What it bundles:
+  - `QueryClientProvider` (when `queryClient` is supplied)
+  - `ApiProvider` from `runtime-react`
+  - `PWAProvider` + `PWAInstallPrompt` + `PWAUpdatePrompt` + `OfflineIndicator`
+  - `Toaster` from `metacore-ui`
+  - A `MetadataInvalidator` that clears `useMetadataCache` the moment the PWA layer reports a new service worker — so the next mount of `<DynamicTable>` fetches fresh column / filter / actions definitions instead of replaying yesterday's metadata. Resolves the stale-cache bug where adding `filterable: true` to a column on the backend was invisible until users cleared localStorage.
+
+  Apps that want a subset can pass `hidePWAInstall` / `hidePWAUpdate` / `hideOfflineIndicator` / `hideToaster` / `disableMetadataInvalidate` to opt out per layer.
+
+  `runtime-react` patch: also switches `<DynamicTable>` to stale-while-revalidate metadata fetch (paint with cache, always re-fetch in background) so the shell isn't the only path that picks up backend changes.
+
+- 922d63b: Auto-derive `date_range` filter for `type: 'date'` columns.
+
+  The zero-config filter chip in 7.1.0 picked the right variant for text/number/boolean/select but mapped `type: 'date'` to a generic text filter. `FilterableColumnHeader` already supports `date_range` — pointing the auto-derive at it makes any column flagged `filterable: true` with `type: 'date'` light up the calendar range picker without app-side glue.
+
+## 7.1.4
+
+### Patch Changes
+
+- c985453: Auto-derive `date_range` filter for `type: 'date'` columns.
+
+  The zero-config filter chip in 7.1.0 picked the right variant for text/number/boolean/select but mapped `type: 'date'` to a generic text filter. `FilterableColumnHeader` already supports `date_range` — pointing the auto-derive at it makes any column flagged `filterable: true` with `type: 'date'` light up the calendar range picker without app-side glue.
+
 ## 7.1.3
 
 ### Patch Changes

package/dist/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AA+B9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AASnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACxC;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,GAC/C,EAAE,iBAAiB,2CAsrBnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AA+B9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AASnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACxC;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,GAC/C,EAAE,iBAAiB,2CA8rBnB"}

package/dist/dynamic-table.js

@@ -191,35 +191,42 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             return;
         metaInitRef.current = true;
         const initMetadataAndOptions = async () => {
-            let meta;
             const cached = getMetadata(model);
+            // Stale-while-revalidate: paint with the cached metadata if any so
+            // the table renders instantly, then always re-fetch in the
+            // background so a backend metadata change (new column, new
+            // filterable flag) propagates without users having to clear
+            // localStorage.
             if (cached) {
-                meta = cached;
-                setMetadata(meta);
+                setMetadata(cached);
                 if (!urlHadPerPage.current)
-                    setPagination((prev) => ({ ...prev, pageSize: meta.defaultPerPage || 10 }));
+                    setPagination((prev) => ({ ...prev, pageSize: cached.defaultPerPage || 10 }));
                 setLoading(false);
             }
             else {
                 setLoading(true);
-                try {
-                    const res = await api.get(`/metadata/table/${model}`);
-                    if (!res.data.success)
-                        return;
-                    meta = res.data.data;
-                    setMetadata(meta);
-                    cacheMetadata(model, meta);
+            }
+            let meta = cached || null;
+            try {
+                const res = await api.get(`/metadata/table/${model}`);
+                if (res.data.success) {
+                    const fresh = res.data.data;
+                    meta = fresh;
+                    setMetadata(fresh);
+                    cacheMetadata(model, fresh);
                     if (!urlHadPerPage.current)
-                        setPagination((prev) => ({ ...prev, pageSize: meta.defaultPerPage || 10 }));
+                        setPagination((prev) => ({ ...prev, pageSize: fresh.defaultPerPage || 10 }));
                 }
-                catch (error) {
+            }
+            catch (error) {
+                if (!cached)
                     console.error('Error al cargar la configuración de la tabla', error);
-                    return;
-                }
-                finally {
-                    setLoading(false);
-                }
             }
+            finally {
+                setLoading(false);
+            }
+            if (!meta)
+                return;
             const columnEndpoints = meta.columns.filter(c => c.useOptions && c.searchEndpoint).map(c => c.searchEndpoint);
             const filterEndpoints = (meta.filters || []).filter(f => f.searchEndpoint && (f.type === 'select' || f.type === 'boolean')).map(f => f.searchEndpoint);
             const allEndpoints = [...columnEndpoints, ...filterEndpoints];
@@ -473,6 +480,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             //   - explicit options or searchEndpoint → multi-select dropdown
             //   - boolean → boolean toggle (renders as select under the hood)
             //   - number / number_range / numeric → number range
+            //   - date → date range picker (start/end calendar)
             //   - everything else (text, email, phone, tags…) → text contains
             let filterType = 'select';
             if (hasStaticOptions || hasEndpoint)
@@ -481,6 +489,8 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 filterType = 'boolean';
             else if (c.type === 'number')
                 filterType = 'number_range';
+            else if (c.type === 'date')
+                filterType = 'date_range';
             else
                 filterType = 'text';
             const options = hasStaticOptions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "7.1.3",
+  "version": "7.1.5",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -46,13 +46,13 @@
     "@tanstack/react-table": "^8.20.0",
     "@types/react": "^19.0.0",
     "date-fns": "^4.1.0",
-    "i18next": "^23.16.0",
-    "lucide-react": "^0.460.0",
+    "i18next": "^26.0.0",
+    "lucide-react": "^1.0.0",
     "react": "^19.2.4",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.0.0",
     "react-dom": "^19.2.4",
-    "react-i18next": "^15.1.0",
-    "sonner": "^1.7.0",
+    "react-i18next": "^17.0.0",
+    "sonner": "^2.0.0",
     "typescript": "^5.6.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "2.2.0",

package/src/dynamic-table.tsx

@@ -269,29 +269,35 @@ export function DynamicTable({
         if (metaInitRef.current) return
         metaInitRef.current = true
         const initMetadataAndOptions = async () => {
-            let meta: TableMetadata
             const cached = getMetadata(model)
+            // Stale-while-revalidate: paint with the cached metadata if any so
+            // the table renders instantly, then always re-fetch in the
+            // background so a backend metadata change (new column, new
+            // filterable flag) propagates without users having to clear
+            // localStorage.
             if (cached) {
-                meta = cached
-                setMetadata(meta)
-                if (!urlHadPerPage.current) setPagination((prev: PaginationState) => ({ ...prev, pageSize: meta.defaultPerPage || 10 }))
+                setMetadata(cached)
+                if (!urlHadPerPage.current) setPagination((prev: PaginationState) => ({ ...prev, pageSize: cached.defaultPerPage || 10 }))
                 setLoading(false)
             } else {
                 setLoading(true)
-                try {
-                    const res = await api.get(`/metadata/table/${model}`) as { data: ApiResponse<TableMetadata> }
-                    if (!res.data.success) return
-                    meta = res.data.data
-                    setMetadata(meta)
-                    cacheMetadata(model, meta)
-                    if (!urlHadPerPage.current) setPagination((prev: PaginationState) => ({ ...prev, pageSize: meta.defaultPerPage || 10 }))
-                } catch (error) {
-                    console.error('Error al cargar la configuración de la tabla', error)
-                    return
-                } finally {
-                    setLoading(false)
+            }
+            let meta: TableMetadata | null = cached || null
+            try {
+                const res = await api.get(`/metadata/table/${model}`) as { data: ApiResponse<TableMetadata> }
+                if (res.data.success) {
+                    const fresh = res.data.data
+                    meta = fresh
+                    setMetadata(fresh)
+                    cacheMetadata(model, fresh)
+                    if (!urlHadPerPage.current) setPagination((prev: PaginationState) => ({ ...prev, pageSize: fresh.defaultPerPage || 10 }))
                 }
+            } catch (error) {
+                if (!cached) console.error('Error al cargar la configuración de la tabla', error)
+            } finally {
+                setLoading(false)
             }
+            if (!meta) return
             const columnEndpoints = meta.columns.filter(c => c.useOptions && c.searchEndpoint).map(c => c.searchEndpoint!)
             const filterEndpoints = (meta.filters || []).filter(f => f.searchEndpoint && (f.type === 'select' || f.type === 'boolean')).map(f => f.searchEndpoint!)
             const allEndpoints = [...columnEndpoints, ...filterEndpoints]
@@ -511,11 +517,13 @@ export function DynamicTable({
             //   - explicit options or searchEndpoint → multi-select dropdown
             //   - boolean → boolean toggle (renders as select under the hood)
             //   - number / number_range / numeric → number range
+            //   - date → date range picker (start/end calendar)
             //   - everything else (text, email, phone, tags…) → text contains
             let filterType: ColumnFilterConfig['filterType'] = 'select'
             if (hasStaticOptions || hasEndpoint) filterType = 'select'
             else if (c.type === 'boolean') filterType = 'boolean'
             else if (c.type === 'number') filterType = 'number_range'
+            else if (c.type === 'date') filterType = 'date_range'
             else filterType = 'text'
 
             const options = hasStaticOptions