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

package/lib/esm/components/ComposerIconButton/ComposerIconButton.js

@@ -1,23 +1,31 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Icon, IconButton } from '@mui/material';
-import { Link, SCRoutes, UserUtils, useSCContext, useSCRouting, useSCUser } from '@selfcommunity/react-core';
-import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Icon, IconButton, useMediaQuery, styled, useTheme, SwipeableDrawer, MenuList, MenuItem, ListItemIcon, ListItemText, Typography, useThemeProps, Menu } from '@mui/material';
+import { Link, SCPreferences, SCRoutes, UserUtils, useSCContext, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import Composer from '../Composer';
 import { useSnackbar } from 'notistack';
 import { getRouteData } from '../../utils/contribution';
+import EventFormDialog from '../EventFormDialog';
+import classNames from 'classnames';
+import GroupForm from '../GroupForm';
+import CreateLiveStreamDialog from '../CreateLiveStreamDialog';
+import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
 const PREFIX = 'SCComposerIconButton';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-root`,
+    menuRoot: `${PREFIX}-menu-root`
 };
 const Root = styled(IconButton, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
+const MenuRoot = styled(Menu, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.popperRoot
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Composer Icon Button component. Learn about the available props and the CSS API.
 
@@ -41,19 +49,95 @@ const Root = styled(IconButton, {
  * @param inProps
  */
 export default React.forwardRef(function ComposerIconButton(inProps, ref) {
+    var _a, _b, _c;
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className = null, ComposerProps = {}, onClick } = props, rest = __rest(props, ["className", "ComposerProps", "onClick"]);
+    const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = __rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
     // STATE
-    const [open, setOpen] = useState(false);
+    const [openComposer, setOpenComposer] = useState(false);
+    const [openPopper, setOpenPopper] = useState(false);
+    const [openCreateGroup, setOpenCreateGroup] = useState(false);
+    const [openCreateEvent, setOpenCreateEvent] = useState(false);
+    const [openCreateLiveStream, setOpenCreateLiveStream] = useState(false);
+    const [listItem, setListItem] = useState([
+        {
+            icon: 'edit',
+            text: 'ui.composerIconButton.list.content',
+            onClick: () => {
+                setOpenComposer(true);
+                setOpenPopper(false);
+            }
+        }
+    ]);
+    // REFS
+    const popperRef = useRef(null);
     // CONTEXT
     const scUserContext = useSCUser();
     const scContext = useSCContext();
     const scRoutingContext = useSCRouting();
     const { enqueueSnackbar } = useSnackbar();
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const { preferences } = useSCPreferences();
+    // MEMOS
+    const canCreateGroup = 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_group; }, [(_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]);
+    const canCreateLive = 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; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.permission]);
+    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 canCreateLiveStream = useMemo(() => (isFreeTrialTier && isCommunityOwner && canCreateLive) || (!isFreeTrialTier && canCreateLive), [isFreeTrialTier, isCommunityOwner, canCreateLive]);
+    const renderContent = useMemo(() => {
+        return (_jsx(MenuList, { children: listItem.map((item, i) => (_jsxs(MenuItem, Object.assign({ onClick: item.onClick }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: item.icon })) }), _jsx(ListItemText, { primary: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: item.text, defaultMessage: item.text }) })) })] }), i))) }));
+    }, [listItem]);
+    // EFFECTS
+    useEffect(() => {
+        if (canCreateGroup) {
+            setListItem((prev) => [
+                ...prev,
+                {
+                    icon: 'groups',
+                    text: 'ui.composerIconButton.list.group',
+                    onClick: () => {
+                        setOpenCreateGroup(true);
+                        setOpenPopper(false);
+                    }
+                }
+            ]);
+        }
+        if (canCreateEvent) {
+            setListItem((prev) => [
+                ...prev,
+                {
+                    icon: 'CalendarIcon',
+                    text: 'ui.composerIconButton.list.event',
+                    onClick: () => {
+                        setOpenCreateEvent(true);
+                        setOpenPopper(false);
+                    }
+                }
+            ]);
+        }
+        if (canCreateLiveStream) {
+            setListItem((prev) => [
+                ...prev,
+                {
+                    icon: 'movie',
+                    text: 'ui.composerIconButton.list.liveStream',
+                    onClick: () => {
+                        setOpenCreateLiveStream(true);
+                        setOpenPopper(false);
+                    }
+                }
+            ]);
+        }
+    }, [canCreateGroup, setListItem]);
     // HANDLERS
     const handleClick = useCallback((event) => {
         if (scUserContext.user) {
@@ -64,24 +148,45 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
                 });
             }
             else {
-                setOpen(true);
+                if (canCreateGroup || canCreateEvent || canCreateLiveStream) {
+                    setOpenPopper(true);
+                }
+                else {
+                    setOpenComposer(true);
+                }
             }
         }
         else {
             scContext.settings.handleAnonymousAction();
         }
-        onClick && onClick(event);
-    }, [onClick, enqueueSnackbar, scContext.settings, scUserContext.user]);
-    const handleClose = useCallback(() => {
-        setOpen(false);
-    }, []);
-    const handleSuccess = useMemo(() => (feedObject) => {
-        setOpen(false);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }, [onClick, scContext.settings, scUserContext.user]);
+    const handleCloseComposer = useCallback(() => {
+        setOpenComposer(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [setOpenComposer, onClose]);
+    const handleCloseMenu = useCallback(() => {
+        setOpenPopper(false);
+    }, [setOpenPopper]);
+    const handleCloseCreateGroup = useCallback(() => {
+        setOpenCreateGroup(false);
+    }, [setOpenCreateGroup]);
+    const handleCloseCreateEvent = useCallback(() => {
+        setOpenCreateEvent(false);
+    }, [setOpenCreateEvent]);
+    const handleCloseCreateLiveStream = useCallback(() => {
+        setOpenCreateLiveStream(false);
+    }, [setOpenCreateLiveStream]);
+    const handleSuccess = useCallback((feedObject) => {
+        setOpenComposer(false);
         enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
-            action: (snackbarId) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], getRouteData(feedObject)) }, { children: _jsx(FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
+            action: () => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], getRouteData(feedObject)) }, { children: _jsx(FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
             variant: 'success',
             autoHideDuration: 7000
         });
-    }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleClick, ref: ref }, { children: _jsx(Icon, { children: "add_circle_outline" }) })), _jsx(Composer, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))] }));
+    }, [setOpenComposer]);
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, ref: (innerRef) => {
+                    popperRef.current = innerRef;
+                    return ref;
+                } }, rest, { children: _jsx(Icon, { children: "add_circle_outline" }) })), openComposer && _jsx(Composer, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : (_jsx(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateGroup && _jsx(GroupForm, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && _jsx(EventFormDialog, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && _jsx(CreateLiveStreamDialog, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
 });

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

@@ -0,0 +1,91 @@
+import { SCCourseType } from '@selfcommunity/types';
+import React from 'react';
+import { SCCourseTemplateType } from '../../types/course';
+import { CourseParticipantsButtonProps } from '../CourseParticipantsButton';
+import { WidgetProps } from '../Widget';
+import { CourseSkeletonProps } from './Skeleton';
+export interface CourseProps extends WidgetProps {
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course for filter the feed
+     * @default null
+     */
+    courseId?: number;
+    /**
+     * Course template type
+     * @default 'preview'
+     */
+    template?: SCCourseTemplateType;
+    /**
+     * Actions
+     * @default null
+     */
+    actions?: React.ReactNode;
+    /**
+     * Props to spread to CourseParticipantsButton component
+     * @default {}
+     */
+    CourseParticipantsButtonComponentProps?: CourseParticipantsButtonProps;
+    /**
+     * Props to spread to CourseSkeleton component
+     * @default {}
+     */
+    CourseSkeletonComponentProps?: CourseSkeletonProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Course component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a course item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Course)
+
+ #### Import
+
+ ```jsx
+ import {course} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourse` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourses-root|Styles applied to the root element.|
+ |chip|.SCCourses-chip|Styles applied to the chip element.|
+ |previewRoot|.SCCourses-preview-root|Styles applied to the root element in the preview template.|
+ |previewActions|.SCCourses-preview-actions|Styles applied to the actions section in the preview template.|
+ |previewAvatar|.SCCourses-preview-avatar|Styles applied to the avatar in the preview template.|
+ |previewCategory|.SCCourses-preview-category|Styles applied to the category element in the preview template.|
+ |previewCompletedStatus|.SCCourses-preview-completed-status|Styles applied to indicate the completed status in the preview template.|
+ |previewContent|.SCCourses-preview-content|Styles applied to the content section in the preview template.|
+ |previewCreator|.SCCourses-preview-creator|Styles applied to the creator element in the preview template.|
+ |previewImage|.SCCourses-preview-image|Styles applied to the image in the preview template.|
+ |previewImageWrapper|.SCCourses-preview-image-wrapper|Styles applied to the wrapper of the image in the preview template.|
+ |previewInfo|.SCCourses-preview-info|Styles applied to the info section in the preview template.|
+ |previewName|.SCCourses-preview-name|Styles applied to the name element in the preview template.|
+ |previewNameWrapper|.SCCourses-preview-name-wrapper|Styles applied to the name wrapper in the preview template.|
+ |previewProgress|.SCCourses-preview-progress|Styles applied to indicate the progress section in the preview template.|
+ |previewProgressBar|.SCCourses-preview-progress-bar|Styles applied to the progress bar in the preview template.|
+ |snippetRoot|.SCCourses-snippet-root|Styles applied to the root element in the snippet template.|
+ |snippetActions|.SCCourses-snippet-actions|Styles applied to the actions section in the snippet template.|
+ |snippetAvatar|.SCCourses-snippet-avatar|Styles applied to the avatar element in the snippet template.|
+ |snippetImage|.SCCourses-snippet-image|Styles applied to the image element in the snippet template.|
+ |snippetPrimary|.SCCourses-snippet-primary|Styles applied to the primary section in the snippet template.|
+ |snippetSecondary|.SCCourses-snippet-secondary|Styles applied to the secondary section in the snippet template.|
+
+ *
+ * @param inProps
+ */
+export default function Course(inProps: CourseProps): JSX.Element;

package/lib/esm/components/Course/Course.js

@@ -0,0 +1,176 @@
+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, Icon, LinearProgress, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Link, SCRoutes, useSCFetchCourse, useSCRouting } from '@selfcommunity/react-core';
+import { SCCourseJoinStatusType } from '@selfcommunity/types';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { SCCourseTemplateType } from '../../types/course';
+import CourseParticipantsButton from '../CourseParticipantsButton';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import CourseSkeleton from './Skeleton';
+import BaseItem from '../../shared/BaseItem';
+import { isCourseCompleted, isCourseNew } from '../../utils/course';
+import CourseJoinButton from '../CourseJoinButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    chip: `${PREFIX}-chip`,
+    previewRoot: `${PREFIX}-preview-root`,
+    previewActions: `${PREFIX}-preview-actions`,
+    previewAvatar: `${PREFIX}-preview-avatar`,
+    previewCategory: `${PREFIX}-preview-category`,
+    previewCompletedStatus: `${PREFIX}-preview-completed-status`,
+    previewContent: `${PREFIX}-preview-content`,
+    previewCreator: `${PREFIX}-preview-creator`,
+    previewImage: `${PREFIX}-preview-image`,
+    previewImageWrapper: `${PREFIX}-preview-image-wrapper`,
+    previewInfo: `${PREFIX}-preview-info`,
+    previewName: `${PREFIX}-preview-name`,
+    previewNameWrapper: `${PREFIX}-preview-name-wrapper`,
+    previewProgress: `${PREFIX}-preview-progress`,
+    previewProgressBar: `${PREFIX}-preview-progress-bar`,
+    snippetRoot: `${PREFIX}-snippet-root`,
+    snippetActions: `${PREFIX}-snippet-actions`,
+    snippetAvatar: `${PREFIX}-snippet-avatar`,
+    snippetImage: `${PREFIX}-snippet-image`,
+    snippetPrimary: `${PREFIX}-snippet-primary`,
+    snippetSecondary: `${PREFIX}-snippet-secondary`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+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 Course component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a course item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Course)
+
+ #### Import
+
+ ```jsx
+ import {course} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourse` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourses-root|Styles applied to the root element.|
+ |chip|.SCCourses-chip|Styles applied to the chip element.|
+ |previewRoot|.SCCourses-preview-root|Styles applied to the root element in the preview template.|
+ |previewActions|.SCCourses-preview-actions|Styles applied to the actions section in the preview template.|
+ |previewAvatar|.SCCourses-preview-avatar|Styles applied to the avatar in the preview template.|
+ |previewCategory|.SCCourses-preview-category|Styles applied to the category element in the preview template.|
+ |previewCompletedStatus|.SCCourses-preview-completed-status|Styles applied to indicate the completed status in the preview template.|
+ |previewContent|.SCCourses-preview-content|Styles applied to the content section in the preview template.|
+ |previewCreator|.SCCourses-preview-creator|Styles applied to the creator element in the preview template.|
+ |previewImage|.SCCourses-preview-image|Styles applied to the image in the preview template.|
+ |previewImageWrapper|.SCCourses-preview-image-wrapper|Styles applied to the wrapper of the image in the preview template.|
+ |previewInfo|.SCCourses-preview-info|Styles applied to the info section in the preview template.|
+ |previewName|.SCCourses-preview-name|Styles applied to the name element in the preview template.|
+ |previewNameWrapper|.SCCourses-preview-name-wrapper|Styles applied to the name wrapper in the preview template.|
+ |previewProgress|.SCCourses-preview-progress|Styles applied to indicate the progress section in the preview template.|
+ |previewProgressBar|.SCCourses-preview-progress-bar|Styles applied to the progress bar in the preview template.|
+ |snippetRoot|.SCCourses-snippet-root|Styles applied to the root element in the snippet template.|
+ |snippetActions|.SCCourses-snippet-actions|Styles applied to the actions section in the snippet template.|
+ |snippetAvatar|.SCCourses-snippet-avatar|Styles applied to the avatar element in the snippet template.|
+ |snippetImage|.SCCourses-snippet-image|Styles applied to the image element in the snippet template.|
+ |snippetPrimary|.SCCourses-snippet-primary|Styles applied to the primary section in the snippet template.|
+ |snippetSecondary|.SCCourses-snippet-secondary|Styles applied to the secondary section in the snippet template.|
+
+ *
+ * @param inProps
+ */
+export default function Course(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps"]);
+    // STATE
+    const { scCourse, setSCCourse } = useSCFetchCourse({ id: courseId, course });
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    const isCourseAdmin = useMemo(() => scCourse && (scCourse.join_status === SCCourseJoinStatusType.CREATOR || scCourse.join_status === SCCourseJoinStatusType.MANAGER), [scCourse]);
+    //HANDLERS
+    /**
+     * Handles callback join course
+     */
+    const handleJoinCourse = (course, status) => {
+        setSCCourse(Object.assign(Object.assign({}, course), { join_status: status }));
+    };
+    /**
+     * Renders course object
+     */
+    if (!scCourse) {
+        return _jsx(CourseSkeleton, Object.assign({ template: template }, CourseSkeletonComponentProps, rest, { actions: actions }));
+    }
+    const renderProgress = () => {
+        if (isCourseCompleted(scCourse)) {
+            return (_jsxs(Box, Object.assign({ className: classes.previewCompletedStatus }, { children: [_jsx(Icon, Object.assign({ color: "success" }, { children: "circle_checked" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.completed", id: "ui.course.completed" }) }))] })));
+        }
+        else if (scCourse.join_status === SCCourseJoinStatusType.JOINED) {
+            return (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.course.completion.percentage", defaultMessage: "ui.course.completion.percentage", values: { percentage: `${Math.round(scCourse.user_completion_rate)}%` } }) }), _jsx(LinearProgress, { className: classes.previewProgressBar, variant: "determinate", color: "primary", value: scCourse.user_completion_rate })] }));
+        }
+        else if (isCourseAdmin) {
+            return _jsx(CourseParticipantsButton, Object.assign({ course: scCourse }, CourseParticipantsButtonComponentProps));
+        }
+    };
+    const chipLabel = (() => {
+        if (isCourseAdmin) {
+            return scCourse.privacy ? (_jsx(FormattedMessage, { defaultMessage: "ui.course.status.published", id: "ui.course.status.published" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.course.status.draft", id: "ui.course.status.draft" }));
+        }
+        else if (isCourseCompleted(scCourse)) {
+            return _jsx(FormattedMessage, { defaultMessage: "ui.course.status.completed", id: "ui.course.status.completed" });
+        }
+        else if (isCourseNew(scCourse)) {
+            return _jsx(FormattedMessage, { defaultMessage: "ui.course.status.new", id: "ui.course.status.new" });
+        }
+        return null;
+    })();
+    /**
+     * Renders course object
+     */
+    let contentObj;
+    if (template === SCCourseTemplateType.PREVIEW) {
+        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scCourse.image_medium, alt: scCourse.name, className: classes.previewImage }), (isCourseAdmin || isCourseCompleted(scCourse) || isCourseNew(scCourse)) && (_jsx(Chip, { size: "small", component: "div", color: isCourseCompleted(scCourse) || (isCourseAdmin && scCourse.privacy)
+                                ? 'primary'
+                                : isCourseAdmin && !scCourse.privacy
+                                    ? 'default'
+                                    : 'secondary', label: chipLabel, className: classes.chip })), _jsx(Avatar, { alt: scCourse.name, src: scCourse.image_medium, className: classes.previewAvatar })] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(Typography, Object.assign({ variant: "body2", className: classes.previewCreator }, { children: scCourse.created_by.username })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), _jsxs(Typography, Object.assign({ className: classes.previewInfo }, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), "-", _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), _jsx(Box, Object.assign({ className: classes.previewCategory }, { children: scCourse.categories.map((category) => (_jsx(Chip, { size: "small", label: category.name }, category.id))) })), _jsx(Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: !scCourse.join_status ? (_jsx(CourseJoinButton, { course: scCourse, onJoin: handleJoinCourse })) : (_jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see.preview", id: "ui.course.see.preview" }) }))) })))] })));
+    }
+    else {
+        contentObj = (_jsx(SnippetRoot, { elevation: 0, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: classes.snippetAvatar }), (isCourseAdmin || isCourseCompleted(scCourse) || isCourseNew(scCourse)) && (_jsx(Chip, { size: "small", component: "div", color: isCourseCompleted(scCourse) || (isCourseAdmin && scCourse.privacy)
+                            ? 'primary'
+                            : isCourseAdmin && !scCourse.privacy
+                                ? 'default'
+                                : 'secondary', label: chipLabel, className: classes.chip }))] })), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: scCourse.created_by.username })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.name }))] })), secondary: _jsxs(Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), "-", _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), 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.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.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/Course/Placeholder.d.ts

@@ -0,0 +1,40 @@
+import { WidgetProps } from '../Widget';
+export interface CourseSkeletonProps extends WidgetProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Shows create ation
+     * @default false
+     */
+    actionCreate?: boolean;
+    /**
+     * The placeholder item number
+     */
+    itemNumber?: number;
+}
+/**
+ * > API documentation for the Community-JS Course Placeholder component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CoursePlaceholder} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourse-placeholder-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourse-placeholder-root|Styles applied to the root element.|
+ |image|.SCCourse-placeholder-image|Styles applied to the image element.|
+ |action|.SCCourse-placeholder-action|Styles applied to action section.|
+ *
+ */
+export default function CoursePlaceholder(inProps: CourseSkeletonProps): JSX.Element;

package/lib/esm/components/Course/Placeholder.js

@@ -0,0 +1,62 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Box, CardActions, CardContent, CardMedia, Chip, Icon, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import { FormattedMessage } from 'react-intl';
+import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
+import CreateCourseButton from '../CreateCourseButton';
+const classes = {
+    root: `${PREFIX}-placeholder-root`,
+    placeholderImageWrapper: `${PREFIX}-placeholder-image-wrapper`,
+    placeholderImage: `${PREFIX}-placeholder-image`,
+    placeholderAvatar: `${PREFIX}-placeholder-avatar`,
+    placeholderCreator: `${PREFIX}-placeholder-creator`,
+    placeholderChip: `${PREFIX}-placeholder-chip`,
+    placeholderIcon: `${PREFIX}-placeholder-icon`,
+    placeholderName: `${PREFIX}-placeholder-name`,
+    placeholderContent: `${PREFIX}-placeholder-content`,
+    placeholderInfo: `${PREFIX}-placeholder-info`,
+    placeholderActions: `${PREFIX}-placeholder-actions`,
+    placeholderCreateButton: `${PREFIX}-placeholder-create-button`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'PlaceholderRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Course Placeholder component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CoursePlaceholder} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourse-placeholder-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourse-placeholder-root|Styles applied to the root element.|
+ |image|.SCCourse-placeholder-image|Styles applied to the image element.|
+ |action|.SCCourse-placeholder-action|Styles applied to action section.|
+ *
+ */
+export default function CoursePlaceholder(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, actionCreate = false, itemNumber = 1 } = props, rest = __rest(props, ["className", "actionCreate", "itemNumber"]);
+    // HOOK
+    const { preferences } = useSCPreferences();
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.placeholderImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: `${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.placeholderImage }), _jsx(Icon, Object.assign({ className: classes.placeholderIcon, fontSize: "large" }, { children: "courses" })), !actionCreate && (_jsxs(_Fragment, { children: [_jsx(Avatar, { className: classes.placeholderAvatar, alt: "placeholder-avatar", src: "" }), _jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.courseStatus.draft", defaultMessage: "ui.courseStatus.draft" }), className: classes.placeholderChip })] }))] })), !actionCreate && (_jsxs(CardContent, Object.assign({ className: classes.placeholderContent }, { children: [_jsx(Typography, Object.assign({ className: classes.placeholderCreator }, { children: _jsx(FormattedMessage, { id: "ui.course.placeholder.teacher", defaultMessage: "ui.course.placeholder.teacher" }) })), _jsx(Box, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.placeholderName }, { children: _jsx(FormattedMessage, { id: "ui.course.placeholder.title", defaultMessage: "ui.course.placeholder.title", values: { number: itemNumber } }) })) }), _jsx(Typography, Object.assign({ className: classes.placeholderInfo }, { children: _jsx(FormattedMessage, { id: "ui.course.placeholder.subtitle", defaultMessage: "ui.course.placeholder.subtitle" }) }))] }))), _jsx(CardActions, Object.assign({ className: classNames(classes.placeholderActions, { [classes.placeholderCreateButton]: actionCreate }) }, { children: actionCreate ? (_jsx(CreateCourseButton, {})) : (_jsxs(Typography, { children: [_jsx(Icon, { children: "people_alt" }), _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: 0 } })] })) }))] })));
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { SCCourseTemplateType } from '../../types/course';
+import { WidgetProps } from '../Widget';
+export interface CourseSkeletonProps extends WidgetProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Course template type
+     * @default 'preview'
+     */
+    template?: SCCourseTemplateType;
+    /**
+     * 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 Course Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CourseSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourse-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourse-skeleton-root|Styles applied to the root element.|
+ |image|.SCCourse-skeleton-image|Styles applied to the image element.|
+ |action|.SCCourse-skeleton-action|Styles applied to action section.|
+ *
+ */
+export default function CourseSkeleton(inProps: CourseSkeletonProps): JSX.Element;