@wix/headless-instagram 0.0.1

package/dist/services/instagram-feed-service.js

@@ -0,0 +1,196 @@
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+import { accounts } from '@wix/instagram-account';
+import { media } from '@wix/instagram-media';
+/**
+ * Default Instagram feed data
+ */
+const defaultInstagramFeedData = {
+    mediaItems: [],
+    hasMore: false,
+};
+/**
+ * Service definition for the Instagram Feed service.
+ * This defines the reactive API contract for managing Instagram feed data.
+ */
+export const InstagramFeedServiceDefinition = defineService('instagram-feed');
+/**
+ * Implementation of the Instagram Feed service that manages reactive Instagram feed data.
+ * This service provides signals for feed data, loading state, and error handling,
+ * along with methods to dynamically load and refresh Instagram content.
+ *
+ * @example
+ * ```tsx
+ * import { InstagramFeedService, InstagramFeedServiceDefinition } from '@wix/instagram/services';
+ * import { useService } from '@wix/services-manager-react';
+ *
+ * function InstagramComponent({ feedConfig }) {
+ *   return (
+ *     <ServiceProvider services={createServicesMap([
+ *       [InstagramFeedServiceDefinition, InstagramFeedService.withConfig(feedConfig)]
+ *     ])}>
+ *       <InstagramDisplay />
+ *     </ServiceProvider>
+ *   );
+ * }
+ *
+ * function InstagramDisplay() {
+ *   const feedService = useService(InstagramFeedServiceDefinition);
+ *   const feedData = feedService.feedData.get();
+ *   const isLoading = feedService.isLoading.get();
+ *   const error = feedService.error.get();
+ *
+ *   if (isLoading) return <div>Loading Instagram feed...</div>;
+ *   if (error) return <div>Error: {error}</div>;
+ *
+ *   return <div>{feedData.mediaItems.length} posts loaded</div>;
+ * }
+ * ```
+ */
+export const InstagramFeedService = implementService.withConfig()(InstagramFeedServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    const feedData = signalsService.signal(config.feedData || defaultInstagramFeedData);
+    const isLoading = signalsService.signal(!!config.accountId);
+    const error = signalsService.signal(null);
+    const loadFeed = async (accountId, cursor) => {
+        try {
+            isLoading.set(true);
+            error.set(null);
+            // Load Instagram account information
+            const accountResponse = await accounts.getInstagramAccount(accountId);
+            // Load Instagram media for the account
+            const mediaResponse = await media.listInstagramAccountMedia(accountId);
+            // Transform SDK media to our interface format
+            const transformedMedia = mediaResponse.media?.map((mediaItem) => ({
+                id: mediaItem._id || mediaItem.mediaId || '',
+                type: (mediaItem.mediaType || 'image'),
+                mediaUrl: mediaItem.mediaUrl || '',
+                thumbnailUrl: mediaItem.thumbnailUrl || undefined,
+                caption: mediaItem.caption,
+                permalink: mediaItem.permalink || '',
+                timestamp: typeof mediaItem.timestamp === 'string'
+                    ? mediaItem.timestamp
+                    : new Date().toISOString(),
+                altText: mediaItem.caption ||
+                    `Instagram post ${mediaItem._id || mediaItem.mediaId}`,
+            })) || [];
+            const newFeedData = {
+                account: accountResponse,
+                mediaItems: cursor
+                    ? [...feedData.get().mediaItems, ...transformedMedia]
+                    : transformedMedia,
+                hasMore: false, // Note: Real pagination logic would depend on actual SDK response structure
+                nextCursor: undefined,
+            };
+            feedData.set(newFeedData);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error
+                ? err.message
+                : 'Failed to load Instagram feed';
+            error.set(errorMessage);
+        }
+        finally {
+            isLoading.set(false);
+        }
+    };
+    const loadMore = async () => {
+        const currentData = feedData.get();
+        if (!currentData.hasMore || isLoading.get())
+            return;
+        if (config.accountId) {
+            await loadFeed(config.accountId, currentData.nextCursor);
+        }
+    };
+    const refresh = async () => {
+        if (config.accountId) {
+            await loadFeed(config.accountId);
+        }
+    };
+    // Initial load if accountId is provided
+    if (config.accountId && !config.feedData) {
+        loadFeed(config.accountId);
+    }
+    return {
+        feedData,
+        isLoading,
+        error,
+        loadMore,
+        refresh,
+    };
+});
+/**
+ * Input object for loading Instagram feed service configuration
+ */
+/**
+ * Loads Instagram feed service configuration from the Wix Instagram API for SSR initialization.
+ * This function is designed to be used during Server-Side Rendering (SSR) to preload
+ * Instagram feed data that will be used to configure the InstagramFeedService.
+ *
+ * @param input InstagramFeedServiceConfig object containing accountId and optional limit
+ * @returns Promise that resolves to InstagramFeedServiceConfigResult (success with config or notFound)
+ *
+ * @example
+ * ```tsx
+ * import { loadInstagramFeedServiceConfig } from '@wix/instagram/services';
+ *
+ * // In your SSR handler or server action
+ * const configResult = await loadInstagramFeedServiceConfig({
+ *   accountId: 'instagram_account_123',
+ *   limit: 12
+ * });
+ *
+ * if (configResult.type === 'success') {
+ *   // Use configResult.config to initialize InstagramFeedService
+ *   return configResult.config;
+ * } else {
+ *   // Handle not found case
+ *   return { accountId: 'instagram_account_123' }; // fallback config
+ * }
+ * ```
+ */
+export async function loadInstagramFeedServiceConfig(input) {
+    try {
+        const { accountId, limit } = input;
+        if (!accountId) {
+            return { type: 'notFound' };
+        }
+        // Load Instagram account information using SDK
+        const accountResponse = await accounts.getInstagramAccount(accountId);
+        if (!accountResponse) {
+            return { type: 'notFound' };
+        }
+        // Load initial media items using SDK
+        const mediaResponse = await media.listInstagramAccountMedia(accountId);
+        // Transform SDK media to our interface format
+        const transformedMedia = mediaResponse.media?.map((mediaItem) => ({
+            id: mediaItem._id || mediaItem.mediaId || '',
+            type: (mediaItem.mediaType || 'image'),
+            mediaUrl: mediaItem.mediaUrl || '',
+            thumbnailUrl: mediaItem.thumbnailUrl || undefined,
+            caption: mediaItem.caption,
+            permalink: mediaItem.permalink || '',
+            timestamp: typeof mediaItem.timestamp === 'string'
+                ? mediaItem.timestamp
+                : new Date().toISOString(),
+            altText: mediaItem.caption ||
+                `Instagram post ${mediaItem._id || mediaItem.mediaId}`,
+        })) || [];
+        const feedData = {
+            account: accountResponse,
+            mediaItems: transformedMedia,
+            hasMore: false, // Note: Real pagination logic would depend on actual SDK response structure
+            nextCursor: undefined,
+        };
+        const config = {
+            accountId,
+            limit,
+            feedData,
+        };
+        return { type: 'success', config };
+    }
+    catch (error) {
+        console.error('Failed to load Instagram feed config:', error);
+        return { type: 'notFound' };
+    }
+}

