@selfcommunity/react-ui 0.7.55 → 0.8.0-alpha.0

package/lib/esm/components/Event/Event.js

@@ -0,0 +1,142 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Chip, Divider, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Link, SCRoutes, useSCFetchEvent, useSCRouting } from '@selfcommunity/react-core';
+import { SCEventLocationType } from '@selfcommunity/types';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import BaseItem from '../../shared/BaseItem';
+import Calendar from '../../shared/Calendar';
+import EventInfoDetails from '../../shared/EventInfoDetails';
+import { SCEventTemplateType } from '../../types/event';
+import EventParticipantsButton from '../EventParticipantsButton';
+import User from '../User';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import EventSkeleton from './Skeleton';
+const classes = {
+    root: `${PREFIX}-root`,
+    detailRoot: `${PREFIX}-detail-root`,
+    previewRoot: `${PREFIX}-preview-root`,
+    snippetRoot: `${PREFIX}-snippet-root`,
+    detailImageWrapper: `${PREFIX}-detail-image-wrapper`,
+    detailImage: `${PREFIX}-detail-image`,
+    detailInProgress: `${PREFIX}-detail-in-progress`,
+    detailNameWrapper: `${PREFIX}-detail-name-wrapper`,
+    detailName: `${PREFIX}-detail-name`,
+    detailContent: `${PREFIX}-detail-content`,
+    detailUser: `${PREFIX}-detail-user`,
+    detailFirstDivider: `${PREFIX}-detail-first-divider`,
+    detailSecondDivider: `${PREFIX}-detail-second-divider`,
+    detailActions: `${PREFIX}-detail-actions`,
+    previewImageWrapper: `${PREFIX}-preview-image-wrapper`,
+    previewImage: `${PREFIX}-preview-image`,
+    previewInProgress: `${PREFIX}-preview-in-progress`,
+    previewNameWrapper: `${PREFIX}-preview-name-wrapper`,
+    previewName: `${PREFIX}-preview-name`,
+    previewContent: `${PREFIX}-preview-content`,
+    previewActions: `${PREFIX}-preview-actions`,
+    snippetImage: `${PREFIX}-snippet-image`,
+    snippetAvatar: `${PREFIX}-snippet-avatar`,
+    snippetInProgress: `${PREFIX}-snippet-in-progress`,
+    snippetPrimary: `${PREFIX}-snippet-primary`,
+    snippetSecondary: `${PREFIX}-snippet-secondary`,
+    snippetActions: `${PREFIX}-snippet-actions`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+const DetailRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'DetailRoot',
+    overridesResolver: (props, styles) => styles.detailRoot
+})(() => ({}));
+const PreviewRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'PreviewRoot',
+    overridesResolver: (props, styles) => styles.previewRoot
+})(() => ({}));
+const SnippetRoot = styled(BaseItem, {
+    name: PREFIX,
+    slot: 'SnippetRoot',
+    overridesResolver: (props, styles) => styles.snippetRoot
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Event component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders an event item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Event)
+
+ #### Import
+
+ ```jsx
+ import {event} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEvent` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvent-root|Styles applied to the root element.|
+ |avatar|.SCEvent-avatar|Styles applied to the avatar element.|
+ |primary|.SCEvent-primary|Styles applied to the primary item element section|
+ |secondary|.SCEvent-secondary|Styles applied to the secondary item element section|
+ |actions|.SCEvent-actions|Styles applied to the actions section.|
+
+
+ *
+ * @param inProps
+ */
+export default function Event(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
+    // STATE
+    const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    const inProgress = useMemo(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    // HOOKS
+    const intl = useIntl();
+    /**
+     * Renders event object
+     */
+    if (!scEvent) {
+        return _jsx(EventSkeleton, Object.assign({ template: template }, EventSkeletonComponentProps, rest, { actions: actions }));
+    }
+    /**
+     * Renders event object
+     */
+    let contentObj;
+    if (template === SCEventTemplateType.DETAIL) {
+        contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.detailInProgress })), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [scEvent.active ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))) : (_jsx(Box, Object.assign({ className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventParticipantsButton, Object.assign({ event: scEvent }, EventParticipantsButtonComponentProps))] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+    }
+    else if (template === SCEventTemplateType.PREVIEW) {
+        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && _jsx(EventParticipantsButton, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+    }
+    else {
+        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress }))] })), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
+                            weekday: 'long',
+                            month: 'long',
+                            day: 'numeric'
+                        })}` })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: scEvent.name }))] })), secondary: _jsxs(Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: [_jsx(FormattedMessage, { id: `ui.eventForm.privacy.${scEvent.privacy}`, defaultMessage: `ui.eventForm.privacy.${scEvent.privacy}` }), " -", ' ', (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.eventForm.address.live.label`, defaultMessage: `ui.eventForm.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.eventForm.address.online.label`, defaultMessage: `ui.eventForm.address.online.label` }))] })), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Box, Object.assign({ className: classes.snippetActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) }))) }));
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest, { children: contentObj })));
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { SCEventTemplateType } from '../../types/event';
+import { WidgetProps } from '../Widget';
+export interface EventSkeletonProps extends WidgetProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Event template type
+     * @default 'preview'
+     */
+    template?: SCEventTemplateType;
+    /**
+     * Disable skeleton animation
+     */
+    skeletonsAnimation?: false | 'wave' | 'pulse';
+    /**
+     * Prop to pass an action to be rendered next to the skeleton
+     */
+    actions?: React.ReactNode;
+}
+/**
+ * > API documentation for the Community-JS Event Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEvent-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvent-skeleton-root|Styles applied to the root element.|
+ |image|.SCEvent-skeleton-image|Styles applied to the image element.|
+ |action|.SCEvent-skeleton-action|Styles applied to action section.|
+ *
+ */
+export default function EventSkeleton(inProps: EventSkeletonProps): JSX.Element;

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

