@selfcommunity/react-ui 0.7.50-event.29 → 0.7.50-events.100

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

@@ -0,0 +1,96 @@
+import { GridProps } from '@mui/material';
+import { EndpointType } from '@selfcommunity/api-services';
+import React from 'react';
+import { EventProps, EventSkeletonProps } from '../Event';
+import { EventsSkeletonProps } from '../Events/Skeleton';
+export declare const EventsChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "avatar" | "className" | "style" | "classes" | "label" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export interface EventsProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Event API Endpoint
+     * @default Endpoints.SearchEvents
+     */
+    endpoint: EndpointType;
+    /**
+     * Feed API Query Params
+     * @default [{'limit': 20, 'offset': 0}]
+     */
+    endpointQueryParams?: Record<string, string | number>;
+    /**
+     * Props to spread to single event object
+     * @default {}
+     */
+    EventComponentProps?: EventProps;
+    /**
+     * Props to spread to events skeleton object
+     * @default {}
+     */
+    EventsSkeletonComponentProps?: EventsSkeletonProps;
+    /**
+     * Props to spread to single event skeleton object
+     * @default {}
+     */
+    EventSkeletonComponentProps?: EventSkeletonProps;
+    /**
+     * Props spread to grid container
+     * @default {}
+     */
+    GridContainerComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
+    /**
+     * Props spread to single grid item
+     * @default {}
+     */
+    GridItemComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
+    /**
+     * Show/Hide filters
+     * @default true
+     */
+    showFilters?: boolean;
+    /**
+     * Filters component
+     * @param props
+     */
+    filters?: JSX.Element;
+    /** If true, it means that the endpoint fetches all events available
+     * @default true
+     */
+    general?: boolean;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Events component. Learn about the available props and the CSS API.
+ *
+ *
+ * The Events component renders the list of all available events.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Events)
+
+ #### Import
+ ```jsx
+ import {Events} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCEvents` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvents-root|Styles applied to the root element.|
+ |filters|.SCEvents-filters|Styles applied to the title element.|
+ |events|.SCEvents-events|Styles applied to the title element.|
+ |item|.SCEvents-item|Styles applied to the title element.|
+ |noResults|.SCEvents-no-results|Styles applied to no results section.|
+ |showMore|.SCEvents-show-more|Styles applied to show more button element.|
+
+ * @param inProps
+ */
+export default function Events(inProps: EventsProps): JSX.Element;

package/lib/cjs/components/Events/Events.js

