@selfcommunity/react-templates 0.3.56-alpha.0 → 0.4.0-alpha.1

package/lib/cjs/components/Category/Category.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_ui_1 = require("@selfcommunity/react-ui");
@@ -55,10 +55,8 @@ function Category(inProps) {
     // Hooks
     const { scCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
     if (!scCategory) {
-        return react_1.default.createElement(Skeleton_1.default, null);
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return (react_1.default.createElement(Root, { id: id, className: (0, classnames_1.default)(classes.root, className) },
-        react_1.default.createElement(react_ui_1.CategoryHeader, { category: scCategory }),
-        react_1.default.createElement(CategoryFeed_1.default, Object.assign({ className: classes.feed, category: scCategory, widgets: widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, CategoryFeedProps))));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.CategoryHeader, { category: scCategory }), (0, jsx_runtime_1.jsx)(CategoryFeed_1.default, Object.assign({ className: classes.feed, category: scCategory, widgets: widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, CategoryFeedProps))] })));
 }
 exports.default = Category;

package/lib/cjs/components/Category/Skeleton.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("../CategoryFeed/Skeleton"));
@@ -35,8 +35,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function CategorySkeleton() {
-    return (react_1.default.createElement(Root, { className: classes.root },
-        react_1.default.createElement(react_ui_1.CategoryHeaderSkeleton, null),
-        react_1.default.createElement(Skeleton_1.default, null)));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.CategoryHeaderSkeleton, {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, {})] })));
 }
 exports.default = CategorySkeleton;

package/lib/cjs/components/CategoryFeed/CategoryFeed.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const react_ui_1 = require("@selfcommunity/react-ui");
 const api_services_1 = require("@selfcommunity/api-services");
@@ -80,9 +81,8 @@ function CategoryFeed(inProps) {
     const handleComposerSuccess = (feedObject) => {
         // Not insert if the category does not match
         if (feedObject.categories.findIndex((c) => c.id === scCategory.id) === -1) {
-            enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
-                action: (snackbarId) => (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], react_ui_1.ContributionUtils.getRouteData(feedObject)) },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }))),
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
+                action: (snackbarId) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], react_ui_1.ContributionUtils.getRouteData(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
                 variant: 'success',
                 autoHideDuration: 7000
             });
@@ -105,16 +105,16 @@ function CategoryFeed(inProps) {
         return w;
     }), [widgets, scCategory]);
     if (!scCategory) {
-        return react_1.default.createElement(index_1.CategoryFeedSkeleton, null);
+        return (0, jsx_runtime_1.jsx)(index_1.CategoryFeedSkeleton, {});
     }
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), ref: feedRef, endpoint: Object.assign(Object.assign({}, api_services_1.Endpoints.CategoryFeed), { url: () => api_services_1.Endpoints.CategoryFeed.url({ id: scCategory.id }) }), widgets: _widgets, ItemComponent: react_ui_1.FeedObject, itemPropsGenerator: (scUser, item) => ({
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), ref: feedRef, endpoint: Object.assign(Object.assign({}, api_services_1.Endpoints.CategoryFeed), { url: () => api_services_1.Endpoints.CategoryFeed.url({ id: scCategory.id }) }), widgets: _widgets, ItemComponent: react_ui_1.FeedObject, itemPropsGenerator: (scUser, item) => ({
             feedObject: item[item.type],
             feedObjectType: item.type,
             feedObjectActivities: item.activities ? item.activities : null,
             markRead: scUser ? !item.seen_by_id.includes(scUser.id) : null
         }), itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: react_ui_1.FeedObjectSkeleton, ItemSkeletonProps: {
             template: react_ui_1.SCFeedObjectTemplateType.PREVIEW
-        }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: react_1.default.createElement(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { categories: [scCategory] }, feedType: types_1.SCFeedTypologyType.CATEGORY }), CustomAdvProps: { categoriesId: [scCategory.id] }, enabledCustomAdvPositions: [
+        }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: (0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { categories: [scCategory] }, feedType: types_1.SCFeedTypologyType.CATEGORY }), CustomAdvProps: { categoriesId: [scCategory.id] }, enabledCustomAdvPositions: [
             types_1.SCCustomAdvPosition.POSITION_FEED_SIDEBAR,
             types_1.SCCustomAdvPosition.POSITION_FEED,
             types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR

package/lib/cjs/components/CategoryFeed/Skeleton.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const react_ui_1 = require("@selfcommunity/react-ui");
@@ -33,10 +34,6 @@ const Root = (0, styles_1.styled)(react_ui_1.FeedSkeleton, {
  *
  */
 function CategoryFeedSkeleton() {
-    return (react_1.default.createElement(Root, { className: classes.root, sidebar: react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_ui_1.GenericSkeleton, { sx: { mb: 2 } }),
-            react_1.default.createElement(react_ui_1.GenericSkeleton, { sx: { mb: 2 } })) },
-        react_1.default.createElement(react_ui_1.InlineComposerWidgetSkeleton, null),
-        Array.from({ length: 5 }).map((e, i) => (react_1.default.createElement(react_ui_1.FeedObjectSkeleton, { key: i, template: react_ui_1.SCFeedObjectTemplateType.DETAIL })))));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root, sidebar: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.GenericSkeleton, { sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(react_ui_1.GenericSkeleton, { sx: { mb: 2 } })] }) }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidgetSkeleton, {}), Array.from({ length: 5 }).map((e, i) => ((0, jsx_runtime_1.jsx)(react_ui_1.FeedObjectSkeleton, { template: react_ui_1.SCFeedObjectTemplateType.DETAIL }, i)))] })));
 }
 exports.default = CategoryFeedSkeleton;

