@selfcommunity/react-ui 0.7.9-alpha.0 → 0.7.9-alpha.2

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

@@ -0,0 +1,55 @@
+export interface ChangeGroupCoverProps {
+    /**
+     * 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 cover loading in the create group modal.
+     * @default false
+     */
+    isCreationMode?: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > 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: ChangeGroupCoverProps): JSX.Element;

package/lib/cjs/components/ChangeGroupCover/ChangeGroupCover.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const react_intl_1 = require("react-intl");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const lab_1 = require("@mui/lab");
+const api_services_1 = require("@selfcommunity/api-services");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+const messages = (0, react_intl_1.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
+ */
+function ChangeGroupCover(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { groupId, onChange, autoHide, className, isCreationMode = false } = props, rest = tslib_1.__rest(props, ["groupId", "onChange", "autoHide", "className", "isCreationMode"]);
+    //CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    //STATE
+    let fileInput = (0, react_1.useRef)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [alert, setAlert] = (0, react_1.useState)(null);
+    // INTL
+    const intl = (0, react_intl_1.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);
+        api_services_1.GroupService.changeGroupAvatarOrCover(groupId, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+            .then((data) => {
+            onChange && onChange(data.emotional_image);
+            setLoading(false);
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            setLoading(false);
+            setAlert(intl.formatMessage(messages.errorLoadImage));
+        });
+    }
+    /**
+     * If there is an error
+     */
+    if (alert) {
+        return (react_1.default.createElement(material_1.Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+    }
+    /**
+     * Renders root object (if not hidden by autoHide prop)
+     */
+    if (!autoHide) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
+            react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
+                react_1.default.createElement(Icon_1.default, null, "image"))));
+    }
+    return null;
+}
+exports.default = ChangeGroupCover;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCChangeGroupCoverButton';

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

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

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

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

package/lib/cjs/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/cjs/components/ChangeGroupPicture/ChangeGroupPicture.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const Errors_1 = require("../../constants/Errors");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const react_intl_1 = require("react-intl");
+const lab_1 = require("@mui/lab");
+const messages = (0, react_intl_1.defineMessages)({
+    errorLoadImage: {
+        id: 'ui.changeGroupCover.button.change.alertErrorImage',
+        defaultMessage: 'ui.changeGroupCover.button.change.alertErrorImage'
+    }
+});
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+    name: constants_1.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
+ */
+function ChangeGroupPicture(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { groupId, onChange, autoHide, className, isCreationMode = false } = props, rest = tslib_1.__rest(props, ["groupId", "onChange", "autoHide", "className", "isCreationMode"]);
+    //STATE
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [alert, setAlert] = (0, react_1.useState)(null);
+    let fileInput = (0, react_1.useRef)(null);
+    //CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    // INTL
+    const intl = (0, react_intl_1.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);
+        api_services_1.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);
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    }
+    /**
+     * If there is an error
+     */
+    if (alert) {
+        return (react_1.default.createElement(material_1.Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+    }
+    /**
+     * Renders the component (if not hidden by autoHide prop)
+     */
+    if (!autoHide) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
+            react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
+                react_1.default.createElement(Icon_1.default, null, "photo_camera"))));
+    }
+    return null;
+}
+exports.default = ChangeGroupPicture;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCChangeGroupPictureButton';

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

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

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

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

