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

package/lib/esm/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/esm/components/ComposerIconButton/ComposerIconButton.js

@@ -12,6 +12,7 @@ import classNames from 'classnames';
 import GroupForm from '../GroupForm';
 import CreateLiveStreamDialog from '../CreateLiveStreamDialog';
 import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
+import CourseFormDialog from '../CourseFormDialog';
 const PREFIX = 'SCComposerIconButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -49,16 +50,17 @@ const MenuRoot = styled(Menu, {
  * @param inProps
  */
 export default React.forwardRef(function ComposerIconButton(inProps, ref) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = __rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
+    const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, CourseFormDialogComponentProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = __rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "CourseFormDialogComponentProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
     // STATE
     const [openComposer, setOpenComposer] = useState(false);
     const [openPopper, setOpenPopper] = useState(false);
+    const [openCreateCourse, setOpenCreateCourse] = useState(false);
     const [openCreateGroup, setOpenCreateGroup] = useState(false);
     const [openCreateEvent, setOpenCreateEvent] = useState(false);
     const [openCreateLiveStream, setOpenCreateLiveStream] = useState(false);
@@ -84,9 +86,10 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const { preferences } = useSCPreferences();
     // MEMOS
-    const canCreateGroup = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
-    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
-    const canCreateLive = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.permission]);
+    const canCreateCourse = 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 = 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 = 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 = 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 = useMemo(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
     const isFreeTrialTier = useMemo(() => preferences &&
         SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
@@ -98,6 +101,19 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
     }, [listItem]);
     // EFFECTS
     useEffect(() => {
+        if (canCreateCourse) {
+            setListItem((prev) => [
+                ...prev,
+                {
+                    icon: 'courses',
+                    text: 'ui.composerIconButton.list.course',
+                    onClick: () => {
+                        setOpenCreateCourse(true);
+                        setOpenPopper(false);
+                    }
+                }
+            ]);
+        }
         if (canCreateGroup) {
             setListItem((prev) => [
                 ...prev,
@@ -137,7 +153,7 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
                 }
             ]);
         }
-    }, [canCreateGroup, setListItem]);
+    }, [canCreateCourse, canCreateGroup, canCreateEvent, canCreateLiveStream, setListItem, setOpenPopper, setOpenCreateCourse, setOpenCreateGroup, setOpenCreateEvent, setOpenCreateLiveStream]);
     // HANDLERS
     const handleClick = useCallback((event) => {
         if (scUserContext.user) {
@@ -148,7 +164,7 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
                 });
             }
             else {
-                if (canCreateGroup || canCreateEvent || canCreateLiveStream) {
+                if (canCreateCourse || canCreateGroup || canCreateEvent || canCreateLiveStream) {
                     setOpenPopper(true);
                 }
                 else {
@@ -160,7 +176,17 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
             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 = useCallback(() => {
         setOpenComposer(false);
         onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -168,6 +194,9 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
     const handleCloseMenu = useCallback(() => {
         setOpenPopper(false);
     }, [setOpenPopper]);
+    const handleCloseCreateCourse = useCallback(() => {
+        setOpenCreateCourse(false);
+    }, [setOpenCreateCourse]);
     const handleCloseCreateGroup = useCallback(() => {
         setOpenCreateGroup(false);
     }, [setOpenCreateGroup]);
@@ -188,5 +217,5 @@ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
     return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, ref: (innerRef) => {
                     popperRef.current = innerRef;
                     return ref;
-                } }, rest, { children: _jsx(Icon, { children: "add_circle_outline" }) })), openComposer && _jsx(Composer, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : (_jsx(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateGroup && _jsx(GroupForm, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && _jsx(EventFormDialog, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && _jsx(CreateLiveStreamDialog, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
+                } }, rest, { children: _jsx(Icon, { children: "add_circle_outline" }) })), openComposer && _jsx(Composer, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : (_jsx(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateCourse && _jsx(CourseFormDialog, Object.assign({ open: true, onClose: handleCloseCreateCourse }, CourseFormDialogComponentProps)), openCreateGroup && _jsx(GroupForm, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && _jsx(EventFormDialog, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && _jsx(CreateLiveStreamDialog, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
 });

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

@@ -0,0 +1,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/esm/components/Course/Course.js

@@ -0,0 +1,182 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Chip, Icon, LinearProgress, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Link, SCRoutes, useSCFetchCourse, useSCRouting } from '@selfcommunity/react-core';
+import { SCCourseJoinStatusType } from '@selfcommunity/types';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { SCCourseTemplateType } from '../../types/course';
+import CourseParticipantsButton from '../CourseParticipantsButton';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import CourseSkeleton from './Skeleton';
+import { isCourseCompleted, isCourseNew } from '../../utils/course';
+import UserAvatar from '../../shared/UserAvatar';
+import BaseItemButton from '../../shared/BaseItemButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    chip: `${PREFIX}-chip`,
+    previewRoot: `${PREFIX}-preview-root`,
+    previewActions: `${PREFIX}-preview-actions`,
+    previewAvatar: `${PREFIX}-preview-avatar`,
+    previewCategory: `${PREFIX}-preview-category`,
+    previewCompletedStatus: `${PREFIX}-preview-completed-status`,
+    previewContent: `${PREFIX}-preview-content`,
+    previewCreator: `${PREFIX}-preview-creator`,
+    previewImage: `${PREFIX}-preview-image`,
+    previewImageWrapper: `${PREFIX}-preview-image-wrapper`,
+    previewInfo: `${PREFIX}-preview-info`,
+    previewName: `${PREFIX}-preview-name`,
+    previewNameWrapper: `${PREFIX}-preview-name-wrapper`,
+    previewProgress: `${PREFIX}-preview-progress`,
+    previewProgressBar: `${PREFIX}-preview-progress-bar`,
+    snippetRoot: `${PREFIX}-snippet-root`,
+    snippetAvatar: `${PREFIX}-snippet-avatar`,
+    snippetAvatarUserProfile: `${PREFIX}-snippet-avatar-user-profile-view`,
+    snippetImage: `${PREFIX}-snippet-image`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+const PreviewRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'PreviewRoot',
+    overridesResolver: (_props, styles) => styles.previewRoot
+})(() => ({}));
+const SnippetRoot = styled(BaseItemButton, {
+    name: PREFIX,
+    slot: 'SnippetRoot',
+    overridesResolver: (_props, styles) => styles.snippetRoot
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Course component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a course item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Course)
+
+ #### Import
+
+ ```jsx
+ import {course} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourse` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourses-root|Styles applied to the root element.|
+ |chip|.SCCourses-chip|Styles applied to the chip element.|
+ |previewRoot|.SCCourses-preview-root|Styles applied to the root element in the preview template.|
+ |previewActions|.SCCourses-preview-actions|Styles applied to the actions section in the preview template.|
+ |previewAvatar|.SCCourses-preview-avatar|Styles applied to the avatar in the preview template.|
+ |previewCategory|.SCCourses-preview-category|Styles applied to the category element in the preview template.|
+ |previewCompletedStatus|.SCCourses-preview-completed-status|Styles applied to indicate the completed status in the preview template.|
+ |previewContent|.SCCourses-preview-content|Styles applied to the content section in the preview template.|
+ |previewCreator|.SCCourses-preview-creator|Styles applied to the creator element in the preview template.|
+ |previewImage|.SCCourses-preview-image|Styles applied to the image in the preview template.|
+ |previewImageWrapper|.SCCourses-preview-image-wrapper|Styles applied to the wrapper of the image in the preview template.|
+ |previewInfo|.SCCourses-preview-info|Styles applied to the info section in the preview template.|
+ |previewName|.SCCourses-preview-name|Styles applied to the name element in the preview template.|
+ |previewNameWrapper|.SCCourses-preview-name-wrapper|Styles applied to the name wrapper in the preview template.|
+ |previewProgress|.SCCourses-preview-progress|Styles applied to indicate the progress section in the preview template.|
+ |previewProgressBar|.SCCourses-preview-progress-bar|Styles applied to the progress bar in the preview template.|
+ |snippetRoot|.SCCourses-snippet-root|Styles applied to the root element in the snippet template.|
+ |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) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {}, userProfileSnippet } = props, rest = __rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "userProfileSnippet"]);
+    // STATE
+    const { scCourse } = useSCFetchCourse({ id: courseId, course });
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.between('xs', 'md'));
+    const MAX_VISIBLE_CATEGORIES = isMobile ? 3 : 1;
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    const isCourseAdmin = useMemo(() => scCourse && (scCourse.join_status === SCCourseJoinStatusType.CREATOR || scCourse.join_status === SCCourseJoinStatusType.MANAGER), [scCourse]);
+    /**
+     * Renders course object
+     */
+    if (!scCourse) {
+        return _jsx(CourseSkeleton, Object.assign({ template: template }, CourseSkeletonComponentProps, rest, { actions: actions }));
+    }
+    const renderProgress = () => {
+        if (isCourseCompleted(scCourse)) {
+            return (_jsxs(Box, Object.assign({ className: classes.previewCompletedStatus }, { children: [_jsx(Icon, Object.assign({ color: "success" }, { children: "circle_checked" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.completed", id: "ui.course.completed" }) }))] })));
+        }
+        else if (scCourse.join_status === SCCourseJoinStatusType.JOINED) {
+            return (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.course.completion.percentage", defaultMessage: "ui.course.completion.percentage", values: { percentage: `${Math.round(scCourse.user_completion_rate)}%` } }) }), _jsx(LinearProgress, { className: classes.previewProgressBar, variant: "determinate", color: "primary", value: scCourse.user_completion_rate })] }));
+        }
+        else if (isCourseAdmin) {
+            return _jsx(CourseParticipantsButton, Object.assign({ course: scCourse }, CourseParticipantsButtonComponentProps));
+        }
+    };
+    const chipLabel = (() => {
+        if (isCourseAdmin) {
+            return scCourse.privacy ? (_jsx(FormattedMessage, { defaultMessage: "ui.course.status.published", id: "ui.course.status.published" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.course.status.draft", id: "ui.course.status.draft" }));
+        }
+        else if (isCourseCompleted(scCourse)) {
+            return _jsx(FormattedMessage, { defaultMessage: "ui.course.status.completed", id: "ui.course.status.completed" });
+        }
+        else if (scCourse.join_status === SCCourseJoinStatusType.JOINED) {
+            return _jsx(FormattedMessage, { defaultMessage: "ui.course.status.joined", id: "ui.course.status.joined" });
+        }
+        else if (isCourseNew(scCourse)) {
+            return _jsx(FormattedMessage, { defaultMessage: "ui.course.status.new", id: "ui.course.status.new" });
+        }
+        return null;
+    })();
+    /**
+     * Renders course object
+     */
+    let contentObj;
+    if (template === SCCourseTemplateType.PREVIEW) {
+        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scCourse.image_medium, alt: scCourse.name, className: classes.previewImage }), (isCourseAdmin || isCourseCompleted(scCourse) || isCourseNew(scCourse) || scCourse.join_status === SCCourseJoinStatusType.JOINED) && (_jsx(Chip, { size: "small", component: "div", color: isCourseCompleted(scCourse) || (isCourseAdmin && scCourse.privacy)
+                                ? 'primary'
+                                : isCourseAdmin && !scCourse.privacy
+                                    ? 'default'
+                                    : scCourse.join_status === SCCourseJoinStatusType.JOINED
+                                        ? 'warning'
+                                        : 'secondary', label: chipLabel, className: classes.chip })), _jsx(Link, Object.assign({}, (!((_a = scCourse.created_by) === null || _a === void 0 ? void 0 : _a.deleted) && {
+                            to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
+                        }), { children: _jsx(UserAvatar, Object.assign({ hide: !((_b = scCourse.created_by) === null || _b === void 0 ? void 0 : _b.community_badge), smaller: true }, { children: _jsx(Avatar, { alt: scCourse.name, src: (_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.avatar, className: classes.previewAvatar }) })) }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(Link, Object.assign({ className: classes.previewCreator }, (!((_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.deleted) && {
+                            to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
+                        }), { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), _jsxs(Typography, Object.assign({ className: classes.previewInfo }, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), _jsxs(Box, Object.assign({ className: classes.previewCategory }, { children: [scCourse.categories.slice(0, MAX_VISIBLE_CATEGORIES).map((category) => (_jsx(Chip, { size: "small", label: category.name }, category.id))), scCourse.categories.length > MAX_VISIBLE_CATEGORIES && (_jsx(Tooltip, Object.assign({ title: _jsx(_Fragment, { children: scCourse.categories.slice(MAX_VISIBLE_CATEGORIES).map((cat) => (_jsx(Box, { children: cat.name }, cat.id))) }) }, { children: _jsx(Chip, { size: "small", label: `+${scCourse.categories.length - MAX_VISIBLE_CATEGORIES}`, sx: { cursor: 'pointer' } }) })))] })), _jsx(Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
+    }
+    else {
+        contentObj = (_jsx(SnippetRoot, { ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, elevation: 0, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
+                        (isCourseAdmin || isCourseCompleted(scCourse) || isCourseNew(scCourse) || scCourse.join_status === SCCourseJoinStatusType.JOINED) && (_jsx(Chip, { size: "small", component: "div", color: isCourseCompleted(scCourse) || (isCourseAdmin && scCourse.privacy)
+                            ? 'primary'
+                            : isCourseAdmin && !scCourse.privacy
+                                ? 'default'
+                                : scCourse.join_status === SCCourseJoinStatusType.JOINED
+                                    ? 'warning'
+                                    : 'secondary', label: chipLabel, className: classes.chip }))] })), primary: _jsxs(_Fragment, { children: [!userProfileSnippet && (_jsx(Link, Object.assign({}, (!((_f = scCourse.created_by) === null || _f === void 0 ? void 0 : _f.deleted) && {
+                        to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
+                    }), { children: _jsx(Typography, Object.assign({ component: "span" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) }))), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: _jsx(_Fragment, { children: userProfileSnippet ? (_jsx(_Fragment, { children: !scCourse.hide_member_count && (_jsx(FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : (_jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })) }), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) }))) }));
+    }
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest, { children: contentObj })));
+}

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

@@ -0,0 +1,56 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CardActions, CardMedia, Icon } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
+import CreateCourseButton from '../CreateCourseButton';
+const classes = {
+    root: `${PREFIX}-create-placeholder-root`,
+    imageWrapper: `${PREFIX}-create-placeholder-image-wrapper`,
+    image: `${PREFIX}-create-placeholder-image`,
+    icon: `${PREFIX}-create-placeholder-icon`,
+    actions: `${PREFIX}-create-placeholder-actions`
+};
+const Root = styled(Widget, {
+    name: 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.|
+ *
+ */
+export default function CourseCreatePlaceholder(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { CreateCourseButtonComponentProps = {}, className } = props, rest = __rest(props, ["CreateCourseButtonComponentProps", "className"]);
+    // HOOK
+    const { preferences } = useSCPreferences();
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.imageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: `${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), _jsx(Icon, Object.assign({ className: classes.icon, fontSize: "large" }, { children: "courses" }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(CreateCourseButton, Object.assign({}, CreateCourseButtonComponentProps)) }))] })));
+}

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