@selfcommunity/react-ui 0.11.0-alpha.7 → 0.11.0-alpha.71

package/lib/esm/components/ConsentSolution/ConsentSolution.js

@@ -2,20 +2,13 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useThemeProps } from '@mui/system';
-import { styled } from '@mui/material/styles';
-import { Alert, Button, Checkbox, FormControlLabel, Typography } from '@mui/material';
+import { Alert, Button, Checkbox, FormControlLabel, Typography, styled, Icon, Dialog, DialogActions, DialogContent, Slide, DialogTitle } from '@mui/material';
 import classNames from 'classnames';
-import Icon from '@mui/material/Icon';
 import { LegalPageService, UserService } from '@selfcommunity/api-services';
 import { arraysEqual, capitalize, Logger } from '@selfcommunity/utils';
 import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
 import ConsentSolutionSwitch from '../../shared/ConsentSolutionSwitch';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Slide from '@mui/material/Slide';
 import { LEGAL_POLICIES } from './../../constants/LegalPolicies';
 import ConsentSolutionSkeleton from './Skeleton';
 import { getDocumentBody, isDocumentApproved, isEmptyDocumentBody } from '../../utils/legalPages';

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

@@ -1,7 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
-import { Box, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import { Box, DialogActions, DialogContent, DialogTitle, styled, Skeleton } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,

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

@@ -1,5 +1,5 @@
 import { ConsentSolutionProps } from '../ConsentSolution';
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 export interface ConsentSolutionButtonProps extends ButtonProps {
     /**
      * Overrides or extends the styles applied to the component.

package/lib/esm/components/ConsentSolutionButton/ConsentSolutionButton.js

@@ -2,10 +2,8 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext } from 'react';
 import { useThemeProps } from '@mui/system';
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
 import ConsentSolution from '../ConsentSolution';
-import { Button } from '@mui/material';
+import { Button, styled, Dialog } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { SCUserContext } from '@selfcommunity/react-core';
 const PREFIX = 'SCConsentSolutionButton';

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

@@ -0,0 +1,97 @@
+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';
+import { CacheStrategies } from '@selfcommunity/utils';
+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;
+    /**
+     * Override default cache strategy on fetch element
+     */
+    cacheStrategy?: CacheStrategies;
+    /**
+     * 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,181 @@
+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, styled } from '@mui/material';
+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 = {}, cacheStrategy, userProfileSnippet } = props, rest = __rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "cacheStrategy", "userProfileSnippet"]);
+    // STATE
+    const { scCourse } = useSCFetchCourse(Object.assign({ id: courseId, course }, (cacheStrategy && { cacheStrategy })));
+    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, { 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,55 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CardActions, CardMedia, Icon, styled } from '@mui/material';
+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;

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

@@ -0,0 +1,72 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, CardActions, CardContent, Icon, styled, Skeleton } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { SCCourseTemplateType } from '../../types/course';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import BaseItemButton from '../../shared/BaseItemButton';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    skeletonPreviewRoot: `${PREFIX}-skeleton-preview-root`,
+    skeletonSnippetRoot: `${PREFIX}-skeleton-snippet-root`,
+    skeletonPreviewAvatar: `${PREFIX}-skeleton-preview-avatar`,
+    skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
+    skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`,
+    skeletonSnippetImage: `${PREFIX}-skeleton-snippet-image`,
+    skeletonSnippetAction: `${PREFIX}-skeleton-snippet-action`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+const SkeletonPreviewRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonPreviewRoot'
+})(() => ({}));
+const SkeletonSnippetRoot = styled(BaseItemButton, {
+    name: PREFIX,
+    slot: 'SkeletonSnippetRoot'
+})(() => ({}));
+/**
+ * > 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) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, template, skeletonsAnimation = 'wave', actions, CourseProps } = props, rest = __rest(props, ["className", "template", "skeletonsAnimation", "actions", "CourseProps"]);
+    /**
+     * Renders course object
+     */
+    let contentObj;
+    if (template === SCCourseTemplateType.PREVIEW) {
+        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "110px" }), _jsx(Skeleton, { className: classes.skeletonPreviewAvatar, variant: "rounded", animation: skeletonsAnimation })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "20%", height: 14, sx: { marginTop: 1 }, variant: "rectangular" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "40%", height: 14, sx: { marginTop: 1.5 }, variant: "rectangular" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "60%", height: 14, sx: { marginTop: 4.5 }, variant: "rectangular" })] })), _jsx(CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
+    }
+    else {
+        contentObj = (_jsx(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: _jsxs(Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? 60 : 100, height: 60 }), _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "courses" }))] })), primary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? (_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } })) : (_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 40, style: { marginBottom: 12 } })), secondary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? (_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })] })), actions: _jsx(_Fragment, { children: actions !== undefined ? (actions) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 15, width: 60 }) }))) }) }));
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className, `${PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+import Course, { CourseProps } from './Course';
+import CourseSkeleton, { CourseSkeletonProps } from './Skeleton';
+export default Course;
+export { CourseProps, CourseSkeleton, CourseSkeletonProps };

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SCCourseType } from '@selfcommunity/types';
+export interface CourseCompletedDialogProps {
+    course: SCCourseType;
+    onClose: () => void;
+}
+declare function CourseCompletedDialog(inProps: CourseCompletedDialogProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CourseCompletedDialog>;
+export default _default;

package/lib/esm/components/CourseCompletedDialog/CourseCompletedDialog.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import BaseDialog from '../../shared/BaseDialog';
+import { Button, Stack, styled, Typography, useThemeProps } from '@mui/material';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { CLAPPING } from '../../assets/courses/clapping';
+import { memo } from 'react';
+import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
+const PREFIX = 'SCCourseCompletedDialog';
+const classes = {
+    root: `${PREFIX}-root`,
+    wrapper: `${PREFIX}-wrapper`,
+    title: `${PREFIX}-title`,
+    descriptionPt1: `${PREFIX}-description-pt1`,
+    descriptionPt2: `${PREFIX}-description-pt2`
+};
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function CourseCompletedDialog(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { course, onClose } = props;
+    // CONTEXTS
+    const scRoutingContext = useSCRouting();
+    // HOOKS
+    const intl = useIntl();
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: onClose, actions: _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}), size: "medium", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.completedDialog.btn.label", defaultMessage: "ui.course.completedDialog.btn.label" }) })) })), className: classes.root }, { children: _jsxs(Stack, Object.assign({ className: classes.wrapper }, { children: [_jsx("img", { src: CLAPPING, alt: intl.formatMessage({ id: 'ui.course.completedDialog.title', defaultMessage: 'ui.course.completedDialog.title' }), width: 100, height: 100 }), _jsx(Typography, Object.assign({ variant: "h2", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.course.completedDialog.title", defaultMessage: "ui.course.completedDialog.title" }) })), _jsx(Typography, Object.assign({ variant: "h4", className: classes.descriptionPt1 }, { children: _jsx(FormattedMessage, { id: "ui.course.completedDialog.description.pt1", defaultMessage: "ui.course.completedDialog.description.pt1" }) })), _jsx(Typography, Object.assign({ variant: "h4", className: classes.descriptionPt2 }, { children: intl.formatMessage({ id: 'ui.course.completedDialog.description.pt2', defaultMessage: 'ui.course.completedDialog.description.pt2' }, {
+                        courseName: course.name,
+                        span: (chunks) => (_jsx(Typography, Object.assign({ component: "span", variant: "inherit", color: "primary" }, { children: chunks })))
+                    }) }))] })) })));
+}
+export default memo(CourseCompletedDialog);

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

@@ -0,0 +1,3 @@
+import CourseCompletedDialog, { CourseCompletedDialogProps } from './CourseCompletedDialog';
+export default CourseCompletedDialog;
+export { CourseCompletedDialogProps };

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

@@ -0,0 +1,2 @@
+import CourseCompletedDialog from './CourseCompletedDialog';
+export default CourseCompletedDialog;