refactor: migrate to feature-based architecture

- Reorganize codebase from flat structure to feature-based modules
- Move components, hooks, and utilities into feature-specific directories
- Consolidate shared utilities and components in src/shared/
- Add Storybook configuration for component development
- Update TypeScript configuration and Vite config for new structure
- Remove deprecated utility scripts and documentation files
- Clean up unused image compression scripts
- Update dependencies in package.json and package-lock.json
- Enhance service worker and sitemap generation
- Improve build configuration with cleanup scripts

Breaking changes:
- Import paths have changed from flat structure to feature-based
- Some components have been reorganized under src/features/
- Shared utilities moved from src/utils/ to src/shared/utils/

This refactoring improves code organization, maintainability, and scalability
by grouping related functionality into cohesive feature modules.

Author: kcharfi24

.gitignore

@@ -50,3 +50,15 @@ lerna-debug.log*
 
 # OS
 Thumbs.db
+
+# Storybook
+*storybook.log
+storybook-static
+
+# Temporary files
+depcheck-results.json
+compress-*.js
+compress-*.cjs
+
+# WASM build artifacts
+wasm-modules/target/

.storybook/main.ts

@@ -0,0 +1,39 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/shared/ui/stories/**/*.mdx",
+    "../src/shared/ui/stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+
+  addons: ["@storybook/addon-a11y", '@storybook/addon-docs'],
+
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
+  },
+
+  core: {
+    disableTelemetry: true,
+  },
+
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@': '/src',
+          '@/features': '/src/features',
+          '@/shared': '/src/shared',
+        },
+        dedupe: ['react', 'react-dom', 'react/jsx-runtime']
+      },
+      optimizeDeps: {
+        include: ['react', 'react-dom', 'react/jsx-runtime'],
+        force: true
+      }
+    });
+  }
+};
+
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,38 @@
+<!-- Load Google Fonts for proper typography -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
+
+<style>
+  /* Ensure fonts are applied globally in Storybook */
+  body {
+    font-family: 'Roboto', 'SF Pro Text', 'Inter', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Poppins', 'SF Pro Display', 'Inter', sans-serif;
+  }
+  
+  /* Arabic font support */
+  [dir="rtl"],
+  [lang="ar"] {
+    font-family: 'Tajawal', 'Roboto', sans-serif;
+  }
+  
+  [dir="rtl"] h1,
+  [dir="rtl"] h2,
+  [dir="rtl"] h3,
+  [dir="rtl"] h4,
+  [dir="rtl"] h5,
+  [dir="rtl"] h6,
+  [lang="ar"] h1,
+  [lang="ar"] h2,
+  [lang="ar"] h3,
+  [lang="ar"] h4,
+  [lang="ar"] h5,
+  [lang="ar"] h6 {
+    font-family: 'Tajawal', 'Poppins', sans-serif;
+  }
+</style>

.storybook/preview.ts

@@ -0,0 +1,81 @@
+import type { Preview } from '@storybook/react-vite';
+
+// Import our UI components styles
+import '../src/components/ui/ui-components.css';
+
+// Import main application styles for proper theming and fonts
+import '../index.css';
+
+const preview: Preview = {
+  parameters: {
+    layout: 'centered',
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+      expanded: true,
+    },
+    docs: {
+      toc: true,
+    },
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+      config: {
+        rules: [
+          {
+            // This rule is disabled because we use aria-label correctly
+            id: 'button-name',
+            enabled: true,
+          },
+        ],
+      },
+    },
+    backgrounds: {
+      options: {
+        light: {
+          name: 'light',
+          value: '#ffffff',
+        },
+
+        dark: {
+          name: 'dark',
+          value: '#1f2937',
+        },
+
+        gray: {
+          name: 'gray',
+          value: '#f3f4f6',
+        }
+      }
+    },
+  },
+
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'circlehollow',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light' },
+          { value: 'dark', icon: 'moon', title: 'Dark' },
+        ],
+        showName: true,
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  initialGlobals: {
+    backgrounds: {
+      value: 'light'
+    }
+  }
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);