@@ -0,0 +1,213 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventsChipRoot = void 0;
+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 system_1 = require("@mui/system");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const utils_1 = require("@selfcommunity/utils");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const Errors_1 = require("../../constants/Errors");
+const Pagination_1 = require("../../constants/Pagination");
+const CreateEventButton_1 = tslib_1.__importDefault(require("../CreateEventButton"));
+const Event_1 = tslib_1.__importStar(require("../Event"));
+const Skeleton_1 = tslib_1.__importDefault(require("../Events/Skeleton"));
+const constants_1 = require("./constants");
+const PastEventsFilter_1 = tslib_1.__importDefault(require("./PastEventsFilter"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    filters: `${constants_1.PREFIX}-filters`,
+    events: `${constants_1.PREFIX}-events`,
+    item: `${constants_1.PREFIX}-item`,
+    itemSkeleton: `${constants_1.PREFIX}-item-skeleton`,
+    noResults: `${constants_1.PREFIX}-no-results`,
+    showMore: `${constants_1.PREFIX}-show-more`
+};
+const options = [
+    { value: types_1.SCEventDateFilterType.ANY, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.select.any", defaultMessage: "ui.events.select.any" }) },
+    { value: types_1.SCEventDateFilterType.TODAY, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.select.today", defaultMessage: "ui.events.select.today" }) },
+    { value: types_1.SCEventDateFilterType.TOMORROW, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.select.tomorrow", defaultMessage: "ui.events.select.tomorrow" }) },
+    { value: types_1.SCEventDateFilterType.THIS_WEEK, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.select.thisWeek", defaultMessage: "ui.events.select.thisWeek" }) },
+    { value: types_1.SCEventDateFilterType.NEXT_WEEK, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.select.nextWeek", defaultMessage: "ui.events.select.nextWeek" }) },
+    { value: types_1.SCEventDateFilterType.THIS_MONTH, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.select.thisMonth", defaultMessage: "ui.events.select.thisMonth" }) }
+];
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+exports.EventsChipRoot = (0, styles_1.styled)(material_1.Chip, {
+    name: constants_1.PREFIX,
+    slot: 'EventsChipRoot',
+    shouldForwardProp: (prop) => prop !== 'showFollowed' && prop !== 'showPastEvents'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Events component. Learn about the available props and the CSS API.
+ *
+ *
+ * The Events component renders the list of all available events.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Events)
+
+ #### Import
+ ```jsx
+ import {Events} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCEvents` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvents-root|Styles applied to the root element.|
+ |filters|.SCEvents-filters|Styles applied to the title element.|
+ |events|.SCEvents-events|Styles applied to the title element.|
+ |item|.SCEvents-item|Styles applied to the title element.|
+ |noResults|.SCEvents-no-results|Styles applied to no results section.|
+ |showMore|.SCEvents-show-more|Styles applied to show more button element.|
+
+ * @param inProps
+ */
+function Events(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { endpoint = api_services_1.Endpoints.SearchEvents, endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventsSkeletonComponentProps = {}, EventSkeletonComponentProps = { elevation: 0, square: true }, GridContainerComponentProps = {}, GridItemComponentProps = {}, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpoint", "endpointQueryParams", "className", "EventComponentProps", "EventsSkeletonComponentProps", "EventSkeletonComponentProps", "GridContainerComponentProps", "GridItemComponentProps", "showFilters", "filters", "general"]);
+    // STATE
+    const [events, setEvents] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [next, setNext] = (0, react_1.useState)(null);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [dateSearch, setDateSearch] = (0, react_1.useState)(options[0].value);
+    const [showFollowed, setShowFollowed] = (0, react_1.useState)(false);
+    const [showPastEvents, setShowPastEvents] = (0, react_1.useState)(false);
+    // CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
+    const onlyStaffEnabled = (0, react_1.useMemo)(() => scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [scPreferencesContext.preferences]);
+    // MEMO
+    const contentAvailability = react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // HANDLERS
+    const handleChipClick = () => {
+        setShowFollowed(!showFollowed);
+    };
+    const handleDeleteClick = () => {
+        setShowFollowed(false);
+    };
+    const handleChipPastClick = () => {
+        setShowPastEvents(!showPastEvents);
+    };
+    const handleDeletePastClick = () => {
+        setShowPastEvents(false);
+    };
+    /**
+     * Fetches events list
+     */
+    const fetchEvents = () => {
+        setLoading(true);
+        return api_services_1.http
+            .request({
+            url: endpoint.url({}),
+            method: endpoint.method,
+            params: Object.assign(Object.assign({}, endpointQueryParams), (general
+                ? Object.assign(Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: types_1.SCEventDateFilterType.PAST })) : Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), { subscription_status: types_1.SCEventSubscriptionStatusType.GOING }), (showPastEvents && { past: showPastEvents }))))
+        })
+            .then((res) => {
+            setEvents(res.data.results);
+            setNext(res.data.next);
+            setLoading(false);
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    };
+    /**
+     * On mount, fetches events list
+     */
+    (0, react_1.useEffect)(() => {
+        if (!contentAvailability) {
+            return;
+        }
+        else {
+            fetchEvents();
+        }
+    }, [contentAvailability, search, dateSearch, showFollowed, showPastEvents]);
+    const handleNext = (0, react_1.useMemo)(() => () => {
+        if (!next) {
+            return;
+        }
+        return api_services_1.http
+            .request({
+            url: next,
+            method: general ? api_services_1.Endpoints.SearchEvents.method : api_services_1.Endpoints.GetUserEvents.method
+        })
+            .then((res) => {
+            setEvents([...events, ...res.data.results]);
+            setNext(res.data.next);
+        })
+            .catch((error) => console.log(error))
+            .then(() => setLoading(false));
+    }, [next]);
+    /**
+     * Get events filtered
+     */
+    const getFilteredEvents = () => {
+        if (search) {
+            return events.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
+        }
+        return events;
+    };
+    /**
+     * Handle change filter name
+     * @param event
+     */
+    const handleOnChangeFilterName = (event) => {
+        setSearch(event.target.value);
+    };
+    /**
+     * Handle change time frame
+     * @param event
+     */
+    const handleOnChangeTimeFrame = (event) => {
+        setDateSearch(event.target.value);
+    };
+    /**
+     * Renders events list
+     */
+    const filteredEvents = (0, utils_1.sortByAttr)(getFilteredEvents(), 'order');
+    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, autoHide: !events.length && !showPastEvents }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { size: 'small', fullWidth: true, value: search, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: showPastEvents, size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            , { 
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                color: showFollowed ? 'secondary' : 'default', 
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                variant: showFollowed ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick, 
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                showFollowed: showFollowed, deleteIcon: showFollowed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== types_1.SCEventDateFilterType.ANY }) }))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !events.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !react_core_1.UserUtils.isStaff(scUserContext.user)) ||
+                        (onlyStaffEnabled && react_core_1.UserUtils.isStaff(scUserContext.user) && general) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredEvents.map((event) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && filteredEvents.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })] }));
+    /**
+     * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
+     */
+    if (!contentAvailability && !scUserContext.user) {
+        return null;
+    }
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: c })));
+}
+exports.default = Events;

