0 Fork 0

mirror of https://github.com/webstudio-is/webstudio.git synced 2026-11-10 06:24:35 +09:00

Files

T

Oleg Isonen 99371187dc docs: Move product documentation into Builder (#5987 )

## Summary

- move the complete GitBook documentation tree and assets into Builder
under `/docs`
- generate the exhaustive MCP page from the local CLI source in the same
change
- publish GitBook from a release-gated `docs` branch containing the
exact successfully released revision
- run MCP documentation tests, typechecking, and stale-output checks
with the existing generated-docs check
- remove links to the Community Discussions repository

## Technical choices

- Import the current documentation as a linear snapshot so the branch
satisfies Builder's required-linear-history protection.
- Keep the Markdown wrapper separate from the TypeScript generator at
`scripts/docs/mcp-page.md`.
- Generate through `packages/cli/local.js` so CLI guidance and its
documentation are reviewed together.
- Let `check:generated-docs` reject CLI changes that leave the committed
MCP page stale.
- After both GitHub release creation and package publication succeed,
fast-forward the read-only `docs` branch to the immutable release tag
commit. A divergent update fails instead of publishing a different
revision.
- Configure GitBook to publish `/docs` from the `docs` branch, not
directly from `main`.
- Exclude `/docs` from the repository-wide `oxfmt` scan so imported
GitBook Markdown retains its established formatting; generator tests and
stale-output checks still validate the MCP page.
- Exclude `transcripts/` and GitHub Discussions from the migration.

## Todo

- [x] Import documentation, navigation, includes, and assets under
`/docs`.
- [x] Generate the MCP page from the local CLI source.
- [x] Move MCP generation and validation into Builder.
- [x] Require MCP documentation updates alongside CLI changes.
- [x] Publish released revisions through a read-only `docs` branch.
- [x] Remove Community repository links from Builder and the migrated
docs.
- [x] Preserve and verify a final Community Git bundle locally.
- [ ] Merge this pull request.
- [ ] Let the next successful release create or advance the `docs`
branch.
- [ ] Repoint GitBook Git Sync to `webstudio-is/webstudio`, branch
`docs`, root directory `/docs`.
- [ ] Verify `docs.webstudio.is`, navigation, assets, anchors, and the
MCP page in production.
- [ ] Delete `webstudio-is/webstudio-community`.

## Verification

- `pnpm check:generated-docs`
- `pnpm lint`
- `pnpm oxfmt --check`
- `git diff --check origin/main...HEAD`
- generator regression test demonstrated failing when the GitBook
wrapper behavior was removed, then passing after restoration
- no fixture inputs or outputs are affected

## Known limitation

All documentation merged after the previous release waits for the next
successful release before GitBook publishes it. This deliberately keeps
the public MCP reference aligned with an installable CLI revision.

Ref #5986

2026-08-03 17:55:50 +02:00

2.2 KiB

Raw Permalink Blame History

description

description
Add toggle switches with Radix UI in Webstudio.

Switch

Based on Radix Switch

The Switch component is a toggle control that allows users to turn an option on or off. It's similar to a checkbox but provides a more visual representation of the binary state.

When to Use

Use Switch for:

Settings that take effect immediately
Enabling/disabling features
Dark mode toggles
Notification preferences
Any on/off binary choice

Structure

The Switch component consists of:

Component	Description
Switch	The track/background element
Switch Thumb	The circular indicator that moves

How to Use

Drag a Switch component from Components > Radix onto your canvas
The component comes with the track and thumb pre-configured
Style the track for both checked and unchecked states
Style the thumb position and appearance
Connect to form or add interactions as needed

Properties

Some commonly used properties (see the Settings panel for all available options):

Property	Description
id	Unique identifier, useful for connecting to labels
name	Form field name for submission
value	The value submitted with forms when checked
checked	Whether the switch is on
required	Whether toggling on is required

Styling States

Some common states (you can also create custom states):

Checked ([data-state=checked]) - Switch is on
Unchecked ([data-state=unchecked]) - Switch is off
Disabled (:disabled) - Switch cannot be interacted with
Focus (:focus-visible) - Switch has keyboard focus

Radio Group – Selection from multiple options
Select – Dropdown selection component
Label – Accessible labels for form controls
Form – Container for form elements and submission handling

2.2 KiB Raw Permalink Blame History Unescape Escape