feat: sync (#54)

* Update dependencies, add TypeScript support, and remove unused files

- Updated various dependencies in package.json and package-lock.json to their latest versions, including React, DnD Kit, FontAwesome, and others.
- Introduced TypeScript support by adding tsconfig.json and type declarations for SVG and PNG files.
- Removed the reportWebVitals.js file and its references from index.js to streamline the application.
- Cleaned up devDependencies and ensured compatibility with the latest libraries.

* Update package dependencies: remove web-vitals, add @types/file-saver

* Refactor components and add TypeScript support

- Removed legacy JavaScript files and replaced them with TypeScript versions for improved type safety and maintainability.
- Cleaned up unused files and optimized imports across the application.
- Implemented conditional rendering for JSONPreview in development mode.

* Add Character Management Components in TypeScript SHOWCASE-23
- Replaced the legacy JavaScript CharacterList and NewCharacterButton with TypeScript versions, enhancing type safety and maintainability.
- Removed outdated JavaScript files to streamline the codebase and improve overall application structure.

* - Converted various credential-related components to TypeScript, improving type safety and maintainability.
- Updated existing components to utilize new props and state management patterns.
- Cleaned up unused files and optimized imports for better performance and readability.

* - Updated CredentialsScreen to utilize new helper functions for managing credentials, attributes, and proof requests.
- Enhanced test coverage for credential-related functionalities in json-helper.spec.ts.
- Made minor adjustments to types and imports across multiple files for consistency and clarity.

* - Renamed `OnboardingScreen` to `OnboardingStep` for clarity and consistency.
- Introduced new helper functions for managing onboarding steps, including adding, updating, and removing credentials.
- Updated the `OnboardingPage` to handle state management and rendering of onboarding steps effectively.
- Enhanced type safety by converting components to TypeScript and updating type definitions.
- Cleaned up imports and optimized component structure for better maintainability.

* - Added tests for new onboarding step helper functions: `updateOnboardingStep`, `isArrayProperty`, `updateOnboardingStepSingleValue`, `updateOnboardingStepCredentials`, `removeOnboardingStepCredential`, and `addOnboardingStepCredential`.

* Implement core application structure with TypeScript support
- Added state management using `useImmer` for handling nested JSON structures, enhancing performance and maintainability.
- Updated `DEFAULT_JSON` to include a new `screenId` for onboarding steps.
- Created a new `ScenarioPage` component to manage scenarios, including adding and editing steps with dynamic credential handling.
- Refactored existing components to utilize updated props and state management patterns, ensuring type safety across the application.
- Introduced new helper functions for updating JSON properties and managing state transitions effectively.

* Migrate project to Next.js and update project structure

- Converted project from Create React App to Next.js 14 with TypeScript
- Restructured project files and directories to follow Next.js conventions
- Added new configuration files: tailwind.config.ts, tsconfig.json
- Implemented theme provider and dark mode toggle
- Created UI components using shadcn/ui pattern
- Removed legacy React and src folder files
- Updated dependencies and added Next.js specific configurations

* Add Jest configuration and testing setup

- Added jest.config.ts for configuring Jest with Next.js
- Updated package.json with test scripts and testing library dependencies
- Implemented comprehensive test suite for json-helper functions

* Refactor Credentials

- Migrated credentials and onboarding pages to use modern React hooks and state management
- Introduced new `useCredentials` hook for managing credential state
- Updated components to use Radix UI and shadcn/ui components
- Simplified page layouts with two-column design
- Added Zod schema validation for credential form
- Removed legacy components and consolidated file structure

* Add Language Selector and Radix UI Components

- Introduced a new LanguageSelector component with language switching functionality
- Added Radix UI Dialog and Popover components for enhanced UI interactions
- Updated package.json with new dependencies: @radix-ui/react-dialog, @radix-ui/react-popover, and cmdk
- Implemented cookie-based language preference persistence
- Created reusable UI components for command palette and dialog interactions

* Refactor Onboarding Screen Components

- Migrated onboarding screen components to use modern React hooks and state management
- Introduced new `useOnboarding` and `useIssueStep` hooks for managing onboarding state
- Created Zod schemas for form validation in onboarding steps

* Refactor Scenario Screen Components

- Migrated scenario screen components to use modern React hooks and state management
- Introduced new `useScenarios` hook for managing scenario state
- Created Zod schemas for form validation in scenario steps and scenarios

* chore: WIP add internationalization

* feat: added internationalization

* Migrate project to Zustand and add  test suite

* Add test suite for useShowcaseStore hook

* Update .gitignore to exclude .swc directory

* Refactor Types and Scenarios with Improved Type Safety
- Introduced `scenarioToFormData` transformer for consistent data conversion
- Improved type safety in scenario editing and step management
- Extracted common utility functions like `convertBase64`
- Updated Zod schemas to use literal types and more precise validations
- Enhanced test coverage for scenario-related functionality

* Replace FontAwesome icons with Lucide icons
- Removed @fortawesome/react-fontawesome and @fortawesome/free-solid-svg-icons dependencies
- Replaced FontAwesomeIcon components with Lucide icons across multiple components

* Update package dependencies and lock file

- Upgrade cmdk from 1.0.0 to 1.0.4
- Add @dnd-kit/react package
- Update tslib to version 2.8.1
- Remove redundant type dependencies

* Add unit tests for utility functions
- Create test suite for `cn` class name merging utility
- Add test for `convertBase64` file conversion utility

* Enhance GitHub Actions workflow with comprehensive CI checks

- Add test, lint, and typecheck steps to CI pipeline
- Ensure build process runs after all checks pass

* Update ESLint configuration and Next.js ESLint package

- Disable TypeScript version warning in ESLint configuration
- Upgrade eslint-config-next to version 15.1.6

* chore: cleanup

* - Update LocalFileUpload component with improved type handling
- Add translation support to ProofAttribute and ScenarioStep components
- Modify scenario step creation with more flexible title initialization
- Update localization files with new translation keys
- Remove commented-out code and improve null coalescing

* refactor: migrate from next-i18n-router to next-intl for internationalization

* refactor: complete migration to next-intl internationalization

* refactor: update import path for routing in middleware

* refactor: improve navbar layout and styling with responsive grid design

* feat: add skeleton loading state for dark mode toggle

* refactor: remove react-i18next and update translation imports

* chore: add eslint-plugin-react-hooks as a dev dependency

* feat: add Pino logging library with comprehensive logging configuration

---------

Co-authored-by: A.G.J. Cate <brummos@gmail.com>
Co-authored-by: Bram ten Cate <59436492+BtencateSphereon@users.noreply.github.com>

Author: 3 people

.github/workflows/Build&Deploy.yml

@@ -11,14 +11,25 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
 
-      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
+      - name: Install 🔧
         run: |
           unset CI
           npm i
+
+      - name: Run Tests 🧪
+        run: |
+          npm run test
+
+      - name: Run Typecheck 📚
+        run: |
+          npm run typecheck
+
+      - name: Run build 📚
+        run: |
           npm run build
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          branch: gh-pages # The branch the action should deploy to.
-          folder: build # The folder the action should deploy.
+          branch: gh-pages
+          folder: build

.gitignore

@@ -40,3 +40,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.idea

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

app/credentials/page.tsx renamed to app/[locale]/credentials/page.tsx

@@ -1,7 +1,13 @@
 import { CredentialsDisplay } from "@/components/credentials/credentials-display";
 import { CredentialsEditor } from "@/components/credentials/credentials-editor";
+import {PageParams} from '@/types';
+import { setRequestLocale, getTranslations } from "next-intl/server";
+
+export default async function Credentials({ params }: { params: PageParams }) {
+  const { locale } = await params
+  setRequestLocale(locale);
+  const t = await getTranslations('credentials');
 
-export default function Credentials() {
   return (
      <div className="flex flex-col min-h-screen mt-20 ">
       <div className="container mx-auto px-4 py-8 flex-grow">
@@ -10,11 +16,10 @@ export default function Credentials() {
             <div className="flex justify-between">
               <div>
                 <h3 className="text-4xl font-bold text-foreground">
-                  Add your Credentials
+                  {t('header_title')}
                 </h3>
                 <p className="text-foreground mt-3">
-                  Fill in the details on the right to create a credential for
-                  this showcase.
+                  {t('header_subtitle')}
                 </p>
               </div>
             </div>
@@ -28,4 +33,3 @@ export default function Credentials() {
     </div>
   );
 }
-

app/globals.css renamed to app/[locale]/globals.css

@@ -0,0 +1,75 @@
+import React, { PropsWithChildren } from "react";
+import { Montserrat } from "next/font/google";
+import { ThemeProvider } from "@/providers/theme-provider";
+import { NavBar } from "@/components/navbar";
+import { Footer } from "@/components/footer";
+import { JSONPreview } from "@/components/json-preview";
+import i18nConfig from "@/i18n.config";
+import {NextIntlClientProvider} from 'next-intl';
+import {getMessages, getTranslations} from 'next-intl/server';
+import {routing} from '@/i18n/routing';
+import {notFound} from 'next/navigation';
+import { Locale, PageParams } from "@/types";
+
+import "./globals.css";
+
+const montserrat = Montserrat({
+  variable: "--font-montserrat",
+  subsets: ["latin"],
+  weight: ["400", "700"],
+});
+
+export async function generateMetadata({params}: {params: Promise<{locale: Locale}>}) {
+  const locale = await params;
+  const t = await getTranslations({locale, namespace: 'metadata'});
+ 
+  return {
+    title: t('title'), 
+    description: t('description'),
+  };
+}
+
+export function generateStaticParams() {
+  return i18nConfig.locales.map(locale => ({ locale }));
+}
+
+type Params = PropsWithChildren<{
+  params: PageParams;
+}>
+
+export default async function RootLayout({
+  children,
+  params,
+}: Params) {
+  const { locale } = await params
+  // Ensure that the incoming `locale` is valid
+  if (!routing.locales.includes(locale)) {
+    notFound();
+  }
+
+  // Providing all messages to the client
+  // side is the easiest way to get started
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <body className={`${montserrat.variable} antialiased`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <NextIntlClientProvider messages={messages}>
+            <div className="min-h-screen bg-light-bg dark:bg-dark-bg text-light-text">
+              <NavBar/>
+              {children}
+              {process.env.NODE_ENV === "development" && <JSONPreview />}
+              <Footer/>
+            </div>
+          </NextIntlClientProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/[locale]/layout.tsx

@@ -1,19 +1,23 @@
 import { OnboardingScreen } from "@/components/onboarding-screen/onboarding-screen";
 import { OnboardingSteps } from "@/components/onboarding-screen/onboarding-steps";
+import { PageParams } from "@/types";
+import { setRequestLocale, getTranslations } from "next-intl/server";
+
+export default async function Onboarding({ params }: { params: PageParams }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getTranslations("onboarding");
 
-export default function Onboarding() {
   return (
     <div className="flex flex-col min-h-screen">
       <div className="flex gap-12 container mx-auto px-4 py-8 mt-20">
         <div className="w-2/5 rounded left-col text-light-text dark:text-dark-text">
           <div className="flex w-full">
             <div>
               <h2 className="text-4xl font-bold text-foreground">
-                Add your Steps
+                {t("header_title")}
               </h2>
-              <p className="w-full mt-3">
-                Add pages below to create the onboarding steps.
-              </p>
+              <p className="w-full mt-3">{t("header_subtitle")}</p>
             </div>
           </div>
 

app/onboarding/page.tsx renamed to app/[locale]/onboarding/page.tsx

@@ -0,0 +1,44 @@
+import { CharacterForm } from "@/components/character-screen/character-form";
+import { CharacterList } from "@/components/character-screen/character-list";
+import { setRequestLocale, getTranslations } from "next-intl/server";
+import { PageParams } from '@/types';
+
+async function HomePage({ params }: { params: PageParams }) {
+  const { locale } = await params
+  setRequestLocale(locale);
+  const t = await getTranslations('character');
+
+  return (
+      <div className="min-h-screen bg-light-bg dark:bg-dark-bg text-light-text">
+        <div className="flex flex-col min-h-screen mt-20 text-light-text bg-light-bg dark:bg-dark-bg dark:text-dark-text">
+          <div className="container mx-auto px-4 py-8 flex-grow">
+            <div className="flex gap-12 h-full">
+              <div className="w-2/5 rounded left-col">
+                <div className="flex justify-between">
+                  <div>
+                    <h3 className="text-4xl font-bold text-foreground">
+                      {t('header_title')}
+                    </h3>
+                    <p className="text-foreground mt-3">
+                      {t('header_subtitle')}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="mt-8">
+                  <div className="flex justify-between mb-4">
+                    <h3 className="text-xl font-bold">{t('your_character_label')}</h3>
+                  </div>
+
+                  <CharacterList />
+                </div>
+              </div>
+              <CharacterForm />
+            </div>
+          </div>
+        </div>
+      </div>
+  );
+}
+
+export default HomePage;

app/[locale]/page.tsx

@@ -1,19 +1,24 @@
 import { EditStepScreen } from "@/components/scenario-screen/edit-step-screen";
 import { ScenarioScreen } from "@/components/scenario-screen/scenario-screen";
+import { PageParams } from "@/types";
+  import { setRequestLocale, getTranslations } from "next-intl/server";
+
+export default async function Scenario({ params }: { params: PageParams }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getTranslations("scenario");
 
-export default function Scenario() {
   return (
     <div className="flex flex-col min-h-screen">
       <div className="flex gap-12 container mx-auto px-4 py-8 mt-20">
         <div className="w-2/5 rounded left-col text-foreground">
           <div className="flex w-full">
             <div>
               <h2 className="text-4xl font-bold text-foreground">
-                Create Scenarios
+                {t('header_title')}
               </h2>
               <p className="w-full mt-3">
-                Add pages below to create your scenarios screens and connecting
-                steps.
+                {t('header_subtitle')}
               </p>
             </div>
           </div>