Feature/story upload (#56)

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

* ✨ (feat

(feat): add profile picture mock

* 🐛 Fix(update-profile-picture): fix the blob

fix(update-profile-picture): fix the blob

* 💄 Feat: StoryIcon UI

Feat: StoryIcon UI

* 🐛 Fix(sidebar): fix the searchbar responsiveness

fix(sidebar): fix the searchbar responsiveness

* 📱 Fix(sidebar): make sidebar responsive

fix(sidebar): make sidebar responsive

* 🐛 Fix(user): fix importing privacy states

fix(user): fix importing privacy states

* ✨ Feat(stories): create stories

feat(stories): create stories

* added view stories feature

* merge stories with dev

* make storylist scrollable

* remove dummy code

* (fix): fix stories styling bugs

app/package.json

@@ -23,6 +23,7 @@
     "@tanstack/react-query": "^5.59.13",
     "@tanstack/react-query-devtools": "^5.59.15",
     "@types/react-google-recaptcha": "^2.1.9",
+    "idb": "^8.0.0",
     "date-fns": "^4.1.0",
     "lottie-react": "^2.4.0",
     "react": "^18.3.1",
@@ -32,6 +33,7 @@
     "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-international-phone": "^4.3.0",
+    "react-modal-image": "^2.6.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
     "socket-client": "^1.0.0",
@@ -53,6 +55,7 @@
     "@types/jest": "^29.5.14",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
+    "@types/react-modal-image": "^2.6.3",
     "@types/redux-mock-store": "^1.0.6",
     "@vitejs/plugin-react": "^4.3.2",
     "babel-jest": "^29.7.0",

app/src/components/AppLayout.tsx

@@ -1,11 +1,8 @@
 import { Outlet, useParams } from "react-router-dom";
 import styled from "styled-components";
-
-import { media } from "data/deviceSize";
-
 import Main from "./Main";
 import SideBar from "./side-bar/SideBar";
-import { MOBILE_VIEW } from "@constants";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
 
 const StyledApp = styled.div<{ $isChatOpen: boolean }>`
   @media ${MOBILE_VIEW} {
@@ -18,7 +15,7 @@ const StyledApp = styled.div<{ $isChatOpen: boolean }>`
     }
   }
 
