ADR UI

Table of Contents

• About
• Getting Started
  • Prerequisites
  • Installation

About

UI for crafting and running ADR queries.

Technologies Used

• Next.js 14
• NextUI v2
• Tailwind CSS
• React DnD
• Zustand
• Immer
• Tailwind Variants
• TypeScript
• Framer Motion
• next-themes

508 Compliance (Accessibility):

Semantic HTML:

The project strictly adheres to semantic HTML structure (headings, lists, etc.), making it easier for screen readers and assistive technologies to interpret content. Keyboard Navigation: All interactive elements can be accessed and used with a keyboard alone, ensuring that users who cannot use a mouse can still navigate the application.

• Color Contrast: Color choices for text and background meet or exceed minimum contrast ratios for readability, accommodating users with visual impairments.
• Alternative Text: All images have descriptive alternative text (alt text) to convey their meaning to users who cannot see them.
• ARIA Attributes: Where appropriate, ARIA (Accessible Rich Internet Applications) attributes are used to provide additional context for assistive technologies.
• Focus Management: The focus is programmatically managed to ensure a smooth and predictable navigation experience for keyboard-only users.

Additional Features:

• Internationalization (i18n): Support for multiple languages to reach a broader audience.
• Responsive Design: Ensures the application looks and functions well on various screen sizes (desktops, tablets, mobile devices).
• Unit/Integration Testing: Tests that validate the functionality of individual components and their interactions.

Getting Started

To get started, follow these steps:

Prerequisits

Before cloning/forking this project, make sure you have the following tools installed:

• Git
• NodeJS

Installation

1. Clone this repository and the ui library to your local machine:

   git clone https://github.com/opencdx/ADR-gui.git
   git clone https://github.com/opencdx/ui-library.git
   

2. Install the project dependencies using npm in both ui-library and ADR-gui:

   npm install
   
   

3. Start the app

    npm start
   

4. Open your web browser and visit http://localhost:3000 (or the URL in the cosole) to access the application

5. To use development host use

    npm run startDev
   
   

Playwright

1. Start the Playwright

    npx playwright test --project=chromium --headed
   

2. Open your web browser to access the application

Bundle Analyzer

Helps you manage the size of your JavaScript modules. It generates a visual report of the size of each module and their dependencies. You can use the information to remove large dependencies, split your code, or only load some parts when needed, reducing the amount of data transferred to the client.

1. To run

    npm run build