Merge branch 'main' into fix-drawer

.eslintrc.json

@@ -1,4 +1,8 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"],
-  "ignorePatterns": ["node_modules/**/*"]
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:storybook/recommended"
+  ],
+  "ignorePatterns": ["node_modules/**/*", "stories/**/*"]
 }

.github/workflows/playwright.yml

@@ -0,0 +1,33 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Build Next.js application
+        run: npm run build
+      - name: Start Next.js server
+        run: npm run start -- -p 3000 &
+      - name: Wait for server to be ready
+        run: npx wait-on http://localhost:3000
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -41,3 +41,5 @@ next-env.d.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+*storybook.log

.husky/pre-commit

@@ -1,27 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-export NVM_DIR="$HOME/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
-
-# Run ESLint with automatic fixes, and capture the result and exit code
-eslint_result=$(npx eslint . --fix)
-eslint_exit_code=$?
-if [ $eslint_exit_code -eq 0 ]; then
-    printf "✅ ESLint checks passed!\n"
-else
-    printf "❌ ESLint found issues that could not be automatically fixed.\n%s\n" "$eslint_result"
-    exit 1
-fi
-
-# Run Prettier with write option, capture the result and exit code
-prettier_result=$(npx prettier --write .)
-prettier_exit_code=$?
-if [ $prettier_exit_code -eq 0 ]; then
-    printf "✅ Prettier formatting passed!\n"
-else
-    printf "❌ Prettier found formatting issues.\n%s\n" "$prettier_result"
-    exit 1
-fi
-
-printf "✨ All checks passed! Your code is clean and formatted! ✨\n"
+npm run precommit

.husky/pre-push

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-printf 'Husky started...\n'
+npm run prepush

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  staticDirs: ['../public'],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.vscode/settings.json

@@ -28,5 +28,25 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "always",
     "source.fixAll.format": "always"
-  }
+  },
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#cc7671",
+    "activityBar.background": "#cc7671",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#a1dda5",
+    "activityBarBadge.foreground": "#15202b",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#cc7671",
+    "statusBar.background": "#bf524b",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#cc7671",
+    "statusBarItem.remoteBackground": "#bf524b",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#bf524b",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#bf524b99",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.remoteColor": "#bf524b"
 }

actions/addNewProject.ts

@@ -1,7 +1,7 @@
 'use server';
 
-import { IAddProjectForm } from '@/types/forms';
+import { AddProjectFormData } from '@/types/forms';
 