@@ -0,0 +1,89 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AvatarGroup, Box, Button, CardActions, CardContent, Divider, Icon, Stack, useTheme } from '@mui/material';
+import Skeleton from '@mui/material/Skeleton';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import BaseItem from '../../shared/BaseItem';
+import { SCEventTemplateType } from '../../types/event';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    skeletonDetailRoot: `${PREFIX}-skeleton-detail-root`,
+    skeletonPreviewRoot: `${PREFIX}-skeleton-preview-root`,
+    skeletonSnippetRoot: `${PREFIX}-skeleton-snippet-root`,
+    skeletonDetailCalendar: `${PREFIX}-skeleton-detail-calendar`,
+    skeletonDetailContent: `${PREFIX}-skeleton-detail-content`,
+    skeletonDetailActions: `${PREFIX}-skeleton-detail-actions`,
+    skeletonDetailUser: `${PREFIX}-skeleton-detail-user`,
+    skeletonDetailFirstDivider: `${PREFIX}-skeleton-detail-first-divider`,
+    skeletonDetailSecondDivider: `${PREFIX}-skeleton-detail-second-divider`,
+    skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
+    skeletonPreviewName: `${PREFIX}-skeleton-preview-name`,
+    skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`,
+    skeletonSnippetImage: `${PREFIX}-skeleton-snippet-image`,
+    skeletonSnippetAction: `${PREFIX}-skeleton-snippet-action`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+const SkeletonDetailRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonDetailRoot'
+})(() => ({}));
+const SkeletonPreviewRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonPreviewRoot'
+})(() => ({}));
+const SkeletonSnippetRoot = styled(BaseItem, {
+    name: PREFIX,
+    slot: 'SkeletonSnippetRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Event Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEvent-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvent-skeleton-root|Styles applied to the root element.|
+ |image|.SCEvent-skeleton-image|Styles applied to the image element.|
+ |action|.SCEvent-skeleton-action|Styles applied to action section.|
+ *
+ */
+export default function EventSkeleton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, template = SCEventTemplateType.SNIPPET, skeletonsAnimation = 'wave', actions } = props, rest = __rest(props, ["className", "template", "skeletonsAnimation", "actions"]);
+    const theme = useTheme();
+    /**
+     * Renders event object
+     */
+    let contentObj;
+    if (template === SCEventTemplateType.DETAIL) {
+        contentObj = (_jsxs(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), _jsx(Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), _jsxs(Stack, Object.assign({ gap: "1px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), _jsx(Divider, { className: classes.skeletonDetailFirstDivider }), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), _jsx(Divider, { className: classes.skeletonDetailSecondDivider })] })), _jsx(CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
+    }
+    else if (template === SCEventTemplateType.PREVIEW) {
+        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsx(Skeleton, { animation: skeletonsAnimation, width: "67%", height: "25px", className: classes.skeletonPreviewName }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "18px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), _jsx(CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
+    }
+    else {
+        contentObj = (_jsx(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: _jsxs(Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: _jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: _jsx(_Fragment, { children: actions !== undefined ? (actions) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className, `${PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
+}

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

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

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCEvent';

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

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

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

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

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

