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

package/lib/esm/components/CourseDashboard/Teacher/Students.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useReducer } from 'react';
+import { SCOPE_SC_UI } from '../../../constants/Errors';
+import { CacheStrategies, Logger } from '@selfcommunity/utils';
+import CourseUsersTable from '../../../shared/CourseUsersTable';
+import { CourseService } from '@selfcommunity/api-services';
+import { SCCache, useSCUser } from '@selfcommunity/react-core';
+import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../../utils/widget';
+import { DEFAULT_PAGINATION_OFFSET } from '../../../constants/Pagination';
+const headerCells = [
+    {
+        id: 'ui.course.dashboard.teacher.tab.students.table.header.name'
+    },
+    {
+        id: 'ui.course.dashboard.teacher.tab.students.table.header.progress'
+    },
+    {
+        id: 'ui.course.dashboard.teacher.tab.students.table.header.registration'
+    },
+    {
+        id: 'ui.course.dashboard.teacher.tab.students.table.header.latestActivity'
+    },
+    {}
+];
+function Students(props) {
+    // PROPS
+    const { course, endpointQueryParams = { limit: 6, offset: DEFAULT_PAGINATION_OFFSET } } = props;
+    // STATES
+    const [state, dispatch] = useReducer(dataWidgetReducer, {
+        isLoadingNext: false,
+        next: null,
+        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_PARTECIPANTS_COURSES_STATE_CACHE_PREFIX_KEY, course === null || course === void 0 ? void 0 : course.id),
+        cacheStrategy: CacheStrategies.CACHE_FIRST,
+        visibleItems: endpointQueryParams.limit
+    }, stateWidgetInitializer);
+    // HOOKS
+    const scUserContext = useSCUser();
+    // CALLBACKS
+    const _init = useCallback(() => {
+        if (!state.initialized && !state.isLoadingNext) {
+            dispatch({ type: actionWidgetTypes.LOADING_NEXT });
+            CourseService.getCourseDashboardUsers(course.id, Object.assign({}, endpointQueryParams))
+                .then((payload) => {
+                dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
+            })
+                .catch((error) => {
+                dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+    }, [state.isLoadingNext, state.initialized, course, dispatch]);
+    // EFFECTS
+    useEffect(() => {
+        let _t;
+        if (scUserContext.user && course) {
+            _t = setTimeout(_init);
+            return () => {
+                clearTimeout(_t);
+            };
+        }
+    }, [scUserContext.user, course, _init]);
+    return (_jsx(CourseUsersTable, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: "dashboard", emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" }));
+}
+export default memo(Students);

package/lib/esm/components/CourseDashboard/Teacher.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+import { CourseDashboardPage } from './types';
+import { SCCourseType } from '@selfcommunity/types';
+export interface TeacherCourseDashboardProps {
+    courseId?: number;
+    course?: SCCourseType;
+    page: CourseDashboardPage;
+    onTabChange: (page: CourseDashboardPage) => void;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+    [p: string]: any;
+}
+declare function Teacher(inProps: TeacherCourseDashboardProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Teacher>;
+export default _default;

package/lib/esm/components/CourseDashboard/Teacher.js

@@ -0,0 +1,56 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, styled, Tab, Typography, useThemeProps } from '@mui/material';
+import { PREFIX } from './constants';
+import HeaderCourseDashboard from './Header';
+import { memo, useCallback, useState } from 'react';
+import { TabContentEnum } from './types';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import InfoCourseDashboard from './Teacher/Info';
+import { TabContext, TabList, TabPanel } from '@mui/lab';
+import Students from './Teacher/Students';
+import Comments from './Teacher/Comments';
+import { useSCFetchCourse } from '@selfcommunity/react-core';
+import { CourseInfoViewType } from '@selfcommunity/api-services';
+const classes = {
+    root: `${PREFIX}-root`,
+    infoWrapper: `${PREFIX}-info-wrapper`,
+    tabList: `${PREFIX}-tab-list`,
+    tab: `${PREFIX}-tab`,
+    tabPanel: `${PREFIX}-tab-panel`
+};
+const TAB_DATA = [
+    {
+        label: 'ui.course.dashboard.teacher.tab.students',
+        value: TabContentEnum.STUDENTS
+    },
+    {
+        label: 'ui.course.dashboard.teacher.tab.comments',
+        value: TabContentEnum.COMMENTS
+    }
+];
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function Teacher(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { courseId, course, page, onTabChange, className } = props, rest = __rest(props, ["courseId", "course", "page", "onTabChange", "className"]);
+    // STATES
+    const [tabValue, setTabValue] = useState(TabContentEnum[`${page.toUpperCase()}`]);
+    // HOOKS
+    const { scCourse } = useSCFetchCourse({ id: courseId, course, params: { view: CourseInfoViewType.DASHBOARD } });
+    // HANDLERS
+    const handleTabChange = useCallback((_evt, newTabValue) => {
+        setTabValue(newTabValue);
+        onTabChange(TabContentEnum[newTabValue]);
+    }, [setTabValue]);
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse, hasAction: true }), _jsxs(Stack, Object.assign({ className: classes.infoWrapper }, { children: [_jsx(InfoCourseDashboard, { title: "ui.course.dashboard.teacher.info.students", course: scCourse, position: "first" }), _jsx(InfoCourseDashboard, { title: "ui.course.dashboard.teacher.info.completion", course: scCourse, position: "second" })] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "standard", centered: true }, { children: TAB_DATA.map((data, i) => (_jsx(Tab, { label: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classes.tab }, i))) })), _jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: TabContentEnum.STUDENTS }, { children: _jsx(Students, { course: scCourse }) })), _jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: TabContentEnum.COMMENTS }, { children: _jsx(Comments, { course: scCourse }) }))] }))] })));
+}
+export default memo(Teacher);

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

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

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TeacherCourseDashboardProps } from './Teacher';
+import { StudentCourseDashboardProps } from './Student';
+declare const _default: {
+    Teacher: import("react").MemoExoticComponent<(inProps: TeacherCourseDashboardProps) => JSX.Element>;
+    Student: import("react").MemoExoticComponent<(inProps: StudentCourseDashboardProps) => JSX.Element>;
+};
+export default _default;
+export { TeacherCourseDashboardProps, StudentCourseDashboardProps };

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

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

