feat(Rebranding): ImagePreviewInput, InputLabels, ContextContainer.

feat(CardEmptyCover): Added cache to increase performance
leemonade · Dec 20, 2023 · 0a76f01 · 0a76f01
1 parent 5c90fb1
commit 0a76f01
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 56 deletions.
diff --git a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { isFunction, isString, isNil } from 'lodash';
-import { CloudUploadIcon, UndoIcon } from '@bubbles-ui/icons/outline/';
+import { CloudUploadIcon, DeleteBinIcon } from '@bubbles-ui/icons/outline/';
 import { Box } from '../../layout/Box';
 import { Stack } from '../../layout/Stack';
 import { Button } from '../Button';
@@ -28,6 +28,7 @@ export const IMAGE_PREVIEW_INPUT_PROP_TYPES = {
   readonly: PropTypes.bool,
   disabled: PropTypes.bool,
   useAria: PropTypes.bool,
+  noPicker: PropTypes.bool,
 };
 
 const ImagePreviewInput = ({
@@ -40,6 +41,7 @@ const ImagePreviewInput = ({
   readonly,
   disabled,
   useAria,
+  noPicker,
 }) => {
   const [imagePreview, setImagePreview] = useState(previewURL);
   const [imageValue, setImageValue] = useState(value);
@@ -79,14 +81,14 @@ const ImagePreviewInput = ({
   };
 
   const getControl = () => {
-    if (!control)
+    if (!control && !noPicker)
       return (
-        <Button variant="outline" leftIcon={<CloudUploadIcon />} onClick={openFileBrowser}>
+        <Button variant="link" leftIcon={<CloudUploadIcon />} onClick={openFileBrowser}>
           {labels.uploadButton}
         </Button>
       );
 
-    return React.cloneElement(control, { onClick: openFileBrowser });
+    return !noPicker ? React.cloneElement(control, { onClick: openFileBrowser }) : null;
   };
 
   useEffect(() => {
@@ -102,23 +104,23 @@ const ImagePreviewInput = ({
       {!imagePreview ? (
         getControl()
       ) : (
-        <Stack spacing={2} fullWidth>
+        <Stack spacing={2} fullWidth alignItems="flex-end">
           <ImageLoader
             src={imagePreview}
             height={132}
             width={224}
-            skipFlex
-            radius={8}
+            noFlex
+            radius={4}
             style={{ ...previewStyle }}
             useAria={useAria}
           />
           {!readonly && !disabled ? (
-            <Box skipFlex>
+            <Box noFlex>
               <Button
-                variant="light"
+                variant="link"
                 size="sm"
                 compact
-                leftIcon={<UndoIcon />}
+                leftIcon={<DeleteBinIcon />}
                 onClick={resetImage}
                 useAria={useAria}
               >

diff --git a/packages/components/src/form/InputDescription/InputDescription.styles.js b/packages/components/src/form/InputDescription/InputDescription.styles.js
@@ -1,6 +1,6 @@
 import { createStyles } from '@mantine/styles';
 
-export const InputDescriptionStyles = createStyles((theme, { withIcon }) => {
+const InputDescriptionStyles = createStyles((theme, { withIcon }) => {
   const labelTheme = theme.other.label;
   return {
     container: {
@@ -21,3 +21,5 @@ export const InputDescriptionStyles = createStyles((theme, { withIcon }) => {
     },
   };
 });
+
+export { InputDescriptionStyles };
diff --git a/packages/components/src/form/InputLabel/InputLabel.styles.js b/packages/components/src/form/InputLabel/InputLabel.styles.js
@@ -1,7 +1,8 @@
 import { createStyles } from '@mantine/styles';
 
-export const InputLabelStyles = createStyles((theme, {}) => {
+const InputLabelStyles = createStyles((theme) => {
   const labelTheme = theme.other.label;
+
   return {
     container: {
       display: 'flex',
@@ -10,11 +11,13 @@ export const InputLabelStyles = createStyles((theme, {}) => {
     },
     label: {
       color: labelTheme.content.color.default,
-      ...labelTheme.content.typo['01'],
+      ...labelTheme.content.typo['02'],
     },
     required: {
       marginLeft: labelTheme.spacing.gap.sm,
       color: labelTheme.content.color.subtle,
     },
   };
 });
+
+export { InputLabelStyles };
diff --git a/packages/components/src/form/InputWrapper/InputWrapper.styles.js b/packages/components/src/form/InputWrapper/InputWrapper.styles.js
@@ -1,19 +1,19 @@
 import { createStyles } from '@mantine/styles';
 
-export const InputWrapperStyles = createStyles((theme, { size, orientation }) => {
-  return {
-    root: {
-      display: 'flex',
-      flexDirection: orientation === 'vertical' ? 'column' : 'row',
-      gap: theme.spacing[2],
-      position: 'relative',
-    },
-    header: {
-      width: orientation === 'vertical' ? 'auto' : '35%',
-    },
-    content: {
-      flex: 1,
-      width: '100%',
-    },
-  };
-});
+const InputWrapperStyles = createStyles((theme, { size, orientation }) => ({
+  root: {
+    display: 'flex',
+    flexDirection: orientation === 'vertical' ? 'column' : 'row',
+    gap: theme.spacing[2],
+    position: 'relative',
+  },
+  header: {
+    width: orientation === 'vertical' ? 'auto' : '35%',
+  },
+  content: {
+    flex: 1,
+    width: '100%',
+  },
+}));
+
+export { InputWrapperStyles };
diff --git a/packages/components/src/form/TagsInput/TagsInput.js b/packages/components/src/form/TagsInput/TagsInput.js
@@ -175,7 +175,7 @@ const TagsInput = forwardRef(
             />
           </Box>
           <Box skipFlex>
-            <Button variant="light" size="sm" leftIcon={<AddCircleIcon />} onClick={() => addTag()}>
+            <Button variant="link" size="sm" leftIcon={<AddCircleIcon />} onClick={() => addTag()}>
               {labels.addButton}
             </Button>
           </Box>

diff --git a/packages/components/src/hooks/useHTMLToCanvas.js b/packages/components/src/hooks/useHTMLToCanvas.js
@@ -1,15 +1,36 @@
 import { useEffect, useState } from 'react';
 import html2canvas from 'html2canvas';
 
-const useHTMLToCanvas = (ref) => {
+const cache = {};
+
+const useHTMLToCanvas = (ref, key) => {
   const [canvasImage, setCanvasImage] = useState();
   const renderCanvas = async () => {
-    if (ref.current) {
-      const canvas = await html2canvas(ref.current);
-      const response = canvas.toDataURL('image/png');
-      setCanvasImage(response);
+    if (cache[key]?.data) {
+      if (cache[key].data === 'pending') {
+        const eventHandler = () => {
+          setCanvasImage(cache[key].data);
+          window.removeEventListener(`renderQueue.${key}`, eventHandler);
+        };
+        window.addEventListener(`renderQueue.${key}`, eventHandler);
+        return;
+      }
+      setCanvasImage(cache[key].data);
+      return;
     }
+
+    cache[key] = { data: 'pending' };
+
+    const canvas = await html2canvas(ref.current);
+    const response = canvas.toDataURL('image/png');
+    cache[key] = { data: response };
+
+    const event = new Event(`renderQueue.${key}`);
+    window.dispatchEvent(event);
+
+    setCanvasImage(response);
   };
+
   useEffect(() => {
     renderCanvas();
   }, [ref.current]);

diff --git a/packages/components/src/layout/ContextContainer/ContextContainer.js b/packages/components/src/layout/ContextContainer/ContextContainer.js
@@ -8,7 +8,7 @@ import { Paragraph, Title } from '../../typography';
 import { ContextContainerStyles } from './ContextContainer.styles';
 
 export const CONTEXT_CONTAINER_PADDED_TYPES = [true, false, 'vertical', 'horizontal'];
-
+const FLEX_ALIGNS = ['flex-start', 'center', 'flex-end'];
 export const CONTEXT_CONTAINER_DEFAULT_PROPS = {
   title: '',
   description: '',
@@ -23,6 +23,16 @@ export const CONTEXT_CONTAINER_PROP_TYPES = {
   padded: PropTypes.oneOf(CONTEXT_CONTAINER_PADDED_TYPES),
   divided: PropTypes.bool,
   spacing: PropTypes.number,
+  direction: PropTypes.oneOf(['row', 'column']),
+  fullHeight: PropTypes.bool,
+  alignItems: PropTypes.oneOf(FLEX_ALIGNS),
+  justifyContent: PropTypes.oneOf(FLEX_ALIGNS),
+  wrap: PropTypes.oneOf(['wrap', 'nowrap']),
+  alignContent: PropTypes.oneOf(FLEX_ALIGNS),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  subtitle: PropTypes.any,
+  children: PropTypes.any,
 };
 
 const ContextContainer = ({
@@ -60,7 +70,7 @@ const ContextContainer = ({
               key={`d-${i}`}
               noFlex
               orientation={direction === 'row' ? 'vertical' : 'horizontal'}
-            />
+            />,
           );
         }
       });
@@ -72,7 +82,7 @@ const ContextContainer = ({
   return (
     <Stack
       direction="column"
-      spacing={5}
+      spacing={3}
       fullWidth
       className={cx(classes.root, className)}
       fullHeight={fullHeight}
@@ -83,18 +93,20 @@ const ContextContainer = ({
         <Stack direction="column" spacing={2} noFlex fullWidth>
           {hasTitle && (
             <Box>
-              {typeof title === 'string' ? 
-                (<Title order={3} dangerouslySetInnerHTML={{ __html: title }} />)
-                : (subtitle)
-              }
+              {typeof title === 'string' ? (
+                <Title order={3} dangerouslySetInnerHTML={{ __html: title }} />
+              ) : (
+                subtitle
+              )}
             </Box>
           )}
           {hasSubtitle && (
             <Box>
-              {typeof subtitle === 'string' ? 
-                (<Title order={5} dangerouslySetInnerHTML={{ __html: subtitle }} />)
-                : (subtitle)
-              }
+              {typeof subtitle === 'string' ? (
+                <Title order={5} dangerouslySetInnerHTML={{ __html: subtitle }} />
+              ) : (
+                subtitle
+              )}
             </Box>
           )}
           {hasDescription && (

diff --git a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js
@@ -21,7 +21,7 @@ import { AssetDocumentIcon } from '../FileIcon/AssetDocumentIcon';
 
 const CardEmptyCover = memo(({ icon, fileType }) => {
   const pairColumnRef = useRef(null);
-  const { canvasImage } = useHTMLToCanvas(pairColumnRef);
+  const { canvasImage } = useHTMLToCanvas(pairColumnRef, fileType);
   const FileTypeIcon = [
     { key: 'video', value: <AssetVideoIcon height={24} width={24} color={'#878D96'} /> },
     { key: 'audio', value: <AssetAudioIcon height={24} width={24} color={'#878D96'} /> },
@@ -80,5 +80,4 @@ CardEmptyCover.propTypes = CARD_EMPTY_COVER_PROP_TYPES;
 
 CardEmptyCover.displayName = 'CardEmptyCover';
 
-export default CardEmptyCover;
 export { CardEmptyCover };
diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
@@ -1153,7 +1153,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff26",
+          "color": "#ffffff",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1234,8 +1234,17 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff26",
-            "type": "color"
+            "value": "#ffffff",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.15",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#F1FFBD",
@@ -4930,12 +4939,30 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4d535866",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "hover": {
-            "value": "#4d5358b3",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.7",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#4D5358",