@selfcommunity/react-ui 0.10.5-alpha.1 → 0.10.5-alpha.3

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

@@ -0,0 +1,88 @@
+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 { SCPreferences, SCUserContext, UserUtils, useSCPreferences } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import React, { useContext, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
+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) {
+    //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);
+    const { preferences, features } = useSCPreferences();
+    // STATE
+    const [open, setOpen] = React.useState(false);
+    // CONST
+    const authUserId = useMemo(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
+    const isStaff = useMemo(() => scUserContext.user && UserUtils.isStaff(scUserContext.user), [scUserContext.user]);
+    const isCommunityOwner = useMemo(() => authUserId === 1, [authUserId]);
+    const isFreeTrialTier = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const liveStreamEnabled = useMemo(() => preferences &&
+        features &&
+        SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
+    const onlyStaffEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ONLY_STAFF_ENABLED].value, [preferences]);
+    /**
+     * 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 || !authUserId || (onlyStaffEnabled && !isStaff) || (isFreeTrialTier && !isCommunityOwner)) {
+        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,49 @@
+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,100 @@
+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 { useSCUser } from '@selfcommunity/react-core';
+import { SCEventLocationType } 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) {
+    var _a, _b;
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, open = true, onClose, onSuccess } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess"]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const canCreateLiveStream = useMemo(() => { var _a, _b; return (_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_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    const canCreateEvent = useMemo(() => { var _a, _b; return (_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; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
+    // STATE
+    const [step, setStep] = useState(canCreateEvent ? CreateLiveStreamStep.SELECT_TYPE : CreateLiveStreamStep.CREATE_LIVE);
+    const [liveType, setLiveType] = useState(canCreateEvent ? 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 (!canCreateEvent) {
+            setLiveType(LiveStreamType.DIRECT_LIVE);
+        }
+    }, [canCreateEvent]);
+    // user must be logged
+    if (!scUserContext.user || !canCreateLiveStream) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: "Back" }))), _jsx(Box, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: 'paper', onClose: onClose, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ 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, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit })) : (_jsx(LiveStreamForm, { onSuccess: handleSubmit })) }))] })) })));
+}

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

@@ -0,0 +1,47 @@
+import { LiveStreamType } from '../types';
+export declare const PREFIX = "SCLiveStreamSelector";
+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,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Box, Typography, Button, Paper, Container, Radio, Alert } from '@mui/material';
+import Icon from '@mui/material/Icon';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { LiveStreamType } from '../types';
+import { useSnackbar } from 'notistack';
+import { FormattedMessage, useIntl } from 'react-intl';
+import EventImage from '../../../assets/liveStream/event';
+import LiveImage from '../../../assets/liveStream/live';
+import { LiveStreamApiClient } from '@selfcommunity/api-services';
+import { WARNING_THRESHOLD_EXPIRING_SOON } from '../../LiveStreamRoom/constants';
+import { Link, SCPreferences, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
+import { SELFCOMMUNITY_PRICING } from '../../PlatformWidget/constants';
+export const PREFIX = 'SCLiveStreamSelector';
+const classes = {
+    root: `${PREFIX}-root`,
+    warning: `${PREFIX}-warning`,
+    options: `${PREFIX}-options`,
+    actions: `${PREFIX}-actions`
+};
+const Root = styled(Container, {
+    name: PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({}));
+// Styled components
+const OptionCard = styled(Paper, {
+    name: PREFIX,
+    slot: 'optionCardRoot',
+    shouldForwardProp: (prop) => prop !== 'selected'
+})(({ theme, selected }) => ({}));
+const FeatureItem = styled(Box, {
+    name: PREFIX,
+    slot: 'featureItemRoot'
+})(({ theme }) => ({}));
+/**
+ *> 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;
+    // CONTEXT
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
+    const { enqueueSnackbar } = useSnackbar();
+    // STATE
+    const [selectedOption, setSelectedOption] = useState(liveSelected);
+    const [timeRemaining, setTimeRemaining] = useState(null);
+    // HOOKS
+    const { preferences } = useSCPreferences();
+    const isCommunityOwner = useMemo(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
+    const isFreeTrialTier = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const intl = useIntl();
+    const options = [
+        {
+            title: intl.formatMessage({ id: 'ui.liveStreamForm.selector.scheduleLiveEvent', defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEvent' }),
+            image: EventImage,
+            type: LiveStreamType.EVENT_LIVE,
+            features: [
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveEventItem1',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem1'
+                }),
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveEventItem2',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem2'
+                }),
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveEventItem3',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem3'
+                })
+            ],
+            icons: [_jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" })]
+        },
+        {
+            title: intl.formatMessage({
+                id: 'ui.liveStreamForm.selector.scheduleLiveStream',
+                defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStream'
+            }),
+            image: LiveImage,
+            type: LiveStreamType.DIRECT_LIVE,
+            features: [
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem1',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem1'
+                }),
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem2',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem2'
+                }),
+                intl.formatMessage({
+                    id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem3',
+                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem3'
+                })
+            ],
+            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);
+        }
+    };
+    const fetchLivestreamStatus = () => {
+        LiveStreamApiClient.getMonthlyDuration()
+            .then((r) => {
+            setTimeRemaining(r.remaining_minutes);
+        })
+            .catch((error) => {
+            console.error('Error fetching live status:', error);
+        });
+    };
+    useEffect(() => {
+        fetchLivestreamStatus();
+    }, []);
+    const warning = useMemo(() => {
+        let _message;
+        if (isFreeTrialTier && isCommunityOwner) {
+            _message = (_jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    link: (...chunks) => _jsx(Link, Object.assign({ to: SELFCOMMUNITY_PRICING[scContext.settings.locale.default] }, { children: chunks }))
+                } }));
+        }
+        else if (timeRemaining !== null && timeRemaining <= WARNING_THRESHOLD_EXPIRING_SOON) {
+            if (timeRemaining <= 1) {
+                _message = (_jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.warningMinutesExausted", defaultMessage: "ui.liveStreamForm.selector.warningMinutesExausted" }));
+            }
+            else if (timeRemaining <= WARNING_THRESHOLD_EXPIRING_SOON) {
+                _message = (_jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.warningRemainingMinutes", defaultMessage: "ui.liveStreamForm.selector.warningRemainingMinutes", values: { minutes: timeRemaining } }));
+            }
+        }
+        if (_message) {
+            return (_jsx(Box, Object.assign({ className: classes.warning }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "warning" }, { children: _message })) })));
+        }
+        return null;
+    }, [timeRemaining, isFreeTrialTier]);
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), maxWidth: "lg", sx: { py: 4 } }, { children: [_jsx(Typography, Object.assign({ variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 } }, { children: "How do you want to go live?" })), warning, _jsx(Box, Object.assign({ className: classes.options }, { children: options.map((option, index) => (_jsxs(OptionCard, Object.assign({ 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, Object.assign({ variant: "h6", component: "h2", sx: { fontWeight: 500 } }, { children: option.title })), _jsx(Radio, { checked: selectedOption === option.type })] }), _jsx("img", { src: option.image, alt: "logo" }), _jsx(Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
+                                const _Icon = option.icons[featureIndex];
+                                return (_jsxs(FeatureItem, Object.assign({ component: "li" }, { children: [_Icon, _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature }))] }), featureIndex));
+                            }) }))] }), index))) })), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ disabled: !selectedOption || !timeRemaining || isFreeTrialTier, variant: "contained", onClick: handleNext, color: "secondary" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.next", defaultMessage: "ui.liveStreamForm.selector.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/Editor/Editor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type EditorRef = {
+export type EditorRef = {
     focus: () => void;
 };
 export interface EditorProps {

package/lib/esm/components/Editor/nodes/HashtagNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCCategoryType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedHashtagNode = Spread<{
+export type SerializedHashtagNode = Spread<{
     category: SCCategoryType;
     type: 'hashtag';
     version: 1;

package/lib/esm/components/Editor/nodes/HashtagNode.js

@@ -9,16 +9,16 @@ function convertHashtagElement(domNode) {
     };
 }
 export class HashtagNode extends TextNode {
-    constructor(category, text, key) {
-        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
-        this.__category = category;
-    }
     static getType() {
         return 'hashtag';
     }
     static clone(node) {
         return new HashtagNode(node.__category, node.__text, node.__key);
     }
+    constructor(category, text, key) {
+        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
+        this.__category = category;
+    }
     createDOM(config) {
         const tag = 'hashtag';
         const dom = document.createElement(tag);

package/lib/esm/components/Editor/nodes/ImageNode.d.ts

@@ -12,7 +12,7 @@ export interface ImagePayload {
 declare function convertImageElement(domNode: any): {
     node: ImageNode;
 };
-export declare type SerializedImageNode = Spread<{
+export type SerializedImageNode = Spread<{
     altText: string;
     maxWidth: number | string;
     src: string;

package/lib/esm/components/Editor/nodes/ImageNode.js

@@ -104,18 +104,18 @@ function convertImageElement(domNode) {
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 export class ImageNode extends DecoratorNode {
-    constructor(src, altText, maxWidth, key) {
-        super(key);
-        this.__src = src;
-        this.__altText = altText;
-        this.__maxWidth = maxWidth;
-    }
     static getType() {
         return 'image';
     }
     static clone(node) {
         return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
     }
+    constructor(src, altText, maxWidth, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__maxWidth = maxWidth;
+    }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore

package/lib/esm/components/Editor/nodes/MentionNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCUserType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedMentionNode = Spread<{
+export type SerializedMentionNode = Spread<{
     user: SCUserType;
     type: 'mention';
     version: 1;

package/lib/esm/components/Editor/nodes/MentionNode.js

@@ -22,16 +22,16 @@ function convertMentionElement(domNode) {
     };
 }
 export class MentionNode extends TextNode {
-    constructor(user, text, key) {
-        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
-        this.__user = user;
-    }
     static getType() {
         return 'mention';
     }
     static clone(node) {
         return new MentionNode(node.__user, node.__text, node.__key);
     }
+    constructor(user, text, key) {
+        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
+        this.__user = user;
+    }
     createDOM(config) {
         const tag = 'mention';
         const dom = document.createElement(tag);

package/lib/esm/components/Editor/plugins/ApiPlugin.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ApiRef = {
+export type ApiRef = {
     focus: () => void;
 };
 declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<ApiRef>>;

package/lib/esm/components/Editor/plugins/AutoLinkPlugin.js

@@ -15,7 +15,10 @@ const MATCHERS = [
             index: match.index,
             length: match[0].length,
             text: match[0],
-            url: normalizeURL(match[0])
+            url: normalizeURL(match[0]),
+            attributes: {
+                target: '_blank'
+            }
         });
     },
     (text) => {
@@ -24,7 +27,10 @@ const MATCHERS = [
             index: match.index,
             length: match[0].length,
             text: match[0],
-            url: `mailto:${match[0]}`
+            url: `mailto:${match[0]}`,
+            attributes: {
+                target: '_blank'
+            }
         });
     }
 ];