Merge pull request #7 from ShakedZrihen/feat-create-post-with-medias

feat: post with elipsis
ShakedZrihen · Sep 19, 2024 · c0bfa22 · c0bfa22
2 parents b41555d + 34d42a2
commit c0bfa22
Show file tree

Hide file tree

Showing 16 changed files with 178 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "specter-ui-kit",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.4.0-rc-4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -35,6 +35,7 @@
     "@storybook/addon-themes": "^8.3.0",
     "@storybook/types": "^8.3.0",
     "figlet": "^1.7.0",
+    "franc": "^6.2.0",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/src/components/base/Button/Button.story.tsx b/src/components/base/Button/Button.story.tsx
@@ -9,7 +9,7 @@ const meta: Meta<typeof Button> = {
   component: Button,
   argTypes: {},
   args: {
-    endIcon: <DocumetsIcon color={colorPalette.link.color} size={20} />,
+    startIcon: <DocumetsIcon color={colorPalette.link.color} size={20} />,
   },
 };
 

diff --git a/src/components/base/FiltersMenu/FiltersMenu.style.tsx b/src/components/base/FiltersMenu/FiltersMenu.style.tsx
@@ -46,6 +46,7 @@ export const FiltersControllerButton = styled('div')`
   padding: 0.3rem 1.2rem;
   background-color: ${({ theme }) => theme.colorPalette.common.white};
   box-shadow: 0px 0px 5px 0px #0000001f;
+
   width: 7rem;
 
   :hover {

diff --git a/src/components/base/FiltersMenu/FiltersMenu.tsx b/src/components/base/FiltersMenu/FiltersMenu.tsx
@@ -26,6 +26,9 @@ interface FiltersMenuProps {
   filters: FilterSectionDefinition[];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onSave: (filters: any) => void; //TODO: Add type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  menuOverides?: any;
+  className?: string;
 }
 
 /**
@@ -37,7 +40,12 @@ interface FiltersMenuProps {
  * <FiltersMenu />
  * ```
  */
