@wix/headless-instagram 0.0.1
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.
- package/cjs/dist/react/InstagramFeed.d.ts +7 -0
- package/cjs/dist/react/InstagramFeed.js +6 -0
- package/cjs/dist/react/InstagramFeedRoot.d.ts +18 -0
- package/cjs/dist/react/InstagramFeedRoot.js +19 -0
- package/cjs/dist/react/InstagramMedia.d.ts +73 -0
- package/cjs/dist/react/InstagramMedia.js +71 -0
- package/cjs/dist/react/InstagramMedias.d.ts +10 -0
- package/cjs/dist/react/InstagramMedias.js +16 -0
- package/cjs/dist/react/UserName.d.ts +11 -0
- package/cjs/dist/react/UserName.js +8 -0
- package/cjs/dist/react/core/InstagramMedia.d.ts +82 -0
- package/cjs/dist/react/core/InstagramMedia.js +65 -0
- package/cjs/dist/react/core/InstagramMedias.d.ts +19 -0
- package/cjs/dist/react/core/InstagramMedias.js +54 -0
- package/cjs/dist/react/core/Root.d.ts +7 -0
- package/cjs/dist/react/core/Root.js +8 -0
- package/cjs/dist/react/core/UserName.d.ts +21 -0
- package/cjs/dist/react/core/UserName.js +17 -0
- package/cjs/dist/react/core/index.d.ts +4 -0
- package/cjs/dist/react/core/index.js +5 -0
- package/cjs/dist/react/index.d.ts +2 -0
- package/cjs/dist/react/index.js +2 -0
- package/cjs/dist/services/index.d.ts +2 -0
- package/cjs/dist/services/index.js +2 -0
- package/cjs/dist/services/instagram-feed-service.d.ts +178 -0
- package/cjs/dist/services/instagram-feed-service.js +196 -0
- package/cjs/dist/services/instagram-media-item-service.d.ts +73 -0
- package/cjs/dist/services/instagram-media-item-service.js +55 -0
- package/cjs/dist/vitest.setup.d.ts +1 -0
- package/cjs/dist/vitest.setup.js +1 -0
- package/cjs/package.json +3 -0
- package/dist/react/InstagramFeed.d.ts +7 -0
- package/dist/react/InstagramFeed.js +6 -0
- package/dist/react/InstagramFeedRoot.d.ts +18 -0
- package/dist/react/InstagramFeedRoot.js +19 -0
- package/dist/react/InstagramMedia.d.ts +73 -0
- package/dist/react/InstagramMedia.js +71 -0
- package/dist/react/InstagramMedias.d.ts +10 -0
- package/dist/react/InstagramMedias.js +16 -0
- package/dist/react/UserName.d.ts +11 -0
- package/dist/react/UserName.js +8 -0
- package/dist/react/core/InstagramMedia.d.ts +82 -0
- package/dist/react/core/InstagramMedia.js +65 -0
- package/dist/react/core/InstagramMedias.d.ts +19 -0
- package/dist/react/core/InstagramMedias.js +54 -0
- package/dist/react/core/Root.d.ts +7 -0
- package/dist/react/core/Root.js +8 -0
- package/dist/react/core/UserName.d.ts +21 -0
- package/dist/react/core/UserName.js +17 -0
- package/dist/react/core/index.d.ts +4 -0
- package/dist/react/core/index.js +5 -0
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.js +2 -0
- package/dist/services/index.d.ts +2 -0
- package/dist/services/index.js +2 -0
- package/dist/services/instagram-feed-service.d.ts +178 -0
- package/dist/services/instagram-feed-service.js +196 -0
- package/dist/services/instagram-media-item-service.d.ts +73 -0
- package/dist/services/instagram-media-item-service.js +55 -0
- package/dist/vitest.setup.d.ts +1 -0
- package/dist/vitest.setup.js +1 -0
- package/package.json +81 -0
- package/react/package.json +6 -0
- package/services/package.json +6 -0
|
@@ -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 { 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,178 @@
|
|
|
1
|
+
import { type Signal } from '@wix/services-definitions/core-services/signals';
|
|
2
|
+
import { accounts } from '@wix/instagram-account';
|
|
3
|
+
import { media } from '@wix/instagram-media';
|
|
4
|
+
/**
|
|
5
|
+
* Instagram media item types
|
|
6
|
+
*/
|
|
7
|
+
export type InstagramMediaType = 'image' | 'video' | 'carousel';
|
|
8
|
+
/**
|
|
9
|
+
* Instagram media item structure
|
|
10
|
+
* Extending SDK types with additional fields for UI components
|
|
11
|
+
*/
|
|
12
|
+
export interface InstagramMediaItem {
|
|
13
|
+
/** Unique identifier for the media item */
|
|
14
|
+
id: string;
|
|
15
|
+
/** Type of the media */
|
|
16
|
+
type: InstagramMediaType;
|
|
17
|
+
/** URL to the media content */
|
|
18
|
+
mediaUrl: string;
|
|
19
|
+
/** Thumbnail URL for videos */
|
|
20
|
+
thumbnailUrl?: string;
|
|
21
|
+
/** Caption text */
|
|
22
|
+
caption?: string;
|
|
23
|
+
/** Permalink to the Instagram post */
|
|
24
|
+
permalink: string;
|
|
25
|
+
/** ISO timestamp of when the media was created */
|
|
26
|
+
timestamp: string;
|
|
27
|
+
/** Alt text for accessibility */
|
|
28
|
+
altText?: string;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Instagram account information using SDK types
|
|
32
|
+
*/
|
|
33
|
+
export type InstagramAccount = accounts.InstagramAccount;
|
|
34
|
+
/**
|
|
35
|
+
* Instagram media using SDK types
|
|
36
|
+
*/
|
|
37
|
+
export type InstagramMedia = media.Media;
|
|
38
|
+
/**
|
|
39
|
+
* Instagram feed data combining account and media information
|
|
40
|
+
*/
|
|
41
|
+
export interface InstagramFeedData {
|
|
42
|
+
/** Instagram account information */
|
|
43
|
+
account?: InstagramAccount;
|
|
44
|
+
/** Array of media items */
|
|
45
|
+
mediaItems: InstagramMediaItem[];
|
|
46
|
+
/** Whether there are more items to load */
|
|
47
|
+
hasMore: boolean;
|
|
48
|
+
/** Cursor for pagination */
|
|
49
|
+
nextCursor?: string;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Configuration interface for the Instagram Feed service.
|
|
53
|
+
* Contains the initial feed data and connection settings.
|
|
54
|
+
*/
|
|
55
|
+
export interface InstagramFeedServiceConfig {
|
|
56
|
+
/** Instagram account ID or username */
|
|
57
|
+
accountId?: string;
|
|
58
|
+
/** Number of media items to fetch */
|
|
59
|
+
limit?: number;
|
|
60
|
+
/** Initial feed data (for SSR or caching) */
|
|
61
|
+
feedData?: InstagramFeedData;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* API interface for the Instagram Feed service, providing reactive feed data management.
|
|
65
|
+
* This service handles loading and managing Instagram feed data, loading state, and errors.
|
|
66
|
+
*/
|
|
67
|
+
export interface InstagramFeedServiceAPI {
|
|
68
|
+
/** Reactive signal containing the current feed data */
|
|
69
|
+
feedData: Signal<InstagramFeedData>;
|
|
70
|
+
/** Reactive signal indicating if feed data is currently being loaded */
|
|
71
|
+
isLoading: Signal<boolean>;
|
|
72
|
+
/** Reactive signal containing any error message, or null if no error */
|
|
73
|
+
error: Signal<string | null>;
|
|
74
|
+
/** Function to load more media items */
|
|
75
|
+
loadMore: () => Promise<void>;
|
|
76
|
+
/** Function to refresh the entire feed */
|
|
77
|
+
refresh: () => Promise<void>;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Service definition for the Instagram Feed service.
|
|
81
|
+
* This defines the reactive API contract for managing Instagram feed data.
|
|
82
|
+
*/
|
|
83
|
+
export declare const InstagramFeedServiceDefinition: string & {
|
|
84
|
+
__api: InstagramFeedServiceAPI;
|
|
85
|
+
__config: InstagramFeedServiceConfig;
|
|
86
|
+
isServiceDefinition?: boolean;
|
|
87
|
+
} & InstagramFeedServiceAPI;
|
|
88
|
+
/**
|
|
89
|
+
* Implementation of the Instagram Feed service that manages reactive Instagram feed data.
|
|
90
|
+
* This service provides signals for feed data, loading state, and error handling,
|
|
91
|
+
* along with methods to dynamically load and refresh Instagram content.
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
* ```tsx
|
|
95
|
+
* import { InstagramFeedService, InstagramFeedServiceDefinition } from '@wix/instagram/services';
|
|
96
|
+
* import { useService } from '@wix/services-manager-react';
|
|
97
|
+
*
|
|
98
|
+
* function InstagramComponent({ feedConfig }) {
|
|
99
|
+
* return (
|
|
100
|
+
* <ServiceProvider services={createServicesMap([
|
|
101
|
+
* [InstagramFeedServiceDefinition, InstagramFeedService.withConfig(feedConfig)]
|
|
102
|
+
* ])}>
|
|
103
|
+
* <InstagramDisplay />
|
|
104
|
+
* </ServiceProvider>
|
|
105
|
+
* );
|
|
106
|
+
* }
|
|
107
|
+
*
|
|
108
|
+
* function InstagramDisplay() {
|
|
109
|
+
* const feedService = useService(InstagramFeedServiceDefinition);
|
|
110
|
+
* const feedData = feedService.feedData.get();
|
|
111
|
+
* const isLoading = feedService.isLoading.get();
|
|
112
|
+
* const error = feedService.error.get();
|
|
113
|
+
*
|
|
114
|
+
* if (isLoading) return <div>Loading Instagram feed...</div>;
|
|
115
|
+
* if (error) return <div>Error: {error}</div>;
|
|
116
|
+
*
|
|
117
|
+
* return <div>{feedData.mediaItems.length} posts loaded</div>;
|
|
118
|
+
* }
|
|
119
|
+
* ```
|
|
120
|
+
*/
|
|
121
|
+
export declare const InstagramFeedService: import("@wix/services-definitions").ServiceFactory<string & {
|
|
122
|
+
__api: InstagramFeedServiceAPI;
|
|
123
|
+
__config: InstagramFeedServiceConfig;
|
|
124
|
+
isServiceDefinition?: boolean;
|
|
125
|
+
} & InstagramFeedServiceAPI, InstagramFeedServiceConfig>;
|
|
126
|
+
/**
|
|
127
|
+
* Success result interface for Instagram feed service configuration loading.
|
|
128
|
+
* Returned when feed data is successfully loaded.
|
|
129
|
+
*/
|
|
130
|
+
export interface SuccessInstagramFeedServiceConfigResult {
|
|
131
|
+
/** Type "success" means that the feed was loaded and the config is valid */
|
|
132
|
+
type: 'success';
|
|
133
|
+
/** The feed config containing the loaded feed data */
|
|
134
|
+
config: InstagramFeedServiceConfig;
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* Not found result interface for Instagram feed service configuration loading.
|
|
138
|
+
* Returned when account or feed data cannot be found.
|
|
139
|
+
*/
|
|
140
|
+
export interface NotFoundInstagramFeedServiceConfigResult {
|
|
141
|
+
/** Type "notFound" means that the account was not found */
|
|
142
|
+
type: 'notFound';
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* Union type for Instagram feed service configuration results.
|
|
146
|
+
*/
|
|
147
|
+
export type InstagramFeedServiceConfigResult = SuccessInstagramFeedServiceConfigResult | NotFoundInstagramFeedServiceConfigResult;
|
|
148
|
+
/**
|
|
149
|
+
* Input object for loading Instagram feed service configuration
|
|
150
|
+
*/
|
|
151
|
+
/**
|
|
152
|
+
* Loads Instagram feed service configuration from the Wix Instagram API for SSR initialization.
|
|
153
|
+
* This function is designed to be used during Server-Side Rendering (SSR) to preload
|
|
154
|
+
* Instagram feed data that will be used to configure the InstagramFeedService.
|
|
155
|
+
*
|
|
156
|
+
* @param input InstagramFeedServiceConfig object containing accountId and optional limit
|
|
157
|
+
* @returns Promise that resolves to InstagramFeedServiceConfigResult (success with config or notFound)
|
|
158
|
+
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```tsx
|
|
161
|
+
* import { loadInstagramFeedServiceConfig } from '@wix/instagram/services';
|
|
162
|
+
*
|
|
163
|
+
* // In your SSR handler or server action
|
|
164
|
+
* const configResult = await loadInstagramFeedServiceConfig({
|
|
165
|
+
* accountId: 'instagram_account_123',
|
|
166
|
+
* limit: 12
|
|
167
|
+
* });
|
|
168
|
+
*
|
|
169
|
+
* if (configResult.type === 'success') {
|
|
170
|
+
* // Use configResult.config to initialize InstagramFeedService
|
|
171
|
+
* return configResult.config;
|
|
172
|
+
* } else {
|
|
173
|
+
* // Handle not found case
|
|
174
|
+
* return { accountId: 'instagram_account_123' }; // fallback config
|
|
175
|
+
* }
|
|
176
|
+
* ```
|
|
177
|
+
*/
|
|
178
|
+
export declare function loadInstagramFeedServiceConfig(input: InstagramFeedServiceConfig): Promise<InstagramFeedServiceConfigResult>;
|