package/dist/services/instagram-media-item-service.d.ts

@@ -0,0 +1,73 @@
+import { type Signal } from '@wix/services-definitions/core-services/signals';
+import type { InstagramMediaItem } from './instagram-feed-service.js';
+/**
+ * API interface for Instagram Media Item service
+ */
+export interface InstagramMediaItemServiceAPI {
+    /** Reactive signal containing the media item data */
+    mediaItem: Signal<InstagramMediaItem>;
+    /** Reactive signal containing the media item index */
+    index: Signal<number>;
+}
+/**
+ * Configuration for Instagram Media Item service
+ */
+export interface InstagramMediaItemServiceConfig {
+    /** The Instagram media item data */
+    mediaItem: InstagramMediaItem;
+    /** The index of this media item in the gallery */
+    index: number;
+}
+/**
+ * Service definition for Instagram Media Item
+ */
+export declare const InstagramMediaItemServiceDefinition: string & {
+    __api: InstagramMediaItemServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & InstagramMediaItemServiceAPI;
+/**
+ * Implementation of the Instagram Media Item service that manages reactive media item data.
+ * This service provides signals for individual media item data and its index position.
+ * Used by gallery components to access media item information in a service-based architecture.
+ *
+ * @example
+ * ```tsx
+ * import { InstagramMediaItemService, InstagramMediaItemServiceDefinition } from '@wix/headless-instagram/services';
+ * import { useService } from '@wix/services-manager-react';
+ * import { WixServices, createServicesMap } from '@wix/services-manager';
+ *
+ * function MediaItemComponent({ mediaItem, index }) {
+ *   return (
+ *     <WixServices
+ *       servicesMap={createServicesMap().addService(
+ *         InstagramMediaItemServiceDefinition,
+ *         InstagramMediaItemService,
+ *         { mediaItem, index }
+ *       )}
+ *     >
+ *       <MediaItemDisplay />
+ *     </WixServices>
+ *   );
+ * }
+ *
+ * function MediaItemDisplay() {
+ *   const mediaItemService = useService(InstagramMediaItemServiceDefinition);
+ *   const mediaItem = mediaItemService.mediaItem.get();
+ *   const index = mediaItemService.index.get();
+ *
+ *   return (
+ *     <div>
+ *       <img src={mediaItem.mediaUrl} alt={mediaItem.altText} />
+ *       <span>Item {index + 1}</span>
+ *       {mediaItem.type === 'video' && <VideoIndicator />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare const InstagramMediaItemService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: InstagramMediaItemServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & InstagramMediaItemServiceAPI, InstagramMediaItemServiceConfig>;

package/dist/services/instagram-media-item-service.js

@@ -0,0 +1,55 @@
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+/**
+ * Service definition for Instagram Media Item
+ */
+export const InstagramMediaItemServiceDefinition = defineService('instagramMediaItem');
+/**
+ * Implementation of the Instagram Media Item service that manages reactive media item data.
+ * This service provides signals for individual media item data and its index position.
+ * Used by gallery components to access media item information in a service-based architecture.
+ *
+ * @example
+ * ```tsx
+ * import { InstagramMediaItemService, InstagramMediaItemServiceDefinition } from '@wix/headless-instagram/services';
+ * import { useService } from '@wix/services-manager-react';
+ * import { WixServices, createServicesMap } from '@wix/services-manager';
+ *
+ * function MediaItemComponent({ mediaItem, index }) {
+ *   return (
+ *     <WixServices
+ *       servicesMap={createServicesMap().addService(
+ *         InstagramMediaItemServiceDefinition,
+ *         InstagramMediaItemService,
+ *         { mediaItem, index }
+ *       )}
+ *     >
+ *       <MediaItemDisplay />
+ *     </WixServices>
+ *   );
+ * }
+ *
+ * function MediaItemDisplay() {
+ *   const mediaItemService = useService(InstagramMediaItemServiceDefinition);
+ *   const mediaItem = mediaItemService.mediaItem.get();
+ *   const index = mediaItemService.index.get();
+ *
+ *   return (
+ *     <div>
+ *       <img src={mediaItem.mediaUrl} alt={mediaItem.altText} />
+ *       <span>Item {index + 1}</span>
+ *       {mediaItem.type === 'video' && <VideoIndicator />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const InstagramMediaItemService = implementService.withConfig()(InstagramMediaItemServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    const mediaItem = signalsService.signal(config.mediaItem);
+    const index = signalsService.signal(config.index);
+    return {
+        mediaItem,
+        index,
+    };
+});

package/dist/vitest.setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/dist/vitest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@wix/headless-instagram",
+  "version": "0.0.1",
+  "description": "Headless components for Wix Instagram integration",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wix/headless-components.git",
+    "directory": "packages/headless-components/instagram"
+  },
+  "bugs": {
+    "url": "https://github.com/wix/headless-components/issues"
+  },
+  "homepage": "https://github.com/wix/headless-components#readme",
+  "keywords": [
+    "wix",
+    "headless",
+    "instagram",
+    "react",
+    "components"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc -p tsconfig.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "test": "vitest --run",
+    "lint:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
+    "lint:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,md}\""
+  },
+  "files": [
+    "dist",
+    "cjs",
+    "react",
+    "services"
+  ],
+  "exports": {
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./cjs/dist/react/index.js"
+    },
+    "./core": {
+      "types": "./dist/react/core/index.d.ts",
+      "import": "./dist/react/core/index.js",
+      "require": "./cjs/dist/react/core/index.js"
+    },
+    "./services": {
+      "types": "./dist/services/index.d.ts",
+      "import": "./dist/services/index.js",
+      "require": "./cjs/dist/services/index.js"
+    }
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^20.9.0",
+    "@vitest/ui": "^3.1.4",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.4.2",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.4"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "@wix/essentials": "^0.1.24",
+    "@wix/headless-media": "workspace:*",
+    "@wix/headless-utils": "workspace:*",
+    "@wix/instagram-account": "^1.0.16",
+    "@wix/instagram-media": "^1.0.13",
+    "@wix/services-definitions": "^0.1.4",
+    "@wix/services-manager-react": "^0.1.26"
+  },
+  "peerDependencies": {
+    "@wix/headless-components": "workspace:*"
+  }
+}

package/react/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@wix/headless-instagram-react",
+  "main": "../cjs/dist/react/index.js",
+  "module": "../dist/react/index.js",
+  "types": "../dist/react/index.d.ts"
+}

package/services/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@wix/headless-instagram-services",
+  "main": "../cjs/dist/services/index.js",
+  "module": "../dist/services/index.js",
+  "types": "../dist/services/index.d.ts"
+}