Ref https://github.com/blakeembrey/change-case/releases
Change case in last major merged many packages into one to simplify
maintaining and usage. A few packages like title-case are still separate
as more rare case.
- replaced no-case with change-case (merged into change-case)
- replaced param-case with change-case (merged into change-case and
renamed to kebab (finally))
- replaced camelcase with change-case (has own camelcase utility)
- bumped title-case
While turborepo does not work for us we can try to solve long checks
time with builtin caching. Eslint provides similar one to prettier we
already use.
```
pnpm -r lint
51.53s
pnpm eslint . --ext .ts,.tsx --max-warnings 0
18.10s
pnpm eslint . --ext .ts,.tsx --max-warnings 0 --cache (with cache)
1.82s
```
In this PR I removed all lint scripts in packages and added global one
in the to github workflow. It saves like 30s on my laptop because pnpm.
Already stored cache makes linting almost instant.
Also bumped all eslint dependencies.
We generate dts type for each package on publish.
It requires us to include only "src" to output same structure as in src
folder. Though we have configs and cli scripts outside of it which
should be typechecked, they cannot be ignored.
Ideally would be to have one-line commands in package.json. Though
typescript always has problems with build step. In this case the CLI
have everything to configure this except "include" and "exclude" flags.
So here to workaround that I added tsconfig.dts.json to distinct dts
generation and typechecking.
Blocker for https://github.com/webstudio-is/webstudio-builder/pull/1634
## Description
- Canvas behavior should be exactly as in Webflow now - responsive
canvas.
- No constraints for resizing, you can switch to different breakpoints
when you change the canvas width just like in preview
## Not done in this PR
- [ ] breakpoints dropdown menu redesign
- [ ] on-canvas resizable handles
- [ ] flash-animate breakpoints list when breakpoint is switched through
resize
- [ ] flash-animate left and right borders when breakpoint is switched
- [ ] gravity of resize handle dragging when reaching next breakpoint
- [ ] vertical labels with @media example that matches current
breakpoint
- [ ] migrate min-width 0 breakpoints to base?
- [ ] hide outline while changing size
- [ ] ensure there is never both min and max in one media
## Todo
- [x] draggable positioning calc
- [x] shortcuts for zoom
- [x] sync width and selected breakpoint
- [x] remove scale
- [x] fix mobile-first breakpoints
- [x] tabbable toolbar items
- [x] icon for base
- [x] fix flicker
- [x] After breakpoint delete/add CascadeIndicator doesn't refresh
- [x] fix when there is no base, min-width 0 should have still a full
width
## Steps for reproduction
1. click button
3. expect xyz
## Code Review
- [ ] hi @TrySound, @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
1. `text-decoration`, `text-transform`, and `text-indent` are now taken
from Figma tokens as well
2. fixed the code that removes type from token name: `borderWidth0` ->
`0`
1. New `Text` component, existing is deprecated. Closes#825
2. Deprecated `Paragraph` component (the replacement is `<Text as="p">`)
3. Added `textVariants` that can be used like this `css({
...textVariants.regular })`
4. Removed `typography`, now `textVariants` or `textStyles` can be used
instead
5. Added `theme.fontSize`, `theme.lineHeight`, `theme.fontWeight`,
`theme.letterSpacing` that use values from Figma
6. Deprecated existing `theme.fontSize`, `theme.lineHeight`
7. Installed `Roboto Mono` font
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()} />
```
Bogdan Chadkin