-export const addNewProject = async (data: IAddProjectForm) => {
+export const addNewProject = async (data: AddProjectFormData) => {
   console.log(data);
 };

app/[locale]/layout.tsx

@@ -70,10 +70,12 @@ export default function RootLayout({
       <meta charSet="ISO-8859-1" />
 
       <body
-        className={`min-h-screen flex flex-col items-stretch m-0 darkmode-main ${birzia.className} ${inter.variable}`}
+        className={`min-h-screen flex flex-col items-stretch m-0 darkmode-main ${
+          locale !== 'en' && birzia.className
+        } ${inter.variable}`}
       >
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <Header/>
+          <Header />
           <main className="flex flex-col flex-1 h-full pt-24 md:pt-32">
             <NextIntlClientProvider locale={locale} messages={messages}>
               {children}

app/[locale]/members/page.tsx

@@ -12,7 +12,6 @@ import classNames from 'classnames';
 import SkeletonCards from '@/components/Members/Skeleton/SkeletonCards';
 import { MdiAccountSearch } from '@/components/Members/Skeleton/MdiAccountSearch';
 
-
 const WelcomeMessage = () => {
   const t = useTranslations('Members');
   const direction = useTextDirection();

app/[locale]/projects/page.tsx

@@ -1,12 +1,13 @@
 'use client';
 import fetchProjectsData from '@/actions/fetchProjectsData';
 import FiltersBar from '@/components/Projects/FiltersBar/FiltersBar';
-import { MempmizedProjectsDisplay } from '@/components/Projects/ProjectDisplay';
+import { MemomizedProjectsDisplay } from '@/components/Projects/ProjectDisplay';
 import { ProjectFilter } from '@/types';
 import { Project, ProjectPaginationFilter } from '@/types/project';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import useTextDirection from '@/hooks/useTextDirection';
+import SkeletonCards from '@/components/Projects/Skeleton/SkeletonCards';
 
 const ProjectsPage = () => {
   const [projects, setProjects] = useState<Project[]>([]);
@@ -129,11 +130,9 @@ const ProjectsPage = () => {
           />
           {/* Project list */}
           {loading ? (
-            <div className="flex flex-col gap-4 h-[75vh]  mb-10 w-[90%] md:w-full max-w-[1240px] mx-auto pl-2">
-              {t('populatingProjectMessage')}
-            </div>
+            <SkeletonCards />
           ) : projects?.length ? (
-            <MempmizedProjectsDisplay
+            <MemomizedProjectsDisplay
               projects={projects.filter(projectIncludesActiveTags)}
               activeLanguagesNames={tags
                 .filter(tag => tag.isActive)

app/layout.tsx

@@ -1,4 +1,4 @@
-import useLocalStorage from "@/hooks/useLocalStorage";
+import useLocalStorage from '@/hooks/useLocalStorage';
 
 export default function RootLayout({
   children,
@@ -7,9 +7,6 @@ export default function RootLayout({
   children: React.ReactNode;
   params: { locale: string };
 }) {
-
-
-
   return (
     <html lang={locale} dir="rtl">
       <body>{children}</body>

components/Common/Modals/AddProjectmodal/FileUploader.tsx

@@ -1,37 +1,106 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { UploadIcon } from './UploadIcon';
-import { UseFormRegister, FieldValues } from 'react-hook-form';
+import { UseFormRegister, FieldValues, UseFormSetValue } from 'react-hook-form';
 import { FormFieldRegistration } from '@/types/forms';
 import { useTranslations } from 'next-intl';
 
+const getErrorMessage = (errors: any, name: string) => {
+  return errors?.[name]?.message || '';
+};
+
 interface FileUploaderProps extends FormFieldRegistration {
   register: UseFormRegister<FieldValues>;
   name: string;
+  onFileChange?: UseFormSetValue<FieldValues>;
+  errors?: FieldValues;
 }
 
 export const FileUploader: React.FC<FileUploaderProps> = ({
   register,
   name,
+  onFileChange,
+  errors,
 }) => {
+  const [fileName, setFileName] = useState('');
   const t = useTranslations('Maintainers.maintainerForm');
-
+  const errorMessage = getErrorMessage(errors, name);
+  const formProps = register(name, { required: false });
   return (
-    <div className="flex flex-row items-center">
-      <p className="text-2xl whitespace-nowrap">{t('logo')}</p>
-      <div className="ml-4 flex items-center dark:bg-gray-700 bg-gray-200 rounded-md m-auto">
-        <label htmlFor="file-input" className="cursor-pointer">
-          <input
-            {...register(name, { required: false })}
-            id="file-input"
-            type="file"
-            name={name}
-            className="hidden"
-          />
-          <div className="flex justify-center items-center rounded-md max-w-[150px]">
-            <UploadIcon />
-          </div>
-        </label>
+    <div>
+      <div className="flex flex-row gap-4 items-center">
+        <p className="whitespace-nowrap">{t('logo')}</p>
+        <div className="flex items-center dark:bg-gray-700 bg-gray-200 rounded-md m-auto justify-center flex-1">
+          <label htmlFor="file-input" className="cursor-pointer">
+            <input
+              {...formProps}
+              id="file-input"
+              type="file"
+              name={name}
+              accept="image/*"
+              className="hidden"
+              onChange={e => {
+                setFileName(e.target.files?.item(0)?.name || '');
+                formProps.onChange(e);
+              }}
+            />
+            <div className="flex justify-between items-center h-14 rounded-md w-[150px] gap-2">
+              {fileName ? (
+                <SelectedFile
+                  fileName={fileName}
+                  onCancel={() => {
+                    setFileName('');
+                    onFileChange &&
+                      onFileChange(name, null, { shouldValidate: true });
+                  }}
+                  name={name}
+                  errors={errors}
+                />
+              ) : (
+                <div className="w-[26px] h-[26px] mx-auto">
+                  <UploadIcon />
+                </div>
+              )}
+            </div>
+          </label>
+        </div>
       </div>
+      {errorMessage && <p className="text-error">{errorMessage}</p>}
     </div>
   );
 };
+
+interface ISelectedFiled {
+  fileName: string;
+  onCancel: () => void;
+  name: string;
+  errors?: FieldValues;
+}
+const SelectedFile = ({ fileName, onCancel, errors, name }: ISelectedFiled) => {
+  const fileParts = fileName.split('.');
+  const extention = fileParts.slice(-1)[0];
+  const base =
+    fileParts.length < 1 ? fileParts : fileParts.slice(0, -1).join('.');
+  const errorMessage = getErrorMessage(errors, name);
+  return (
+    <>
+      <span
+        className=""
+        onClick={e => {
+          e.preventDefault();
+          onCancel();
+        }}
+      >
+        X
+      </span>
+      <div
+        className="file-name flex min-w-0 justify-start"
+        style={{ direction: 'ltr' }}
+      >
+        <span className="overflow-hidden whitespace-nowrap text-ellipsis">
+          {base}
+        </span>
+        <span>.{extention}</span>
+      </div>
+    </>
+  );
+};