@selfcommunity/react-ui 0.8.0-embeds.16 → 0.8.0-live.40

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

@@ -1,5 +1,5 @@
 import { ButtonProps } from '@mui/material/Button/Button';
-import { EventFormProps } from '../EventForm';
+import { EventFormDialogProps } from '../EventFormDialog';
 export interface CreateEventButtonProps extends ButtonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -10,7 +10,7 @@ export interface CreateEventButtonProps extends ButtonProps {
      * Props to spread to CreateGroup component
      * @default empty object
      */
-    EventFormProps?: EventFormProps;
+    EventFormDialogComponentProps?: EventFormDialogProps;
     /**
      * Any other properties
      */

package/lib/esm/components/CreateEventButton/CreateEventButton.js

@@ -7,7 +7,7 @@ import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/r
 import classNames from 'classnames';
 import React, { useContext, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
-import EventForm from '../EventForm';
+import EventFormDialog from '../EventFormDialog';
 import { SCFeatureName } from '@selfcommunity/types';
 const PREFIX = 'SCCreateEventButton';
 const classes = {
@@ -38,13 +38,13 @@ const Root = styled(Button, {
  * @param inProps
  */
 export default function CreateEventButton(inProps) {
-    var _a;
+    var _a, _b;
     //PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className, EventFormProps = {}, children } = props, rest = __rest(props, ["className", "EventFormProps", "children"]);
+    const { className, EventFormDialogComponentProps = {}, children } = props, rest = __rest(props, ["className", "EventFormDialogComponentProps", "children"]);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     // STATE
@@ -76,5 +76,5 @@ export default function CreateEventButton(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, variant: "contained", color: "secondary", startIcon: !EventFormProps.event && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "add" })) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createEventButton", defaultMessage: "ui.createEventButton" }) })), open && _jsx(EventForm, Object.assign({}, EventFormProps, { open: true, onClose: handleClick }))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, variant: "contained", color: "secondary", startIcon: !((_b = EventFormDialogComponentProps.EventFormComponentProps) === null || _b === void 0 ? void 0 : _b.event) && _jsx(Icon, { fontSize: "small", children: "add" }) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createEventButton", defaultMessage: "ui.createEventButton" }) })), open && _jsx(EventFormDialog, Object.assign({}, EventFormDialogComponentProps, { open: true, onClose: handleClick }))] }));
 }

package/lib/esm/components/CreateEventWidget/CreateEventWidget.js

@@ -60,5 +60,5 @@ export default function CreateEventWidget(inProps) {
     if (!eventsEnabled || (!canCreateEvent && onlyStaffEnabled) || !authUserId) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(CardMedia, { component: "img", image: `${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), _jsx(Icon, Object.assign({ className: classes.calendar, fontSize: "large" }, { children: "CalendarIcon" }))] })), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.createEvent.title", defaultMessage: "ui.createEvent.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.spaging }, { children: _jsx(FormattedMessage, { id: "ui.createEvent.description", defaultMessage: "ui.createEvent.description" }) })), _jsx(Divider, { className: classes.spaging })] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(CreateEventButton, Object.assign({}, CreateEventButtonComponentProps)) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(Box, { position: "relative", children: [_jsx(CardMedia, { component: "img", image: `${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), _jsx(Icon, { className: classes.calendar, fontSize: "large", children: "CalendarIcon" })] }), _jsxs(CardContent, { className: classes.content, children: [_jsx(Typography, { variant: "h5", className: classes.title, children: _jsx(FormattedMessage, { id: "ui.createEvent.title", defaultMessage: "ui.createEvent.title" }) }), _jsx(Typography, { variant: "body1", className: classes.spaging, children: _jsx(FormattedMessage, { id: "ui.createEvent.description", defaultMessage: "ui.createEvent.description" }) }), _jsx(Divider, { className: classes.spaging })] }), _jsx(CardActions, { className: classes.actions, children: _jsx(CreateEventButton, Object.assign({}, CreateEventButtonComponentProps)) })] })));
 }

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

