BA-2205 Copy messages to clipboard

packages/authentication/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/authentication
 
+## 4.1.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@3.1.5
+
 ## 4.1.5
 
 ### Patch Changes

packages/authentication/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/authentication",
   "description": "Authentication modules.",
-  "version": "4.1.5",
+  "version": "4.1.6",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/components/.storybook/main.ts

@@ -14,11 +14,16 @@ const config: StorybookConfig = {
     resolve(__dirname, './*.mdx'),
     resolve(__dirname, '../modules/**/__storybook__/*.mdx'),
     resolve(__dirname, '../../design-system/components/**/__storybook__/*.mdx'),
+    resolve(__dirname, '../../design-system/providers/**/__storybook__/*.mdx'),
     resolve(__dirname, '../modules/**/__storybook__/stories.@(js|jsx|mjs|ts|tsx)'),
     resolve(
       __dirname,
       '../../design-system/components/**/__storybook__/stories.@(js|jsx|mjs|ts|tsx)',
     ),
+    resolve(
+      __dirname,
+      '../../design-system/providers/**/__storybook__/stories.@(js|jsx|mjs|ts|tsx)',
+    ),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),

packages/components/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @baseapp-frontend/components
 
+## 1.0.4
+
+### Patch Changes
+
+- Implement a snackbar component with a 'progress bar' indicating the remaining time before it automatically disappears
+- Updated dependencies
+  - @baseapp-frontend/design-system@1.0.4
+  - @baseapp-frontend/utils@3.1.5
+  - @baseapp-frontend/authentication@4.1.6
+  - @baseapp-frontend/graphql@1.2.6
+
 ## 1.0.3
 
 ### Patch Changes

packages/components/modules/messages/web/MessagesList/MessagesGroup/UserMessage/MessageItem/index.tsx

@@ -6,6 +6,7 @@ import {
   DownloadIcon,
   PenEditIcon,
 } from '@baseapp-frontend/design-system/components/web/icons'
+import { useNotification } from '@baseapp-frontend/utils'
 
 import { Typography } from '@mui/material'
 import { useFragment } from 'react-relay'
