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

package/lib/esm/components/CourseFormDialog/CourseFormDialog.js

@@ -0,0 +1,64 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import BaseDialog from '../../shared/BaseDialog';
+import { PREFIX } from './constants';
+import CourseForm from '../CourseForm';
+import { useCallback, useState } from 'react';
+import { SCCourseFormStepType } from '../../constants/Course';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS CourseFormDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseFormDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCourseFormDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseFormDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CourseFormDialog(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, open = true, onClose, CourseFormComponentProps = {} } = props, rest = __rest(props, ["className", "open", "onClose", "CourseFormComponentProps"]);
+    // STATE
+    const [step, setStep] = useState(SCCourseFormStepType.GENERAL);
+    const [type, setType] = useState('');
+    //HANDLERS
+    const handleStepTypeChange = (step, type) => {
+        setStep(step);
+        setType(type);
+    };
+    const handleSuccess = useCallback((course) => {
+        var _a;
+        (_a = CourseFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(CourseFormComponentProps, course);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose, CourseFormComponentProps]);
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (CourseFormComponentProps === null || CourseFormComponentProps === void 0 ? void 0 : CourseFormComponentProps.course) ? (_jsx(FormattedMessage, { id: "ui.courseForm.title.edit", defaultMessage: "ui.courseForm.title.edit" })) : step === SCCourseFormStepType.GENERAL ? (_jsx(FormattedMessage, { id: "ui.courseForm.title.general", defaultMessage: "ui.courseForm.title.general" })) : (_jsx(FormattedMessage, { id: "ui.courseForm.title.customization", defaultMessage: "ui.courseForm.title.customization", values: {
+                courseType: _jsx(FormattedMessage, { id: `ui.courseForm.${type}.title`, defaultMessage: `ui.courseForm.${type}.title` })
+            } })), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsx(CourseForm, Object.assign({}, CourseFormComponentProps, { onStepChange: handleStepTypeChange, onSuccess: handleSuccess })) })));
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,56 @@
+import { SCCourseType, SCUserType } from '@selfcommunity/types';
+export interface CourseJoinButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course
+     * @default null
+     */
+    courseId?: number;
+    /**
+     * The user to be accepted into the course
+     * @default null
+     */
+    user?: SCUserType;
+    /**
+     * onJoin callback
+     * @param user
+     * @param joined
+     */
+    onJoin?: (course: SCCourseType, status: string | null) => any;
+    /**
+     * Others properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Course Subscribe Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CourseJoinButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourseJoinButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseJoinButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CourseJoinButton(inProps: CourseJoinButtonProps): JSX.Element;

package/lib/esm/components/CourseJoinButton/CourseJoinButton.js

@@ -0,0 +1,145 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { CacheStrategies, Logger } from '@selfcommunity/utils';
+import { useSCContext, useSCFetchCourse, useSCUser } from '@selfcommunity/react-core';
+import { SCCoursePrivacyType, SCCourseJoinStatusType } from '@selfcommunity/types';
+import { LoadingButton } from '@mui/lab';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
+import PubSub from 'pubsub-js';
+const PREFIX = 'SCCourseJoinButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(LoadingButton, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+/**
+ * > API documentation for the Community-JS Course Subscribe Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CourseJoinButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourseJoinButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseJoinButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CourseJoinButton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, courseId, course, user, onJoin } = props, rest = __rest(props, ["className", "courseId", "course", "user", "onJoin"]);
+    // STATE
+    const [status, setStatus] = useState(null);
+    // CONTEXT
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
+    const scCoursesManager = scUserContext.managers.courses;
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { scCourse } = useSCFetchCourse({
+        id: courseId,
+        course,
+        cacheStrategy: authUserId ? CacheStrategies.CACHE_FIRST : CacheStrategies.STALE_WHILE_REVALIDATE
+    });
+    const isCourseAdmin = useMemo(() => scCourse && scCourse.join_status === SCCourseJoinStatusType.CREATOR, [scCourse]);
+    useEffect(() => {
+        /**
+         * Call scCoursesManager.joinStatus inside an effect
+         * to avoid warning rendering child during update parent state
+         */
+        if (authUserId) {
+            setStatus(scCoursesManager.joinStatus(scCourse));
+        }
+    }, [authUserId, scCoursesManager.joinStatus, scCourse]);
+    /**
+     * Notify UI when a member is added to a course
+     * @param course
+     * @param user
+     */
+    function notifyChanges(course, user) {
+        if (course && user) {
+            PubSub.publish(`${SCTopicType.GROUP}.${SCCourseEventType.ADD_MEMBER}`, { course, user });
+        }
+    }
+    const join = (user) => {
+        scCoursesManager
+            .join(scCourse, user === null || user === void 0 ? void 0 : user.id)
+            .then(() => {
+            const _status = scCourse.privacy === SCCoursePrivacyType.PRIVATE && scCourse.join_status !== SCCourseJoinStatusType.INVITED
+                ? SCCourseJoinStatusType.REQUESTED
+                : SCCourseJoinStatusType.JOINED;
+            notifyChanges(scCourse, user);
+            onJoin && onJoin(scCourse, _status);
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    };
+    const leave = () => {
+        scCoursesManager
+            .leave(scCourse)
+            .then(() => {
+            onJoin && onJoin(scCourse, null);
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    };
+    const handleClick = () => {
+        if (!scUserContext.user) {
+            scContext.settings.handleAnonymousAction();
+        }
+        else {
+            status === SCCourseJoinStatusType.JOINED && !(user === null || user === void 0 ? void 0 : user.id) ? leave() : (user === null || user === void 0 ? void 0 : user.id) ? join(user) : join();
+        }
+    };
+    /**
+     * Get current translated status
+     */
+    const getStatus = useMemo(() => {
+        let _status;
+        switch (status) {
+            case SCCourseJoinStatusType.REQUESTED:
+                _status = _jsx(FormattedMessage, { defaultMessage: "ui.courseJoinButton.waitingApproval", id: "ui.courseJoinButton.waitingApproval" });
+                break;
+            case SCCourseJoinStatusType.JOINED:
+                _status = _jsx(FormattedMessage, { defaultMessage: "ui.courseJoinButton.leave", id: "ui.courseJoinButton.leave" });
+                break;
+            case SCCourseJoinStatusType.INVITED:
+                _status = _jsx(FormattedMessage, { defaultMessage: "ui.courseJoinButton.accept", id: "ui.courseJoinButton.accept" });
+                break;
+            default:
+                scCourse.privacy === SCCoursePrivacyType.OPEN
+                    ? (_status = _jsx(FormattedMessage, { defaultMessage: "ui.courseJoinButton.join", id: "ui.courseJoinButton.join" }))
+                    : (_status = _jsx(FormattedMessage, { defaultMessage: "ui.courseJoinButton.requestAccess", id: "ui.courseJoinButton.requestAccess" }));
+                break;
+        }
+        return _status;
+    }, [status, scCourse]);
+    if (!scCourse || (isCourseAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isCourseAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
+        return null;
+    }
+    return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleClick, loading: scUserContext.user ? scCoursesManager.isLoading(scCourse) : null, disabled: status === SCCourseJoinStatusType.REQUESTED, className: classNames(classes.root, className) }, rest, { children: isCourseAdmin ? _jsx(FormattedMessage, { defaultMessage: "ui.courseJoinButton.accept", id: "ui.courseJoinButton.accept" }) : getStatus })));
+}

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { ButtonProps } from '@mui/material/Button/Button';
+import { SCCourseType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface CourseParticipantsButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * CourseId of course object
+     * @default null
+     */
+    courseId?: number;
+    /**
+     * Hide button label
+     * @default false
+     */
+    hideCaption?: boolean;
+    /**
+     * Props to spread to followedBy dialog
+     * @default {}
+     */
+    DialogProps?: BaseDialogProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS Course Participants Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseParticipantsButton} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+
+ The name `SCCourseParticipantsButton` can be used when providing style overrides in the theme.
+
+ * #### CSS
+ *
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseParticipantsButton-root|Styles applied to the root element.|
+ |dialogRoot|.SCCourseParticipantsButton-dialog-root|Styles applied to the dialog root element.|
+ |endMessage|.SCCourseParticipantsButton-end-message|Styles applied to the end message element.|
+ |infiniteScroll|.SCCourseParticipantsButton-infinite-scroll|Styles applied to the infinite scroll element.|
+ |participants|.SCCourseParticipantsButton-participants|Styles applied to the participants section.|
+ 
+ * @param inProps
+ */
+export default function CourseParticipantsButton(inProps: CourseParticipantsButtonProps): JSX.Element;

