## Description
Closes https://github.com/webstudio-is/webstudio-builder/issues/1377
## Steps for reproduction
1. add Text
2. change tag prop to figcaption
## Code Review
- [ ] hi @TrySound , 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-builder/issues/1129
Here added sdk-components-react-remix with all remix components moved
away from react-sdk.
Exposed 3 entry points
- @webstudio-is/sdk-components-react-remix
- @webstudio-is/sdk-components-react-remix/metas
- @webstudio-is/sdk-components-react-remix/props
## Description
We want to be able to specify the order in which components are shown in
the panel.
Right now the order property is not set where needed, because I am
waiting for feedback from @taylornowotny
## Steps for reproduction
1. Open add components panel
2. See components are in the right order
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
- [ ] hi @taylornowotny , I need you to do
- give some thought to both components that need to be first which we
set specific order to (the rest will go as is)
- recheck the categories, I feel like our split into categories is not
intentional
## 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-builder/issues/1545
All complex use cases already switched to get meta from arguments and
from atom.
Here migrated the last cases and dropped legacy meta register in
react-sdk package. Now we ready to split components into separate
packages.
Cleanup after refactoring. Now we can get rid of Asset.location because
asset location is defined by environment. And remove fields moved to
File table.
Here added two component restrictions to meta.
requiredAncestors prevent inserting components outside of required ones
here restricted ListItem to always be inside of List.
invalidAncestors prevent inserting components inside of invalid ones
here prevented nested buttons
Ref https://github.com/webstudio-is/webstudio-builder/issues/1129
Here refactored registered components away from global state in
react-sdk package in favour of components map.
The map can be easily computed in runtime or generated for worker.
Default and custom (remix) components registering is unified now and
both libraries can be split into separate packages.
Temporary added "@webstudio/react-sdk/components" entry point to get a
record of components.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1569
Here we change template in meta to include current component instead of
implicitly creating it.
This way we can provide insert composition of components instead of
single one for example input+label. Or even wrap current component like
label>input.
Another usecase is ability to set local styles and props for current
component.
Note: review with hidden whitespaces
## Description
How it looks. (Not everything aligned or have features like in design)
https://github.com/webstudio-is/webstudio-builder/assets/5077042/349c7fae-afd8-478d-9eba-701b002f0fd4
Most API methods return `{ success: true } | {success: false, error:
string}` because in the future they need to be moved into server
workflows, and do not exist or return anything.
## Steps for reproduction
Run locally, at localhost I've created a fake domain creation API, to be
able to test UI.
## 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-builder/issues/1667
- renamed code to code text
- renamed html to html embed
- added new icon for code text
## 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
## Description
Makes AllComponent type better
Found null bug.
Enforced for all components
```
[componentAttribute]: instance.component,
[idAttribute]: instance.id,
```
to be non-optional.
cc @TrySound should fix your issue with Html component
## 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-builder/issues/1179
Here added image proxy - simple remix route to interop image requests
locally and in preview. We have now only single image loader which
accepts image base url.
Here support only local deployment. Preview and saas preview to
RESIZE_ORiGIN env.
Closes#84
## Description
1. Fixed a bug in form template (`email=email` instead of `name=email`)
2. Changed labels of components
3. Moved Button back to Forms category
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- [ ] hi @istarkov, I need you to do
- conceptual review (architecture, feature-correctness)
## 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Part of #84
Should be deployed together with
https://github.com/webstudio-is/webstudio-saas/pull/148
## Description
1. Exposed `User.email` in the data we send to saas
2. Used Remix's form in the Form component
3. Refactoring in `form-handlers`
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- [ ] hi @istarkov, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
## 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
:active and :visited states on links have special behaviour. They are
vendor defined until color on stateless link is defined. Similar to how
vars work there is var with default. And when var is somewhere defined
default is overriden.
Though using vars for this specific case is too complex here easier
solution. We can just remove active and visited states on default
styles. User may never see this inconsistency as usually would modify
color on stateless link first and then go to active or visited states.
## Description
Updated all icons in this list
https://github.com/webstudio-is/webstudio-builder/issues/1362
## Code Review
- [ ] hi @rpominov, I need you to do
- conceptual review (architecture, feature-correctness)
## 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
https://github.com/webstudio-is/webstudio-builder/issues/84#issuecomment-1522834976
## Description
1. Added new components:
- textarea
- radio-button and radio-button-field
- checkbox and checkbox-field
- success-message
- error-message
2. Added `states` like `:disabled`, `:valid`, etc. to `input`
3. Added `custom-components/form` that renders success-message and
error-message conditionally
4. Added `success` and `error` style states to `custom-components/form`
5. Style panel now shows "Select an instance on the canvas" if the
selected component is not rendered on canvas (e.g. error-message may not
be rendered)
Not in this PR:
- The mailer package
- Backend handler for forms (will be in a PR in SAAS)
- Logic in Form that actually submits to backend and shows success/error
messages
## Steps for reproduction
1. Add a "Form" to canvas
2. Add "Checkbox Field", "Radio Button Field", "Text Area" to the form
3. Try changing `initialState` property of the form
Added `allowedParentComponents: string[]` option to meta which prevents
dropping, inserting or pasting components into wrong parents. For
example ListItem now can be placed only inside of List component.
This will unlock better experience with compound radix components.
Now embed templates can define simplified version of our styles which is
useful for radix components and as AI output.
```
styles: [
{
property: 'backgroundColor',
value: { type: 'keyword', value: 'red' }
}
]
```
This fixes the bug introduced in my previous PRs and reproducable only
by running dts generation. Here added it to checks so we could avoid
broken publishes while releasing.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1067
We need to move away from getComputedStyle for not local styles in style
panel.
Here added default html style from browser sources. Now we can render it
and properties initial styles instead of computed styles.
Also fixed in properties data generation currentcolor -> currentColor
and removed same from border presets.
Before preset styles used `{ tag: { property: value } }` format. Now we
are switching to `{ tag: [{ state,property,value }] }` to support
specifying states in preset styles.
Same format will be used for embed template styles.
Here switched only format. States in preset styles not supported in
builder yet.
Ref https://github.com/webstudio-is/webstudio-builder/pull/1516
Here added new utility "tree template" to describe children in component
meta and generate instances from it while inserting.
Added simple template to form component as example.
## Description
This is using NavLink instead of Link by default to allow styling
Current Page state so we can use it for navigations.
## Steps for reproduction
Can't be tested because works only on a published site and we need to
fix publishing on staging and locally
## Code Review
- [ ] hi @istarkov , 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Context:
https://discord.com/channels/955905230107738152/1098457250235957258
Fix of the bug: on a published site, when you point a link to Page=Home,
the rendered `href` contains path of the current page.
This is most likely due to `homePage.path === ""` and when we pass
`to=""` to RemixLink it behaves like this.
So I made sure we pass `to="/"` for the home page.
We should not have any server specific functions in react-sdk. Any small
change can break client environment.
And moving to /server entry point still problematic because this entry
point is node specific while we want to support as many environments as
possible.
Recently remix added defaults for different environments so user do not
need to add any entry.client.tsx or entry.server.ts at all.
Defaults do not work for us in builder though doing great in size test
setup.
Ref https://github.com/webstudio-is/webstudio-builder/issues/807
Here added ability to extend states in style source menu list with a
list defined in component meta.
As an example added `[aria-current=page]` support to links. For now can
be statically set with props panel.
Note: review with hidden whitespaces
## Description
1. Made `href` always present (# is used when not set, similar to
Webflow). Fixes#1380
2. Added "Section" option in URL Control. Closes#993
3. Added "ID" prop that is visible in all components. Closes#991
4. Closes#1475
## Steps for reproduction
1. Add ID prop to an instance
2. Add a link that references that instance by ID
## Description
Made handshake between canvas and builder.
Now publish actions are delayed in local array until handshake message
from destination is received
Switched on hydrateRoot to enable concurrent mode
unstable_batchedUpdates are removed
## Steps for reproduction
## 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
1. Added an option to enter raw URL in the File control, and made sure
it looks like in Figma. Closes#1011
2. Added "Attachment" option in the URL control. Ref. #993
## Steps for reproduction
1. Try to set a Link's href to an asset
4. Try to set a Image's source to a raw URL
InstancesItem is newer type introduced separately for gradual migration.
Not all legacy tree Instance is migrated away so we can finally use
better naming across whole system.
This is computed field which is after moving logic to loaders equal to
asset.name so not really useful except for preview images.
Here object url for preview images is moved to container so there is no
need in asset.path here too.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1179
Migrated away from env parsing in asset loader by moving cdn resolving
logic to image loader. Now ASSET_CDN_URL should be provided.
In builder there is fallback to s3 bucket.endpoint.
Bogdan Chadkin