@@ -21,6 +22,7 @@ const MessageItem: FC<MessageItemProps> = ({ messageRef, isFirstGroupedMessage }
   const message = useFragment(MessageItemFragment, messageRef)
   const isOwnMessage = currentProfile?.id === message?.profile?.id
   const messageCardRef = useRef<HTMLDivElement>(null)
+  const { sendToast } = useNotification()
 
   const [isEditMode, setIsEditMode] = useState(false)
 
@@ -53,7 +55,10 @@ const MessageItem: FC<MessageItemProps> = ({ messageRef, isFirstGroupedMessage }
           disabled: false,
           icon: <CopyIcon />,
           label: 'Copy',
-          onClick: () => {}, // TODO: Implement copy message
+          onClick: () => {
+            navigator.clipboard.writeText(message?.content || '')
+            sendToast('Message copied to clipboard.', { type: 'info', shouldShowProgress: true })
+          },
           hasPermission: true,
         },
         {

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "sideEffects": false,
   "scripts": {
     "babel:bundle": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",

packages/design-system/.storybook/main.ts

@@ -13,7 +13,9 @@ const config: StorybookConfig = {
   stories: [
     './*.mdx',
     '../components/**/__storybook__/*.mdx',
+    '../providers/**/__storybook__/*.mdx',
     '../components/**/__storybook__/stories.@(js|jsx|mjs|ts|tsx)',
+    '../providers/**/__storybook__/stories.@(js|jsx|mjs|ts|tsx)',
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),

packages/design-system/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @baseapp-frontend/design-system
 
+## 1.0.4
+
+### Patch Changes
+
+- Implement a snackbar component with a 'progress bar' indicating the remaining time before it automatically disappears
+- Updated dependencies
+  - @baseapp-frontend/utils@3.1.5
+
 ## 1.0.3
 
 ### Patch Changes

packages/design-system/components/web/icons/ErrorIcon/index.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react'
+
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+const ErrorIcon: FC<SvgIconProps> = ({ sx, ...props }) => (
+  <SvgIcon sx={{ fontSize: 20, color: 'text.primary', ...sx }} {...props}>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="Group">
+        <g id="Group_2">
+          <path
+            id="Path"
+            d="M12 12V7.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Path_2"
+            d="M11.999 15.5C11.861 15.5 11.749 15.612 11.75 15.75C11.75 15.888 11.862 16 12 16C12.138 16 12.25 15.888 12.25 15.75C12.25 15.612 12.138 15.5 11.999 15.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Path_3"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3 14.3815V9.61948C3 8.01748 3.852 6.53648 5.236 5.73048L9.736 3.11148C11.135 2.29748 12.864 2.29748 14.263 3.11148L18.763 5.73048C20.148 6.53648 21 8.01748 21 9.61948V14.3815C21 15.9835 20.148 17.4645 18.764 18.2705L14.264 20.8895C12.865 21.7035 11.136 21.7035 9.737 20.8895L5.237 18.2705C3.852 17.4645 3 15.9835 3 14.3815Z"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </g>
+    </svg>
+  </SvgIcon>
+)
+
+export default ErrorIcon

packages/design-system/components/web/icons/index.ts

@@ -11,6 +11,7 @@ export { default as CloseIcon } from './CloseIcon'
 export { default as CommentReplyIcon } from './CommentReplyIcon'
 export { default as CopyIcon } from './CopyIcon'
 export { default as DownloadIcon } from './DownloadIcon'
+export { default as ErrorIcon } from './ErrorIcon'
 export { default as FavoriteIcon } from './FavoriteIcon'
 export { default as FavoriteSelectedIcon } from './FavoriteSelectedIcon'
 export { default as LinkIcon } from './LinkIcon'

packages/design-system/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/design-system",
   "description": "Design System components and configurations.",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "sideEffects": false,
   "scripts": {
     "tsup:bundle": "tsup --tsconfig tsconfig.build.json",

packages/design-system/providers/web/SnackbarProvider/ProgressBar/index.tsx

@@ -0,0 +1,12 @@
+import { FC } from 'react'
+
+import { ProgressBarContainer, ProgressContainer } from './styled'
+import { ProgressAnimationProps } from './types'
+
+const ProgressAnimation: FC<ProgressAnimationProps> = ({ animationTime, severity }) => (
+  <ProgressContainer severity={severity}>
+    <ProgressBarContainer {...{ severity, animationTime }} />
+  </ProgressContainer>
+)
+
+export default ProgressAnimation

packages/design-system/providers/web/SnackbarProvider/ProgressBar/styled.tsx

@@ -0,0 +1,34 @@
+import { Box, alpha } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+import { AlertContainerProps, ProgressBarContainerProps } from './types'
+
+export const ProgressContainer = styled(Box)<AlertContainerProps>(({ theme, severity }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  width: '100%',
+  height: '4px',
+  backgroundColor:
+    severity === 'info'
+      ? alpha(theme.palette.grey[500], 0.24)
+      : alpha(theme.palette[severity].main, 0.24),
+}))
+
+export const ProgressBarContainer = styled(Box)<ProgressBarContainerProps>(
+  ({ theme, animationTime, severity }) => ({
+    borderRadius: '50px',
+    animation: `increase-width ${animationTime}ms linear forwards`,
+    '@keyframes increase-width': {
+      from: {
+        width: 0,
+      },
+      to: {
+        width: '100%',
+      },
+    },
+    height: '100%',
+    backgroundColor:
+      severity === 'info' ? theme.palette.text.primary : theme.palette[severity].main,
+  }),
+)

packages/design-system/providers/web/SnackbarProvider/ProgressBar/types.ts

@@ -0,0 +1,9 @@
+import { AlertColor, BoxProps } from '@mui/material'
+
+type SeverityProp = { severity: AlertColor }
+type AnimationTimeProp = { animationTime: number }
+
+export type ProgressAnimationProps = SeverityProp & AnimationTimeProp
+
+export type AlertContainerProps = SeverityProp & BoxProps
+export type ProgressBarContainerProps = ProgressAnimationProps & BoxProps

packages/design-system/providers/web/SnackbarProvider/__storybook__/Snackbar.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/SnackbarProvider/SnackbarProvider" />
+
+# Component Documentation
+
+## SnackbarProvider
+
+- **Purpose**: A customized wrapper around MUI's snackbar displaying messages from the notification store. It provides consistent styling for icons and a uniform color scheme.
+- **Expected Behavior**: Renders messages set with 'useNotification'. The messages disappear automatically after a fixed amount of time, but can also be dismissed before by clicking on a close icon. The component can be used with or without a bar indicating the remaining time before the message is dismissed. If used without a bar, the time until automatic dismissal is restarted after the user interacts with the message, if used with bar the message is always dismissed after the timeout, no matter whether the user interacted with it or not.
+
+## Props
+
+- **children** (ReactNode): The content wrapped by the SnackbarProvider. Any components in this wrapped content can make use of 'useNotification' to display messages
+- **shouldShowProgress** (Boolean): The default for showing the progress bar, indicating the time left before the snackbar disappears. Will be overwritten by the 'shouldShowProgress' option of sendToast, if it is set.
+- **...other**: All other props are passed to the snackbar
+
+## Example Usage
+
+```javascript
+import { SnackbarProvider } from '@baseapp-frontend/design-system/web'
+import { useNotification } from '@baseapp-frontend/utils'
+
+const MessageEmitter = () => {
+  const { sendToast } = useNotification()
+
+  return (
+    <>
+      <Button onClick={() => sendToast("Button 1 was clicked", {type: "info"})}>
+        Click this button to display a message without progress bar.
+      </Button>
+      <Button onClick={() => sendToast("Button 2 was clicked", {type: "info", shouldShowProgress: true})}>
+        Click this button to display a message with progress bar.
+      </Button>
+    < />
+  )
+}
+
+const MyComponent = () => {
+  return (
+    <SnackbarProvider>
+      <MessageEmitter />
+    </SnackbarProvider>
+  )
+}
+```