Linting, link to documentation, readme (#487)

.github/workflows/alpha.yml

@@ -2,7 +2,7 @@ name: 'Alpha Build'
 
 on:
   push:
-    branches: [v5000/iconsxx]
+    branches: [v5000/doc]
 
 jobs:
   frontend:

README.md

@@ -1,9 +1,11 @@
-# retro-board
+# Retrospected
 
-[![Build Status](https://travis-ci.org/antoinejaussoin/retro-board.svg?branch=develop)](https://travis-ci.org/antoinejaussoin/retro-board)
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/antoinejaussoin/retro-board)
+[![Master Build](https://github.com/antoinejaussoin/retro-board/actions/workflows/master.yml/badge.svg)](https://github.com/antoinejaussoin/retro-board/actions/workflows/master.yml)
+[![Canary Build](https://github.com/antoinejaussoin/retro-board/actions/workflows/canary.yml/badge.svg)](https://github.com/antoinejaussoin/retro-board/actions/workflows/canary.yml)
+[![Alpha Build](https://github.com/antoinejaussoin/retro-board/actions/workflows/alpha.yml/badge.svg)](https://github.com/antoinejaussoin/retro-board/actions/workflows/alpha.yml)
 
-This is a Retrospective Idea board, powering [retrospected.com](http://www.retrospected.com).
+[Retrospected](http://www.retrospected.com) is a free Real-time Agile Retrospective Board for engineering teams.
 
  
 
@@ -17,9 +19,11 @@ This is a Retrospective Idea board, powering [retrospected.com](http://www.retro
   <img src="./content/logos/k8s.svg" height="65">
   &nbsp;
   <img src="./content/logos/socketio.png" height="65">
+  &nbsp;
+  <img src="./content/logos/vite.png" height="65">
 </p>
 
-![Retrospected.com](/content/screenshot-v4.jpeg?raw=true 'Retrospected.com')
+![Retrospected.com](/content/screenshot-v5.png?raw=true 'Retrospected.com')
 
 This project is both an actual product, and also a technology demo using the latest and greatest JavaScript/TypeScript libraries of the month.
 
@@ -28,17 +32,16 @@ It features the following technologies:
 - [React 18](https://github.com/facebook/react)
 - [React Hooks](https://reactjs.org/docs/hooks-intro.html)
 - [React Router 6](https://reactrouter.com/)
-- [TypeScript 4.6](https://www.typescriptlang.org/)
+- [TypeScript 4.9](https://www.typescriptlang.org/)
 - [Recoil.js](https://recoiljs.org), as the global state management library
 - [Socket IO](http://socket.io)
-- [Webpack 5](https://github.com/webpack/webpack) (See older versions for Webpack 1, 2 and 3)
-- [Create React App 5](https://create-react-app.dev/docs/getting-started/)
+- [Vite](https://vitejs.dev/), as the bundler
 - [MUI 5](https://mui.com) for our components (previously known as Material-UI)
 - [Material UI design](https://www.google.com/design/spec/material-design/introduction.html)
 - [Emotion](https://emotion.sh/docs/introduction)
 - [Multilingual](https://stackoverflow.com/questions/33413880/react-redux-and-multilingual-internationalization-apps-architecture) / Internationalization
 - [Postgres](https://www.postgresql.org/)
-- [Node 16](https://nodejs.org/en/)
+- [Node 18 (LTS)](https://nodejs.org/en/)
 - [Passport](http://www.passportjs.org/) for seamless OAuth authentication with:
   - Google
   - Twitter
@@ -48,7 +51,7 @@ It features the following technologies:
   - Okta
 - [Giphy](https://giphy.com/) because adding a bit of fun to your retro can't hurt!
 - [React Beautiful DND](https://github.com/atlassian/react-beautiful-dnd) to allow re-ordering and grouping by drag-and-drop
-- [Jest](https://facebook.github.io/jest) for Unit Testing
+- [Vitest](https://vitest.dev), for Unit Testing
 - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), for Integration Tests
 - [Yarn](https://yarnpkg.com/en/), replacing NPM
 - [Docker](https://docker.com), for easy deployment
@@ -57,9 +60,13 @@ It features the following technologies:
 - [Multi-Architecture](https://github.com/docker/buildx/), for automatic compatibility with ARM-based servers
 - [Stripe](https://stripe.com/), for our payment solution
 - [Docusaurus](http://docusaurus.io/), for our documentation
+- [NextJS](https://nextjs.org/), for our landing page
 
-Previous versions, up to v1.0.1 featured the following libraries:
+Previous versions featured the following libraries:
 
+- ~~[Webpack 5](https://github.com/webpack/webpack) (See older versions for Webpack 1, 2 and 3)~~
+- ~~[Create React App 5](https://create-react-app.dev/docs/getting-started/)~~
+- ~~[Jest](https://facebook.github.io/jest) for Unit Testing~~
 - ~~[Redux](https://github.com/reactjs/redux)~~
 - ~~[CSS Modules](https://github.com/css-modules/css-modules)~~
 - ~~[redux-saga](https://github.com/yelouafi/redux-saga)~~
@@ -85,6 +92,15 @@ This will run a demo version, which you can turn into a fully licenced version b
 
 ## Versions History
 
+### Version 5.0.0
+
+- 👩‍💻 Brand new landing page, built with NextJS, separated from the main app. The app is now available at [https://app.retrospected.com](https://app.retrospected.com) and the landing page at [https://www.retrospected.com](https://www.retrospected.com).
+- 🇫🇷 / 🇬🇧 Multilingual support for this new landing age (English and French for now), with auto-detection of the user's language.
+- 🚀 Migration from CRA (create-react-app) to Vite, which is much faster and more flexible.
+- 💯 Migration to Google Analytics 4
+- 🏂 Adding a demo mode: one-click to create a demo session, with a demo account.
+- 🖥️ Improved support for self-hosted licence generation
+
 ### Version 4.19.3 (hotfix)
 
 - Fix Pro account list

docs/Dockerfile

@@ -1,8 +1,7 @@
 # This must be run with the Docker context set to the root folder of the repository
 # (the one with the yarn.lock file)
 
-FROM --platform=$BUILDPLATFORM node:16-alpine as Node
-## FROM node:16-alpine as Node
+FROM --platform=$BUILDPLATFORM node:lts-alpine as Node
 
 ENV NODE_ENV=production
 

docs/docs/self-hosting/quick-start/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import ComposeView from './ComposeView';
 import { InputField } from './Field';
 import styles from './Editor.module.css';

frontend/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "react-app",
+    "prettier"
+  ]
+}

frontend/package.json

@@ -21,9 +21,9 @@
     "@testing-library/react": "13.4.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/crypto-js": "4.1.1",
-    "@types/lodash": "4.14.191",
     "@types/emoji-mart": "3.0.9",
-     "@types/md5": "2.3.2",
+    "@types/lodash": "4.14.191",
+    "@types/md5": "2.3.2",
     "@types/node": "18.11.19",
     "@types/react": "18.0.27",
     "@types/react-beautiful-dnd": "13.1.3",
@@ -41,8 +41,9 @@
     "crypto-js": "4.1.1",
     "date-fns": "2.29.3",
     "emoji-mart": "3.0.1",
-    "eslint": "8.33.0",
-    "eslint-config-react-app": "7.0.1",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-react-app": "^7.0.1",
     "flag-icons": "6.6.6",
     "i18next": "22.4.9",
     "i18next-browser-languagedetector": "7.0.1",
@@ -81,6 +82,7 @@
     "uuid": "9.0.0",
     "vite": "4.1.1",
     "vite-plugin-ejs": "1.6.4",
+    "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-svgr": "2.4.0",
     "vite-tsconfig-paths": "4.0.5",
     "vitest": "0.28.4",
@@ -89,7 +91,7 @@
   "scripts": {
     "start": "vite",
     "build": "NODE_ENV=production tsc && vite build",
-    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint": "eslint 'src/**/*.{ts,tsx}' --max-warnings=0",
     "test": "vitest",
     "ci-test": "CI=true yarn test",
     "analyze": "source-map-explorer build/static/js/*"

frontend/src/auth/modal/AnonAuth.tsx

@@ -65,7 +65,7 @@ const AnonAuth = ({ onClose, onUser }: AnonAuthProps) => {
       <Alert severity="info">
         {t('AnonymousLogin.anonymousAuthDescription')}
       </Alert>
-      {!!error ? (
+      {error ? (
         <Alert severity="error" style={{ marginTop: 10 }}>
           {error}
         </Alert>

frontend/src/auth/modal/account/Login.tsx

@@ -65,7 +65,7 @@ const Login = ({
       }
     >
       <Alert severity="info">{t('AccountLogin.info')}</Alert>
-      {!!error ? (
+      {error ? (
         <Alert severity="error" style={{ marginTop: 10 }}>
           {error}
         </Alert>

frontend/src/auth/modal/account/Register.tsx

@@ -109,7 +109,7 @@ const Register = ({ onClose }: RegisterProps) => {
         <>
           <Alert severity="info">{t('Register.info')}</Alert>
 
-          {!!generalError ? (
+          {generalError ? (
             <Alert severity="error" style={{ marginTop: 10 }}>
               {generalError}
             </Alert>

frontend/src/hooks/useGiphy.ts

@@ -31,7 +31,7 @@ export default function useGiphy(
 
   useEffect(() => {
     async function load() {
-      if (!!giphyId) {
+      if (giphyId) {
         const result = await getGiphyUrl(giphyId);
         setUrl(result);
       }

frontend/src/views/admin/NewAccountModal.tsx

@@ -93,7 +93,7 @@ export function NewAccountModal({
           <Alert severity="success">{t('Register.messageSuccess')}</Alert>
         ) : (
           <>
-            {!!generalError ? (
+            {generalError ? (
               <Alert severity="error" style={{ marginTop: 10 }}>
                 {generalError}
               </Alert>

frontend/src/views/game/AckWarning.tsx

@@ -30,7 +30,7 @@ export default function AckWarning({ acks, onRefresh }: AckWarningProps) {
   }, [acks]);
 
   useEffect(() => {
-    if (!!lateAcks.length) {
+    if (lateAcks.length) {
       trackEvent('ack/error');
       throttledError('ack_not_received');
     }

frontend/src/views/game/board/Board.tsx

@@ -97,7 +97,7 @@ function GameMode({
 
   const handleOnDragEnd = useCallback(
     (result: DropResult, _provided: ResponderProvided) => {
-      if (!!result.destination) {
+      if (result.destination) {
         const entities = getMovingEntities(
           result.draggableId,
           result.destination.droppableId,
@@ -114,7 +114,7 @@ function GameMode({
           );
         }
       }
-      if (!!result.combine) {
+      if (result.combine) {
         const entities = getCombiningEntities(
           result.draggableId,
           result.combine.draggableId,

frontend/src/views/game/board/__tests__/moving-logic.test.ts

@@ -96,7 +96,7 @@ describe('When moving a post to a column', () => {
   it('should return the correct values when moving third before second', () => {
     const result = getMovingEntities('c', 'column#0', 1, game);
     expect(result).not.toBeNull();
-    if (!!result) {
+    if (result) {
       expect(result.post).toBe(game[0].posts[2]);
       expect(result.targetColumn).toBe(0);
       expect(result.previous).toBe(game[0].posts[0]);
@@ -107,7 +107,7 @@ describe('When moving a post to a column', () => {
   it('should return the correct values when moving first to last', () => {
     const result = getMovingEntities('a', 'column#0', 2, game);
     expect(result).not.toBeNull();
-    if (!!result) {
+    if (result) {
       expect(result.post).toBe(game[0].posts[0]);
       expect(result.targetColumn).toBe(0);
       expect(result.previous).toBe(game[0].posts[2]);
@@ -118,7 +118,7 @@ describe('When moving a post to a column', () => {
   it('should return the correct values when moving post to last in a different column', () => {
     const result = getMovingEntities('a', 'column#1', 3, game);
     expect(result).not.toBeNull();
-    if (!!result) {
+    if (result) {
       expect(result.post).toBe(game[0].posts[0]);
       expect(result.targetColumn).toBe(1);
       expect(result.previous).toBe(game[1].posts[2]);
@@ -129,7 +129,7 @@ describe('When moving a post to a column', () => {
   it('should return the correct values when moving post to first in a different column', () => {
     const result = getMovingEntities('a', 'column#1', 0, game);
     expect(result).not.toBeNull();
-    if (!!result) {
+    if (result) {
       expect(result.post).toBe(game[0].posts[0]);
       expect(result.targetColumn).toBe(1);
       expect(result.previous).toBe(undefined);
@@ -140,7 +140,7 @@ describe('When moving a post to a column', () => {
   it('should return the correct values when moving post to first in an empty column', () => {
     const result = getMovingEntities('a', 'column#2', 0, game);
     expect(result).not.toBeNull();
-    if (!!result) {
+    if (result) {
       expect(result.post).toBe(game[0].posts[0]);
       expect(result.targetColumn).toBe(2);
       expect(result.previous).toBe(undefined);
@@ -159,7 +159,7 @@ describe('When moving a post to a group', () => {
   it('should return the correct values when moving post to empty group', () => {
     const result = getMovingEntities('a', 'group#g00', 0, game);
     expect(result).not.toBeNull();
-    if (!!result) {
+    if (result) {
       expect(result.post).toBe(game[0].posts[0]);
       expect(result.targetColumn).toBe(0);
       expect(result.targetGroup).toBe(game[0].groups[0]);
@@ -171,7 +171,7 @@ describe('When moving a post to a group', () => {
   it('should return the correct values when moving post to a non empty group', () => {
     const result = getMovingEntities('a', 'group#g01', 1, game);
     expect(result).not.toBeNull();
-    if (!!result) {
+    if (result) {
       expect(result.post).toBe(game[0].posts[0]);
       expect(result.targetColumn).toBe(0);
       expect(result.targetGroup).toBe(game[0].groups[1]);
@@ -183,7 +183,7 @@ describe('When moving a post to a group', () => {
   it('should return the correct values when moving post from a group to the same group', () => {
     const result = getMovingEntities('g01a', 'group#g01', 2, game);
     expect(result).not.toBeNull();
-    if (!!result) {
+    if (result) {
       expect(result.post).toBe(game[0].groups[1].posts[0]);
       expect(result.targetColumn).toBe(0);
       expect(result.targetGroup).toBe(game[0].groups[1]);
@@ -195,7 +195,7 @@ describe('When moving a post to a group', () => {
   it('should return the correct values when moving post from a group to another group', () => {
     const result = getMovingEntities('g01b', 'group#g00', 0, game);
     expect(result).not.toBeNull();
-    if (!!result) {
+    if (result) {
       expect(result.post).toBe(game[0].groups[1].posts[1]);
       expect(result.targetColumn).toBe(0);
       expect(result.targetGroup).toBe(game[0].groups[0]);

frontend/src/views/home/TrialPrompt.tsx

@@ -15,7 +15,7 @@ export default function TrialPrompt() {
   const formatDistanceToNow = useFormatDate();
   const { t } = useTranslation();
   const { quota } = useQuota();
-  const quotaLeft = !!quota ? quota.quota - quota.posts : null;
+  const quotaLeft = quota ? quota.quota - quota.posts : null;
   const overQuota = !!quota && quota.posts >= quota.quota;
   const nearQuota = !!quota && !overQuota && quota.posts >= quota.quota - 20;
 

frontend/vite.config.ts

@@ -6,11 +6,13 @@ import inject from '@rollup/plugin-inject';
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
 import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
 import { ViteEjsPlugin } from 'vite-plugin-ejs';
+import eslint from 'vite-plugin-eslint';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
+    eslint(),
     viteTsconfigPaths(),
     svgrPlugin(),
     ViteEjsPlugin((config) => ({