-export function FiltersMenu({ filters, onSave }: FiltersMenuProps) {
+export function FiltersMenu({
+  filters,
+  onSave,
+  menuOverides = {},
+  className,
+}: FiltersMenuProps) {
   const [open, toggleDrawer] = useState(false);
   const [selectedFilters, setSelectedFilters] = useState<{
     [filterSectionName: string]: { [filterName: string]: string };
@@ -70,7 +78,7 @@ export function FiltersMenu({ filters, onSave }: FiltersMenuProps) {
   };
 
   return (
-    <StyledFiltersMenu>
+    <StyledFiltersMenu className={className}>
       <FiltersControllerButton onClick={() => toggleDrawer(true)}>
         <FilterIcon color={colorPalette.common.icon} size={18} />
         <Title>פילטרים</Title>
@@ -79,6 +87,7 @@ export function FiltersMenu({ filters, onSave }: FiltersMenuProps) {
         open={open}
         onClose={() => toggleDrawer(false)}
         hideBackdrop={true}
+        sx={menuOverides}
       >
         <FiltersMenuContainer>
           <FiltersHeader>

diff --git a/src/components/base/Post/Post.story.tsx b/src/components/base/Post/Post.story.tsx
@@ -8,6 +8,7 @@ const meta: Meta<typeof Post> = {
   component: Post,
   argTypes: {},
   args: {
+    slimView: false,
     id: '1',
     author: {
       name: 'Nablusarlrasas48',
@@ -22,8 +23,10 @@ const meta: Meta<typeof Post> = {
       channelUrl: 'https://www.google.com',
       sourceName: 'Twitter',
     },
-    content:
-      'ידיעות אחרונות: האימוץ המשותף של חמאס והג׳יהאד האיסלאמי לאחריות על הפיגוע ב״תל אביב״, מזכיר לנו את ימי השיא האינתיפאדה השנייה, שבהם ביצעו שני הארגונים גם פיגועים...',
+    content: {
+      original:
+        'ידיעות אחרונות: האימוץ המשותף של חמאס והג׳יהאד האיסלאמי לאחריות על הפיגוע ב״תל אביב״, מזכיר לנו את ימי השיא האינתיפאדה השנייה, שבהם ביצעו שני הארגונים גם פיגועים...',
+    },
     isRead: false,
     highlightedText: ['חמאס'],
     onSave: () => alert('saved'),

diff --git a/src/components/base/Post/Post.style.tsx b/src/components/base/Post/Post.style.tsx
@@ -68,11 +68,11 @@ export const PostSource = styled('div')`
   }
 `;
 
-export const PostContent = styled(Typography)`
+export const PostContent = styled(Typography)<{ direction: string }>`
   display: flex;
   flex-direction: column;
   padding: 1rem;
-  direction: rtl;
+  direction: ${({ direction }) => direction};
 `;
 
 export const PostFooter = styled('div')`

diff --git a/src/components/base/Post/Post.tsx b/src/components/base/Post/Post.tsx
@@ -1,5 +1,5 @@
 import { Checkbox, FormControlLabel, Divider } from '@mui/material';
-
+import { franc } from 'franc';
 import { TextWithHighlights } from '../TextWithHighlights';
 import {
   PostAuthor,
@@ -13,8 +13,15 @@ import {
   StyledPost,
 } from './Post.style';
 import { Footer, SlimFooter } from './Footer';
+import { getTextDirection } from '../../../utils/textDirection';
+export interface PostMedia {
+  type: 'image' | 'video';
+  url: string;
+  thumbnail: string;
+  extraInfo?: Record<string, string>;
+}
 
-export interface PostProps {
+export interface Post {
   id: string | number;
   author: {
     name: string;
@@ -28,14 +35,15 @@ export interface PostProps {
     channelUrl: string;
     sourceName: string;
   };
-  content: string;
+  medias?: PostMedia[];
+  content: {
+    original: string;
+    translated?: string;
+    translatedHebrew?: string;
+    selected?: string;
+  };
   isRead: boolean;
   slimView?: boolean;
-  onRead?: (id: string | number) => void;
-  onUnread?: (id: string | number) => void;
-  onSave?: (id: string | number) => void;
-  onShare?: (id: string | number) => void;
-  onMore?: (id: string | number) => void;
   highlightedText: string[];
   enrichments?: {
     metadata?: Record<string, string>;
@@ -45,6 +53,14 @@ export interface PostProps {
   };
 }
 
+export interface PostProps extends Post {
+  onRead?: (id: string | number) => void;
+  onUnread?: (id: string | number) => void;
+  onSave?: (id: string | number) => void;
+  onShare?: (id: string | number) => void;
+  onMore?: (id: string | number) => void;
+}
+
 /**
  * TODO: document component functionality
  *
@@ -60,12 +76,12 @@ export function Post(props: PostProps & { className?: string }) {
     time,
     date,
     source,
-    content,
+    content: { original, selected },
     isRead,
     id,
     highlightedText = [],
     className,
-    slimView = true,
+    slimView = false,
     onMore = () => {},
     onSave = () => {},
     onShare = () => {},
@@ -74,6 +90,10 @@ export function Post(props: PostProps & { className?: string }) {
   const cleanProtocol = (url: string) =>
     url.replace('https://', '').replace('http://', '');
 
+  const content = selected || original;
+  const language = franc(content);
+  const direction = getTextDirection(language);
+
   return (
     <StyledPost className={className}>
       <PostHeader>
@@ -105,8 +125,13 @@ export function Post(props: PostProps & { className?: string }) {
           </PostReadIndicator>
         )}
       </PostHeader>
-      <PostContent>
-        <TextWithHighlights text={content} highlightedText={highlightedText} />
+      <PostContent direction={direction}>
+        <TextWithHighlights
+          text={content}
+          highlightedText={highlightedText}
+          direction={direction}
+          maxLines={5}
+        />
       </PostContent>
       {!slimView && <Divider />}
       {slimView ? (

diff --git a/src/components/base/SinglePostView/SinglePostView.story.tsx b/src/components/base/SinglePostView/SinglePostView.story.tsx
@@ -23,8 +23,10 @@ const meta: Meta<typeof SinglePostView> = {
         channelUrl: 'https://www.google.com',
         sourceName: 'Twitter',
       },
-      content:
-        'ידיעות אחרונות: האימוץ המשותף של חמאס והג׳יהאד האיסלאמי לאחריות על הפיגוע ב״תל אביב״, מזכיר לנו את ימי השיא האינתיפאדה השנייה, שבהם ביצעו שני הארגונים גם פיגועים...',
+      content: {
+        original:
+          'ידיעות אחרונות: האימוץ המשותף של חמאס והג׳יהאד האיסלאמי לאחריות על הפיגוע ב״תל אביב״, מזכיר לנו את ימי השיא האינתיפאדה השנייה, שבהם ביצעו שני הארגונים גם פיגועים...',
+      },
       isRead: false,
       enrichments: {
         metadata: {
@@ -45,6 +47,7 @@ const meta: Meta<typeof SinglePostView> = {
           'קשרים חברתיים נוספים': 'איחוד האמירויות, פלסטין',
         },
       },
+      highlightedText: [],
     },
   },
 };

diff --git a/src/components/base/SinglePostView/SinglePostView.tsx b/src/components/base/SinglePostView/SinglePostView.tsx
@@ -12,30 +12,9 @@ import {
 } from './SinglePostView.style';
 import { colorPalette } from '../../../context/theme/lightMode';
 import { DescriptionAccordion } from '../DescriptionAccordion';
+import { Post } from '../Post';
 export interface SinglePostViewProps {
-  post: {
-    id: string | number;
-    author: {
-      name: string;
-      avatar: string;
-    };
-    time: string;
-    date: string;
-    source: {
-      url: string;
-      channelName: string;
-      channelUrl: string;
-      sourceName: string;
-    };
-    enrichments: {
-      metadata: Record<string, string>;
-      ai: Record<string, string>;
-      operationalHistory: Record<string, string>;
-      relatedEntities: Record<string, string>;
-    };
-    content: string;
-    isRead: boolean;
-  };
+  post: Post;
   isOpen: boolean;
 }
 

diff --git a/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx b/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx
@@ -1,14 +1,24 @@
 import { styled, Typography } from '@mui/material';
 
-export const HighlightedText = styled('span')`
+export const HighlightedText = styled('span')<{ direction: string }>`
   background-color: ${({ theme }) => theme.colorPalette.common.highlight};
   padding: 0.1rem 0.5rem;
   border-radius: 6px;
+  direction: ${({ direction }) => direction};
 `;
 
-export const StyledTextWithHighlights = styled(Typography)`
-  direction: rtl;
+export const StyledTextWithHighlights = styled(Typography)<{
+  direction: string;
+}>`
+  direction: ${({ direction }) => direction};
   color: ${({ theme }) => theme.colorPalette.text.primary};
   font-size: 1.2rem;
   font-weight: 400;
 `;
+
+export const ShowMoreButton = styled('span')`
+  display: flex;
+  direction: rtl;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colorPalette.link.color};
+`;