merged with develop

.github/workflows/storybook-s3-dev.yml

@@ -32,6 +32,7 @@ jobs:
           '@bubbles-ui/calendars': patch
           '@bubbles-ui/editors': patch
           '@bubbles-ui/leemons': patch
+          '@bubbles-ui/extras': patch
           '@bubbles-ui/icons': patch
           ---
 

packages/calendars/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @bubbles-ui/calendars
 
+## 1.2.46
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.46
+  - @bubbles-ui/icons@1.2.46
+
+## 1.2.45
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.45
+  - @bubbles-ui/icons@1.2.45
+
+## 1.2.44
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.44
+  - @bubbles-ui/icons@1.2.44
+
+## 1.2.43
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.43
+  - @bubbles-ui/icons@1.2.43
+
+## 1.2.42
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.42
+  - @bubbles-ui/icons@1.2.42
+
+## 1.2.41
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.41
+  - @bubbles-ui/icons@1.2.41
+
 ## 1.2.40
 
 ### Patch Changes

packages/calendars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bubbles-ui/calendars",
-  "version": "1.2.40",
+  "version": "1.2.46",
   "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -59,10 +59,10 @@
     "rrule": "^2.6.8"
   },
   "peerDependencies": {
-    "@bubbles-ui/components": "^1.2.40",
-    "@bubbles-ui/icons": "^1.2.40",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@bubbles-ui/components": "^1.2.46",
+    "@bubbles-ui/icons": "^1.2.46",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "webpack": "*"
   },
   "devDependencies": {

packages/components/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @bubbles-ui/components
 
+## 1.2.46
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.46
+
+## 1.2.45
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.45
+
+## 1.2.44
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.44
+
+## 1.2.43
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.43
+
+## 1.2.42
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.42
+
+## 1.2.41
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.41
+
 ## 1.2.40
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bubbles-ui/components",
-  "version": "1.2.40",
+  "version": "1.2.46",
   "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -61,7 +61,7 @@
     "chromatic": "npx chromatic --project-token=7b10302a7b6b --build-script-name=build:storybook:raw"
   },
   "dependencies": {
-    "@bubbles-ui/icons": "^1.2.40",
+    "@bubbles-ui/icons": "^1.2.46",
     "@emotion/react": "^11.10.0",
     "@heroicons/react": "^1.0.5",
     "@hookform/resolvers": "^3.3.2",
@@ -74,12 +74,10 @@
     "@mantine/spotlight": "5.5.5",
     "@nivo/bar": "^0.79.1",
     "@nivo/core": "^0.79.0",
-    "@yaireo/tagify": "^4.9.4",
     "colord": "^2.9.2",
     "dayjs": "^1.10.7",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
-    "macy": "^2.5.1",
     "namor": "^2.0.3",
     "prop-types": "^15.7.2",
     "react-beautiful-dnd": "^13.1.0",
@@ -91,10 +89,11 @@
     "react-multiline-clamp": "^2.0.0",
     "react-router-dom": "^5.3.0",
     "react-table": "^7.7.0",
+    "react-table-sticky": "^1.1.3",
     "react-zoom-pan-pinch": "^2.1.3",
     "simplebar-react": "^2.3.6",
-    "swiper": "^8.1.4",
     "uuid": "^8.3.2",
+    "html2canvas": "^1.4.1",
     "zod": "^3.22.4"
   },
   "peerDependencies": {

packages/components/src/form/Button/Button.styles.js

@@ -164,7 +164,7 @@ export const ButtonStyles = createStyles(
       hasLeftIcon,
       hasRightIcon,
       isSelected,
-    }
+    },
   ) => {
     const currentVariant = getVariant(variant, theme, color);
     const buttonTheme = theme.other.button;
@@ -235,5 +235,5 @@ export const ButtonStyles = createStyles(
         ...buttonTheme.content.typo,
       },
     };
-  }
+  },
 );

packages/components/src/form/index.js

@@ -6,7 +6,6 @@ export * from './InputWrapper';
 export * from './InputLabel';
 export * from './ActionButton';
 export * from './BooleanInput';
-export * from './TagifyInput';
 export * from './ColorPicker';
 export * from './NumberInput';
 export * from './MultiSelect';
@@ -33,3 +32,4 @@ export * from './Autocomplete';
 export * from './ImagePreviewInput';
 export * from './SearchInput';
 export * from './ScoreInput';
+export * from './mixins/fieldStyles.mixins';

packages/components/src/helpers/getUserFullName.js

@@ -0,0 +1,9 @@
+function getUserFullName(user) {
+  return (
+    (user.name ? user.name : '') +
+    (user.surnames ? ` ${user.surnames}` : '') +
+    (user.secondSurname ? ` ${user.secondSurname}` : '')
+  );
+}
+
+export { getUserFullName };

packages/components/src/helpers/index.js

@@ -1 +1,2 @@
 export * from './stringToHslColor';
+export * from './getUserFullName'

packages/components/src/hooks/index.js

@@ -1,2 +1,3 @@
 export * from './useDebouncedCallback';
 export * from './useResizeObserver';
+export * from './useHTMLToCanvas';

packages/components/src/hooks/useHTMLToCanvas.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import html2canvas from 'html2canvas';
+
+const useHTMLToCanvas = (ref) => {
+  const [canvasImage, setCanvasImage] = useState();
+  const renderCanvas = async () => {
+    if (ref.current) {
+      const canvas = await html2canvas(ref.current);
+      const response = canvas.toDataURL('image/png');
+      setCanvasImage(response);
+    }
+  };
+  useEffect(() => {
+    renderCanvas();
+  }, [ref.current]);
+  return { canvasImage };
+};
+
+export { useHTMLToCanvas };
+export default useHTMLToCanvas;

packages/components/src/index.js

@@ -44,6 +44,7 @@ export {
   getHtmlStyles,
   getBoxShadowFromToken,
 } from './theme.mixins';
+export { PALETTE } from './theme.constants';
 export { COLORS } from './theme.tokens';
 export { colord } from 'colord';
 export { Helmet } from 'react-helmet';
@@ -54,6 +55,7 @@ export * from './informative';
 export * from './navigation';
 export * from './typography';
 export * from './feedback';
+export * from './helpers';
 export * from './overlay';
 export * from './layout';
 export * from './assets';

packages/components/src/informative/ChatMessage/ChatMessage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Highlight } from '@mantine/core';
 import { Box } from '../../layout/Box';
 import { Avatar } from '../Avatar';
-import { getUserFullName } from '../../navigation/MainNav/helpers/getUserFullName';
+import { getUserFullName } from '../../helpers/getUserFullName';
 import { ChatMessageStyles } from './ChatMessage.styles';
 import { CHAT_MESSAGE_DEFAULT_PROPS, CHAT_MESSAGE_PROP_TYPES } from './ChatMessage.constants';
 
@@ -28,7 +28,7 @@ const ChatMessage = ({
     <Box className={classes.root}>
       {showUser && !isOwn ? (
         <Box className={classes.avatar}>
-          <Avatar image={user.avatar} size="sm" state={user.state} />
+          <Avatar image={user.avatar} size="sm" state={user.state} fullName={fullName} />
         </Box>
       ) : null}