@selfcommunity/react-ui 0.7.9-alpha.1 → 0.7.9-alpha.3

package/lib/esm/components/ChangeGroupCover/ChangeGroupCover.js

@@ -0,0 +1,114 @@
+import { __rest } from "tslib";
+import React, { useContext, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Alert } from '@mui/material';
+import { SCUserContext } from '@selfcommunity/react-core';
+import Icon from '@mui/material/Icon';
+import { defineMessages, useIntl } from 'react-intl';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import { LoadingButton } from '@mui/lab';
+import { GroupService } from '@selfcommunity/api-services';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(LoadingButton, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+const messages = defineMessages({
+    errorLoadImage: {
+        id: 'ui.changeGroupCover.button.change.alertErrorImage',
+        defaultMessage: 'ui.changeGroupCover.button.change.alertErrorImage'
+    }
+});
+/**
+ * > API documentation for the Community-JS Change Group Cover component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to edit the group cover and a popover that specifies format and sizes allowed.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/ChangeGroupCover)
+
+ #### Import
+ ```jsx
+ import {ChangeGroupCover} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCChangeGroupCoverButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCChangeGroupCoverButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function ChangeGroupCover(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { groupId, onChange, autoHide, className, isCreationMode = false } = props, rest = __rest(props, ["groupId", "onChange", "autoHide", "className", "isCreationMode"]);
+    //CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    //STATE
+    let fileInput = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [alert, setAlert] = useState(null);
+    // INTL
+    const intl = useIntl();
+    // Anonymous
+    if (!scUserContext.user) {
+        return null;
+    }
+    /**
+     * Handles file upload
+     * @param event
+     */
+    const handleUpload = (event) => {
+        fileInput = event.target.files[0];
+        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+    };
+    /**
+     * Handles cover saving after upload action
+     */
+    function handleSave() {
+        setLoading(true);
+        const formData = new FormData();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        formData.append('emotional_image_original', fileInput);
+        GroupService.changeGroupAvatarOrCover(groupId, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+            .then((data) => {
+            onChange && onChange(data.emotional_image);
+            setLoading(false);
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            setLoading(false);
+            setAlert(intl.formatMessage(messages.errorLoadImage));
+        });
+    }
+    /**
+     * If there is an error
+     */
+    if (alert) {
+        return (React.createElement(Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+    }
+    /**
+     * Renders root object (if not hidden by autoHide prop)
+     */
+    if (!autoHide) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
+            React.createElement(Root, Object.assign({ className: classNames(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
+                React.createElement(Icon, null, "image"))));
+    }
+    return null;
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+export interface ChangeGroupPictureProps {
+    /**
+     * Id of the group. It is optional only for group creation modal.
+     * @default null
+     */
+    groupId?: number;
+    /**
+     * On change function.
+     * @default null
+     */
+    onChange?: (cover: any) => void;
+    /**
+     * Hides this component
+     * @default false
+     */
+    autoHide?: boolean;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Prop to handle avatar loading in the create group modal.
+     * @default false
+     */
+    isCreationMode?: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Change Group Picture component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to manage their group pictures.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/ChangeGroupPicture)
+
+ #### Import
+
+ ```jsx
+ import {ChangeGroupPicture} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCChangeGroupPictureButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCChangeGroupPictureButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function ChangeGroupPicture(inProps: ChangeGroupPictureProps): JSX.Element;

package/lib/esm/components/ChangeGroupPicture/ChangeGroupPicture.js

@@ -0,0 +1,114 @@
+import { __rest } from "tslib";
+import React, { useContext, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Alert } from '@mui/material';
+import Icon from '@mui/material/Icon';
+import { SCUserContext } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { GroupService } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { defineMessages, useIntl } from 'react-intl';
+import { LoadingButton } from '@mui/lab';
+const messages = defineMessages({
+    errorLoadImage: {
+        id: 'ui.changeGroupCover.button.change.alertErrorImage',
+        defaultMessage: 'ui.changeGroupCover.button.change.alertErrorImage'
+    }
+});
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(LoadingButton, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Change Group Picture component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to manage their group pictures.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/ChangeGroupPicture)
+
+ #### Import
+
+ ```jsx
+ import {ChangeGroupPicture} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCChangeGroupPictureButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCChangeGroupPictureButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function ChangeGroupPicture(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { groupId, onChange, autoHide, className, isCreationMode = false } = props, rest = __rest(props, ["groupId", "onChange", "autoHide", "className", "isCreationMode"]);
+    //STATE
+    const [loading, setLoading] = useState(false);
+    const [alert, setAlert] = useState(null);
+    let fileInput = useRef(null);
+    //CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    // INTL
+    const intl = useIntl();
+    // Anonymous
+    if (!scUserContext.user) {
+        return null;
+    }
+    /**
+     * Handles avatar upload
+     * @param event
+     */
+    function handleUpload(event) {
+        fileInput = event.target.files[0];
+        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+    }
+    /**
+     * Performs save avatar after upload
+     */
+    function handleSave() {
+        setLoading(true);
+        const formData = new FormData();
+        formData.append('image_original', fileInput);
+        GroupService.changeGroupAvatarOrCover(groupId, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+            .then((data) => {
+            setLoading(false);
+            onChange && onChange(data.image_bigger);
+        })
+            .catch((error) => {
+            setAlert(intl.formatMessage(messages.errorLoadImage));
+            setLoading(false);
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    }
+    /**
+     * If there is an error
+     */
+    if (alert) {
+        return (React.createElement(Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+    }
+    /**
+     * Renders the component (if not hidden by autoHide prop)
+     */
+    if (!autoHide) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
+            React.createElement(Root, Object.assign({ className: classNames(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
+                React.createElement(Icon, null, "photo_camera"))));
+    }
+    return null;
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { SCGroupType } from '@selfcommunity/types';
+export interface CreateGroupProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Open dialog
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * On dialog close callback function
+     * @default null
+     */
+    onClose?: () => void;
+    /**
+     * Group Object
+     * @default null
+     */
+    group?: SCGroupType;
+    /**
+     * 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 {CreateGroupButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateGroup` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateGroup-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CreateGroup(inProps: CreateGroupProps): JSX.Element;

package/lib/esm/components/CreateGroup/CreateGroup.js

@@ -0,0 +1,184 @@
+import { __rest } from "tslib";
+import React, { useState } from 'react';
+import { useThemeProps } from '@mui/system';
+import { styled } from '@mui/material/styles';
+import { Avatar, Box, Divider, FormGroup, Icon, Paper, Stack, Switch, TextField, Typography } from '@mui/material';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { PREFIX } from './constants';
+import BaseDialog from '../../shared/BaseDialog';
+import { LoadingButton } from '@mui/lab';
+import ChangeGroupPicture from '../ChangeGroupPicture';
+import ChangeGroupCover from '../ChangeGroupCover';
+import { GROUP_DESCRIPTION_MAX_LENGTH, GROUP_TITLE_MAX_LENGTH } from '../../constants/Group';
+import GroupInviteButton from '../GroupInviteButton';
+import { SCGroupPrivacyType } from '@selfcommunity/types';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { GroupService } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+const messages = defineMessages({
+    name: {
+        id: 'ui.createGroup.name.placeholder',
+        defaultMessage: 'ui.createGroup.name.placeholder'
+    },
+    description: {
+        id: 'ui.createGroup.description.placeholder',
+        defaultMessage: 'ui.createGroup.description.placeholder'
+    }
+});
+const classes = {
+    root: `${PREFIX}-root`,
+    active: `${PREFIX}-active`,
+    title: `${PREFIX}-title`,
+    header: `${PREFIX}-header`,
+    cover: `${PREFIX}-cover`,
+    avatar: `${PREFIX}-avatar`,
+    form: `${PREFIX}-form`,
+    switch: `${PREFIX}-switch`,
+    switchLabel: `${PREFIX}-switch-label`,
+    name: `${PREFIX}-name`,
+    description: `${PREFIX}-description`,
+    content: `${PREFIX}-content`,
+    privacySection: `${PREFIX}-privacy-section`,
+    privacySectionInfo: `${PREFIX}-privacy-section-info`,
+    visibilitySection: `${PREFIX}-visibility-section`,
+    visibilitySectionInfo: `${PREFIX}-visibility-section-info`,
+    inviteSection: `${PREFIX}-invite-section`
+};
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS Create Group Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateGroupButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateGroup` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateGroup-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CreateGroup(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, open = true, onClose, group } = props, rest = __rest(props, ["className", "open", "onClose", "group"]);
+    // TODO: fare initial state con tutti i fields per la gestione dell'edit
+    // STATE
+    const [avatar, setAvatar] = useState('');
+    const [cover, setCover] = useState('');
+    const [name, setName] = useState('');
+    const [invitedUsers, setInvitedUsers] = useState(null);
+    const [description, setDescription] = useState('');
+    const [isPublic, setIsPublic] = useState(true);
+    const [isVisible, setIsVisible] = useState(true);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    // INTL
+    const intl = useIntl();
+    // CONTEXT
+    // PREFERENCES
+    const scPreferences = useSCPreferences();
+    const _backgroundCover = Object.assign({}, (cover
+        ? { background: `url('${cover}') center / cover` }
+        : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
+    function handleChangeAvatar(avatar) {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            setAvatar(reader.result);
+        };
+        reader.readAsDataURL(avatar);
+    }
+    function handleChangeCover(cover) {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            setCover(reader.result);
+        };
+        reader.readAsDataURL(cover);
+    }
+    const handleSubmit = () => {
+        setIsSubmitting(true);
+        const formData = new FormData();
+        formData.append('name', name);
+        formData.append('description', description);
+        formData.append('privacy', isPublic ? SCGroupPrivacyType.PUBLIC : SCGroupPrivacyType.PRIVATE);
+        formData.append('image_original', avatar);
+        formData.append('emotional_image_original', cover);
+        formData.append('visible', isVisible);
+        for (const key in invitedUsers) {
+            formData.append(key, invitedUsers[key]);
+        }
+        GroupService.createGroup(formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+            .then((data) => {
+            console.log(data);
+            setIsSubmitting(false);
+        })
+            .catch((error) => {
+            setIsSubmitting(false);
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    };
+    const handleInviteSection = (data) => {
+        setInvitedUsers(data);
+    };
+    /**
+     * Renders root object
+     */
+    return (React.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (React.createElement(FormattedMessage, { id: "ui.createGroup.title.edit", defaultMessage: "ui.createGroup.title.edit" })) : (React.createElement(FormattedMessage, { id: "ui.createGroup.title", defaultMessage: "ui.createGroup.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: React.createElement(LoadingButton, { loading: isSubmitting, disabled: !name, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (React.createElement(FormattedMessage, { id: "ui.createGroup.button.edit", defaultMessage: "ui.createGroup.button.edit" })) : (React.createElement(FormattedMessage, { id: "ui.createGroup.button.create", defaultMessage: "ui.createGroup.button.create" }))) }, rest),
+        React.createElement(React.Fragment, null,
+            React.createElement(React.Fragment, null,
+                React.createElement(Paper, { style: _backgroundCover, classes: { root: classes.cover } },
+                    React.createElement(Box, { className: classes.avatar },
+                        React.createElement(Avatar, null, avatar ? React.createElement("img", { src: avatar, alt: "avatar" }) : React.createElement(Icon, null, "icon_image"))),
+                    React.createElement(React.Fragment, null,
+                        React.createElement(ChangeGroupPicture, { isCreationMode: true, onChange: handleChangeAvatar }),
+                        React.createElement(ChangeGroupCover, { isCreationMode: true, onChange: handleChangeCover }))),
+                React.createElement(Typography, { className: classes.header, align: "center" },
+                    React.createElement(FormattedMessage, { id: "ui.createGroup.header", defaultMessage: "ui.createGroup.header" }))),
+            React.createElement(FormGroup, { className: classes.form },
+                React.createElement(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value), InputProps: {
+                        endAdornment: React.createElement(Typography, { variant: "body2" }, GROUP_TITLE_MAX_LENGTH - name.length)
+                    } }),
+                React.createElement(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: description, onChange: (event) => setDescription(event.target.value), InputProps: {
+                        endAdornment: React.createElement(Typography, { variant: "body2" }, GROUP_DESCRIPTION_MAX_LENGTH - description.length)
+                    } }),
+                React.createElement(Box, { className: classes.privacySection },
+                    React.createElement(Typography, { variant: "h4" },
+                        React.createElement(FormattedMessage, { id: "ui.createGroup.privacy.title", defaultMessage: "ui.createGroup.privacy.title", values: { b: (chunks) => React.createElement("strong", null, chunks) } })),
+                    React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
+                        React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: !isPublic }) },
+                            React.createElement(Icon, null, "private"),
+                            React.createElement(FormattedMessage, { id: "ui.createGroup.privacy.private", defaultMessage: "ui.createGroup.privacy.private" })),
+                        React.createElement(Switch, { className: classes.switch, checked: isPublic, onClick: () => setIsPublic(!isPublic) }),
+                        React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: isPublic }) },
+                            React.createElement(Icon, null, "public"),
+                            React.createElement(FormattedMessage, { id: "ui.createGroup.privacy.public", defaultMessage: "ui.createGroup.privacy.public" }))),
+                    React.createElement(Typography, { variant: "body2", className: classes.privacySectionInfo }, isPublic ? (React.createElement(FormattedMessage, { id: "ui.createGroup.privacy.public.info", defaultMessage: "ui.createGroup.privacy.public.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } })) : (React.createElement(FormattedMessage, { id: "ui.createGroup.privacy.private.info", defaultMessage: "ui.createGroup.private.public.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } })))),
+                React.createElement(Box, { className: classes.visibilitySection }, !isPublic && (React.createElement(React.Fragment, null,
+                    React.createElement(Typography, { variant: "h4" },
+                        React.createElement(FormattedMessage, { id: "ui.createGroup.visibility.title", defaultMessage: "ui.createGroup.visibility.title", values: { b: (chunks) => React.createElement("strong", null, chunks) } })),
+                    React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
+                        React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: !isVisible }) },
+                            React.createElement(Icon, null, "visibility_off"),
+                            React.createElement(FormattedMessage, { id: "ui.createGroup.visibility.hidden", defaultMessage: "ui.createGroup.visibility.hidden" })),
+                        React.createElement(Switch, { className: classes.switch, checked: isVisible, onClick: () => setIsVisible(!isVisible) }),
+                        React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: isVisible }) },
+                            React.createElement(Icon, null, "visibility"),
+                            React.createElement(FormattedMessage, { id: "ui.createGroup.visibility.visible", defaultMessage: "ui.createGroup.visibility.visible" }))),
+                    React.createElement(Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !isVisible ? (React.createElement(FormattedMessage, { id: "ui.createGroup.visibility.hidden.info", defaultMessage: "ui.createGroup.visibility.hidden.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } })) : (React.createElement(FormattedMessage, { id: "ui.createGroup.visibility.visible.info", defaultMessage: "ui.createGroup.visibility.visible.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } }))))))),
+            React.createElement(Divider, null),
+            React.createElement(Box, { className: classes.inviteSection },
+                React.createElement(GroupInviteButton, { handleInvitations: handleInviteSection })))));
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+import { ButtonProps } from '@mui/material/Button/Button';
+import { CreateGroupProps } from '../CreateGroup';
+export interface CreateGroupButtonProps extends ButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Props to spread to CreateGroup component
+     * @default empty object
+     */
+    CreateGroupProps?: CreateGroupProps;
+    /**
+     * 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 {CreateGroupButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateGroupButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateGroupButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CreateGroupButton(inProps: CreateGroupButtonProps): JSX.Element;