Found zod allows to pass anything in transform without type checking.
This means we can easily get unexpected result. In this case we could
get undefined as asset.
As a solution I defined two versions of types, client side and stored in
db. Conversion is implemented on db routes side.
This makes data flow more clear and let us describe only two versions of
types instead of tree (in, out, client side).
Here is migration to new props type with more safe conversion to db
format. Added two versions StoredPropsItem for and PropsItem for client
and got rid of "as" casting.
## Description
Not complete, everything that needs adjustments supposed to have a todo
comment
1. Added project cards
2. Variable Inter font
3. Flex space-between
https://user-images.githubusercontent.com/52824/213592204-ffb2ee3b-b613-4561-a808-31b05889bf39.mp4
## Steps for reproduction
1. open /dashboard2
## Code Review
- [ ] hi @rpominov , 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
1. Added `@font-face`s to `designer` and `design-system` storybooks
2. Shadow tokens are now available via `theme.shadows.somthing`
3. Typography tokens are now available like this:
```ts
import { typography, styled } from '@webstudio-is/design-system';
const Something = styled("div", typography.something)
<div className={typography.something()} />
```
## Description
just updated the color of foreground/success
Co-authored-by: markxtang <122043657+markxtang@users.noreply.github.com>
Co-authored-by: Bot (build-figma-tokens.yml) <bot@localhost>
InstanceProps is designed to store props per each instance which
requires a lot of sql updates on every props change.
Here moved per instance props into array with props for whole tree. This
way patches are safer to apply on large trees.
```
type PropsItem = {
id: string,
instanceId: string,
name: string,
required?: boolean,
type: 'number' | 'string' | 'boolean' | 'asset',
value: number | string | boolean
}
```
Renamed some styles to make it more clear which styles are brand styles
as opposed to builder styles. E.g. before the brand color styles were
distributed with the other color styles, now they are all under brand.
grouping. Also renamed the atomic typography tokens such as font-size so
they are in order (smallest value to highest value corresponds to first
to last in the array)
## Description
The first piece of the new dashboard - empty state for the projects
section.
Lots of design system values are not coming from Figma yet because Mark
is still on it.
Its not live, only visible over /dashboard2
<img width="960" alt="Screenshot 2023-01-19 at 00 33 19"
src="https://user-images.githubusercontent.com/52824/213328060-c84a18d5-3dd2-43d6-a70d-cdf8cd504108.png">
## Steps for reproduction
1. go to /dashboard2
## Code Review
- [ ] hi @rpominov , 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
2 Issues.
- Absense of unique index caused huge update times like 100ms.
- updateMany creates implicit transaction which in prisma has very small
timeouts
Forgot to migrate it to our build-package script before. Now we got rid
of tsup.
```diff
du -ckd1 node_modules
-804060
+794324
```
```diff
root> pnpm build
-16s
+10s
```
## Description
1. Styling all states
<img width="353" alt="Screenshot 2023-01-14 at 15 40 54"
src="https://user-images.githubusercontent.com/52824/212480260-b37ba7c4-7fde-45c7-beba-5e79980aadd7.png">
2. Functionality overview
- Type a new input with autocomplete
- Select an existing source from a list
- Enter a new source
- Hover the source to see the menu
- Menu provides: Remove, Duplicate, Disable, Edit name
- Drag and drop to reorder
- Click to toggle select/unselect
- Double click to edit name
- Local source can only be disabled, nothing else should be possible
- Hit Backspace to delete the last Source item when you are in the input
https://user-images.githubusercontent.com/52824/212717241-eb694803-ee50-4054-bdd6-faaa6ffb197b.mp4
## Steps for reproduction
1. open stories in the designer
3. check all possible states are according to
[figma](https://www.figma.com/file/sfCE7iLS0k25qCxiifQNLE/%F0%9F%93%9A-Webstudio-Library?node-id=947%3A3701&t=GviFHhyBu6zfoxRk-4)
## Code Review
- [ ] hi @rpominov , I need you to do
- conceptual review (architecture, feature-correctness)
- check how I exposed buttonStyle from design system
- [ ] hi @taylornowotny
- please try in storybook and see if you find mistakes. Autocomplete
list/menu is not done, only the style sources.
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Co-authored-by: Roman Pominov <rpominov+github@gmail.com>
Extracted from
https://github.com/webstudio-is/webstudio-designer/pull/797 for upcoming
dashboard split into separate app
## Code Review
- [ ] hi @kof, 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
I've replaced all `"$something$something"` CSS variables with
`variables.something.something`. Now we have autocomplete and
type-safety: if a variable is removed or renamed w/o fixing the usage
the build will fail.
This will allow designers to change design tokens and either make sure
nothing is broken or if something is broken we'll know exactly what and
it will be easy to fix.
Discussed here:
https://discord.com/channels/955905230107738152/1061992022665334837
## Description
ref #548
New `trpc-interface` package.
It's intended to implement various TRPC services we are going to use.
But it can act as a proxy for TRPC services implemented at SAAS and at
open source.
Exposes: `createTRPCProxyServiceClient` method, and `SharedRouter` type.
`createTRPCProxyServiceClient` creates
[createTRPCProxyClient](https://trpc.io/docs/vanilla#initialize-a-trpc-client)
for the local TRCP router, or for a remote TRPC server.
`SharedRouter` type information would be used at SAAS to check that SAAS
services have the same API interface as open-source TRPC.
The current implementation has just an example call `authorize.check`,
without any logic. And used just to check that everything works.
## Steps for reproduction
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- [ ] hi @TrySound , 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Props have a lot of logic to synchronize values. And after moving
updates into designer we get fresh state instantly and can simplify the
logic even more.
## Description
Just another PR to sync tokens, but also I've added a GitHub action that
will automatically keep `figma-design-tokens.ts` up to date in the
`figma-tokens` branch
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- [ ] hi @TrySound, I need you to do
- detailed review
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
Co-authored-by: Taylor Nowotny <86495896+taylornowotny@users.noreply.github.com>
Co-authored-by: markxtang <122043657+markxtang@users.noreply.github.com>
Co-authored-by: Bot (build-figma-tokens.yml) <bot@localhost>
Turns out we store whole db representation in each props each per
instance item. This is wasteful and increase complexity of code.
```
{
[InstanceId]: {
id: UUID,
instanceId: InstanceId,
treeId: TreeId,
props: UserProp[]
}
}
```
Where instance id is duplicated and tree id is provided as patch
context. Id can be replaced with combination of instance id and tree id.
```
{
[InstanceId]: UserProp[]
}
```
Ref https://github.com/nanostores/nanostores
Nanostores is another open source implementation of reactive states.
Supports a lot of frameworks and provides useful utilities like computed
stores. Api is slightly different
```
store.get(): Value
store.set(value: Value)
```
`useStore` resolves only value so I temporary added custom `useValue` to
not rewrite whole project. Since we gonna use computed atoms it makes
more sense to invoke useStore where atom value is used instead of
reusable hook.
## Description
1. This adds ability to drag&drop style source items
## Steps for reproduction
1. open stories
2. get 2+ items
3. start dragging
## Code Review
- [ ] hi @rpominov , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- help finish the sortable implementation: restrict drop targets, maybe
add a preview item to the draggable, can go without it though for now
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Co-authored-by: Roman Pominov <rpominov+github@gmail.com>
Here used immerhin subscribe method to send patches from canvas to
desiger instead of uploading full states when their value is changed.
Syncrhonization is still one-way. Need more changes in immerhin to make
two-way patches work.
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
Migrated updating and rendering to normalized styles. There are still a
few cases to migrate so left legacy root instance updates.
Styles are updated with immerhin consistently with whole project.
Can be tested changing styles and deleting breakpoints.
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
Gradually starting to migrate to new styles format. Here replaced
getCssRules and getPresetStylesMap with getStyleRules and
getPresetStyleRules utilities.
Will reuse both at once on release.
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
Here only migration and transforms for load and patch. Styles have the
following type and stored in Tree.styles column.
```
Array<{
breakpointId: string,
instanceId: string,
property: StyleProperty,
value: StyleValue
}>
```
Did migration with cursor pagination with 1000 trees per transaction.
Before we populated preset style on instance creation. This does not let
us to distinct preset style from local one.
As an option we could use preset style hardcoded in meta though this may
affect user when we change defaults.
Here I added presetStyle column in Tree table with the list of styles
for component.
```
Array<{
component: string,
property: string,
value: StyleValue
}>
```
Will style controls as grey for such styles.
Ref https://github.com/webstudio-is/webstudio-designer/issues/366
There were many unitless initial values with "px" unit. Here I extracted
all possible unit types from properties syntaxes. csstree provides a
list of unit groups which in the future will let us provide correct list
of units for css value input.
## Description
Multiple style elements are easier to differentiate when they have some
hint on the purpose
## Steps for reproduction
1. select style element on canvas, see data-webstudio attribute with a
name
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
## 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)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [x] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
While fixing units found a lot of keywords appear from css functions
which are complex values and should be ignored. So here I changed
traversing of properties syntaxes to support only top level values and
keywords.
Mostly gone color words
```diff
-6639 lines 116 KB
+4808 lines 85.8 KB
```
See diff for more info
Ref https://github.com/webstudio-is/webstudio-designer/issues/366
Parsed initial values to get correct unit instead of px for some
properties. There is still edge case with unitless values I'm gonna fix
in another PR.
Also bumped mdn-data and removed overrides fixed on mdn side.
Bogdan Chadkin
