feat: modernize monaco react

.cursor/rules/general.mdc

@@ -0,0 +1,43 @@
+---
+description: General Coding Rules
+globs:
+alwaysApply: true
+---
+
+## Project Information
+
+- Name: `@willbooster/monaco-react`
+- Description: Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins
+- Package Manager: yarn
+
+## General Instructions
+
+- Create a new branch if the current branch is `main`.
+- Run any `git` commands sequentially.
+- Write tests ONLY if explicitly requested. If requested, follow these rules:
+  - Continue modifying the tests and code until all tests pass.
+  - Ensure tests reset any related persistent data, as our test infrastructure does not clear it automatically.
+  - Prefer actual API calls over mocks. Use mocks when actual calls are impractical, have unintended side effects, or are explicitly requested.
+- When fixing issues, follow these rules:
+  - Investigate the root cause first (e.g., by gathering debug logs, taking screenshots, etc.).
+  - Fix the actual root cause instead of applying workarounds.
+- After making code changes, run `yarn check-all-for-ai` to execute all tests (takes up to 1 hour), or `yarn check-for-ai` for only type checking and linting (takes up to 10 minutes).
+  - If you are confident that your changes will not break any tests, you may use `check-for-ai`.
+  - Use `oxlint` ignore comments with reasons (e.g., `// oxlint-disable-next-line <rule> -- <reason>`) if lint errors or warnings cannot be fixed.
+- Once you have verified your changes, commit and push them to the current (non-main) branch, then create a PR via `gh`.
+  - Follow the conventional commits; your commit message should start with `feat:`, `fix:`, etc.
+  - If not specified, make sure to add a new line at the end of your commit message with: `Co-authored-by: WillBooster (Cursor) <agent@willbooster.com>`.
+  - Always create new commits. Avoid using `--amend`.
+
+## Coding Style
+
+- Use camelCase for JavaScript and TypeScript files (or PascalCase for React components).
+- Simplify code as much as possible to eliminate redundancy.
+- Design each module with high cohesion, grouping related functionality together.
+  - Refactor existing large modules into smaller, focused modules when necessary.
+  - Create well-organized directory structures with low coupling and high cohesion.
+- Place calling functions in the file above the functions they call to maintain a clear top-down order.
+  - e.g. `function caller() { callee(); } function callee() { ... }`
+- Write comments that explain "why" rather than "what". Avoid stating what can be understood from the code itself.
+- Prefer `undefined` over `null` unless explicitly required by APIs or libraries.
+- Prefer using a single template literal for prompts instead of `join()` with an array of strings.

.editorconfig

@@ -0,0 +1,22 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{cjs,cpp,cts,dart,htm,html,js,json,json5,jsonc,jsx,mjs,mts,pu,puml,rb,sh,ts,tsx,vue,xml,yaml,yml}]
+indent_size = 2
+indent_style = space
+
+[*.{go,gradle,java,py}]
+indent_size = 4
+indent_style = space
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
+
+[{Makefile,*.mk}]
+indent_style = tab

.gemini/config.yml

@@ -0,0 +1,11 @@
+have_fun: true
+code_review:
+  disable: false
+  comment_severity_threshold: MEDIUM
+  max_review_comments: -1
+  pull_request_opened:
+    help: false
+    summary: true
+    code_review: true
+ignore_patterns:
+  - '**/__generated__'

.gemini/styleguide.md

@@ -0,0 +1,14 @@
+Review in English based on the following coding standards.
+
+## Coding Style
+
+- Use camelCase for JavaScript and TypeScript files (or PascalCase for React components).
+- Simplify code as much as possible to eliminate redundancy.
+- Design each module with high cohesion, grouping related functionality together.
+  - Refactor existing large modules into smaller, focused modules when necessary.
+  - Create well-organized directory structures with low coupling and high cohesion.
+- Place calling functions in the file above the functions they call to maintain a clear top-down order.
+  - e.g. `function caller() { callee(); } function callee() { ... }`
+- Write comments that explain "why" rather than "what". Avoid stating what can be understood from the code itself.
+- Prefer `undefined` over `null` unless explicitly required by APIs or libraries.
+- Prefer using a single template literal for prompts instead of `join()` with an array of strings.

.gitattributes

