## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
Radio group route doesn't have checked/unchecked states via data-state
attribute, only the button and indicator do.
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Related https://github.com/webstudio-is/webstudio/pull/5211
We moved html attributes away from props metas and have very little
actual props left in meta. It is safe to merge with component meta to
simplify access in both builder and CLI.
CLI size increase is not very significant
```diff
- 241.92kB
+ 256.64kB
```
fixes#3988
## Description
This PR adds `PopoverClose` button to `Popover` element. Just exported
and added the component from `@radix-ui/popover`. Which is where all the
rest of the elements are being used.
Existing project on staging -
https://p-33460026-be01-4d80-8f4f-1d6677c38fe0-dot-pop-close.staging.webstudio.is
Deployed project on staging - https://jk-popover-close-1ph18.wstd.work
## Steps for reproduction
- You can go to staging, and create a project with popover.
- Deploy the project and checked the rendered popover
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [x] made a self-review
## Before merging
- [x] tested locally and on preview environment (preview dev login:
0000)
Here dropped legacy descriptions generated with AI. All attributes are
using descriptions scraped from html spec. Though many component
properties redefine these attributes without descriptions. So to
workaround just always fall back to attributes descriptions. Covers most
cases.
Now we use html attribute for all components. Now components like Box
with already set "className" property will be migrated to "class"
attribute. This cuts ~350kB in builder scripts. Total ~1MB after
removing both html and aria attributes.
```diff
- 5036 build/client/assets/
+ 4676 build/client/assets/
```
Attributes and properties now have the following order
- component properties
- tag attributes
- global html attributes
- role
- aria attributes
Here got rid from auto namespacing meta.constraints and
meta.indexWithinAncestor to unlock using components from other sdk
packages.
Now package prefixes should be explicitly specified in meta though with
the help of proxy.
Though exports are still need to prefix automatically when install
package.
Reimplemented generate-stories command in sdk-cli
to not rely on sdk components and load metas
and templates dynamically according to files convention.
All styles use our css parser, no need to additional abstraction any
more. Theme is handwritten and contains only used stuff.
```diff
- 880 MB
+ 859 MB
```
Here avoided using variables and instead made Switch uncontrolled which
should cover most use cases where variables just complicates everything.
Checkbox already works this way.
Both checkbox and switch templates are migrated to jsx.
Here added one more description file for components `*.template.tsx`.
It is decoupled from component meta to fix the issue with some templates
like Sheet being treated as components though we don't have actual
components with this name.
Another reason is have it separately to not include builder specific
code and dependencies into CLI and published websites. Template package
is defined as optional in peer dependencies meta.
In this PR migrated only Button and List as examples. There is still not
support for data sources and styles.
Added support for text placeholders in children
## Description
- [x] left sidebar tab icons
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Here got rid of detachable flag in favor of more universal constraints
queries.
Despite of detachable constraints allow to drag such nodes but limits
drop target more precisely.
Try any radix component.
## Description
Also small fix of collapsible calculations.
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Now we have two more matcher for direct children and descendants.
Eventually they will replace "detachable" flag in meta.
Here used new matchers to prevent user from deleting last tab trigger or
last tab content which cannot be readded from components panel.
Added matchers check to "delete" and "cut"
Here added new constraints format which will allow us build more
expressive lookups and matchers for internal logic and components
constraints.
For now added only ancestor, parent and self matchers with $eq, $neq,
$in, $nin operations.
Closes https://github.com/webstudio-is/webstudio/issues/2193 "$in"
operation works like "or".
We need to remove reliance on instance selector iteration as much as
possible. In most cases we need only instance key which is a
JSON.stringify or instance selector to access computed props and
variables.
Here got rid of instance selector in component hooks and instead made
api to accept "instance data" with instance id, key and component
inside.
Ref https://github.com/webstudio-is/webstudio/issues/3399
Initially css variable fallback was defined in schema as array though
it's actually a single value by spec and may contain commas. We don't
have css variables in data yet so should be safe to change schema before
too late.
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
- always use defaultValue and defaultChecked props when passing to react
- expose value and checked as props, remove default*
- reorder initial props to make more sense (name, value, checked - in
this order)
Affected components:
Forms:
- checkbox
- radio
- input
- select
- textarea
Radix:
- checkbox
- radio group
- select
- switch
## Steps for reproduction
1. test each component named above how bound and unbound value/checked
works
2. use in regular form and bind to url params
3. use in webhook form
## Code Review
- [ ] hi @john, I need you to do
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---------
Co-authored-by: Ivan Starkov <istarkov@gmail.com>
Co-authored-by: Bogdan Chadkin <opensource@trysound.io>
Our parser is good enough to represent any styles with css. Here
converted normalize styles into css and moved into sdk package.
Also fixed (remix) form component name
Here split everything imported from react-sdk by published sites into
separate entry point react-sdk/runtime.
The result in ssg fixture is the following
```diff
- 429788 chunk-CuG10VAj.js
+ 370366 chunk-D4NWbWis.js
```
Closes https://github.com/webstudio-is/webstudio/issues/3788
Here switched from attribute selector to classes when atomic styles are
disabled. This will let us get rid from data-ws-* attributes in
generated html.
Oleg Isonen