Merge branch 'main' of github.com:ShakedZrihen/specter-ui-kit into fe…

…at-create-post-with-medias

package.json

@@ -41,6 +41,7 @@
     "react-dom": "^18.3.1",
     "react-image-gallery": "^1.3.0",
     "react-player": "^2.16.0",
+    "specter-ui-kit": "file:",
     "stylis-plugin-rtl": "^2.1.1"
   },
   "devDependencies": {

src/components/base/Topbar/Topbar.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Topbar } from './Topbar'; // Assuming the Topbar component is in the same directory
+import { Topbar } from './Topbar';
 import { SpecterTheme } from '../../../context/theme/SpecterTheme';
 import SpectorLogo from '../../assets/spector-logo.svg?react';
 
@@ -30,3 +30,31 @@ export const WithSearch: Story = {
     </SpecterTheme>
   ),
 };
+
+export const WithTranslationButton: Story = {
+  render: () => (
+    <SpecterTheme>
+      <Topbar
+        appName='ספקטר'
+        appIcon={<SpectorLogo />}
+        withTranslationButton
+        onLanguageChange={console.log} 
+      />
+    </SpecterTheme>
+  ),
+};
+
+export const WithSearchAndTranslationButton: Story = {
+  render: () => (
+    <SpecterTheme>
+      <Topbar
+        appName='ספקטר'
+        appIcon={<SpectorLogo />}
+        withSearch
+        withTranslationButton
+        onSearch={console.log}
+        onLanguageChange={console.log}
+      />
+    </SpecterTheme>
+  ),
+};

src/components/base/Topbar/Topbar.style.tsx

@@ -11,7 +11,6 @@ export const TopbarAppDetailsContainer = styled('div')`
   display: flex;
   align-items: center;
   direction: rtl;
-
   & > svg {
     margin-left: 0.5rem;
   }
@@ -20,11 +19,21 @@ export const TopbarAppDetailsContainer = styled('div')`
 export const TopbarContainer = styled(Toolbar)`
   display: flex;
   justify-content: space-between;
+  align-items: center; 
+  width: 100%;
 `;
 
-export const TopbarSearchContainer = styled('div')``;
+export const TopbarSearchContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  flex-grow: 1; 
+  justify-content: center; 
+`;
 
 export const TopbarUserContextContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: center; 
   width: 10%;
 `;
 

