Merge branch 'master' into refactorStyleSidebar#591

mock-api.json

@@ -137,7 +137,7 @@
   ],
   "social-medias": [
     {
-      "icon": "Icon",
+      "icon": "discord",
       "id": "DISCORD_EXAMPLE_ID",
       "name": "Discord",
       "postModes": [
@@ -222,7 +222,7 @@
       ]
     },
     {
-      "icon": "Icon",
+      "icon": "twitter",
       "id": "TWITTER_EXAMPLE_ID",
       "name": "Twitter",
       "postModes": [
@@ -279,6 +279,171 @@
           ]
         }
       ]
+    },
+    {
+      "icon": "tiktok",
+      "id": "TIKTOK_EXAMPLE_ID",
+      "name": "Tiktok",
+      "postModes": [
+        {
+          "id": "TIKTOK_THREAD_POST_ID",
+          "name": "TestePost",
+          "previewComponent": "Teste",
+          "validators": {
+            "text": {
+              "maxLength": 15
+            },
+            "media": {
+              "maxSize": 10000,
+              "maxWidth": 700,
+              "maxHeight": 600,
+              "ar": ["16:9"],
+              "maxDuration": 500
+            }
+          },
+          "widgets": [
+            {
+              "component": "Teste",
+              "icon": "Teste",
+              "name": "Teste"
+            }
+          ]
+        },
+        {
+          "id": "TIKTOK_THREAD_POSTMODE_ID",
+          "name": "TesteThread",
+          "previewComponent": "Teste",
+          "validators": {
+            "text": {
+              "maxLength": 21
+            },
+            "media": {
+              "maxSize": 20000,
+              "maxWidth": 700,
+              "maxHeight": 600,
+              "ar": ["4:3"],
+              "maxDuration": 1000
+            }
+          },
+          "widgets": [
+            {
+              "component": "Teste",
+              "icon": "Teste",
+              "name": "Teste"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "icon": "facebook",
+      "id": "FACEBOOK_EXAMPLE_ID",
+      "name": "Facebook",
+      "postModes": [
+        {
+          "id": "FACEBOOK_THREAD_POST_ID",
+          "name": "TestePost",
+          "previewComponent": "Teste",
+          "validators": {
+            "text": {
+              "maxLength": 15
+            },
+            "media": {
+              "maxSize": 10000,
+              "maxWidth": 700,
+              "maxHeight": 600,
+              "ar": ["16:9"],
+              "maxDuration": 500
+            }
+          },
+          "widgets": [
+            {
+              "component": "Teste",
+              "icon": "Teste",
+              "name": "Teste"
+            }
+          ]
+        },
+        {
+          "id": "FACEBOOK_THREAD_POSTMODE_ID",
+          "name": "TesteThread",
+          "previewComponent": "Teste",
+          "validators": {
+            "text": {
+              "maxLength": 21
+            },
+            "media": {
+              "maxSize": 20000,
+              "maxWidth": 700,
+              "maxHeight": 600,
+              "ar": ["4:3"],
+              "maxDuration": 1000
+            }
+          },
+          "widgets": [
+            {
+              "component": "Teste",
+              "icon": "Teste",
+              "name": "Teste"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "icon": "instagram",
+      "id": "INSTAGRAM_EXAMPLE_ID",
+      "name": "Instagram",
+      "postModes": [
+        {
+          "id": "INSTAGRAM_THREAD_POST_ID",
+          "name": "TestePost",
+          "previewComponent": "Teste",
+          "validators": {
+            "text": {
+              "maxLength": 15
+            },
+            "media": {
+              "maxSize": 10000,
+              "maxWidth": 700,
+              "maxHeight": 600,
+              "ar": ["16:9"],
+              "maxDuration": 500
+            }
+          },
+          "widgets": [
+            {
+              "component": "Teste",
+              "icon": "Teste",
+              "name": "Teste"
+            }
+          ]
+        },
+        {
+          "id": "INSTAGRAM_THREAD_POSTMODE_ID",
+          "name": "TesteThread",
+          "previewComponent": "Teste",
+          "validators": {
+            "text": {
+              "maxLength": 21
+            },
+            "media": {
+              "maxSize": 20000,
+              "maxWidth": 700,
+              "maxHeight": 600,
+              "ar": ["4:3"],
+              "maxDuration": 1000
+            }
+          },
+          "widgets": [
+            {
+              "component": "Teste",
+              "icon": "Teste",
+              "name": "Teste"
+            }
+          ]
+        }
+      ]
     }
   ]
 }

src/components/Icon/data.ts

@@ -3,33 +3,49 @@ import ArrowRight from './icons/arrow-right.svg?react';
 import Check from './icons/check.svg?react';
 import Circle from './icons/circle.svg?react';
 import Close from './icons/close.svg?react';
+import Discord from './icons/discord.svg?react';
 import TriangleDropArrow from './icons/drop-down.svg?react';
+import Facebook from './icons/facebook.svg?react';
 import Hamburguer from './icons/hamburguer.svg?react';
+import Instagram from './icons/instagram.svg?react';
 import LeftArrow from './icons/left-arrow.svg?react';
 import Mag from './icons/mag.svg?react';
 import Minus from './icons/minus.svg?react';
+import Mobile from './icons/Mobile.svg?react';
+import Pc from './icons/Pc.svg?react';
 import Plus from './icons/plus.svg?react';
 import RightArrow from './icons/right-arrow.svg?react';
 import SmallCircleFilled from './icons/small-circle-filled.svg?react';
 import StarFilled from './icons/star-filled.svg?react';
 import Star from './icons/star.svg?react';
+import Tablet from './icons/Tablet.svg?react';
+import TikTok from './icons/tiktok.svg?react';
 import TriangleLeftArrow from './icons/TriangleLeftArrow.svg?react';
+import Twitter from './icons/twitter.svg?react';
 
 export const icons = {
   alert: Alert,
   'arrow-right': ArrowRight,
   check: Check,
   circle: Circle,
   close: Close,
+  discord: Discord,
+  facebook: Facebook,
   hamburguer: Hamburguer,
+  instagram: Instagram,
   'left-arrow': LeftArrow,
   mag: Mag,
   minus: Minus,
+  mobile: Mobile,
+  pc: Pc,
   plus: Plus,
   'right-arrow': RightArrow,
   'small-circle-filled': SmallCircleFilled,
   star: Star,
   'star-filled': StarFilled,
+  tablet: Tablet,
+  tiktok: TikTok,
   'triangle-drop-arrow': TriangleDropArrow,
   'triangle-left-arrow': TriangleLeftArrow,
+  twitter: Twitter,
 };

src/components/Icon/icon.stories.tsx

@@ -25,6 +25,11 @@ export default {
         'star',
         'star-filled',
         'minus',
+        'facebook',
+        'instagram',
+        'tiktok',
+        'discord',
+        'twitter',
       ] as IconsType[],
     },
     size: {

src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx

@@ -10,6 +10,7 @@ import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaS
 import { TextValidators } from './utils/textValidator/textValidators';
 
 import CharacterLimit from '~components/CharacterLimitMainText/CharacterLimit';
+import Icon from '~components/Icon/Icon';
 
 import scss from './ComposerEditor.module.scss';
 
@@ -102,6 +103,11 @@ function ComposerEditor(props: ComposerEditorProps): ReactNode {
     setInputValue(newValue);
   };
 
+  const renderIcon = (socialMediaId: string): ReactNode => {
+    const icon = socialMedias.get(socialMediaId)?.icon;
+    return icon ? <Icon icon={icon} size={24} /> : null;
+  };
+
   const socialLimits = getGreatestLimitsSocial();
 
   return (
@@ -111,19 +117,21 @@ function ComposerEditor(props: ComposerEditorProps): ReactNode {
         placeholder="Digite algo aqui..."
         value={props.value ?? inputValue}
       />
+
       <div className={scss.charactersLimitContainer}>
         <CharacterLimit
           maxLength={props.currentMaxLimit ?? socialLimits.maxLimit}
           svg={null}
           value={props.value ?? inputValue}
         />
+
         {!props.postMode && (
           <div className={scss.characterLimitWrapper}>
             {socialLimits.socialLimits.map((postMode) => (
               <CharacterLimit
                 key={postMode.socialMediaId}
                 maxLength={postMode.limit}
-                svg={socialMedias.get(postMode.socialMediaId)?.icon}
+                svg={renderIcon(postMode.socialMediaId)}
                 value={props.value ?? inputValue}
               />
             ))}

src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss

@@ -4,10 +4,10 @@
   width: 100%;
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
   gap: 1.4rem;
 
-  align-items: center;
+  align-items: start;
   justify-content: start;
 
   .imageGroup {
@@ -31,6 +31,7 @@
 
     .removeButton {
       width: 2.2rem;
+      height: 2.2rem;
 
       color: global.$tertiaryPurple;
       text-align: center;

src/components/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss

@@ -2,19 +2,24 @@
 
 .button,
 .buttonSelected {
+  height: 100%;
   overflow: hidden;
 
   display: flex;
 
   align-items: center;
   justify-content: center;
 
+  padding: 5.2rem;
+
+  position: relative;
+
   transition: color 0.3s ease;
 
   cursor: pointer;
 
   &:hover {
-    background-color: global.$hovering;
+    background-color: global.$pressing;
   }
 }
 
@@ -34,6 +39,10 @@
 
 .imagePlaceholder,
 .imageSelected {
+  max-width: 100%;
+  max-height: 100%;
+
+  position: absolute;
   object-fit: cover;
 }