Merge pull request #2 from dataforgoodfr/juho/frontend-setup

init repo with internationalisation, frontend tools and libraries.

Author: JulietteHoisnard

.env.example

@@ -1 +0,0 @@
-NOCODB_API_TOKEN=

.gitignore

@@ -17,6 +17,7 @@ downloads/
 eggs/
 .eggs/
 lib/
+!webapp/lib/
 lib64/
 lib64
 parts/
@@ -124,6 +125,7 @@ celerybeat.pid
 
 # Environments
 .env
+.env.local
 .env.test
 .venv
 env/

.pre-commit-config.yaml

@@ -11,3 +11,10 @@ repos:
       - id: check-merge-conflict
       - id: check-illegal-windows-names
       - id: mixed-line-ending
+  - repo: local #run custom scripts from own repo
+    hooks:
+      - id: lint-staged-webapp
+        name: Run lint-staged on webapp staged files
+        entry: bash run-lint-staged-if-webapp.sh
+        language: system
+        pass_filenames: false # This hook handles filenames internally

run-lint-staged-if-webapp.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+STAGED_FILES=$(git diff --cached --name-only)
+
+if echo "$STAGED_FILES" | grep -q '^webapp/'; then
+  echo "Changes in webapp/ detected, running lint-staged..."
+  cd webapp && npx lint-staged
+  exit_code=$?
+  exit $exit_code
+else
+  echo "No changes in webapp/ -- skipping lint-staged."
+fi

webapp/.env.example

@@ -0,0 +1,3 @@
+NOCODB_BASE_ID=xxx # Find your Base ID in NocoDB base menu.
+NOCODB_URL="https://noco.services.dataforgood.fr/api/v3" # With localhost: http://localhost:8500/api/v3
+NOCODB_TOKEN=xxx # Find your API token in NocoDB 'Team & settings' > 'API Tokens'.

webapp/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

webapp/.lintstagedrc

@@ -0,0 +1,4 @@
+{
+	"*/**/*.{js,jsx,ts,tsx}": ["eslint"],
+	"*/**/*.{json,css,md}": ["prettier --write"]
+}

webapp/.nvmrc

@@ -0,0 +1 @@
+24.11.1

webapp/.prettierrc.json

@@ -0,0 +1,18 @@
+{
+	"arrowParens": "avoid",
+	"bracketSpacing": true,
+	"htmlWhitespaceSensitivity": "css",
+	"insertPragma": false,
+	"bracketSameLine": false,
+	"jsxSingleQuote": true,
+	"printWidth": 120,
+	"proseWrap": "preserve",
+	"quoteProps": "as-needed",
+	"requirePragma": false,
+	"semi": false,
+	"singleQuote": true,
+	"tabWidth": 2,
+	"trailingComma": "none",
+	"useTabs": true,
+	"plugins": ["prettier-plugin-tailwindcss"]
+}

webapp/README.md

@@ -0,0 +1,72 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+Run `npm install`
+
+Set the environment variables in your .env.local file like defined in .env.example.
+
+First, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Components and UI libraries
+
+We use [Shadcn](https://ui.shadcn.com/) for components, in combination with [TailwindCSS](https://tailwindcss.com/) to style a component inline.
+To add a shadcn component:
+```bash
+npx shadcn@latest add navigation-menu
+```
+For icons, we use the default library in Shadcn, [Lucide](https://www.shadcn.io/icons/lucide).
+
+## Internationalisation i18n
+
+For the internationalisation of the app we are using [next-i18next](https://github.com/i18next/next-i18next). Our setup is based on this article from [Locize](https://www.locize.com/blog/i18n-next-app-router/).
+
+## BlogPosts / news markdown
+
+We use the library [react-markdown](https://remarkjs.github.io/react-markdown/) to display blog posts / news. Visit [CommonMark](https://commonmark.org) for Markdown guidelines and tutorial. You can style the components by passing the components props to ReactMarkdown. 
+
+```bash
+<ReactMarkdown components={components}>{Content}</ReactMarkdown>
+```
+
+## Linting and Code Formatting
+
+This repo uses `ESLint` [according to the official next documentation](https://nextjs.org/docs/app/api-reference/config/eslint) and prettier for linting and code formatting. The configuration for `ESLint` is located in the `.eslint.config.mjs` file, and the configuration for `prettier` is in the `.prettierrc.json` file.
+
+With the [ESLint Prettier plugin](https://www.npmjs.com/package/eslint-plugin-prettier/v/4.0.0) Prettier runs within ESLint and doesn't need a separate command. In order to apply `ESLint` to all existing files, run:
+
+```
+npx eslint .
+```
+
+and to fix fixable errors:
+```
+npx eslint . --fix
+```
+
+Before each commit, our `husky🐶` uses the `lint-staged` package to automatically lint and format the staged files according to the rules specified in the `.lintstagedrc` file:
+
+You can do this manually by running:
+
+```
+npx lint-staged
+```
+
+This ensures code quality and consistency across our codebase.