@selfcommunity/react-ui 0.11.0-alpha.60 → 0.11.0-alpha.61

package/lib/cjs/components/ComposerIconButton/ComposerIconButton.d.ts

@@ -4,6 +4,7 @@ import { ComposerProps } from '../Composer';
 import { EventFormDialogProps } from '../EventFormDialog';
 import { GroupFormProps } from '../GroupForm';
 import { CreateLiveStreamDialogProps } from '../CreateLiveStreamDialog';
+import { CourseFormDialogProps } from '../CourseFormDialog';
 export interface ComposerIconButtonProps extends IconButtonProps {
     /**
      * Composer Props
@@ -20,18 +21,23 @@ export interface ComposerIconButtonProps extends IconButtonProps {
      * @default empty object
      */
     PopperProps?: PopperProps;
+    /**
+     * Props to spread to CreateCourse component
+     * @default empty object
+     */
+    CourseFormDialogComponentProps?: CourseFormDialogProps;
     /**
      * Props to spread to CreateGroup component
      * @default empty object
      */
     GroupFormProps?: GroupFormProps;
     /**
-     * Props to spread to CreateGroup component
+     * Props to spread to CreateEvent component
      * @default empty object
      */
     EventFormDialogComponentProps?: EventFormDialogProps;
     /**
-     * Props to spread to CreateGroup component
+     * Props to spread to CreateLiveStream component
      * @default empty object
      */
     CreateLiveStreamDialogComponentProps?: CreateLiveStreamDialogProps;
@@ -58,5 +64,5 @@ export interface ComposerIconButtonProps extends IconButtonProps {
 
  * @param inProps
  */
-declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "name" | "onClose" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "PopperProps" | "ComposerProps" | "GroupFormProps" | "EventFormDialogComponentProps" | "CreateLiveStreamDialogComponentProps"> & React.RefAttributes<HTMLButtonElement>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "name" | "onClose" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "PopperProps" | "ComposerProps" | "CourseFormDialogComponentProps" | "GroupFormProps" | "EventFormDialogComponentProps" | "CreateLiveStreamDialogComponentProps"> & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

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

@@ -14,6 +14,7 @@ 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 CourseFormDialog_1 = tslib_1.__importDefault(require("../CourseFormDialog"));
 const PREFIX = 'SCComposerIconButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -51,16 +52,17 @@ const MenuRoot = (0, material_1.styled)(material_1.Menu, {
  * @param inProps
  */
 exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps, ref) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     // PROPS
     const props = (0, material_1.useThemeProps)({
         props: inProps,
         name: PREFIX
     });
-    const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
+    const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, CourseFormDialogComponentProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "CourseFormDialogComponentProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
     // STATE
     const [openComposer, setOpenComposer] = (0, react_1.useState)(false);
     const [openPopper, setOpenPopper] = (0, react_1.useState)(false);
+    const [openCreateCourse, setOpenCreateCourse] = (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);
@@ -86,9 +88,10 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
     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 canCreateCourse = (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_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    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; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.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; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.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; }, [(_d = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _d === void 0 ? void 0 : _d.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 &&
@@ -100,6 +103,19 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
     }, [listItem]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
+        if (canCreateCourse) {
+            setListItem((prev) => [
+                ...prev,
+                {
+                    icon: 'courses',
+                    text: 'ui.composerIconButton.list.course',
+                    onClick: () => {
+                        setOpenCreateCourse(true);
+                        setOpenPopper(false);
+                    }
+                }
+            ]);
+        }
         if (canCreateGroup) {
             setListItem((prev) => [
                 ...prev,
@@ -139,7 +155,7 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
                 }
             ]);
         }
-    }, [canCreateGroup, setListItem]);
+    }, [canCreateCourse, canCreateGroup, canCreateEvent, canCreateLiveStream, setListItem, setOpenPopper, setOpenCreateCourse, setOpenCreateGroup, setOpenCreateEvent, setOpenCreateLiveStream]);
     // HANDLERS
     const handleClick = (0, react_1.useCallback)((event) => {
         if (scUserContext.user) {
@@ -150,7 +166,7 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
                 });
             }
             else {
-                if (canCreateGroup || canCreateEvent || canCreateLiveStream) {
+                if (canCreateCourse || canCreateGroup || canCreateEvent || canCreateLiveStream) {
                     setOpenPopper(true);
                 }
                 else {
@@ -162,7 +178,17 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
             scContext.settings.handleAnonymousAction();
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }, [onClick, scContext.settings, scUserContext.user]);
+    }, [
+        onClick,
+        scContext.settings,
+        scUserContext.user,
+        canCreateCourse,
+        canCreateGroup,
+        canCreateEvent,
+        canCreateLiveStream,
+        setOpenPopper,
+        setOpenComposer
+    ]);
     const handleCloseComposer = (0, react_1.useCallback)(() => {
         setOpenComposer(false);
         onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -170,6 +196,9 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
     const handleCloseMenu = (0, react_1.useCallback)(() => {
         setOpenPopper(false);
     }, [setOpenPopper]);
+    const handleCloseCreateCourse = (0, react_1.useCallback)(() => {
+        setOpenCreateCourse(false);
+    }, [setOpenCreateCourse]);
     const handleCloseCreateGroup = (0, react_1.useCallback)(() => {
         setOpenCreateGroup(false);
     }, [setOpenCreateGroup]);
@@ -190,5 +219,5 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
     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))] }));
+                } }, 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 }))) })), openCreateCourse && (0, jsx_runtime_1.jsx)(CourseFormDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateCourse }, CourseFormDialogComponentProps)), 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,92 @@
+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;
+    /**
+     * It shows a different snippet type
+     */
+    userProfileSnippet?: boolean;
+    /**
+     * 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.|
+ |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.|
+ 
+ *
+ * @param inProps
+ */
+export default function Course(inProps: CourseProps): JSX.Element;

