Add JSX support for component examples in admin docs

[davebcn87]

Background

Admin component examples were previously written in HTML format using custom elements (e.g., <s-number-field>). This PR adds support for writing examples in JSX format, which allow us to showcase interaction with the components, and javascript-only attributes. This will also enable us to do type checking on examples in the future.

Solution

Added JSX preview support to the documentation build system:

Build System Changes (build-docs.mjs):

• Added new jsxWrapper() function that generates HTML with Preact runtime, Babel standalone transpiler, and necessary polyfills
• Auto-wraps simple JSX expressions with return statement, while supporting complete function bodies with hooks
• Extended createTemplate() to accept a jsx flag that determines whether to use JSX or HTML wrapper
• Added preview-jsx language type alongside existing preview type
• Updated tab processing logic to handle both HTML and JSX preview formats

Component Example Updates:

• Converted NumberField default example from HTML to JSX format
• Changed file extension from .html to .jsx
• Updated numeric attributes to use JSX syntax (e.g., step={5} instead of step="5")

Demos

Screen.Recording.2025-10-02.at.12.52.54.PM.mov

Screen.Recording.2025-10-02.at.11.57.53.AM.mov

🎩

• JSX examples render correctly in documentation preview
• HTML examples continue to work as before
• NumberField example displays properly with JSX format
• Build process successfully generates documentation with JSX examples

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[github-actions]

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset directory. If the changes are user-facing and should cause a version bump, run yarn changeset to track your changes and include them in the next release CHANGELOG. If you are making simple updates to repo configuration, examples, or documentation, you do not need to add a changeset.

[kyledurand]

Approving to unblock this. The example isn't super broken but we should fix in a follow up.

Avatar: Error handling example

parse-error.ts:95 Uncaught SyntaxError: /Inline Babel script: Unexpected token, expected "," (5:3)

  3 |   initials="CS"
  4 |   alt="Customer support"
> 5 |  />;
    |    ^
  6 | {
  7 |   /* Will display "CS" initials when image fails */