package/lib/esm/components/CourseDashboard/types.d.ts

@@ -0,0 +1,24 @@
+export declare type CourseDashboardPage = 'students' | 'comments';
+export declare type TabContentType = '1' | '2';
+export declare enum TabContentEnum {
+    STUDENTS = "1",
+    COMMENTS = "2"
+}
+declare type LessonsUserType = {
+    id: number;
+    name: string;
+    avatar: string;
+    date: string;
+    comment: string;
+};
+declare type CommentsLessonType = {
+    id: number;
+    name: string;
+    users: LessonsUserType[];
+};
+export declare type CommentsType = {
+    total: number;
+    next: boolean;
+    lessons: CommentsLessonType[];
+};
+export {};

package/lib/esm/components/CourseDashboard/types.js

@@ -0,0 +1,5 @@
+export var TabContentEnum;
+(function (TabContentEnum) {
+    TabContentEnum["STUDENTS"] = "1";
+    TabContentEnum["COMMENTS"] = "2";
+})(TabContentEnum || (TabContentEnum = {}));

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

@@ -0,0 +1,72 @@
+import { BoxProps } from '@mui/material';
+import { SCCourseType } from '@selfcommunity/types';
+export declare enum SCCourseFormStepType {
+    ONE = "one",
+    TWO = "two"
+}
+export interface CourseFormProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onSuccess?: (data: SCCourseType) => void;
+    /**
+     * step name
+     * @default 'one'
+     */
+    step: SCCourseFormStepType;
+    /**
+     * On error callback function
+     * @default null
+     */
+    onError?: (error: any) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS  Course Form component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCourseForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ | root                  | .SCCourseForm-root            | Styles applied to the root element.            |
+ | actions               | .SCCourseForm-actions         | Styles applied to the actions element.         |
+ | card                  | .SCCourseForm-card            | Styles applied to the card element.            |
+ | content               | .SCCourseForm-content         | Styles applied to the content element.         |
+ | cover                 | .SCCourseForm-cover           | Styles applied to the cover element.           |
+ | description           | .SCCourseForm-description     | Styles applied to the description element.     |
+ | error                 | .SCCourseForm-error           | Styles applied to the error element.           |
+ | form                  | .SCCourseForm-form            | Styles applied to the form element.            |
+ | frequency             | .SCCourseForm-frequency       | Styles applied to the frequency element.       |
+ | name                  | .SCCourseForm-name            | Styles applied to the name element.            |
+ | privacySection        | .SCCourseForm-privacy-section | Styles applied to the privacy section.         |
+ | privacySectionInfo    | .SCCourseForm-privacy-section-info | Styles applied to the privacy section info. |
+ | selected              | .SCCourseForm-selected        | Styles applied to the selected element.        |
+ | stepOne               | .SCCourseForm-step-one        | Styles applied to the step-one element.        |
+ | stepTwo               | .SCCourseForm-step-two        | Styles applied to the step-two element.        |
+ | title                 | .SCCourseForm-title           | Styles applied to the title element.           |
+
+ * @param inProps
+ */
+export default function CourseForm(inProps: CourseFormProps): JSX.Element;