package/lib/cjs/components/Course/Course.js

@@ -0,0 +1,185 @@
+"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 course_2 = require("../../utils/course");
+const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
+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`,
+    snippetAvatar: `${constants_1.PREFIX}-snippet-avatar`,
+    snippetAvatarUserProfile: `${constants_1.PREFIX}-snippet-avatar-user-profile-view`,
+    snippetImage: `${constants_1.PREFIX}-snippet-image`
+};
+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)(BaseItemButton_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.|
+ |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.|
+ 
+ *
+ * @param inProps
+ */
+function Course(inProps) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    // 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 = {}, userProfileSnippet } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "userProfileSnippet"]);
+    // STATE
+    const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.between('xs', 'md'));
+    const MAX_VISIBLE_CATEGORIES = isMobile ? 3 : 1;
+    // 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]);
+    /**
+     * 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 (scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) {
+            return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.status.joined", id: "ui.course.status.joined" });
+        }
+        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) || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) && ((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'
+                                    : scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED
+                                        ? 'warning'
+                                        : 'secondary', label: chipLabel, className: classes.chip })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_a = scCourse.created_by) === null || _a === void 0 ? void 0 : _a.deleted) && {
+                            to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
+                        }), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !((_b = scCourse.created_by) === null || _b === void 0 ? void 0 : _b.community_badge), smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCourse.name, src: (_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.avatar, className: classes.previewAvatar }) })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.previewCreator }, (!((_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.deleted) && {
+                            to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
+                        }), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.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.jsxs)(material_1.Box, Object.assign({ className: classes.previewCategory }, { children: [scCourse.categories.slice(0, MAX_VISIBLE_CATEGORIES).map((category) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: category.name }, category.id))), scCourse.categories.length > MAX_VISIBLE_CATEGORIES && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scCourse.categories.slice(MAX_VISIBLE_CATEGORIES).map((cat) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: cat.name }, cat.id))) }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: `+${scCourse.categories.length - MAX_VISIBLE_CATEGORIES}`, sx: { cursor: 'pointer' } }) })))] })), (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: (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", id: "ui.course.see" }) })) })))] })));
+    }
+    else {
+        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, 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: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
+                        (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse) || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) && ((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'
+                                : scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED
+                                    ? 'warning'
+                                    : 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!userProfileSnippet && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_f = scCourse.created_by) === null || _f === void 0 ? void 0 : _f.deleted) && {
+                        to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
+                    }), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) }))), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: userProfileSnippet ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !scCourse.hide_member_count && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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.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/CreatePlaceholder.d.ts

@@ -0,0 +1,39 @@
+import { WidgetProps } from '../Widget';
+import { CreateCourseButtonProps } from '../CreateCourseButton';
+export interface CourseSkeletonProps extends WidgetProps {
+    /**
+     * Props to spread to CreateCourseButton component
+     * @default {}
+     */
+    CreateCourseButtonComponentProps?: CreateCourseButtonProps;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+}
+/**
+ * > API documentation for the Community-JS Course Placeholder component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CourseCreatePlaceholder} 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-create-placeholder-root|Styles applied to the root element.|
+ |imageWrapper|.SCCourse-create-placeholder-image|Styles applied to the image wrapper section.|
+ |image|.SCCourse-create-placeholder-image|Styles applied to the image element.|
+ |icon|.SCCourse-create-placeholder-icon|Styles applied to the course icon element.|
+ |actions|.SCCourse-create-placeholder-actions|Styles applied to action section.|
+ *
+ */
+export default function CourseCreatePlaceholder(inProps: CourseSkeletonProps): JSX.Element;

package/lib/cjs/components/Course/CreatePlaceholder.js

@@ -0,0 +1,59 @@
+"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_core_1 = require("@selfcommunity/react-core");
+const CreateCourseButton_1 = tslib_1.__importDefault(require("../CreateCourseButton"));
+const classes = {
+    root: `${constants_1.PREFIX}-create-placeholder-root`,
+    imageWrapper: `${constants_1.PREFIX}-create-placeholder-image-wrapper`,
+    image: `${constants_1.PREFIX}-create-placeholder-image`,
+    icon: `${constants_1.PREFIX}-create-placeholder-icon`,
+    actions: `${constants_1.PREFIX}-create-placeholder-actions`
+};
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'CreatePlaceholderRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Course Placeholder component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CourseCreatePlaceholder} 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-create-placeholder-root|Styles applied to the root element.|
+ |imageWrapper|.SCCourse-create-placeholder-image|Styles applied to the image wrapper section.|
+ |image|.SCCourse-create-placeholder-image|Styles applied to the image element.|
+ |icon|.SCCourse-create-placeholder-icon|Styles applied to the course icon element.|
+ |actions|.SCCourse-create-placeholder-actions|Styles applied to action section.|
+ *
+ */
+function CourseCreatePlaceholder(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { CreateCourseButtonComponentProps = {}, className } = props, rest = tslib_1.__rest(props, ["CreateCourseButtonComponentProps", "className"]);
+    // 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.imageWrapper }, { 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.image }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon, fontSize: "large" }, { children: "courses" }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(CreateCourseButton_1.default, Object.assign({}, CreateCourseButtonComponentProps)) }))] })));
+}
+exports.default = CourseCreatePlaceholder;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { SCCourseTemplateType } from '../../types/course';
+import { WidgetProps } from '../Widget';
+import { CourseProps } from './Course';
+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;
+    /**
+     * CourseProps
+     */
+    CourseProps?: CourseProps;
+}
+/**
+ * > 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;