From f8b2fe1c851b064da130c8d0c339623e9b4fe3f9 Mon Sep 17 00:00:00 2001 From: Pedro Duarte Date: Sun, 19 Sep 2021 21:45:50 +0200 Subject: [PATCH] Refactor to Stitches Core (#89) * Refactor www/styles to Stitches Core * Update package.json * Begin refactor of `tldraw` * More refactoring * A bit more * little bit more * Update yarn.lock * Drops React dependencies to 16.8 Co-authored-by: Steve Ruiz --- package.json | 6 +- packages/core/package.json | 10 +- packages/core/src/types.ts | 5 +- packages/dev/package.json | 12 +- packages/intersect/package.json | 4 +- packages/tldraw/package.json | 13 +- .../components/context-menu/context-menu.tsx | 71 +- packages/tldraw/src/components/menu/menu.tsx | 30 +- .../page-options-dialog.tsx | 34 +- .../src/components/page-panel/page-panel.tsx | 40 +- .../src/components/shared/buttons-row.tsx | 4 +- .../src/components/shared/context-menu.tsx | 57 +- .../tldraw/src/components/shared/dialog.tsx | 10 +- .../src/components/shared/dropdown-menu.tsx | 57 +- .../components/shared/floating-container.tsx | 4 +- .../src/components/shared/icon-button.tsx | 4 +- .../src/components/shared/icon-wrapper.tsx | 4 +- packages/tldraw/src/components/shared/kbd.tsx | 8 +- .../tldraw/src/components/shared/menu.tsx | 18 +- .../src/components/shared/radio-group.tsx | 12 +- .../src/components/shared/row-button.tsx | 4 +- .../tldraw/src/components/shared/tooltip.tsx | 23 +- .../style-panel/align-distribute.tsx | 84 +- .../style-panel/quick-color-select.tsx | 6 +- .../style-panel/quick-dash-select.tsx | 10 +- .../style-panel/quick-fill-select.tsx | 9 +- .../style-panel/quick-size-select.tsx | 8 +- .../style-panel/shapes-functions.tsx | 82 +- .../components/style-panel/style-panel.tsx | 55 +- .../src/components/style-panel/styled.tsx | 6 +- .../tldraw/src/components/tldraw/tldraw.tsx | 18 +- .../tools-panel/back-to-content.tsx | 14 +- .../src/components/tools-panel/status-bar.tsx | 14 +- .../src/components/tools-panel/styled.tsx | 76 +- .../components/tools-panel/tools-panel.tsx | 46 +- .../src/components/tools-panel/undo-redo.tsx | 6 +- .../src/components/tools-panel/zoom.tsx | 6 +- .../tldraw/src/shape/shapes/text/text.tsx | 16 +- packages/tldraw/src/styles/index.ts | 4 +- packages/tldraw/src/styles/stitches.config.ts | 8 +- packages/vec/package.json | 4 +- packages/www/package.json | 2 +- packages/www/pages/sponsorware.tsx | 46 +- packages/www/styles/index.ts | 6 +- packages/www/styles/stitches.config.ts | 8 +- tsconfig.tsbuildinfo | 21325 ---------------- yarn.lock | 317 +- 47 files changed, 684 insertions(+), 21922 deletions(-) delete mode 100644 tsconfig.tsbuildinfo diff --git a/package.json b/package.json index 38c5a212a..7eecc8cfd 100644 --- a/package.json +++ b/package.json @@ -39,8 +39,8 @@ "@testing-library/react": "^12.0.0", "@types/jest": "^27.0.1", "@types/node": "^15.0.1", - "@types/react": "^17.0.19", - "@types/react-dom": "^17.0.9", + "@types/react": "^16.9.55", + "@types/react-dom": "^16.9.9", "@typescript-eslint/eslint-plugin": "^4.19.0", "@typescript-eslint/parser": "^4.19.0", "babel-jest": "^27.1.0", @@ -49,8 +49,6 @@ "init-package-json": "^2.0.4", "jest": "^27.1.0", "lerna": "^3.22.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", "resize-observer-polyfill": "^1.5.1", "ts-jest": "^27.0.5", "tslib": "^2.3.0", diff --git a/packages/core/package.json b/packages/core/package.json index b846c6c56..c55d77e7d 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -37,8 +37,8 @@ "@herbcaudill/tscpaths": "^0.0.17", "@types/jest": "^27.0.1", "@types/node": "^16.7.10", - "@types/react": "^17.0.16", - "@types/react-dom": "^17.0.9", + "@types/react": "^16.9.55", + "@types/react-dom": "^16.9.9", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "esbuild": "^0.12.24", @@ -53,8 +53,8 @@ "typescript": "^4.4.2" }, "peerDependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": ">=16.8", + "react-dom": "^16.8 || ^17.0" }, "dependencies": { "@tldraw/intersect": "^0.0.95", @@ -62,4 +62,4 @@ "@use-gesture/react": "^10.0.0-beta.24" }, "gitHead": "5cb031ddc264846ec6732d7179511cddea8ef034" -} +} \ No newline at end of file diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 1e4e91840..ec1158e32 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -3,10 +3,11 @@ /* --------------------- Primary -------------------- */ import type React from 'react' -import type { ForwardedRef } from 'react' export type Patch = Partial<{ [P in keyof T]: T | Partial | Patch }> +type ForwardedRef = ((instance: T | null) => void) | React.MutableRefObject | null + export interface TLPage { id: string name?: string @@ -296,7 +297,7 @@ export type TLShapeUtil< Component( this: TLShapeUtil, props: TLRenderInfo, - ref: React.ForwardedRef + ref: ForwardedRef ): React.ReactElement, E['tagName']> Indicator( diff --git a/packages/dev/package.json b/packages/dev/package.json index 883f20de0..fe8235670 100644 --- a/packages/dev/package.json +++ b/packages/dev/package.json @@ -21,15 +21,15 @@ "dependencies": { "@tldraw/tldraw": "^0.0.95", "idb": "^6.1.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", "react-router": "^5.2.1", - "react-router-dom": "^5.3.0" + "react-router-dom": "^5.3.0", + "react": ">=16.8", + "react-dom": "^16.8 || ^17.0" }, "devDependencies": { "@types/node": "^14.14.35", - "@types/react": "^17.0.3", - "@types/react-dom": "^17.0.2", + "@types/react": "^16.9.55", + "@types/react-dom": "^16.9.9", "@types/react-router-dom": "^5.1.8", "concurrently": "6.0.1", "create-serve": "1.0.1", @@ -38,4 +38,4 @@ "typescript": "4.2.3" }, "gitHead": "a7dac0f83ad998e205c2aab58182cb4ba4e099a6" -} +} \ No newline at end of file diff --git a/packages/intersect/package.json b/packages/intersect/package.json index f92585d43..3b290e078 100644 --- a/packages/intersect/package.json +++ b/packages/intersect/package.json @@ -42,8 +42,6 @@ "esbuild": "^0.12.24", "eslint": "^7.32.0", "lerna": "^4.0.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", "ts-node": "^10.2.1", "tslib": "^2.3.1", "typedoc": "^0.22.3", @@ -53,4 +51,4 @@ "@tldraw/vec": "^0.0.95" }, "gitHead": "5cb031ddc264846ec6732d7179511cddea8ef034" -} +} \ No newline at end of file diff --git a/packages/tldraw/package.json b/packages/tldraw/package.json index 139c166ef..521291c04 100644 --- a/packages/tldraw/package.json +++ b/packages/tldraw/package.json @@ -36,15 +36,13 @@ "@babel/preset-env": "^7.15.4", "@types/jest": "^27.0.1", "@types/node": "^16.7.10", - "@types/react": "^17.0.16", - "@types/react-dom": "^17.0.9", + "@types/react": "^16.9.55", + "@types/react-dom": "^16.9.9", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "esbuild": "^0.12.24", "eslint": "^7.32.0", "lerna": "^4.0.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", "ts-node": "^10.2.1", "tsconfig-replace-paths": "^0.0.5", "tslib": "^2.3.1", @@ -52,8 +50,8 @@ "typescript": "^4.4.2" }, "peerDependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": ">=16.8", + "react-dom": "^16.8 || ^17.0" }, "dependencies": { "@radix-ui/react-alert-dialog": "^0.0.20", @@ -64,6 +62,7 @@ "@radix-ui/react-id": "^0.0.6", "@radix-ui/react-radio-group": "^0.0.18", "@radix-ui/react-tooltip": "^0.0.20", + "@stitches/core": "^1.2.0", "@stitches/react": "^1.0.0", "@tldraw/core": "^0.0.95", "@tldraw/intersect": "^0.0.95", @@ -73,4 +72,4 @@ "rko": "^0.5.25" }, "gitHead": "5cb031ddc264846ec6732d7179511cddea8ef034" -} +} \ No newline at end of file diff --git a/packages/tldraw/src/components/context-menu/context-menu.tsx b/packages/tldraw/src/components/context-menu/context-menu.tsx index 4ed88a351..d0a932560 100644 --- a/packages/tldraw/src/components/context-menu/context-menu.tsx +++ b/packages/tldraw/src/components/context-menu/context-menu.tsx @@ -1,21 +1,21 @@ import * as React from 'react' -import styled from '~styles' +import css from '~styles' import { Utils } from '@tldraw/core' import * as RadixContextMenu from '@radix-ui/react-context-menu' import { useTLDrawContext } from '~hooks' import { Data, AlignType, DistributeType, StretchType } from '~types' import { - Kbd, - IconWrapper, + kbd, + iconWrapper, breakpoints, - RowButton, + rowButton, ContextMenuArrow, ContextMenuDivider, ContextMenuButton, ContextMenuSubMenu, ContextMenuIconButton, ContextMenuRoot, - MenuContent, + menuContent, } from '../shared' import { ChevronRightIcon, @@ -128,20 +128,20 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem return ( {children} - + {hasSelection ? ( <> Flip Horizontal - ⇧H + ⇧H Flip Vertical - ⇧V + ⇧V Duplicate - #D + #D {hasGroupSelected || @@ -150,13 +150,13 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem {hasGroupSelected && ( Ungroup - #⇧G + #⇧G )} {hasTwoOrMore && ( Group - #G + #G )} @@ -164,19 +164,19 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem To Front - #⇧] + #⇧] Forward - #] + #] Backward - #[ + #[ To Back - #⇧[ + #⇧[ @@ -186,11 +186,11 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem Copy - #C + #C Copy to SVG - ⇧#C + ⇧#C {isDebugMode && ( @@ -199,31 +199,31 @@ export const ContextMenu = React.memo(({ children }: ContextMenuProps): JSX.Elem )} Paste - #V + #V Delete - ⌫ + ⌫ ) : ( <> Paste - #V + #V Undo - #Z + #Z Redo - #⇧Z + #⇧Z )} - + ) }) @@ -278,17 +278,16 @@ function AlignDistributeSubMenu({ return ( - + Align / Distribute - +
- +
- @@ -326,12 +325,12 @@ function AlignDistributeSubMenu({ )} - + ) } -const StyledGrid = styled(MenuContent, { +const grid = css(menuContent, { display: 'grid', variants: { selectedStyle: { @@ -361,13 +360,13 @@ function MoveToPageMenu(): JSX.Element | null { return ( - + Move To Page - +
- +
- + {sorted.map(({ id, name }, i) => ( ))} - + ) } diff --git a/packages/tldraw/src/components/menu/menu.tsx b/packages/tldraw/src/components/menu/menu.tsx index 4476e1478..b2cba1941 100644 --- a/packages/tldraw/src/components/menu/menu.tsx +++ b/packages/tldraw/src/components/menu/menu.tsx @@ -2,16 +2,16 @@ import * as React from 'react' import { ExitIcon, HamburgerMenuIcon } from '@radix-ui/react-icons' import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import { - FloatingContainer, + floatingContainer, DropdownMenuRoot, - MenuContent, - IconButton, + menuContent, + iconButton, breakpoints, DropdownMenuButton, DropdownMenuSubMenu, DropdownMenuDivider, - IconWrapper, - Kbd, + iconWrapper, + kbd, } from '~components/shared' import { useTLDrawContext } from '~hooks' import { Preferences } from './preferences' @@ -38,43 +38,43 @@ export const Menu = React.memo(() => { }, [tlstate]) return ( - +
- + - + New Project - #N + #N Open... - #L + #L Save - #S + #S Save As... - ⇧#S + ⇧#S Sign Out - +
- +
- +
) }) diff --git a/packages/tldraw/src/components/page-options-dialog/page-options-dialog.tsx b/packages/tldraw/src/components/page-options-dialog/page-options-dialog.tsx index fd6473681..12a9db124 100644 --- a/packages/tldraw/src/components/page-options-dialog/page-options-dialog.tsx +++ b/packages/tldraw/src/components/page-options-dialog/page-options-dialog.tsx @@ -3,11 +3,11 @@ import * as Dialog from '@radix-ui/react-alert-dialog' import { MixerVerticalIcon } from '@radix-ui/react-icons' import { breakpoints, - IconButton, - DialogOverlay, - DialogContent, - RowButton, - Divider, + iconButton, + dialogOverlay, + dialogContent, + rowButton, + divider, } from '~components/shared' import type { Data, TLDrawPage } from '~types' import { useTLDrawContext } from '~hooks' @@ -76,30 +76,30 @@ export function PageOptionsDialog({ page, onOpen, onClose }: PageOptionsDialogPr return ( - + - - - + + + Rename - + Duplicate Delete - - - Cancel - +
+ Cancel ) diff --git a/packages/tldraw/src/components/page-panel/page-panel.tsx b/packages/tldraw/src/components/page-panel/page-panel.tsx index 32f350140..de2f49343 100644 --- a/packages/tldraw/src/components/page-panel/page-panel.tsx +++ b/packages/tldraw/src/components/page-panel/page-panel.tsx @@ -5,13 +5,13 @@ import { breakpoints, DropdownMenuButton, DropdownMenuDivider, - RowButton, - MenuContent, - FloatingContainer, - IconWrapper, + rowButton, + menuContent, + floatingContainer, + iconWrapper, } from '~components/shared' import { PageOptionsDialog } from '~components/page-options-dialog' -import styled from '~styles' +import css from '~styles' import { useTLDrawContext } from '~hooks' import type { Data } from '~types' @@ -51,14 +51,14 @@ export function PagePanel(): JSX.Element { return ( - - +
+ {currentPageName || 'Page'} - - - + +
+ {isOpen && } - + ) } @@ -86,36 +86,34 @@ function PageMenuContent({ onClose }: { onClose: () => void }) { <> {sortedPages.map((page) => ( - +
{page.name || 'Page'} - +
- +
- +
))} Create Page - +
- +
) } -const ButtonWithOptions = styled('div', { +const buttonWithOptions = css({ display: 'grid', gridTemplateColumns: '1fr auto', gridAutoFlow: 'column', diff --git a/packages/tldraw/src/components/shared/buttons-row.tsx b/packages/tldraw/src/components/shared/buttons-row.tsx index 4d902cc79..a49433191 100644 --- a/packages/tldraw/src/components/shared/buttons-row.tsx +++ b/packages/tldraw/src/components/shared/buttons-row.tsx @@ -1,10 +1,10 @@ -import styled from '~styles' +import css from '~styles' /* -------------------------------------------------- */ /* Buttons Row */ /* -------------------------------------------------- */ -export const ButtonsRow = styled('div', { +export const buttonsRow = css({ position: 'relative', display: 'flex', width: '100%', diff --git a/packages/tldraw/src/components/shared/context-menu.tsx b/packages/tldraw/src/components/shared/context-menu.tsx index b18346138..7c7334f54 100644 --- a/packages/tldraw/src/components/shared/context-menu.tsx +++ b/packages/tldraw/src/components/shared/context-menu.tsx @@ -11,11 +11,11 @@ import { CheckboxItem as CMCheckboxItem, } from '@radix-ui/react-context-menu' import { breakpoints } from './breakpoints' -import { RowButton } from './row-button' -import { IconButton } from './icon-button' -import { IconWrapper } from './icon-wrapper' -import { MenuContent } from './menu' -import styled from '~styles' +import { rowButton } from './row-button' +import { iconButton } from './icon-button' +import { iconWrapper } from './icon-wrapper' +import { menuContent } from './menu' +import css from '~styles' /* -------------------------------------------------- */ /* Context Menu */ @@ -42,13 +42,13 @@ export interface ContextMenuSubMenuProps { export function ContextMenuSubMenu({ children, label }: ContextMenuSubMenuProps): JSX.Element { return ( - + {label} - +
- +
- + {children} @@ -56,16 +56,38 @@ export function ContextMenuSubMenu({ children, label }: ContextMenuSubMenuProps) ) } -export const ContextMenuDivider = styled(CMSeparator, { +const contextMenuDivider = css({ backgroundColor: '$hover', height: 1, margin: '$2 -$2', }) -export const ContextMenuArrow = styled(CMArrow, { +export const ContextMenuDivider = React.forwardRef< + React.ElementRef, + React.ComponentProps +>((props, forwardedRef) => ( + +)) + +const contextMenuArrow = css({ fill: '$panel', }) +export const ContextMenuArrow = React.forwardRef< + React.ElementRef, + React.ComponentProps +>((props, forwardedRef) => ( + +)) + export interface ContextMenuButtonProps { onSelect?: () => void disabled?: boolean @@ -78,9 +100,9 @@ export function ContextMenuButton({ disabled = false, }: ContextMenuButtonProps): JSX.Element { return ( - + {children} - + ) } @@ -96,7 +118,7 @@ export function ContextMenuIconButton({ disabled = false, }: ContextMenuIconButtonProps): JSX.Element { return ( - + {children} ) @@ -117,17 +139,16 @@ export function ContextMenuCheckboxItem({ }: ContextMenuCheckboxItemProps): JSX.Element { return ( {children} - +
- +
) diff --git a/packages/tldraw/src/components/shared/dialog.tsx b/packages/tldraw/src/components/shared/dialog.tsx index 279877287..62888f327 100644 --- a/packages/tldraw/src/components/shared/dialog.tsx +++ b/packages/tldraw/src/components/shared/dialog.tsx @@ -1,10 +1,10 @@ -import styled from '~styles' +import css from '~styles' /* -------------------------------------------------- */ /* Dialog */ /* -------------------------------------------------- */ -export const DialogContent = styled('div', { +export const dialogContent = css({ position: 'absolute', top: '50%', left: '50%', @@ -26,7 +26,7 @@ export const DialogContent = styled('div', { }, }) -export const DialogOverlay = styled('div', { +export const dialogOverlay = css({ backgroundColor: 'rgba(0, 0, 0, .15)', position: 'fixed', top: 0, @@ -35,11 +35,11 @@ export const DialogOverlay = styled('div', { left: 0, }) -export const DialogInputWrapper = styled('div', { +export const dialogInputWrapper = css({ padding: '$4 $2', }) -export const DialogTitleRow = styled('div', { +export const dialogTitleRow = css({ display: 'flex', padding: '0 0 0 $4', alignItems: 'center', diff --git a/packages/tldraw/src/components/shared/dropdown-menu.tsx b/packages/tldraw/src/components/shared/dropdown-menu.tsx index 199971bd2..511039d43 100644 --- a/packages/tldraw/src/components/shared/dropdown-menu.tsx +++ b/packages/tldraw/src/components/shared/dropdown-menu.tsx @@ -14,12 +14,12 @@ import { import { Tooltip } from './tooltip' import { breakpoints } from './breakpoints' -import { RowButton } from './row-button' -import { IconButton } from './icon-button' -import { IconWrapper } from './icon-wrapper' -import { MenuContent } from './menu' +import { rowButton } from './row-button' +import { iconButton } from './icon-button' +import { iconWrapper } from './icon-wrapper' +import { menuContent } from './menu' -import styled from '~styles' +import css from '~styles' /* -------------------------------------------------- */ /* Dropdown Menu */ @@ -56,13 +56,13 @@ export function DropdownMenuSubMenu({ }: DropdownMenuSubMenuProps): JSX.Element { return ( - + {label} - +
- +
- + {children} @@ -70,7 +70,7 @@ export function DropdownMenuSubMenu({ ) } -export const DropdownMenuDivider = styled(DMSeparator, { +export const dropdownMenuDivider = css({ backgroundColor: '$hover', height: 1, marginTop: '$2', @@ -79,10 +79,32 @@ export const DropdownMenuDivider = styled(DMSeparator, { marginLeft: '-$2', }) -export const DropdownMenuArrow = styled(DMArrow, { +export const DropdownMenuDivider = React.forwardRef< + React.ElementRef, + React.ComponentProps +>((props, forwardedRef) => ( + +)) + +export const dropdownMenuArrow = css({ fill: '$panel', }) +export const DropdownMenuArrow = React.forwardRef< + React.ElementRef, + React.ComponentProps +>((props, forwardedRef) => ( + +)) + export interface DropdownMenuButtonProps { onSelect?: () => void disabled?: boolean @@ -95,7 +117,7 @@ export function DropdownMenuButton({ disabled = false, }: DropdownMenuButtonProps): JSX.Element { return ( - + {children} ) @@ -113,7 +135,7 @@ export function DropdownMenuIconButton({ disabled = false, }: DropdownMenuIconButtonProps): JSX.Element { return ( - + {children} ) @@ -133,7 +155,7 @@ export function DropdownMenuIconTriggerButton({ disabled = false, }: DropdownMenuIconTriggerButtonProps): JSX.Element { return ( - + {children} @@ -156,17 +178,16 @@ export function DropdownMenuCheckboxItem({ }: MenuCheckboxItemProps): JSX.Element { return ( {children} - +
- +
) diff --git a/packages/tldraw/src/components/shared/floating-container.tsx b/packages/tldraw/src/components/shared/floating-container.tsx index 173ac5226..bc14022b6 100644 --- a/packages/tldraw/src/components/shared/floating-container.tsx +++ b/packages/tldraw/src/components/shared/floating-container.tsx @@ -1,10 +1,10 @@ -import styled from '~styles' +import css from '~styles' /* -------------------------------------------------- */ /* Floating Container */ /* -------------------------------------------------- */ -export const FloatingContainer = styled('div', { +export const floatingContainer = css({ backgroundColor: '$panel', border: '1px solid $panel', borderRadius: '4px', diff --git a/packages/tldraw/src/components/shared/icon-button.tsx b/packages/tldraw/src/components/shared/icon-button.tsx index 83685ca05..7c6fbfcd9 100644 --- a/packages/tldraw/src/components/shared/icon-button.tsx +++ b/packages/tldraw/src/components/shared/icon-button.tsx @@ -1,10 +1,10 @@ -import styled from '~styles' +import css from '~styles' /* -------------------------------------------------- */ /* Icon Button */ /* -------------------------------------------------- */ -export const IconButton = styled('button', { +export const iconButton = css({ position: 'relative', height: '32px', width: '32px', diff --git a/packages/tldraw/src/components/shared/icon-wrapper.tsx b/packages/tldraw/src/components/shared/icon-wrapper.tsx index 2d0750ae1..089aeb1cc 100644 --- a/packages/tldraw/src/components/shared/icon-wrapper.tsx +++ b/packages/tldraw/src/components/shared/icon-wrapper.tsx @@ -1,10 +1,10 @@ -import styled from '~styles' +import css from '~styles' /* -------------------------------------------------- */ /* Icon Wrapper */ /* -------------------------------------------------- */ -export const IconWrapper = styled('div', { +export const iconWrapper = css({ height: '100%', borderRadius: '4px', marginRight: '1px', diff --git a/packages/tldraw/src/components/shared/kbd.tsx b/packages/tldraw/src/components/shared/kbd.tsx index 6a7171ba8..311cf1baa 100644 --- a/packages/tldraw/src/components/shared/kbd.tsx +++ b/packages/tldraw/src/components/shared/kbd.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import styled from '~styles' +import css from '~styles' import { Utils } from '@tldraw/core' /* -------------------------------------------------- */ @@ -18,18 +18,18 @@ export function Kbd({ children: string }): JSX.Element | null { return ( - + {children .replaceAll('#', commandKey()) .split('') .map((k, i) => ( {k} ))} - + ) } -export const StyledKbd = styled('kbd', { +export const kbd = css({ marginLeft: '$3', textShadow: '$2', textAlign: 'center', diff --git a/packages/tldraw/src/components/shared/menu.tsx b/packages/tldraw/src/components/shared/menu.tsx index 5739f23fd..70d9b1621 100644 --- a/packages/tldraw/src/components/shared/menu.tsx +++ b/packages/tldraw/src/components/shared/menu.tsx @@ -1,12 +1,12 @@ import { breakpoints } from './breakpoints' -import styled from '~styles' -import { RowButton } from './row-button' +import css from '~styles' +import { rowButton } from './row-button' /* -------------------------------------------------- */ /* Menu */ /* -------------------------------------------------- */ -export const MenuContent = styled('div', { +export const menuContent = css({ position: 'relative', overflow: 'hidden', userSelect: 'none', @@ -21,7 +21,7 @@ export const MenuContent = styled('div', { font: '$ui', }) -export const Divider = styled('div', { +export const divider = css({ backgroundColor: '$hover', height: 1, marginTop: '$2', @@ -42,13 +42,17 @@ export function MenuButton({ children: React.ReactNode }): JSX.Element { return ( - + ) } -export const MenuTextInput = styled('input', { +export const menuTextInput = css({ backgroundColor: '$panel', border: 'none', padding: '$4 $3', diff --git a/packages/tldraw/src/components/shared/radio-group.tsx b/packages/tldraw/src/components/shared/radio-group.tsx index f605967c7..2f0021675 100644 --- a/packages/tldraw/src/components/shared/radio-group.tsx +++ b/packages/tldraw/src/components/shared/radio-group.tsx @@ -1,10 +1,18 @@ -import styled from '~styles' +import React from 'react' +import css from '~styles' import { Root as RGRoot } from '@radix-ui/react-radio-group' /* -------------------------------------------------- */ /* Radio Group */ /* -------------------------------------------------- */ -export const Group = styled(RGRoot, { +export const group = css({ display: 'flex', }) + +export const Group = React.forwardRef< + React.ElementRef, + React.ComponentProps +>((props, forwardedRef) => ( + +)) diff --git a/packages/tldraw/src/components/shared/row-button.tsx b/packages/tldraw/src/components/shared/row-button.tsx index a4d03aaaa..60ae5bc73 100644 --- a/packages/tldraw/src/components/shared/row-button.tsx +++ b/packages/tldraw/src/components/shared/row-button.tsx @@ -1,10 +1,10 @@ -import styled from '~styles' +import css from '~styles' /* -------------------------------------------------- */ /* Row Button */ /* -------------------------------------------------- */ -export const RowButton = styled('button', { +export const rowButton = css({ position: 'relative', display: 'flex', width: '100%', diff --git a/packages/tldraw/src/components/shared/tooltip.tsx b/packages/tldraw/src/components/shared/tooltip.tsx index 76a387cc0..d3944d537 100644 --- a/packages/tldraw/src/components/shared/tooltip.tsx +++ b/packages/tldraw/src/components/shared/tooltip.tsx @@ -1,7 +1,7 @@ import * as RadixTooltip from '@radix-ui/react-tooltip' import * as React from 'react' -import styled from '~styles' -import { Kbd } from './kbd' +import css from '~styles' +import { kbd } from './kbd' /* -------------------------------------------------- */ /* Tooltip */ @@ -14,20 +14,25 @@ interface TooltipProps { side?: 'bottom' | 'left' | 'right' | 'top' } -export function Tooltip({ children, label, kbd, side = 'top' }: TooltipProps): JSX.Element { +export function Tooltip({ + children, + label, + kbd: kbdProp, + side = 'top', +}: TooltipProps): JSX.Element { return ( {children} - + {label} - {kbd ? {kbd} : null} - - + {kbdProp ? {kbdProp} : null} + + ) } -const StyledContent = styled(RadixTooltip.Content, { +const content = css({ borderRadius: 3, padding: '$3 $3 $3 $3', fontSize: '$1', @@ -40,7 +45,7 @@ const StyledContent = styled(RadixTooltip.Content, { userSelect: 'none', }) -const StyledArrow = styled(RadixTooltip.Arrow, { +const arrow = css({ fill: '$tooltipBg', margin: '0 8px', }) diff --git a/packages/tldraw/src/components/style-panel/align-distribute.tsx b/packages/tldraw/src/components/style-panel/align-distribute.tsx index d55df7a40..cffafeb84 100644 --- a/packages/tldraw/src/components/style-panel/align-distribute.tsx +++ b/packages/tldraw/src/components/style-panel/align-distribute.tsx @@ -13,7 +13,7 @@ import { } from '@radix-ui/react-icons' import { AlignType, DistributeType, StretchType } from '~types' import { useTLDrawContext } from '~hooks' -import { breakpoints, ButtonsRow, IconButton } from '../shared' +import { breakpoints, buttonsRow, iconButton } from '../shared' export interface AlignDistributeProps { hasTwoOrMore: boolean @@ -66,70 +66,80 @@ export const AlignDistribute = React.memo( return ( <> - - +
+ + +
+
+ + +
) } diff --git a/packages/tldraw/src/components/style-panel/quick-color-select.tsx b/packages/tldraw/src/components/style-panel/quick-color-select.tsx index 1a1355389..05f4a0677 100644 --- a/packages/tldraw/src/components/style-panel/quick-color-select.tsx +++ b/packages/tldraw/src/components/style-panel/quick-color-select.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import * as DropdownMenu from '@radix-ui/react-dropdown-menu' -import { BoxIcon, StyleDropdownItem, StyleDropdownContent } from './styled' +import { BoxIcon, dropdownItem, dropdownContent } from './styled' import { DropdownMenuIconTriggerButton } from '../shared' import { strokes } from '~shape' import { useTheme, useTLDrawContext } from '~hooks' @@ -28,11 +28,11 @@ export const QuickColorSelect = React.memo((): JSX.Element => { {Object.keys(strokes[theme]).map((colorStyle: string) => ( { {dashes[dash]} {Object.keys(DashStyle).map((dashStyle: string) => ( {dashes[dashStyle as DashStyle]} diff --git a/packages/tldraw/src/components/style-panel/quick-fill-select.tsx b/packages/tldraw/src/components/style-panel/quick-fill-select.tsx index c8efbbf4c..8bd895daa 100644 --- a/packages/tldraw/src/components/style-panel/quick-fill-select.tsx +++ b/packages/tldraw/src/components/style-panel/quick-fill-select.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import * as Checkbox from '@radix-ui/react-checkbox' import { BoxIcon, IsFilledFillIcon } from './styled' -import { breakpoints, Tooltip, IconButton, IconWrapper } from '../shared' +import { breakpoints, Tooltip, iconButton, iconWrapper } from '../shared' import { useTLDrawContext } from '~hooks' import type { Data } from '~types' @@ -20,18 +20,17 @@ export const QuickFillSelect = React.memo((): JSX.Element => { return ( - +
- +
) diff --git a/packages/tldraw/src/components/style-panel/quick-size-select.tsx b/packages/tldraw/src/components/style-panel/quick-size-select.tsx index 8cb97ba90..1c81a03b4 100644 --- a/packages/tldraw/src/components/style-panel/quick-size-select.tsx +++ b/packages/tldraw/src/components/style-panel/quick-size-select.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import { DropdownMenuIconTriggerButton } from '../shared/dropdown-menu' import { CircleIcon } from '../icons' -import { StyleDropdownContent, StyleDropdownItem } from './styled' +import { dropdownContent, dropdownItem } from './styled' import { Data, SizeStyle } from '~types' import { useTLDrawContext } from '~hooks' @@ -31,16 +31,14 @@ export const QuickSizeSelect = React.memo((): JSX.Element => { {Object.keys(SizeStyle).map((sizeStyle: string) => ( diff --git a/packages/tldraw/src/components/style-panel/shapes-functions.tsx b/packages/tldraw/src/components/style-panel/shapes-functions.tsx index a015c4260..bb4c4aed4 100644 --- a/packages/tldraw/src/components/style-panel/shapes-functions.tsx +++ b/packages/tldraw/src/components/style-panel/shapes-functions.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { IconButton, ButtonsRow, breakpoints } from '../shared' +import { iconButton, buttonsRow, breakpoints } from '../shared' import { Trash } from '../icons' import { Tooltip } from '../shared/tooltip' import { @@ -108,108 +108,108 @@ export const ShapesFunctions = React.memo(() => { return ( <> - - + - + - {isAllLocked ? : } - + - - + - - - - - +
+
+ - - + - - + - - + - + +
) }) diff --git a/packages/tldraw/src/components/style-panel/style-panel.tsx b/packages/tldraw/src/components/style-panel/style-panel.tsx index 288f2d79a..1dfd1679f 100644 --- a/packages/tldraw/src/components/style-panel/style-panel.tsx +++ b/packages/tldraw/src/components/style-panel/style-panel.tsx @@ -10,14 +10,14 @@ import { QuickSizeSelect } from './quick-size-select' import { QuickDashSelect } from './quick-dash-select' import { QuickFillSelect } from './quick-fill-select' import { Tooltip } from '../shared/tooltip' -import { Kbd } from '../shared/kbd' +import { kbd } from '../shared/kbd' import { - IconButton, - ButtonsRow, + iconButton, + buttonsRow, breakpoints, - RowButton, - FloatingContainer, - Divider, + rowButton, + floatingContainer, + divider, } from '../shared' const isStyleOpenSelector = (s: Data) => s.appState.isStyleOpen @@ -27,25 +27,24 @@ export function StylePanel(): JSX.Element { const isOpen = useSelector(isStyleOpenSelector) return ( - - +
+
- {isOpen ? : } - - + +
{isOpen && } - +
) } @@ -72,26 +71,30 @@ function SelectedShapeContent(): JSX.Element { return ( <> - +
- +
1} hasThreeOrMore={selectedShapesCount > 2} /> - - +
+ + + ) } diff --git a/packages/tldraw/src/components/style-panel/styled.tsx b/packages/tldraw/src/components/style-panel/styled.tsx index 44e87dc3b..9dda9f363 100644 --- a/packages/tldraw/src/components/style-panel/styled.tsx +++ b/packages/tldraw/src/components/style-panel/styled.tsx @@ -1,7 +1,7 @@ import * as React from 'react' -import styled from '~styles' +import css from '~styles' -export const StyleDropdownContent = styled('div', { +export const dropdownContent = css({ display: 'grid', padding: 4, gridTemplateColumns: 'repeat(4, 1fr)', @@ -19,7 +19,7 @@ export const StyleDropdownContent = styled('div', { }, }) -export const StyleDropdownItem = styled('button', { +export const dropdownItem = css({ height: '32px', width: '32px', backgroundColor: '$panel', diff --git a/packages/tldraw/src/components/tldraw/tldraw.tsx b/packages/tldraw/src/components/tldraw/tldraw.tsx index 184e0297c..ad768c14a 100644 --- a/packages/tldraw/src/components/tldraw/tldraw.tsx +++ b/packages/tldraw/src/components/tldraw/tldraw.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { IdProvider } from '@radix-ui/react-id' import { Renderer } from '@tldraw/core' -import styled from '~styles' +import css from '~styles' import { Data, TLDrawDocument, TLDrawStatus } from '~types' import { TLDrawState } from '~state' import { TLDrawContext, useCustomFonts, useKeyboardShortcuts, useTLDrawContext } from '~hooks' @@ -146,7 +146,7 @@ function InnerTldraw({ }, [currentPageId, tlstate]) return ( - +
- +
- - +
+
- +
) } -const Layout = styled('div', { +const layout = css({ position: 'absolute', height: '100%', width: '100%', @@ -245,11 +245,11 @@ const Layout = styled('div', { }, }) -const Spacer = styled('div', { +const spacer = css({ flexGrow: 2, }) -const MenuButtons = styled('div', { +const menuButtons = css({ display: 'flex', gap: 8, }) diff --git a/packages/tldraw/src/components/tools-panel/back-to-content.tsx b/packages/tldraw/src/components/tools-panel/back-to-content.tsx index 15b5d1fae..87ad14633 100644 --- a/packages/tldraw/src/components/tools-panel/back-to-content.tsx +++ b/packages/tldraw/src/components/tools-panel/back-to-content.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { FloatingContainer, RowButton } from '../shared' -import styled from '~styles' +import { floatingContainer, rowButton } from '../shared' +import css from '~styles' import type { Data } from '~types' import { useTLDrawContext } from '~hooks' @@ -16,13 +16,15 @@ export const BackToContent = React.memo(() => { if (!isEmptyCanvas) return null return ( - - Back to content - +
+ +
) }) -const BackToContentButton = styled(FloatingContainer, { +const backToContentButton = css(floatingContainer, { pointerEvents: 'all', width: 'fit-content', gridRow: 1, diff --git a/packages/tldraw/src/components/tools-panel/status-bar.tsx b/packages/tldraw/src/components/tools-panel/status-bar.tsx index e644e9b5d..d2529fc1b 100644 --- a/packages/tldraw/src/components/tools-panel/status-bar.tsx +++ b/packages/tldraw/src/components/tools-panel/status-bar.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { useTLDrawContext } from '~hooks' import type { Data } from '~types' -import styled from '~styles' +import css from '~styles' const statusSelector = (s: Data) => s.appState.status.current const activeToolSelector = (s: Data) => s.appState.activeTool @@ -12,15 +12,15 @@ export function StatusBar(): JSX.Element | null { const activeTool = useSelector(activeToolSelector) return ( - -
+
+
{activeTool} | {status} -
- +
+
) } -const StatusBarContainer = styled('div', { +const statusBarContainer = css({ height: 40, userSelect: 'none', borderTop: '1px solid $border', @@ -44,7 +44,7 @@ const StatusBarContainer = styled('div', { }, }) -const Section = styled('div', { +const section = css({ whiteSpace: 'nowrap', overflow: 'hidden', }) diff --git a/packages/tldraw/src/components/tools-panel/styled.tsx b/packages/tldraw/src/components/tools-panel/styled.tsx index bdc200525..4937c053c 100644 --- a/packages/tldraw/src/components/tools-panel/styled.tsx +++ b/packages/tldraw/src/components/tools-panel/styled.tsx @@ -1,9 +1,9 @@ import * as React from 'react' -import { FloatingContainer } from '../shared' +import { floatingContainer } from '../shared' import { Tooltip } from '../shared/tooltip' -import styled from '~styles' +import css from '~styles' -export const ToolButton = styled('button', { +export const toolButton = css({ position: 'relative', height: '32px', width: '32px', @@ -38,7 +38,7 @@ export const ToolButton = styled('button', { }, }) -export const PrimaryToolButton = styled(ToolButton, { +export const primaryToolButton = css(toolButton, { variants: { bp: { mobile: { @@ -65,7 +65,7 @@ export const PrimaryToolButton = styled(ToolButton, { }, }) -export const SecondaryToolButton = styled(ToolButton, { +export const secondaryToolButton = css(toolButton, { variants: { bp: { mobile: { @@ -92,7 +92,7 @@ export const SecondaryToolButton = styled(ToolButton, { }, }) -export const TertiaryToolButton = styled(ToolButton, { +export const tertiaryToolButton = css(toolButton, { variants: { bp: { mobile: { @@ -139,20 +139,22 @@ export function PrimaryButton({ }: PrimaryToolButtonProps): JSX.Element { return ( - {children} - + ) } @@ -176,20 +178,22 @@ export function SecondaryButton({ }: SecondaryToolButtonProps): JSX.Element { return ( - {children} - + ) } @@ -211,24 +215,26 @@ export function TertiaryButton({ }: TertiaryToolProps): JSX.Element { return ( - {children} - + ) } -export const TertiaryButtonsContainer = styled(FloatingContainer, { +export const tertiaryButtonsContainer = css(floatingContainer, { boxShadow: '$3', variants: { bp: { diff --git a/packages/tldraw/src/components/tools-panel/tools-panel.tsx b/packages/tldraw/src/components/tools-panel/tools-panel.tsx index 4a799450f..6611c9000 100644 --- a/packages/tldraw/src/components/tools-panel/tools-panel.tsx +++ b/packages/tldraw/src/components/tools-panel/tools-panel.tsx @@ -9,11 +9,11 @@ import { SquareIcon, TextIcon, } from '@radix-ui/react-icons' -import styled from '~styles' +import css from '~styles' import { Data, TLDrawShapeType } from '~types' import { useTLDrawContext } from '~hooks' import { StatusBar } from './status-bar' -import { FloatingContainer } from '../shared' +import { floatingContainer } from '../shared' import { PrimaryButton, SecondaryButton } from './styled' import { UndoRedo } from './undo-redo' import { Zoom } from './zoom' @@ -57,10 +57,10 @@ export const ToolsPanel = React.memo((): JSX.Element => { }, [tlstate]) return ( - - +
+
- +
{ > - - - +
+
+
- +
{ > - - - - +
+
+
+
{ > {isToolLocked ? : } - +
- +
{isDebugMode && ( - +
- +
)} - +
) }) -const ToolsPanelContainer = styled('div', { +const toolsPanelContainer = css({ position: 'absolute', bottom: 0, left: 0, @@ -160,7 +160,7 @@ const ToolsPanelContainer = styled('div', { }, }) -const CenterWrap = styled('div', { +const centerWrap = css({ gridRow: 1, gridColumn: 2, display: 'flex', @@ -171,7 +171,7 @@ const CenterWrap = styled('div', { gap: 12, }) -const LeftWrap = styled('div', { +const leftWrap = css({ gridRow: 1, gridColumn: 1, display: 'flex', @@ -198,7 +198,7 @@ const LeftWrap = styled('div', { }, }) -const RightWrap = styled('div', { +const rightWrap = css({ gridRow: 1, gridColumn: 3, display: 'flex', @@ -225,7 +225,7 @@ const RightWrap = styled('div', { }, }) -const StatusWrap = styled('div', { +const statusWrap = css({ gridRow: 2, gridColumn: '1 / span 3', }) diff --git a/packages/tldraw/src/components/tools-panel/undo-redo.tsx b/packages/tldraw/src/components/tools-panel/undo-redo.tsx index 4bef0ead8..4ad8af126 100644 --- a/packages/tldraw/src/components/tools-panel/undo-redo.tsx +++ b/packages/tldraw/src/components/tools-panel/undo-redo.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { useTLDrawContext } from '~hooks' -import { TertiaryButton, TertiaryButtonsContainer } from './styled' +import { TertiaryButton, tertiaryButtonsContainer } from './styled' import { Undo, Redo, Trash } from '../icons' export const UndoRedo = React.memo((): JSX.Element => { @@ -15,7 +15,7 @@ export const UndoRedo = React.memo((): JSX.Element => { }, [tlstate]) return ( - +
@@ -25,6 +25,6 @@ export const UndoRedo = React.memo((): JSX.Element => { - +
) }) diff --git a/packages/tldraw/src/components/tools-panel/zoom.tsx b/packages/tldraw/src/components/tools-panel/zoom.tsx index cc1dd6127..d64e84577 100644 --- a/packages/tldraw/src/components/tools-panel/zoom.tsx +++ b/packages/tldraw/src/components/tools-panel/zoom.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { ZoomInIcon, ZoomOutIcon } from '@radix-ui/react-icons' -import { TertiaryButton, TertiaryButtonsContainer } from './styled' +import { TertiaryButton, tertiaryButtonsContainer } from './styled' import { useTLDrawContext } from '~hooks' import type { Data } from '~types' @@ -8,7 +8,7 @@ export const Zoom = React.memo((): JSX.Element => { const { tlstate } = useTLDrawContext() return ( - +
@@ -16,7 +16,7 @@ export const Zoom = React.memo((): JSX.Element => { - +
) }) diff --git a/packages/tldraw/src/shape/shapes/text/text.tsx b/packages/tldraw/src/shape/shapes/text/text.tsx index 1ed1a3b45..e1e784bf9 100644 --- a/packages/tldraw/src/shape/shapes/text/text.tsx +++ b/packages/tldraw/src/shape/shapes/text/text.tsx @@ -4,7 +4,7 @@ import { HTMLContainer, TLBounds, Utils, ShapeUtil } from '@tldraw/core' import { Vec } from '@tldraw/vec' import { getShapeStyle, getFontStyle, defaultStyle } from '~shape/shape-styles' import { TextShape, TLDrawShapeType, TLDrawToolType, TLDrawMeta } from '~types' -import styled from '~styles' +import css from '~styles' import TextAreaUtils from './text-utils' const LETTER_SPACING = -1.5 @@ -162,9 +162,9 @@ export const Text = new ShapeUtil(() => ( return ( - - +