package/lib/cjs/components/Event/Event.d.ts

@@ -0,0 +1,77 @@
+import { FeedObjectProps, FeedSidebarProps, SCFeedWidgetType, EventHeaderProps } from '@selfcommunity/react-ui';
+import { SCEventType } from '@selfcommunity/types';
+import { EventFeedProps } from '../EventFeed';
+export interface EventProps {
+    /**
+     * Id of the feed object
+     * @default 'feed'
+     */
+    id?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Event Object
+     * @default null
+     */
+    event?: SCEventType;
+    /**
+     * Id of the event for filter the feed
+     * @default null
+     */
+    eventId?: number;
+    /**
+     * Widgets to be rendered into the feed
+     * @default []
+     */
+    widgets?: SCFeedWidgetType[] | null;
+    /**
+     * Props to spread to single feed object
+     * @default empty object
+     */
+    FeedObjectProps?: FeedObjectProps;
+    /**
+     * Props to spread to single feed object
+     * @default {top: 0, bottomBoundary: `#${id}`}
+     */
+    FeedSidebarProps?: FeedSidebarProps;
+    /**
+     * Props to spread to EventFeed component
+     * @default {}
+     */
+    EventFeedProps?: EventFeedProps;
+    /**
+     * Props to spread EventHeader component
+     * @default {}
+     */
+    EventHeaderProps?: EventHeaderProps;
+}
+/**
+ * > API documentation for the Community-JS Category Template. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a specific event's template.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-templates/Components/Group)
+
+ #### Import
+
+ ```jsx
+ import {Group} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCGroupTemplate` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroupTemplate-root|Styles applied to the root element.|
+ |feed|.SCGroupTemplate-feed|Styles applied to the feed element.|
+ *
+ * @param inProps
+ */
+export default function Event(inProps: EventProps): JSX.Element;

package/lib/cjs/components/Event/Event.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const react_ui_1 = require("@selfcommunity/react-ui");
+const react_core_1 = require("@selfcommunity/react-core");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("./constants");
+const EventFeed_1 = tslib_1.__importDefault(require("../EventFeed"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    feed: `${constants_1.PREFIX}-feed`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Category Template. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a specific event's template.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-templates/Components/Group)
+
+ #### Import
+
+ ```jsx
+ import {Group} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCGroupTemplate` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroupTemplate-root|Styles applied to the root element.|
+ |feed|.SCGroupTemplate-feed|Styles applied to the feed element.|
+ *
+ * @param inProps
+ */
+function Event(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { id = 'event', className, event, eventId, widgets, FeedObjectProps, FeedSidebarProps, EventFeedProps = {}, EventHeaderProps = {} } = props;
+    // HOOKS
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    if (!scEvent) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.EventHeader, Object.assign({ event: scEvent }, EventHeaderProps)), (0, jsx_runtime_1.jsx)(EventFeed_1.default, Object.assign({ className: classes.feed, event: scEvent, widgets: widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, EventFeedProps))] })));
+}
+exports.default = Event;

package/lib/cjs/components/Event/Skeleton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS Group Skeleton Template. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventSkeletonTemplate} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCEventTemplate-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventTemplate-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function EventSkeletonTemplate(): JSX.Element;

package/lib/cjs/components/Event/Skeleton.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Skeleton_1 = tslib_1.__importDefault(require("../EventFeed/Skeleton"));
+const react_ui_1 = require("@selfcommunity/react-ui");
+const constants_1 = require("./constants");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Group Skeleton Template. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventSkeletonTemplate} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCEventTemplate-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventTemplate-skeleton-root|Styles applied to the root element.|
+ *
+ */
+function EventSkeletonTemplate() {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.EventHeaderSkeleton, {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, {})] })));
+}
+exports.default = EventSkeletonTemplate;

