Issue77-migrate-to-vite

.env.template

@@ -1,22 +1,22 @@
 # Backend API URL for the Finesse frontend application.
 # Example: https://finesse-backend.com
-REACT_APP_BACKEND_URL=<Backend-API-URL>
+VITE_BACKEND_URL=
 
 # Base path for the Finesse frontend application. Used for routing.
 # Example: finesse-frontend
-REACT_APP_BASENAME=<Frontend-Base-Path>
+VITE_BASENAME=
 
 # Boolean flag to enable or disable debug mode for the application.
 # When set to True, the application provides a debug panel.
 # Defaults to False when not set. Optional.
 # Example: True or False
-REACT_APP_DEBUG_MODE=<True/False>
+VITE_DEBUG_MODE=
 
 # GitHub API URL for accessing the Finesse data repository.
 # This URL is used to fetch data from the specified GitHub repository.
 # Example: https://api.github.com/repos/ai-cfia/finesse-data/contents
-REACT_APP_GITHUB_API_URL=<GitHub-API-URL>
+VITE_GITHUB_API_URL=
 
-# Default search source. Options: 'ailab', 'azure' and 'static'. 
+# Default search source. Options: 'ailab', 'azure' and 'static'.
 # Optional. Defaults to 'azure'.
-# REACT_APP_SEARCH_SOURCE=azure
+# VITE_SEARCH_SOURCE=

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/workflows/react-frontend-workflow.yml

@@ -14,7 +14,7 @@ jobs:
   markdown-check:
     uses: ai-cfia/github-workflows/.github/workflows/workflow-markdown-check.yml@76-as-a-devops-i-would-like-to-fix-the-markdown-lint-workflow
     with:
-      config-file-path: '.mlc_config.json'
+      config-file-path: ".mlc_config.json"
     secrets: inherit
 
   repo-standard:

.gitignore

@@ -1,24 +1,36 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
+# Dependencies
 /node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
 
-# production
+# Production build files
+/dist
 /build
 
