@selfcommunity/react-ui 0.10.2-alpha.8 → 0.10.2-courses.100

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

@@ -0,0 +1,79 @@
+import { SCLiveStreamType } from '@selfcommunity/types';
+import React from 'react';
+import { SCLiveStreamTemplateType } from '../../types/liveStream';
+import { WidgetProps } from '../Widget';
+import { LiveStreamSkeletonProps } from './index';
+export interface LiveStreamProps extends WidgetProps {
+    /**
+     * Event Object
+     * @default null
+     */
+    liveStream?: SCLiveStreamType;
+    /**
+     * Id of the liveStream for filter the feed
+     * @default null
+     */
+    liveStreamId?: number;
+    /**
+     * Event template type
+     * @default 'preview'
+     */
+    template?: SCLiveStreamTemplateType;
+    /**
+     * Actions
+     * @default null
+     */
+    actions?: React.ReactNode;
+    /**
+     * Hide in progress
+     * @default false
+     */
+    hideInProgress?: boolean;
+    /**
+     * Hide liveStream planner
+     * @default false
+     */
+    hideLiveStreamHost?: boolean;
+    /**
+     * Props to spread to EventSkeleton component
+     * @default {}
+     */
+    LiveStreamSkeletonComponentProps?: LiveStreamSkeletonProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Live Stream component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders an liveStream item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Event)
+
+ #### Import
+
+ ```jsx
+ import {liveStream} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLiveStream` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStream-root|Styles applied to the root element.|
+ |avatar|.SCLiveStream-avatar|Styles applied to the avatar element.|
+ |primary|.SCLiveStream-primary|Styles applied to the primary item element section|
+ |secondary|.SCLiveStream-secondary|Styles applied to the secondary item element section|
+ |actions|.SCLiveStream-actions|Styles applied to the actions section.|
+
+
+ *
+ * @param inProps
+ */
+export default function LiveStream(inProps: LiveStreamProps): JSX.Element;

package/lib/esm/components/LiveStream/LiveStream.js

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import LiveStream, { LiveStreamProps } from './LiveStream';
+import LiveStreamSkeleton, { LiveStreamSkeletonProps } from './Skeleton';
+export default LiveStream;
+export { LiveStreamProps, LiveStreamSkeleton, LiveStreamSkeletonProps };

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

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

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

@@ -0,0 +1,55 @@
+import { BoxProps } from '@mui/material';
+import { SCLiveStreamType } from '@selfcommunity/types';
+export interface LiveStreamFormProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Event Object
+     * @default null
+     */
+    liveStream?: SCLiveStreamType;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onSuccess?: (data: SCLiveStreamType) => void;
+    /**
+     * On error callback function
+     * @default null
+     */
+    onError?: (error: any) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS LiveStreamForm component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `LiveStreamForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStreamForm-root|Styles applied to the root element.|
+ |title|.SCLiveStreamForm-title|Styles applied to the title element.|
+ |cover|.SCLiveStreamForm-cover|Styles applied to the cover field.|
+ |form|.SCLiveStreamForm-form|Styles applied to the form element.|
+ |name|.SCLiveStreamForm-name|Styles applied to the name field.|
+ |description|.SCLiveStreamForm-description|Styles applied to the description field.|
+ |content|.SCLiveStreamForm-content|Styles applied to the  element.|
+ |error|.SCLiveStreamForm-error|Styles applied to the error elements.|
+
+ * @param inProps
+ */
+export default function LiveStreamForm(inProps: LiveStreamFormProps): JSX.Element;