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

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;

package/lib/esm/components/CreateGroupButton/CreateGroupButton.js

@@ -0,0 +1,70 @@
+import { __rest } from "tslib";
+import React, { useContext } from 'react';
+import { useThemeProps } from '@mui/system';
+import { styled } from '@mui/material/styles';
+import { Button, Icon } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { SCUserContext } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import CreateGroup from '../CreateGroup';
+const PREFIX = 'SCCreateGroupButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+/**
+ *> 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) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, CreateGroupProps = {} } = props, rest = __rest(props, ["className", "CreateGroupProps"]);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    // STATE
+    const [open, setOpen] = React.useState(false);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    /**
+     * Handle click on button
+     */
+    const handleClick = () => {
+        setOpen((p) => !p);
+    };
+    /**
+     * If there's no authUserId, component is hidden.
+     */
+    if (!authUserId) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClick, size: "small", variant: "contained", startIcon: React.createElement(Icon, { fontSize: "small" }, "add") }, rest),
+            React.createElement(FormattedMessage, { id: "ui.createGroupButton", defaultMessage: "ui.createGroupButton" })),
+        open && React.createElement(CreateGroup, Object.assign({}, CreateGroupProps, { open: true, onClose: handleClick }))));
+}

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

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

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

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

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

@@ -0,0 +1,67 @@
+import { ButtonBaseProps } from '@mui/material';
+import { SCGroupType } from '@selfcommunity/types';
+import { WidgetProps } from '../Widget';
+export interface GroupProps extends WidgetProps {
+    /**
+     * Group Object
+     * @default null
+     */
+    group?: SCGroupType;
+    /**
+     * Id of the group for filter the feed
+     * @default null
+     */
+    groupId?: number;
+    /**
+     * Handles actions ignore
+     * @default null
+     */
+    handleIgnoreAction?: (u: any) => void;
+    /**
+     * Badge content to show as group avatar badge if show reaction is true.
+     */
+    badgeContent?: any;
+    /**
+     * Prop to hide actions
+     * @default false
+     */
+    hideActions?: boolean;
+    /**
+     * Props to spread to the button
+     * @default {}
+     */
+    buttonProps?: ButtonBaseProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Group component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a group item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/User)
+
+ #### Import
+
+ ```jsx
+ import {group} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCGroup` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroup-root|Styles applied to the root element.|
+ |avatar|.SCGroup-avatar|Styles applied to the avatar element.|
+
+ *
+ * @param inProps
+ */
+export default function Group(inProps: GroupProps): JSX.Element;

package/lib/esm/components/Group/Group.js

@@ -0,0 +1,93 @@
+import { __rest } from "tslib";
+import React, { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Avatar, Icon, Stack } from '@mui/material';
+import { Link, SCRoutes, useSCFetchGroup, useSCRouting } from '@selfcommunity/react-core';
+import { defineMessages, useIntl } from 'react-intl';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import BaseItemButton from '../../shared/BaseItemButton';
+import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
+import { PREFIX } from './constants';
+import GroupSkeleton from './Skeleton';
+import GroupSubscribeButton from '../GroupSubscribeButton';
+const messages = defineMessages({
+    groupMembers: {
+        id: 'ui.group.members',
+        defaultMessage: 'ui.group.members'
+    }
+});
+const classes = {
+    root: `${PREFIX}-root`,
+    avatar: `${PREFIX}-avatar`,
+    actions: `${PREFIX}-actions`
+};
+const Root = styled(BaseItemButton, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+/**
+ * > API documentation for the Community-JS Group component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a group item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/User)
+
+ #### Import
+
+ ```jsx
+ import {group} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCGroup` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroup-root|Styles applied to the root element.|
+ |avatar|.SCGroup-avatar|Styles applied to the avatar element.|
+
+ *
+ * @param inProps
+ */
+export default function Group(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { groupId = null, group = null, handleIgnoreAction, className = null, elevation, hideActions = false, buttonProps = {}, visible = true } = props, rest = __rest(props, ["groupId", "group", "handleIgnoreAction", "className", "elevation", "hideActions", "buttonProps", "visible"]);
+    // STATE
+    const { scGroup } = useSCFetchGroup({ id: groupId, group });
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    const [openAlert, setOpenAlert] = useState(false);
+    // INTL
+    const intl = useIntl();
+    /**
+     * Render authenticated actions
+     * @return {JSX.Element}
+     */
+    function renderAuthenticatedActions() {
+        return (React.createElement(Stack, { className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 },
+            React.createElement(Icon, null, !visible ? 'private' : 'public'),
+            React.createElement(GroupSubscribeButton, { group: group, groupId: groupId })));
+    }
+    /**
+     * Renders group object
+     */
+    if (!scGroup) {
+        return React.createElement(GroupSkeleton, { elevation: elevation });
+    }
+    /**
+     * Renders root object
+     */
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: classNames(classes.root, className), ButtonBaseProps: buttonProps !== null && buttonProps !== void 0 ? buttonProps : { component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: React.createElement(Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: scGroup.name, secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })),
+        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+}

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