src/components/base/Topbar/Topbar.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React from 'react';
 import {
   AppNameTypography,
   StyledAppBar,
@@ -7,14 +7,17 @@ import {
   TopbarSearchContainer,
   TopbarUserContextContainer,
 } from './Topbar.style';
-import { Search } from './Search';
+import { Search } from './Search/Search';
+import { TranslationButton } from '../TranslationButton/TranslationButton';
 
 interface TopbarProps {
   appName: string;
-  appIcon?: ReactElement;
+  appIcon?: React.ReactElement;
   withSearch?: boolean;
+  withTranslationButton?: boolean;
   onSearch?: (searchTerm: string) => void;
   className?: string;
+  onLanguageChange?: (language: string) => void;
 }
 
 export const Topbar = ({
@@ -23,27 +26,30 @@ export const Topbar = ({
   onSearch,
   withSearch,
   className,
+  withTranslationButton,
+  onLanguageChange,
 }: TopbarProps) => {
-  const topbarElements = [
-    <TopbarAppDetailsContainer>
-      {appIcon}
-      <AppNameTypography>{appName}</AppNameTypography>
-    </TopbarAppDetailsContainer>,
-  ];
-
-  if (withSearch && onSearch) {
-    topbarElements.push(
-      <TopbarSearchContainer key='search'>
-        <Search onSearch={onSearch} />
-      </TopbarSearchContainer>,
-    );
-  }
-
-  topbarElements.push(<TopbarUserContextContainer />);
-
   return (
     <StyledAppBar className={className}>
-      <TopbarContainer>{topbarElements}</TopbarContainer>
+      <TopbarContainer>
+        <TopbarAppDetailsContainer>
+          {appIcon}
+          <AppNameTypography>{appName}</AppNameTypography>
+        </TopbarAppDetailsContainer>
+        {withSearch && onSearch && (
+          <TopbarSearchContainer>
+            <Search onSearch={onSearch} />
+          </TopbarSearchContainer>
+        )}
+        <TopbarUserContextContainer>
+          {withTranslationButton && onLanguageChange && (
+            <TranslationButton
+              onLanguageChange={onLanguageChange}
+              supportedLanguages={['en', 'ar', 'he']}
+            />
+          )}
+        </TopbarUserContextContainer>
+      </TopbarContainer>
     </StyledAppBar>
   );
 };

src/components/base/TranslationButton/TranslationButton.story.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SpecterTheme } from '../../../context/theme/SpecterTheme';
+import { TranslationButton } from './TranslationButton';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof TranslationButton> = {
+  title: 'components/base/TranslationButton',
+  component: TranslationButton,
+  argTypes: {
+    onLanguageChange: { action: 'languageChange' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TranslationButton>;
+
+export const Basic: Story = {
+  render: (props) => (
+    <SpecterTheme>
+      <TranslationButton {...props} />
+    </SpecterTheme>
+  ),
+  args: {
+    onLanguageChange: (language) => console.log(`Language changed to: ${language}`),
+    supportedLanguages: ['en', 'ar', 'he'],
+  },
+};

src/components/base/TranslationButton/TranslationButton.style.tsx

@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import TranslateIcon from '@mui/icons-material/Translate';
+
+
+const StyledTranslationButton = styled(Button)(({ theme }) => ({
+  backgroundColor: theme.colorPalette.secondaryColor.color,
+  color: 'white',
+  '&:hover': {
+    backgroundColor: theme.colorPalette.primaryColor.color,
+  },
+  minWidth: 'auto',
+  padding: '8px',
+  borderRadius: '4px',
+}));
+
+
+const StyledTranslateIcon = styled(TranslateIcon)(() => ({
+  color: 'inherit',
+}));
+
+export { StyledTranslationButton, StyledTranslateIcon };

src/components/base/TranslationButton/TranslationButton.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { StyledTranslationButton, StyledTranslateIcon } from './TranslationButton.style';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+export interface TranslationButtonProps {
+  onLanguageChange: (language: string) => void;
+  supportedLanguages: string[];
+}
+
+const languageLabels: Record<string, string> = {
+  en: 'English',
+  ar: 'Arabic',
+  he: 'Hebrew',
+};
+
+export function TranslationButton({ onLanguageChange, supportedLanguages = [] }: TranslationButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setAnchorEl(null);
+  };
+
+  const handleLanguageChange = (language: string) => {
+    onLanguageChange(language);
+    handleClose();
+  };
+
+  return (
+    <>
+      <StyledTranslationButton
+        aria-controls={open ? 'language-menu' : undefined}
+        aria-haspopup="true"
+        onClick={handleClick}
+      >
+        <StyledTranslateIcon />
+      </StyledTranslationButton>
+      <Menu
+        id="language-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        {supportedLanguages.length > 0 ? (
+          supportedLanguages.map((language) => (
+            <MenuItem key={language} onClick={() => handleLanguageChange(language)}>
+              {languageLabels[language] || language.toUpperCase()}
+            </MenuItem>
+          ))
+        ) : (
+          <MenuItem>שפות אינן זמינות</MenuItem>
+        )}
+      </Menu>
+    </>
+  );
+}

src/components/base/TranslationButton/index.ts

@@ -0,0 +1,2 @@
+export { TranslationButton } from './TranslationButton';
+

src/context/theme/lightMode.ts

@@ -5,7 +5,6 @@ export const colorPalette = {
   header: {
     text: '#F2F2F2',
     background: '#1B1E2D',
-    fill: '#E9EFF9',
   },
   link: {
     color: '#1877f2',
@@ -29,6 +28,10 @@ export const colorPalette = {
     highlight: '#FFDF5F',
     icon: '#2860A8',
   },
+  primaryColor: {
+    color: '#474E72'
+  },
+  secondaryColor: '#1B1E2D',
 };
 
 export const lightMode = createTheme({
@@ -41,13 +44,12 @@ export const lightMode = createTheme({
     MuiCheckbox: {
       styleOverrides: {
         root: {
-          // This changes the border color (line color)
           color: colorPalette.checkbox.border,
           '&.Mui-checked': {
-            color: colorPalette.checkbox.border, // Color when checked
+            color: colorPalette.checkbox.border,
           },
         },
       },
     },
   },
-});
+});

src/context/theme/typography.ts

@@ -7,8 +7,10 @@ export const typography: TypographyOptions = {
   fontFamily: ['"Assistant"', 'sans-serif'].join(','),
   body1: {
     fontSize: '1.0769rem', // 14px
+    direction: 'rtl',
   },
   h6: {
     fontSize: '1.4rem',
+    direction: 'rtl',
   },
 };