Implement frontend app && scenario test

.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: ci
+
+on:
+  push:
+
+jobs:
+  build1:
+    runs-on: ubuntu-latest
+    timeout-minutes: 3
+    env:
+      CI: 1
+      RAILS_ENV: test
+    services:
+      postgres:
+        image: postgres:16.4-alpine
+        ports:
+          - 5432:5432
+        options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
+        env:
+          POSTGRES_PASSWORD: password
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true
+          working-directory: ./backend
+      - run: bin/rubocop -f github
+        working-directory: ./backend
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - run: bun install
+        working-directory: ./frontend
+      - run: |
+          bun run graphql-codegen
+          bun run build:move
+        shell: bash
+        working-directory: ./frontend
+      - run: bundle exec rails db:prepare
+        working-directory: ./backend
+      - run: bundle exec rspec
+        working-directory: ./backend
+      - name: Archive rspec result screenshots
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: rspec result screenshots
+          path: ./backend/tmp/capybara/

backend/spec/system/scenarios/login_flow_spec.rb

@@ -0,0 +1,25 @@
+require 'rails_helper'
+
+RSpec.describe "login flow", type: :system do
+  before do
+    driven_by(:headless_chrome)
+  end
+  let!(:user) { create(:user) }
+
+  it 'me -> login -> me -> logout -> me -> login' do
+    visit '/me'
+    expect(page).not_to have_content("hello, It's me!")
+
+    fill_in "email", with: user.email_address
+    fill_in "password", with: user.password
+    click_button "Login"
+
+    expect(page).to have_content("hello, It's me!")
+    expect(page).to have_content(user.email_address)
+    accept_alert do
+      click_button "Logout"
+    end
+    expect(page).to have_content("Login")
+    expect(current_path).to eq("/login")
+  end
+end

backend/spec/system/scenarios/sign_up_flow_spec.rb

@@ -0,0 +1,45 @@
+require 'rails_helper'
+
+RSpec.describe "sign up flow", type: :system do
+  include ActiveJob::TestHelper
+
+  before do
+    driven_by(:headless_chrome)
+  end
+  let!(:email) { "#{SecureRandom.uuid}@example.net" }
+
+  it 'signup -> mail verification -> set password' do
+    visit '/login'
+
+    expect(page).to have_content('Login')
+    click_link 'Create an account'
+
+    expect(page).to have_content('Signup')
+    fill_in "email", with: email
+    expect(ActionMailer::Base.deliveries).to be_empty
+    click_button "Sign up"
+    expect(page).to have_content('Inviting')
+
+    perform_enqueued_jobs(only: ActionMailer::MailDeliveryJob)
+    mail_message = ActionMailer::Base.deliveries.sole
+    url = URI.parse(extract_a_href_from_message(mail_message:))
+    visit url.request_uri
+
+    expect(page).to have_content('Email verification successful!')
+    expect(page).not_to have_content('Email verification successful!')
+    expect(page).to have_content('New Password')
+    expect(page).to have_content('Confirm Password')
+    password = SecureRandom.alphanumeric
+    fill_in "password", with: password
+    fill_in "confirmPassword", with: password
+    click_button "Set Password"
+    expect(page).to have_content("hello, It's me!")
+    expect(page).to have_content(email)
+  end
+
+  private def extract_a_href_from_message(mail_message:)
+    doc = Nokogiri::HTML(mail_message.body.raw_source)
+    a_tags = doc.css('a')
+    a_tags.sole.attribute_nodes.select { _1.name == "href" }.sole.value
+  end
+end

frontend/.gitignore

@@ -25,4 +25,6 @@ dist-ssr
 
 ## Panda
 styled-system
-styled-system-studio
+styled-system-studio
+
+src/generated

frontend/README.md

@@ -1,50 +1,8 @@
 # React + TypeScript + Vite
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This template provides a minimal setup to get React working in Vite with HMR.
 
 Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```

frontend/biome.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": ["styled-system/*", "src/**/generated/**"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded"
+    }
+  }
+}

frontend/codegen.yml

@@ -0,0 +1,15 @@
+overwrite: true
+schema: "../graphql-schema/backend_schema.graphql"
+documents: 'src/components/**/*.graphql'
+generates:
+  src/generated/graphql.ts:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'
+      - 'typescript-validation-schema'
+    config:
+      schema: zod
+      scalars:
+        ISO8601DateTime: 'string'
+      strictScalars: true