@@ -0,0 +1,22 @@
+import { WidgetProps } from '../Widget';
+/**
+ * > API documentation for the Community-JS Group Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {GroupSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCGroup-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroup-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function GroupSkeleton(props: WidgetProps): JSX.Element;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button, useTheme } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Skeleton from '@mui/material/Skeleton';
+import BaseItem from '../../shared/BaseItem';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-skeleton-root`
+};
+const Root = styled(BaseItem, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Group Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {GroupSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCGroup-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroup-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function GroupSkeleton(props) {
+    const theme = useTheme();
+    return (React.createElement(Root, Object.assign({ className: classes.root }, props, { image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: React.createElement(Button, { size: "small", variant: "outlined", disabled: true },
+            React.createElement(Skeleton, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })) })));
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+import Group, { GroupProps } from './Group';
+import GroupSkeleton from './Skeleton';
+export default Group;
+export { GroupProps, GroupSkeleton };

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

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

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { SCGroupType } from '@selfcommunity/types';
+import { ChangeGroupCoverProps } from '../ChangeGroupCover';
+import { ChangeGroupPictureProps } from '../ChangeGroupPicture';
+import { GroupMembersButtonProps } from '../GroupMembersButton';
+export interface GroupHeaderProps {
+    /**
+     * Id of group object
+     * @default null
+     */
+    id?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Group Object
+     * @default null
+     */
+    group?: SCGroupType;
+    /**
+     * Id of the group
+     * @default null
+     */
+    groupId?: number;
+    /**
+     * Props to spread change picture button
+     * @default {}
+     */
+    ChangePictureProps?: ChangeGroupPictureProps;
+    /**
+     * Props to spread change cover button
+     * @default {}
+     */
+    ChangeCoverProps?: ChangeGroupCoverProps;
+    /**
+     * Props to spread to the group memebers button
+     * @default {}
+     */
+    GroupMembersButtonProps?: GroupMembersButtonProps;
+    /**
+     *
+     */
+    actions?: React.ReactNode;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Group Header component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders the groups top section.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UserProfileHeader)
+
+ #### Import
+
+ ```jsx
+ import {UserProfileHeader} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCGroupHeader` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroupHeader-root|Styles applied to the root element.|
+ |cover|.SCGroupHeader-cover|Styles applied to the cover element.|
+ |avatar|.SCGroupHeader-avatar|Styles applied to the avatar element.|
+ |info|SCGroupHeader-info|Styles applied to the info section.|
+ |name|SCGroupHeader-username|Styles applied to the username element.|
+ |changePicture|.SCGroupHeader-change-picture|Styles applied to changePicture element.|
+ |changeCover|.SCGroupHeader-change-cover`|Styles applied to changeCover element.|
+
+ * @param inProps
+ */
+export default function GroupHeader(inProps: GroupHeaderProps): JSX.Element;