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

.github/workflows/ci.yml

@@ -78,3 +78,40 @@ jobs:
         uses: codecov/codecov-action@1e68e06f1dbfde0e4cefc87efeba9e4643565303 # v5.1.2
         with:
           file: ./coverage.xml
+  javascript-tests:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend-demo
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+      - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
+        with:
+          node-version: "^22"
+          cache: yarn
+          cache-dependency-path: yarn.lock
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Format
+        run: yarn run fmt-check
+
+      - name: Lints
+        run: yarn run lint-check
+
+        # do build before typecheck. See https://github.com/vercel/next.js/issues/53959#issuecomment-1735563224
+      - name: Build
+        run: yarn build
+        env:
+          NODE_ENV: production
+          NEXT_PUBLIC_MITOL_API_BASE_URL: "http://ai.test.local:8003"
+
+      - name: Typecheck
+        run: yarn typecheck
+
+      - name: Tests
+        run: yarn test
+        env:
+          CODECOV: true
+          NODE_ENV: test

.gitignore

@@ -104,6 +104,7 @@ webpack-stats/
 
 # Celery Beat
 celerybeat-schedule
+out
 
 # for testing out NPM packages
 *.tgz
@@ -112,11 +113,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

@@ -20,26 +20,14 @@ repos:
       - id: check-merge-conflict
       - id: check-toml
       - id: debug-statements
-  #- repo: local
-  #   hooks:
-  #     - id: prettier
-  #       name: prettier
-  #       entry: npx prettier --write
-  #       language: node
-  #       types_or:
-  #         [
-  #           javascript,
-  #           jsx,
-  #           ts,
-  #           tsx,
-  #           json,
-  #           scss,
-  #           sass,
-  #           css,
-  #           yaml,
-  #           markdown,
-  #           html,
-  #         ]
+  - repo: local
+    hooks:
+      - id: prettier
+        name: prettier
+        entry: npx prettier --write
+        language: node
+        types_or:
+          [javascript, jsx, ts, tsx, json, scss, sass, css, yaml, markdown]
   - repo: https://github.com/scop/pre-commit-shfmt
     rev: v3.10.0-1
     hooks:
@@ -79,28 +67,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 --config frontend-demo/.eslintrc.js
+        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