-# misc
-.DS_Store
+# Compiled files
+/*.js.map
+/*.css.map
+/.tscache
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment variables
 .env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# Debug logs
+*.log
+*.csv
+*.dat
+*.out
+*.pid
+*.seed
+*.svg
+
+# Operating System files
+.DS_Store
+Thumbs.db

DESIGN.md

@@ -2,54 +2,60 @@
 
 ## Design Philosophy and UX Concept
 
-Refer to our comprehensive [Design and UX Philosophy documentation](https://github.com/ai-cfia/dev-rel-docs/blob/91-document-design-philosophy-and-ux-concept/Design-UX/DESIGN-UX-PHILOSOPHY.md) for a detailed guide on our approach
-to standardizing frontend development practices across CFIA projects.
+Refer to our comprehensive [Design and UX Philosophy
+documentation](https://github.com/ai-cfia/dev-rel-docs/blob/91-document-design-philosophy-and-ux-concept/Design-UX/DESIGN-UX-PHILOSOPHY.md)
+for a detailed guide on our approach to standardizing frontend development
+practices across CFIA projects.
 
 The Design and UX Philosophy emphasizes a user-centric approach, ensuring that
-the applications we develop are intuitive, accessible, and efficient.
-This philosophy aligns with our commitment to providing an exceptional user
+the applications we develop are intuitive, accessible, and efficient. This
+philosophy aligns with our commitment to providing an exceptional user
 experience, where the needs and preferences of users are at the forefront of
 every design decision.
 
 ## Benefits of Using Styled Components over Traditional CSS
 
 1. **Component-Level Styling:** Styled Components enable defining styles at the
-component level, enhancing modularity and reusability. This encapsulation
-ensures styles remain confined to their respective components.
+   component level, enhancing modularity and reusability. This encapsulation
+   ensures styles remain confined to their respective components.
 2. **Dynamic Styling:** Easily pass props to dynamically alter styles with
-Styled Components, offering greater flexibility and control over component
-appearance.
+   Styled Components, offering greater flexibility and control over component
+   appearance.
 3. **Reduced Naming Conflicts:** Styled Components generate unique class names,
-significantly reducing the risk of naming conflicts in a large codebase.
+   significantly reducing the risk of naming conflicts in a large codebase.
 4. **Easier Deletion of Unused Styles:** Deleting a component also removes its
-associated styles, preventing the accumulation of unused CSS.
+   associated styles, preventing the accumulation of unused CSS.
 5. **Improved Developer Experience:** Styled Components integrate with modern
-development tools, providing features like syntax highlighting and style
-linting, thus enhancing the overall development process.
+   development tools, providing features like syntax highlighting and style
+   linting, thus enhancing the overall development process.
 
 ## Finesse React Project Component Structure
 
 ### Component Relationship Diagram
 
 Below is the visual representation of the Finesse Frontend component structure:
 
-![Finesse Frontend Component Diagram](https://github.com/ai-cfia/finesse-frontend/assets/133677161/b7bf92a1-cc24-48a9-8814-30b1b291e4e4)
+![Finesse Frontend Component
+Diagram](https://github.com/ai-cfia/finesse-frontend/assets/133677161/b7bf92a1-cc24-48a9-8814-30b1b291e4e4)
 
 For a detailed view and interactive experience with the diagram, visit the
-[Finesse Component Diagram on Lucidchart](https://lucid.app/lucidchart/ae5c689e-25cb-4679-bb5f-aa509955a50f/edit?invitationId=inv_d4b29dba-3c6a-4c79-921e-fae853739ed4&page=0_0#).
-
+[Finesse Component Diagram on
+Lucidchart](https://lucid.app/lucidchart/ae5c689e-25cb-4679-bb5f-aa509955a50f/edit?invitationId=inv_d4b29dba-3c6a-4c79-921e-fae853739ed4&page=0_0#).
 
 ### Root (`src` Folder)
+
 - The root source folder branches into two main parts:
   - `App.tsx`
   - `contexts` (folder)
 
 ### App Component (`App.tsx`)
+
 - Serves as the entry point, branching out to:
   - `Home.tsx`
   - `SearchPage.tsx`
 
 ### Home Page (`Home.tsx`)
+
 - Utilizes several shared components:
   - `Header.tsx`
   - `DebugPanel.tsx`
@@ -59,6 +65,7 @@ For a detailed view and interactive experience with the diagram, visit the
   - `AlertBanner.tsx`
 
 ### Search Page (`SearchPage.tsx`)
+
 - Also uses shared components:
   - `Header.tsx`
   - `DebugPanel.tsx`
@@ -69,47 +76,49 @@ For a detailed view and interactive experience with the diagram, visit the
   - `HighlightedContent.tsx`
 
 ### Contexts (Folder)
+
 - Contains three context components:
   - `AlertContext.tsx`
   - `DataContext.tsx`
   - `LayoutContext.tsx`
 
-This structure illustrates a separation of concerns between pages
-(`Home` and `SearchPage`) and shared components, and the encapsulation of
-state management in context components.
+This structure illustrates a separation of concerns between pages (`Home` and
+`SearchPage`) and shared components, and the encapsulation of state management
+in context components.
 
 ## **Details**
 
 - The React application follows a parent-child relationship as shown in the
-diagram above.
-- The diagram illustrates the flow of component props and the location at
-which components are imported.
+  diagram above.
+- The diagram illustrates the flow of component props and the location at which
+  components are imported.
 
 ---
 
 ## **Styled Components**
 
 - As for CSS and styling, [styled components](https://styled-components.com/)
-was used.
+  was used.
 - Styled components is a library that allows you to write CSS in JS while
-building custom components in Reactjs.
-- Styled components library can be installed via npm with
-`npm i styled-components`.
+  building custom components in Reactjs.
+- Styled components library can be installed via npm with `npm i
+  styled-components`.
 - Any component that uses styled components, will import from the
-`src/components/styles/indexElements.tsx` file.
+  `src/components/styles/indexElements.tsx` file.
 
 ### Why Choose Styled Components?
 
 The decision to adopt Styled Components is rooted in the desire to address the
 complexities and limitations of traditional CSS, especially in large-scale and
 dynamic application environments. Styled Components offer a solution that
-couples the visual design directly with the component logic, resulting in a
-more cohesive development process. This approach not only streamlines the
-styling of applications but also aligns with the modern trends of
-component-based architecture, promoting better maintainability and scalability.
-
-For a detailed explanation and the rationale behind this decision, refer to our ADR
-on [Styling with Styled Components](https://github.com/ai-cfia/dev-rel-docs/blob/37a0ec5cfb23e6e156f908b4ddde09a489cf40e5/adr/009-styling-with-styled-components.md).
+couples the visual design directly with the component logic, resulting in a more
+cohesive development process. This approach not only streamlines the styling of
+applications but also aligns with the modern trends of component-based
+architecture, promoting better maintainability and scalability.
+
+For a detailed explanation and the rationale behind this decision, refer to our
+ADR on [Styling with Styled
+Components](https://github.com/ai-cfia/dev-rel-docs/blob/37a0ec5cfb23e6e156f908b4ddde09a489cf40e5/adr/009-styling-with-styled-components.md).
 
 ### Contrast with Alternatives