@@ -0,0 +1,48 @@
+import { TextFieldProps } from '@mui/material/TextField';
+import { AutocompleteProps } from '@mui/material';
+import { SCEventType } from '@selfcommunity/types/src/index';
+export interface EventAutocompleteProps extends Pick<AutocompleteProps<SCEventType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCEventType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'clearIcon' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
+    /**
+     * The maximum number of events that will be visible when not focused.
+     * @default 0
+     */
+    limitCountEvents?: number;
+    /**
+     * If checkbox is selected
+     * @default false
+     */
+    checkboxSelect?: boolean;
+    /**
+     * The props applied to text field
+     * @default {variant: 'outlined, label: events_label}
+     */
+    TextFieldProps?: TextFieldProps;
+    /**
+     * Callback for change event on event object
+     * @param value
+     */
+    onChange?: (value: any) => void;
+}
+/**
+ * > API documentation for the Community-JS Event Autocomplete component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a bar that allows users to search (with autocomplete) for all the events available in the application.
+ *
+ * #### Import
+ *  ```jsx
+ *  import {EventAutocomplete} from '@selfcommunity/react-ui';
+ *  ```
+ *  #### Component Name
+ *  The name `SCEventAutocomplete` can be used when providing style overrides in the theme.
+ *
+ *  #### CSS
+ *
+ *  |Rule Name|Global class|Description|
+ *  |---|---|---|
+ *  |root|.SCEventAutocomplete-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+declare const EventAutocomplete: (inProps: EventAutocompleteProps) => JSX.Element;
+export default EventAutocomplete;

package/lib/esm/components/EventAutocomplete/EventAutocomplete.js

@@ -0,0 +1,95 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import CircularProgress from '@mui/material/CircularProgress';
+import parse from 'autosuggest-highlight/parse';
+import match from 'autosuggest-highlight/match';
+import { Avatar, Box, Typography } from '@mui/material';
+import { useSCFetchEvents } from '@selfcommunity/react-core';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+const PREFIX = 'SCEventAutocomplete';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Autocomplete, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Event Autocomplete component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a bar that allows users to search (with autocomplete) for all the events available in the application.
+ *
+ * #### Import
+ *  ```jsx
+ *  import {EventAutocomplete} from '@selfcommunity/react-ui';
+ *  ```
+ *  #### Component Name
+ *  The name `SCEventAutocomplete` can be used when providing style overrides in the theme.
+ *
+ *  #### CSS
+ *
+ *  |Rule Name|Global class|Description|
+ *  |---|---|---|
+ *  |root|.SCEventAutocomplete-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+const EventAutocomplete = (inProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    // Props
+    const { onChange, defaultValue = null, disabled = false, TextFieldProps = {
+        variant: 'outlined',
+        label: _jsx(FormattedMessage, { id: "ui.eventAutocomplete.label", defaultMessage: "ui.eventAutocomplete.label" })
+    } } = props, rest = __rest(props, ["onChange", "defaultValue", "disabled", "TextFieldProps"]);
+    // State
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState(typeof defaultValue === 'string' ? null : defaultValue);
+    // HOOKS
+    const { events, isLoading } = useSCFetchEvents();
+    useEffect(() => {
+        if (value === null) {
+            return;
+        }
+        onChange && onChange(value);
+    }, [value]);
+    useEffect(() => {
+        if (!isLoading && typeof defaultValue === 'string') {
+            setValue(events.find((e) => e.id === Number(defaultValue)));
+        }
+    }, [isLoading]);
+    // Handlers
+    const handleOpen = () => {
+        setOpen(true);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
+    const handleChange = (e, value) => {
+        setValue(value);
+    };
+    // Render
+    return (_jsx(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: events || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventAutocomplete.empty", defaultMessage: "ui.eventAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
+        // renderTags={(value, getTagProps) => {
+        //   return value.map((option: any, index) => (
+        //     <Chip key={option.id} id={option.id} label={option.name} color={option.color} {...getTagProps({index})} />
+        //   ));
+        // }}
+        renderOption: (props, option, { inputValue }) => {
+            const matches = match(option.name, inputValue);
+            const parts = parse(option.name, matches);
+            return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] })));
+        }, renderInput: (params) => {
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'events', endAdornment: (_jsxs(React.Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+        } }, rest)));
+};
+export default EventAutocomplete;

package/lib/esm/components/EventAutocomplete/index.d.ts

@@ -0,0 +1,3 @@
+import EventAutocomplete, { EventAutocompleteProps } from './EventAutocomplete';
+export default EventAutocomplete;
+export { EventAutocompleteProps };

package/lib/esm/components/EventAutocomplete/index.js

@@ -0,0 +1,2 @@
+import EventAutocomplete from './EventAutocomplete';
+export default EventAutocomplete;

package/lib/esm/components/EventForm/EventAddress.d.ts

@@ -0,0 +1,13 @@
+import { SCEventLocationType, SCEventType } from '@selfcommunity/types';
+export interface EventAddressProps {
+    event?: SCEventType;
+    forwardGeolocationData: (data: {
+        location: SCEventLocationType;
+        geolocation?: string;
+        lat?: number;
+        lng?: number;
+        link?: string;
+    }) => void;
+    className?: string;
+}
+export default function EventAddress(inProps: EventAddressProps): JSX.Element;

package/lib/esm/components/EventForm/EventAddress.js

@@ -0,0 +1,118 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Autocomplete, Box, InputAdornment, Tab, Tabs, TextField } from '@mui/material';
+import Icon from '@mui/material/Icon';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import UrlTextField from '../../shared/UrlTextField';
+import axios from 'axios';
+import { useSCContext } from '@selfcommunity/react-core';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { SCEventLocationType } from '@selfcommunity/types';
+import { useLoadScript } from '@react-google-maps/api';
+const messages = defineMessages({
+    virtualPlaceholder: {
+        id: 'ui.eventForm.address.online.placeholder',
+        defaultMessage: 'ui.eventForm.address.online.placeholder'
+    }
+});
+const classes = {
+    root: `${PREFIX}-event-address-root`,
+    tabs: `${PREFIX}-event-address-tabs`,
+    tab: `${PREFIX}-event-address-tab`,
+    tabContent: `${PREFIX}-event-address-tab-content`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'EventAddressRoot'
+})(() => ({}));
+export default function EventAddress(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    // INTL
+    const intl = useIntl();
+    // PROPS
+    const { className, forwardGeolocationData, event } = props;
+    // STATE
+    const [location, setLocation] = useState(event ? event.location : SCEventLocationType.PERSON);
+    const [geolocation, setGeoLocation] = useState(event ? event.geolocation : null);
+    const [inputValue, setInputValue] = useState('');
+    const [suggestions, setSuggestions] = useState([]);
+    const [timeoutId, setTimeoutId] = useState(null);
+    // CONTEXT
+    const scContext = useSCContext();
+    const geocodingApiKey = useMemo(() => scContext.settings.integrations && scContext.settings.integrations.geocoding.apiKey, [scContext.settings.integrations]);
+    const { isLoaded } = useLoadScript({
+        googleMapsApiKey: scContext.settings.integrations.geocoding.apiKey,
+        libraries: ['places', 'geocoding']
+    });
+    // HANDLERS
+    const handleChange = (event, newValue) => {
+        setLocation(newValue);
+    };
+    const handleSelection = (event, newValue) => __awaiter(this, void 0, void 0, function* () {
+        if (newValue) {
+            try {
+                const response = yield axios.get(`https://maps.googleapis.com/maps/api/geocode/json`, {
+                    params: {
+                        place_id: newValue.place_id,
+                        key: geocodingApiKey
+                    }
+                });
+                const place = response.data.results[0];
+                setGeoLocation(newValue);
+                forwardGeolocationData({
+                    location: location,
+                    geolocation: place.formatted_address,
+                    lat: place.geometry.location.lat,
+                    lng: place.geometry.location.lng
+                });
+            }
+            catch (error) {
+                console.error('Error fetching place details:', error);
+            }
+        }
+    });
+    const handleLocationChange = (event, newInputValue) => {
+        setInputValue(newInputValue);
+    };
+    const handleLinkChange = (event) => {
+        forwardGeolocationData({ location: location, link: event.target.value });
+    };
+    useEffect(() => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        if (inputValue === '') {
+            setSuggestions([]);
+            return;
+        }
+        if (inputValue.length >= 3) {
+            const newTimeoutId = window.setTimeout(() => {
+                const autocompleteService = new window.google.maps.places.AutocompleteService();
+                autocompleteService.getPlacePredictions({ input: inputValue }, (predictions, status) => {
+                    if (status === window.google.maps.places.PlacesServiceStatus.OK && predictions) {
+                        setSuggestions(predictions.map((prediction) => ({
+                            description: prediction.description,
+                            place_id: prediction.place_id
+                        })));
+                    }
+                });
+            }, 300);
+            setTimeoutId(newTimeoutId);
+        }
+    }, [inputValue]);
+    if (!geocodingApiKey && !isLoaded) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), _jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { freeSolo: true, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
+                            endAdornment: _jsx(Icon, { children: "play_circle_outline" })
+                        }, onChange: handleLinkChange }))] }))] })));
+}