package/lib/cjs/components/Event/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCEventTemplate";

package/lib/cjs/components/Event/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCEventTemplate';

package/lib/cjs/components/Event/index.d.ts

@@ -0,0 +1,4 @@
+import EventSkeleton from './Skeleton';
+import Event, { EventProps } from './Event';
+export default Event;
+export { EventProps, EventSkeleton };

package/lib/cjs/components/Event/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventSkeleton = void 0;
+const tslib_1 = require("tslib");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+exports.EventSkeleton = Skeleton_1.default;
+const Event_1 = tslib_1.__importDefault(require("./Event"));
+exports.default = Event_1.default;

package/lib/cjs/components/EventFeed/EventFeed.d.ts

@@ -0,0 +1,69 @@
+import { FeedObjectProps, FeedProps, FeedSidebarProps, SCFeedWidgetType } from '@selfcommunity/react-ui';
+import { SCEventType } from '@selfcommunity/types';
+export interface EventFeedProps {
+    /**
+     * Id of the feed object
+     * @default 'feed'
+     */
+    id?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Event Object
+     * @default null
+     */
+    event?: SCEventType;
+    /**
+     * Id of the event for filter the feed
+     * @default null
+     */
+    eventId?: number;
+    /**
+     * Widgets to be rendered into the feed
+     * @default [EventInfoWidget]
+     */
+    widgets?: SCFeedWidgetType[] | null;
+    /**
+     * Props to spread to single feed object
+     * @default empty object
+     */
+    FeedObjectProps?: FeedObjectProps;
+    /**
+     * Props to spread to single feed object
+     * @default {top: 0, bottomBoundary: `#${id}`}
+     */
+    FeedSidebarProps?: FeedSidebarProps;
+    /**
+     * Props to spread to feed component
+     * @default {}
+     */
+    FeedProps?: Omit<FeedProps, 'endpoint' | 'widgets' | 'ItemComponent' | 'itemPropsGenerator' | 'itemIdGenerator' | 'ItemSkeleton' | 'ItemSkeletonProps' | 'FeedSidebarProps'>;
+}
+/**
+ * > API documentation for the Community-JS Group Feed Template. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a specific event's feed.
+
+ #### Import
+
+ ```jsx
+ import {EventFeed} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCEventFeedTemplate` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventFeedTemplate-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+export default function EventFeed(inProps: EventFeedProps): JSX.Element;

package/lib/cjs/components/EventFeed/EventFeed.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const react_ui_1 = require("@selfcommunity/react-ui");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_intl_1 = require("react-intl");
+const notistack_1 = require("notistack");
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const material_1 = require("@mui/material");
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(react_ui_1.Feed, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+// Widgets for feed
+const WIDGETS = [
+    {
+        type: 'widget',
+        component: react_ui_1.EventLocationWidget,
+        componentProps: {},
+        column: 'right',
+        position: 0
+    },
+    {
+        type: 'widget',
+        component: react_ui_1.EventMembersWidget,
+        componentProps: {},
+        column: 'right',
+        position: 1
+    },
+    {
+        type: 'widget',
+        component: react_ui_1.RelatedEventsWidget,
+        componentProps: {},
+        column: 'right',
+        position: 2
+    }
+];
+/**
+ * > API documentation for the Community-JS Group Feed Template. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a specific event's feed.
+
+ #### Import
+
+ ```jsx
+ import {EventFeed} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCEventFeedTemplate` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventFeedTemplate-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+function EventFeed(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { id = 'event_feed', className, event, eventId, widgets = WIDGETS, FeedObjectProps = {}, FeedSidebarProps = null, FeedProps = {} } = props;
+    // CONTEXT
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // REF
+    const feedRef = (0, react_1.useRef)();
+    // Hooks
+    const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    // HANDLERS
+    const handleComposerSuccess = (feedObject) => {
+        var _a;
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
+            action: (snackbarId) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], react_ui_1.ContributionUtils.getRouteData(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
+            variant: 'success',
+            autoHideDuration: 7000
+        });
+        if (((_a = feedObject.event) === null || _a === void 0 ? void 0 : _a.id) === scEvent.id) {
+            // Hydrate feedUnit
+            const feedUnit = {
+                type: feedObject.type,
+                [feedObject.type]: feedObject,
+                seen_by_id: [],
+                has_boost: false
+            };
+            feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
+        }
+    };
+    // WIDGETS
+    const _widgets = (0, react_1.useMemo)(() => widgets.map((w) => {
+        if (scEvent) {
+            return Object.assign(Object.assign({}, w), { componentProps: Object.assign(Object.assign({}, w.componentProps), { eventId: scEvent.id }) });
+        }
+        return w;
+    }), [widgets, scEvent]);
+    if (!scEvent) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    else if (scEvent.privacy === types_1.SCEventPrivacyType.PRIVATE &&
+        scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.SUBSCRIBED &&
+        scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.INVITED &&
+        scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.GOING &&
+        scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.NOT_GOING) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.EventInfoWidget, { className: classes.root, event: scEvent }) })));
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id, ref: feedRef, endpoint: Object.assign(Object.assign({}, api_services_1.Endpoints.GetEventFeed), { url: () => api_services_1.Endpoints.GetEventFeed.url({ id: scEvent.id }) }), widgets: _widgets, ItemComponent: react_ui_1.FeedObject, itemPropsGenerator: (scUser, item) => {
+            var _a;
+            return ({
+                feedObject: item[item.type],
+                feedObjectType: item.type,
+                feedObjectActivities: item.activities ? item.activities : null,
+                markRead: scUser ? !((_a = item === null || item === void 0 ? void 0 : item.seen_by_id) === null || _a === void 0 ? void 0 : _a.includes(scUser.id)) : null
+            });
+        }, itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: react_ui_1.FeedObjectSkeleton, ItemSkeletonProps: {
+            template: react_ui_1.SCFeedObjectTemplateType.PREVIEW
+        }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.EventInfoWidget, { className: classes.root, event: scEvent }), Boolean(scEvent &&
+                    ((!scUserContext.user && scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC) ||
+                        (scUserContext.user &&
+                            (scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.SUBSCRIBED ||
+                                scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.INVITED ||
+                                scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.GOING ||
+                                scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.NOT_GOING)))) && ((0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { event: scEvent }, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.eventFeed.composer.label", defaultMessage: "templates.eventFeed.composer.label" }), feedType: types_1.SCFeedTypologyType.EVENT }))] }), CustomAdvProps: { position: types_1.SCCustomAdvPosition.POSITION_FEED, groupsId: [scEvent.id] }, enabledCustomAdvPositions: [
+            types_1.SCCustomAdvPosition.POSITION_FEED_SIDEBAR,
+            types_1.SCCustomAdvPosition.POSITION_FEED,
+            types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR
+        ] }, FeedProps)));
+}
+exports.default = EventFeed;

package/lib/cjs/components/EventFeed/Skeleton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS Group Feed Skeleton Template. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {GroupFeedSkeleton} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCGroupFeedTemplate-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroupFeedTemplate-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function EventFeedSkeleton(): JSX.Element;

package/lib/cjs/components/EventFeed/Skeleton.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const styles_1 = require("@mui/material/styles");
+const react_ui_1 = require("@selfcommunity/react-ui");
+const constants_1 = require("./constants");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`
+};
+const Root = (0, styles_1.styled)(react_ui_1.FeedSkeleton, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Group Feed Skeleton Template. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {GroupFeedSkeleton} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCGroupFeedTemplate-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroupFeedTemplate-skeleton-root|Styles applied to the root element.|
+ *
+ */
+function EventFeedSkeleton() {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root, sidebar: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.GenericSkeleton, { sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(react_ui_1.GenericSkeleton, { sx: { mb: 2 } })] }) }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidgetSkeleton, {}), Array.from({ length: 5 }).map((e, i) => ((0, jsx_runtime_1.jsx)(react_ui_1.FeedObjectSkeleton, { template: react_ui_1.SCFeedObjectTemplateType.DETAIL }, i)))] })));
+}
+exports.default = EventFeedSkeleton;

package/lib/cjs/components/EventFeed/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCEventFeedTemplate";

package/lib/cjs/components/EventFeed/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCEventFeedTemplate';

package/lib/cjs/components/EventFeed/index.d.ts

@@ -0,0 +1,4 @@
+import EventFeedSkeleton from './Skeleton';
+import EventFeed, { EventFeedProps } from './EventFeed';
+export default EventFeed;
+export { EventFeedProps, EventFeedSkeleton };

package/lib/cjs/components/EventFeed/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventFeedSkeleton = void 0;
+const tslib_1 = require("tslib");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+exports.EventFeedSkeleton = Skeleton_1.default;
+const EventFeed_1 = tslib_1.__importDefault(require("./EventFeed"));
+exports.default = EventFeed_1.default;