+# Document Upload App with Next.js
-# Next.js Enterprise Boilerplate [![GitHub Actions Workflow Status][check-workflow-badge]][check-workflow-badge-link] [![GitHub License][github-license-badge]][github-license-badge-link] [![GitHub contributors][github-contributors-badge]][github-contributors-badge-link] [![Discord][discord-badge]][discord-badge-link] [![Blazity][made-by-blazity-badge]][made-by-blazity-badge-link]
-
-Welcome to the _Next.js Enterprise Boilerplate_, an open-source template for enterprise projects! It's loaded with features that'll help you build a high-performance, maintainable, and enjoyable app. We've done all the heavy lifting for you, so sit back, relax, and get ready to conquer the world with your incredible app! ๐
-
-> [!NOTE]
-> **Blazity** is a group of Next.js/Headless experts. Contact us at [contact@blazity.com](https://blazity.com) if youโd like to talk about your project or just to have a chat with us
+This project is built on the robust foundation of the Next.js Enterprise Boilerplate by Blazity, tailored for a document upload application. It demonstrates advanced usage of Next.js, Formik for form management, Tailwind CSS for styling, and includes comprehensive testing with Jest and Playwright. This README guides you through the project setup, features, and deployment.
## Features
-With this template, you get all the awesomeness you need:
+- **Next.js**: Leveraging the latest features of Next.js for SSR and static generation.
+- **Tailwind CSS**: Utilizing Tailwind for rapid and responsive UI development.
+- **Formik**: Streamlined form handling with validation and custom input components.
+- **Playwright**: End-to-end testing to ensure reliability and functionality.
+- **Radix UI**: Utilizing Radix UI for accessible and customizable components.
+- **Tailwind Merge**: Efficiently managing Tailwind CSS classes.
+- **TypeScript**: Ensuring type safety and developer productivity.
-- ๐๏ธ **[Next.js](https://nextjs.org/)** - Fast by default, with config optimized for performance (with **App Directory**)
-- ๐
**[Tailwind CSS](https://tailwindcss.com/)** - A utility-first CSS framework for rapid UI development
-- โจ **[ESlint](https://eslint.org/)** and **[Prettier](https://prettier.io/)** - For clean, consistent, and error-free code
-- ๐ ๏ธ **[Extremely strict TypeScript](https://www.typescriptlang.org/)** - With [`ts-reset`](https://github.com/total-typescript/ts-reset) library for ultimate type safety
-- ๐ **[GitHub Actions](https://github.com/features/actions)** - Pre-configured actions for smooth workflows, including Bundle Size and performance stats
-- ๐ฏ **Perfect Lighthouse score** - Because performance matters
-- **[Bundle analyzer plugin](https://www.npmjs.com/package/@next/bundle-analyzer)** - Keep an eye on your bundle size
-- **[Jest](https://jestjs.io/)** and **[React Testing Library](https://testing-library.com/react)** - For rock-solid unit and integration tests
-- **[Playwright](https://playwright.dev/)** - Write end-to-end tests like a pro
-- **[Storybook](https://storybook.js.org/)** - Create, test, and showcase your components
-- **Smoke Testing** and **Acceptance Tests** - For confidence in your deployments
-- **[Conventional commits git hook](https://www.conventionalcommits.org/)** - Keep your commit history neat and tidy
-- **[Observability](https://opentelemetry.io/)** - Open Telemetry integration for seamless monitoring
-- **[Absolute imports](https://nextjs.org/docs/advanced-features/module-path-aliases)** - No more spaghetti imports
-- **[Health checks](https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-startup-probes/)** - Kubernetes-compatible for robust deployments
-- **[Radix UI](https://www.radix-ui.com/)** - Headless UI components for endless customization
-- **[CVA](http://cva.style/)** - Create a consistent, reusable, and atomic design system
-- **[Renovate BOT](https://www.whitesourcesoftware.com/free-developer-tools/renovate)** - Auto-updating dependencies, so you can focus on coding
-- **[Patch-package](https://www.npmjs.com/package/patch-package)** - Fix external dependencies without losing your mind
-- **Components coupling and cohesion graph** - A tool for managing component relationships
-- **[Automated ChatGPT Code Reviews](https://openai.com/chatgpt)** - **Stay on the cutting edge with AI-powered code reviews!**
-- **[Semantic Release](https://github.com/semantic-release/semantic-release)** - for automatic changelog
-- **[T3 Env](https://env.t3.gg/)** - Manage your environment variables with ease
+## Getting Started
-## Table of Contents
+To run this project locally, follow these steps:
-- [Next.js Enterprise Boilerplate](#nextjs-enterprise-boilerplate)
- - [Features](#features)
- - [Table of Contents](#table-of-contents)
- - [Getting Started](#-getting-started)
- - [Deployment](#-deployment)
- - [Scripts Overview](#-scripts-overview)
- - [Coupling Graph](#-coupling-graph)
- - [Testing](#-testing)
- - [Running Tests](#running-tests)
- - [Acceptance Tests](#acceptance-tests)
- - [Smoke Testing](#smoke-testing)
- - [Styling and Design System](#-styling-and-design-system)
- - [CVA - A New Approach to Variants](#cva---a-new-approach-to-variants)
- - [State Management](#-state-management)
- - [Zustand](#zustand)
- - [Jotai](#jotai)
- - [Recoil](#recoil)
- - [ChatGPT Code Review](#-chatgpt-code-review)
- - [Environment Variables handling](#-environment-variables-handling)
- - [Contribution](#-contribution)
- - [Support](#support)
- - [License](#-license)
- - [Contributors](#contributors)
-
-## ๐ฏ Getting Started
-
-To get started with this boilerplate, follow these steps:
-
-1. Fork & clone repository:
+1. Clone the repository:
```bash
-## Don't forget to โญ star and fork it first :)
-git clone https://github.com/- -
-
-- - -## ๐ License - -This project is licensed under the MIT License. For more information, see the [LICENSE](./LICENSE) file. - -## Contributors - - - - -
 Bart Stefanski ๐ป |
-  Jakub Jabลoลski ๐ |
-  Igor Klepacki ๐ |
- ||||
- 
- Add your contributions
-
- |
- ||||||
- {/* Close button */}
-
-
- {/* Title */}
-
-
- {/* Form layout */}
- Document Upload
-
-
+
+ {/* Render a selection input for each testing center, allowing a client to be chosen for each. */}
{testingCenters.map((testingCenter) => (
- = ({ label, ...props }) => {
+const FileInput: React.FC = ({ label, ...props }) => {
const { required } = props;
const [field, meta] = useField(props);
const { setFieldValue } = useFormikContext();
const fileInputRef = useRef(null);
+ // State to manage drag-over styling
+ const [dragging, setDragging] = useState(false);
+
+ // State to store information about the selected file
+ const [fileInfo, setFileInfo] = useState<{ name: string; size: number } | null>(null);
+
+ // State to simulate and display upload progress
+ const [uploadProgress, setUploadProgress] = useState(0);
+
+ // Simulates file upload progress
+ const simulateUpload = () => {
+ let progress = 0;
+ const interval = setInterval(() => {
+ progress += 10;
+ setUploadProgress(progress);
+ if (progress >= 100) {
+ clearInterval(interval);
+ }
+ }, 20); // Adjust time interval to control speed of the animation
+ };
+
+ // Handles file selection via input change event
const handleChange = (event: React.ChangeEvent) => {
const { files } = event.target;
const file = files ? files[0] : null;
- setFieldValue(props.name, file); // Directly use setFieldValue to update Formik's state
+ setFieldValue(props.name, file); // Update Formik's state
+ if (file) {
+ setFileInfo({ name: file.name, size: file.size });
+ setUploadProgress(0); // Reset progress
+ simulateUpload(); // Simulate upload process
+ }
};
+ // Opens the file input dialog
const handleClick = () => {
if (fileInputRef.current) {
fileInputRef.current.click();
}
};
+ // Handles file drop
const handleDrop = (event: React.DragEvent) => {
event.preventDefault();
event.stopPropagation();
+ setDragging(false); // Reset drag state
const files = event.dataTransfer.files;
if (files && files.length > 0) {
- const file = files[0];
- setFieldValue(props.name, file);
+ const file = files[0];
+ if (file) {
+ setFileInfo({ name: file.name, size: file.size });
+ setFieldValue(props.name, file);
+ }
+ setUploadProgress(0); // Reset progress
+ simulateUpload(); // Simulate upload process
+ }
+};
+
+// Manages drag-over state for styling
+ const handleDragOver = (event: React.DragEvent) => {
+ event.preventDefault();
+ if (!dragging) {
+ setDragging(true);
}
};
+ // Resets dragging state when dragging leaves the drop area
+ const handleDragLeave = (event: React.DragEvent) => {
+ event.preventDefault();
+ setDragging(false);
+ };
+
return (
-
+
diff --git a/components/Form/ErrorMessage.tsx b/components/Form/ErrorMessage.tsx
index 4b3534d..acf10f6 100644
--- a/components/Form/ErrorMessage.tsx
+++ b/components/Form/ErrorMessage.tsx
@@ -1,8 +1,14 @@
+/**
+ * ErrorMessage Component
+ *
+ * Displays an error message if a form field has been touched and an error exists.
+ */
+
import React from "react"
const ErrorMessage = ({ touched, error }: { touched: boolean; error?: string }) => {
if (touched && error) {
- return
{testingCenter}
-
))}
+
-
- {clients.map((option: string) => (
-
- ))}
-
-
-
-
+
+ {clients.map((option: string) => (
+
+ ))}
+
+
{error}
+ return{error}
} return null } diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx index 25b7a3b..29a058d 100644 --- a/components/Form/FileInput.tsx +++ b/components/Form/FileInput.tsx @@ -1,64 +1,146 @@ +/** + * FileInput Component + * + * Renders a file input with drag-and-drop support. Displays the selected file's name and size, + * and simulates file upload progress. Integrates with Formik for form state management. + */ + +import { faFile } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useField, useFormikContext } from "formik"; -import React, { useRef } from "react"; +import React, { useRef, useState } from "react"; import ErrorMessage from "./ErrorMessage"; import RequiredAsterisk from "./RequiredAsterisk"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faFile } from "@fortawesome/free-solid-svg-icons"; - +import Separator from "./Separator"; interface FileInputProps { label: string; required?: boolean; - name:string; + name: string; } -const FileInput: React.FC
-
-
e.preventDefault()}>
- = ({
name,
label,
+ separator,
options,
...props
-}: {
- name: string
- label: string
- options: string[]
- [x: string]: any // Allow any other props
}) => {
const { required, ...restProps } = props
+
+ // State and helpers from Formik for managing radio group value
const [field, meta, helpers] = useField({ ...restProps, name })
+ // Handles radio option change, updating Formik's state
const handleChange = (value: string) => {
helpers.setValue(value)
}
return (
-
-
-
+ Drag & Drop Here or Browse
-
+ {/* Title */}
+
);
diff --git a/components/Form/RadioGroup.tsx b/components/Form/RadioGroup.tsx
index 9886d69..d077c79 100644
--- a/components/Form/RadioGroup.tsx
+++ b/components/Form/RadioGroup.tsx
@@ -1,39 +1,63 @@
+/**
+ * RadioGroupField Component
+ *
+ * Renders a group of radio buttons using Radix UI with Formik integration.
+ * Supports custom options, labels, and an optional separator.
+ */
+
+import * as RadioGroup from "@radix-ui/react-radio-group"
import { useField } from "formik"
import React from "react"
import ErrorMessage from "./ErrorMessage"
import RequiredAsterisk from "./RequiredAsterisk"
-import * as RadioGroup from "@radix-ui/react-radio-group"
+import Separator from "./Separator"
-const RadioGroupField = ({
+/**
+ * Props for RadioGroupField.
+ *
+ * @param name The name attribute for the radio group, used for form submission.
+ * @param label Display label for the radio group.
+ * @param separator Optional boolean to render a visual separator above the radio group.
+ * @param options Array of option strings that the radio group will display.
+ * @param props Additional props passed to the radio group, including `required`.
+ */
+
+interface RadioGroupFieldProps {
+ name: string;
+ label: string;
+ separator?: boolean;
+ options: string[];
+ [key: string]: any; // This allows for additional props not explicitly defined in the interface.
+}
+
+const RadioGroupField: React.FC
+
-
+
+ {/* File drop area */}
+
+
+
+ {/* Hidden input */}
+
+
+ {/* File info */}
+ {fileInfo && (
+
+
+
+ Drag & Drop Here or Browse
+
+
+ )}
+
+
+
+
+ {fileInfo.name}
+{Math.round(fileInfo.size / 1024)} KB
+
+
+
+
-
-
+
+
{options.map((option) => (
-
+ {separator &&
+
+