@selfcommunity/react-templates 0.3.50-events.38 → 0.3.50-events.40

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

@@ -0,0 +1,72 @@
+import { FeedObjectProps, FeedSidebarProps, SCFeedWidgetType } 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;
+}
+/**
+ * > 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,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+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 = {} } = props;
+    // HOOKS
+    const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const handleSubscribe = (group, status) => {
+        setSCEvent(Object.assign({}, scEvent, { subscription_status: status }));
+    };
+    if (!scEvent) {
+        return react_1.default.createElement(Skeleton_1.default, null);
+    }
+    return (react_1.default.createElement(Root, { id: id, className: (0, classnames_1.default)(classes.root, className) },
+        react_1.default.createElement(react_ui_1.EventHeader, { eventId: scEvent.id, GroupSubscribeButtonProps: { onSubscribe: handleSubscribe } }),
+        react_1.default.createElement(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,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+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 (react_1.default.createElement(Root, { className: classes.root },
+        react_1.default.createElement(react_ui_1.EventHeaderSkeleton, null),
+        react_1.default.createElement(Skeleton_1.default, null)));
+}
+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,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(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 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
+    }
+];
+/**
+ * > 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 { 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(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" }))),
+            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 react_1.default.createElement(Skeleton_1.default, null);
+    }
+    else if (scEvent &&
+        scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.SUBSCRIBED &&
+        scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.GOING &&
+        scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.NOT_GOING) {
+        return react_1.default.createElement(react_ui_1.EventInfoWidget, { className: classes.root, event: scEvent });
+    }
+    return (react_1.default.createElement(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: react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_ui_1.EventInfoWidget, { className: classes.root, event: scEvent }),
+            scEvent && scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.SUBSCRIBED && (react_1.default.createElement(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess, 
+                // defaultValue={{event: scEvent}}
+                label: react_1.default.createElement(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,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+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 (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 })))));
+}
+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;

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

@@ -0,0 +1,72 @@
+import { FeedObjectProps, FeedSidebarProps, SCFeedWidgetType } 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;
+}
+/**
+ * > 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/esm/components/Event/Event.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+import { EventHeader } from '@selfcommunity/react-ui';
+import { useSCFetchEvent } from '@selfcommunity/react-core';
+import EventSkeletonTemplate from './Skeleton';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { PREFIX } from './constants';
+import EventFeed from '../EventFeed';
+const classes = {
+    root: `${PREFIX}-root`,
+    feed: `${PREFIX}-feed`
+};
+const Root = styled(Box, {
+    name: 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
+ */
+export default function Event(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = 'event', className, event, eventId, widgets, FeedObjectProps, FeedSidebarProps, EventFeedProps = {} } = props;
+    // HOOKS
+    const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
+    const handleSubscribe = (group, status) => {
+        setSCEvent(Object.assign({}, scEvent, { subscription_status: status }));
+    };
+    if (!scEvent) {
+        return React.createElement(EventSkeletonTemplate, null);
+    }
+    return (React.createElement(Root, { id: id, className: classNames(classes.root, className) },
+        React.createElement(EventHeader, { eventId: scEvent.id, GroupSubscribeButtonProps: { onSubscribe: handleSubscribe } }),
+        React.createElement(EventFeed, Object.assign({ className: classes.feed, event: scEvent, widgets: widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, EventFeedProps))));
+}

package/lib/esm/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;