Migrate Form components using Formisch and Valibot - #65
Conversation
Add Formisch for SolidJS and its Valibot peer dependency to the web package. I limited this commit to dependency installation; Codex applied the manifest and lockfile changes and ran the web TypeScript check successfully. Assisted-by: Codex:gpt-5.6-sol
Replace manual form parsing with a Valibot schema and Formisch-managed field validation while preserving the existing Relay mutation and response handling. I asked Codex to plan and implement the sign-in migration. Codex added schema validation and accessible field errors, preserved the Relay variable and callback behavior, and verified the result with Oxfmt, Oxlint, the web TypeScript check, and a production web build. Assisted-by: Codex:gpt-5.6-sol
Style error notices in red, success notices in green, and warning notices in orange across light and dark themes. Apply the error treatment to invalid sign-in fields and their inline validation messages. I asked Codex to make login failure, success, and warning states visually distinct. Codex added semantic theme tokens and matching notice, input, focus, and field-error styles, then verified the changes with formatting, linting, TypeScript, and a production web build. Assisted-by: Codex:gpt-5.6-sol
Manage the generated slug with Formisch and Valibot while preserving Relay mutation handling. Keep the submit button inside the form and associate the read-only hint and validation error with the slug field. I chose to migrate the read-only form for consistency with sign-in. Codex reviewed the migration and accessibility feedback, identified the required form and description associations, formatted the file, and verified it with Oxlint and the web TypeScript check. Assisted-by: Codex:gpt-5.6-sol
Match the database slug rules in the Valibot schema by requiring 4 to 63 lowercase letters, digits, or hyphens. Normalize generated Faker slugs to lowercase before validation. I asked Codex to align client-side slug validation with the database constraints. Codex implemented the Valibot rules, found and corrected uppercase Faker output, and verified the change with formatting, linting, TypeScript, a production web build, and 100,000 generated slug samples. Assisted-by: Codex:gpt-5.6-sol
Combine Formisch validation with Kobalte controls and CSS module styling, removing accidentally committed merge markers while preserving Relay mutation feedback. Also apply the repository formatter to the previously resolved instance form. Codex reconciled the conflicting form implementations at the user's request. Oxfmt, the web TypeScript check, and git diff --check passed; the full commit hook remained blocked by unrelated existing GraphQL/model type errors. Assisted-by: Codex:gpt-5.6-sol
|
@codex review |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7d64794419
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| }, | ||
| "dependencies": { | ||
| "@kobalte/core": "^0.13.13", | ||
| "@formisch/solid": "1.0.0", |
There was a problem hiding this comment.
The reviewed commit is authored by Codex, but its message contains neither an Assisted-by: Codex:gpt-5.6-sol trailer nor the required English provenance summary describing the assistance and human verification. Add both disclosures to satisfy the repository's contribution policy.
AGENTS.md reference: AGENTS.md:L19-L27
Useful? React with 👍 / 👎.
| .notice.success { | ||
| background: color-mix(in srgb, var(--success) 12%, var(--surface)); | ||
| border-left: 3px solid var(--success); | ||
| color: var(--success); | ||
| } |
There was a problem hiding this comment.
When sign-in succeeds or either form renders an error, these semantic rules never run: app.tsx imports src/styles/app.css, while the routes obtain their hashed classes from styles/form.module.css, and nothing imports this new src/app.css. As a result, success still uses the module's accent-colored border and errors retain its generic background/text styling; move these rules into form.module.css or otherwise wire them into a stylesheet used by the forms.
Useful? React with 👍 / 👎.
1 participant
Migrated forms with Formisch and Valibot.