cozy-sharing 10.4.0 → 11.0.0

package/src/components/{Recipient/RecipientsAvatars.spec.jsx → Avatar/AvatarList.spec.jsx}

@@ -3,10 +3,11 @@ import React from 'react'
 
 import { createMockClient } from 'cozy-client'
 
-import RecipientsAvatars, {
+import {
+  AvatarList,
   MAX_DISPLAYED_RECIPIENTS,
   excludeMeAsOwnerFromRecipients
-} from './RecipientsAvatars'
+} from './AvatarList'
 import AppLike from '../../../test/AppLike'
 
 const mockRecipients = new Array(MAX_DISPLAYED_RECIPIENTS - 1)
@@ -42,7 +43,7 @@ const mockMoreRecipientsThanMaxDisplayed = [
   }
 ]
 
-describe('RecipientsAvatars', () => {
+describe('AvatarList', () => {
   const client = createMockClient({})
 
   const setup = ({
@@ -54,7 +55,7 @@ describe('RecipientsAvatars', () => {
   }) => {
     return render(
       <AppLike client={client}>
-        <RecipientsAvatars
+        <AvatarList
           recipients={recipients}
           onClick={onClick}
           isOwner={isOwner}
@@ -70,19 +71,19 @@ describe('RecipientsAvatars', () => {
       link: true
     })
 
-    expect(getByTestId('recipientsAvatars-link')).toBeTruthy()
+    expect(getByTestId('AvatarList-link')).toBeTruthy()
   })
 
   it('should not render link icon if a link is not generated', () => {
     const { queryByTestId } = setup({})
 
-    expect(queryByTestId('recipientsAvatars-link')).toBeNull()
+    expect(queryByTestId('AvatarList-link')).toBeNull()
   })
 
   it('should hide me as owner by default', () => {
     const { queryByTestId } = setup({})
 
-    expect(queryByTestId('recipientsAvatars-avatar-owner')).toBeNull()
+    expect(queryByTestId('AvatarList-avatar-owner')).toBeNull()
   })
 
   it('should show me as owner if required', () => {
@@ -90,7 +91,7 @@ describe('RecipientsAvatars', () => {
       showMeAsOwner: true
     })
 
-    expect(getByTestId('recipientsAvatars-avatar-owner')).toBeTruthy()
+    expect(getByTestId('AvatarList-avatar-owner')).toBeTruthy()
   })
 
   it('should show a +X icon with the correct number if there is more avatars than expected', () => {
@@ -102,7 +103,7 @@ describe('RecipientsAvatars', () => {
     const delta =
       mockMoreRecipientsThanMaxDisplayed.length - MAX_DISPLAYED_RECIPIENTS
 
-    expect(getByTestId('recipientsAvatars-plusX')).toBeTruthy()
+    expect(getByTestId('AvatarList-plusX')).toBeTruthy()
     expect(getByText(`+${delta}`)).toBeTruthy()
   })
 
@@ -113,8 +114,8 @@ describe('RecipientsAvatars', () => {
       link: true
     })
 
-    expect(getByTestId('recipientsAvatars-plusX')).toBeTruthy()
-    expect(getByTestId('recipientsAvatars-link')).toBeTruthy()
+    expect(getByTestId('AvatarList-plusX')).toBeTruthy()
+    expect(getByTestId('AvatarList-link')).toBeTruthy()
   })
 })
 

package/src/components/Avatar/AvatarList.stories.jsx

@@ -0,0 +1,16 @@
+import { AvatarList } from './AvatarList'
+import { recipients } from '../../../.storybook/fixtures/recipients'
+
+const meta = {
+  component: AvatarList,
+  args: {
+    recipients: [...recipients, ...recipients]
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/{Recipient/AvatarPlusX.jsx → Avatar/ExtraAvatar.jsx}

@@ -6,7 +6,7 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
 import { SharingTooltip, TooltipRecipientList } from '../Tooltip'
 
-const AvatarPlusX = ({ className, size, extraRecipients = [] }) => {
+const ExtraAvatar = ({ className, size, extraRecipients = [] }) => {
   const sharingTooltipId = uniqueId('extra-recipients-avatar-')
 
   return (
@@ -27,15 +27,15 @@ const AvatarPlusX = ({ className, size, extraRecipients = [] }) => {
   )
 }
 
-AvatarPlusX.propTypes = {
+ExtraAvatar.propTypes = {
   extraRecipients: PropTypes.arrayOf(PropTypes.string),
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   className: PropTypes.string
 }
 
-AvatarPlusX.defaultProps = {
+ExtraAvatar.defaultProps = {
   extraRecipients: [],
   size: 'medium'
 }
 
-export default AvatarPlusX
+export { ExtraAvatar }

package/src/components/Avatar/ExtraAvatar.stories.jsx

@@ -0,0 +1,13 @@
+import { ExtraAvatar } from './ExtraAvatar'
+
+const meta = {
+  component: ExtraAvatar,
+  args: {}
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/{Recipient/RecipientAvatar.jsx → Avatar/MemberAvatar.jsx}

@@ -5,7 +5,7 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
 import { getDisplayName, getInitials } from '../../models'
 
-const RecipientAvatar = ({ recipient, ...rest }) => {
+const MemberAvatar = ({ recipient, ...rest }) => {
   const client = useClient()
 
   /**
@@ -35,4 +35,4 @@ const RecipientAvatar = ({ recipient, ...rest }) => {
   )
 }
 
-export default RecipientAvatar
+export { MemberAvatar }

package/src/components/Avatar/MemberAvatar.stories.jsx

@@ -0,0 +1,18 @@
+import { MemberAvatar } from './MemberAvatar'
+
+const meta = {
+  component: MemberAvatar,
+  args: {
+    recipient: {
+      avatarPath: null,
+      name: 'John Doe'
+    }
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/ConfirmTrustedRecipientsDialog.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import Recipient from './Recipient/Recipient'
+import MemberRecipient from './Recipient/MemberRecipient'
 import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfirmationContainer'
 
 /**
@@ -20,7 +20,7 @@ const SharingContent = ({ recipientsToBeConfirmed, verifyRecipient }) => {
 
       {recipientsToBeConfirmed.map(recipientConfirmationData => {
         return (
-          <Recipient
+          <MemberRecipient
             {...recipientConfirmationData}
             key={`key_r_${recipientConfirmationData.id}`}
             isOwner={false}

package/src/components/{Recipient/RecipientPlusX.jsx → Identity/ExtraIdentity.jsx}

@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import AvatarPlusX from './AvatarPlusX'
 import Identity from './Identity'
 import { getDisplayName } from '../../models'
 import styles from '../../styles/recipient.styl'
+import { ExtraAvatar } from '../Avatar/ExtraAvatar'
 
-const RecipientPlusX = ({ extraRecipients }, { t }) => (
+const ExtraIdentity = ({ extraRecipients }, { t }) => (
   <div className={styles['recipient']}>
-    <AvatarPlusX
+    <ExtraAvatar
       extraRecipients={extraRecipients.map(recipient =>
         getDisplayName(recipient)
       )}
@@ -21,8 +21,8 @@ const RecipientPlusX = ({ extraRecipients }, { t }) => (
   </div>
 )
 
-RecipientPlusX.contextTypes = {
+ExtraIdentity.contextTypes = {
   t: PropTypes.func.isRequired
 }
 
-export default RecipientPlusX
+export { ExtraIdentity }

package/src/components/Identity/ExtraIdentity.stories.jsx

@@ -0,0 +1,16 @@
+import { ExtraIdentity } from './ExtraIdentity'
+import { recipients } from '../../../.storybook/fixtures/recipients'
+
+const meta = {
+  component: ExtraIdentity,
+  args: {
+    extraRecipients: recipients
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/Identity/Identity.stories.jsx

@@ -0,0 +1,16 @@
+import Identity from './Identity'
+
+const meta = {
+  title: 'Components/Identity/Identity',
+  component: Identity,
+  args: {}
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {
+    name: 'John Doe'
+  }
+}

package/src/components/{Recipient/RecipientWithoutStatus.jsx → Identity/MemberIdentity.jsx}

@@ -6,7 +6,7 @@ import Identity from './Identity'
 import { getDisplayName, getInitials } from '../../models'
 import styles from '../../styles/recipient.styl'
 
-const RecipientWithoutStatus = ({ instance, ...rest }) => {
+const MemberIdentity = ({ instance, ...rest }) => {
   const name = getDisplayName(rest)
   return (
     <div className={styles['recipient']}>
@@ -18,4 +18,4 @@ const RecipientWithoutStatus = ({ instance, ...rest }) => {
   )
 }
 
-export default RecipientWithoutStatus
+export { MemberIdentity }

package/src/components/Identity/MemberIdentity.stories.jsx

@@ -0,0 +1,13 @@
+import { MemberIdentity } from './MemberIdentity'
+
+const meta = {
+  component: MemberIdentity,
+  args: {}
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/Identity/OwnerIdentity.stories.jsx

@@ -0,0 +1,13 @@
+import OwnerIdentity from './OwnerIdentity'
+
+const meta = {
+  component: OwnerIdentity,
+  args: {}
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/Recipient/LinkRecipient.stories.jsx

@@ -0,0 +1,17 @@
+import LinkRecipient from './LinkRecipient'
+
+const meta = {
+  component: LinkRecipient,
+  args: {
+    recipientConfirmationData: false,
+    verifyRecipient: () => true,
+    link: 'test',
+    fadeIn: false
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default'
+}

package/src/components/Recipient/LinkRecipientPermissions.stories.jsx

@@ -0,0 +1,13 @@
+import LinkRecipientPermissions from './LinkRecipientPermissions'
+
+const meta = {
+  component: LinkRecipientPermissions,
+  args: {}
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/Recipient/{Recipient.jsx → MemberRecipient.jsx}

@@ -9,16 +9,16 @@ import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import RecipientAvatar from './RecipientAvatar'
+import MemberRecipientPermissions from './MemberRecipientPermissions'
+import MemberRecipientStatus from './MemberRecipientStatus'
 import RecipientConfirm from './RecipientConfirm'
-import RecipientPermissions from './RecipientPermissions'
-import RecipientStatus from './RecipientStatus'
 import { FADE_IN_DURATION } from '../../helpers/recipients'
 import { getDisplayName } from '../../models'
+import { MemberAvatar } from '../Avatar/MemberAvatar'
 
 const DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName'
 
-const Recipient = props => {
+const MemberRecipient = props => {
   const { t } = useI18n()
   const client = useClient()
 
@@ -41,16 +41,16 @@ const Recipient = props => {
     <RecipientConfirm
       recipientConfirmationData={recipientConfirmationData}
       verifyRecipient={verifyRecipient}
-    ></RecipientConfirm>
+    />
   ) : (
-    <RecipientPermissions {...props} className="u-flex-shrink-0" />
+    <MemberRecipientPermissions {...props} className="u-flex-shrink-0" />
   )
 
   return (
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
       <ListItem disableGutters>
         <ListItemIcon>
-          <RecipientAvatar size="small" recipient={props} />
+          <MemberAvatar size="small" recipient={props} />
         </ListItemIcon>
         <ListItemText
           primary={
@@ -59,7 +59,11 @@ const Recipient = props => {
             </Typography>
           }
           secondary={
-            <RecipientStatus status={status} isMe={isMe} instance={instance} />
+            <MemberRecipientStatus
+              status={status}
+              isMe={isMe}
+              instance={instance}
+            />
           }
         />
         {RightPart}
@@ -68,7 +72,7 @@ const Recipient = props => {
   )
 }
 
-Recipient.propTypes = {
+MemberRecipient.propTypes = {
   instance: PropTypes.string,
   isOwner: PropTypes.bool,
   status: PropTypes.string,
@@ -76,4 +80,4 @@ Recipient.propTypes = {
   verifyRecipient: PropTypes.func
 }
 
-export default Recipient
+export default MemberRecipient

package/src/components/Recipient/{Recipient.spec.jsx → MemberRecipient.spec.jsx}

@@ -3,10 +3,10 @@ import React from 'react'
 
 import { createMockClient } from 'cozy-client'
 
-import Recipient from './Recipient'
+import MemberRecipient from './MemberRecipient'
 import AppLike from '../../../test/AppLike'
 
-describe('Recipient component', () => {
+describe('MemberRecipient component', () => {
   const client = createMockClient({})
   client.options = {
     uri: 'foo.mycozy.cloud'
@@ -15,7 +15,7 @@ describe('Recipient component', () => {
   const setup = props => {
     return render(
       <AppLike client={client}>
-        <Recipient {...props} />
+        <MemberRecipient {...props} />
       </AppLike>
     )
   }

package/src/components/Recipient/MemberRecipient.stories.jsx

@@ -0,0 +1,44 @@
+import MemberRecipient from './MemberRecipient'
+
+const meta = {
+  component: MemberRecipient,
+  args: {
+    instance: 'https://example.com',
+    isOwner: false,
+    status: 'ready',
+    recipientConfirmationData: null,
+    verifyRecipient: () => {},
+    fadeIn: true
+  },
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['ready', 'mail-not-sent', 'pending', 'seen', 'owner'],
+      defaultValue: 'ready'
+    }
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}
+
+export const Owner = {
+  name: 'Owner',
+  args: {
+    isOwner: true,
+    status: 'owner'
+  }
+}
+
+export const RecipientConfirm = {
+  name: 'RecipientConfirm',
+  args: {
+    recipientConfirmationData: {
+      email: 'test'
+    }
+  }
+}

package/src/components/Recipient/{RecipientPermissions.jsx → MemberRecipientPermissions.jsx}

@@ -13,7 +13,7 @@ import ActionMenu, {
 } from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-const RecipientPermissions = ({
+const MemberRecipientPermissions = ({
   isOwner,
   status,
   instance,
@@ -113,4 +113,4 @@ const RecipientPermissions = ({
   )
 }
 
-export default RecipientPermissions
+export default MemberRecipientPermissions

package/src/components/Recipient/MemberRecipientPermissions.stories.jsx

@@ -0,0 +1,13 @@
+import MemberRecipientPermissions from './MemberRecipientPermissions'
+
+const meta = {
+  component: MemberRecipientPermissions,
+  args: {}
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/Recipient/{RecipientStatus.jsx → MemberRecipientStatus.jsx}

@@ -10,7 +10,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import styles from '../../styles/recipient.styl'
 
-const RecipientStatus = ({ status, isMe, instance }) => {
+const MemberRecipientStatus = ({ status, isMe, instance }) => {
   const { t } = useI18n()
 
   const isSendingEmail = !isMe && status === 'mail-not-sent'
@@ -45,4 +45,4 @@ const RecipientStatus = ({ status, isMe, instance }) => {
   )
 }
 
-export default RecipientStatus
+export default MemberRecipientStatus

package/src/components/Recipient/MemberRecipientStatus.stories.jsx

@@ -0,0 +1,13 @@
+import MemberRecipientStatus from './MemberRecipientStatus'
+
+const meta = {
+  component: MemberRecipientStatus,
+  args: {}
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/Recipient/OwnerRecipient.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
+import MemberRecipient from './MemberRecipient'
 import OwnerRecipientDefault from './OwnerRecipientDefault'
-import Recipient from './Recipient'
 
 const OwnerRecipient = ({ recipients }) => {
   const ownerRecipient = recipients.find(
@@ -10,7 +10,7 @@ const OwnerRecipient = ({ recipients }) => {
   )
 
   if (ownerRecipient) {
-    return <Recipient {...ownerRecipient} />
+    return <MemberRecipient {...ownerRecipient} />
   }
 
   return <OwnerRecipientDefault />

package/src/components/Recipient/OwnerRecipient.stories.jsx

@@ -0,0 +1,16 @@
+import OwnerRecipient from './OwnerRecipient'
+import { recipients } from '../../../.storybook/fixtures/recipients'
+
+const meta = {
+  component: OwnerRecipient,
+  args: {
+    recipients
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/Recipient/OwnerRecipientDefault.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { useClient, useQuery, hasQueryBeenLoaded } from 'cozy-client'
 
-import Recipient from './Recipient'
+import MemberRecipient from './MemberRecipient'
 import { buildInstanceSettingsQuery } from '../../queries/queries'
 
 const OwnerRecipientDefault = () => {
@@ -16,7 +16,7 @@ const OwnerRecipientDefault = () => {
 
   return (
     hasQueryBeenLoaded(instanceSettingsResult) && (
-      <Recipient
+      <MemberRecipient
         isOwner={true}
         status="owner"
         instance={client.options.uri}

package/src/components/Recipient/OwnerRecipientDefault.stories.jsx

@@ -0,0 +1,13 @@
+import OwnerRecipientDefault from './OwnerRecipientDefault'
+
+const meta = {
+  component: OwnerRecipientDefault,
+  args: {}
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/Recipient/RecipientConfirm.jsx

@@ -17,15 +17,13 @@ const RecipientConfirm = ({ recipientConfirmationData, verifyRecipient }) => {
   }
 
   return (
-    <>
-      <Button
-        style={{ position: 'initial' }} // fix z-index bug on iOS when under a BottomDrawer due to relative position
-        theme="text"
-        className={modalStyles['aligned-dropdown-button']}
-        onClick={verify}
-        label={t(`Share.twoStepsConfirmation.verify`)}
-      />
-    </>
+    <Button
+      style={{ position: 'initial' }} // fix z-index bug on iOS when under a BottomDrawer due to relative position
+      theme="text"
+      className={modalStyles['aligned-dropdown-button']}
+      onClick={verify}
+      label={t(`Share.twoStepsConfirmation.verify`)}
+    />
   )
 }
 

package/src/components/Recipient/RecipientConfirm.stories.jsx

@@ -0,0 +1,13 @@
+import RecipientConfirm from './RecipientConfirm'
+
+const meta = {
+  component: RecipientConfirm,
+  args: {}
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {}
+}

package/src/components/Recipient/RecipientList.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import Recipient from './Recipient'
+import MemberRecipient from './MemberRecipient'
 import { usePrevious } from '../../helpers/hooks'
 import { filterAndReworkRecipients } from '../../helpers/recipients'
 
@@ -26,7 +26,7 @@ const RecipientList = ({
     )
 
     return (
-      <Recipient
+      <MemberRecipient
         {...recipient}
         key={`key_r_${recipient.index}`}
         isOwner={isOwner}