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

package/lib/cjs/components/ComposerIconButton/ComposerIconButton.js

@@ -3,23 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const system_1 = require("@mui/system");
 const react_intl_1 = require("react-intl");
 const Composer_1 = tslib_1.__importDefault(require("../Composer"));
 const notistack_1 = require("notistack");
 const contribution_1 = require("../../utils/contribution");
+const EventFormDialog_1 = tslib_1.__importDefault(require("../EventFormDialog"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const GroupForm_1 = tslib_1.__importDefault(require("../GroupForm"));
+const CreateLiveStreamDialog_1 = tslib_1.__importDefault(require("../CreateLiveStreamDialog"));
+const types_1 = require("@selfcommunity/types");
 const PREFIX = 'SCComposerIconButton';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-root`,
+    menuRoot: `${PREFIX}-menu-root`
 };
-const Root = (0, styles_1.styled)(material_1.IconButton, {
+const Root = (0, material_1.styled)(material_1.IconButton, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
+const MenuRoot = (0, material_1.styled)(material_1.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.
 
@@ -43,19 +51,95 @@ const Root = (0, styles_1.styled)(material_1.IconButton, {
  * @param inProps
  */
 exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps, ref) {
+    var _a, _b, _c;
     // PROPS
-    const props = (0, system_1.useThemeProps)({
+    const props = (0, material_1.useThemeProps)({
         props: inProps,
         name: PREFIX
     });
-    const { className = null, ComposerProps = {}, onClick } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps", "onClick"]);
+    const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
     // STATE
-    const [open, setOpen] = (0, react_1.useState)(false);
+    const [openComposer, setOpenComposer] = (0, react_1.useState)(false);
+    const [openPopper, setOpenPopper] = (0, react_1.useState)(false);
+    const [openCreateGroup, setOpenCreateGroup] = (0, react_1.useState)(false);
+    const [openCreateEvent, setOpenCreateEvent] = (0, react_1.useState)(false);
+    const [openCreateLiveStream, setOpenCreateLiveStream] = (0, react_1.useState)(false);
+    const [listItem, setListItem] = (0, react_1.useState)([
+        {
+            icon: 'edit',
+            text: 'ui.composerIconButton.list.content',
+            onClick: () => {
+                setOpenComposer(true);
+                setOpenPopper(false);
+            }
+        }
+    ]);
+    // REFS
+    const popperRef = (0, react_1.useRef)(null);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scContext = (0, react_core_1.useSCContext)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const { preferences } = (0, react_core_1.useSCPreferences)();
+    // MEMOS
+    const canCreateGroup = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_1.SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const canCreateLiveStream = (0, react_1.useMemo)(() => (isFreeTrialTier && isCommunityOwner && canCreateLive) || (!isFreeTrialTier && canCreateLive), [isFreeTrialTier, isCommunityOwner, canCreateLive]);
+    const renderContent = (0, react_1.useMemo)(() => {
+        return ((0, jsx_runtime_1.jsx)(material_1.MenuList, { children: listItem.map((item, i) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: item.icon })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: item.text, defaultMessage: item.text }) })) })] }), i))) }));
+    }, [listItem]);
+    // EFFECTS
+    (0, react_1.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 = (0, react_1.useCallback)((event) => {
         if (scUserContext.user) {
@@ -66,24 +150,45 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
                 });
             }
             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 = (0, react_1.useCallback)(() => {
-        setOpen(false);
-    }, []);
-    const handleSuccess = (0, react_1.useMemo)(() => (feedObject) => {
-        setOpen(false);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }, [onClick, scContext.settings, scUserContext.user]);
+    const handleCloseComposer = (0, react_1.useCallback)(() => {
+        setOpenComposer(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [setOpenComposer, onClose]);
+    const handleCloseMenu = (0, react_1.useCallback)(() => {
+        setOpenPopper(false);
+    }, [setOpenPopper]);
+    const handleCloseCreateGroup = (0, react_1.useCallback)(() => {
+        setOpenCreateGroup(false);
+    }, [setOpenCreateGroup]);
+    const handleCloseCreateEvent = (0, react_1.useCallback)(() => {
+        setOpenCreateEvent(false);
+    }, [setOpenCreateEvent]);
+    const handleCloseCreateLiveStream = (0, react_1.useCallback)(() => {
+        setOpenCreateLiveStream(false);
+    }, [setOpenCreateLiveStream]);
+    const handleSuccess = (0, react_1.useCallback)((feedObject) => {
+        setOpenComposer(false);
         enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
-            action: (snackbarId) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
+            action: () => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
             variant: 'success',
             autoHideDuration: 7000
         });
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleClick, ref: ref }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) })), (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))] }));
+    }, [setOpenComposer]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, ref: (innerRef) => {
+                    popperRef.current = innerRef;
+                    return ref;
+                } }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) })), openComposer && (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateGroup && (0, jsx_runtime_1.jsx)(GroupForm_1.default, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && (0, jsx_runtime_1.jsx)(EventFormDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
 });

package/lib/cjs/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/cjs/components/Course/Course.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const course_1 = require("../../types/course");
+const CourseParticipantsButton_1 = tslib_1.__importDefault(require("../CourseParticipantsButton"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const course_2 = require("../../utils/course");
+const CourseJoinButton_1 = tslib_1.__importDefault(require("../CourseJoinButton"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    chip: `${constants_1.PREFIX}-chip`,
+    previewRoot: `${constants_1.PREFIX}-preview-root`,
+    previewActions: `${constants_1.PREFIX}-preview-actions`,
+    previewAvatar: `${constants_1.PREFIX}-preview-avatar`,
+    previewCategory: `${constants_1.PREFIX}-preview-category`,
+    previewCompletedStatus: `${constants_1.PREFIX}-preview-completed-status`,
+    previewContent: `${constants_1.PREFIX}-preview-content`,
+    previewCreator: `${constants_1.PREFIX}-preview-creator`,
+    previewImage: `${constants_1.PREFIX}-preview-image`,
+    previewImageWrapper: `${constants_1.PREFIX}-preview-image-wrapper`,
+    previewInfo: `${constants_1.PREFIX}-preview-info`,
+    previewName: `${constants_1.PREFIX}-preview-name`,
+    previewNameWrapper: `${constants_1.PREFIX}-preview-name-wrapper`,
+    previewProgress: `${constants_1.PREFIX}-preview-progress`,
+    previewProgressBar: `${constants_1.PREFIX}-preview-progress-bar`,
+    snippetRoot: `${constants_1.PREFIX}-snippet-root`,
+    snippetActions: `${constants_1.PREFIX}-snippet-actions`,
+    snippetAvatar: `${constants_1.PREFIX}-snippet-avatar`,
+    snippetImage: `${constants_1.PREFIX}-snippet-image`,
+    snippetPrimary: `${constants_1.PREFIX}-snippet-primary`,
+    snippetSecondary: `${constants_1.PREFIX}-snippet-secondary`
+};
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+const PreviewRoot = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'PreviewRoot',
+    overridesResolver: (_props, styles) => styles.previewRoot
+})(() => ({}));
+const SnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
+    name: constants_1.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
+ */
+function Course(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = course_1.SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps"]);
+    // STATE
+    const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
+    // CONTEXT
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const isCourseAdmin = (0, react_1.useMemo)(() => scCourse && (scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR || scCourse.join_status === types_1.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 (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ template: template }, CourseSkeletonComponentProps, rest, { actions: actions }));
+    }
+    const renderProgress = () => {
+        if ((0, course_2.isCourseCompleted)(scCourse)) {
+            return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewCompletedStatus }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "success" }, { children: "circle_checked" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.completed", id: "ui.course.completed" }) }))] })));
+        }
+        else if (scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.completion.percentage", defaultMessage: "ui.course.completion.percentage", values: { percentage: `${Math.round(scCourse.user_completion_rate)}%` } }) }), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.previewProgressBar, variant: "determinate", color: "primary", value: scCourse.user_completion_rate })] }));
+        }
+        else if (isCourseAdmin) {
+            return (0, jsx_runtime_1.jsx)(CourseParticipantsButton_1.default, Object.assign({ course: scCourse }, CourseParticipantsButtonComponentProps));
+        }
+    };
+    const chipLabel = (() => {
+        if (isCourseAdmin) {
+            return scCourse.privacy ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.published", id: "ui.course.status.published" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.draft", id: "ui.course.status.draft" }));
+        }
+        else if ((0, course_2.isCourseCompleted)(scCourse)) {
+            return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.completed", id: "ui.course.status.completed" });
+        }
+        else if ((0, course_2.isCourseNew)(scCourse)) {
+            return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.new", id: "ui.course.status.new" });
+        }
+        return null;
+    })();
+    /**
+     * Renders course object
+     */
+    let contentObj;
+    if (template === course_1.SCCourseTemplateType.PREVIEW) {
+        contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scCourse.image_medium, alt: scCourse.name, className: classes.previewImage }), (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse)) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
+                                ? 'primary'
+                                : isCourseAdmin && !scCourse.privacy
+                                    ? 'default'
+                                    : 'secondary', label: chipLabel, className: classes.chip })), (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCourse.name, src: scCourse.image_medium, className: classes.previewAvatar })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.previewCreator }, { children: scCourse.created_by.username })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.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' }), "-", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewCategory }, { children: scCourse.categories.map((category) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: category.name }, category.id))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: !scCourse.join_status ? ((0, jsx_runtime_1.jsx)(CourseJoinButton_1.default, { course: scCourse, onJoin: handleJoinCourse })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see.preview", id: "ui.course.see.preview" }) }))) })))] })));
+    }
+    else {
+        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: classes.snippetAvatar }), (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse)) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
+                            ? 'primary'
+                            : isCourseAdmin && !scCourse.privacy
+                                ? 'default'
+                                : 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: scCourse.created_by.username })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.name }))] })), secondary: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.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' }), "-", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.snippetActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) }))) }));
+    }
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`) }, rest, { children: contentObj })));
+}
+exports.default = Course;

