feat: sandboxes

[colorpulse6]

User description

Pull Request

Description

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📚 Documentation update
• 🔧 Refactor (no functional changes)
• 🎨 Style/formatting changes
• ⚡ Performance improvement
• 🧪 Test improvements

Related Issues

Fixes #(issue number)

Changes Made

Testing

• All existing tests pass
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

Test Instructions

Breaking Changes

• This PR introduces breaking changes
• Migration guide added to documentation

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• I have added a changeset (if this should trigger a release)

Screenshots (if applicable)

Additional Notes

---

PR Type

Enhancement, Documentation

---

Description

• Add interactive sandbox component for live code examples

• Integrate Sandpack for embedded code editor and preview

• Create quickstart example with useForm hook demonstration

• Update documentation with sandbox navigation and links

---

Diagram Walkthrough

flowchart LR
  A["Documentation Files"] -->|"Add sandbox page"| B["interactive-sandbox.md"]
  C["Component Library"] -->|"Create new component"| D["InteractiveSandbox.tsx"]
  E["Dependencies"] -->|"Add Sandpack packages"| F["package.json"]
  D -->|"Uses"| G["Sandpack React"]
  B -->|"Imports"| D
  B -->|"Uses"| H["quickStartBasicFiles"]
  I["Sidebar Config"] -->|"Register new page"| J["sidebars.ts"]
  K["Navbar Config"] -->|"Add API Reference menu"| L["docusaurus.config.ts"]

Loading

File Walkthrough

	Relevant files
Enhancement	4 files InteractiveSandbox.tsx New interactive sandbox component with Sandpack integration +183/-0  quickStartBasic.ts Sandbox files for useForm quick start example                        +192/-0  index.ts Export new InteractiveSandbox component                                    +1/-0      DocComponents.tsx Export new InteractiveSandbox component                                    +1/-0
Documentation	4 files interactive-sandbox.md New documentation page for interactive sandboxes                  +54/-0    sidebars.ts Register interactive-sandbox page in sidebar                          +1/-0      docusaurus.config.ts Add API Reference dropdown menu to navbar                                +20/-0    use-form.md Add link to interactive sandbox example                                    +2/-0
Formatting	1 files quick-start.md Minor formatting and whitespace updates                                    +2/-1
Dependencies	2 files package.json Add Sandpack and theme-common dependencies                              +3/-0      pnpm-lock.yaml Update lock file with new dependencies                                      +360/-39

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Unvalidated external links Description: The externalLinks renderer passes href directly into an tag without URL/protocol validation, so if externalLinks can be influenced by untrusted input it could enable javascript:/data: URL injection or phishing/open-redirect style issues via crafted links. InteractiveSandbox.tsx [124-137] Referred Code {externalLinks && externalLinks.length > 0 && ( <div className="flex flex-wrap items-center gap-2"> {externalLinks.map(({ label, href }) => ( <a key={label + href} href={href} target="_blank" rel="noreferrer noopener" className="text-xs font-medium text-blue-600 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors border border-blue-200 dark:border-blue-700 rounded-md px-2 py-1" > {label} </a> ))} </div>
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
🔴	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Logs user input: The sandbox example logs full form submission data via console.log, which can include PII (e.g., email and message) and violates secure logging practices. Referred Code onSubmit={handleSubmit((data) => { console.log("Form data", data); alert("Thanks for reaching out, " + (data.email || "friend") + "!"); })} Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Missing error handling: The sandbox submit handler assumes all operations succeed and does not handle or surface failures (e.g., exceptions from handleSubmit callback or runtime issues), which may be acceptable for a docs-only demo but is not verifiable from the diff alone. Referred Code <form className="card" onSubmit={handleSubmit((data) => { console.log("Form data", data); alert("Thanks for reaching out, " + (data.email || "friend") + "!"); })} > Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: No input validation: The sandbox captures email and message user input and uses it directly (e.g., in alert) without visible validation or sanitization, which may be acceptable for a docs-only sandbox but cannot be justified from the diff alone. Referred Code const { register, handleSubmit } = useForm({ defaultValues: { email: "", message: "" }, }); return ( <div className="app-shell"> <h1 className="app-title">useForm Quick Start</h1> <form className="card" onSubmit={handleSubmit((data) => { console.log("Form data", data); alert("Thanks for reaching out, " + (data.email || "friend") + "!"); })} Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Dynamically set the library version The InteractiveSandbox component hardcodes the version for el-form-react-hooks. This should be updated to dynamically source the version from package.json to ensure the examples stay current with the library's evolution. Examples: docs/src/components/InteractiveSandbox.tsx [20-29] const DEFAULT_DEPENDENCIES: Record<string, string> = { react: "18.2.0", "react-dom": "18.2.0", "el-form-react-hooks": "3.10.0", "@types/react": "18.2.45", "@types/react-dom": "18.2.18", typescript: "5.4.5", vite: "5.0.8", "@vitejs/plugin-react": "4.2.1", }; Solution Walkthrough: Before: // docs/src/components/InteractiveSandbox.tsx const DEFAULT_DEPENDENCIES: Record<string, string> = { react: "18.2.0", "react-dom": "18.2.0", "el-form-react-hooks": "3.10.0", // Hardcoded version // ... other dependencies }; export const InteractiveSandbox: React.FC<InteractiveSandboxProps> = ({ files, ... }) => { // ... const providerSetup = { dependencies: { ...DEFAULT_DEPENDENCIES, ...dependencies }, // ... }; // ... } After: // In build configuration (e.g., docusaurus.config.ts) // The library version is read from package.json and injected as an // environment variable, e.g., `process.env.PACKAGE_VERSION`. // docs/src/components/InteractiveSandbox.tsx const libraryVersion = process.env.PACKAGE_VERSION; const DEFAULT_DEPENDENCIES: Record<string, string> = { react: "18.2.0", "react-dom": "18.2.0", "el-form-react-hooks": libraryVersion, // Dynamically sourced version // ... other dependencies }; export const InteractiveSandbox: React.FC<InteractiveSandboxProps> = ({ files, ... }) => { // ... } Suggestion importance[1-10]: 7 __ Why: This is a valid and important suggestion that improves the long-term maintainability and accuracy of the documentation by preventing the interactive sandbox from becoming outdated.	Medium
Possible issue	Prioritize dedicated prop over options object Reverse the order of activeFile and options?.activeFile in the nullish coalescing chain to ensure the dedicated activeFile prop has higher precedence. docs/src/components/InteractiveSandbox.tsx [98-106] const mergedOptions = { recompileMode: "delayed" as const, recompileDelay: 500, autorun: true, ...(options ?? {}), initMode: resolvedInitMode, - activeFile: options?.activeFile ?? activeFile ?? "/src/App.tsx", + activeFile: activeFile ?? options?.activeFile ?? "/src/App.tsx", visibleFiles: options?.visibleFiles ?? defaultVisibleFiles, } satisfies SandpackProviderProps["options"]; [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 6 __ Why: This is a valid suggestion that improves the component's API design by correctly prioritizing the specific activeFile prop over the general options object, making the component's behavior more intuitive.	Low
General	Simplify link key In the externalLinks map, change the React key from label + href to just href for simplicity and guaranteed uniqueness. docs/src/components/InteractiveSandbox.tsx [126-129] {externalLinks.map(({ label, href }) => ( <a - key={label + href} + key={href} href={href} Apply / Chat Suggestion importance[1-10]: 4 __ Why: The suggestion correctly points out that using href as the key is sufficient and cleaner than label + href, improving code readability and adhering to best practices for React keys.	Low
Update