@wix/headless-instagram 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/cjs/dist/react/InstagramFeed.d.ts +7 -0
  2. package/cjs/dist/react/InstagramFeed.js +6 -0
  3. package/cjs/dist/react/InstagramFeedRoot.d.ts +18 -0
  4. package/cjs/dist/react/InstagramFeedRoot.js +19 -0
  5. package/cjs/dist/react/InstagramMedia.d.ts +73 -0
  6. package/cjs/dist/react/InstagramMedia.js +71 -0
  7. package/cjs/dist/react/InstagramMedias.d.ts +10 -0
  8. package/cjs/dist/react/InstagramMedias.js +16 -0
  9. package/cjs/dist/react/UserName.d.ts +11 -0
  10. package/cjs/dist/react/UserName.js +8 -0
  11. package/cjs/dist/react/core/InstagramMedia.d.ts +82 -0
  12. package/cjs/dist/react/core/InstagramMedia.js +65 -0
  13. package/cjs/dist/react/core/InstagramMedias.d.ts +19 -0
  14. package/cjs/dist/react/core/InstagramMedias.js +54 -0
  15. package/cjs/dist/react/core/Root.d.ts +7 -0
  16. package/cjs/dist/react/core/Root.js +8 -0
  17. package/cjs/dist/react/core/UserName.d.ts +21 -0
  18. package/cjs/dist/react/core/UserName.js +17 -0
  19. package/cjs/dist/react/core/index.d.ts +4 -0
  20. package/cjs/dist/react/core/index.js +5 -0
  21. package/cjs/dist/react/index.d.ts +2 -0
  22. package/cjs/dist/react/index.js +2 -0
  23. package/cjs/dist/services/index.d.ts +2 -0
  24. package/cjs/dist/services/index.js +2 -0
  25. package/cjs/dist/services/instagram-feed-service.d.ts +178 -0
  26. package/cjs/dist/services/instagram-feed-service.js +196 -0
  27. package/cjs/dist/services/instagram-media-item-service.d.ts +73 -0
  28. package/cjs/dist/services/instagram-media-item-service.js +55 -0
  29. package/cjs/dist/vitest.setup.d.ts +1 -0
  30. package/cjs/dist/vitest.setup.js +1 -0
  31. package/cjs/package.json +3 -0
  32. package/dist/react/InstagramFeed.d.ts +7 -0
  33. package/dist/react/InstagramFeed.js +6 -0
  34. package/dist/react/InstagramFeedRoot.d.ts +18 -0
  35. package/dist/react/InstagramFeedRoot.js +19 -0
  36. package/dist/react/InstagramMedia.d.ts +73 -0
  37. package/dist/react/InstagramMedia.js +71 -0
  38. package/dist/react/InstagramMedias.d.ts +10 -0
  39. package/dist/react/InstagramMedias.js +16 -0
  40. package/dist/react/UserName.d.ts +11 -0
  41. package/dist/react/UserName.js +8 -0
  42. package/dist/react/core/InstagramMedia.d.ts +82 -0
  43. package/dist/react/core/InstagramMedia.js +65 -0
  44. package/dist/react/core/InstagramMedias.d.ts +19 -0
  45. package/dist/react/core/InstagramMedias.js +54 -0
  46. package/dist/react/core/Root.d.ts +7 -0
  47. package/dist/react/core/Root.js +8 -0
  48. package/dist/react/core/UserName.d.ts +21 -0
  49. package/dist/react/core/UserName.js +17 -0
  50. package/dist/react/core/index.d.ts +4 -0
  51. package/dist/react/core/index.js +5 -0
  52. package/dist/react/index.d.ts +2 -0
  53. package/dist/react/index.js +2 -0
  54. package/dist/services/index.d.ts +2 -0
  55. package/dist/services/index.js +2 -0
  56. package/dist/services/instagram-feed-service.d.ts +178 -0
  57. package/dist/services/instagram-feed-service.js +196 -0
  58. package/dist/services/instagram-media-item-service.d.ts +73 -0
  59. package/dist/services/instagram-media-item-service.js +55 -0
  60. package/dist/vitest.setup.d.ts +1 -0
  61. package/dist/vitest.setup.js +1 -0
  62. package/package.json +72 -0
  63. package/react/package.json +6 -0
  64. package/services/package.json +6 -0