package/lib/esm/components/CourseForm/CourseForm.js

@@ -0,0 +1,257 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LoadingButton } from '@mui/lab';
+import { Box, CardActionArea, Card, CardContent, FormGroup, Paper, TextField, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { CourseService, formatHttpErrorCode } from '@selfcommunity/api-services';
+import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
+import { SCCourseTypologyType } from '@selfcommunity/types';
+import { Logger } from '@selfcommunity/utils';
+import classNames from 'classnames';
+import PubSub from 'pubsub-js';
+import { useCallback, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
+import { PREFIX } from './constants';
+import UploadCourseCover from './UploadCourseCover';
+import { COURSE_DESCRIPTION_MAX_LENGTH, COURSE_TITLE_MAX_LENGTH } from '../../constants/Course';
+import CategoryAutocomplete from '../CategoryAutocomplete';
+import CourseEdit from './Edit';
+const messages = defineMessages({
+    name: {
+        id: 'ui.courseForm.name.placeholder',
+        defaultMessage: 'ui.courseForm.name.placeholder'
+    },
+    description: {
+        id: 'ui.courseForm.description.placeholder',
+        defaultMessage: 'ui.courseForm.description.placeholder'
+    },
+    categoryEmpty: {
+        id: 'ui.courseForm.category.placeholder.empty',
+        defaultMessage: 'ui.courseForm.category.placeholder.empty'
+    },
+    category: {
+        id: 'ui.courseForm.category.placeholder',
+        defaultMessage: 'ui.courseForm.category.placeholder'
+    }
+});
+const classes = {
+    root: `${PREFIX}-root`,
+    actions: `${PREFIX}-actions`,
+    card: `${PREFIX}-card`,
+    content: `${PREFIX}-content`,
+    cover: `${PREFIX}-cover`,
+    description: `${PREFIX}-description`,
+    error: `${PREFIX}-error`,
+    form: `${PREFIX}-form`,
+    frequency: `${PREFIX}-frequency`,
+    name: `${PREFIX}-name`,
+    privacySection: `${PREFIX}-privacy-section`,
+    privacySectionInfo: `${PREFIX}-privacy-section-info`,
+    selected: `${PREFIX}-selected`,
+    stepOne: `${PREFIX}-step-one`,
+    stepTwo: `${PREFIX}-step-two`,
+    title: `${PREFIX}-title`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+export var SCCourseFormStepType;
+(function (SCCourseFormStepType) {
+    SCCourseFormStepType["ONE"] = "one";
+    SCCourseFormStepType["TWO"] = "two";
+})(SCCourseFormStepType || (SCCourseFormStepType = {}));
+/**
+ *> API documentation for the Community-JS  Course Form component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCourseForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ | root                  | .SCCourseForm-root            | Styles applied to the root element.            |
+ | actions               | .SCCourseForm-actions         | Styles applied to the actions element.         |
+ | card                  | .SCCourseForm-card            | Styles applied to the card element.            |
+ | content               | .SCCourseForm-content         | Styles applied to the content element.         |
+ | cover                 | .SCCourseForm-cover           | Styles applied to the cover element.           |
+ | description           | .SCCourseForm-description     | Styles applied to the description element.     |
+ | error                 | .SCCourseForm-error           | Styles applied to the error element.           |
+ | form                  | .SCCourseForm-form            | Styles applied to the form element.            |
+ | frequency             | .SCCourseForm-frequency       | Styles applied to the frequency element.       |
+ | name                  | .SCCourseForm-name            | Styles applied to the name element.            |
+ | privacySection        | .SCCourseForm-privacy-section | Styles applied to the privacy section.         |
+ | privacySectionInfo    | .SCCourseForm-privacy-section-info | Styles applied to the privacy section info. |
+ | selected              | .SCCourseForm-selected        | Styles applied to the selected element.        |
+ | stepOne               | .SCCourseForm-step-one        | Styles applied to the step-one element.        |
+ | stepTwo               | .SCCourseForm-step-two        | Styles applied to the step-two element.        |
+ | title                 | .SCCourseForm-title           | Styles applied to the title element.           |
+
+ * @param inProps
+ */
+export default function CourseForm(inProps) {
+    var _a, _b, _c;
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, onSuccess, onError, course = null, step = SCCourseFormStepType.ONE } = props, rest = __rest(props, ["className", "onSuccess", "onError", "course", "step"]);
+    // INTL
+    const intl = useIntl();
+    const initialFieldState = {
+        imageOriginal: (course === null || course === void 0 ? void 0 : course.image_bigger) || '',
+        imageOriginalFile: '',
+        name: (course === null || course === void 0 ? void 0 : course.name) || '',
+        type: (course === null || course === void 0 ? void 0 : course.type) || '',
+        description: course ? course.description : '',
+        categories: course ? course.categories : [],
+        privacy: course ? course.privacy : '',
+        isSubmitting: false
+    };
+    // STATE
+    const [field, setField] = useState(initialFieldState);
+    const [_step, setStep] = useState(step);
+    const [error, setError] = useState({});
+    // PREFERENCES
+    const scPreferences = useSCPreferences();
+    const _backgroundCover = Object.assign({}, (field.imageOriginal
+        ? { background: `url('${field.imageOriginal}') center / cover` }
+        : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
+    const handleChangeCover = useCallback((cover) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginal']: reader.result })));
+        };
+        reader.readAsDataURL(cover);
+        if (error.imageOriginalError) {
+            delete error.imageOriginalError;
+            setError(error);
+        }
+    }, [error]);
+    /**
+     * Handles step change
+     * @param newStep
+     */
+    const handleChangeStep = (newStep) => {
+        setStep(newStep);
+    };
+    /**
+     * Formats categories object to a specific format needed in the form body
+     * @param data
+     */
+    function convertToCategoriesObject(data) {
+        const categories = {};
+        data.forEach((category, index) => {
+            categories[`categories[${index}]`] = category.id;
+        });
+        return categories;
+    }
+    /**
+     * Handle change category
+     * @param categories
+     */
+    const handleOnChangeCategory = (categories) => {
+        const categoriesIds = categories.map((item) => item.id);
+        setField((prev) => (Object.assign(Object.assign({}, prev), { ['categories']: course ? categoriesIds : convertToCategoriesObject(categories) })));
+    };
+    /**
+     * Notify when a group info changed
+     * @param data
+     */
+    const notifyChanges = useCallback((data) => {
+        if (course) {
+            // Edit group
+            PubSub.publish(`${SCTopicType.COURSE}.${SCCourseEventType.EDIT}`, data);
+        }
+        else {
+            // Create group
+            PubSub.publish(`${SCTopicType.COURSE}.${SCCourseEventType.CREATE}`, data);
+        }
+    }, [course]);
+    /**
+     * Handles the form submission for create/update action
+     */
+    const handleSubmit = useCallback(() => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: true })));
+        let courseService;
+        if (course) {
+            // Update
+            const data = Object.assign(Object.assign({ name: field.name, description: field.description, type: field.type, categories: field.categories }, (field.imageOriginalFile && { image_original: field.imageOriginalFile })), (field.privacy && { privacy: field.privacy }));
+            courseService = CourseService.updateCourse(course.id, data, {
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+        else {
+            // Create
+            const formData = new FormData();
+            if (field.imageOriginalFile) {
+                formData.append('image_original', field.imageOriginalFile);
+            }
+            formData.append('name', field.name);
+            formData.append('description', field.description);
+            formData.append('type', field.type);
+            if (field.categories) {
+                for (const key in field.categories) {
+                    formData.append(key, field.categories[key]);
+                }
+            }
+            courseService = CourseService.createCourse(formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
+            });
+        }
+        courseService
+            .then((data) => {
+            notifyChanges(data);
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
+        })
+            .catch((e) => {
+            const _error = formatHttpErrorCode(e);
+            if (Object.values(_error)[0]['error'] === 'unique') {
+                setError(Object.assign(Object.assign({}, error), { ['nameError']: _jsx(FormattedMessage, { id: "ui.courseForm.name.error.unique", defaultMessage: "ui.courseForm.name.error.unique" }) }));
+            }
+            else {
+                setError(Object.assign(Object.assign({}, error), _error));
+            }
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            Logger.error(SCOPE_SC_UI, e);
+            onError === null || onError === void 0 ? void 0 : onError(e);
+        });
+    }, [course, field, onSuccess, onError, notifyChanges]);
+    /**
+     * Handles course fields change
+     */
+    const handleChange = useCallback((course) => {
+        const { name, value } = course.target;
+        setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
+        if (error[`${name}Error`]) {
+            delete error[`${name}Error`];
+            setError(error);
+        }
+    }, [setField, error]);
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.ONE ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.ONE && (_jsx(_Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.TWO && (_jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { isCreationMode: true, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                                endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COURSE_TITLE_MAX_LENGTH - field.name.length }))
+                            }, error: Boolean(field.name.length > COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > COURSE_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
+                            }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > COURSE_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.ONE
+                            ? !field.type || Object.keys(error).length !== 0
+                            : _step === SCCourseFormStepType.TWO &&
+                                (!field.name ||
+                                    Object.keys(error).length !== 0 ||
+                                    field.name.length > COURSE_TITLE_MAX_LENGTH ||
+                                    field.description.length > COURSE_DESCRIPTION_MAX_LENGTH), variant: "contained", onClick: _step === SCCourseFormStepType.ONE ? () => handleChangeStep(SCCourseFormStepType.TWO) : handleSubmit, color: "primary" }, { children: course ? (_jsx(FormattedMessage, { id: "ui.courseForm.edit.action.save", defaultMessage: "ui.courseForm.edit.action.save" })) : _step === SCCourseFormStepType.ONE ? (_jsx(FormattedMessage, { id: "ui.courseForm.button.next", defaultMessage: "ui.courseForm.button.next" })) : (_jsx(FormattedMessage, { id: "ui.courseForm.button.create", defaultMessage: "ui.courseForm.button.create" })) })) }))] })) })));
+}