@@ -17,5 +17,5 @@ const Root = styled(Widget, {
     slot: 'SkeletonRoot'
 })(() => ({}));
 export default function CreateEventWidgetSkeleton() {
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: "wave", width: "100%", height: "110px" }), _jsx(Skeleton, { className: classes.calendar, variant: "rounded", animation: "wave", width: "50px", height: "50px" })] })), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { className: classes.title, animation: "wave", width: "26%", height: "30px" }), _jsx(Skeleton, { className: classes.spacing, animation: "wave", width: "100%", height: "20px" }), _jsx(Divider, { className: classes.spacing })] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "138px", height: "36px" }) }))] })));
+    return (_jsxs(Root, { className: classes.root, children: [_jsxs(Box, { position: "relative", children: [_jsx(Skeleton, { variant: "rectangular", animation: "wave", width: "100%", height: "110px" }), _jsx(Skeleton, { className: classes.calendar, variant: "rounded", animation: "wave", width: "50px", height: "50px" })] }), _jsxs(CardContent, { className: classes.content, children: [_jsx(Skeleton, { className: classes.title, animation: "wave", width: "26%", height: "30px" }), _jsx(Skeleton, { className: classes.spacing, animation: "wave", width: "100%", height: "20px" }), _jsx(Divider, { className: classes.spacing })] }), _jsx(CardActions, { className: classes.actions, children: _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "138px", height: "36px" }) })] }));
 }

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

@@ -0,0 +1,49 @@
+import { ButtonProps } from '@mui/material/Button/Button';
+import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
+import { CreateLiveStreamDialogProps } from '../CreateLiveStreamDialog';
+export interface CreateLiveStreamButtonProps extends ButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Props to spread to CreateGroup component
+     * @default empty object
+     */
+    CreateLiveStreamDialogComponentProps?: CreateLiveStreamDialogProps;
+    /**
+     * On click callback function
+     * @default null
+     */
+    onButtonClick?: (event: any, reason: any) => void;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS CreateLiveStreamButton component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateLiveStreamButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateLiveStreamButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CreateLiveStreamButton(inProps: CreateLiveStreamButtonProps): JSX.Element;

package/lib/esm/components/CreateLiveStreamButton/CreateLiveStreamButton.js

@@ -0,0 +1,91 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Icon } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import React, { useContext, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import CreateLivestreamDialog from '../CreateLiveStreamDialog';
+const PREFIX = 'SCCreateLivestreamButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS CreateLiveStreamButton component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateLiveStreamButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateLiveStreamButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CreateLiveStreamButton(inProps) {
+    var _a;
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, CreateLiveStreamDialogComponentProps = {}, onSuccess, children } = props, rest = __rest(props, ["className", "CreateLiveStreamDialogComponentProps", "onSuccess", "children"]);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    // STATE
+    const [open, setOpen] = React.useState(false);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { preferences, features } = useSCPreferences();
+    // TODO
+    const liveStreamEnabled = true;
+    /* const liveStreamEnabled = useMemo(
+          () =>
+              preferences &&
+              features &&
+              features.includes(SCFeatureName.LIVE_STREAM) &&
+              SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
+              preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value,
+          [preferences, features]
+      ); */
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    const canCreateLiveStream = useMemo(() => true /* scUserContext?.user?.permission?.create_livestream */, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    /**
+     * Handle close
+     */
+    const handleClose = () => {
+        setOpen((o) => !o);
+    };
+    /**
+     * Handle close
+     */
+    const handleSuccess = (data) => {
+        onSuccess && onSuccess(data);
+        setOpen((o) => !o);
+    };
+    /**
+     * If there's no authUserId, component is hidden.
+     */
+    if (!liveStreamEnabled || !canCreateLiveStream || !authUserId) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: _jsx(Icon, { children: "photo_camera" }) }, rest, { children: children !== null && children !== void 0 ? children : _jsx(FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && _jsx(CreateLivestreamDialog, Object.assign({ open: true, onClose: handleClose, onSuccess: handleSuccess }, CreateLiveStreamDialogComponentProps))] }));
+}

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

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

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

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

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

@@ -0,0 +1,51 @@
+import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface CreateLiveStreamDialogProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Open dialog
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * On dialog close callback function
+     * @default null
+     */
+    onClose?: () => void;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS CreateLiveStreamDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateLivestreamDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateLivestreamDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+ |content|.SCCreateLivestreamDialog-content|Styles applied to the content element.|
+
+
+
+ * @param inProps
+ */
+export default function CreateLiveStreamDialog(inProps: CreateLiveStreamDialogProps): JSX.Element;