@@ -0,0 +1,7 @@
1
+ export { Root } from './InstagramFeedRoot.js';
2
+ export { UserName } from './UserName.js';
3
+ export { InstagramMedias } from './InstagramMedias.js';
4
+ export { InstagramMedia } from './InstagramMedia.js';
5
+ export type { RootProps } from './InstagramFeedRoot.js';
6
+ export type { UserNameProps } from './UserName.js';
7
+ export type { InstagramMediasProps } from './InstagramMedias.js';
@@ -0,0 +1,6 @@
1
+ // Instagram Feed compound component exports following stores pattern
2
+ // This file creates the Instagram namespace with all components
3
+ export { Root } from './InstagramFeedRoot.js';
4
+ export { UserName } from './UserName.js';
5
+ export { InstagramMedias } from './InstagramMedias.js';
6
+ export { InstagramMedia } from './InstagramMedia.js';
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { type InstagramFeedServiceConfig } from '../services/index.js';
3
+ /**
4
+ * Props for InstagramFeed Root component
5
+ */
6
+ export interface RootProps {
7
+ children: React.ReactNode;
8
+ instagramFeedServiceConfig: InstagramFeedServiceConfig;
9
+ className?: string;
10
+ }
11
+ /**
12
+ * Root component that provides Instagram feed service context using WixServices.
13
+ * This follows the same service-based pattern as the stores package.
14
+ *
15
+ * @order 1
16
+ * @component
17
+ */
18
+ export declare function Root(props: RootProps): React.ReactNode;
@@ -0,0 +1,19 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { WixServices } from '@wix/services-manager-react';
3
+ import { createServicesMap } from '@wix/services-manager';
4
+ import { InstagramFeedService, InstagramFeedServiceDefinition, } from '../services/index.js';
5
+ /**
6
+ * Root component that provides Instagram feed service context using WixServices.
7
+ * This follows the same service-based pattern as the stores package.
8
+ *
9
+ * @order 1
10
+ * @component
11
+ */
12
+ export function Root(props) {
13
+ const { children, instagramFeedServiceConfig, className, ...attrs } = props;
14
+ const attributes = {
15
+ className,
16
+ ...attrs,
17
+ };
18
+ return (_jsx(WixServices, { servicesMap: createServicesMap().addService(InstagramFeedServiceDefinition, InstagramFeedService, instagramFeedServiceConfig), children: _jsx("div", { ...attributes, children: children }) }));
19
+ }
@@ -0,0 +1,73 @@
1
+ import React from 'react';
2
+ import { type AsChildChildren } from '@wix/headless-utils/react';
3
+ export interface MediaGalleryRepeaterProps {
4
+ children: React.ReactNode;
5
+ }
6
+ /**
7
+ * Repeats children for each Instagram media item, providing a per-item service context.
8
+ */
9
+ export declare const MediaGalleryRepeater: React.FC<MediaGalleryRepeaterProps>;
10
+ export declare enum TestIds {
11
+ instagramMediaCaption = "instagram-media-caption",
12
+ instagramMediaType = "instagram-media-type",
13
+ instagramMediaUserName = "instagram-media-username",
14
+ instagramMediaTimestamp = "instagram-media-timestamp",
15
+ instagramMediaGalleries = "instagram-media-galleries"
16
+ }
17
+ export interface CaptionProps {
18
+ asChild?: boolean;
19
+ children?: AsChildChildren<{
20
+ caption?: string;
21
+ }>;
22
+ className?: string;
23
+ }
24
+ export declare const Caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLElement>>;
25
+ export interface MediaTypeProps {
26
+ asChild?: boolean;
27
+ children?: AsChildChildren<{
28
+ mediaType: 'image' | 'video' | 'carousel';
29
+ }>;
30
+ className?: string;
31
+ }
32
+ export declare const MediaType: React.ForwardRefExoticComponent<MediaTypeProps & React.RefAttributes<HTMLElement>>;
33
+ export interface UserNameProps {
34
+ asChild?: boolean;
35
+ children?: AsChildChildren<{
36
+ userName?: string;
37
+ }>;
38
+ className?: string;
39
+ }
40
+ export declare const UserName: React.ForwardRefExoticComponent<UserNameProps & React.RefAttributes<HTMLElement>>;
41
+ export interface TimestampProps {
42
+ asChild?: boolean;
43
+ children?: AsChildChildren<{
44
+ timestamp: string;
45
+ }>;
46
+ className?: string;
47
+ }
48
+ export declare const Timestamp: React.ForwardRefExoticComponent<TimestampProps & React.RefAttributes<HTMLElement>>;
49
+ export interface MediaGalleriesProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
50
+ children: React.ReactNode;
51
+ }
52
+ export declare const MediaGalleries: React.ForwardRefExoticComponent<MediaGalleriesProps & React.RefAttributes<HTMLDivElement>>;
53
+ export interface MediaGalleryItemsProps {
54
+ children: React.ReactNode;
55
+ className?: string;
56
+ }
57
+ export declare const MediaGalleryItems: React.ForwardRefExoticComponent<MediaGalleryItemsProps & React.RefAttributes<HTMLDivElement>>;
58
+ export declare const InstagramMedia: {
59
+ Root: ({ children }: {
60
+ children: React.ReactNode;
61
+ }) => import("react/jsx-runtime").JSX.Element;
62
+ Caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLElement>>;
63
+ MediaType: React.ForwardRefExoticComponent<MediaTypeProps & React.RefAttributes<HTMLElement>>;
64
+ UserName: React.ForwardRefExoticComponent<UserNameProps & React.RefAttributes<HTMLElement>>;
65
+ Timestamp: React.ForwardRefExoticComponent<TimestampProps & React.RefAttributes<HTMLElement>>;
66
+ MediaGalleries: React.ForwardRefExoticComponent<MediaGalleriesProps & React.RefAttributes<HTMLDivElement>>;
67
+ MediaGalleryItems: React.ForwardRefExoticComponent<MediaGalleryItemsProps & React.RefAttributes<HTMLDivElement>>;
68
+ MediaGalleryRepeater: React.FC<MediaGalleryRepeaterProps>;
69
+ caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLElement>>;
70
+ mediaType: React.ForwardRefExoticComponent<MediaTypeProps & React.RefAttributes<HTMLElement>>;
71
+ userName: React.ForwardRefExoticComponent<UserNameProps & React.RefAttributes<HTMLElement>>;
72
+ timestamp: React.ForwardRefExoticComponent<TimestampProps & React.RefAttributes<HTMLElement>>;
73
+ };
@@ -0,0 +1,71 @@
1
+ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import { AsChildSlot } from '@wix/headless-utils/react';
4
+ import * as CoreInstagramMedia from './core/InstagramMedia.js';
5
+ import { WixServices } from '@wix/services-manager-react';
6
+ import { createServicesMap } from '@wix/services-manager';
7
+ import { InstagramMediaItemServiceDefinition, InstagramMediaItemService, } from '../services/index.js';
8
+ import * as CoreInstagramMedias from './core/InstagramMedias.js';
9
+ import { MediaGallery } from '@wix/headless-media/react';
10
+ /**
11
+ * Repeats children for each Instagram media item, providing a per-item service context.
12
+ */
13
+ export const MediaGalleryRepeater = ({ children, }) => {
14
+ return (_jsx(CoreInstagramMedias.InstagramMedias, { children: ({ hasItems, mediaItems }) => {
15
+ console.log('mediaItems', mediaItems);
16
+ if (!hasItems)
17
+ return null;
18
+ return (_jsx(_Fragment, { children: mediaItems.map((mediaItem, index) => {
19
+ console.log('mediaItem', mediaItem.mediaGalleryItems);
20
+ return (_jsx(WixServices, { servicesMap: createServicesMap().addService(InstagramMediaItemServiceDefinition, InstagramMediaItemService, { mediaItem, index }), children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
21
+ media: mediaItem.mediaGalleryItems,
22
+ }, children: children }) }, mediaItem.id || index));
23
+ }) }));
24
+ } }));
25
+ };
26
+ export var TestIds;
27
+ (function (TestIds) {
28
+ TestIds["instagramMediaCaption"] = "instagram-media-caption";
29
+ TestIds["instagramMediaType"] = "instagram-media-type";
30
+ TestIds["instagramMediaUserName"] = "instagram-media-username";
31
+ TestIds["instagramMediaTimestamp"] = "instagram-media-timestamp";
32
+ TestIds["instagramMediaGalleries"] = "instagram-media-galleries";
33
+ })(TestIds || (TestIds = {}));
34
+ export const Caption = React.forwardRef((props, ref) => {
35
+ const { asChild, children, className, ...otherProps } = props;
36
+ return (_jsx(CoreInstagramMedia.Caption, { children: ({ caption }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.instagramMediaCaption, customElement: children, customElementProps: { caption }, content: caption ?? '', ...otherProps, children: _jsx("span", { children: caption }) })) }));
37
+ });
38
+ export const MediaType = React.forwardRef((props, ref) => {
39
+ const { asChild, children, className, ...otherProps } = props;
40
+ return (_jsx(CoreInstagramMedia.MediaType, { children: ({ mediaType }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.instagramMediaType, customElement: children, customElementProps: { mediaType }, content: mediaType, ...otherProps, children: _jsx("span", { children: mediaType }) })) }));
41
+ });
42
+ export const UserName = React.forwardRef((props, ref) => {
43
+ const { asChild, children, className, ...otherProps } = props;
44
+ return (_jsx(CoreInstagramMedia.UserName, { children: ({ userName }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.instagramMediaUserName, customElement: children, customElementProps: { userName }, content: userName ?? '', ...otherProps, children: _jsx("span", { children: userName }) })) }));
45
+ });
46
+ export const Timestamp = React.forwardRef((props, ref) => {
47
+ const { asChild, children, className, ...otherProps } = props;
48
+ return (_jsx(CoreInstagramMedia.Timestamp, { children: ({ timestamp }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.instagramMediaTimestamp, customElement: children, customElementProps: { timestamp }, content: timestamp, ...otherProps, children: _jsx("time", { dateTime: timestamp, children: timestamp }) })) }));
49
+ });
50
+ export const MediaGalleries = React.forwardRef((props, ref) => {
51
+ const { children, className, ...otherProps } = props;
52
+ return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.instagramMediaGalleries, ...otherProps, children: children }));
53
+ });
54
+ export const MediaGalleryItems = React.forwardRef(({ children, className, ...otherProps }, ref) => {
55
+ return (_jsx("div", { ref: ref, className: className, ...otherProps, children: children }));
56
+ });
57
+ export const InstagramMedia = {
58
+ Root: ({ children }) => _jsx(_Fragment, { children: children }),
59
+ Caption,
60
+ MediaType,
61
+ UserName,
62
+ Timestamp,
63
+ MediaGalleries,
64
+ MediaGalleryItems,
65
+ MediaGalleryRepeater,
66
+ // lowercase aliases (new interface)
67
+ caption: Caption,
68
+ mediaType: MediaType,
69
+ userName: UserName,
70
+ timestamp: Timestamp,
71
+ };
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ export interface InstagramMediasProps {
3
+ children: React.ReactNode;
4
+ emptyState?: React.ReactNode;
5
+ }
6
+ /**
7
+ * Container for Instagram media items list.
8
+ * Renders nothing (or emptyState) when there are no media items.
9
+ */
10
+ export declare const InstagramMedias: React.ForwardRefExoticComponent<InstagramMediasProps & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,16 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import * as CoreInstagramMedias from './core/InstagramMedias.js';
4
+ /**
5
+ * Container for Instagram media items list.
6
+ * Renders nothing (or emptyState) when there are no media items.
7
+ */
8
+ export const InstagramMedias = React.forwardRef((props, ref) => {
9
+ const { children, emptyState } = props;
10
+ return (_jsx(CoreInstagramMedias.InstagramMedias, { children: ({ hasItems }) => {
11
+ if (!hasItems) {
12
+ return emptyState || null;
13
+ }
14
+ return _jsx("div", { ref: ref, children: children });
15
+ } }));
16
+ });
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { type AsChildChildren } from '@wix/headless-utils/react';
3
+ export interface UserNameProps {
4
+ asChild?: boolean;
5
+ children?: AsChildChildren<{
6
+ displayName: string;
7
+ }>;
8
+ className?: string;
9
+ unknownLabel?: string;
10
+ }
11
+ export declare const UserName: React.ForwardRefExoticComponent<UserNameProps & React.RefAttributes<HTMLElement>>;
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import { AsChildSlot } from '@wix/headless-utils/react';
4
+ import * as CoreUserName from './core/UserName.js';
5
+ export const UserName = React.forwardRef((props, ref) => {
6
+ const { asChild, children, className, ...otherProps } = props;
7
+ return (_jsx(CoreUserName.UserName, { unknownLabel: props.unknownLabel, children: ({ displayName, displayValue }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { displayName }, content: displayValue, ...otherProps, children: _jsx("span", { children: displayValue }) })) }));
8
+ });
@@ -0,0 +1,82 @@
1
+ import React from 'react';
2
+ export interface MediaItem {
3
+ image: string;
4
+ altText?: string;
5
+ }
6
+ export interface CaptionProps {
7
+ /** Render prop function that receives caption data */
8
+ children: (props: CaptionRenderProps) => React.ReactNode;
9
+ }
10
+ /**
11
+ * Render props for Caption component
12
+ */
13
+ export interface CaptionRenderProps {
14
+ /** Media caption text */
15
+ caption?: string;
16
+ }
17
+ /**
18
+ * Headless component for Instagram media caption
19
+ */
20
+ export declare function Caption(props: CaptionProps): React.ReactNode;
21
+ export interface MediaTypeProps {
22
+ /** Render prop function that receives media type data */
23
+ children: (props: MediaTypeRenderProps) => React.ReactNode;
24
+ }
25
+ /**
26
+ * Render props for MediaType component
27
+ */
28
+ export interface MediaTypeRenderProps {
29
+ /** Type of media */
30
+ mediaType: 'image' | 'video' | 'carousel';
31
+ }
32
+ /**
33
+ * Headless component for Instagram media type
34
+ */
35
+ export declare function MediaType(props: MediaTypeProps): React.ReactNode;
36
+ export interface UserNameProps {
37
+ /** Render prop function that receives username data */
38
+ children: (props: UserNameRenderProps) => React.ReactNode;
39
+ }
40
+ /**
41
+ * Render props for UserName component
42
+ */
43
+ export interface UserNameRenderProps {
44
+ /** Instagram username */
45
+ userName?: string;
46
+ }
47
+ /**
48
+ * Headless component for Instagram media username
49
+ */
50
+ export declare function UserName(props: UserNameProps): React.ReactNode;
51
+ export interface TimestampProps {
52
+ /** Render prop function that receives timestamp data */
53
+ children: (props: TimestampRenderProps) => React.ReactNode;
54
+ }
55
+ /**
56
+ * Render props for Timestamp component
57
+ */
58
+ export interface TimestampRenderProps {
59
+ /** Media timestamp */
60
+ timestamp: string;
61
+ }
62
+ /**
63
+ * Headless component for Instagram media timestamp
64
+ */
65
+ export declare function Timestamp(props: TimestampProps): React.ReactNode;
66
+ export interface MediaGalleryRepeaterProps {
67
+ /** Render prop function that receives media gallery repeater data */
68
+ children: (props: MediaGalleryRepeaterRenderProps) => React.ReactNode;
69
+ }
70
+ /**
71
+ * Render props for MediaGalleryRepeater component
72
+ */
73
+ export interface MediaGalleryRepeaterRenderProps {
74
+ /** Array of media items formatted for MediaGallery */
75
+ media: MediaItem[];
76
+ /** Whether there are media items */
77
+ hasMedia: boolean;
78
+ }
79
+ /**
80
+ * Headless component for Instagram media gallery repeater
81
+ */
82
+ export declare function MediaGalleryRepeater(props: MediaGalleryRepeaterProps): React.ReactNode;
@@ -0,0 +1,65 @@
1
+ import { useService } from '@wix/services-manager-react';
2
+ import { InstagramMediaItemServiceDefinition, InstagramFeedServiceDefinition, } from '../../services/index.js';
3
+ /**
4
+ * Headless component for Instagram media caption
5
+ */
6
+ export function Caption(props) {
7
+ const mediaItemService = useService(InstagramMediaItemServiceDefinition);
8
+ const { caption } = mediaItemService.mediaItem.get();
9
+ return props.children({
10
+ caption,
11
+ });
12
+ }
13
+ /**
14
+ * Headless component for Instagram media type
15
+ */
16
+ export function MediaType(props) {
17
+ const mediaItemService = useService(InstagramMediaItemServiceDefinition);
18
+ const { type } = mediaItemService.mediaItem.get();
19
+ return props.children({
20
+ mediaType: type,
21
+ });
22
+ }
23
+ /**
24
+ * Headless component for Instagram media username
25
+ */
26
+ export function UserName(props) {
27
+ const feedService = useService(InstagramFeedServiceDefinition);
28
+ const account = feedService.feedData.get().account;
29
+ const userName = account?.instagramInfo?.instagramUsername;
30
+ return props.children({
31
+ userName,
32
+ });
33
+ }
34
+ /**
35
+ * Headless component for Instagram media timestamp
36
+ */
37
+ export function Timestamp(props) {
38
+ const mediaItemService = useService(InstagramMediaItemServiceDefinition);
39
+ const { timestamp } = mediaItemService.mediaItem.get();
40
+ return props.children({
41
+ timestamp,
42
+ });
43
+ }
44
+ /**
45
+ * Headless component for Instagram media gallery repeater
46
+ */
47
+ export function MediaGalleryRepeater(props) {
48
+ const mediaItemService = useService(InstagramMediaItemServiceDefinition);
49
+ const mediaItem = mediaItemService.mediaItem.get();
50
+ const media = (mediaItem?.type === 'video' ? mediaItem.thumbnailUrl : mediaItem?.mediaUrl)
51
+ ? [
52
+ {
53
+ image: (mediaItem.type === 'video'
54
+ ? mediaItem.thumbnailUrl
55
+ : mediaItem.mediaUrl),
56
+ altText: mediaItem.altText,
57
+ },
58
+ ]
59
+ : [];
60
+ const hasMedia = media.length > 0;
61
+ return props.children({
62
+ media,
63
+ hasMedia,
64
+ });
65
+ }
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ export interface InstagramMediasProps {
3
+ /** Render prop function that receives Instagram medias data */
4
+ children: (props: InstagramMediasRenderProps) => React.ReactNode;
5
+ }
6
+ /**
7
+ * Render props for InstagramMedias component
8
+ */
9
+ export interface InstagramMediasRenderProps {
10
+ /** Whether there are media items to display */
11
+ hasItems: boolean;
12
+ /** Array of media items */
13
+ mediaItems: any[];
14
+ }
15
+ /**
16
+ * Headless component for Instagram medias
17
+ * Handles service logic and provides render props with media items data
18
+ */
19
+ export declare function InstagramMedias(props: InstagramMediasProps): React.ReactNode;
@@ -0,0 +1,54 @@
1
+ import { useService } from '@wix/services-manager-react';
2
+ import { InstagramFeedServiceDefinition } from '../../services/index.js';
3
+ /**
4
+ * Headless component for Instagram medias
5
+ * Handles service logic and provides render props with media items data
6
+ */
7
+ export function InstagramMedias(props) {
8
+ const instagramFeedService = useService(InstagramFeedServiceDefinition);
9
+ const feedData = instagramFeedService.feedData.get();
10
+ const hasItems = feedData.mediaItems.length > 0;
11
+ // Convert Instagram media items to MediaGallery format
12
+ const convertedMediaItems = feedData.mediaItems.map((mediaItem) => {
13
+ let mediaGalleryItems = [];
14
+ if (mediaItem.type === 'carousel' &&
15
+ mediaItem.children &&
16
+ mediaItem.children.length > 0) {
17
+ // Convert all carousel children to MediaGallery format
18
+ mediaGalleryItems = mediaItem.children.map((carouselItem, carouselIndex) => {
19
+ const imageUrl = carouselItem.type === 'video'
20
+ ? carouselItem.thumbnailUrl || carouselItem.mediaUrl
21
+ : carouselItem.mediaUrl;
22
+ return {
23
+ image: imageUrl,
24
+ altText: carouselItem.altText ||
25
+ mediaItem.caption ||
26
+ `Instagram carousel item ${carouselIndex + 1}`,
27
+ };
28
+ });
29
+ }
30
+ else {
31
+ // Convert single Instagram media item to MediaGallery format
32
+ const imageUrl = mediaItem.type === 'video'
33
+ ? mediaItem.thumbnailUrl || mediaItem.mediaUrl
34
+ : mediaItem.mediaUrl;
35
+ mediaGalleryItems = [
36
+ {
37
+ image: imageUrl,
38
+ altText: mediaItem.altText ||
39
+ mediaItem.caption ||
40
+ `Instagram ${mediaItem.type}`,
41
+ },
42
+ ];
43
+ }
44
+ return {
45
+ // Keep original Instagram data
46
+ ...mediaItem,
47
+ mediaGalleryItems, // Add converted MediaGallery data
48
+ };
49
+ });
50
+ return props.children({
51
+ hasItems,
52
+ mediaItems: convertedMediaItems,
53
+ });
54
+ }
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { type InstagramFeedServiceConfig } from '../../services/index.js';
3
+ export interface RootProps {
4
+ instagramFeedServiceConfig: InstagramFeedServiceConfig;
5
+ children: React.ReactNode;
6
+ }
7
+ export declare function Root(props: RootProps): React.ReactNode;
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { createServicesMap } from '@wix/services-manager';
3
+ import { WixServices } from '@wix/services-manager-react';
4
+ import { InstagramFeedService, InstagramFeedServiceDefinition, } from '../../services/index.js';
5
+ export function Root(props) {
6
+ const { children, instagramFeedServiceConfig } = props;
7
+ return (_jsx(WixServices, { servicesMap: createServicesMap().addService(InstagramFeedServiceDefinition, InstagramFeedService, instagramFeedServiceConfig), children: children }));
8
+ }
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ export interface UserNameProps {
3
+ /** Render prop function that receives username data */
4
+ children: (props: UserNameRenderProps) => React.ReactNode;
5
+ /** Fallback label when username is unavailable */
6
+ unknownLabel?: string;
7
+ }
8
+ /**
9
+ * Render props for UserName component
10
+ */
11
+ export interface UserNameRenderProps {
12
+ /** Display name (Instagram username) */
13
+ displayName: string;
14
+ /** Formatted display value with @ prefix */
15
+ displayValue: string;
16
+ }
17
+ /**
18
+ * Headless component for Instagram account username
19
+ * Handles service logic and provides render props with username data
20
+ */
21
+ export declare function UserName(props: UserNameProps): React.ReactNode;
@@ -0,0 +1,17 @@
1
+ import { useService } from '@wix/services-manager-react';
2
+ import { InstagramFeedServiceDefinition } from '../../services/index.js';
3
+ /**
4
+ * Headless component for Instagram account username
5
+ * Handles service logic and provides render props with username data
6
+ */
7
+ export function UserName(props) {
8
+ const { unknownLabel = 'unknown' } = props;
9
+ const instagramFeedService = useService(InstagramFeedServiceDefinition);
10
+ const feedData = instagramFeedService.feedData.get();
11
+ const displayName = feedData.account?.instagramInfo?.instagramUsername || unknownLabel;
12
+ const displayValue = `@${displayName}`;
13
+ return props.children({
14
+ displayName,
15
+ displayValue,
16
+ });
17
+ }
@@ -0,0 +1,4 @@
1
+ export { Root, type RootProps } from './Root.js';
2
+ export { UserName as CoreUserName, type UserNameProps as CoreUserNameProps, type UserNameRenderProps, } from './UserName.js';
3
+ export { InstagramMedias, type InstagramMediasProps, type InstagramMediasRenderProps, } from './InstagramMedias.js';
4
+ export { Caption as InstagramMediaCaption, MediaType as InstagramMediaType, UserName as InstagramMediaUserName, Timestamp as InstagramMediaTimestamp, MediaGalleryRepeater, type CaptionProps as InstagramMediaCaptionProps, type CaptionRenderProps, type MediaTypeProps as InstagramMediaTypeProps, type MediaTypeRenderProps, type UserNameProps as InstagramMediaUserNameProps, type UserNameRenderProps as InstagramMediaUserNameRenderProps, type TimestampProps as InstagramMediaTimestampProps, type TimestampRenderProps, type MediaGalleryRepeaterProps, type MediaGalleryRepeaterRenderProps, } from './InstagramMedia.js';
@@ -0,0 +1,5 @@
1
+ export { Root } from './Root.js';
2
+ // New core components
3
+ export { UserName as CoreUserName, } from './UserName.js';
4
+ export { InstagramMedias, } from './InstagramMedias.js';
5
+ export { Caption as InstagramMediaCaption, MediaType as InstagramMediaType, UserName as InstagramMediaUserName, Timestamp as InstagramMediaTimestamp, MediaGalleryRepeater, } from './InstagramMedia.js';
@@ -0,0 +1,2 @@
1
+ export * as InstagramFeed from './InstagramFeed.js';
2
+ export { InstagramMedia } from './InstagramMedia.js';
@@ -0,0 +1,2 @@
1
+ export * as InstagramFeed from './InstagramFeed.js';
2
+ export { InstagramMedia } from './InstagramMedia.js';
@@ -0,0 +1,2 @@
1
+ export { InstagramFeedService, InstagramFeedServiceDefinition, loadInstagramFeedServiceConfig, type InstagramFeedServiceConfig, type InstagramFeedServiceAPI, type InstagramFeedServiceConfigResult, type SuccessInstagramFeedServiceConfigResult, type NotFoundInstagramFeedServiceConfigResult, type InstagramFeedData, type InstagramMediaItem, type InstagramMediaType, type InstagramAccount, type InstagramMedia, } from './instagram-feed-service.js';
2
+ export { InstagramMediaItemService, InstagramMediaItemServiceDefinition, type InstagramMediaItemServiceConfig, type InstagramMediaItemServiceAPI, } from './instagram-media-item-service.js';
@@ -0,0 +1,2 @@
1
+ export { InstagramFeedService, InstagramFeedServiceDefinition, loadInstagramFeedServiceConfig, } from './instagram-feed-service.js';
2
+ export { InstagramMediaItemService, InstagramMediaItemServiceDefinition, } from './instagram-media-item-service.js';