@@ -0,0 +1,35 @@
+* text=auto
+
+*.lockb binary diff=lockb
+*.vcproj text eol=crlf
+
+*.cjs text eol=lf
+*.cpp text eol=lf
+*.cts text eol=lf
+*.dart text eol=lf
+*.htm text eol=lf
+*.html text eol=lf
+*.js text eol=lf
+*.json text eol=lf
+*.json5 text eol=lf
+*.jsonc text eol=lf
+*.jsx text eol=lf
+*.mjs text eol=lf
+*.mts text eol=lf
+*.pu text eol=lf
+*.puml text eol=lf
+*.rb text eol=lf
+*.sh text eol=lf
+*.ts text eol=lf
+*.tsx text eol=lf
+*.vue text eol=lf
+*.xml text eol=lf
+*.yaml text eol=lf
+*.yml text eol=lf
+*.go text eol=lf
+*.gradle text eol=lf
+*.java text eol=lf
+*.py text eol=lf
+*.md text eol=lf
+
+dist/** linguist-generated=true

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
@@ -13,6 +12,7 @@ A clear and concise description of what the bug is.
 **To Reproduce**
 
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -27,9 +27,10 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help to explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/dependabot.yml

@@ -1,17 +1,13 @@
 version: 2
 updates:
-  - package-ecosystem: "npm"  # Change this for other languages (e.g., pip, cargo, etc.)
-    directory: "/"  # Location of the package file (e.g., package.json)
+  - package-ecosystem: 'npm' # Change this for other languages (e.g., pip, cargo, etc.)
+    directory: '/' # Location of the package file (e.g., package.json)
     schedule:
-      interval: "weekly"  # Options: daily, weekly, monthly
+      interval: 'weekly' # Options: daily, weekly, monthly
     open-pull-requests-limit: 10
     commit-message:
-      prefix: "deps"
-      include: "scope"
+      prefix: 'deps'
+      include: 'scope'
     labels:
-      - "dependencies"
-      - "bot"
-    assignees:
-      - "suren-atoyan"  # Assigns PRs to you or your team
-    reviewers:
-      - "suren-atoyan"  # Requests review from you
+      - 'dependencies'
+      - 'bot'

.github/pull_request_template.md

@@ -0,0 +1,41 @@
+Close #<IssueNumber>
+
+## Self Check
+
+- [ ] I've confirmed `All checks have passed` on this page.
+  - PR title follows [Angular's commit message format](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#-commit-message-format).
+  - PR title doesn't have `WIP:`.
+  - The test command (e.g., `yarn test`) passed.
+  - The lint command (e.g., `yarn lint`) passed.
+  - You may leave this box unchecked due to long workflows.
+- [ ] I've reviewed my changes on the GitHub diff view.
+- [ ] I've written the steps to test my changes.
+- [ ] I've added screenshots (if the UI changed).
+  - You may leave this box unchecked if you didn't modify the UI.
+
+<!-- Please add screenshots if you modify the UI.
+| Current                  | In coming                |
+| ------------------------ | ------------------------ |
+| <img src="" width="400"> | <img src="" width="400"> |
+-->
+
+<!-- Please add steps to test your changes.
+## Steps to Test
+
+1. Open http://localhost-exercode.willbooster.net:3000/ja-JP/courses/_example/lessons/_example_a_plus_b/problems/_example_a_plus_b after login.
+2. Select the language `C`.
+3. Write the following code:
+   ```c
+   #include <stdio.h>
+
+   int main(void) {
+     int a, b;
+
+     scanf("%d %d", &a, &b);
+     printf("%d", a + b);
+     return 0;
+   }
+   ```
+4. Push `Submit` button.
+5. ...
+-->

.github/workflows/autofix.yml

@@ -0,0 +1,24 @@
+name: autofix.ci
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+permissions:
+  contents: read
+concurrency:
+  group: autofix-${{ github.head_ref }}
+  cancel-in-progress: true
+jobs:
+  autofix:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          check-latest: true
+          node-version: lts/*
+      - run: yarn install
+      - run: yarn run cleanup
+      - run: yarn run build
+      - uses: autofix-ci/action@v1

.github/workflows/close-comment.yml

@@ -0,0 +1,8 @@
+name: Add close comment
+on:
+  pull_request:
+    types:
+      - opened
+jobs:
+  close-comment:
+    uses: WillBooster/reusable-workflows/.github/workflows/close-comment.yml@main

.github/workflows/gen-pr-claude.yml

@@ -0,0 +1,19 @@
+name: Generate PR with Claude Code
+on:
+  issues:
+    types:
+      - labeled
+  pull_request:
+    types:
+      - labeled
+jobs:
+  gen-pr:
+    if: contains(github.event.label.name, 'gen-pr-all') || contains(github.event.label.name, 'gen-pr-claude')
+    uses: WillBooster/reusable-workflows/.github/workflows/gen-pr.yml@main
+    with:
+      coding-tool: claude-code
+      issue-number: ${{ github.event.issue.number || github.event.number }}
+      test-command: yarn check-all-for-ai
+    secrets:
+      CLAUDE_CODE_OAUTH_TOKEN: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/gen-pr-codex.yml

@@ -0,0 +1,19 @@
+name: Generate PR with Codex CLI
+on:
+  issues:
+    types:
+      - labeled
+  pull_request:
+    types:
+      - labeled
+jobs:
+  gen-pr:
+    if: contains(github.event.label.name, 'gen-pr-all') || contains(github.event.label.name, 'gen-pr-codex')
+    uses: WillBooster/reusable-workflows/.github/workflows/gen-pr.yml@main
+    with:
+      coding-tool: codex-cli
+      issue-number: ${{ github.event.issue.number || github.event.number }}
+      test-command: yarn check-all-for-ai
+    secrets:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}

.github/workflows/gen-pr-gemini.yml

@@ -0,0 +1,19 @@
+name: Generate PR with Gemini CLI
+on:
+  issues:
+    types:
+      - labeled
+  pull_request:
+    types:
+      - labeled
+jobs:
+  gen-pr:
+    if: contains(github.event.label.name, 'gen-pr-all') || contains(github.event.label.name, 'gen-pr-gemini')
+    uses: WillBooster/reusable-workflows/.github/workflows/gen-pr.yml@main
+    with:
+      coding-tool: gemini-cli
+      issue-number: ${{ github.event.issue.number || github.event.number }}
+      test-command: yarn check-all-for-ai
+    secrets:
+      GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/semantic-pr.yml

@@ -0,0 +1,10 @@
+name: Lint PR title
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+jobs:
+  semantic-pr:
+    uses: WillBooster/reusable-workflows/.github/workflows/semantic-pr.yml@main

.github/workflows/test.yml

@@ -0,0 +1,19 @@
+name: Test
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - wbfy
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+permissions:
+  contents: write
+jobs:
+  test:
+    uses: WillBooster/reusable-workflows/.github/workflows/test.yml@main
+    with:
+      github_hosted_runner: true
+    secrets:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}