-  @media ${media.desktop} {
+  @media ${DESKTOP_VIEW} {
     display: grid;
     grid-template-columns: 2fr 5fr;
 

app/src/components/Avatar.tsx

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import { getAvatarName } from "utils/helpers";
+
+const StyledAvatar = styled.div<{ $image?: string }>`
+  width: 2.625rem;
+  height: 2.625rem;
+
+  border-radius: 50%;
+  margin-right: 1rem;
+
+  background: ${({ $image }) =>
+    $image ? `url(${$image}) center/cover no-repeat` : "var(--color-avatar)"};
+
+  color: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+
+  font-weight: bold;
+  font-size: 1rem;
+  text-transform: uppercase;
+`;
+
+type PropsType = {
+  image?: string | undefined;
+  name: string | undefined;
+};
+
+function Avatar({ image, name }: PropsType) {
+  return (
+    <StyledAvatar $image={image}>{!image && getAvatarName(name)}</StyledAvatar>
+  );
+}
+
+export default Avatar;

app/src/components/CircleIcon.tsx

@@ -9,7 +9,9 @@ interface CircleIconProps {
   $padding?: number;
   $color?: string;
   $bgColor?: string;
+  $opacity?: number;
   onClick?: () => void;
+  children?: React.ReactNode;
 }
 
 const StyledIcon = styled.div<CircleIconProps>`
@@ -25,17 +27,15 @@ const StyledIcon = styled.div<CircleIconProps>`
   padding: ${(props) => props.$padding}rem;
   background-color: ${(props) => props.$bgColor};
   border-radius: var(--border-radius-circle);
-  opacity: 0.9;
-  box-shadow: var(--box-shadow);
-  opacity: 0.9;
+  opacity: ${(props) => props.$opacity};
   box-shadow: var(--box-shadow);
 
   display: flex;
   align-items: center;
   justify-content: center;
 
   &:hover {
-    opacity: 1;
+    scale: 1.05;
     cursor: pointer;
   }
   & > svg {
@@ -53,14 +53,26 @@ function CircleIcon({
   $padding = 0,
   $color = "var(--color-search-border)",
   $bgColor = "transparent",
+  $opacity = 0.9,
   onClick,
+  children,
 }: CircleIconProps) {
   return (
     <StyledIcon
       onClick={onClick}
-      {...{ $icon, $bottom, $right, $size, $padding, $color, $bgColor }}
+      {...{
+        $icon,
+        $bottom,
+        $right,
+        $size,
+        $padding,
+        $color,
+        $bgColor,
+        $opacity,
+      }}
     >
       {getIcon($icon)}
+      {children}
     </StyledIcon>
   );
 }

app/src/components/CloseButton.tsx

@@ -0,0 +1,24 @@
+import { getIcon } from "@data/icons";
+import styled from "styled-components";
+
+interface CloseButtonProps {
+  onClose: () => void;
+}
+
+const StyledCloseButton = styled.div`
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  cursor: pointer;
+  color: white;
+  z-index: 2000;
+`;
+
+function CloseButton(props: CloseButtonProps) {
+  const { onClose } = props;
+  return (
+    <StyledCloseButton onClick={onClose}>{getIcon("Close")}</StyledCloseButton>
+  );
+}
+
+export default CloseButton;

app/src/components/CollapsedList.tsx

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+interface CollapsedListProps {
+  onOpen: () => void;
+  render: (data: any) => JSX.Element;
+  list: any[];
+}
+
+const StyledCollapsedContainer = styled.div`
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+`;
+const StyledCollapsed = styled.div<{ $index: number }>`
+  position: absolute;
+  z-index: 30 - index;
+  right: ${(props) => props.$index * 15 + 20}px;
+  top: 0.7rem;
+  transform: scale(0.8);
+  transition: transform 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+`;
+
+function CollapsedList(Props: CollapsedListProps) {
+  const { onOpen, render, list } = Props;
+  const displayedItems = list?.slice(0, 3);
+
+  return (
+    <StyledCollapsedContainer onClick={onOpen}>
+      {displayedItems?.map((element, index) => (
+        <StyledCollapsed key={index} $index={index}>
+          {render(element)}
+        </StyledCollapsed>
+      ))}
+    </StyledCollapsedContainer>
+  );
+}
+
+export default CollapsedList;

app/src/components/ImageEditor.tsx

@@ -10,16 +10,31 @@ interface imageEditorProps {
   src: string;
   onImageSave: (file: File) => void;
   isProfileImage?: boolean;
+  widthRatio?: number;
+  heightRatio?: number;
 }
-
-const StyledContainer = styled.div<{ $isOpen: boolean }>`
+interface styledContainerProps {
+  $widthRatio: number;
+  $heightRatio: number;
+}
+const StyledBackGround = styled.div<{ $isOpen: boolean }>`
   display: ${({ $isOpen }) => ($isOpen ? "flex" : "none")};
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 1000;
   width: 100%;
   height: 100%;
-  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.8);
+`;
+
+const StyledContainer = styled.div<styledContainerProps>`
+  width: ${(props) => props.$widthRatio}%;
+  height: ${(props) => props.$heightRatio}%;
+  display: flex;
   justify-content: center;
   align-items: center;
 `;
@@ -30,6 +45,8 @@ function ImageEditor({
   src,
   onImageSave,
   isProfileImage,
+  widthRatio = 50,
+  heightRatio = 50,
 }: imageEditorProps) {
   const handleSave = async (editedImageObject: { imageBase64?: string }) => {
     if (editedImageObject.imageBase64) {
@@ -44,13 +61,18 @@ function ImageEditor({
       onImageSave(file);
       closeImgEditor();
     } else {
-      console.error("Image base64 data is undefined");
+      throw new Error("something went wrong with image editing");
     }
   };
   return (
-    <StyledContainer $isOpen={isOpen}>
+    <StyledBackGround $isOpen={isOpen}>
       {isOpen && (
-        <div>
+        <StyledContainer
+          {...{
+            $widthRatio: widthRatio,
+            $heightRatio: heightRatio,
+          }}
+        >
           <FilerobotImageEditor
             source={src}
             forceToPngInEllipticalCrop={true}
@@ -115,17 +137,18 @@ function ImageEditor({
             tabsIds={
               isProfileImage
                 ? [TABS.ADJUST]
-                : [TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE, TABS.RESIZE]
+                : [TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE]
             }
             defaultTabId={isProfileImage ? TABS.ADJUST : TABS.ANNOTATE}
             defaultToolId={TOOLS.RESIZE}
             defaultSavedImageQuality={0.95}
             savingPixelRatio={4}
             previewPixelRatio={4}
+            data-testid="image-editor"
           />
-        </div>
+        </StyledContainer>
       )}
-    </StyledContainer>
+    </StyledBackGround>
   );
 }