package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -0,0 +1,120 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { SCPreferences, UserUtils, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCFeatureName } from '@selfcommunity/types';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import BaseDialog from '../../shared/BaseDialog';
+import { PREFIX } from './constants';
+import EventForm from '../EventForm';
+import LiveStreamSelector from './LiveStreamSelector/LiveStreamSelector';
+import { CreateLiveStreamStep, LiveStreamType } from './types';
+import LiveStreamForm from '../LiveStreamForm';
+import Slide from '@mui/material/Slide';
+import { Box, Button, Icon } from '@mui/material';
+const classes = {
+    root: `${PREFIX}-root`,
+    title: `${PREFIX}-title`,
+    content: `${PREFIX}-content`
+};
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({
+    paddingBottom: '0px !important',
+    [`& .${classes.title}`]: {
+        display: 'flex'
+    },
+    [`& .${classes.content}`]: {
+        paddingBottom: 0
+    }
+}));
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+/**
+ *> API documentation for the Community-JS CreateLiveStreamDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateLivestreamDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateLivestreamDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+ |content|.SCCreateLivestreamDialog-content|Styles applied to the content element.|
+
+
+
+ * @param inProps
+ */
+export default function CreateLiveStreamDialog(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, open = true, onClose, onSuccess } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess"]);
+    // CONTEXT
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
+    const { preferences, features } = useSCPreferences();
+    const liveStreamEnabled = useMemo(() => true, 
+    /* preferences &&
+            features &&
+            features.includes(SCFeatureName.LIVE_STREAM) &&
+            SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
+            preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value*/ [preferences, features]);
+    const onlyStaffLiveStreamEnabled = useMemo(() => true /* preferences[SCPreferences.CONFIGURATIONS_LIVESTREAM_ONLY_STAFF_ENABLED].value */, [preferences]);
+    const canCreateLiveStream = useMemo(() => true /* liveStreamEnabled && (scUserContext?.user?.permission?.create_livestream || (onlyStaffLiveStreamEnabled && UserUtils.isStaff(scUserContext.user)))*/, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, onlyStaffLiveStreamEnabled]);
+    console.log(canCreateLiveStream);
+    const eventsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
+    const onlyStaffEventEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
+    const canCreateEvent = useMemo(() => { var _a, _b; return eventsEnabled && (((_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event) || true || (onlyStaffEventEnabled && UserUtils.isStaff(scUserContext.user))); }, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, eventsEnabled, onlyStaffEventEnabled]);
+    console.log(canCreateEvent);
+    const canCreateLiveStreamEvent = useMemo(() => Boolean(canCreateLiveStream && canCreateEvent), [canCreateEvent, canCreateLiveStream]);
+    console.log(canCreateLiveStreamEvent);
+    // STATE
+    const [step, setStep] = useState(canCreateLiveStreamEvent ? CreateLiveStreamStep.SELECT_TYPE : CreateLiveStreamStep.CREATE_LIVE);
+    const [liveType, setLiveType] = useState(canCreateLiveStreamEvent ? null : LiveStreamType.DIRECT_LIVE);
+    // HANDLER
+    const handleLiveTypeSelected = useCallback((l) => {
+        setLiveType(l);
+    }, []);
+    const handleLiveTypeSelectedNext = useCallback((l) => {
+        setLiveType(l);
+        setStep(CreateLiveStreamStep.CREATE_LIVE);
+    }, []);
+    const handleBack = useCallback((l) => {
+        setStep(CreateLiveStreamStep.SELECT_TYPE);
+    }, []);
+    const handleSubmit = useCallback((e) => {
+        onSuccess && onSuccess(e);
+    }, []);
+    useEffect(() => {
+        if (!canCreateLiveStreamEvent) {
+            setLiveType(LiveStreamType.DIRECT_LIVE);
+        }
+    }, [canCreateLiveStreamEvent]);
+    // user must be logged
+    if (!scUserContext.user) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, { className: classes.title, component: 'span', children: [step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(Button, { variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }), children: "Back" })), _jsx(Box, { component: 'span', children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) })] }), fullWidth: true, open: open, onClose: onClose, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, { className: classes.content, children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? _jsx(EventForm, { onSuccess: handleSubmit }) : _jsx(LiveStreamForm, { onSuccess: handleSubmit }) }))] }) })));
+}

package/lib/esm/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.d.ts

