diff --git a/.env.example b/.env.example index 67a64b3..d0b5591 100644 --- a/.env.example +++ b/.env.example @@ -12,6 +12,7 @@ # General NODE_ENV="development" +NODE_OPTIONS="--max_old_space_size=16384" NEXT_TELEMETRY_DISABLED="true" NEXT_PUBLIC_SITE_URL="http://localhost:3000" diff --git a/.github/workflows/code-quality.yml b/.github/workflows/code-quality.yml index e1204d1..344776d 100644 --- a/.github/workflows/code-quality.yml +++ b/.github/workflows/code-quality.yml @@ -21,6 +21,7 @@ jobs: name: Performance Audit runs-on: ubuntu-latest env: + CI: true NEXT_TELEMETRY_DISABLED: true NODE_ENV: "production" DATABASE_HOST: "localhost" @@ -45,7 +46,7 @@ jobs: uses: actions/checkout@v4 with: fetch-depth: 20 - - name: Fetch base_ref HEAD to use it as Ancestor hash in LHCI + - name: Fetch base_ref HEAD run: git fetch --depth=1 origin +refs/heads/${{ github.base_ref }}:refs/remotes/origin/${{ github.base_ref }} - name: Setup bun uses: oven-sh/setup-bun@v2 diff --git a/.github/workflows/deploy-script.yml b/.github/workflows/deploy-script.yml index 38045f4..04ca6cf 100644 --- a/.github/workflows/deploy-script.yml +++ b/.github/workflows/deploy-script.yml @@ -25,7 +25,7 @@ on: jobs: script: name: Script - runs-on: ubuntu-latest + runs-on: self-hosted environment: ${{ inputs.environment }} steps: - uses: appleboy/ssh-action@v1.0.3 diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..40da303 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,130 @@ +# Code of Conduct + +## Our Pledge + +We as members, contributors, and leaders pledge to make participation in our +community a harassment-free experience for everyone, regardless of age, body +size, visible or invisible disability, ethnicity, sex characteristics, gender +identity and expression, level of experience, education, socio-economic status, +nationality, personal appearance, race, religion, or sexual identity +and orientation. + +We pledge to act and interact in ways that contribute to an open, welcoming, +diverse, inclusive, and healthy community. + +## Our Standards + +Examples of behavior that contributes to a positive environment for our +community include: + +* Demonstrating empathy and kindness toward other people +* Being respectful of differing opinions, viewpoints, and experiences +* Giving and gracefully accepting constructive feedback +* Accepting responsibility and apologizing to those affected by our mistakes, + and learning from the experience +* Focusing on what is best not just for us as individuals, but for the + overall community + +Examples of unacceptable behavior include: + +* The use of sexualized language or imagery, and sexual attention or + advances of any kind +* Trolling, insulting or derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or email + address, without their explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Enforcement Responsibilities + +Community leaders are responsible for clarifying and enforcing our standards of +acceptable behavior and will take appropriate and fair corrective action in +response to any behavior that they deem inappropriate, threatening, offensive, +or harmful. + +Community leaders have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, and will communicate reasons for moderation +decisions when appropriate. + +## Scope + +This Code of Conduct applies within all community spaces, and also applies when +an individual is officially representing the community in public spaces. +Examples of representing our community include using an official e-mail address, +posting via an official social media account, or acting as an appointed +representative at an online or offline event. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported to the community leaders responsible for enforcement at +`hackerspace-styret@idi.ntnu.no`, or you may contact our Trusted Representative directly (updated contact information shall always be available at our [website](https://www.hackerspace-ntnu.no/about)). +Please remember that our Trusted Representative has a duty of confidentiality - they should be contacted if you'd like to stay anonymous, +or if you prefer not to contact the Hackerspace NTNU leadership directly. +All complaints will be reviewed and investigated promptly and fairly. + +All community leaders are obligated to respect the privacy and security of the +reporter of any incident. + +## Enforcement Guidelines + +Community leaders will follow these Community Impact Guidelines in determining +the consequences for any action they deem in violation of this Code of Conduct: + +### 1. Correction + +**Community Impact**: Use of inappropriate language or other behavior deemed +unprofessional or unwelcome in the community. + +**Consequence**: A private, written warning from community leaders, providing +clarity around the nature of the violation and an explanation of why the +behavior was inappropriate. A public apology may be requested. + +### 2. Warning + +**Community Impact**: A violation through a single incident or series +of actions. + +**Consequence**: A warning with consequences for continued behavior. No +interaction with the people involved, including unsolicited interaction with +those enforcing the Code of Conduct, for a specified period of time. This +includes avoiding interactions in community spaces as well as external channels +like social media. Violating these terms may lead to a temporary or +permanent ban. + +### 3. Temporary Ban + +**Community Impact**: A serious violation of community standards, including +sustained inappropriate behavior. + +**Consequence**: A temporary ban from any sort of interaction or public +communication with the community for a specified period of time. No public or +private interaction with the people involved, including unsolicited interaction +with those enforcing the Code of Conduct, is allowed during this period. +Violating these terms may lead to a permanent ban. + +### 4. Permanent Ban + +**Community Impact**: Demonstrating a pattern of violation of community +standards, including sustained inappropriate behavior, harassment of an +individual, or aggression toward or disparagement of classes of individuals. + +**Consequence**: A permanent ban from any sort of public interaction within +the community. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 2.0, available at +. + +Community Impact Guidelines were inspired by [Mozilla's code of conduct +enforcement ladder](https://github.com/mozilla/diversity). + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see the FAQ at +. Translations are available at +. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..9deae11 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,135 @@ +# Contributing + +## Getting Started + +### Development setup + +Make sure you have Bun installed on your machine. If you don't have it, you can download it [here](https://bun.sh/docs/installation). Here is some information about Bun in Next.js: [Build an app with Next.js and Bun](https://bun.sh/guides/ecosystem/nextjs). + +If you can't install Bun, you can always use [Node.js](https://nodejs.org/en/) with the `npm` command instead, but it will not be as fast as Bun. + +First, install dependencies: + +```bash +bun install +``` + +Also, setup environment variables by copying the `.env.example` file to `.env` and fill in the values. `.env` files are used to store sensitive information like API keys and database credentials and it will not be committed to the repository. + +Then, run the development server: + +```bash +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +### Build + +When you build the project, you pre-render all the Server Side Generated (SSG) pages. This makes the site load faster and perform better and behave like it will when it is deployed. When serving the built project it will not hot reload when you make changes to the code like it does in development mode. + +You can build the project with the following command: + +```bash +bun run build +``` + +To serve the build locally, run: + +```bash +bun run start +``` + +### Check linting and formatting + +To check linting and formatting you run the respective command: + +```bash +bun lint +``` + +If you are using vscode and are experiencing issues with types, you can restart the typescript server by pressing `cmd + shift + p` and then type `TypeScript: Restart TS Server` (You need to have a typescript file open for this to work). + +You can also try restarting the whole editor by pressing `cmd + shift + p` and then type `Developer: Reload Window`. + +On windows you can use `ctrl` instead of `cmd`. + +## Commit messages + +We are using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for our commit messages. This is to ensure that we have a consistent way of writing commit messages to make it easier to understand what has been changed and why. Try to follow the guidelines as closely as possible. You can also use [the recommended vscode extension](.vscode/extensions.json) to help you write the commit messages. + +## Code quality + +- To keep the code as consistent as possible use functions for react components or hooks instead of const variables with arrow function syntax. An exception is when using the forwardRef hook or when creating compound components. +- Only use default export for pages or layouts etc. since it is required by Next.js. For everything else use named exports. This is to make it easier to find the components in the codebase or change them without ending up with different names for the same component. +- Use `type` instead of `interface` for typescript types. This is to keep the code consistent and to make it easier to read. Also `type` is more flexible than `interface` since it can be used for unions and intersections. + +### Naming conventions + +- All layout components should end with Layout. For example: `DefaultLayout`. +- All page components should end with Page to make it clear it is a whole page. For example: `AboutPage`. + +## Useful resources + +Here is a list of documentations that will help you contribute to the project: + +### Front-end + +- [React](https://react.dev/reference/react) - Library for building user interfaces +- [Next.js](https://nextjs.org/docs) - Framework for routing and server-side rendering +- [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library +- [nuqs](https://nuqs.47ng.com/docs/installation) - Easy to use query params +- [Plate](https://platejs.org) - Tool for rich text editing +- [Tanstack Query](https://tanstack.com/query/latest/docs/framework/react/overview) - TRPC wraps Tanstack Query which is how we fetch data from the backend +- [Tanstack Table](https://tanstack.com/table/latest/docs/introduction) - For dynamic tables with filtering, sorting, pagination etc +- [Tanstack Form](https://tanstack.com/form/latest/docs/overview) - When we need to handle form validation + +#### Styling + +- [Tailwind CSS](https://tailwindcss.com/docs) - Styling library + - [Fluid for Tailwind](https://fluid.tw/#basic-usage) - Fluid scale utility breakpoints + - [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) - Animation utility classes + - [tailwind-scrollbar](https://github.com/adoxography/tailwind-scrollbar) - Customize scrollbar with tailwind +- [Class Variance Authority](https://beta.cva.style/) - Tool for creating style variants in our UI components +- [shadcn/ui](https://ui.shadcn.com/docs) - Reusable UI components + - [Radix UI Primitives](https://www.radix-ui.com/primitives/docs/overview/introduction) - Primitives library that shadcn/ui is built on, great documentation if you need to access the underlying components +- [Aceternity/ui](https://ui.aceternity.com/components) - More fancy components that can be used (matches shadcn/ui) +- [tsparticles](https://github.com/tsparticles/react) - Cool particles library we can use as backgrounds +- [Lucide](https://lucide.dev/icons/) - Icons library + +### Back-end + +- [TRPC](https://trpc.io/docs) - Tool for creating API endpoints as functions +- [Lucia](https://lucia-auth.com) - Authentication library +- [Drizzle](https://orm.drizzle.team/docs/overview) - ORM for interacting with the database (Postgres under the hood) +- [s3-client](https://github.com/aws/aws-sdk-js-v3/tree/main/clients/client-s3) - AWS S3 client for uploading files + +### Infrastructure + +- [Docker](https://docs.docker.com/get-started/) - Containerization tool for the application, database and storage +- [Colima](https://github.com/abiosoft/colima) - Container runtime for docker, I recommend this over Docker Desktop because of performance and license +- [Docker Compose](https://docs.docker.com/compose/) - Tool for running multi-container applications +- [nginx](https://nginx.org/en/docs/) - Reverse proxy for routing requests to the correct service + +### VS Code extensions + +- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) +- [Biome](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) +- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) +- [Pretty TypeScript Errors](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors) + +### Other + +- [Mozilla](https://developer.mozilla.org/en-US/) - Great resource for looking up documentation for web technologies +- [Can I use](https://caniuse.com/) - Check browser support for different web technologies (especially useful for CSS) + +## Icons + +- When using custom icons that are not provided by lucide, make sure to add them as SVGs to the `components/assets/icons` folder. This improves performance since the icons are handled as vectors and not as images. + +## Quirks to keep in mind + +- When you want to link to a new internal page use the `` component from `@/lib/navigation` instead of the normal anchortag ``. This will ensure that the page is loaded with the correct locale. If you want to link to external resources or other media, use the built-in `` component from Next.js. Remember to add `prefetch={false}` to the `` component if the page is not visited often. + - If you need to use both `` components from `@/lib/navigation` and Next.js, make sure to import the Next.js `` component as `ExternalLink` to avoid naming conflicts. +- Remember to surround Links with the `Button` UI component. This will provide some basic styling and accessibility features for keyboard navigation even if it is not supposed to look like a button. +- For internationalization use the `useTranslations` hook from `next-intl`. For client components you can pass the translations as props. diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..7094cfb --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Hackerspace NTNU, the DevOps Team + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index ddba536..1d687cd 100644 --- a/README.md +++ b/README.md @@ -1,123 +1,15 @@ -## Getting Started +# Hackerspace NTNU Website -Here is a list of documentation to help you get started: +The overhauled website for the [Hackerspace NTNU](https://www.hackerspace-ntnu.no/) student organization. -### Frontend +## Did you encounter an issue with the website? -- [React](https://react.dev/reference/react) - Library for building user interfaces -- [Next.js](https://nextjs.org/docs) - Framework for routing and server-side rendering -- [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library -- [nuqs](https://nuqs.47ng.com/docs/installation) - Easy to use query params -- [BlockNote](https://www.blocknotejs.org/docs) - Tool for markdown textboxes -- [React Hook Form](https://react-hook-form.com/get-started) - When we need to handle form validation -- [Tanstack Query](https://tanstack.com/query/latest/docs/framework/react/overview) - TRPC wraps Tanstack Query which is how we fetch data from the backend +Please report it as an [issue](https://github.com/hackerspace-ntnu/website-next/issues)! -#### Styling +If the issue needs to be resolved as soon as possible, please contact a Hackerspace NTNU member. -- [Tailwind CSS](https://tailwindcss.com/docs) - Styling library - - [Fluid for Tailwind](https://fluid.tw/#basic-usage) - Fluid scale utility breakpoints - - [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) - Animation utility classes - - [tailwind-scrollbar](https://github.com/adoxography/tailwind-scrollbar) - Customize scrollbar with tailwind -- [Class Variance Authority](https://beta.cva.style/) - Tool for creating style variants in our UI components -- [shadcn/ui](https://ui.shadcn.com/docs) - Reusable UI components - - [Radix UI Primitives](https://www.radix-ui.com/primitives/docs/overview/introduction) - Primitives library that shadcn/ui is built on, great documentation if you need to access the underlying components -- [Aceternity/ui](https://ui.aceternity.com/components) - More fancy components that can be used (matches shadcn/ui) -- [tsparticles](https://github.com/tsparticles/react) - Cool particles library we can use as backgrounds -- [Lucide](https://lucide.dev/icons/) - Icons library +## Contributing to the project -### Backend +Thank you for dedicating your time and effort to add new features and improve the website! -- [TRPC](https://trpc.io/docs) - Tool for creating API endpoints as functions -- [Lucia](https://lucia-auth.com) - Authentication library -- [Drizzle](https://orm.drizzle.team/docs/overview) - ORM for interacting with the database (Postgres under the hood) -- [s3-client](https://github.com/aws/aws-sdk-js-v3/tree/main/clients/client-s3) - AWS S3 client for uploading files - -### Infrastructure - -- [Docker](https://docs.docker.com/get-started/) - Containerization tool for the application, database and storage -- [Colima](https://github.com/abiosoft/colima) - Container runtime for docker, I recommend this over Docker Desktop because of performance and license -- [Docker Compose](https://docs.docker.com/compose/) - Tool for running multi-container applications -- [nginx](https://nginx.org/en/docs/) - Reverse proxy for routing requests to the correct service - -### Other resources - -- [Mozilla](https://developer.mozilla.org/en-US/) - Great resource for looking up documentation for web technologies -- [Can I use](https://caniuse.com/) - Check browser support for different web technologies (especially useful for CSS) - -## Icons - -- When using custom icons that are not provided by lucide, make sure to add them as SVGs to the `components/assets/icons` folder. This improves performance since the icons are handled as vectors and not as images. - -## Quirks to keep in mind - -- When you want to link to a new internal page use the `` component from `@/lib/navigation` instead of the normal anchortag ``. This will ensure that the page is loaded with the correct locale. If you want to link to external resources or other media, use the built-in `` component from Next.js. Remember to add `prefetch={false}` to the `` component if the page is not visited often. - - If you need to use both `` components from `@/lib/navigation` and Next.js, make sure to import the Next.js `` component as `ExternalLink` to avoid naming conflicts. -- Remember to surround Links with the `Button` UI component. This will provide some basic styling and accessibility features for keyboard navigation even if it is not supposed to look like a button. -- For internationalization use the `useTranslations` hook from `next-intl`. For client components you can pass the translations as props. - -## Development setup - -Make sure you have Bun installed on your machine. If you don't have it, you can download it [here](https://bun.sh/docs/installation). - -If you can't install Bun, you can always use [Node.js](https://nodejs.org/en/) with the `npm` command instead, but it will not be as fast as Bun. - -First, install dependencies: - -```bash -bun install -``` - -Then, run the development server: - -```bash -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -## Build - -When you build the project, you pre-render all the Server Side Generated (SSG) pages. This makes the site load faster and perform better and behave like it will when it is deployed. When serving the built project it will not hot reload when you make changes to the code like it does in development mode. - -You can build the project with the following command: - -```bash -bun run build -``` - -Then setup environment variables by copying the `.env.example` file to `.env` and fill in the values. `.env` files are used to store sensitive information like API keys and database credentials and it will not be committed to the repository. - -To serve the build locally, run: - -```bash -bun run start -``` - -## Check linting and formatting - -To check linting and formatting you run the respective command: - -```bash -bun lint -``` - -If you are using vscode and are experiencing issues with types, you can restart the typescript server by pressing `cmd + shift + p` and then type `TypeScript: Restart TS Server` (You need to have a typescript file open for this to work). - -You can also try restarting the whole editor by pressing `cmd + shift + p` and then type `Developer: Reload Window`. - -On windows you can use `ctrl` instead of `cmd`. - -## Commit messages - -We are using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for our commit messages. This is to ensure that we have a consistent way of writing commit messages to make it easier to understand what has been changed and why. Try to follow the guidelines as closely as possible. You can also use [the recommended vscode extension](.vscode/extensions.json) to help you write the commit messages. - -## Code quality - -- To keep the code as consistent as possible use functions for react components or hooks instead of const variables with arrow function syntax. An exception is when using the forwardRef hook or when creating compound components. -- Only use default export for pages or layouts etc. since it is required by Next.js. For everything else use named exports. This is to make it easier to find the components in the codebase or change them without ending up with different names for the same component. -- Use `type` instead of `interface` for typescript types. This is to keep the code consistent and to make it easier to read. Also `type` is more flexible than `interface` since it can be used for unions and intersections. - -### Naming conventions - -- All layout components should end with Layout. For example: `DefaultLayout`. -- All page components should end with Page to make it clear it is a whole page. For example: `AboutPage`. +For more information about our tech stack, code style, and so on, please see the [Contributing guidelines](./CONTRIBUTING.md). diff --git a/biome.json b/biome.json index 11d1c49..e8c5dd7 100644 --- a/biome.json +++ b/biome.json @@ -11,6 +11,9 @@ "enabled": true, "rules": { "recommended": true, + "a11y": { + "useSemanticElements": "off" + }, "nursery": { "useSortedClasses": { "level": "warn", diff --git a/drizzle.config.ts b/drizzle.config.ts index c39240d..115647c 100644 --- a/drizzle.config.ts +++ b/drizzle.config.ts @@ -1,10 +1,12 @@ import { env } from '@/env'; import { defineConfig } from 'drizzle-kit'; -export default defineConfig({ +const config = defineConfig({ schema: './src/server/db/schema/*.ts', dialect: 'postgresql', dbCredentials: { url: `postgresql://${env.DATABASE_USER}:${env.DATABASE_PASSWORD}@${env.DATABASE_HOST}:${env.DATABASE_PORT}/${env.DATABASE_NAME}`, }, }); + +export default config; diff --git a/global.d.ts b/global.d.ts index 9ce5fc0..977f992 100644 --- a/global.d.ts +++ b/global.d.ts @@ -1,5 +1,3 @@ // Use type safe message keys with `next-intl` -// eslint-disable-next-line @typescript-eslint/consistent-type-imports type Messages = typeof import('./messages/en.json'); -// eslint-disable-next-line @typescript-eslint/no-empty-interface declare interface IntlMessages extends Messages {} diff --git a/lefthook.yml b/lefthook.yml index cf9b74e..b05d112 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -1,6 +1,6 @@ pre-commit: commands: check: - glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}" + glob: "*.{js,ts,tsx,json}" stage_fixed: true run: bunx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files} diff --git a/lighthouserc.cjs b/lighthouserc.cjs new file mode 100644 index 0000000..1f06549 --- /dev/null +++ b/lighthouserc.cjs @@ -0,0 +1,76 @@ +const PAGES_EXCLUDED = ['news', 'storage']; + +// Do not convert into an ES6 export. +// lighthouse-ci (as of 0.14.0) uses require() to import, and this is not supported with ES6 modules. +const config = { + ci: { + collect: { + url: [ + 'http://localhost:3000/en/', // Trailing slash required, else the regex for default lighthouse rules won't catch this one + 'http://localhost:3000/en/about', + 'http://localhost:3000/en/events', + 'http://localhost:3000/en/news', + 'http://localhost:3000/en/news/1', + 'http://localhost:3000/en/storage', + 'http://localhost:3000/en/storage/shopping-cart', + 'http://localhost:3000/en/shift-schedule', + ], + startServerCommand: 'bun run start', + }, + upload: { + target: 'lhci', + serverBaseUrl: 'https://lhci.hackerspace-ntnu.no', // build token is set by the GH Action + }, + assert: { + assertMatrix: [ + { + matchingUrlPattern: `http://.*/en/(?!${PAGES_EXCLUDED.join('|')}).*`, // match all routes, except for pages with special rules. See https://github.com/GoogleChrome/lighthouse-ci/issues/511 and https://github.com/GoogleChrome/lighthouse-ci/issues/208#issuecomment-784501105 + preset: 'lighthouse:recommended', + assertions: { + 'bf-cache': 'off', + 'color-contrast': 'off', + 'heading-order': 'off', + 'largest-contentful-paint': 'off', + 'render-blocking-resources': 'off', + 'target-size': 'off', + }, + }, + { + matchingUrlPattern: 'http://.*/en/news.*', + preset: 'lighthouse:recommended', + assertions: { + 'bf-cache': 'off', + 'color-contrast': 'off', + 'heading-order': 'off', + 'largest-contentful-paint': 'off', + 'render-blocking-resources': 'off', + 'target-size': 'off', + interactive: 'off', + 'uses-responsive-images': 'off', // Should be removed when we obtain images from backend + 'image-aspect-ratio': 'off', // Should be removed when we obtain images from backend + 'image-size-responsive': 'off', // Should be removed when we obtain images from backend + 'max-potential-fid': 'off', + }, + }, + { + matchingUrlPattern: 'http://.*/en/storage.*', + preset: 'lighthouse:recommended', + assertions: { + 'bf-cache': 'off', + 'color-contrast': 'off', + 'heading-order': 'off', + 'largest-contentful-paint': 'off', + 'render-blocking-resources': 'off', + 'target-size': 'off', + 'unused-javascript': 'off', + 'cumulative-layout-shift': 'off', // We don't always know how many items are in the cart, which can lead to layout shifts when loading completes + 'max-potential-fid': 'off', + 'image-aspect-ratio': 'off', // Should be removed when we obtain images from backend + }, + }, + ], + }, + }, +}; + +module.exports = config; diff --git a/lighthouserc.yml b/lighthouserc.yml deleted file mode 100644 index 5c8c3e1..0000000 --- a/lighthouserc.yml +++ /dev/null @@ -1,48 +0,0 @@ -ci: - collect: - url: - - 'http://localhost:3000/en' - - 'http://localhost:3000/en/events' - - 'http://localhost:3000/en/news' - - 'http://localhost:3000/en/news/1' - - 'http://localhost:3000/en/about' - - 'http://localhost:3000/en/storage' - - 'http://localhost:3000/en/storage/shopping-cart' - startServerCommand: 'bun run start' - upload: - target: 'lhci' - serverBaseUrl: 'https://lhci.hackerspace-ntnu.no' # build token is set by the GH Action - assert: - assertMatrix: - - matchingUrlPattern: '.*' - preset: 'lighthouse:recommended' - assertions: - first-contentful-paint: - - error - - maxNumericValue: 2000 - aggregationMethod: optimistic - interactive: - - error - - maxNumericValue: 5000 - aggregationMethod: optimistic - bf-cache: 'off' - csp-xss: 'off' - identical-links-same-purpose: 'off' - total-byte-weight: 'off' - color-contrast: 'off' - heading-order: 'off' - mainthread-work-breakdown: 'off' - bootup-time: 'off' - largest-contentful-paint: 'off' - dom-size: 'off' - render-blocking-resources: 'off' - server-response-time: 'off' - uses-responsive-images: 'off' - maskable-icon: 'off' - installable-manifest: 'off' - - matchingUrlPattern: 'http://[^/]+/storage.*' - preset: 'lighthouse:recommended' - assertions: - unused-javascript: 'off' - cumulative-layout-shift: 'off' - max-potential-fid: 'off' diff --git a/messages/en.json b/messages/en.json index 44927e5..0977576 100644 --- a/messages/en.json +++ b/messages/en.json @@ -12,7 +12,16 @@ "page": "page", "category": "category", "sort": "sort", - "photoOf": "Photo of {name}" + "photoOf": "Photo of {name}", + "today": "Today", + "selected": "Selected", + "week": "Week", + "nextMonth": "Next month", + "previousMonth": "Previous month", + "selectMonth": "Select month", + "selectYear": "Select year", + "pickDate": "Pick a date", + "dateFormat": "dd/MM/yyyy" }, "error": { "notFound": "404 - Page not found", @@ -29,6 +38,7 @@ "events": "Events", "storage": "Storage", "about": "About", + "shiftSchedule": "Shift Schedule", "rules": "Rules", "changeLocale": "Change language", "toggleTheme": "Toggle theme", @@ -125,6 +135,29 @@ "submit": "Submit" } }, + "shiftSchedule": { + "title": "Shift Schedule", + "administratorMenu": { + "label": "Administrator Menu", + "open": "Open Administrator Menu", + "close": "Close Administrator Menu", + "clearShiftSchedule": "Clear shift schedule" + }, + "scheduleTable": { + "time": "Time", + "day": "{day, select, monday {Monday} tuesday {Tuesday} wednesday {Wednesday} thursday {Thursday} other {Friday}}", + "scheduleCell": { + "onShift": "{count, plural, =0 {Closed} =1 {1 person on shift} other {# people on shift}}", + "scheduleCellDialog": { + "empty": "No one on shift", + "registerSection": { + "recurring": "Recurring", + "register": "Register" + } + } + } + } + }, "rules": { "title": "Rules", "forEveryone": "For everyone", diff --git a/messages/no.json b/messages/no.json index aa746fa..4a977aa 100644 --- a/messages/no.json +++ b/messages/no.json @@ -12,7 +12,16 @@ "page": "side", "category": "kategori", "sort": "sortering", - "photoOf": "Bilde av {name}" + "photoOf": "Bilde av {name}", + "today": "I dag", + "selected": "Valgt", + "week": "Uke", + "nextMonth": "Neste måned", + "previousMonth": "Forrige måned", + "selectMonth": "Velg måned", + "selectYear": "Velg år", + "pickDate": "Velg en dato", + "dateFormat": "dd.MM.yyyy" }, "error": { "notFound": "404 - Siden ble ikke funnet", @@ -29,6 +38,7 @@ "events": "Hendelser", "storage": "Lager", "about": "Om oss", + "shiftSchedule": "Vaktliste", "rules": "Rules", "changeLocale": "Bytt språk", "toggleTheme": "Bytt tema", @@ -125,6 +135,29 @@ "submit": "Send" } }, + "shiftSchedule": { + "title": "Vaktliste", + "administratorMenu": { + "label": "Administrator-meny", + "open": "Åpne Administrator-meny", + "close": "Lukk Administrator-meny", + "clearShiftSchedule": "Tøm vaktliste" + }, + "scheduleTable": { + "time": "Tid", + "day": "{day, select, monday {Mandag} tuesday {Tirsdag} wednesday {Onsdag} thursday {Torsdag} other {Fredag}}", + "scheduleCell": { + "onShift": "{count, plural, =0 {Stengt} =1 {1 person på vakt} other {# personer på vakt}}", + "scheduleCellDialog": { + "empty": "Ingen på vakt", + "registerSection": { + "recurring": "Gjentagende", + "register": "Registrer" + } + } + } + } + }, "rules": { "title": "Regler", "forEveryone": "For alle ", diff --git a/next-sitemap.config.js b/next-sitemap.config.js deleted file mode 100644 index 218af13..0000000 --- a/next-sitemap.config.js +++ /dev/null @@ -1,8 +0,0 @@ -/** @type {import('next-sitemap').IConfig} */ -const config = { - siteUrl: process.env.NEXT_PUBLIC_SITE_URL ?? '', - generateRobotsTxt: true, - generateIndexSitemap: false, -}; - -export default config; diff --git a/next.config.js b/next.config.js deleted file mode 100644 index 69a418a..0000000 --- a/next.config.js +++ /dev/null @@ -1,16 +0,0 @@ -import nextIntl from 'next-intl/plugin'; - -/** - * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful - * for Docker builds. - */ -await import('./src/env.js'); -const withNextIntl = nextIntl('./src/lib/locale/i18n.ts'); - -/** @type {import("next").NextConfig} */ -const config = { - reactStrictMode: true, - output: 'standalone', -}; - -export default withNextIntl(config); diff --git a/next.config.ts b/next.config.ts new file mode 100644 index 0000000..0c57969 --- /dev/null +++ b/next.config.ts @@ -0,0 +1,11 @@ +import type { NextConfig } from 'next'; +import nextIntl from 'next-intl/plugin'; + +const withNextIntl = nextIntl('./src/lib/locale/request.ts'); + +const config: NextConfig = { + reactStrictMode: true, + output: 'standalone', +}; + +export default withNextIntl(config); diff --git a/package.json b/package.json index 4640edb..a496c1d 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,12 @@ "private": true, "type": "module", "scripts": { - "prepare": "if [ \"$NODE_ENV\" != \"production\" ]; then lefthook install; fi", - "dev": "next dev", + "prepare": "cross-env-shell '[ \"$NODE_ENV\" != \"production\" ] && lefthook install || exit 0'", + "dev": "next dev --turbopack", "lint": "biome check --write", "prebuild": "next telemetry disable", "build": "next build", - "postbuild": "next-sitemap && mkdir -p .next/standalone/public .next/standalone/.next/static && cp -r public/* .next/standalone/public && cp -r .next/static/* .next/standalone/.next/static", + "postbuild": "mkdir -p .next/standalone/public .next/standalone/.next/static && cp -r public/* .next/standalone/public && cp -r .next/static/* .next/standalone/.next/static", "start": "bun run .next/standalone/server.js", "db:start": "docker-compose up db", "db:generate": "drizzle-kit generate", @@ -19,63 +19,71 @@ "s3:start": "docker-compose up s3" }, "dependencies": { - "@aws-sdk/client-s3": "^3.637.0", - "@hookform/resolvers": "^3.9.0", + "@aws-sdk/client-s3": "^3.679.0", "@lucia-auth/adapter-drizzle": "^1.1.0", - "@radix-ui/react-avatar": "^1.1.0", - "@radix-ui/react-dialog": "^1.1.1", - "@radix-ui/react-dropdown-menu": "^2.1.1", + "@radix-ui/react-avatar": "^1.1.1", + "@radix-ui/react-checkbox": "^1.1.2", + "@radix-ui/react-collapsible": "^1.1.1", + "@radix-ui/react-dialog": "^1.1.2", + "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-label": "^2.1.0", - "@radix-ui/react-popover": "^1.1.1", - "@radix-ui/react-select": "^2.1.1", + "@radix-ui/react-popover": "^1.1.2", + "@radix-ui/react-scroll-area": "^1.2.0", + "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", - "@radix-ui/react-tooltip": "^1.1.1", + "@radix-ui/react-tooltip": "^1.1.3", "@t3-oss/env-nextjs": "^0.10.1", - "@tanstack/react-query": "^5.53.1", - "@trpc/client": "^11.0.0-rc.490", - "@trpc/react-query": "^11.0.0-rc.490", - "@trpc/server": "^11.0.0-rc.490", - "autoprefixer": "^10.4.19", - "client-only": "^0.0.1", + "@tanstack/react-form": "^0.34.1", + "@tanstack/react-query": "^5.59.16", + "@tanstack/zod-form-adapter": "^0.34.1", + "@trpc/client": "^11.0.0-rc.599", + "@trpc/react-query": "^11.0.0-rc.599", + "@trpc/server": "^11.0.0-rc.599", "cmdk": "1.0.0", - "country-flag-icons": "^1.5.12", + "country-flag-icons": "^1.5.13", "cva": "^1.0.0-beta.1", "date-fns": "^4.1.0", "drizzle-orm": "^0.33.0", - "lucia": "^3.2.0", + "lucia": "3.2.0", "lucide-react": "^0.396.0", - "next": "^14.2.10", - "next-intl": "^3.18.1", - "next-sitemap": "^4.2.3", - "next-themes": "^0.3.0", - "nuqs": "^1.17.4", - "postgres": "^3.4.4", - "react": "^18.3.1", - "react-day-picker": "8.10.1", - "react-dom": "^18.3.1", - "react-hook-form": "^7.53.0", + "next": "^15.0.1", + "next-intl": "^3.23.5", + "next-themes": "1.0.0-beta.0", + "nuqs": "^2.0.4", + "postgres": "^3.4.5", + "react": "^19.0.0-rc-fb9a90fa48-20240614", + "react-day-picker": "^9.2.1", + "react-dom": "^19.0.0-rc-fb9a90fa48-20240614", "reading-time": "^1.5.0", - "server-only": "^0.0.1", - "sharp": "^0.33.4", "superjson": "^2.2.1", - "tailwind-merge": "^2.5.2", + "tailwind-merge": "^2.5.4", + "vaul": "^1.1.0", "zod": "^3.23.8" }, "devDependencies": { - "@biomejs/biome": "1.8.3", + "@biomejs/biome": "^1.9.4", "@fluid-tailwind/tailwind-merge": "^0.0.2", - "@types/node": "^20.14.8", - "@types/react": "^18.3.3", - "@types/react-dom": "^18.3.0", - "drizzle-kit": "^0.24.1", + "@types/bun": "^1.1.12", + "@types/react": "npm:types-react@19.0.0-rc.1", + "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1", + "autoprefixer": "^10.4.20", + "client-only": "^0.0.1", + "cross-env": "^7.0.3", + "drizzle-kit": "^0.24.2", "fluid-tailwind": "^1.0.3", - "lefthook": "^1.7.14", - "postcss": "^8.4.38", + "lefthook": "^1.8.1", + "postcss": "^8.4.47", + "server-only": "^0.0.1", "tailwind-scrollbar": "^3.1.0", - "tailwindcss": "^3.4.4", + "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", - "typescript": "^5.5.0" + "tailwindcss-radix": "^3.0.5", + "typescript": "^5.6.3" + }, + "overrides": { + "@types/react": "npm:types-react@19.0.0-rc.1", + "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1" }, "packageManager": "bun@1.1.12" } diff --git a/postcss.config.cjs b/postcss.config.js similarity index 52% rename from postcss.config.cjs rename to postcss.config.js index e305dd9..2ef30fc 100644 --- a/postcss.config.cjs +++ b/postcss.config.js @@ -1,3 +1,4 @@ +/** @type {import('postcss-load-config').Config} */ const config = { plugins: { tailwindcss: {}, @@ -5,4 +6,4 @@ const config = { }, }; -module.exports = config; +export default config; diff --git a/src/app/[locale]/(default)/about/page.tsx b/src/app/[locale]/(default)/about/page.tsx index a16200f..f21eabd 100644 --- a/src/app/[locale]/(default)/about/page.tsx +++ b/src/app/[locale]/(default)/about/page.tsx @@ -1,10 +1,12 @@ -import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; export async function generateMetadata({ - params: { locale }, + params, }: { - params: { locale: string }; + params: Promise<{ locale: string }>; }) { + const { locale } = await params; + const t = await getTranslations({ locale, namespace: 'layout' }); return { @@ -12,11 +14,12 @@ export async function generateMetadata({ }; } -export default function AboutPage({ - params: { locale }, +export default async function AboutPage({ + params, }: { - params: { locale: string }; + params: Promise<{ locale: string }>; }) { - unstable_setRequestLocale(locale); + const { locale } = await params; + setRequestLocale(locale); return
this should be about page
; } diff --git a/src/app/[locale]/(default)/events/page.tsx b/src/app/[locale]/(default)/events/page.tsx index 1477014..583d9d6 100644 --- a/src/app/[locale]/(default)/events/page.tsx +++ b/src/app/[locale]/(default)/events/page.tsx @@ -1,10 +1,12 @@ -import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; export async function generateMetadata({ - params: { locale }, + params, }: { - params: { locale: string }; + params: Promise<{ locale: string }>; }) { + const { locale } = await params; + const t = await getTranslations({ locale, namespace: 'layout' }); return { @@ -12,11 +14,12 @@ export async function generateMetadata({ }; } -export default function EventsPage({ - params: { locale }, +export default async function EventsPage({ + params, }: { - params: { locale: string }; + params: Promise<{ locale: string }>; }) { - unstable_setRequestLocale(locale); + const { locale } = await params; + setRequestLocale(locale); return
This should be events page
; } diff --git a/src/app/[locale]/(default)/layout.tsx b/src/app/[locale]/(default)/layout.tsx index c01ad96..b9fc1ae 100644 --- a/src/app/[locale]/(default)/layout.tsx +++ b/src/app/[locale]/(default)/layout.tsx @@ -1,18 +1,21 @@ import { Footer } from '@/components/layout/Footer'; import { Header } from '@/components/layout/Header'; import { Main } from '@/components/layout/Main'; -import { unstable_setRequestLocale } from 'next-intl/server'; +import { setRequestLocale } from 'next-intl/server'; type DefaultLayoutProps = { children: React.ReactNode; - params: { locale: string }; + params: Promise<{ locale: string }>; }; -export default function DefaultLayout({ - children, - params: { locale }, -}: DefaultLayoutProps) { - unstable_setRequestLocale(locale); +export default async function DefaultLayout(props: DefaultLayoutProps) { + const params = await props.params; + + const { locale } = params; + + const { children } = props; + + setRequestLocale(locale); return ( <>
diff --git a/src/app/[locale]/(default)/news/(main)/layout.tsx b/src/app/[locale]/(default)/news/(main)/layout.tsx index feebab9..4664b3c 100644 --- a/src/app/[locale]/(default)/news/(main)/layout.tsx +++ b/src/app/[locale]/(default)/news/(main)/layout.tsx @@ -1,6 +1,5 @@ import { SquarePenIcon } from 'lucide-react'; -import { useTranslations } from 'next-intl'; -import { unstable_setRequestLocale } from 'next-intl/server'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; import { Link } from '@/lib/locale/navigation'; @@ -8,15 +7,17 @@ import { Button } from '@/components/ui/Button'; type NewsHeaderLayoutProps = { children: React.ReactNode; - params: { locale: string }; + params: Promise<{ locale: string }>; }; -export default function NewsHeaderLayout({ +export default async function NewsHeaderLayout({ + params, children, - params: { locale }, }: NewsHeaderLayoutProps) { - unstable_setRequestLocale(locale); - const t = useTranslations('news'); + const { locale } = await params; + + setRequestLocale(locale); + const t = await getTranslations('news'); return ( <>
diff --git a/src/app/[locale]/(default)/news/(main)/loading.tsx b/src/app/[locale]/(default)/news/(main)/loading.tsx index 8d26a19..7507dbd 100644 --- a/src/app/[locale]/(default)/news/(main)/loading.tsx +++ b/src/app/[locale]/(default)/news/(main)/loading.tsx @@ -3,7 +3,7 @@ import { CardGridSkeleton } from '@/components/news/CardGridSkeleton'; import { ItemGridSkeleton } from '@/components/news/ItemGridSkeleton'; import { Separator } from '@/components/ui/Separator'; -export default function NewsSkeleton() { +export default function NewsLoading() { return ( <> diff --git a/src/app/[locale]/(default)/news/(main)/page.tsx b/src/app/[locale]/(default)/news/(main)/page.tsx index a7bfa8d..72df9ec 100644 --- a/src/app/[locale]/(default)/news/(main)/page.tsx +++ b/src/app/[locale]/(default)/news/(main)/page.tsx @@ -1,7 +1,10 @@ import { articleMockData as articleData } from '@/mock-data/article'; -import { useTranslations } from 'next-intl'; -import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'; -import { createSearchParamsCache, parseAsInteger } from 'nuqs/server'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; +import { + type SearchParams, + createSearchParamsCache, + parseAsInteger, +} from 'nuqs/server'; import { Suspense } from 'react'; import { PaginationCarousel } from '@/components/composites/PaginationCarousel'; @@ -11,10 +14,12 @@ import { ItemGridSkeleton } from '@/components/news/ItemGridSkeleton'; import { Separator } from '@/components/ui/Separator'; export async function generateMetadata({ - params: { locale }, + params, }: { - params: { locale: string }; + params: Promise<{ locale: string }>; }) { + const { locale } = await params; + const t = await getTranslations({ locale, namespace: 'layout' }); return { @@ -22,20 +27,21 @@ export async function generateMetadata({ }; } -export default function NewsPage({ - params: { locale }, +export default async function NewsPage({ + params, searchParams, }: { - params: { locale: string }; - searchParams: Record; + params: Promise<{ locale: string }>; + searchParams: Promise; }) { - unstable_setRequestLocale(locale); - const t = useTranslations('ui'); + const { locale } = await params; + setRequestLocale(locale); + const t = await getTranslations('ui'); const searchParamsCache = createSearchParamsCache({ [t('page')]: parseAsInteger.withDefault(1), }); - const { [t('page')]: page = 1 } = searchParamsCache.parse(searchParams); + const { [t('page')]: page = 1 } = searchParamsCache.parse(await searchParams); // TODO: Button to create new article should only be visible when logged in return ( <> diff --git a/src/app/[locale]/(default)/news/[article]/page.tsx b/src/app/[locale]/(default)/news/[article]/page.tsx index a9b96f3..ca4cab0 100644 --- a/src/app/[locale]/(default)/news/[article]/page.tsx +++ b/src/app/[locale]/(default)/news/[article]/page.tsx @@ -2,8 +2,7 @@ import { articleMockData as articleData, authorMockData as authorData, } from '@/mock-data/article'; -import { useTranslations } from 'next-intl'; -import { unstable_setRequestLocale } from 'next-intl/server'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; import Image from 'next/image'; import { notFound } from 'next/navigation'; import readingTime from 'reading-time'; @@ -20,33 +19,31 @@ import { Badge } from '@/components/ui/Badge'; export async function generateMetadata({ params, }: { - params: { article: string }; + params: Promise<{ article: string }>; }) { - const article = articleData.find( - (article) => article.id === Number(params.article), - ); + const { article } = await params; + const data = articleData.find((a) => a.id === Number(article)); return { - title: article?.title, + title: data?.title, }; } -export default function ArticlePage({ +export default async function ArticlePage({ params, }: { - params: { locale: string; article: string }; + params: Promise<{ locale: string; article: string }>; }) { - unstable_setRequestLocale(params.locale); - const t = useTranslations('news'); + const { locale, article } = await params; + setRequestLocale(locale); + const t = await getTranslations('news'); - const article = articleData.find( - (article) => article.id === Number(params.article), - ); - if (!article) { + const data = articleData.find((a) => a.id === Number(article)); + if (!data) { return notFound(); } - const { minutes } = readingTime(article.content as string); // assert because its a mock data file + const { minutes } = readingTime(data.content as string); // assert because its a mock data file const author = authorData[0] as { name: string; photoUrl: string; @@ -58,14 +55,14 @@ export default function ArticlePage({
{article.title}
-

{article.title}

+

{data.title}

@@ -79,13 +76,13 @@ export default function ArticlePage({ {t('readTime', { count: Math.ceil(minutes) })}   •   - {article.date} + {data.date}
- {`${article.views} ${t('views')}`} + {`${data.views} ${t('views')}`}
-
{article.content}
+
{data.content}
); } diff --git a/src/app/[locale]/(default)/page.tsx b/src/app/[locale]/(default)/page.tsx index af70a75..2485554 100644 --- a/src/app/[locale]/(default)/page.tsx +++ b/src/app/[locale]/(default)/page.tsx @@ -1,13 +1,14 @@ import { HelloWorld } from '@/components/home/HelloWorld'; import { api } from '@/lib/api/server'; -import { unstable_setRequestLocale } from 'next-intl/server'; +import { setRequestLocale } from 'next-intl/server'; export default async function HomePage({ - params: { locale }, + params, }: { - params: { locale: string }; + params: Promise<{ locale: string }>; }) { - unstable_setRequestLocale(locale); + const { locale } = await params; + setRequestLocale(locale); const hello = await api.test.helloWorld(); return (
diff --git a/src/app/[locale]/(default)/shift-schedule/layout.tsx b/src/app/[locale]/(default)/shift-schedule/layout.tsx new file mode 100644 index 0000000..8aa4078 --- /dev/null +++ b/src/app/[locale]/(default)/shift-schedule/layout.tsx @@ -0,0 +1,23 @@ +import { getTranslations, setRequestLocale } from 'next-intl/server'; + +type ShiftScheduleLayoutProps = { + children: React.ReactNode; + params: Promise<{ locale: string }>; +}; + +export default async function ShiftScheduleLayout({ + params, + children, +}: ShiftScheduleLayoutProps) { + const { locale } = await params; + + setRequestLocale(locale); + const t = await getTranslations('shiftSchedule'); + + return ( + <> +

{t('title')}

+ {children} + + ); +} diff --git a/src/app/[locale]/(default)/shift-schedule/loading.tsx b/src/app/[locale]/(default)/shift-schedule/loading.tsx new file mode 100644 index 0000000..7086b1d --- /dev/null +++ b/src/app/[locale]/(default)/shift-schedule/loading.tsx @@ -0,0 +1,126 @@ +import { Skeleton } from '@/components/ui/Skeleton'; +import { + Table, + TableBody, + TableCaption, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/Table'; +import { useFormatter, useTranslations } from 'next-intl'; + +export default function ShiftScheduleLayout() { + const t = useTranslations('shiftSchedule.scheduleTable'); + const format = useFormatter(); + + const days = [ + 'monday', + 'tuesday', + 'wednesday', + 'thursday', + 'friday', + ] as const; + const timeslots = ['first', 'second', 'third', 'fourth'] as const; + + function getDateTimeRange(timeslot: string) { + let firstDate: Date; + let secondDate: Date; + + switch (timeslot) { + case timeslots[0]: + firstDate = new Date(0, 0, 0, 10, 15, 0, 0); + secondDate = new Date(0, 0, 0, 12, 7, 0, 0); + break; + + case timeslots[1]: + firstDate = new Date(0, 0, 0, 12, 7, 0, 0); + secondDate = new Date(0, 0, 0, 14, 7, 0, 0); + break; + + case timeslots[2]: + firstDate = new Date(0, 0, 0, 14, 7, 0, 0); + secondDate = new Date(0, 0, 0, 16, 7, 0, 0); + break; + + case timeslots[3]: + firstDate = new Date(0, 0, 0, 16, 7, 0, 0); + secondDate = new Date(0, 0, 0, 18, 0, 0, 0); + break; + + default: + firstDate = new Date(); + secondDate = new Date(); + } + + return format.dateTimeRange(firstDate, secondDate, { + hour: '2-digit', + minute: '2-digit', + hour12: false, + }); + } + + return ( + <> + {/* Table shown on small screens */} +
+ {days.map((day) => ( + + + + {t('time')} + + {t('day', { day: day })} + + + + + {timeslots.map((timeslot) => ( + + + {getDateTimeRange(timeslot)} + + + + + + ))} + +
+ ))} + + [skill icons legend] +
+
+ + {/* Table shown on all other screens */} + + + + {t('time')} + {days.map((day) => ( + + {t('day', { day: day })} + + ))} + + + + {timeslots.map((timeslot) => ( + + + {getDateTimeRange(timeslot)} + + {days.map((day) => ( + + + + ))} + + ))} + + [skill icons legend] +
+ + ); +} diff --git a/src/app/[locale]/(default)/shift-schedule/page.tsx b/src/app/[locale]/(default)/shift-schedule/page.tsx new file mode 100644 index 0000000..decde74 --- /dev/null +++ b/src/app/[locale]/(default)/shift-schedule/page.tsx @@ -0,0 +1,42 @@ +import { AdministratorMenu } from '@/components/shift-schedule/AdministratorMenu'; +import { ScheduleTable } from '@/components/shift-schedule/ScheduleTable'; +import { shiftScheduleMockData } from '@/mock-data/shiftSchedule'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; + +export async function generateMetadata({ + params, +}: { + params: Promise<{ locale: string }>; +}) { + const { locale } = await params; + const t = await getTranslations({ locale, namespace: 'layout' }); + + return { + title: t('shiftSchedule'), + }; +} + +export default async function ShiftSchedulePage({ + params, +}: { + params: Promise<{ locale: string }>; +}) { + const { locale } = await params; + + setRequestLocale(locale); + const t = await getTranslations('shiftSchedule'); + + return ( + <> + + + + ); +} diff --git a/src/app/[locale]/(default)/storage/(main)/layout.tsx b/src/app/[locale]/(default)/storage/(main)/layout.tsx index 4bddd7a..5afa03c 100644 --- a/src/app/[locale]/(default)/storage/(main)/layout.tsx +++ b/src/app/[locale]/(default)/storage/(main)/layout.tsx @@ -3,22 +3,23 @@ import { SearchBar } from '@/components/composites/SearchBar'; import { SortSelector } from '@/components/composites/SortSelector'; import { SelectorsSkeleton } from '@/components/storage/SelectorsSkeleton'; import { ShoppingCartLink } from '@/components/storage/ShoppingCartLink'; -import { useTranslations } from 'next-intl'; -import { unstable_setRequestLocale } from 'next-intl/server'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; import { Suspense } from 'react'; type StorageLayoutProps = { children: React.ReactNode; - params: { locale: string }; + params: Promise<{ locale: string }>; }; -export default function StorageLayout({ +export default async function StorageLayout({ + params, children, - params: { locale }, }: StorageLayoutProps) { - unstable_setRequestLocale(locale); - const t = useTranslations('storage'); - const tUi = useTranslations('ui'); + const { locale } = await params; + + setRequestLocale(locale); + const t = await getTranslations('storage'); + const tUi = await getTranslations('ui'); // This does not make much sense with a backend, most likely the categories in the backend will have a name in both languages and an ID const categories = [ diff --git a/src/app/[locale]/(default)/storage/(main)/loading.tsx b/src/app/[locale]/(default)/storage/(main)/loading.tsx index c510d4f..60b9b5d 100644 --- a/src/app/[locale]/(default)/storage/(main)/loading.tsx +++ b/src/app/[locale]/(default)/storage/(main)/loading.tsx @@ -2,7 +2,7 @@ import { PaginationCarouselSkeleton } from '@/components/composites/PaginationCa import { ItemCardSkeleton } from '@/components/storage/ItemCardSkeleton'; import { useId } from 'react'; -export default function StorageSkeleton() { +export default function StorageLoading() { return ( <>
diff --git a/src/app/[locale]/(default)/storage/(main)/page.tsx b/src/app/[locale]/(default)/storage/(main)/page.tsx index 9bbb49a..60da548 100644 --- a/src/app/[locale]/(default)/storage/(main)/page.tsx +++ b/src/app/[locale]/(default)/storage/(main)/page.tsx @@ -1,16 +1,20 @@ import { items } from '@/mock-data/items'; -import { useTranslations } from 'next-intl'; -import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'; -import { createSearchParamsCache, parseAsInteger } from 'nuqs/server'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; +import { + type SearchParams, + createSearchParamsCache, + parseAsInteger, +} from 'nuqs/server'; import { PaginationCarousel } from '@/components/composites/PaginationCarousel'; import { ItemCard } from '@/components/storage/ItemCard'; export async function generateMetadata({ - params: { locale }, + params, }: { - params: { locale: string }; + params: Promise<{ locale: string }>; }) { + const { locale } = await params; const t = await getTranslations({ locale, namespace: 'layout' }); return { @@ -18,15 +22,17 @@ export async function generateMetadata({ }; } -export default function StoragePage({ - params: { locale }, +export default async function StoragePage({ + params, searchParams, }: { - params: { locale: string }; - searchParams: Record; + params: Promise<{ locale: string }>; + searchParams: Promise; }) { - unstable_setRequestLocale(locale); - const t = useTranslations('ui'); + const { locale } = await params; + + setRequestLocale(locale); + const t = await getTranslations('ui'); const itemsPerPage = 12; @@ -34,7 +40,7 @@ export default function StoragePage({ [t('page')]: parseAsInteger.withDefault(1), }); - const { [t('page')]: page = 1 } = searchParamsCache.parse(searchParams); + const { [t('page')]: page = 1 } = searchParamsCache.parse(await searchParams); return ( <> diff --git a/src/app/[locale]/(default)/storage/shopping-cart/layout.tsx b/src/app/[locale]/(default)/storage/shopping-cart/layout.tsx index 8235cb2..ce3981d 100644 --- a/src/app/[locale]/(default)/storage/shopping-cart/layout.tsx +++ b/src/app/[locale]/(default)/storage/shopping-cart/layout.tsx @@ -1,20 +1,21 @@ import { Button } from '@/components/ui/Button'; import { Link } from '@/lib/locale/navigation'; import { ArrowLeftIcon } from 'lucide-react'; -import { useTranslations } from 'next-intl'; -import { unstable_setRequestLocale } from 'next-intl/server'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; type ShoppingCartLayoutProps = { children: React.ReactNode; - params: { locale: string }; + params: Promise<{ locale: string }>; }; -export default function StorageLayout({ +export default async function StorageLayout({ + params, children, - params: { locale }, }: ShoppingCartLayoutProps) { - unstable_setRequestLocale(locale); - const t = useTranslations('storage.shoppingCart'); + const { locale } = await params; + + setRequestLocale(locale); + const t = await getTranslations('storage.shoppingCart'); return ( <>
diff --git a/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx b/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx index 27310cd..80f54ed 100644 --- a/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx +++ b/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx @@ -2,7 +2,7 @@ import { ShoppingCartTableSkeleton } from '@/components/storage/ShoppingCartTabl import { Skeleton } from '@/components/ui/Skeleton'; import { useTranslations } from 'next-intl'; -export default function ShoppingCartSkeleton() { +export default function ShoppingCartLoading() { const t = useTranslations('storage.shoppingCart'); const tableMessages = { productId: t('productId'), diff --git a/src/app/[locale]/(default)/storage/shopping-cart/page.tsx b/src/app/[locale]/(default)/storage/shopping-cart/page.tsx index f72474e..32d35a0 100644 --- a/src/app/[locale]/(default)/storage/shopping-cart/page.tsx +++ b/src/app/[locale]/(default)/storage/shopping-cart/page.tsx @@ -1,17 +1,18 @@ import { BorrowDialog } from '@/components/storage/BorrowDialog'; import { ShoppingCartClearDialog } from '@/components/storage/ShoppingCartClearDialog'; import { ShoppingCartTable } from '@/components/storage/ShoppingCartTable'; -import { useTranslations } from 'next-intl'; -import { unstable_setRequestLocale } from 'next-intl/server'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; -export default function StorageShoppingCartPage({ - params: { locale }, +export default async function StorageShoppingCartPage({ + params, }: { - params: { locale: string }; + params: Promise<{ locale: string }>; }) { - unstable_setRequestLocale(locale); - const t = useTranslations('storage.shoppingCart'); - const tLoanForm = useTranslations('storage.loanForm'); + const { locale } = await params; + + setRequestLocale(locale); + const t = await getTranslations('storage.shoppingCart'); + const tLoanForm = await getTranslations('storage.loanForm'); const tableMessages = { tableDescription: t('tableDescription'), diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 0d842cf..fc9c103 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -1,13 +1,12 @@ import { RootProviders } from '@/components/providers/RootProviders'; import { routing } from '@/lib/locale'; import { cx } from '@/lib/utils'; -import type { Viewport } from 'next'; -import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'; +import { getTranslations, setRequestLocale } from 'next-intl/server'; import { Inter, Montserrat } from 'next/font/google'; type LocaleLayoutProps = { children: React.ReactNode; - params: { locale: string }; + params: Promise<{ locale: string }>; }; const inter = Inter({ @@ -26,13 +25,10 @@ export function generateStaticParams() { return routing.locales.map((locale) => ({ locale })); } -export const viewport: Viewport = { - themeColor: '#0c0a09', -}; - export async function generateMetadata({ - params: { locale }, + params, }: Omit) { + const { locale } = await params; const t = await getTranslations({ locale, namespace: 'meta' }); return { @@ -69,11 +65,14 @@ export async function generateMetadata({ }; } -export default function LocaleLayout({ - children, - params: { locale }, -}: LocaleLayoutProps) { - unstable_setRequestLocale(locale); +export default async function LocaleLayout(props: LocaleLayoutProps) { + const params = await props.params; + + const { locale } = params; + + const { children } = props; + + setRequestLocale(locale); return ( + diff --git a/src/app/robots.ts b/src/app/robots.ts new file mode 100644 index 0000000..0174e04 --- /dev/null +++ b/src/app/robots.ts @@ -0,0 +1,12 @@ +import { env } from '@/env'; +import type { MetadataRoute } from 'next'; + +export default function robots(): MetadataRoute.Robots { + return { + rules: { + userAgent: '*', + allow: '/', + }, + sitemap: `${env.NEXT_PUBLIC_SITE_URL}/sitemap.xml`, + }; +} diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts new file mode 100644 index 0000000..9613706 --- /dev/null +++ b/src/app/sitemap.ts @@ -0,0 +1,43 @@ +import { env } from '@/env'; +import { routing } from '@/lib/locale'; +import { getPathname } from '@/lib/locale/navigation'; +import type { MetadataRoute } from 'next'; + +type Href = Parameters[0]['href']; + +function getEntry(href: Href, changefreq: string, priority: number) { + return { + url: getUrl(href, routing.defaultLocale), + lastModified: new Date(), + changefreq, + priority, + alternates: { + languages: Object.fromEntries( + routing.locales.map((locale) => [locale, getUrl(href, locale)]), + ), + }, + }; +} + +function getUrl(href: Href, locale: (typeof routing.locales)[number]) { + const pathname = getPathname({ locale, href }); + return `${env.NEXT_PUBLIC_SITE_URL}${pathname}`; +} + +export default function sitemap(): MetadataRoute.Sitemap { + return [ + getEntry('/', 'yearly', 1.0), + getEntry('/about', 'monthly', 0.8), + getEntry('/news', 'weekly', 0.7), + getEntry( + { + pathname: '/news/[article]', + params: { article: '1' }, + }, + 'daily', + 0.4, + ), + getEntry('/events', 'weekly', 0.7), + getEntry('/storage', 'daily', 0.4), + ]; +} diff --git a/src/components/composites/ConfirmDialog.tsx b/src/components/composites/ConfirmDialog.tsx index 4a2c1b3..7f0d41b 100644 --- a/src/components/composites/ConfirmDialog.tsx +++ b/src/components/composites/ConfirmDialog.tsx @@ -1,16 +1,16 @@ 'use client'; -import { Button, type buttonVariants } from '@/components/ui/Button'; import { - Dialog, - DialogClose, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from '@/components/ui/Dialog'; + ResponsiveDialog, + ResponsiveDialogClose, + ResponsiveDialogContent, + ResponsiveDialogDescription, + ResponsiveDialogFooter, + ResponsiveDialogHeader, + ResponsiveDialogTitle, + ResponsiveDialogTrigger, +} from '@/components/composites/ResponsiveDialog'; +import { Button, type buttonVariants } from '@/components/ui/Button'; import type { VariantProps } from '@/lib/utils'; import { useState } from 'react'; @@ -30,21 +30,23 @@ function ConfirmDialog({ confirmAction, t, ...props }: ConfirmDialogProps) { const [open, setOpen] = useState(false); return ( - - + + - + - - - + + + ); } diff --git a/src/components/composites/DatePicker.tsx b/src/components/composites/DatePicker.tsx new file mode 100644 index 0000000..4dbdb17 --- /dev/null +++ b/src/components/composites/DatePicker.tsx @@ -0,0 +1,145 @@ +'use client'; + +import { isValid, parse } from 'date-fns'; +import { CalendarIcon } from 'lucide-react'; +import { useTranslations } from 'next-intl'; +import { useFormatter } from 'next-intl'; +import * as React from 'react'; +import type { DayPickerProps } from 'react-day-picker'; + +import { cx } from '@/lib/utils'; + +import { Button } from '@/components/ui/Button'; +import { Calendar } from '@/components/ui/Calendar'; +import { Input } from '@/components/ui/Input'; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from '@/components/ui/Popover'; + +type DatePickerProps = { + className?: string; + side?: 'top' | 'bottom' | 'left' | 'right'; + avoidCollisions?: boolean; + date: Date | undefined; + setDate: (date: Date | undefined) => void; + disabled?: boolean; +} & Omit< + DayPickerProps, + | 'fixedWeeks' + | 'today' + | 'selected' + | 'disabled' + | 'onSelect' + | 'autoFocus' + | 'mode' +> & + React.HTMLAttributes; + +/** + * This is a sligtly modified version of shadcn's Date Picker built on top of Calendar. + * The component has a state, but also allows adding an additional date callback function which + * provides a way to have side effects and/or state updates on the parent component whenever a new date is selected. + * UPDATE: Now supports an input field so it actually works as a date picker in a form. State is passed to it via props + * so it works in a form. Also included i18n support. + */ + +function DatePicker({ + className, + side, + avoidCollisions = true, + date, + setDate, + captionLayout, + footer, + hideWeekdays, + numberOfMonths, + showOutsideDays, + showWeekNumber, + disabled, + ...props +}: DatePickerProps) { + const t = useTranslations('ui'); + const format = useFormatter(); + const [open, setOpen] = React.useState(false); + const [month, setMonth] = React.useState(date); + const [inputValue, setInputValue] = React.useState(''); + + function handleSelectDate(date: Date | undefined) { + if (!date) { + setInputValue(''); + setDate(undefined); + } else { + setDate(date); + setMonth(date); + setInputValue( + format.dateTime(date, { + day: 'numeric', + month: 'numeric', + year: 'numeric', + }), + ); + } + } + + function handleInputChange(e: React.ChangeEvent) { + setInputValue(e.target.value); + const parsedDate = parse(e.target.value, t('dateFormat'), new Date()); + + if (isValid(parsedDate)) { + setMonth(parsedDate); + } + setDate(parsedDate); + } + + return ( + +
+ + + + +
+ + + + + ); +} + +export { DatePicker }; diff --git a/src/components/composites/PaginationCarousel.tsx b/src/components/composites/PaginationCarousel.tsx index 9ddd538..3457224 100644 --- a/src/components/composites/PaginationCarousel.tsx +++ b/src/components/composites/PaginationCarousel.tsx @@ -1,22 +1,126 @@ -import { PaginationCarouselClient } from '@/components/composites/PaginationCarouselClient'; +'use client'; + +import { + Pagination, + PaginationContent, + PaginationEllipsis, + PaginationItem, + PaginationLink, + PaginationNext, + PaginationPrevious, +} from '@/components/ui/Pagination'; +import { cx } from '@/lib/utils'; import { useTranslations } from 'next-intl'; +import { parseAsInteger, useQueryState } from 'nuqs'; + +type PaginationCarouselProps = { + className?: string; + totalPages: number; +}; function PaginationCarousel({ - ...props -}: { className?: string; totalPages: number }) { + className, + totalPages, +}: PaginationCarouselProps) { const t = useTranslations('ui'); + const [page, setPage] = useQueryState( + t('page'), + parseAsInteger.withDefault(1).withOptions({ shallow: false }), + ); + + function handlePrevious(e: React.MouseEvent) { + e.preventDefault(); + if (page > 1) { + void setPage(page - 1); + } + } + + function handleNext(e: React.MouseEvent) { + e.preventDefault(); + if (page < totalPages) { + void setPage(page + 1); + } + } + + function handlePageClick( + e: React.MouseEvent, + pageNum: number, + ) { + e.preventDefault(); + void setPage(pageNum); + } + + let pagesToDisplay = []; + if (page === 1) { + pagesToDisplay = [1, 2, 3].filter((pageNum) => pageNum <= totalPages); + } else if (page === totalPages) { + pagesToDisplay = [totalPages - 2, totalPages - 1, totalPages].filter( + (pageNum) => pageNum >= 1, + ); + } else { + pagesToDisplay = [page - 1, page, page + 1]; + } + + const lastPage = pagesToDisplay[pagesToDisplay.length - 1]; + return ( - + + + + + + {pagesToDisplay[0] !== undefined && pagesToDisplay[0] > 1 && ( + + + + )} + {pagesToDisplay.map( + (pageNum) => + pageNum > 0 && + pageNum <= totalPages && ( + + handlePageClick(e, pageNum)} + isActive={pageNum === page} + > + {pageNum} + + + ), + )} + {lastPage !== undefined && lastPage < totalPages && ( + + + + )} + + + + + ); } diff --git a/src/components/composites/PaginationCarouselClient.tsx b/src/components/composites/PaginationCarouselClient.tsx deleted file mode 100644 index 4693b24..0000000 --- a/src/components/composites/PaginationCarouselClient.tsx +++ /dev/null @@ -1,134 +0,0 @@ -'use client'; - -import { - Pagination, - PaginationContent, - PaginationEllipsis, - PaginationItem, - PaginationLink, - PaginationNext, - PaginationPrevious, -} from '@/components/ui/Pagination'; -import { cx } from '@/lib/utils'; -import { parseAsInteger, useQueryState } from 'nuqs'; - -type PaginationCarouselProps = { - className?: string; - totalPages: number; - t: { - goToPreviousPage: string; - previous: string; - morePages: string; - goToNextPage: string; - next: string; - page: string; - }; -}; - -function PaginationCarouselClient({ - className, - totalPages, - t, -}: PaginationCarouselProps) { - const [page, setPage] = useQueryState( - t.page, - parseAsInteger.withDefault(1).withOptions({ shallow: false }), - ); - - function handlePrevious(e: React.MouseEvent) { - e.preventDefault(); - if (page > 1) { - void setPage(page - 1); - } - } - - function handleNext(e: React.MouseEvent) { - e.preventDefault(); - if (page < totalPages) { - void setPage(page + 1); - } - } - - function handlePageClick( - e: React.MouseEvent, - pageNum: number, - ) { - e.preventDefault(); - void setPage(pageNum); - } - - let pagesToDisplay = []; - if (page === 1) { - pagesToDisplay = [1, 2, 3].filter((pageNum) => pageNum <= totalPages); - } else if (page === totalPages) { - pagesToDisplay = [totalPages - 2, totalPages - 1, totalPages].filter( - (pageNum) => pageNum >= 1, - ); - } else { - pagesToDisplay = [page - 1, page, page + 1]; - } - - const lastPage = pagesToDisplay[pagesToDisplay.length - 1]; - - return ( - - - - - - {pagesToDisplay[0] !== undefined && pagesToDisplay[0] > 1 && ( - - - - )} - {pagesToDisplay.map( - (pageNum) => - pageNum > 0 && - pageNum <= totalPages && ( - - handlePageClick(e, pageNum)} - isActive={pageNum === page} - > - {pageNum} - - - ), - )} - {lastPage !== undefined && lastPage < totalPages && ( - - - - )} - - - - - - ); -} - -export { PaginationCarouselClient }; diff --git a/src/components/composites/ResponsiveDialog.tsx b/src/components/composites/ResponsiveDialog.tsx new file mode 100644 index 0000000..417fe57 --- /dev/null +++ b/src/components/composites/ResponsiveDialog.tsx @@ -0,0 +1,187 @@ +'use client'; + +import type * as React from 'react'; + +import { useMediaQuery } from '@/lib/hooks/useMediaQuery'; +import { cx } from '@/lib/utils'; + +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@/components/ui/Dialog'; +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from '@/components/ui/Drawer'; + +interface BaseProps { + children: React.ReactNode; +} + +interface RootResponsiveDialogProps extends BaseProps { + open?: boolean; + onOpenChange?: (open: boolean) => void; +} + +interface ResponsiveDialogProps extends BaseProps { + className?: string; + asChild?: true; +} + +const desktop = '(min-width: 768px)'; + +/** + * This uses a drawer on mobile and a dialog on desktop so it is usually the preffered way to use dialogs in the app for a repsonsive experience. + */ +const ResponsiveDialog = ({ + children, + ...props +}: RootResponsiveDialogProps) => { + const isDesktop = useMediaQuery(desktop); + const ResponsiveDialog = isDesktop ? Dialog : Drawer; + + return {children}; +}; + +const ResponsiveDialogTrigger = ({ + className, + children, + ...props +}: ResponsiveDialogProps) => { + const isDesktop = useMediaQuery(desktop); + const ResponsiveDialogTrigger = isDesktop ? DialogTrigger : DrawerTrigger; + + return ( + + {children} + + ); +}; + +const ResponsiveDialogClose = ({ + className, + children, + ...props +}: ResponsiveDialogProps) => { + const isDesktop = useMediaQuery(desktop); + const ResponsiveDialogClose = isDesktop ? DialogClose : DrawerClose; + + return ( + + {children} + + ); +}; + +const ResponsiveDialogContent = ({ + className, + children, + ...props +}: ResponsiveDialogProps) => { + const isDesktop = useMediaQuery(desktop); + const ResponsiveDialogContent = isDesktop ? DialogContent : DrawerContent; + + return ( + + {children} + + ); +}; + +const ResponsiveDialogDescription = ({ + className, + children, + ...props +}: ResponsiveDialogProps) => { + const isDesktop = useMediaQuery(desktop); + const ResponsiveDialogDescription = isDesktop + ? DialogDescription + : DrawerDescription; + + return ( + + {children} + + ); +}; + +const ResponsiveDialogHeader = ({ + className, + children, + ...props +}: ResponsiveDialogProps) => { + const isDesktop = useMediaQuery(desktop); + const ResponsiveDialogHeader = isDesktop ? DialogHeader : DrawerHeader; + + return ( + + {children} + + ); +}; + +const ResponsiveDialogTitle = ({ + className, + children, + ...props +}: ResponsiveDialogProps) => { + const isDesktop = useMediaQuery(desktop); + const ResponsiveDialogTitle = isDesktop ? DialogTitle : DrawerTitle; + + return ( + + {children} + + ); +}; + +const ResponsiveDialogBody = ({ + className, + children, + ...props +}: ResponsiveDialogProps) => { + return ( +
+ {children} +
+ ); +}; + +const ResponsiveDialogFooter = ({ + className, + children, + ...props +}: ResponsiveDialogProps) => { + const isDesktop = useMediaQuery(desktop); + const ResponsiveDialogFooter = isDesktop ? DialogFooter : DrawerFooter; + + return ( + + {children} + + ); +}; + +export { + ResponsiveDialog, + ResponsiveDialogTrigger, + ResponsiveDialogClose, + ResponsiveDialogContent, + ResponsiveDialogDescription, + ResponsiveDialogHeader, + ResponsiveDialogTitle, + ResponsiveDialogBody, + ResponsiveDialogFooter, +}; diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 0c83b28..cc7f462 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -6,7 +6,7 @@ import { } from '@/components/assets/icons'; import { IDILogo, NexusLogo } from '@/components/assets/sponsors'; import { LogoLink } from '@/components/layout/LogoLink'; -import { Nav } from '@/components/layout/Nav'; +import { Nav } from '@/components/layout/header/Nav'; import { Button } from '@/components/ui/Button'; import { Link } from '@/lib/locale/navigation'; import { BugIcon, MailIcon } from 'lucide-react'; diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 1d67cdd..85faf28 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -1,8 +1,8 @@ import { LogoLink } from '@/components/layout/LogoLink'; -import { MobileSheet } from '@/components/layout/MobileSheet'; -import { Nav } from '@/components/layout/Nav'; import { DarkModeMenu } from '@/components/layout/header/DarkModeMenu'; import { LocaleMenu } from '@/components/layout/header/LocaleMenu'; +import { MobileSheet } from '@/components/layout/header/MobileSheet'; +import { Nav } from '@/components/layout/header/Nav'; import { ProfileMenu } from '@/components/layout/header/ProfileMenu'; import { useTranslations } from 'next-intl'; diff --git a/src/components/layout/MobileSheet.tsx b/src/components/layout/header/MobileSheet.tsx similarity index 96% rename from src/components/layout/MobileSheet.tsx rename to src/components/layout/header/MobileSheet.tsx index 12eddbd..9bcd6da 100644 --- a/src/components/layout/MobileSheet.tsx +++ b/src/components/layout/header/MobileSheet.tsx @@ -1,7 +1,7 @@ 'use client'; import { LogoLink } from '@/components/layout/LogoLink'; -import { Nav } from '@/components/layout/Nav'; +import { Nav } from '@/components/layout/header/Nav'; import { Button } from '@/components/ui/Button'; import { Sheet, diff --git a/src/components/layout/Nav.tsx b/src/components/layout/header/Nav.tsx similarity index 100% rename from src/components/layout/Nav.tsx rename to src/components/layout/header/Nav.tsx diff --git a/src/components/news/ArticleCard.tsx b/src/components/news/ArticleCard.tsx index 041f2ee..b7e28d7 100644 --- a/src/components/news/ArticleCard.tsx +++ b/src/components/news/ArticleCard.tsx @@ -49,7 +49,10 @@ function ArticleCard({ fill /> - + {title} diff --git a/src/components/providers/IntlClientProvider.tsx b/src/components/providers/IntlClientProvider.tsx new file mode 100644 index 0000000..28c5577 --- /dev/null +++ b/src/components/providers/IntlClientProvider.tsx @@ -0,0 +1,20 @@ +import { NextIntlClientProvider, useMessages } from 'next-intl'; + +type Props = { + children: React.ReactNode; + locale: string; +}; + +function IntlClientProvider({ children, locale }: Props) { + const { ui, error } = useMessages(); + return ( + } + > + {children} + + ); +} + +export { IntlClientProvider }; diff --git a/src/components/providers/IntlErrorProvider.tsx b/src/components/providers/IntlErrorProvider.tsx deleted file mode 100644 index 197c9c3..0000000 --- a/src/components/providers/IntlErrorProvider.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { NextIntlClientProvider, useMessages } from 'next-intl'; - -type Props = { - children: React.ReactNode; - locale: string; -}; - -function IntlErrorProvider({ children, locale }: Props) { - const { error } = useMessages(); - return ( - - {children} - - ); -} - -export { IntlErrorProvider }; diff --git a/src/components/providers/NuqsProvider.tsx b/src/components/providers/NuqsProvider.tsx new file mode 100644 index 0000000..c8c6b59 --- /dev/null +++ b/src/components/providers/NuqsProvider.tsx @@ -0,0 +1,7 @@ +import { NuqsAdapter } from 'nuqs/adapters/next/app'; + +function NuqsProvider({ children }: { children: React.ReactNode }) { + return {children}; +} + +export { NuqsProvider }; diff --git a/src/components/providers/RootProviders.tsx b/src/components/providers/RootProviders.tsx index d4f5704..c87f384 100644 --- a/src/components/providers/RootProviders.tsx +++ b/src/components/providers/RootProviders.tsx @@ -1,4 +1,5 @@ -import { IntlErrorProvider } from '@/components/providers/IntlErrorProvider'; +import { IntlClientProvider } from '@/components/providers/IntlClientProvider'; +import { NuqsProvider } from '@/components/providers/NuqsProvider'; import { TRPCProvider } from '@/components/providers/TRPCProvider'; import { ThemeProvider } from '@/components/providers/ThemeProvider'; @@ -11,7 +12,9 @@ function RootProviders({ children, locale }: RootProvidersProps) { return ( - {children} + + {children} + ); diff --git a/src/components/providers/ThemeProvider.tsx b/src/components/providers/ThemeProvider.tsx index 39919b9..1b4753f 100644 --- a/src/components/providers/ThemeProvider.tsx +++ b/src/components/providers/ThemeProvider.tsx @@ -9,6 +9,10 @@ function ThemeProvider({ children }: { children: React.ReactNode }) { defaultTheme='system' enableSystem disableTransitionOnChange + themeColor={{ + light: 'hsl(0 0% 100%)', + dark: 'hsl(20 14.3% 4.1%)', + }} > {children} diff --git a/src/components/shift-schedule/AdministratorMenu.tsx b/src/components/shift-schedule/AdministratorMenu.tsx new file mode 100644 index 0000000..3548912 --- /dev/null +++ b/src/components/shift-schedule/AdministratorMenu.tsx @@ -0,0 +1,52 @@ +'use client'; + +import { Button } from '@/components/ui/Button'; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from '@/components/ui/Collapsible'; +import { ChevronDownIcon, ChevronUpIcon, Trash2Icon } from 'lucide-react'; +import { useState } from 'react'; + +type AdministratorMenuProps = { + t: { + label: string; + open: string; + close: string; + clearShiftSchedule: string; + }; +}; + +function AdministratorMenu({ t }: AdministratorMenuProps) { + const [isOpen, setIsOpen] = useState(false); + + return ( + +
+ {t.label} + + + +
+ + + + + ); +} + +export { AdministratorMenu }; diff --git a/src/components/shift-schedule/RegisterShift.tsx b/src/components/shift-schedule/RegisterShift.tsx new file mode 100644 index 0000000..801dc2f --- /dev/null +++ b/src/components/shift-schedule/RegisterShift.tsx @@ -0,0 +1,23 @@ +import { Button } from '@/components/ui/Button'; +import { Checkbox } from '@/components/ui/Checkbox'; +import { Label } from '@/components/ui/Label'; +import { cx } from '@/lib/utils'; +import { useTranslations } from 'next-intl'; + +function RegisterShift({ className }: { className?: string }) { + const t = useTranslations( + 'shiftSchedule.scheduleTable.scheduleCell.scheduleCellDialog.registerSection', + ); + + return ( +
+
+ + +
+ +
+ ); +} + +export { RegisterShift }; diff --git a/src/components/shift-schedule/ScheduleCell.tsx b/src/components/shift-schedule/ScheduleCell.tsx new file mode 100644 index 0000000..8cd360e --- /dev/null +++ b/src/components/shift-schedule/ScheduleCell.tsx @@ -0,0 +1,58 @@ +import { ScheduleCellDialog } from '@/components/shift-schedule/ScheduleCellDialog'; +import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/Dialog'; +import { TableCell } from '@/components/ui/Table'; +import { cx } from '@/lib/utils'; +import { UserIcon, UsersIcon } from 'lucide-react'; +import { useTranslations } from 'next-intl'; + +type ScheduleCellProps = { + tDialog: { + day: string; + time: string; + }; + members: { + name: string; + }[]; +}; + +function ScheduleCell({ tDialog, members }: ScheduleCellProps) { + const t = useTranslations('shiftSchedule.scheduleTable.scheduleCell'); + + return ( + + + + + + + + + + + ); +} + +export { ScheduleCell }; diff --git a/src/components/shift-schedule/ScheduleCellDialog.tsx b/src/components/shift-schedule/ScheduleCellDialog.tsx new file mode 100644 index 0000000..248d3bf --- /dev/null +++ b/src/components/shift-schedule/ScheduleCellDialog.tsx @@ -0,0 +1,47 @@ +import { RegisterShift } from '@/components/shift-schedule/RegisterShift'; +import { DialogHeader, DialogTitle } from '@/components/ui/Dialog'; +import { useTranslations } from 'next-intl'; + +type ScheduleCellDialogProps = { + tDialog: { + day: string; + time: string; + }; + members: { + name: string; + }[]; +}; + +function ScheduleCellDialog({ tDialog, members }: ScheduleCellDialogProps) { + const t = useTranslations( + 'shiftSchedule.scheduleTable.scheduleCell.scheduleCellDialog', + ); + + return ( + <> + + + {tDialog.day} + {tDialog.time} + + +
+ {members.length === 0 ? ( +

{t('empty')}

+ ) : ( +
+ {members.map((member) => ( +
+

{member.name}

+
[skill icons]
+
+ ))} +
+ )} + +
+ + ); +} + +export { ScheduleCellDialog }; diff --git a/src/components/shift-schedule/ScheduleTable.tsx b/src/components/shift-schedule/ScheduleTable.tsx new file mode 100644 index 0000000..a438008 --- /dev/null +++ b/src/components/shift-schedule/ScheduleTable.tsx @@ -0,0 +1,160 @@ +import { ScheduleCell } from '@/components/shift-schedule/ScheduleCell'; +import { + Table, + TableBody, + TableCaption, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/Table'; +import { useFormatter, useTranslations } from 'next-intl'; + +type ScheduleEntryProps = { + members: { + name: string; + }[]; +}; + +type ScheduleDayProps = { + first: ScheduleEntryProps; + second: ScheduleEntryProps; + third: ScheduleEntryProps; + fourth: ScheduleEntryProps; +}; + +type ScheduleTableProps = { + week: { + monday: ScheduleDayProps; + tuesday: ScheduleDayProps; + wednesday: ScheduleDayProps; + thursday: ScheduleDayProps; + friday: ScheduleDayProps; + }; +}; + +function ScheduleTable({ week }: ScheduleTableProps) { + const t = useTranslations('shiftSchedule.scheduleTable'); + const format = useFormatter(); + + const days = [ + 'monday', + 'tuesday', + 'wednesday', + 'thursday', + 'friday', + ] as const; + const timeslots = ['first', 'second', 'third', 'fourth'] as const; + + function getDateTimeRange(timeslot: string) { + let firstDate: Date; + let secondDate: Date; + + switch (timeslot) { + case timeslots[0]: + firstDate = new Date(0, 0, 0, 10, 15, 0, 0); + secondDate = new Date(0, 0, 0, 12, 7, 0, 0); + break; + + case timeslots[1]: + firstDate = new Date(0, 0, 0, 12, 7, 0, 0); + secondDate = new Date(0, 0, 0, 14, 7, 0, 0); + break; + + case timeslots[2]: + firstDate = new Date(0, 0, 0, 14, 7, 0, 0); + secondDate = new Date(0, 0, 0, 16, 7, 0, 0); + break; + + case timeslots[3]: + firstDate = new Date(0, 0, 0, 16, 7, 0, 0); + secondDate = new Date(0, 0, 0, 18, 0, 0, 0); + break; + + default: + firstDate = new Date(); + secondDate = new Date(); + } + + return format.dateTimeRange(firstDate, secondDate, { + hour: '2-digit', + minute: '2-digit', + hour12: false, + }); + } + + return ( + <> + {/* Table shown on small screens */} +
+ {days.map((day) => ( + + + + {t('time')} + + {t('day', { day: day })} + + + + + {timeslots.map((timeslot) => ( + + + {getDateTimeRange(timeslot)} + + + + ))} + +
+ ))} + + [skill icons legend] +
+
+ + {/* Table shown on all other screens */} + + + + {t('time')} + {days.map((day) => ( + + {t('day', { day: day })} + + ))} + + + + {timeslots.map((timeslot) => ( + + + {getDateTimeRange(timeslot)} + + {days.map((day) => ( + + ))} + + ))} + + [skill icons legend] +
+ + ); +} + +export { ScheduleTable }; diff --git a/src/components/storage/AddToCartButton.tsx b/src/components/storage/AddToCartButton.tsx index c0009f7..aec7f2a 100644 --- a/src/components/storage/AddToCartButton.tsx +++ b/src/components/storage/AddToCartButton.tsx @@ -1,7 +1,7 @@ 'use client'; import { Button } from '@/components/ui/Button'; -import { Loader } from '@/components/ui/Loader'; +import { Spinner } from '@/components/ui/Spinner'; import { useLocalStorage } from '@/lib/hooks/useLocalStorage'; import { cx } from 'cva'; @@ -36,7 +36,7 @@ function AddToCartButton({ className, item, t }: AddToCartButtonProps) { ); if (isLoading) { - return ; + return ; } function updateCart() { diff --git a/src/components/storage/ItemCard.tsx b/src/components/storage/ItemCard.tsx index d653433..ebd734c 100644 --- a/src/components/storage/ItemCard.tsx +++ b/src/components/storage/ItemCard.tsx @@ -33,7 +33,7 @@ function ItemCard({ priority={true} />
- + {item.name} {item.location} diff --git a/src/components/storage/LoanForm.tsx b/src/components/storage/LoanForm.tsx index 81b26ac..9d77351 100644 --- a/src/components/storage/LoanForm.tsx +++ b/src/components/storage/LoanForm.tsx @@ -6,15 +6,13 @@ import { Form, FormControl, FormDescription, - FormField, FormItem, FormLabel, FormMessage, + useForm, } from '@/components/ui/Form'; import { Input } from '@/components/ui/Input'; -import { zodResolver } from '@hookform/resolvers/zod'; import { addDays, addWeeks, endOfWeek } from 'date-fns'; -import { useForm } from 'react-hook-form'; import { z } from 'zod'; const formSchema = z.object({ @@ -36,67 +34,68 @@ type LoanFormProps = { }; function LoanForm({ t }: LoanFormProps) { - const form = useForm>({ - resolver: zodResolver(formSchema), + const form = useForm(formSchema, { defaultValues: { phone: '', returnBy: new Date(), }, + onSubmit: ({ value }) => { + console.log(value); + }, }); - - function onSubmit(values: z.infer) { - // TODO: Add new loan to database - console.log(values); - } - return ( - <> -
- - ( - - {t.phoneNumber} - - - - {t.phoneNumberDescription} - - - )} - /> - ( - - {t.returnBy} - - - - {t.returnByDescription} - - - )} - /> - - - - + )} + + ); } diff --git a/src/components/ui/Avatar.tsx b/src/components/ui/Avatar.tsx index a9166d5..2a6b693 100644 --- a/src/components/ui/Avatar.tsx +++ b/src/components/ui/Avatar.tsx @@ -2,10 +2,10 @@ import { cx } from '@/lib/utils'; import * as AvatarPrimitive from '@radix-ui/react-avatar'; -import * as React from 'react'; +import { forwardRef } from 'react'; -const Avatar = React.forwardRef< - React.ElementRef, +const Avatar = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( , +const AvatarFallback = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( ( +const Button = forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : 'button'; return ( diff --git a/src/components/ui/Calendar.tsx b/src/components/ui/Calendar.tsx index 905dbbc..47517e9 100644 --- a/src/components/ui/Calendar.tsx +++ b/src/components/ui/Calendar.tsx @@ -1,64 +1,208 @@ 'use client'; -import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'; -import type * as React from 'react'; -import { DayPicker } from 'react-day-picker'; +import { + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, + ChevronUpIcon, +} from 'lucide-react'; +import { useLocale } from 'next-intl'; +import { useFormatter, useTranslations } from 'next-intl'; +import { + DayPicker, + type DayPickerProps, + type DropdownOption, + type DropdownProps, +} from 'react-day-picker'; -import { buttonVariants } from '@/components/ui/Button'; +import { dayPickerLocales } from '@/lib/locale'; import { cx } from '@/lib/utils'; -export type CalendarProps = React.ComponentProps; +import { Button, buttonVariants } from '@/components/ui/Button'; +import { ScrollArea } from '@/components/ui/ScrollArea'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/Select'; + +export type CalendarProps = DayPickerProps; + +/** + * This component is also customised a lot from its shadcn counterpart. + * We have updated to use React Day Picker V9 (which has a lot of breaking changes). + * Our version supports a dropdown for the month and year if enabled via the captionLayout prop. + * Also it uses the correct locale labels for everything based on the current locale. + */ +function Dropdown({ + value, + onChange, + options, + formatSelectedOption, +}: DropdownProps & { + formatSelectedOption?: (option?: DropdownOption) => string | undefined; +}) { + const selectedOption = options?.find((option) => option.value === value); + + function handleChange(value: string) { + const changeEvent = { + target: { value }, + } as React.ChangeEvent; + onChange?.(changeEvent); + } + + return ( + + ); +} function Calendar({ className, classNames, - showOutsideDays = true, - locale, + showOutsideDays = false, ...props }: CalendarProps) { + const t = useTranslations('ui'); + const format = useFormatter(); + const currentLocale = useLocale(); return ( , - IconRight: ({ ...props }) => , + DayButton({ modifiers, className, ...buttonProps }) { + return ( + - - - handleDateChange(date)} - disabled={disabled} - /> - - - ); -} - -export { DatePicker }; diff --git a/src/components/ui/Dialog.tsx b/src/components/ui/Dialog.tsx index a0c8497..d96fcc2 100644 --- a/src/components/ui/Dialog.tsx +++ b/src/components/ui/Dialog.tsx @@ -3,7 +3,7 @@ import { cx } from '@/lib/utils'; import * as DialogPrimitive from '@radix-ui/react-dialog'; import { XIcon } from 'lucide-react'; -import * as React from 'react'; +import { forwardRef } from 'react'; const Dialog = DialogPrimitive.Root; @@ -13,8 +13,8 @@ const DialogPortal = DialogPrimitive.Portal; const DialogClose = DialogPrimitive.Close; -const DialogOverlay = React.forwardRef< - React.ElementRef, +const DialogOverlay = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( , +const DialogContent = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( @@ -80,8 +80,8 @@ const DialogFooter = ({ ); DialogFooter.displayName = 'DialogFooter'; -const DialogTitle = React.forwardRef< - React.ElementRef, +const DialogTitle = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( , +const DialogDescription = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( ) => ( + +); +Drawer.displayName = 'Drawer'; + +const DrawerTrigger = DrawerPrimitive.Trigger; + +const DrawerPortal = DrawerPrimitive.Portal; + +const DrawerClose = DrawerPrimitive.Close; + +const DrawerOverlay = forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName; + +const DrawerContent = forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + +
+ {children} + + +)); +DrawerContent.displayName = 'DrawerContent'; + +const DrawerHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +DrawerHeader.displayName = 'DrawerHeader'; + +const DrawerFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +DrawerFooter.displayName = 'DrawerFooter'; + +const DrawerTitle = forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +DrawerTitle.displayName = DrawerPrimitive.Title.displayName; + +const DrawerDescription = forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +DrawerDescription.displayName = DrawerPrimitive.Description.displayName; + +export { + Drawer, + DrawerPortal, + DrawerOverlay, + DrawerTrigger, + DrawerClose, + DrawerContent, + DrawerHeader, + DrawerFooter, + DrawerTitle, + DrawerDescription, +}; diff --git a/src/components/ui/DropdownMenu.tsx b/src/components/ui/DropdownMenu.tsx index c7daf18..068c31f 100644 --- a/src/components/ui/DropdownMenu.tsx +++ b/src/components/ui/DropdownMenu.tsx @@ -2,7 +2,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'; -import * as React from 'react'; +import { forwardRef } from 'react'; import { cx } from '@/lib/utils'; @@ -18,8 +18,8 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub; const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; -const DropdownMenuSubTrigger = React.forwardRef< - React.ElementRef, +const DropdownMenuSubTrigger = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef & { inset?: boolean; } @@ -40,8 +40,8 @@ const DropdownMenuSubTrigger = React.forwardRef< DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName; -const DropdownMenuSubContent = React.forwardRef< - React.ElementRef, +const DropdownMenuSubContent = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( , +const DropdownMenuContent = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( @@ -74,8 +74,8 @@ const DropdownMenuContent = React.forwardRef< )); DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName; -const DropdownMenuItem = React.forwardRef< - React.ElementRef, +const DropdownMenuItem = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef & { inset?: boolean; } @@ -92,8 +92,8 @@ const DropdownMenuItem = React.forwardRef< )); DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; -const DropdownMenuCheckboxItem = React.forwardRef< - React.ElementRef, +const DropdownMenuCheckboxItem = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( , +const DropdownMenuRadioItem = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( , +const DropdownMenuLabel = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef & { inset?: boolean; } @@ -156,8 +156,8 @@ const DropdownMenuLabel = React.forwardRef< )); DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName; -const DropdownMenuSeparator = React.forwardRef< - React.ElementRef, +const DropdownMenuSeparator = forwardRef< + React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( , +>( + schema: TFormSchema, + options?: Omit< + FormOptions>, + 'validatorAdapter' + >, +) { + const form = useForm({ + validatorAdapter: zodValidator(), + validators: { + onChange: schema, + }, + ...options, + }); + + function handleSubmit(e: React.FormEvent) { + e.preventDefault(); + e.stopPropagation(); + void form.handleSubmit(); + } + + return { + ...form, + handleSubmit, + }; +} + +const Form = ({ + className, + ...props +}: React.HTMLAttributes) => { + return
; +}; -type FormFieldContextValue< - TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath, -> = { - name: TName; +type FormItemContextValue = { + id: string; + errors: ValidationError[]; }; -const FormFieldContext = React.createContext( - {} as FormFieldContextValue, +const FormItemContext = createContext( + {} as FormItemContextValue, ); -const FormField = < - TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath, ->({ +const FormItem = ({ + className, + errors, ...props -}: ControllerProps) => { +}: React.HTMLAttributes & { errors: ValidationError[] }) => { + const id = useId(); + return ( - - - + +
+ ); }; -const useFormField = () => { - const fieldContext = React.useContext(FormFieldContext); - const itemContext = React.useContext(FormItemContext); - const { getFieldState, formState } = useFormContext(); - - const fieldState = getFieldState(fieldContext.name, formState); +const useFormItem = () => { + const itemContext = useContext(FormItemContext); - if (!fieldContext) { - throw new Error('useFormField should be used within '); + if (!itemContext) { + throw new Error('useFormField should be used within '); } - const { id } = itemContext; + const { id, errors } = itemContext; return { id, - name: fieldContext.name, + errors, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, - ...fieldState, }; }; -type FormItemContextValue = { - id: string; -}; - -const FormItemContext = React.createContext( - {} as FormItemContextValue, -); - -const FormItem = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => { - const id = React.useId(); - - return ( - -
- - ); -}); -FormItem.displayName = 'FormItem'; - -const FormLabel = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { - const { error, formItemId } = useFormField(); +const FormLabel = ({ + className, + ...props +}: React.ComponentPropsWithoutRef) => { + const { formItemId, errors } = useFormItem(); return (