@selfcommunity/react-ui 0.10.2-courses.101 → 0.10.2-courses.102

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@selfcommunity/react-ui",
-	"version": "0.10.2-courses.101+b7b188f46",
+	"version": "0.10.2-courses.102+f500754c2",
 	"description": "React UI Components to integrate a Community created with SelfCommunity Platform.",
 	"author": "SelfCommunity <https://www.selfcommunity.com>",
 	"homepage": "https://www.selfcommunity.com",
@@ -96,12 +96,12 @@
 		"@rpldy/upload-drop-zone": "^1.7.1",
 		"@rpldy/upload-preview": "^1.7.1",
 		"@rpldy/uploady": "^1.7.1",
-		"@selfcommunity/api-services": "0.6.4-courses.149+b7b188f46",
-		"@selfcommunity/react-core": "0.6.4-courses.103+b7b188f46",
-		"@selfcommunity/react-i18n": "0.7.4-courses.103+b7b188f46",
-		"@selfcommunity/react-theme-default": "0.4.2-courses.101+b7b188f46",
-		"@selfcommunity/types": "0.7.4-courses.149+b7b188f46",
-		"@selfcommunity/utils": "0.2.61-courses.149+b7b188f46",
+		"@selfcommunity/api-services": "0.6.4-courses.150+f500754c2",
+		"@selfcommunity/react-core": "0.6.4-courses.104+f500754c2",
+		"@selfcommunity/react-i18n": "0.7.4-courses.104+f500754c2",
+		"@selfcommunity/react-theme-default": "0.4.2-courses.102+f500754c2",
+		"@selfcommunity/types": "0.7.4-courses.150+f500754c2",
+		"@selfcommunity/utils": "0.2.61-courses.150+f500754c2",
 		"@types/classnames": "^2.3.1",
 		"@types/sortablejs": "1",
 		"autosuggest-highlight": "^3.3.4",
@@ -196,5 +196,5 @@
 	"engines": {
 		"node": ">=20.x"
 	},
-	"gitHead": "b7b188f46cb8b91d5e01bd886c102449ccf89e34"
+	"gitHead": "f500754c2a9dfa5195a3fec9117793e0dace932e"
 }

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

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

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

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

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

@@ -1,8 +0,0 @@
-import { SCCourseType } from '@selfcommunity/types';
-export interface LessonCompletedDialogProps {
-    course: SCCourseType;
-    open: boolean;
-    onAction?: () => void;
-    onClose?: () => void;
-}
-export default function LessonCompletedDialog(inProps: LessonCompletedDialogProps): JSX.Element;

package/lib/cjs/components/LessonCompletedDialog/LessonCompletedDialog.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
-const material_1 = require("@mui/material");
-const react_intl_1 = require("react-intl");
-const clapping_1 = require("../../assets/courses/clapping");
-const PREFIX = 'SCLessonCompletedDialog';
-const classes = {
-    root: `${PREFIX}-root`,
-    wrapper: `${PREFIX}-wrapper`,
-    title: `${PREFIX}-title`,
-    descriptionPt1: `${PREFIX}-description-pt1`,
-    descriptionPt2: `${PREFIX}-description-pt2`
-};
-const Root = (0, material_1.styled)(BaseDialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
-})(() => ({}));
-function LessonCompletedDialog(inProps) {
-    // PROPS
-    const props = (0, material_1.useThemeProps)({
-        props: inProps,
-        name: PREFIX
-    });
-    const { course, open, onAction, onClose } = props;
-    // HOOKS
-    const intl = (0, react_intl_1.useIntl)();
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, open: open, onClose: onClose, actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: onAction, size: "medium", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.completedDialog.btn.label", defaultMessage: "ui.course.completedDialog.btn.label" }) })) })), className: classes.root }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.wrapper }, { children: [(0, jsx_runtime_1.jsx)("img", { src: clapping_1.CLAPPING, alt: intl.formatMessage({ id: 'ui.course.completedDialog.title', defaultMessage: 'ui.course.completedDialog.title' }), width: 100, height: 100 }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h2", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.completedDialog.title", defaultMessage: "ui.course.completedDialog.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.descriptionPt1 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.completedDialog.description.pt1", defaultMessage: "ui.course.completedDialog.description.pt1" }) })), (0, jsx_runtime_1.jsx)(material_1.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) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "inherit", color: "primary" }, { children: chunks })))
-                    }) }))] })) })));
-}
-exports.default = LessonCompletedDialog;

package/lib/cjs/components/LessonCompletedDialog/index.d.ts

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

package/lib/cjs/components/LessonCompletedDialog/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const LessonCompletedDialog_1 = tslib_1.__importDefault(require("./LessonCompletedDialog"));
-exports.default = LessonCompletedDialog_1.default;

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

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

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

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

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

@@ -1,8 +0,0 @@
-import { SCCourseType } from '@selfcommunity/types';
-export interface LessonCompletedDialogProps {
-    course: SCCourseType;
-    open: boolean;
-    onAction?: () => void;
-    onClose?: () => void;
-}
-export default function LessonCompletedDialog(inProps: LessonCompletedDialogProps): JSX.Element;

package/lib/esm/components/LessonCompletedDialog/LessonCompletedDialog.js

@@ -1,32 +0,0 @@
-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';
-const PREFIX = 'SCLessonCompletedDialog';
-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
-})(() => ({}));
-export default function LessonCompletedDialog(inProps) {
-    // PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
-    const { course, open, onAction, onClose } = props;
-    // HOOKS
-    const intl = useIntl();
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, open: open, onClose: onClose, actions: _jsx(Button, Object.assign({ onClick: onAction, 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 })))
-                    }) }))] })) })));
-}

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

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

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

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