package/lib/cjs/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/cjs/components/Course/Placeholder.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const constants_1 = require("./constants");
+const react_intl_1 = require("react-intl");
+const react_core_1 = require("@selfcommunity/react-core");
+const CreateCourseButton_1 = tslib_1.__importDefault(require("../CreateCourseButton"));
+const classes = {
+    root: `${constants_1.PREFIX}-placeholder-root`,
+    placeholderImageWrapper: `${constants_1.PREFIX}-placeholder-image-wrapper`,
+    placeholderImage: `${constants_1.PREFIX}-placeholder-image`,
+    placeholderAvatar: `${constants_1.PREFIX}-placeholder-avatar`,
+    placeholderCreator: `${constants_1.PREFIX}-placeholder-creator`,
+    placeholderChip: `${constants_1.PREFIX}-placeholder-chip`,
+    placeholderIcon: `${constants_1.PREFIX}-placeholder-icon`,
+    placeholderName: `${constants_1.PREFIX}-placeholder-name`,
+    placeholderContent: `${constants_1.PREFIX}-placeholder-content`,
+    placeholderInfo: `${constants_1.PREFIX}-placeholder-info`,
+    placeholderActions: `${constants_1.PREFIX}-placeholder-actions`,
+    placeholderCreateButton: `${constants_1.PREFIX}-placeholder-create-button`
+};
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.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.|
+ *
+ */
+function CoursePlaceholder(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, actionCreate = false, itemNumber = 1 } = props, rest = tslib_1.__rest(props, ["className", "actionCreate", "itemNumber"]);
+    // HOOK
+    const { preferences } = (0, react_core_1.useSCPreferences)();
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.placeholderImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: `${preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.placeholderImage }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.placeholderIcon, fontSize: "large" }, { children: "courses" })), !actionCreate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.placeholderAvatar, alt: "placeholder-avatar", src: "" }), (0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseStatus.draft", defaultMessage: "ui.courseStatus.draft" }), className: classes.placeholderChip })] }))] })), !actionCreate && ((0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.placeholderContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.placeholderCreator }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.placeholder.teacher", defaultMessage: "ui.course.placeholder.teacher" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.placeholderName }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.placeholder.title", defaultMessage: "ui.course.placeholder.title", values: { number: itemNumber } }) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.placeholderInfo }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.placeholder.subtitle", defaultMessage: "ui.course.placeholder.subtitle" }) }))] }))), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: (0, classnames_1.default)(classes.placeholderActions, { [classes.placeholderCreateButton]: actionCreate }) }, { children: actionCreate ? ((0, jsx_runtime_1.jsx)(CreateCourseButton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: 0 } })] })) }))] })));
+}
+exports.default = CoursePlaceholder;

package/lib/cjs/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;