feat: update template (#9)

* fix: add demo

* fix: create unity demo

* fix: demo

* fix: update template

* fix: tests and workflows

* fix: update readme

* fix: update deps

* fix: tests

* fix: add renovate

.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": [
     "airbnb",
+    "airbnb-typescript",
     "plugin:import/typescript", // this is needed because airbnb uses eslint-plugin-import
     "prettier",
     "plugin:cypress/recommended",
@@ -21,20 +22,23 @@
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
+    "project": "./tsconfig.eslint.json",
     "ecmaFeatures": {
       "jsx": true
     },
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
   "rules": {
+    "react/prop-types": "off",
     "react/no-array-index-key": "off",
     "react/jsx-props-no-spreading": "off",
     "react/destructuring-assignment": "off",
     "react/require-default-props": "off",
     "react/react-in-jsx-scope": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "import/no-import-module-exports": "off",
+    "no-console": ["error", { "allow": ["error", "warn", "debug", "info"] }],
     "import/no-extraneous-dependencies": [
       "error",
       {
@@ -55,7 +59,9 @@
     "@typescript-eslint/explicit-function-return-type": [
       "error",
       {
-        "allowExpressions": true
+        "allowExpressions": true,
+        "allowHigherOrderFunctions": true,
+        "allowTypedFunctionExpressions": true
       }
     ],
     "@typescript-eslint/no-var-requires": "off",
@@ -79,7 +85,15 @@
     ],
     // eslint rule reports false error
     "no-shadow": "off",
-    "@typescript-eslint/no-shadow": ["error"]
+    "@typescript-eslint/no-shadow": ["error"],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ]
   },
   "settings": {
     "import/extensions": [".js", ".jsx", ".ts", ".tsx"],

.github/workflows/build.yml

@@ -0,0 +1,21 @@
+name: Build and Check
+
+on:
+  push:
+
+jobs:
+  build:
+    concurrency: build-${{ github.head_ref || github.ref }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: Yarn Install and Cache
+        uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
+
+      - name: Lint
+        run: yarn check
+
+      - name: Build
+        run: yarn build

.github/workflows/cypress.yml

@@ -1,54 +1,49 @@
-name: cypress tests
+name: Cypress UI tests
 
 on:
   push:
-    branches-ignore:
-      - 'release-please-**'
 
 jobs:
   cypress-run:
     concurrency: cypress-${{ github.head_ref || github.ref }}
     runs-on: ubuntu-latest
     steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: set up node
-        uses: actions/setup-node@v3
-        with:
-          node-version: '16'
+      - name: Checkout
+        uses: actions/checkout@v4
 
       - name: Yarn Install and Cache
         uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
         with:
           cypress: true
 
-      - name: cypress run
+
+      - name: Build App
+        run: yarn build:test
+        shell: bash
+        env:
+          VITE_PORT: 3000
+          VITE_API_HOST: http://localhost:3636
+          VITE_GRAASP_APP_KEY: id-1234567890
+          VITE_ENABLE_MOCK_API: true
+          VITE_VERSION: cypress-tests
+
+      - name: Cypress Run
         uses: cypress-io/github-action@v5
         env:
           VITE_PORT: 3000
           VITE_API_HOST: http://localhost:3636
           VITE_GRAASP_APP_KEY: id-1234567890
-          VITE_MOCK_API: true
+          VITE_ENABLE_MOCK_API: true
           VITE_VERSION: cypress-tests
         with:
           install: false
-          build: yarn build
           config: baseUrl=http://localhost:3000
-          start: yarn dev
+          start: yarn preview:test
           browser: chrome
           quiet: true
           # point to new cypress@10 config file
           config-file: cypress.config.ts
 
-      # - name: Run Component tests 🧪
-      #   uses: cypress-io/github-action@v5
-      #   with:
-      #     # we have already installed everything
-      #     install: false
-      #     # to run component tests we need to use "component: true"
-      #     component: true
-
       - uses: actions/upload-artifact@v3
         if: failure()
         with:

.github/workflows/deploy-dev.yml

@@ -17,7 +17,7 @@ jobs:
     environment: development
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Yarn install and Cache dependencies
         uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1

.github/workflows/deploy-prod.yml

@@ -13,7 +13,7 @@ jobs:
     environment: production
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.event.client_payload.tag }}
 

.github/workflows/deploy-stage.yml

@@ -13,7 +13,7 @@ jobs:
     environment: staging
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.event.client_payload.tag }}
 

.github/workflows/release-please.yml

@@ -16,7 +16,7 @@ jobs:
           package-name: graasp-app-starter-ts-vite
           changelog-types: '[{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"docs","section":"Documentation","hidden":false},{"type":"test","section":"Tests","hidden":false}]'
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: main
 

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn pretty-quick --staged && yarn lint && yarn test
+yarn check

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint && yarn build
+yarn check && yarn build

.prettierrc

@@ -12,5 +12,6 @@
     "^[./]"
   ],
   "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

.yarnrc.yml

@@ -1,7 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: '@yarnpkg/plugin-interactive-tools'
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.5.0.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

README.md

@@ -1,9 +1,27 @@
-# Graasp App React TS Vite Template
+<div style="margin-bottom: 20px; display:flex; justify-content: center; align-items: center ">
+<img style="text-align: center" src="https://graasp.org/favicon.svg" width=100 >
+</div>
 