@@ -0,0 +1,46 @@
+import { LiveStreamType } from '../types';
+export interface LiveStreamSelectorProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Option selected
+     */
+    liveSelected?: LiveStreamType;
+    /**
+     * Callback on selected option
+     * @param LiveStreamType
+     */
+    onLiveSelected?: (live: LiveStreamType) => void;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onNext?: (live: LiveStreamType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamSelector} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCLiveStreamSelector` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function LiveStreamSelector(inProps: LiveStreamSelectorProps): JSX.Element;

package/lib/esm/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js

@@ -0,0 +1,163 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Box, Typography, Button, Paper, Container, Radio } from '@mui/material';
+import Icon from '@mui/material/Icon';
+import { PREFIX } from '../constants';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { LiveStreamType } from '../types';
+import { useSnackbar } from 'notistack';
+import { FormattedMessage } from 'react-intl';
+const classes = {
+    root: `${PREFIX}-root`,
+    options: `${PREFIX}-options`,
+    actions: `${PREFIX}-actions`
+};
+const Root = styled(Container, {
+    name: PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({
+    [`& .${classes.options}`]: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    [`& .${classes.actions}`]: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end',
+        marginTop: theme.spacing(4)
+    }
+}));
+// Styled components
+const OptionCard = styled(Paper, {
+    shouldForwardProp: (prop) => prop !== 'selected'
+})(({ theme, selected }) => ({
+    maxWidth: '300px',
+    padding: theme.spacing(3),
+    margin: theme.spacing(0, 3),
+    cursor: 'pointer',
+    transition: theme.transitions.create(['background-color', 'box-shadow'], {
+        duration: theme.transitions.duration.short
+    }),
+    backgroundColor: selected ? theme.palette.grey[100] : theme.palette.background.paper,
+    '&:hover': {
+        backgroundColor: theme.palette.grey[50],
+        boxShadow: theme.shadows[2]
+    },
+    border: `1px solid ${theme.palette.divider}`,
+    [`& > div`]: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 2,
+        maxWidth: '300px'
+    },
+    [`& ul`]: {
+        marginTop: theme.spacing(2),
+        padding: 0,
+        listStyle: 'none'
+    }
+}));
+const RadioIndicator = styled(Radio, {
+    shouldForwardProp: (prop) => prop !== 'selected'
+})(({ theme, selected }) => ({
+    width: 16,
+    height: 16,
+    borderRadius: '50%',
+    border: `2px solid ${selected ? theme.palette.secondary.main : theme.palette.grey[300]}`,
+    backgroundColor: selected ? theme.palette.secondary.main : 'transparent',
+    transition: theme.transitions.create(['border-color', 'background-color'], {
+        duration: theme.transitions.duration.shortest
+    })
+}));
+const FeatureItem = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: theme.spacing(1.5),
+    marginBottom: theme.spacing(2),
+    '&:last-child': {
+        marginBottom: 0
+    }
+}));
+/**
+ *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamSelector} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCLiveStreamSelector` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function LiveStreamSelector(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, liveSelected, onLiveSelected, onNext } = props, rest = __rest(props, ["className", "liveSelected", "onLiveSelected", "onNext"]);
+    // CONTEXT
+    const { enqueueSnackbar } = useSnackbar();
+    // STATE
+    const [selectedOption, setSelectedOption] = useState(liveSelected);
+    const options = [
+        {
+            title: 'Schedule a live event',
+            type: LiveStreamType.EVENT_LIVE,
+            features: [
+                'Schedule a live room or stream in your event space',
+                'Allow your members to RSVP, add to calendar, and receive event reminders',
+                'Automatically post the event recording to your space',
+                'Allow your members to host the event'
+            ],
+            icons: [_jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" })]
+        },
+        {
+            title: 'Start a live stream',
+            type: LiveStreamType.DIRECT_LIVE,
+            features: [
+                'Best for webinars, Q&As, AMAs, and for presentations',
+                'Up to 100 people',
+                'Only co-hosts can talk to each other with audio/video',
+                'View-only participants can only chat or be promoted to the stage'
+            ],
+            icons: [_jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" })]
+        }
+    ];
+    const handleOptionSelect = (type) => {
+        setSelectedOption(type);
+        onLiveSelected(type);
+    };
+    const handleNext = () => {
+        if (!selectedOption) {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error", defaultMessage: "ui.common.error" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        }
+        else {
+            onNext && onNext(selectedOption);
+        }
+    };
+    return (_jsxs(Root, { className: classNames(classes.root, className), maxWidth: "lg", sx: { py: 4 }, children: [_jsx(Typography, { variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 }, children: "How do you want to go live?" }), _jsx(Box, { className: classes.options, children: options.map((option, index) => (_jsxs(OptionCard, { selected: selectedOption === option.type, onClick: () => handleOptionSelect(option.type), elevation: 0, role: "button", tabIndex: 0, onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            handleOptionSelect(index);
+                            e.preventDefault();
+                        }
+                    }, theme: undefined, children: [_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", component: "h2", sx: { fontWeight: 500 }, children: option.title }), _jsx(RadioIndicator, { selected: selectedOption === option.type, theme: undefined })] }), _jsx(Box, { component: "ul", children: option.features.map((feature, featureIndex) => {
+                                const _Icon = option.icons[featureIndex];
+                                return (_jsxs(FeatureItem, { component: "li", children: [_Icon, _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { flex: 1 }, children: feature })] }, featureIndex));
+                            }) })] }, index))) }), _jsx(Box, { className: classes.actions, children: _jsx(Button, { disabled: !selectedOption, variant: "contained", onClick: handleNext, color: "secondary", children: "Next" }) })] }));
+}

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

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

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

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

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

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

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

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

