@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.91

package/lib/esm/components/Courses/Courses.js

@@ -0,0 +1,233 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Chip, FormControl, Grid, Icon, IconButton, InputAdornment, Stack, styled, TextField, Typography, useMediaQuery, useTheme, useThemeProps } from '@mui/material';
+import { Endpoints, http } from '@selfcommunity/api-services';
+import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
+import { Logger } from '@selfcommunity/utils';
+import classNames from 'classnames';
+import PubSub from 'pubsub-js';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
+import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
+import Course, { CourseSkeleton } from '../Course';
+import Skeleton from '../Courses/Skeleton';
+import { PREFIX } from './constants';
+import { SCCourseTemplateType } from '../../types/course';
+import CategoryAutocomplete from '../CategoryAutocomplete';
+import CourseCreatePlaceholder from '../Course/CreatePlaceholder';
+import InfiniteScroll from '../../shared/InfiniteScroll';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+const classes = {
+    root: `${PREFIX}-root`,
+    category: `${PREFIX}-category`,
+    courses: `${PREFIX}-courses`,
+    emptyBox: `${PREFIX}-empty-box`,
+    emptyIcon: `${PREFIX}-empty-icon`,
+    emptyRotatedBox: `${PREFIX}-empty-rotated-box`,
+    filters: `${PREFIX}-filters`,
+    item: `${PREFIX}-item`,
+    itemPlaceholder: `${PREFIX}-item-placeholder`,
+    noResults: `${PREFIX}-no-results`,
+    search: `${PREFIX}-search`,
+    studentEmptyView: `${PREFIX}-student-empty-view`,
+    teacherEmptyView: `${PREFIX}-teacher-empty-view`,
+    endMessage: `${PREFIX}-end-message`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+export const CoursesChipRoot = styled(Chip, {
+    name: PREFIX,
+    slot: 'CoursesChipRoot',
+    shouldForwardProp: (prop) => prop !== 'showMine' && prop !== 'showManagedCourses'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Courses component. Learn about the available props and the CSS API.
+ *
+ *
+ * The Courses component renders the list of all available courses.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Courses)
+
+ #### Import
+ ```jsx
+ import {Courses} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCCourses` 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.|
+ |category|.SCCourses-category|Styles applied to the category autocomplete element.|
+ |courses|.SCCourses-courses|Styles applied to the courses section.|
+ |emptyBox|.SCCourses-empty-box|Styles applied to the empty box element.|
+ |emptyIcon|.SCCourses-empty-icon|Styles applied to the empty icon element.|
+ |emptyRotatedBox|.SCCourses-empty-rotated-box|Styles applied to the rotated empty box element.|
+ |filters|.SCCourses-filters|Styles applied to the filters section.|
+ |item|.SCCourses-item|Styles applied to an individual item.|
+ |itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
+ |noResults|.SCCourses-no-results|Styles applied when there are no results.|
+ |search|.SCCourses-search|Styles applied to the search element.|
+ |studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
+ |teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
+
+
+ * @param inProps
+ */
+export default function Courses(inProps) {
+    var _a;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, CourseComponentProps = {}, CoursesSkeletonComponentProps = {}, CourseSkeletonComponentProps = { template: SCCourseTemplateType.PREVIEW }, CreateCourseButtonComponentProps = {}, GridContainerComponentProps = {}, GridItemComponentProps = {}, showFilters = true, filters } = props, rest = __rest(props, ["endpointQueryParams", "className", "CourseComponentProps", "CoursesSkeletonComponentProps", "CourseSkeletonComponentProps", "CreateCourseButtonComponentProps", "GridContainerComponentProps", "GridItemComponentProps", "showFilters", "filters"]);
+    // STATE
+    const [courses, setCourses] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [next, setNext] = useState(null);
+    const [query, setQuery] = useState('');
+    const [_categories, setCategories] = useState([]);
+    const [showMine, setShowMine] = useState(false);
+    const [showManagedCourses, setShowManagedCourses] = useState(false);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    const { preferences } = useSCPreferences();
+    // MEMO
+    const contentAvailability = SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in preferences && preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
+    const onlyStaffEnabled = useMemo(() => { var _a; return (_a = preferences[SCPreferences.CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED]) === null || _a === void 0 ? void 0 : _a.value; }, [preferences]);
+    const canCreateCourse = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = useRef(null);
+    // HANDLERS
+    const handleChipClick = () => {
+        setShowMine(!showMine);
+    };
+    const handleDeleteClick = () => {
+        setShowMine(false);
+    };
+    /**
+     * Fetches courses list
+     */
+    const fetchCourses = () => {
+        return http
+            .request({
+            url: Endpoints.SearchCourses.url({}),
+            method: Endpoints.SearchCourses.method,
+            params: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (_categories.length && { categories: JSON.stringify(_categories) })), (query && { search: query })), (showManagedCourses && { statuses: JSON.stringify(['creator', 'manager']) })), (showMine && { statuses: JSON.stringify(['joined', 'manager']) }))
+        })
+            .then((res) => {
+            setCourses(res.data.results);
+            setNext(res.data.next);
+            setLoading(false);
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    };
+    /**
+     * On mount, fetches courses list
+     */
+    useEffect(() => {
+        if (!contentAvailability && !authUserId) {
+            return;
+        }
+        else {
+            fetchCourses();
+        }
+    }, [contentAvailability, authUserId, showMine, showManagedCourses, _categories]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteCourseHandler = useCallback((_msg, deleted) => {
+        setCourses((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [courses]);
+    /**
+     * On mount, subscribe to receive course updates (only delete)
+     */
+    useEffect(() => {
+        if (courses) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.COURSE}.${SCCourseEventType.DELETE}`, onDeleteCourseHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [courses]);
+    const handleNext = useMemo(() => () => {
+        if (!next) {
+            return;
+        }
+        return http
+            .request({
+            url: next,
+            method: Endpoints.SearchCourses.method
+        })
+            .then((res) => {
+            setCourses([...courses, ...res.data.results]);
+            setNext(res.data.next);
+        })
+            .catch((error) => console.log(error))
+            .then(() => setLoading(false));
+    }, [next]);
+    /**
+     * Handle change filter name
+     * @param course
+     */
+    const handleOnChangeFilterName = (course) => {
+        setQuery(course.target.value);
+    };
+    /**
+     * Handle change category
+     * @param categories
+     */
+    const handleOnChangeCategory = (categories) => {
+        const categoriesIds = categories.map((item) => item.id);
+        setCategories(categoriesIds);
+    };
+    const handleScrollUp = () => {
+        window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+    };
+    /**
+     * Renders courses list
+     */
+    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 3 }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.courses.filterByName", defaultMessage: "ui.courses.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+                                    e.preventDefault();
+                                    if (e.key === 'Enter') {
+                                        fetchCourses();
+                                    }
+                                }, InputProps: {
+                                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading })) })))
+                                } }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(CoursesChipRoot, { color: showManagedCourses ? 'primary' : 'default', variant: showManagedCourses ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByManagedByMe", defaultMessage: "ui.courses.filterByManagedByMe" }), onClick: () => setShowManagedCourses(!showManagedCourses), 
+                                // @ts-expect-error this is needed to use showMine into SCCourses
+                                showManagedCourses: showManagedCourses, deleteIcon: showManagedCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showManagedCourses ? () => setShowManagedCourses(false) : null, disabled: loading || showMine }) }))), _jsx(Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(CategoryAutocomplete, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(CoursesChipRoot, { color: showMine ? 'primary' : 'default', variant: showMine ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByMine", defaultMessage: "ui.courses.filterByMine" }), onClick: handleChipClick, 
+                                // @ts-expect-error this is needed to use showMine into SCCourses
+                                showMine: showMine, deleteIcon: showMine ? _jsx(Icon, { children: "close" }) : null, onDelete: showMine ? handleDeleteClick : null, disabled: loading || showManagedCourses }) })))] })) }))), _jsx(_Fragment, { children: !courses.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? (_jsxs(Stack, Object.assign({ className: classes.studentEmptyView }, { children: [_jsx(Stack, Object.assign({ className: classes.emptyBox }, { children: _jsx(Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), _jsx(Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) }))] }))) : (_jsx(Box, Object.assign({ className: classes.teacherEmptyView }, { children: _jsx(Skeleton, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (_jsx(CourseSkeleton, { template: SCCourseTemplateType.PREVIEW })) : (_jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
+                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
+    /**
+     * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
+     */
+    if (!contentAvailability && !scUserContext.user) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    if (loading) {
+        return _jsx(Skeleton, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }));
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: c })));
+}

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

@@ -0,0 +1,54 @@
+import { GridProps } from '@mui/material';
+export interface CoursesSkeletonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    CourseSkeletonProps?: any;
+    /**
+     * Props spread to grid container
+     * @default {}
+     */
+    GridContainerComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
+    /**
+     * Props spread to single grid item
+     * @default {}
+     */
+    GridItemComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
+    /**
+     * @default 20
+     */
+    coursesNumber?: number;
+    /**
+     *  If true, shows a different skeleton obj
+     * @default false
+     */
+    teacherView?: boolean;
+}
+/**https://www.figma.com/design/bm7N6ykMLLmaAA22g34bRY/Corsi?t=HKaD6ErrzGpYDJr1-0
+ * > API documentation for the Community-JS Groups Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CoursesSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourses-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourses-skeleton-root|Styles applied to the root element.|
+ |courses|.SCCourses-skeleton-courses|Styles applied to the group elements.|
+ *
+ */
+export default function CoursesSkeleton(inProps: CoursesSkeletonProps): JSX.Element;

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

@@ -0,0 +1,41 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PREFIX } from './constants';
+import { Box, Grid, styled } from '@mui/material';
+import classNames from 'classnames';
+import { CourseSkeleton } from '../Course';
+import CourseCreatePlaceholder from '../Course/CreatePlaceholder';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    courses: `${PREFIX}-skeleton-courses`,
+    item: `${PREFIX}-skeleton-item`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**https://www.figma.com/design/bm7N6ykMLLmaAA22g34bRY/Corsi?t=HKaD6ErrzGpYDJr1-0
+ * > API documentation for the Community-JS Groups Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CoursesSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourses-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourses-skeleton-root|Styles applied to the root element.|
+ |courses|.SCCourses-skeleton-courses|Styles applied to the group elements.|
+ *
+ */
+export default function CoursesSkeleton(inProps) {
+    const { className, CourseSkeletonProps = {}, coursesNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {}, teacherView = false } = inProps, rest = __rest(inProps, ["className", "CourseSkeletonProps", "coursesNumber", "GridContainerComponentProps", "GridItemComponentProps", "teacherView"]);
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((course, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3 }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? _jsx(CourseCreatePlaceholder, {}) : _jsx(CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+import Courses, { CoursesProps } from './Courses';
+import CoursesSkeleton, { CoursesSkeletonProps } from './Skeleton';
+export default Courses;
+export { CoursesProps, CoursesSkeleton, CoursesSkeletonProps };

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

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

package/lib/esm/components/Courses/prefetchedCourses.d.ts

@@ -0,0 +1,81 @@
+export declare const prefetchedCourses: {
+    id: number;
+    name: string;
+    slug: string;
+    type: string;
+    privacy: string;
+    image_bigger: string;
+    image_big: string;
+    image_medium: string;
+    image_small: string;
+    join_status: string;
+    created_at: string;
+    created_by: {
+        id: number;
+        username: string;
+        real_name: string;
+        avatar: string;
+        ext_id: any;
+        deleted: boolean;
+        followings_counter: number;
+        followers_counter: number;
+        posts_counter: number;
+        discussions_counter: number;
+        polls_counter: number;
+        categories_counter: number;
+        date_joined: string;
+        bio: string;
+        location: string;
+        location_lat_lng: any;
+        position_lat_lng: any;
+        date_of_birth: string;
+        description: string;
+        gender: string;
+        website: string;
+        cover: string;
+        tags: {
+            id: number;
+            type: string;
+            name: string;
+            description: string;
+            color: string;
+            visible: boolean;
+            visibility_boost: boolean;
+            active: boolean;
+            deleted: boolean;
+            created_at: string;
+        }[];
+        reputation: number;
+        language: string;
+        community_badge: boolean;
+        reg_approved: boolean;
+        job: string;
+        store: string;
+        brand: string;
+        race: string;
+    };
+    categories: {
+        id: number;
+        tags: any[];
+        followed: boolean;
+        order: number;
+        name: string;
+        name_synonyms: string;
+        slug: string;
+        slogan: string;
+        html_info: any;
+        seo_title: string;
+        seo_description: string;
+        auto_follow: string;
+        active: boolean;
+        image_original: string;
+        image_bigger: string;
+        image_big: string;
+        image_medium: string;
+        image_small: string;
+        emotional_image_original: string;
+        emotional_image_position: number;
+        stream_order_by: string;
+        followers_counter: number;
+    }[];
+}[];

package/lib/esm/components/Courses/prefetchedCourses.js

@@ -0,0 +1,183 @@
+export const prefetchedCourses = [
+    {
+        id: 1,
+        name: 'Distributed multi-state capability',
+        slug: 'distributed-multi-state-capability',
+        type: 'structured',
+        privacy: 'open',
+        image_bigger: 'https://static-cache.quentrix.com/wioggmfc/upfiles/structureds/bigger/distributed-multi-state-capability_3372.jpg',
+        image_big: 'https://static-cache.quentrix.com/wioggmfc/upfiles/structureds/big/distributed-multi-state-capability_0486.jpg',
+        image_medium: 'https://static-cache.quentrix.com/wioggmfc/upfiles/structureds/medium/distributed-multi-state-capability_5903.jpg',
+        image_small: 'https://static-cache.quentrix.com/wioggmfc/upfiles/structureds/small/distributed-multi-state-capability_6812.jpg',
+        join_status: 'manager',
+        created_at: '2025-01-16T14:52:24.400913+01:00',
+        created_by: {
+            id: 9,
+            username: 'team',
+            real_name: '',
+            avatar: 'https://static-cache.quentrix.com/wioggmfc/upfiles/svg/T9.svg',
+            ext_id: null,
+            deleted: false,
+            followings_counter: 0,
+            followers_counter: 5,
+            posts_counter: 12,
+            discussions_counter: 4,
+            polls_counter: 4,
+            categories_counter: 2,
+            date_joined: '2024-04-10T14:37:48.153981+02:00',
+            bio: '',
+            location: '',
+            location_lat_lng: null,
+            position_lat_lng: null,
+            date_of_birth: null,
+            description: '',
+            gender: 'Unspecified',
+            website: '',
+            cover: null,
+            tags: [],
+            reputation: 159,
+            language: 'it',
+            community_badge: true,
+            reg_approved: true,
+            job: 'Barbiere',
+            store: 'Brescia',
+            brand: 'Prima Classe',
+            race: null
+        },
+        categories: [
+            {
+                id: 1,
+                tags: [],
+                followed: true,
+                order: 14,
+                name: 'Band preferite',
+                name_synonyms: '',
+                slug: 'band-preferite',
+                slogan: "Note che si trasformano in emozioni: condividi la tua passione musicale, esplorando insieme le band preferite che ti fanno vibrare l'anima.",
+                html_info: null,
+                seo_title: '',
+                seo_description: '',
+                auto_follow: 'none',
+                active: true,
+                image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/original/band-preferite_4420.png',
+                image_bigger: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/bigger/band-preferite_8770.png',
+                image_big: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/big/band-preferite_7524.png',
+                image_medium: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/medium/band-preferite_8937.png',
+                image_small: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/small/band-preferite_3325.png',
+                emotional_image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/e_original/band-preferite_4837.png',
+                emotional_image_position: 50,
+                stream_order_by: 'recent',
+                followers_counter: 315
+            }
+        ]
+    },
+    {
+        id: 2,
+        name: 'Pre-emptive fresh-thinking frame',
+        slug: 'pre-emptive-fresh-thinking-frame',
+        type: 'scheduled',
+        privacy: 'open',
+        image_bigger: 'https://static-cache.quentrix.com/wioggmfc/upfiles/scheduleds/bigger/pre-emptive-fresh-thinking-frame_1155.jpg',
+        image_big: 'https://static-cache.quentrix.com/wioggmfc/upfiles/scheduleds/big/pre-emptive-fresh-thinking-frame_2446.jpg',
+        image_medium: 'https://static-cache.quentrix.com/wioggmfc/upfiles/scheduleds/medium/pre-emptive-fresh-thinking-frame_3088.jpg',
+        image_small: 'https://static-cache.quentrix.com/wioggmfc/upfiles/scheduleds/small/pre-emptive-fresh-thinking-frame_3209.jpg',
+        join_status: 'joined',
+        created_at: '2025-01-20T12:38:43.200219+01:00',
+        created_by: {
+            id: 1,
+            username: 'admin',
+            real_name: 'Amministratore',
+            avatar: 'https://static-cache.quentrix.com/wioggmfc/upfiles/avatars/1/resized/209/209/28b02add2c23b3a71801734eba773592.png',
+            ext_id: null,
+            deleted: false,
+            followings_counter: 1,
+            followers_counter: 4,
+            posts_counter: 614,
+            discussions_counter: 551,
+            polls_counter: 84,
+            categories_counter: 5,
+            date_joined: '2024-04-10T13:23:59.754335+02:00',
+            bio: 'Vidi, feci, raccontai e poi me ne andai',
+            location: 'Milano',
+            location_lat_lng: null,
+            position_lat_lng: null,
+            date_of_birth: '1973-07-09',
+            description: 'Avvocato Civilista',
+            gender: 'Unspecified',
+            website: 'https://selfcommunity.com/',
+            cover: 'https://static-cache.quentrix.com/wioggmfc/upfiles/user_media/admin/cover/55655364-f786-4ead-a97f-56b1770ad951.jpg',
+            tags: [
+                {
+                    id: 93,
+                    type: 'user',
+                    name: 'PINO',
+                    description: '',
+                    color: '#e57373',
+                    visible: true,
+                    visibility_boost: false,
+                    active: true,
+                    deleted: false,
+                    created_at: '2024-05-31T16:15:43.986224+02:00'
+                }
+            ],
+            reputation: 2748,
+            language: 'it',
+            community_badge: false,
+            reg_approved: true,
+            job: 'JR Clinic Manager',
+            store: 'Erbusco',
+            brand: 'Il Barbiere',
+            race: 'Umano'
+        },
+        categories: [
+            {
+                id: 1,
+                tags: [],
+                followed: true,
+                order: 14,
+                name: 'Band preferite',
+                name_synonyms: '',
+                slug: 'band-preferite',
+                slogan: "Note che si trasformano in emozioni: condividi la tua passione musicale, esplorando insieme le band preferite che ti fanno vibrare l'anima.",
+                html_info: null,
+                seo_title: '',
+                seo_description: '',
+                auto_follow: 'none',
+                active: true,
+                image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/original/band-preferite_4420.png',
+                image_bigger: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/bigger/band-preferite_8770.png',
+                image_big: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/big/band-preferite_7524.png',
+                image_medium: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/medium/band-preferite_8937.png',
+                image_small: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/small/band-preferite_3325.png',
+                emotional_image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/e_original/band-preferite_4837.png',
+                emotional_image_position: 50,
+                stream_order_by: 'recent',
+                followers_counter: 315
+            },
+            {
+                id: 2,
+                tags: [],
+                followed: true,
+                order: 13,
+                name: 'Nuovi generi musicali alternativi',
+                name_synonyms: '#alternative',
+                slug: 'nuovi-generi-musicali',
+                slogan: "Esplora l'innovazione sonora e scopri nuovi ritmi inaspettati. Abbraccia l'originalità dei nuovi generi musicali alternativi e lasciati trasportare dalle vibrazioni uniche.",
+                html_info: null,
+                seo_title: '',
+                seo_description: '',
+                auto_follow: 'forced',
+                active: true,
+                image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/original/nuovi-generi-musicali_5714.png',
+                image_bigger: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/bigger/nuovi-generi-musicali_8854.png',
+                image_big: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/big/nuovi-generi-musicali_0593.png',
+                image_medium: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/medium/nuovi-generi-musicali_0368.png',
+                image_small: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/small/nuovi-generi-musicali_7491.png',
+                emotional_image_original: 'https://static-cache.quentrix.com/wioggmfc/upfiles/categories/e_original/nuovi-generi-musicali_7739.png',
+                emotional_image_position: 50,
+                stream_order_by: 'recent',
+                followers_counter: 345
+            }
+        ]
+    }
+];

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

@@ -0,0 +1,38 @@
+import { ButtonProps } from '@mui/material';
+import { CourseFormDialogProps } from '../CourseFormDialog';
+export interface CreateCourseButtonProps extends ButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Props to spread to CreateGroup component
+     * @default empty object
+     */
+    CourseFormDialogComponentProps?: CourseFormDialogProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS Create Group Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateCourseButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateCourseButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateCourseButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CreateCourseButton(inProps: CreateCourseButtonProps): JSX.Element;