package/lib/esm/components/CourseParticipantsButton/CourseParticipantsButton.js

@@ -0,0 +1,147 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar, AvatarGroup, Button, Icon, List, ListItem, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { CourseService, Endpoints, http } from '@selfcommunity/api-services';
+import { useSCFetchCourse } from '@selfcommunity/react-core';
+import { SCCourseJoinStatusType } from '@selfcommunity/types';
+import { Logger } from '@selfcommunity/utils';
+import classNames from 'classnames';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import BaseDialog from '../../shared/BaseDialog';
+import InfiniteScroll from '../../shared/InfiniteScroll';
+import { numberFormatter } from '../../utils/buttonCounters';
+import AvatarGroupSkeleton from '../Skeleton/AvatarGroupSkeleton';
+import User, { UserSkeleton } from '../User';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+const PREFIX = 'SCCourseParticipantsButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    dialogRoot: `${PREFIX}-dialog-root`,
+    endMessage: `${PREFIX}-end-message`,
+    infiniteScroll: `${PREFIX}-infinite-scroll`,
+    participants: `${PREFIX}-participants`
+};
+const Root = styled(Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root,
+    shouldForwardProp: (prop) => prop !== 'enrolled'
+})(() => ({}));
+const DialogRoot = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'DialogRoot',
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS Course Participants Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseParticipantsButton} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+
+ The name `SCCourseParticipantsButton` can be used when providing style overrides in the theme.
+
+ * #### CSS
+ *
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseParticipantsButton-root|Styles applied to the root element.|
+ |dialogRoot|.SCCourseParticipantsButton-dialog-root|Styles applied to the dialog root element.|
+ |endMessage|.SCCourseParticipantsButton-end-message|Styles applied to the end message element.|
+ |infiniteScroll|.SCCourseParticipantsButton-infinite-scroll|Styles applied to the infinite scroll element.|
+ |participants|.SCCourseParticipantsButton-participants|Styles applied to the participants section.|
+ 
+ * @param inProps
+ */
+export default function CourseParticipantsButton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, courseId, course, hideCaption = false, DialogProps = {} } = props, rest = __rest(props, ["className", "courseId", "course", "hideCaption", "DialogProps"]);
+    // STATE
+    const [loading, setLoading] = useState(true);
+    const [count, setCount] = useState(0);
+    const [next, setNext] = useState(null);
+    const [offset, setOffset] = useState(null);
+    const [enrolled, setEnrolled] = useState([]);
+    const [open, setOpen] = useState(false);
+    // HOOKS
+    const { scCourse } = useSCFetchCourse({ id: courseId, course });
+    const participantsAvailable = useMemo(() => (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.CREATOR || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === SCCourseJoinStatusType.MANAGER, [scCourse]);
+    useDeepCompareEffectNoCheck(() => {
+        setEnrolled([]);
+        setLoading(true);
+    }, [scCourse]);
+    // FETCH FIRST ENROLLED
+    useDeepCompareEffectNoCheck(() => {
+        if (!scCourse) {
+            return;
+        }
+        if (!count && participantsAvailable) {
+            CourseService.getCourseJoinedUsers(scCourse.id, { limit: 3 }).then((res) => {
+                setEnrolled([...res.results]);
+                setOffset(4);
+                setCount(res.count);
+                setLoading(false);
+            });
+        }
+        else {
+            setOffset(0);
+        }
+    }, [scCourse, participantsAvailable, count, setEnrolled, setOffset, setLoading]);
+    useEffect(() => {
+        if (open && offset !== null) {
+            setLoading(true);
+            CourseService.getCourseJoinedUsers(scCourse.id, { offset, limit: 20 }).then((res) => {
+                setEnrolled([...(offset === 0 ? [] : enrolled), ...res.results]);
+                setNext(res.next);
+                setLoading(false);
+                setOffset(null);
+            });
+        }
+    }, [open, enrolled, offset, setLoading, setNext]);
+    /**
+     * Memoized fetchEnrolledUsers
+     */
+    const fetchEnrolledUsers = useCallback(() => {
+        if (!next) {
+            return;
+        }
+        http
+            .request({
+            url: next,
+            method: Endpoints.GetUsersGoingToCourse.method
+        })
+            .then((res) => {
+            setEnrolled([...enrolled, ...res.data.results]);
+            setNext(res.data.next);
+        })
+            .catch((error) => Logger.error(SCOPE_SC_UI, error))
+            .then(() => setLoading(false));
+    }, [enrolled, next, setLoading]);
+    const renderSurplus = useCallback(() => numberFormatter(count), [count]);
+    /**
+     * Opens participants dialog
+     */
+    const handleToggleDialogOpen = useCallback(() => {
+        setOpen((prev) => !prev);
+    }, [setOpen]);
+    /**
+     * Rendering
+     */
+    if (!participantsAvailable) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || count === 0, 
+                // @ts-expect-error this is needed to use enrolled into SCCourseParticipantsButton
+                enrolled: enrolled }, rest, { children: [!hideCaption && (_jsxs(Typography, Object.assign({ className: classes.participants }, { children: [_jsx(Icon, { children: "people_alt" }), _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: count } })] }))), !count && (loading || !scCourse) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false }), { count: 4 }))) : (_jsx(AvatarGroup, Object.assign({ total: count, renderSurplus: renderSurplus }, { children: enrolled.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.dialogTitle", id: "ui.courseParticipantsButton.dialogTitle", values: { total: count } }), onClose: handleToggleDialogOpen, open: true }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: count, next: fetchEnrolledUsers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courseParticipantsButton.noOtherParticipants", defaultMessage: "ui.courseParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: enrolled.map((e) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: e }) }, e.id))) }) })) })))] }));
+}

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

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

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

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

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

@@ -0,0 +1,100 @@
+import { GridProps } from '@mui/material';
+import React from 'react';
+import { CourseProps, CourseSkeletonProps } from '../Course';
+import { CoursesSkeletonProps } from '../Courses/Skeleton';
+import { CreateCourseButtonProps } from '../CreateCourseButton';
+export declare const CoursesChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "avatar" | "className" | "style" | "classes" | "label" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export interface CoursesProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Feed API Query Params
+     * @default [{'limit': 20, 'offset': 0}]
+     */
+    endpointQueryParams?: Record<string, string | number>;
+    /**
+     * Props to spread to single course object
+     * @default {}
+     */
+    CourseComponentProps?: CourseProps;
+    /**
+     * Props to spread to single course skeleton object
+     * @default {}
+     */
+    CourseSkeletonComponentProps?: CourseSkeletonProps;
+    /**
+     * Props to spread to courses skeleton object
+     * @default {}
+     */
+    CoursesSkeletonComponentProps?: CoursesSkeletonProps;
+    /**
+     * Props to spread to CreateCourseButton component
+     * @default {}
+     */
+    CreateCourseButtonComponentProps?: CreateCourseButtonProps;
+    /**
+     * 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'>>;
+    /**
+     * Show/Hide filters
+     * @default true
+     */
+    showFilters?: boolean;
+    /**
+     * Filters component
+     * @param props
+     */
+    filters?: JSX.Element;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ * > 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: CoursesProps): JSX.Element;