package/lib/esm/components/CreateLiveStreamDialog/types.d.ts

@@ -0,0 +1,8 @@
+export declare enum CreateLiveStreamStep {
+    SELECT_TYPE = "_select_type",
+    CREATE_LIVE = "_create_live"
+}
+export declare enum LiveStreamType {
+    EVENT_LIVE = "_event_live",
+    DIRECT_LIVE = "_direct_live"
+}

package/lib/esm/components/CreateLiveStreamDialog/types.js

@@ -0,0 +1,10 @@
+export var CreateLiveStreamStep;
+(function (CreateLiveStreamStep) {
+    CreateLiveStreamStep["SELECT_TYPE"] = "_select_type";
+    CreateLiveStreamStep["CREATE_LIVE"] = "_create_live";
+})(CreateLiveStreamStep || (CreateLiveStreamStep = {}));
+export var LiveStreamType;
+(function (LiveStreamType) {
+    LiveStreamType["EVENT_LIVE"] = "_event_live";
+    LiveStreamType["DIRECT_LIVE"] = "_direct_live";
+})(LiveStreamType || (LiveStreamType = {}));

package/lib/esm/components/CustomAdv/CustomAdv.js

@@ -130,6 +130,6 @@ export default function CustomAdv(inProps) {
     if (!scCustomAdv) {
         return _jsx(HiddenPlaceholder, {});
     }
-    const adv = (_jsxs(Box, Object.assign({ className: classes.wrap }, { children: [scCustomAdv.image && (_jsx("img", { src: scCustomAdv.image, alt: scCustomAdv.title, className: classNames(classes.image, { [classes.prefixedHeight]: Boolean(prefixedHeight) }) })), scCustomAdv.embed_code && (_jsx(Box, { ref: embedRef, className: classNames(classes.embedCode, { [classes.prefixedHeight]: Boolean(prefixedHeight) }), dangerouslySetInnerHTML: { __html: scCustomAdv.embed_code } }))] })));
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })) }, { children: scCustomAdv.link ? (_jsx("a", Object.assign({ href: scCustomAdv.link, title: scCustomAdv.title }, { children: adv }))) : (adv) })));
+    const adv = (_jsxs(Box, { className: classes.wrap, children: [scCustomAdv.image && (_jsx("img", { src: scCustomAdv.image, alt: scCustomAdv.title, className: classNames(classes.image, { [classes.prefixedHeight]: Boolean(prefixedHeight) }) })), scCustomAdv.embed_code && (_jsx(Box, { ref: embedRef, className: classNames(classes.embedCode, { [classes.prefixedHeight]: Boolean(prefixedHeight) }), dangerouslySetInnerHTML: { __html: scCustomAdv.embed_code } }))] }));
+    return (_jsx(Root, { id: id, className: classNames(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })), children: scCustomAdv.link ? (_jsx("a", { href: scCustomAdv.link, title: scCustomAdv.title, children: adv })) : (adv) }));
 }