@jay-framework/wix-data 0.15.0

package/README.md

@@ -0,0 +1,151 @@
+# @jay-framework/wix-data
+
+Wix Data API client for the Jay Framework. This package provides a convenient wrapper around `@wix/data` that uses the configured Wix client from `@jay-framework/wix-server-client`.
+
+## Installation
+
+```bash
+yarn add @jay-framework/wix-data
+```
+
+## Prerequisites
+
+Make sure you have configured `@jay-framework/wix-server-client` with a valid `./config/.wix.yaml` file. See the [wix-server-client documentation](../wix-server-client/README.md) for configuration details.
+
+## Usage
+
+### Quick Start
+
+```typescript
+import { getItemsClient, getCollectionsClient } from '@jay-framework/wix-data';
+
+// Get pre-configured clients
+const itemsClient = getItemsClient();
+const collectionsClient = getCollectionsClient();
+
+// Query data items
+const results = await itemsClient
+  .queryDataItems({
+    dataCollectionId: 'myCollection',
+  })
+  .find();
+
+// Get collections
+const allCollections = await collectionsClient.listDataCollections();
+```
+
+### Advanced Usage
+
+You can also use the Wix client directly:
+
+```typescript
+import { getClient } from '@jay-framework/wix-server-client';
+import { items, collections } from '@jay-framework/wix-data';
+
+const wixClient = getClient();
+const itemsClient = wixClient.use(items);
+const collectionsClient = wixClient.use(collections);
+
+// Use the clients...
+```
+
+### Working with Data Items
+
+```typescript
+import { getItemsClient } from '@jay-framework/wix-data';
+
+const itemsClient = getItemsClient();
+
+// Query items
+const items = await itemsClient
+  .queryDataItems({
+    dataCollectionId: 'products',
+  })
+  .eq('status', 'active')
+  .find();
+
+// Get a single item
+const item = await itemsClient.getDataItem('item-id', { dataCollectionId: 'products' });
+
+// Insert an item
+const newItem = await itemsClient.insertDataItem({
+  dataCollectionId: 'products',
+  dataItem: {
+    data: {
+      name: 'New Product',
+      price: 29.99,
+    },
+  },
+});
+
+// Update an item
+const updatedItem = await itemsClient.updateDataItem('item-id', {
+  dataCollectionId: 'products',
+  dataItem: {
+    data: {
+      price: 24.99,
+    },
+  },
+});
+
+// Remove an item
+await itemsClient.removeDataItem('item-id', { dataCollectionId: 'products' });
+```
+
+### Working with Collections
+
+```typescript
+import { getCollectionsClient } from '@jay-framework/wix-data';
+
+const collectionsClient = getCollectionsClient();
+
+// List all collections
+const collections = await collectionsClient.listDataCollections();
+
+// Get a specific collection
+const collection = await collectionsClient.getDataCollection('myCollection');
+```
+
+## API Reference
+
+### `getItemsClient()`
+
+Returns a configured Wix Data Items client (singleton).
+
+The Items API allows you to access and manage items in a Wix site's data collections.
+
+**Returns:** Items client instance from `@wix/data`
+
+**Documentation:** [Wix Data Items API](https://dev.wix.com/docs/sdk/backend-modules/data/items/introduction)
+
+### `getCollectionsClient()`
+
+Returns a configured Wix Data Collections client (singleton).
+
+The Collections API allows you to manage a site's data collections.
+
+**Returns:** Collections client instance from `@wix/data`
+
+**Documentation:** [Wix Data Collections API](https://dev.wix.com/docs/sdk/backend-modules/data/collections/introduction)
+
+## Re-exported Types
+
+This package re-exports all types and functions from `@wix/data`, so you can import them directly:
+
+```typescript
+import {
+  items,
+  collections,
+  type DataItem,
+  type DataCollection,
+  // ... all other exports from @wix/data
+} from '@jay-framework/wix-data';
+```
+
+## Configuration
+
+This package uses the configuration from `@jay-framework/wix-server-client`. Make sure you have a `./config/.wix.yaml` file configured. See the [wix-server-client README](../wix-server-client/README.md) for details.
+
+## License
+
+Apache-2.0

package/dist/actions/get-categories.jay-action

@@ -0,0 +1,12 @@
+name: getCategories
+description: Get categories for a Wix Data collection. Returns category names, slugs, and item counts.
+
+inputSchema:
+  collectionId: string
+
+outputSchema:
+  categories:
+    - _id: string
+      slug: string
+      title: string
+      itemCount: number

package/dist/actions/get-item-by-slug.jay-action

@@ -0,0 +1,9 @@
+name: getItemBySlug
+description: Get a single item from a Wix Data collection by its URL slug. Returns the item data or null if not found.
+
+inputSchema:
+  collectionId: string
+  slug: string
+
+outputSchema:
+  item: {}

package/dist/actions/query-items.jay-action

@@ -0,0 +1,19 @@
+name: queryItems
+description: Query items from a Wix Data collection with pagination, sorting, and filtering. Returns matching items with total count.
+
+inputSchema:
+  collectionId: string
+  limit?: number
+  offset?: number
+  sortField?: string
+  sortDirection?: enum(ASC | DESC)
+  filter?: {}
+  categoryId?: string
+  categoryField?: string
+
+outputSchema:
+  items:
+    - {}
+  totalCount: number
+  offset: number
+  hasMore: boolean

package/dist/index.client.js

@@ -0,0 +1,244 @@
+import { makeJayStackComponent, makeJayInit } from "@jay-framework/fullstack-component";
+import { createActionCaller } from "@jay-framework/stack-client-runtime";
+import { registerReactiveGlobalContext, createSignal } from "@jay-framework/component";
+import { createJayContext, useGlobalContext } from "@jay-framework/runtime";
+import { WIX_CLIENT_CONTEXT } from "@jay-framework/wix-server-client/client";
+import { items } from "@wix/data";
+const collectionItem = makeJayStackComponent().withProps();
+function parseWixMediaUrl(url) {
+  if (!url) return null;
+  const match = url.match(
+    /^wix:(image|video|document|audio):\/\/v1\/([^/]+)\/([^#]+)(?:#(.*))?$/
+  );
+  if (!match) return null;
+  const [, type, mediaId, fileName, hashParams] = match;
+  const result = {
+    type,
+    mediaId,
+    fileName: decodeURIComponent(fileName)
+  };
+  if (hashParams) {
+    const params = new URLSearchParams(hashParams);
+    const originWidth = params.get("originWidth");
+    const originHeight = params.get("originHeight");
+    if (originWidth) result.originWidth = parseInt(originWidth, 10);
+    if (originHeight) result.originHeight = parseInt(originHeight, 10);
+    const posterUri = params.get("posterUri");
+    const posterWidth = params.get("posterWidth");
+    const posterHeight = params.get("posterHeight");
+    if (posterUri) result.posterUri = decodeURIComponent(posterUri);
+    if (posterWidth) result.posterWidth = parseInt(posterWidth, 10);
+    if (posterHeight) result.posterHeight = parseInt(posterHeight, 10);
+  }
+  return result;
+}
+function formatWixMediaUrl(_id, url, resize) {
+  const resizeFragment = "";
+  if (url == null ? void 0 : url.startsWith("wix:")) {
+    const parsed = parseWixMediaUrl(url);
+    if (parsed) {
+      return `https://static.wixstatic.com/media/${parsed.mediaId}${resizeFragment}`;
+    }
+  }
+  if ((url == null ? void 0 : url.startsWith("http://")) || (url == null ? void 0 : url.startsWith("https://"))) {
+    return url;
+  }
+  return "";
+}
+const queryItems = createActionCaller("wixData.queryItems", "GET");
+createActionCaller("wixData.getItemBySlug", "GET");
+createActionCaller("wixData.getCategories", "GET");
+const PAGE_SIZE = 20;
+function ListInteractive(_props, refs, viewStateSignals, fastCarryForward) {
+  const { loadedItems: [loadedItems, setLoadedItems], hasMore: [hasMore, setHasMore], isLoading: [isLoading, setIsLoading], loadedCount: [loadedCount, setLoadedCount] } = viewStateSignals;
+  let currentOffset = fastCarryForward.offset;
+  const { collectionId, categoryId, categoryField, totalCount, pathPrefix, slugField, fieldWhitelist } = fastCarryForward;
+  refs.loadMoreButton?.onclick(async () => {
+    if (currentOffset >= totalCount || isLoading())
+      return;
+    setIsLoading(true);
+    try {
+      const result = await queryItems({
+        collectionId,
+        limit: PAGE_SIZE,
+        offset: currentOffset,
+        categoryId,
+        categoryField
+      });
+      const newItems = result.items.map((item) => mapItemToViewState(item, pathPrefix, slugField, fieldWhitelist));
+      currentOffset += newItems.length;
+      setLoadedItems([...loadedItems(), ...newItems]);
+      setLoadedCount(loadedCount() + newItems.length);
+      setHasMore(result.hasMore);
+    } catch (error) {
+      console.error("[wix-data] Failed to load more items:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  });
+  return {
+    render: () => ({
+      loadedItems: loadedItems(),
+      hasMore: hasMore(),
+      isLoading: isLoading(),
+      loadedCount: loadedCount()
+    })
+  };
+}
+function isImageValue(value) {
+  if (typeof value === "string" && value.startsWith("wix:image://"))
+    return true;
+  if (typeof value === "object" && value !== null && ("src" in value || "url" in value))
+    return true;
+  return false;
+}
+function mapImageField(imgValue, altText) {
+  if (!imgValue)
+    return void 0;
+  if (typeof imgValue === "string") {
+    const parsed = parseWixMediaUrl(imgValue);
+    return {
+      url: formatWixMediaUrl("", imgValue),
+      altText: altText || "",
+      width: parsed?.originWidth,
+      height: parsed?.originHeight
+    };
+  }
+  if (typeof imgValue === "object" && imgValue !== null) {
+    const img = imgValue;
+    const srcUrl = img.src || img.url || "";
+    const parsed = parseWixMediaUrl(srcUrl);
+    return {
+      url: formatWixMediaUrl("", srcUrl),
+      altText: img.alt || altText || "",
+      width: parsed?.originWidth ?? img.width,
+      height: parsed?.originHeight ?? img.height
+    };
+  }
+  return void 0;
+}
+function mapItemToViewState(item, pathPrefix, slugField, whitelist) {
+  const mapped = {
+    _id: item._id,
+    url: `${pathPrefix}/${item[slugField] || item._id}`
+  };
+  const keysToInclude = whitelist || Object.keys(item).filter((k) => !k.startsWith("_"));
+  const titleValue = item.title || item.name;
+  const altText = typeof titleValue === "string" ? titleValue : "";
+  keysToInclude.forEach((key) => {
+    const value = item[key];
+    if (isImageValue(value)) {
+      mapped[key] = mapImageField(value, altText);
+    } else {
+      mapped[key] = value || "";
+    }
+  });
+  return mapped;
+}
+const collectionList = makeJayStackComponent().withProps().withInteractive(ListInteractive);
+const collectionCard = makeJayStackComponent().withProps();
+const WIX_DATA_CONTEXT = createJayContext();
+function provideWixDataContext() {
+  const wixClientContext = useGlobalContext(WIX_CLIENT_CONTEXT);
+  const wixClient = wixClientContext.client;
+  const itemsClient = wixClient.use(items);
+  const context = registerReactiveGlobalContext(WIX_DATA_CONTEXT, () => ({
+    items: itemsClient
+  }));
+  console.log("[wix-data] Client data context initialized");
+  return context;
+}
+function formatCellValue(value) {
+  if (value === null || value === void 0)
+    return "";
+  if (typeof value === "string")
+    return value;
+  if (typeof value === "number")
+    return String(value);
+  if (typeof value === "boolean")
+    return value ? "Yes" : "No";
+  if (value instanceof Date)
+    return value.toLocaleDateString();
+  if (typeof value === "object")
+    return JSON.stringify(value);
+  return String(value);
+}
+function TableInteractive(_props, refs, viewStateSignals, fastCarryForward, wixDataContext) {
+  const { currentPage: [currentPage, setCurrentPage], hasPrev: [hasPrev, setHasPrev], hasNext: [hasNext, setHasNext], sortField: [sortField, setSortField], sortDirection: [sortDirection, setSortDirection] } = viewStateSignals;
+  const { collectionId, pageSize, totalCount } = fastCarryForward;
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const [rows, setRows] = createSignal([]);
+  const [isLoading, setIsLoading] = createSignal(false);
+  async function fetchPage(page) {
+    setIsLoading(true);
+    try {
+      const result = await wixDataContext.items.queryDataItems({
+        dataCollectionId: collectionId
+      }).limit(pageSize).skip((page - 1) * pageSize).find();
+      const newRows = result.items.map((item) => ({
+        _id: item._id,
+        url: `/${collectionId.toLowerCase()}/${item._id}`,
+        cells: fastCarryForward.columns.map((fieldName) => ({
+          fieldName,
+          value: formatCellValue(item[fieldName])
+        }))
+      }));
+      setRows(newRows);
+      setCurrentPage(page);
+      setHasPrev(page > 1);
+      setHasNext(page < totalPages);
+    } catch (error) {
+      console.error("[wix-data] Failed to fetch page:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  refs.prevButton?.onclick(() => {
+    if (hasPrev() && !isLoading()) {
+      fetchPage(currentPage() - 1);
+    }
+  });
+  refs.nextButton?.onclick(() => {
+    if (hasNext() && !isLoading()) {
+      fetchPage(currentPage() + 1);
+    }
+  });
+  refs.columns?.headerButton?.onclick(({ coordinate }) => {
+    const [fieldName] = coordinate;
+    if (sortField() === fieldName) {
+      const newDirection = sortDirection() === "ASC" ? "DESC" : sortDirection() === "DESC" ? "NONE" : "ASC";
+      setSortDirection(newDirection);
+      if (newDirection === "NONE") {
+        setSortField(null);
+      }
+    } else {
+      setSortField(fieldName);
+      setSortDirection("ASC");
+    }
+    fetchPage(1);
+  });
+  return {
+    render: () => ({
+      currentPage: currentPage(),
+      hasPrev: hasPrev(),
+      hasNext: hasNext(),
+      sortField: sortField(),
+      sortDirection: sortDirection()
+    })
+  };
+}
+const collectionTable = makeJayStackComponent().withProps().withContexts(WIX_DATA_CONTEXT).withInteractive(TableInteractive);
+const init = makeJayInit().withClient(async (data) => {
+  console.log("[wix-data] Initializing client-side data context...");
+  provideWixDataContext();
+  console.log(`[wix-data] Client initialization complete. Collections: ${data.collections.join(", ")}`);
+});
+export {
+  WIX_DATA_CONTEXT,
+  collectionCard,
+  collectionItem,
+  collectionList,
+  collectionTable,
+  init,
+  provideWixDataContext
+};