package/lib/cjs/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/cjs/components/CreateGroup/CreateGroup.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const system_1 = require("@mui/system");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("./constants");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const lab_1 = require("@mui/lab");
+const ChangeGroupPicture_1 = tslib_1.__importDefault(require("../ChangeGroupPicture"));
+const ChangeGroupCover_1 = tslib_1.__importDefault(require("../ChangeGroupCover"));
+const Group_1 = require("../../constants/Group");
+const GroupInviteButton_1 = tslib_1.__importDefault(require("../GroupInviteButton"));
+const types_1 = require("@selfcommunity/types");
+const Errors_1 = require("../../constants/Errors");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const messages = (0, react_intl_1.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: `${constants_1.PREFIX}-root`,
+    active: `${constants_1.PREFIX}-active`,
+    title: `${constants_1.PREFIX}-title`,
+    header: `${constants_1.PREFIX}-header`,
+    cover: `${constants_1.PREFIX}-cover`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    form: `${constants_1.PREFIX}-form`,
+    switch: `${constants_1.PREFIX}-switch`,
+    switchLabel: `${constants_1.PREFIX}-switch-label`,
+    name: `${constants_1.PREFIX}-name`,
+    description: `${constants_1.PREFIX}-description`,
+    content: `${constants_1.PREFIX}-content`,
+    privacySection: `${constants_1.PREFIX}-privacy-section`,
+    privacySectionInfo: `${constants_1.PREFIX}-privacy-section-info`,
+    visibilitySection: `${constants_1.PREFIX}-visibility-section`,
+    visibilitySectionInfo: `${constants_1.PREFIX}-visibility-section-info`,
+    inviteSection: `${constants_1.PREFIX}-invite-section`
+};
+const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.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
+ */
+function CreateGroup(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, open = true, onClose, group } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "group"]);
+    // TODO: fare initial state con tutti i fields per la gestione dell'edit
+    // STATE
+    const [avatar, setAvatar] = (0, react_1.useState)('');
+    const [cover, setCover] = (0, react_1.useState)('');
+    const [name, setName] = (0, react_1.useState)('');
+    const [invitedUsers, setInvitedUsers] = (0, react_1.useState)(null);
+    const [description, setDescription] = (0, react_1.useState)('');
+    const [isPublic, setIsPublic] = (0, react_1.useState)(true);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    // CONTEXT
+    // PREFERENCES
+    const scPreferences = (0, react_core_1.useSCPreferences)();
+    const _backgroundCover = Object.assign({}, (cover
+        ? { background: `url('${cover}') center / cover` }
+        : { background: `url('${scPreferences.preferences[react_core_1.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 ? types_1.SCGroupPrivacyType.PUBLIC : types_1.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]);
+        }
+        api_services_1.GroupService.createGroup(formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+            .then((data) => {
+            console.log(data);
+            setIsSubmitting(false);
+        })
+            .catch((error) => {
+            setIsSubmitting(false);
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    };
+    const handleInviteSection = (data) => {
+        setInvitedUsers(data);
+    };
+    /**
+     * Renders root object
+     */
+    return (react_1.default.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.title.edit", defaultMessage: "ui.createGroup.title.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.title", defaultMessage: "ui.createGroup.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: react_1.default.createElement(lab_1.LoadingButton, { loading: isSubmitting, disabled: !name, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.button.edit", defaultMessage: "ui.createGroup.button.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.button.create", defaultMessage: "ui.createGroup.button.create" }))) }, rest),
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } },
+                    react_1.default.createElement(material_1.Box, { className: classes.avatar },
+                        react_1.default.createElement(material_1.Avatar, null, avatar ? react_1.default.createElement("img", { src: avatar, alt: "avatar" }) : react_1.default.createElement(material_1.Icon, null, "icon_image"))),
+                    react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(ChangeGroupPicture_1.default, { isCreationMode: true, onChange: handleChangeAvatar }),
+                        react_1.default.createElement(ChangeGroupCover_1.default, { isCreationMode: true, onChange: handleChangeCover }))),
+                react_1.default.createElement(material_1.Typography, { className: classes.header, align: "center" },
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.header", defaultMessage: "ui.createGroup.header" }))),
+            react_1.default.createElement(material_1.FormGroup, { className: classes.form },
+                react_1.default.createElement(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value), InputProps: {
+                        endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Group_1.GROUP_TITLE_MAX_LENGTH - name.length)
+                    } }),
+                react_1.default.createElement(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: description, onChange: (event) => setDescription(event.target.value), InputProps: {
+                        endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Group_1.GROUP_DESCRIPTION_MAX_LENGTH - description.length)
+                    } }),
+                react_1.default.createElement(material_1.Box, { className: classes.privacySection },
+                    react_1.default.createElement(material_1.Typography, { variant: "h4" },
+                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.privacy.title", defaultMessage: "ui.createGroup.privacy.title", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })),
+                    react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
+                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !isPublic }) },
+                            react_1.default.createElement(material_1.Icon, null, "private"),
+                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.privacy.private", defaultMessage: "ui.createGroup.privacy.private" })),
+                        react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: isPublic, onClick: () => setIsPublic(!isPublic) }),
+                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: isPublic }) },
+                            react_1.default.createElement(material_1.Icon, null, "public"),
+                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.privacy.public", defaultMessage: "ui.createGroup.privacy.public" }))),
+                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.privacySectionInfo }, isPublic ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.privacy.public.info", defaultMessage: "ui.createGroup.privacy.public.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.privacy.private.info", defaultMessage: "ui.createGroup.private.public.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })))),
+                react_1.default.createElement(material_1.Box, { className: classes.visibilitySection }, !isPublic && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(material_1.Typography, { variant: "h4" },
+                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.visibility.title", defaultMessage: "ui.createGroup.visibility.title", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })),
+                    react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
+                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !isVisible }) },
+                            react_1.default.createElement(material_1.Icon, null, "visibility_off"),
+                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.visibility.hidden", defaultMessage: "ui.createGroup.visibility.hidden" })),
+                        react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: isVisible, onClick: () => setIsVisible(!isVisible) }),
+                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: isVisible }) },
+                            react_1.default.createElement(material_1.Icon, null, "visibility"),
+                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.visibility.visible", defaultMessage: "ui.createGroup.visibility.visible" }))),
+                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !isVisible ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.visibility.hidden.info", defaultMessage: "ui.createGroup.visibility.hidden.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.visibility.visible.info", defaultMessage: "ui.createGroup.visibility.visible.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } }))))))),
+            react_1.default.createElement(material_1.Divider, null),
+            react_1.default.createElement(material_1.Box, { className: classes.inviteSection },
+                react_1.default.createElement(GroupInviteButton_1.default, { handleInvitations: handleInviteSection })))));
+}
+exports.default = CreateGroup;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCreateGroup';

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

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

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

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