-This repository hosts the template code for a **Graasp App** written with [Typescript](https://www.typescriptlang.org/) and [React](https://react.dev/). The bundler used is [vitejs](https://vitejs.dev).
+# Graasp App Template
+
+This repository hosts the template code for a **Graasp App** written with [Typescript](https://www.typescriptlang.org/) and [React](https://react.dev/). The bundler used is [Vite](https://vitejs.dev).
+
+<div style="gap:10px; display:flex; justify-content: center; align-items: center;">
+  <img src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg" width=50 >
+  <span>+</span>
+  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" width=50 >
+  <span>+</span>
+  <img src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Vitejs-logo.svg" width=50 >
+  <span>=</span>
+  <span>❤️</span>
+</div>
 
 ## Using this template
 
+The recommended way to use this template is with the [Graasp CLI](https://github.com/graasp/graasp-cli) which provides a setup wizard and some convenience tools when creating your project.
+
+Alternatively it is possible to create a new Github repo from this project using the Github Template function. In this case the local setup is left as an exercice to the reader.
+
 ### With the Graasp CLI
 
 This template can be used with the [graasp CLI](https://www.npmjs.com/package/@graasp/cli?activeTab=readme) to setup your project in a single line:
@@ -12,20 +30,31 @@ This template can be used with the [graasp CLI](https://www.npmjs.com/package/@g
 npx @graasp/cli@latest new -s graasp/graasp-app-starter-ts-vite
 ```
 
-The CLI will ask you a few questions to help you setup your project. It uses sane defaults like deploying using GitHubActions (recommended) suggests an appId and installs the dependencies and initializes the git versioning.
+The CLI will ask you a few questions to help you setup your project. It suggests sane defaults:
+
+- Deploying using GitHubActions (recommended)
+- Provide an appId
+- Auto-install project dependencies
+- Initialize a local git repository
 
 <details >
-<summary><h3>Manual Setup</h3></summary>
+<summary><h3>Directly from GitHub</h3></summary>
 
 Should you choose to bootstrap your graasp app manually, you will need to execute the following steps.
 
 #### Cloning the template
 
-First create a copy of this repo using either the `Use this template` button, or clone it using the command line.
+Get a copy of this repo.
+
+##### Using the Template button
+
+Click on the `Use this template` button. For more instructions head over to the [GitHub Docs on Using a template](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template)
+
+##### Clone from the command line
 
 With `git`:
 
-```bash
+```sh
 git clone
 ```
 
@@ -41,15 +70,16 @@ To deploy your app using github actions.
 
 #### Renaming
 
-You will have to look rename
+You will have to look for the `Graasp App Template` string in yours project files and rename it to your project name
 
 </details>
 
 ### GitHub Repo setup
 
 If you choose to deploy your app with the provided GitHubActions workflows you will need to create the following secrets:
 
-- `APP_KEY`: a UUID v4 that identifies your app
+- `APP_ID`: a UUID v4 that identifies your app for deployment
+- `APP_KEY`: a UUID v4 that authorizes your app with the Graasp API
 - `SENTRY_DSN`: your Sentry url to report issues and send telemetry
 
 ## Installation
@@ -61,7 +91,7 @@ Create a `.env.development` file with the following content:
 ```bash
 VITE_PORT=3005
 VITE_API_HOST=localhost
-VITE_MOCK_API=true
+VITE_ENABLE_MOCK_API=true
 VITE_GRAASP_APP_KEY=45678-677889
 VITE_VERSION=latest
 ```
@@ -73,7 +103,7 @@ Create a `.env.test` file with the following content:
 ```bash
 VITE_PORT=3333
 VITE_API_HOST=localhost
-VITE_MOCK_API=true
+VITE_ENABLE_MOCK_API=true
 VITE_GRAASP_APP_KEY=45678-677889
 VITE_VERSION=latest
 

cypress.config.ts

@@ -1,14 +1,21 @@
+import registerCodeCoverage from '@cypress/code-coverage/task';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
   video: false,
 
   e2e: {
-    retries: 1,
+    env: {
+      VITE_API_HOST: process.env.VITE_API_HOST,
+      VITE_ENABLE_MOCK_API: process.env.VITE_ENABLE_MOCK_API,
+      VITE_GRAASP_APP_KEY: process.env.VITE_GRAASP_APP_KEY,
+    },
+    retries: { runMode: 1, openMode: 0 },
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index')(on, config);
+      registerCodeCoverage(on, config);
+      return config;
     },
     baseUrl: `http://localhost:${process.env.VITE_PORT || 4001}`,
   },

cypress/e2e/analytics/main.cy.ts

@@ -0,0 +1,23 @@
+import { Context, PermissionLevel } from '@graasp/sdk';
+
+import { ANALYTICS_VIEW_CY, buildDataCy } from '../../../src/config/selectors';
+
+describe('Analytics View', () => {
+  beforeEach(() => {
+    cy.setUpApi(
+      {},
+      {
+        context: Context.Analytics,
+        permission: PermissionLevel.Admin,
+      },
+    );
+    cy.visit('/');
+  });
+
+  it('App', () => {
+    cy.get(buildDataCy(ANALYTICS_VIEW_CY)).should(
+      'contain.text',
+      'Analytics as admin',
+    );
+  });
+});

cypress/e2e/builder/main.cy.ts

@@ -4,16 +4,20 @@ import { BUILDER_VIEW_CY, buildDataCy } from '../../../src/config/selectors';
 
 describe('Builder View', () => {
   beforeEach(() => {
-    cy.setUpApi({
-      appContext: {
+    cy.setUpApi(
+      {},
+      {
         context: Context.Builder,
-        permission: PermissionLevel.Admin,
+        permission: PermissionLevel.Read,
       },
-    });
+    );
     cy.visit('/');
   });
 
   it('App', () => {
-    cy.get(buildDataCy(BUILDER_VIEW_CY));
+    cy.get(buildDataCy(BUILDER_VIEW_CY)).should(
+      'contain.text',
+      'Builder as read',
+    );
   });
 });