package/lib/cjs/components/Events/PastEventsFilter.d.ts

@@ -0,0 +1,8 @@
+import { ChipProps } from '@mui/material';
+export interface PastEventsFilterProps extends ChipProps {
+    autoHide?: boolean;
+    showPastEvents: boolean;
+    handleClick: () => void;
+    handleDeleteClick?: () => void;
+}
+export default function PastEventsFilter(inProps: PastEventsFilterProps): JSX.Element;

package/lib/cjs/components/Events/PastEventsFilter.js

@@ -0,0 +1,35 @@
+"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 react_intl_1 = require("react-intl");
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const Events_1 = require("./Events");
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
+function PastEventsFilter(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { autoHide = false, showPastEvents, handleClick, handleDeleteClick } = props, rest = tslib_1.__rest(props, ["autoHide", "showPastEvents", "handleClick", "handleDeleteClick"]);
+    if (autoHide) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(Events_1.EventsChipRoot
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    , Object.assign({ 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        color: showPastEvents ? 'secondary' : 'default', 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        variant: showPastEvents ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByPastEvents", defaultMessage: "ui.events.filterByPastEvents" }), onClick: handleClick, 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        showPastEvents: showPastEvents, deleteIcon: showPastEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showPastEvents ? handleDeleteClick : undefined }, rest)));
+}
+exports.default = PastEventsFilter;

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

@@ -0,0 +1,49 @@
+import { GridProps } from '@mui/material';
+export interface EventsSkeletonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    EventSkeletonProps?: any;
+    /**
+     * Props spread to grid container
+     * @default {}
+     */
+    GridContainerComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
+    /**
+     * Props spread to single grid item
+     * @default {}
+     */
+    GridItemComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
+    /**
+     * @default 20
+     */
+    eventsNumber?: number;
+}
+/**
+ * > API documentation for the Community-JS Groups Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEvents-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvents-skeleton-root|Styles applied to the root element.|
+ |events|.SCEvents-skeleton-events|Styles applied to the group elements.|
+ *
+ */
+export default function EventsSkeleton(inProps: EventsSkeletonProps): JSX.Element;

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

@@ -0,0 +1,43 @@
+"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 constants_1 = require("./constants");
+const material_1 = require("@mui/material");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Event_1 = require("../Event");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    events: `${constants_1.PREFIX}-events`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Groups Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEvents-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvents-skeleton-root|Styles applied to the root element.|
+ |events|.SCEvents-skeleton-events|Styles applied to the group elements.|
+ *
+ */
+function EventsSkeleton(inProps) {
+    const { className, EventSkeletonProps = {}, eventsNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {} } = inProps, rest = tslib_1.__rest(inProps, ["className", "EventSkeletonProps", "eventsNumber", "GridContainerComponentProps", "GridItemComponentProps"]);
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.events }, GridContainerComponentProps, { children: [...Array(eventsNumber)].map((event, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonProps)) }), index))) })) })));
+}
+exports.default = EventsSkeleton;

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

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

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

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

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

@@ -0,0 +1,4 @@
+import Events, { EventsProps } from './Events';
+import EventsSkeleton, { EventsSkeletonProps } from './Skeleton';
+export default Events;
+export { EventsProps, EventsSkeleton, EventsSkeletonProps };

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

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