start frontend-demo

.gitattributes

@@ -1,4 +1 @@
 yarn.lock merge=binary linguist-generated=true
-frontends/api/src/generated/* merge=binary linguist-generated=true
-# Do not mark as generated; we want to see diffs in PRs
-openapi/specs/* merge=binary

.gitignore

@@ -112,11 +112,10 @@ celerybeat-schedule
 docs/_site
 
 .pnp.*
-frontends/.yarn
-!frontends/.yarn/releases
-
-.yarn/*
+.yarn
 !.yarn/releases
+.next
+next-env.d.ts
 
 # Typescript
 tsconfig.tsbuildinfo

.pre-commit-config.yaml

@@ -79,28 +79,19 @@ repos:
       - id: ruff-format
       - id: ruff
         args: [--extend-ignore=D1, --fix]
-  # - repo: local
-  #   hooks:
-  #     - id: eslint
-  #       name: eslint
-  #       description: "Lint JS/TS files and apply automatic fixes"
-  #       entry: npx eslint --config frontends/.eslintrc.js --fix
-  #       language: node
-  #       types_or: [javascript, jsx, ts, tsx]
-  #       args: []
-  #       exclude: "(node_modules/|.yarn/)"
-  #       require_serial: false
-  #       additional_dependencies:
-  #         - eslint@8
-  #     - id: style-lint
-  #       name: style-lint
-  #       description: "Lint CSS"
-  #       entry: npx stylelint --allow-empty-input --fix
-  #       language: node
-  #       types: [scss, jsx, ts, tsx]
-  #       args: []
-  #       exclude: node_modules/
-  #       require_serial: false
+  - repo: local
+    hooks:
+      - id: eslint
+        name: eslint
+        description: "Lint JS/TS files and apply automatic fixes"
+        entry: npm exec --prefix frontend-demo -- eslint --fix
+        language: node
+        types_or: [javascript, jsx, ts, tsx]
+        args: []
+        exclude: "(node_modules/|.yarn/)"
+        require_serial: false
+        additional_dependencies:
+          - eslint@8
   - repo: https://github.com/shellcheck-py/shellcheck-py
     rev: v0.10.0.1
     hooks:

.prettierrc.json

@@ -1,5 +1,4 @@
 {
   "$schema": "http://json.schemastore.org/prettierrc",
-  "semi": false,
-  "plugins": ["prettier-plugin-django-alpine"]
+  "semi": false
 }

docker-compose.apps.yml

@@ -43,3 +43,16 @@ services:
     volumes:
       - .:/src
       - django_media:/var/media
+
+  watch:
+    working_dir: /src
+    image: node:22.11
+    entrypoint: ["/bin/sh", "-c"]
+    command:
+      - |
+        yarn install
+        yarn start
+    ports:
+      - "8003:8003"
+    volumes:
+      - ./frontend-demo:/src

docker-compose.yml

@@ -25,3 +25,15 @@ services:
       # DEPRECATED: legacy .env file at the repo root
       - path: .env
         required: false
+
+  watch:
+    extends:
+      file: docker-compose.apps.yml
+      service: watch
+    env_file:
+      - path: env/shared.env
+      - path: env/shared.local.env
+        required: false
+      - path: env/frontend.env
+      - path: env/frontend.local.env
+        required: false

env/backend.env

@@ -3,8 +3,8 @@ CELERY_RESULT_BACKEND=redis://redis:6379/4
 CELERY_TASK_ALWAYS_EAGER=False
 
 # local hostname shenanigans
-CORS_ALLOW_ORIGINS='["http://open.odl.local:8062", "http://api.open.odl.local:8063", "http://ai.open.odl.local:8002", "http://ai.open.odl.local:8001"]'
-CSRF_TRUSTED_ORIGINS='["http://open.odl.local:8062", "http://api.open.odl.local:8063", "http://ai.open.odl.local:8002", "http://ai.open.odl.local:8001"]'
+CORS_ALLOW_ORIGINS='["http://ai.open.odl.local:8003","http://open.odl.local:8062", "http://api.open.odl.local:8063", "http://ai.open.odl.local:8002", "http://ai.open.odl.local:8001"]'
+CSRF_TRUSTED_ORIGINS='["http://ai.open.odl.local:8003","http://open.odl.local:8062", "http://api.open.odl.local:8063", "http://ai.open.odl.local:8002", "http://ai.open.odl.local:8001"]'
 CSRF_COOKIE_DOMAIN=open.odl.local
 CSRF_COOKIE_SECURE=False
 MITOL_COOKIE_DOMAIN=open.odl.local

env/frontend.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_MITOL_API_BASE_URL=${MITOL_APP_BASE_URL}
+NEXT_PUBLIC_CSRF_COOKIE_NAME=${CSRF_COOKIE_NAME}

env/shared.env

@@ -0,0 +1 @@
+MITOL_APP_BASE_URL=http://ai.open.odl.local:8002

env/shared.local.example.env

@@ -0,0 +1 @@
+# MITOL_APP_BASE_URL=http://ai.open.odl.local:8002

frontend-demo/.eslintrc.js

@@ -0,0 +1,82 @@
+module.exports = {
+  extends: [
+    "eslint-config-mitodl",
+    "eslint-config-mitodl/jest",
+    "plugin:react/jsx-runtime",
+    "plugin:styled-components-a11y/recommended",
+    "plugin:import/typescript",
+    "plugin:mdx/recommended",
+    "prettier",
+  ],
+  plugins: ["testing-library", "import", "styled-components-a11y"],
+  ignorePatterns: ["**/build/**"],
+  settings: {
+    "jsx-a11y": {
+      components: {
+        Button: "button",
+        ButtonLink: "a",
+        ActionButton: "button",
+        ActionButtonLink: "a",
+      },
+    },
+  },
+  rules: {
+    "@typescript-eslint/no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          /**
+           * No direct imports from large "barrel files". They make Jest slow.
+           *
+           * For more, see:
+           *  - https://github.com/jestjs/jest/issues/11234
+           *  - https://github.com/faker-js/faker/issues/1114#issuecomment-1169532948
+           */
+          {
+            name: "@faker-js/faker",
+            message: "Please use @faker-js/faker/locale/en instead.",
+            allowTypeImports: true,
+          },
+        ],
+      },
+    ],
+    // This rule is disabled in the default a11y config, but unclear why.
+    // It does catch useful errors, e.g., buttons with no text or label.
+    // If it proves to be flaky, we can find other ways to check for this.
+    // We need both rules below. One for normal elements, one for styled
+    "jsx-a11y/control-has-associated-label": ["error"],
+    "styled-components-a11y/control-has-associated-label": ["error"],
+    quotes: ["error", "double", { avoidEscape: true }],
+    "no-restricted-syntax": [
+      "error",
+      /**
+       * See https://eslint.org/docs/latest/rules/no-restricted-syntax
+       *
+       * The selectors use "ES Query", a css-like syntax for AST querying. A
+       * useful tool is  https://estools.github.io/esquery/
+       */
+      {
+        selector:
+          "Property[key.name=fontWeight][value.raw=/\\d+/], TemplateElement[value.raw=/font-weight: \\d+/]",
+        message:
+          "Do not specify `fontWeight` manually. Prefer spreading `theme.typography.subtitle1` or similar. If you MUST use a fontWeight, refer to `fontWeights` theme object.",
+      },
+      {
+        selector:
+          "Property[key.name=fontFamily][value.raw=/Neue Haas/], TemplateElement[value.raw=/Neue Haas/]",
+        message:
+          "Do not specify `fontFamily` manually. Prefer spreading `theme.typography.subtitle1` or similar. If using neue-haas-grotesk-text, this is ThemeProvider's default fontFamily.",
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ["./**/*.test.{ts,tsx}"],
+      plugins: ["testing-library"],
+      extends: ["plugin:testing-library/react"],
+      rules: {
+        "testing-library/no-node-access": "off",
+      },
+    },
+  ],
+};

frontend-demo/.nvmrc

@@ -0,0 +1 @@
+22.11.0