@selfcommunity/react-ui 0.8.0-embeds.17 → 0.8.0-live.41

package/lib/cjs/shared/MediaChunkUploader/index.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const chunked_uploady_1 = require("@rpldy/chunked-uploady");
+const uploady_1 = require("@rpldy/uploady");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
-const uploady_1 = require("@rpldy/uploady");
-const hash_1 = require("../../utils/hash");
+const utils_1 = require("@selfcommunity/utils");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
-const common_1 = tslib_1.__importDefault(require("../../messages/common"));
-const utils_1 = require("@selfcommunity/utils");
 const Errors_1 = require("../../constants/Errors");
+const common_1 = tslib_1.__importDefault(require("../../messages/common"));
+const hash_1 = require("../../utils/hash");
 exports.default = (props) => {
     // PROPS
     const { type = null, onSuccess = null, onProgress = null, onError = null } = props;
@@ -55,7 +55,7 @@ exports.default = (props) => {
             // @ts-ignore
             reader.readAsDataURL(item.file);
         }
-        chunkStateRef.current.setChunk({ id: item.id, [`upload_id`]: null, completed: 0, name: item.file.name });
+        chunkStateRef.current.setChunk({ id: item.id, ['upload_id']: null, completed: 0, name: item.file.name });
     });
     (0, uploady_1.useItemProgressListener)((item) => {
         chunkStateRef.current.setChunk({ id: item.id, completed: item.completed });
@@ -102,7 +102,7 @@ exports.default = (props) => {
             sendOptions: {
                 paramName: 'image',
                 method: api_services_1.Endpoints.ComposerChunkUploadMedia.method,
-                formatServerResponse: (response, status, headers) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+                formatServerResponse: (response, status, _headers) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
                     if (status === 401) {
                         yield refreshSession();
                     }
@@ -111,7 +111,7 @@ exports.default = (props) => {
             }
         };
         if (chunkStateRef.current.chunks[data.item.id].upload_id) {
-            res.sendOptions.params = { [`upload_id`]: chunkStateRef.current.chunks[data.item.id].upload_id };
+            res.sendOptions.params = { ['upload_id']: chunkStateRef.current.chunks[data.item.id].upload_id };
         }
         else {
             chunkStateRef.current.setChunk({ id: data.item.id, type: type || data.sendOptions.paramName });
@@ -120,12 +120,14 @@ exports.default = (props) => {
     });
     (0, chunked_uploady_1.useChunkFinishListener)((data) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         const _data = yield data.uploadData.response.data;
-        chunkStateRef.current.setChunk({ id: data.item.id, [`upload_id`]: _data.upload_id });
+        chunkStateRef.current.setChunk({ id: data.item.id, ['upload_id']: _data.upload_id });
     }));
     (0, chunked_uploady_1.useRequestPreSend)(({ items, options }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        const destination = ['JWT', 'OAuth'].includes(scContext.settings.session.type) ? {
-            headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` }
-        } : {};
+        const destination = ['JWT', 'OAuth'].includes(scContext.settings.session.type)
+            ? {
+                headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` }
+            }
+            : {};
         if (items.length == 0) {
             return Promise.resolve({ options, destination });
         }

package/lib/cjs/shared/MetadataField/MetadataField.d.ts

@@ -1,6 +1,6 @@
 import { TextFieldProps } from '@mui/material';
 import { SCMetadataType } from '@selfcommunity/types';
-export declare type MetadataFieldProps = TextFieldProps & {
+export type MetadataFieldProps = TextFieldProps & {
     metadata: SCMetadataType;
 };
 declare const MetadataField: (props: MetadataFieldProps) => JSX.Element;

package/lib/cjs/shared/StickyBox/index.d.ts

@@ -32,18 +32,18 @@ import React from 'react';
 /**
  * Types/interfaces
  */
-export declare type UseStickyBoxProps = {
+export type UseStickyBoxProps = {
     offsetTop?: number;
     offsetBottom?: number;
     bottom?: boolean;
 };
-export declare type StickyBoxProps = UseStickyBoxProps & {
+export type StickyBoxProps = UseStickyBoxProps & {
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
 };
-export declare type useStickyBox = <T = any>(options?: UseStickyBoxProps) => React.RefCallback<T>;
-export declare type StickyBoxComponent = React.FunctionComponent<StickyBoxProps>;
+export type useStickyBox = <T = any>(options?: UseStickyBoxProps) => React.RefCallback<T>;
+export type StickyBoxComponent = React.FunctionComponent<StickyBoxProps>;
 /**
  * useStickyBox
  * @param offsetTop

package/lib/cjs/shared/UsernameTextField/index.d.ts

@@ -1,5 +1,5 @@
 import { TextFieldProps } from '@mui/material';
-export declare type UsernameTextFieldProps = {
+export type UsernameTextFieldProps = {
     /**
      * Allows the field to accept an email format as well
      */

package/lib/cjs/types/composer.d.ts

@@ -10,6 +10,6 @@ export interface ComposerLayerProps {
     onSave: (value: any) => void;
     defaultValue: any;
 }
-export declare type ComposerContentType = Omit<SCFeedPostType, 'id' | 'last_activity_at' | 'added_at' | 'slug' | 'summary' | 'deleted' | 'collapsed' | 'comment_count' | 'share_count' | 'view_count' | 'vote_count' | 'follower_count' | 'reaction' | 'reactions_count' | 'flag_count' | 'type'> & {
+export type ComposerContentType = Omit<SCFeedPostType, 'id' | 'last_activity_at' | 'added_at' | 'slug' | 'summary' | 'deleted' | 'collapsed' | 'comment_count' | 'share_count' | 'view_count' | 'vote_count' | 'follower_count' | 'reaction' | 'reactions_count' | 'flag_count' | 'type'> & {
     title?: string;
 };

package/lib/cjs/utils/events.d.ts

@@ -0,0 +1,2 @@
+import { SCEventType } from '@selfcommunity/types';
+export declare function checkEventFinished(event: SCEventType | null): boolean;

package/lib/cjs/utils/events.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkEventFinished = void 0;
+function checkEventFinished(event) {
+    if (event && !event.running) {
+        return new Date().getTime() > new Date(event.end_date || event.start_date).getTime();
+    }
+    return false;
+}
+exports.checkEventFinished = checkEventFinished;

package/lib/cjs/utils/hash.d.ts

@@ -1 +1,2 @@
-export declare const md5: (file: any, chunkSize: any, callback: any) => void;
+import { BatchFile } from '@rpldy/shared';
+export declare const md5: (file: BatchFile['file'], chunkSize: number, callback: (arg: any) => void) => void;

package/lib/cjs/utils/liveStream.d.ts

@@ -0,0 +1,4 @@
+export declare function encodePassphrase(passphrase: string): string;
+export declare function decodePassphrase(base64String: string): string;
+export declare function generateRoomId(): string;
+export declare function randomString(length: number): string;

package/lib/cjs/utils/liveStream.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.randomString = exports.generateRoomId = exports.decodePassphrase = exports.encodePassphrase = void 0;
+function encodePassphrase(passphrase) {
+    return encodeURIComponent(passphrase);
+}
+exports.encodePassphrase = encodePassphrase;
+function decodePassphrase(base64String) {
+    return decodeURIComponent(base64String);
+}
+exports.decodePassphrase = decodePassphrase;
+function generateRoomId() {
+    return `${randomString(4)}-${randomString(4)}`;
+}
+exports.generateRoomId = generateRoomId;
+function randomString(length) {
+    let result = '';
+    const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}
+exports.randomString = randomString;

package/lib/cjs/utils/widget.d.ts

@@ -14,6 +14,7 @@ export declare const actionWidgetTypes: {
     LOAD_PREVIOUS_FAILURE: string;
     SET_RESULTS: string;
     SET_VISIBLE_ITEMS: string;
+    INITIALIZE: string;
     RESET: string;
 };
 /**

package/lib/cjs/utils/widget.js

@@ -18,6 +18,7 @@ exports.actionWidgetTypes = {
     LOAD_PREVIOUS_FAILURE: '_load_previous_failure',
     SET_RESULTS: '_set_results',
     SET_VISIBLE_ITEMS: '_set_visible_items',
+    INITIALIZE: '_initialize',
     RESET: '_reset'
 };
 /**
@@ -56,6 +57,19 @@ function dataWidgetReducer(state, action) {
         case exports.actionWidgetTypes.RESET:
             _state = { isLoadingNext: false, next: null, results: [], count: 0, errorLoadNext: null, initialized: false };
             break;
+        case exports.actionWidgetTypes.INITIALIZE:
+            _state = {
+                cacheKey: action.payload.cacheKey ? action.payload.cacheKey : null,
+                count: action.payload.count ? action.payload.count : 0,
+                results: action.payload.results ? action.payload.results : [],
+                next: action.payload.next ? action.payload.next : null,
+                previous: action.payload.previous ? action.payload.previous : null,
+                isLoadingNext: action.payload.isLoadingNext ? action.payload.isLoadingNext : false,
+                isLoadingPrevious: action.payload.isLoadingPrevious ? action.payload.isLoadingPrevious : false,
+                visibleItems: action.payload.visibleItems ? action.payload.visibleItems : null,
+                initialized: false
+            };
+            break;
     }
     utils_1.LRUCache.set(_state.cacheKey, _state);
     return _state;

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

@@ -1,5 +1,5 @@
 import { BottomNavigationProps as MuiBottomNavigationProps } from '@mui/material';
-export declare type BottomNavigationProps = MuiBottomNavigationProps;
+export type BottomNavigationProps = MuiBottomNavigationProps;
 /**
  * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
  *

package/lib/esm/components/Categories/Categories.js

@@ -1,6 +1,6 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Grid, TextField, Typography } from '@mui/material';
 import { CategoryService, Endpoints } from '@selfcommunity/api-services';
@@ -14,6 +14,8 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger, sortByAttr } from '@selfcommunity/utils';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { PREFIX } from './constants';
+import PubSub from 'pubsub-js';
+import { SCCategoryEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filter`,
@@ -71,6 +73,7 @@ export default function Categories(inProps) {
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     // REFS
     const isMountedRef = useIsComponentMountedRef();
+    const updatesSubscription = useRef(null);
     /**
      * Fetches categories list
      */
@@ -102,6 +105,25 @@ export default function Categories(inProps) {
             });
         }
     }, [contentAvailability, authUserId, prefetchedCategories.length]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = useCallback((_msg, edited) => {
+        setCategories((prev) => {
+            return prev.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        });
+    }, [categories]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    useEffect(() => {
+        if (categories) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.CATEGORY}.${SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [categories]);
     /**
      * Get categories filtered
      */

package/lib/esm/components/CategoriesPopularWidget/CategoriesPopularWidget.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useContext, useEffect, useMemo, useReducer, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { CategoryService, Endpoints, http } from '@selfcommunity/api-services';
@@ -18,6 +18,8 @@ import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { SCCache, SCPreferences, SCPreferencesContext, SCUserContext } from '@selfcommunity/react-core';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
 import { PREFIX } from './constants';
+import PubSub from 'pubsub-js';
+import { SCCategoryEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -87,6 +89,8 @@ export default function CategoriesPopularWidget(inProps) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = useRef(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -104,6 +108,23 @@ export default function CategoriesPopularWidget(inProps) {
             });
         }
     }, [state.isLoadingNext, state.initialized, limit, dispatch]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = useCallback((_msg, edited) => {
+        const _categories = [...state.results];
+        const updatedCategories = _categories.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        dispatch({ type: actionWidgetTypes.SET_RESULTS, payload: { results: updatedCategories } });
+    }, [dispatch, state.results]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    useEffect(() => {
+        updatesSubscription.current = PubSub.subscribe(`${SCTopicType.CATEGORY}.${SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [onEditCategoryHandler]);
     // EFFECTS
     useEffect(() => {
         var _a;

package/lib/esm/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useReducer, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Endpoints, http, SuggestionService } from '@selfcommunity/api-services';
@@ -18,6 +18,8 @@ import BaseDialog from '../../shared/BaseDialog';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import InfiniteScroll from '../../shared/InfiniteScroll';
 import { PREFIX } from './constants';
+import PubSub from 'pubsub-js';
+import { SCCategoryEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -83,6 +85,8 @@ export default function CategoriesSuggestionWidget(inProps) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = useRef(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -100,6 +104,23 @@ export default function CategoriesSuggestionWidget(inProps) {
             });
         }
     }, [state.isLoadingNext, state.initialized, limit, dispatch]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = useCallback((_msg, edited) => {
+        const _categories = [...state.results];
+        const updatedCategories = _categories.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        dispatch({ type: actionWidgetTypes.SET_RESULTS, payload: { results: updatedCategories } });
+    }, [dispatch, state.results]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    useEffect(() => {
+        updatesSubscription.current = PubSub.subscribe(`${SCTopicType.CATEGORY}.${SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [onEditCategoryHandler]);
     // EFFECTS
     useEffect(() => {
         let _t;

package/lib/esm/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.js

@@ -5,7 +5,7 @@ import { ToggleButton, ToggleButtonGroup } from '@mui/material';
 import { useCallback, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
-import { SCPreferences, UserUtils, useSCPreferences, useSCUser, } from '@selfcommunity/react-core';
+import { SCPreferences, UserUtils, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { COMPOSER_TYPE_DISCUSSION, COMPOSER_TYPE_POLL, COMPOSER_TYPE_POST } from '../../../constants/Composer';
 import { PREFIX } from '../constants';
 const classes = {
@@ -35,5 +35,5 @@ export default function ComposerTypeButtonGroup(props) {
     const handleChange = useCallback((event, value) => {
         onChange && onChange(value);
     }, [onChange]);
-    return _jsxs(Root, Object.assign({ className: classNames(classes.root, className), onChange: handleChange, exclusive: true, value: value }, rest, { children: [hasPostType && _jsx(ToggleButton, Object.assign({ value: COMPOSER_TYPE_POST }, { children: _jsx(FormattedMessage, { id: "ui.composer.typeSwitch.post", defaultMessage: "ui.composer.typeSwitch.post" }) })), hasDiscussionType && _jsx(ToggleButton, Object.assign({ value: COMPOSER_TYPE_DISCUSSION }, { children: _jsx(FormattedMessage, { id: "ui.composer.typeSwitch.discussion", defaultMessage: "ui.composer.typeSwitch.discussion" }) })), hasPollType && _jsx(ToggleButton, Object.assign({ value: COMPOSER_TYPE_POLL }, { children: _jsx(FormattedMessage, { id: "ui.composer.typeSwitch.poll", defaultMessage: "ui.composer.typeSwitch.poll" }) }))] }));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onChange: handleChange, exclusive: true, value: value }, rest, { children: [hasPostType && (_jsx(ToggleButton, Object.assign({ value: COMPOSER_TYPE_POST }, { children: _jsx(FormattedMessage, { id: "ui.composer.typeSwitch.post", defaultMessage: "ui.composer.typeSwitch.post" }) }))), hasDiscussionType && (_jsx(ToggleButton, Object.assign({ value: COMPOSER_TYPE_DISCUSSION }, { children: _jsx(FormattedMessage, { id: "ui.composer.typeSwitch.discussion", defaultMessage: "ui.composer.typeSwitch.discussion" }) }))), hasPostType && hasPollType && (_jsx(ToggleButton, Object.assign({ value: COMPOSER_TYPE_POLL }, { children: _jsx(FormattedMessage, { id: "ui.composer.typeSwitch.poll", defaultMessage: "ui.composer.typeSwitch.poll" }) })))] })));
 }

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, Object.assign({ 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/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;