## 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-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
Here added support for namespacing external libraries. Need this for
radix components to not prefix manually and have isolation in names in
case a few client libs are added an have collission in names or we add
native components with same names.
## Description
Initial dialog implementation
Additionally:
`backdropFilter` property added to support dialog backdrop css
<img width="250" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/4f0e5b88-2b3b-42e6-bfd9-34dd36dc08f3">
Not detachables are Overlay, Trigger and Content
Header, Close can be removed
Next PRS:
- [ ] - Move to radix components repo
- [ ] - Add Right Icons
## Steps for reproduction
Create new project, add Radix/Dialog component
## 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
getBrowserStyle is used only inside of builder and should not be part of
sdk importable by all component libraries. It also depends on global
types which need to be included in every package dependent on react-sdk.
## Description
Seems like newer props released by mdn
I did nothing just executed build:args
## 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
## Description
- [x] - clicks not working
## 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
Here added meta.detachable flag which allows when set to true disable
copying, dragging and deleting instances of this component without ts
parent instance.
This is necessary to constrain components based on external code and
prevent deleting hidden components user cannot add again.
Esbuild is not officially supported by jest
and all available packages do not fit all our need.
esbuild-jest we used for a long time have problems too.
The most important one is frigile heuristik to instrument any code with
`ock(` in text. And we have some `pointerLock(` in design-system.
The other problem is instrumentation converts to commonjs and result
goes to esbuild which tries to convert back to esm but with only default
export. So jest fails anywhere we try to import design-system in tests.
The other problem is lack of maintanance and very old packages inside.
Here refactored original package and removed everything we don't need
including mocks instrumentation.
This should fix the build in
https://github.com/webstudio-is/webstudio-builder/pull/1986
```diff
Packages:
- 1924
+ 1782
```
## Description
Local styles from
https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/tooltip.tsx
## Steps for reproduction
Add NEW tooltip, see styles
## 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
Closes https://github.com/webstudio-is/webstudio-builder/issues/1850
## Description
Just a new icon
## Steps for reproduction
1. open components panel
## Code Review
- [ ] 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
The main reason for this change is the realization that a product needs
some more protection than a typical library. With this change it is
still an Open Source Core, but now corporations can't build on top of it
without contributing back to the OSS community or without buying a
license.
## Description
Adding font smoothing by default to the Body component
https://discord.com/channels/955905230107738152/955907787299360788/1132882679189229649
```
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
```
## Steps for reproduction
1. open any project, see in dev tools these 2 added (or check visually)
## 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
space section unit text changed from semi-bold to medium
noticed some brand text changes as well
---------
Co-authored-by: Bot (build-figma-tokens.yml) <bot@localhost>
signature-v4 is moved into another repo and npm scope, I guess to
decouple release cycle as most releases happen because of other
unrelated packages changes.
sha256-js just bumped because of node bump. Still stupid we have to use
it instead of native node crypto or webcrypto.
Before we run two configurations of typescript on CI. Though this leads
to very long checks. Here I enabled "typecheck" script to generate dummy
.d.ts files to enable additional checks.
```diff
pnpm run -r typecheck (serial)
- 239.13s
+ 262.94s
pnpm turbo run size-test build checks dts --force (parallel locally)
- 2m30.609s
+ 1m47.622s
- pnpm turbo run size-test build checks dts --force (Ci)
- 6m 5s
+ pnpm turbo run size-test build checks --force (Ci)
+ 3m 22s
```
Here fixed the case when copy pasted form looses state and give errors
on submit.
Immerhin now converted to esm to work in tests.
Added tests for instances copy paste plugin.
The new logic is copy data sources as is if they are bound to copied
instances.
The new computeExpressionsDependencies used to detect if expression
depends on data sources outside of copied instances scope.
## 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-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
Closes https://github.com/webstudio-is/webstudio-builder/issues/1951
## Steps for reproduction
1. just font weight in navigator
## 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
Modern fs is quite reliable and has a lot of nice tools. No need in
additional wrapper without own types.
Also regenerated all props and found a few unused.
## Description
Allow multiple exports in components. Most radix components will look
like
`export const Tooltip = TooltipPrimitive.Root;`
The others would be a simpe wrappers over radix with just type changes
like like `Omit<TriggerProps, "className">
It's too much to create for each sucj export a standalone file.
After this PR following will work.
```ts
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
export const Tooltip = TooltipPrimitive.Root;
export const TooltipTrigger = TooltipPrimitive.Trigger;
```
Generated exports in case of multiple entries are
```
export propsTooltip: ...
export propsTooltipTrigger ....
```
In case of single export previous behaviour is preserved for now, but
should be changed IMO in the future PRs
Known bugs
Until this merged we should not use displayName (have no idea why we use
it at all) in files with multiple exports
https://github.com/styleguidist/react-docgen-typescript/pull/449
As of now will add comments
```
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
export const Tooltip = TooltipPrimitive.Root;
// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
// Tooltip.displayName = "Tooltip";
export const TooltipTrigger = TooltipPrimitive.Trigger;
// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
// TooltipTrigger.displayName = "TooltipTrigger";
```
## 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
## Description
isValid check has 0 effect on existing components, but prevents Radix
components type generation
Instead of empty types it now generate right type for at least single
radix component
```ts
export const props: Record<string, PropMeta> = {
defaultOpen: { required: false, control: "boolean", type: "boolean" },
delayDuration: {
description:
"The duration from when the pointer enters the trigger until the tooltip gets opened. This will\noverride the prop with the same name passed to Provider.\n@defaultValue 700",
required: false,
control: "number",
type: "number",
},
disableHoverableContent: {
description:
"When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.\n@defaultValue false",
required: false,
control: "boolean",
type: "boolean",
},
open: { required: false, control: "boolean", type: "boolean" },
};
```
## 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
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. Use keyboard to navigate between the tree elements.
2. Click `Ctrl + E` to enter into edit mode.
3. Edit the name of the tree-node and then press `Enter`.
4. Use the up/down arrows to navigate to other nodes in the tree.
## Code Review
- [ ] hi, 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
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] 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. 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-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. 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-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
Here refactored copy paste plugin system to try each plugin until it
succeeds. This way we can have multiple solutions to copy paste from
plain text. For example embed template is hand written text and should
succeed before markdown starts parsing it.
```json
{
"@webstudio/template": [
{
"type": "instance",
"component": "Box",
"children": [
{ "type": "text", "value": "Hello, I'm Box!" }
]
}
]
}
```
## Description
Browser default is inline, but with most certainty this is not practical
PR is on top of
https://github.com/webstudio-is/webstudio-builder/pull/1937
## Steps for reproduction
1. add input, textarea
2. see they are rendered as display block on its own row
## 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
---------
Co-authored-by: istarkov <istarkov@gmail.com>
Co-authored-by: Bogdan Chadkin <trysound@yandex.ru>
Fixed the issue with pasting checkbox into button
which is wrapped into label
Prevented inserting label, checkbox, radio button and input into
buttons.
## Description
1. What is this PR about (link the issue and add a short description)
Users should be able to set the name of any node inside the tree-view.
## Steps for reproduction
1. Select any node from the tree
2. Double click the node
3. Node enters into the edit mode.
4. Enter should save the name for the node.
5. The name should reflect everywhere in the application.
Things to take care of
- [x] The node should get into edit mode when you `double` click the
tree node.
- [x] The node should enter edit mode when you click `ctrl+r`
- [x] The keyboard shortcuts like, `up`, `down` expand and other tree
operations should work as expected.
- [x] `Esc` or loose of focus should set the name back.
closes#222
## Before requesting a review
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] 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
Here added custom condition to jest config to make it load source code
instead of build artifacts.
This means we no longer need to rebuild after changing code in other
package
and we may even no need to generate cjs anymore.
## Description
Error:
- [x] - <img width="112" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/ea3d781d-2f8b-403a-847f-8b01b3675f8e">
- [x] - fixed toggle group button size was 26px must be 24px
- [x] - also made outline offset -2px
## 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
Closes#1880
Mostly also #1905
## Description
Merging Settings and properties
## 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
---------
Co-authored-by: Ivan Starkov <istarkov@gmail.com>
Here added support for callbacks or event handlers on components which
basically can do only assignment to variables for now with extended
(with assignment operator) syntax of expressions.
Here replaced s3-client library with rest api to upload and delete
files.
Though to simplify generating of Authorization header reused their
signature-v4 package.
Even for such small utility aws adds 11 dependencies. But overall 94 ->
11 is a good result, pnpm will be a little faster, vercel cold start
smaller.
```diff
du -ckd1 node_modules
- 686952
+ 672964
```
Btw figured all edge cases with the help of ChatGPT. It's not always
correct but together with human can produce working code.
## Description
Affects storybook env, in the buider we don't have scorllable body so
cursor doesn't cause body to overflow
## 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
Here added two new utilities for generation and executing individual
expressions. Such expressions can use assignment operator to change any
variable.
This give us less opinionated solution for "set" action. We can just
execute any code our parser supports.
Ivan Starkov