From 965c4c0e0eecc97e0b60f1ade47b6f77274dd263 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Wed, 7 Sep 2022 21:12:58 +0200 Subject: [PATCH] linter --- .../features/sidebar-left/sidebar-left.tsx | 2 -- .../controls/color/color-control.tsx | 24 ++++++++++--------- .../font-family/font-family-control.tsx | 13 +++++----- .../designer/features/style-panel/search.tsx | 6 ++--- .../features/style-panel/shared/configs.ts | 6 ++--- .../app/designer/features/topbar/publish.tsx | 1 + apps/designer/package.json | 1 - packages/design-system/package.json | 1 + yarn.lock | 2 +- 9 files changed, 28 insertions(+), 28 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx index bad2166485..abc70be177 100644 --- a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx +++ b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx @@ -1,8 +1,6 @@ import { useState } from "react"; import { useSubscribe, type Publish } from "~/shared/pubsub"; - import { - Box, SidebarTabs, SidebarTabsContent, SidebarTabsList, diff --git a/apps/designer/app/designer/features/style-panel/controls/color/color-control.tsx b/apps/designer/app/designer/features/style-panel/controls/color/color-control.tsx index 7844d82df6..2625a3e521 100644 --- a/apps/designer/app/designer/features/style-panel/controls/color/color-control.tsx +++ b/apps/designer/app/designer/features/style-panel/controls/color/color-control.tsx @@ -7,16 +7,15 @@ import { Popover, PopoverTrigger, PopoverContent, + PopoverPortal, TextField, Tooltip, + css, } from "@webstudio-is/design-system"; import { PropertyName } from "../../shared/property-name"; import { getFinalValue } from "../../shared/get-final-value"; import type { ControlProps } from "../../style-sections"; import { StyleConfig } from "../../shared/configs"; -import { PopoverPortal } from "@webstudio-is/design-system"; -import { css } from "@webstudio-is/design-system"; -import { styled } from "@webstudio-is/design-system"; const stringifyRGBA = (color: RGBColor) => { const { r, g, b, a = 1 } = color; @@ -24,7 +23,7 @@ const stringifyRGBA = (color: RGBColor) => { return `rgba(${r},${g},${b},${a})`; }; -const StyledPicker = styled(SketchPicker, { +const pickerStyle = css({ padding: "$2", background: "$panel", // @todo this lib doesn't have another way to define styles for inputs @@ -35,6 +34,13 @@ const StyledPicker = styled(SketchPicker, { }, }); +const defaultPickerStyles = { + default: { + // Workaround to allow overrides using className + picker: { padding: "", background: "" }, + }, +}; + type ColorPickerProps = { onChange: (value: string) => void; onChangeComplete: (value: string) => void; @@ -98,7 +104,7 @@ const ColorPicker = ({ - onChange(stringifyRGBA(color.rgb)) @@ -108,12 +114,8 @@ const ColorPicker = ({ }} // @todo to remove both when we have preset colors presetColors={[]} - styles={{ - default: { - // Workaround to allow overrides over styled() - picker: { padding: null, background: null }, - }, - }} + className={pickerStyle()} + styles={defaultPickerStyles} /> diff --git a/apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx b/apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx index 14b486dd1d..7c0659571c 100644 --- a/apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx +++ b/apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx @@ -20,7 +20,7 @@ const textFieldStyle = { export const FontFamilyControl = ({ currentStyle, inheritedStyle, - setProperty, + //setProperty, styleConfig, }: ControlProps) => { // @todo show which instance we inherited the value from @@ -32,7 +32,7 @@ export const FontFamilyControl = ({ if (value === undefined) return null; - const setValue = setProperty(styleConfig.property); + //const setValue = setProperty(styleConfig.property); return ( @@ -41,17 +41,16 @@ export const FontFamilyControl = ({ { - if (element) console.log(element.offsetLeft); - }} css={textFieldStyle} spellCheck={false} readOnly defaultValue={value.value} - onClick={() => {}} + onClick={() => { + // @todo show font picker + }} onKeyDown={(event) => { if (event.key === "Enter") { - console.log("show font picker"); + // @todo show font picker } }} /> diff --git a/apps/designer/app/designer/features/style-panel/search.tsx b/apps/designer/app/designer/features/style-panel/search.tsx index 68cf947a06..b547278880 100644 --- a/apps/designer/app/designer/features/style-panel/search.tsx +++ b/apps/designer/app/designer/features/style-panel/search.tsx @@ -1,5 +1,5 @@ -import { useState } from "react"; -import { css, IconButton, TextField } from "@webstudio-is/design-system"; +import { KeyboardEvent, useState } from "react"; +import { IconButton, TextField } from "@webstudio-is/design-system"; import { Cross2Icon, MagnifyingGlassIcon } from "@webstudio-is/icons"; import { components } from "@webstudio-is/react-sdk"; import type { SelectedInstanceData } from "~/shared/canvas-components"; @@ -32,7 +32,7 @@ export const Search = ({ onSearch, selectedInstanceData }: SearchProps) => { onReset={() => { setSearch(""); }} - onKeyDown={(event) => { + onKeyDown={(event: KeyboardEvent) => { if (event.key === "Escape") { event.currentTarget.reset(); } diff --git a/apps/designer/app/designer/features/style-panel/shared/configs.ts b/apps/designer/app/designer/features/style-panel/shared/configs.ts index 3a18f3fbfc..cbdf44a614 100644 --- a/apps/designer/app/designer/features/style-panel/shared/configs.ts +++ b/apps/designer/app/designer/features/style-panel/shared/configs.ts @@ -90,9 +90,9 @@ const getControl = (property: StyleProperty): Control => { case "placeContent": { return "Empty"; } - case "fontFamily": { - return "FontFamily"; - } + //case "fontFamily": { + // return "FontFamily"; + //} } return "Text"; diff --git a/apps/designer/app/designer/features/topbar/publish.tsx b/apps/designer/app/designer/features/topbar/publish.tsx index 747a01a6c3..411e00ec2a 100644 --- a/apps/designer/app/designer/features/topbar/publish.tsx +++ b/apps/designer/app/designer/features/topbar/publish.tsx @@ -10,6 +10,7 @@ import { PopoverPortal, TextField, Text, + __DEPRECATED__Text, Label, Link, useId, diff --git a/apps/designer/package.json b/apps/designer/package.json index 5c7f39c1db..c23a3ced3d 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -24,7 +24,6 @@ "@remix-run/serve": "^1.6.4", "@remix-run/vercel": "^1.6.4", "@sentry/remix": "^7.5.0", - "@stitches/react": "^1.2.7", "@vercel/node": "^2.4.1", "@webstudio-is/asset-uploader": "*", "@webstudio-is/design-system": "*", diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 4712a8807d..219b9ac416 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -60,6 +60,7 @@ "@radix-ui/react-toggle-group": "^1.0.0", "@radix-ui/react-tooltip": "^1.0.0", "@radix-ui/react-use-layout-effect": "^1.0.0", + "@stitches/react": "^1.2.8", "@webstudio-is/icons": "*", "react-hot-toast": "^2.3.0" }, diff --git a/yarn.lock b/yarn.lock index 56cfe39fd6..aca7adcc70 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3669,7 +3669,7 @@ resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173" integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg== -"@stitches/react@^1.2.7": +"@stitches/react@^1.2.8": version "1.2.8" resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.8.tgz#954f8008be8d9c65c4e58efa0937f32388ce3a38" integrity sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==