feat(deps): migrate project to Next.js and update project structure (#51)

* 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

* Migrate project to Zustand and add  test suite

* Add test suite for useShowcaseStore hook

* Update .gitignore to exclude .swc directory

Author: ronal2do

.gitignore

@@ -1,153 +1,42 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+/.swc
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

app/credentials/page.tsx

@@ -0,0 +1,31 @@
+import { CredentialsDisplay } from "@/components/credentials/credentials-display";
+import { CredentialsEditor } from "@/components/credentials/credentials-editor";
+
+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">
+        <div className="flex gap-12 h-full">
+          <div className="w-2/5 rounded left-col text-light-text dark:text-dark-text">
+            <div className="flex justify-between">
+              <div>
+                <h3 className="text-4xl font-bold text-foreground">
+                  Add your Credentials
+                </h3>
+                <p className="text-foreground mt-3">
+                  Fill in the details on the right to create a credential for
+                  this showcase.
+                </p>
+              </div>
+            </div>
+            <CredentialsDisplay />
+          </div>
+          <div className="w-3/5  p-6 rounded-md right-col bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-text dark:text-dark-text ">
+            <CredentialsEditor />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+