package/lib/esm/components/CourseForm/Edit.d.ts

@@ -0,0 +1,24 @@
+import { BoxProps } from '@mui/material';
+import { SCCoursePrivacyType, SCCourseType } from '@selfcommunity/types';
+export interface CourseEditProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Course Object
+     * @default null
+     */
+    course: SCCourseType;
+    /**
+     * On privacy change callback function
+     * @default null
+     */
+    onPrivacyChange?: (privacy: SCCoursePrivacyType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function CourseEdit(inProps: CourseEditProps): JSX.Element;

package/lib/esm/components/CourseForm/Edit.js

@@ -0,0 +1,46 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, FormControl, FormControlLabel, Icon, Radio, RadioGroup, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { SCCoursePrivacyType } from '@selfcommunity/types';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import { PREFIX } from './constants';
+import Widget from '../Widget';
+import { useState } from 'react';
+const classes = {
+    root: `${PREFIX}-edit-root`,
+    access: `${PREFIX}-edit-access`,
+    card: `${PREFIX}-edit-card`,
+    accessInfo: `${PREFIX}-edit-access-info`,
+    publish: `${PREFIX}-edit-publish`,
+    publishInfo: `${PREFIX}-edit-publish-info`,
+    privacyItem: `${PREFIX}-edit-privacy-item`,
+    privacyItemInfo: `${PREFIX}-edit-privacy-item-info`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+export default function CourseEdit(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, onPrivacyChange, course } = props, rest = __rest(props, ["className", "onPrivacyChange", "course"]);
+    // STATE
+    const [privacy, setPrivacy] = useState(course.privacy);
+    //HANDLERS
+    const handleChange = (event) => {
+        setPrivacy(event.target.value);
+        onPrivacyChange(event.target.value);
+    };
+    /**
+     * Renders root object
+     */
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [course.privacy === SCCoursePrivacyType.DRAFT && (_jsxs(Box, Object.assign({ className: classes.access }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.section.title", defaultMessage: "ui.courseForm.edit.access.section.title" }) })), _jsxs(Widget, Object.assign({ className: classes.card }, { children: [_jsx(Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), _jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.title", defaultMessage: "ui.courseForm.edit.access.info.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.subtitle", defaultMessage: "ui.courseForm.edit.access.info.subtitle" }) })), _jsxs(Box, Object.assign({ className: classes.accessInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.access", defaultMessage: "ui.courseForm.edit.access.info.access", values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.visibility", defaultMessage: "ui.courseForm.edit.access.info.visibility", values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) }))] }))] })] }))] }))), _jsxs(Box, Object.assign({ className: classes.publish }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.title", defaultMessage: "ui.courseForm.edit.publication.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.publishInfo }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle", defaultMessage: "ui.courseForm.edit.publication.subtitle" }) })), _jsx(RadioGroup, { children: Object.values(SCCoursePrivacyType)
+                            .filter((option) => option !== SCCoursePrivacyType.DRAFT)
+                            .map((option, index) => (_jsxs(FormControl, Object.assign({ className: classes.privacyItem }, { children: [_jsx(FormControlLabel, { control: _jsx(Radio, { size: "small", value: option, checked: option === privacy, onChange: handleChange }), label: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.title`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.title` }) }), _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.privacyItemInfo }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.access`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.access`, values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.privacyItemInfo }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.visibility`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.visibility`, values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) }))] })] }), index))) })] }))] })));
+}

package/lib/esm/components/CourseForm/Skeleton.d.ts

@@ -0,0 +1 @@
+export default function CourseFormSkeleton(): JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton, Stack, styled } from '@mui/material';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-skeleton-root`
+};
+const Root = styled(Stack, {
+    name: PREFIX,
+    slot: 'SkeletonRoot',
+    overridesResolver: (_props, styles) => styles.skeletonRoot
+})(() => ({}));
+export default function CourseFormSkeleton() {
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: "103px" }), _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: "50px" }), _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: "50px" }), _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: "50px" }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "86px", height: "21px" }), _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: "236px" })] })));
+}