From c72148bff5d355d07e9d3b51c2e9aab1ca22e1b0 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Wed, 27 Jul 2022 23:47:06 +0200 Subject: [PATCH 1/2] moving design system into a package, adding linters in packages where me missed to add them --- apps/designer/.storybook/preview.js | 2 +- apps/designer/.storybook/preview.tsx | 2 +- .../app/auth/components/login-button.tsx | 2 +- apps/designer/app/auth/login.tsx | 8 ++- .../text-editor/example-text-editor.tsx | 2 +- apps/designer/app/critical-css.ts | 2 +- .../app/dashboard/components/card.tsx | 2 +- .../app/dashboard/components/header.tsx | 6 +- apps/designer/app/dashboard/dashboard.tsx | 2 +- apps/designer/app/designer/designer.tsx | 2 +- .../features/breadcrumbs/breadcrumbs.tsx | 2 +- .../breakpoints/breakpoints-editor.tsx | 2 +- .../features/breakpoints/breakpoints.tsx | 2 +- .../breakpoints/confirmation-dialog.tsx | 2 +- .../designer/features/breakpoints/preview.tsx | 2 +- .../features/breakpoints/trigger-button.tsx | 2 +- .../features/breakpoints/width-setting.tsx | 2 +- .../features/breakpoints/zoom-setting.tsx | 2 +- .../designer/features/inspector/inspector.tsx | 2 +- .../designer/features/props-panel/control.tsx | 4 +- .../features/props-panel/props-panel.tsx | 2 +- .../sidebar-left/panels/asset-manager.tsx | 2 +- .../panels/components/add-an-asset-form.tsx | 2 +- .../panels/components/component-thumb.tsx | 2 +- .../panels/components/components.tsx | 2 +- .../sidebar-left/panels/components/image.tsx | 2 +- .../features/sidebar-left/panels/tree.tsx | 2 +- .../features/sidebar-left/sidebar-left.tsx | 2 +- .../features/style-panel/lib/color-picker.tsx | 2 +- .../style-panel/lib/spacing-widget.tsx | 2 +- .../features/style-panel/render-property.tsx | 2 +- .../designer/features/style-panel/search.tsx | 2 +- .../features/style-panel/settings.tsx | 2 +- .../features/style-panel/style-panel.tsx | 2 +- .../designer/features/topbar/menu/menu.tsx | 2 +- .../features/topbar/menu/shortcut-hint.tsx | 2 +- .../app/designer/features/topbar/preview.tsx | 2 +- .../app/designer/features/topbar/publish.tsx | 4 +- .../app/designer/features/topbar/share.tsx | 2 +- .../designer/features/topbar/sync-status.tsx | 2 +- .../app/designer/features/topbar/topbar.tsx | 2 +- .../features/tree-preview/tree-preview.tsx | 2 +- .../features/workspace/canvas-iframe.tsx | 2 +- .../workspace/canvas-tools/canvas-tools.tsx | 2 +- .../workspace/canvas-tools/outline/label.tsx | 2 +- .../canvas-tools/outline/outline.tsx | 2 +- .../text-toolbar/text-toolbar.tsx | 2 +- .../designer/features/workspace/workspace.tsx | 2 +- .../shared/inspector/collapsible-section.tsx | 2 +- .../shared/inspector/component-info.tsx | 2 +- .../app/designer/shared/tree/tree.tsx | 2 +- apps/designer/app/shared/theme/theme.ts | 2 +- apps/designer/package.json | 30 +-------- packages/asset-uploader/package.json | 5 +- packages/design-system/LICENSE | 21 +++++++ packages/design-system/package.json | 61 +++++++++++++++++++ .../src}/components/accordion.tsx | 0 .../src}/components/alert-dialog.tsx | 0 .../design-system/src}/components/alert.tsx | 0 .../design-system/src}/components/app-bar.tsx | 0 .../design-system/src}/components/avatar.tsx | 0 .../design-system/src}/components/badge.tsx | 0 .../design-system/src}/components/banner.tsx | 0 .../design-system/src}/components/box.tsx | 0 .../design-system/src}/components/button.tsx | 0 .../design-system/src}/components/card.tsx | 0 .../src}/components/checkbox.tsx | 0 .../design-system/src}/components/code.tsx | 0 .../src}/components/combobox.stories.tsx | 0 .../src}/components/combobox.tsx | 0 .../src}/components/container.tsx | 0 .../src}/components/context-menu.tsx | 0 .../src}/components/control-group.tsx | 0 .../design-system/src}/components/dialog.tsx | 0 .../src}/components/dropdown-menu.tsx | 0 .../design-system/src}/components/flex.tsx | 0 .../design-system/src}/components/grid.tsx | 0 .../design-system/src}/components/heading.tsx | 0 .../src}/components/icon-button.tsx | 0 .../design-system/src}/components/image.tsx | 0 .../design-system/src}/components/kbd.tsx | 0 .../design-system/src}/components/label.tsx | 0 .../design-system/src}/components/link.tsx | 0 .../design-system/src}/components/menu.tsx | 0 .../design-system/src}/components/overlay.tsx | 0 .../design-system/src}/components/panel.tsx | 0 .../src}/components/paragraph.tsx | 0 .../design-system/src}/components/popover.tsx | 0 .../create-content-controller.stories.tsx | 0 .../primitives/create-content-controller.ts | 0 .../primitives/dnd/canvas.stories.tsx | 0 .../components/primitives/dnd/placement.tsx | 0 .../primitives/dnd/sortable-list.stories.tsx | 0 .../primitives/dnd/use-auto-scroll.ts | 0 .../components/primitives/dnd/use-drag.ts | 0 .../primitives/dnd/use-drop-target.ts | 0 .../components/primitives/dnd/use-move.ts | 0 .../numeric-gesture-control.stories.tsx | 0 .../primitives/numeric-gesture-control.ts | 0 .../src}/components/progress-bar.tsx | 0 .../src}/components/radio-card.tsx | 0 .../src}/components/radio-grid.tsx | 0 .../design-system/src}/components/radio.tsx | 0 .../src}/components/scrollbar.tsx | 0 .../design-system/src}/components/section.tsx | 0 .../src}/components/select.stories.tsx | 2 +- .../design-system/src}/components/select.tsx | 0 .../src}/components/separator.tsx | 0 .../design-system/src}/components/sheet.tsx | 0 .../src}/components/sidebar-tabs.tsx | 0 .../src}/components/simple-toggle.tsx | 0 .../src}/components/skeleton.tsx | 0 .../design-system/src}/components/slider.tsx | 0 .../design-system/src}/components/status.tsx | 0 .../design-system/src}/components/sub.tsx | 0 .../design-system/src}/components/sup.tsx | 0 .../design-system/src}/components/switch.tsx | 0 .../src}/components/tab-link.tsx | 0 .../design-system/src}/components/table.tsx | 0 .../design-system/src}/components/tabs.tsx | 0 .../src}/components/text-area.tsx | 0 .../src}/components/text-field.tsx | 0 .../design-system/src}/components/text.tsx | 0 .../src}/components/toggle-group.tsx | 0 .../design-system/src}/components/tooltip.tsx | 0 .../src}/components/tree-item.tsx | 0 .../src}/components/verified-badge.tsx | 0 .../design-system/src}/index.ts | 4 +- .../design-system/src}/stitches.config.ts | 0 packages/design-system/tsconfig.json | 17 ++++++ packages/icons/package.json | 2 +- packages/prisma-client/package.json | 2 +- packages/react-sdk/package.json | 3 +- packages/react-sdk/src/arg-types/utils.ts | 8 ++- packages/react-sdk/src/components/box.tsx | 2 +- packages/react-sdk/src/components/heading.tsx | 2 +- .../react-sdk/src/components/heading.ws.tsx | 6 -- .../react-sdk/src/components/input.ws.tsx | 1 - .../react-sdk/src/css/get-browser-style.ts | 4 +- packages/react-sdk/src/pubsub/subscribe.ts | 1 + packages/react-sdk/src/stitches/css.ts | 2 +- .../src/user-props/all-user-props.ts | 1 + .../src/user-props/use-user-props.ts | 2 +- 143 files changed, 187 insertions(+), 107 deletions(-) create mode 100644 packages/design-system/LICENSE create mode 100644 packages/design-system/package.json rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/accordion.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/alert-dialog.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/alert.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/app-bar.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/avatar.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/badge.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/banner.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/box.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/button.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/card.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/checkbox.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/code.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/combobox.stories.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/combobox.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/container.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/context-menu.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/control-group.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/dialog.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/dropdown-menu.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/flex.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/grid.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/heading.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/icon-button.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/image.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/kbd.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/label.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/link.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/menu.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/overlay.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/panel.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/paragraph.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/popover.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/create-content-controller.stories.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/create-content-controller.ts (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/dnd/canvas.stories.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/dnd/placement.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/dnd/sortable-list.stories.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/dnd/use-auto-scroll.ts (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/dnd/use-drag.ts (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/dnd/use-drop-target.ts (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/dnd/use-move.ts (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/numeric-gesture-control.stories.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/primitives/numeric-gesture-control.ts (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/progress-bar.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/radio-card.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/radio-grid.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/radio.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/scrollbar.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/section.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/select.stories.tsx (96%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/select.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/separator.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/sheet.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/sidebar-tabs.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/simple-toggle.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/skeleton.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/slider.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/status.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/sub.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/sup.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/switch.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/tab-link.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/table.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/tabs.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/text-area.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/text-field.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/text.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/toggle-group.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/tooltip.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/tree-item.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/components/verified-badge.tsx (100%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/index.ts (94%) rename {apps/designer/app/shared/design-system => packages/design-system/src}/stitches.config.ts (100%) create mode 100644 packages/design-system/tsconfig.json diff --git a/apps/designer/.storybook/preview.js b/apps/designer/.storybook/preview.js index 23bef6ff2e..c7593a925a 100644 --- a/apps/designer/.storybook/preview.js +++ b/apps/designer/.storybook/preview.js @@ -1,5 +1,5 @@ import React from "react"; -import { globalCss, darkTheme } from "../app/shared/design-system"; +import { globalCss, darkTheme } from "@webstudio-is/design-system"; const globalStyles = globalCss({ body: { diff --git a/apps/designer/.storybook/preview.tsx b/apps/designer/.storybook/preview.tsx index eeb7f83828..72373c71d6 100644 --- a/apps/designer/.storybook/preview.tsx +++ b/apps/designer/.storybook/preview.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { darkTheme, globalCss } from "~/shared/design-system"; +import { darkTheme, globalCss } from "@webstudio-is/design-system"; export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, diff --git a/apps/designer/app/auth/components/login-button.tsx b/apps/designer/app/auth/components/login-button.tsx index f0b5d1d658..ed354bde07 100644 --- a/apps/designer/app/auth/components/login-button.tsx +++ b/apps/designer/app/auth/components/login-button.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Button, Tooltip } from "~/shared/design-system"; +import { Button, Tooltip } from "@webstudio-is/design-system"; import env from "~/shared/env"; const isPreviewEnvironment = env.VERCEL_ENV === "preview"; diff --git a/apps/designer/app/auth/login.tsx b/apps/designer/app/auth/login.tsx index 4c5f713edd..60f93a3ba0 100644 --- a/apps/designer/app/auth/login.tsx +++ b/apps/designer/app/auth/login.tsx @@ -2,7 +2,13 @@ import { LinksFunction, MetaFunction } from "@remix-run/node"; import { Form, useLoaderData } from "@remix-run/react"; import { useState } from "react"; -import { Card, Flex, Heading, Text, TextField } from "~/shared/design-system"; +import { + Card, + Flex, + Heading, + Text, + TextField, +} from "@webstudio-is/design-system"; import interStyles from "~/shared/font-faces/inter.css"; import { GithubIcon, CommitIcon, GoogleIcon } from "@webstudio-is/icons"; diff --git a/apps/designer/app/canvas/features/wrapper-component/text-editor/example-text-editor.tsx b/apps/designer/app/canvas/features/wrapper-component/text-editor/example-text-editor.tsx index dd11ae6984..38c55084f3 100644 --- a/apps/designer/app/canvas/features/wrapper-component/text-editor/example-text-editor.tsx +++ b/apps/designer/app/canvas/features/wrapper-component/text-editor/example-text-editor.tsx @@ -5,7 +5,7 @@ import { type Instance, } from "@webstudio-is/react-sdk"; import { createInstance } from "~/shared/tree-utils"; -import { Box, Button } from "~/shared/design-system"; +import { Box, Button } from "@webstudio-is/design-system"; import { LexicalComposer, ContentEditable } from "./lexical"; import { TreeViewPlugin } from "./plugins/tree-view-plugin"; import { config } from "./config"; diff --git a/apps/designer/app/critical-css.ts b/apps/designer/app/critical-css.ts index 5d068dc5d4..a79e95cd53 100644 --- a/apps/designer/app/critical-css.ts +++ b/apps/designer/app/critical-css.ts @@ -2,7 +2,7 @@ import { insertCriticalCss as insert, getCssText as getCanvasCssText, } from "@webstudio-is/react-sdk"; -import { getCssText as getDesignerCssText } from "~/shared/design-system"; +import { getCssText as getDesignerCssText } from "@webstudio-is/design-system"; import config from "./config"; const getCssTextFunctions = { diff --git a/apps/designer/app/dashboard/components/card.tsx b/apps/designer/app/dashboard/components/card.tsx index 2e42769fcf..aaf238c5b8 100644 --- a/apps/designer/app/dashboard/components/card.tsx +++ b/apps/designer/app/dashboard/components/card.tsx @@ -10,7 +10,7 @@ import { Button, Heading, Text, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; type SelectProjectProjectCardProps = { projects: Array<{ id: string; title: string }>; diff --git a/apps/designer/app/dashboard/components/header.tsx b/apps/designer/app/dashboard/components/header.tsx index 07130768f1..379c29bdc6 100644 --- a/apps/designer/app/dashboard/components/header.tsx +++ b/apps/designer/app/dashboard/components/header.tsx @@ -1,5 +1,5 @@ -import { ChevronDownIcon } from "@radix-ui/react-icons"; -import { Avatar } from "~/shared/design-system/components/avatar"; +import { ChevronDownIcon } from "@webstudio-is/icons"; +import { Avatar } from "@webstudio-is/design-system"; import { DropdownMenu, DropdownMenuTrigger, @@ -8,7 +8,7 @@ import { Button, Text, Flex, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; import { User } from "@webstudio-is/prisma-client"; import { useNavigate } from "react-router-dom"; diff --git a/apps/designer/app/dashboard/dashboard.tsx b/apps/designer/app/dashboard/dashboard.tsx index 72881fc561..3066b751cf 100644 --- a/apps/designer/app/dashboard/dashboard.tsx +++ b/apps/designer/app/dashboard/dashboard.tsx @@ -1,6 +1,6 @@ import { useActionData } from "@remix-run/react"; -import { Flex } from "~/shared/design-system"; +import { Flex } from "@webstudio-is/design-system"; import interStyles from "~/shared/font-faces/inter.css"; import dashboardStyles from "./dashboard.css"; import { User } from "@webstudio-is/prisma-client"; diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx index 43b14a34b8..fef2db5c3e 100644 --- a/apps/designer/app/designer/designer.tsx +++ b/apps/designer/app/designer/designer.tsx @@ -8,7 +8,7 @@ import type { HoveredInstanceData, SelectedInstanceData, } from "~/shared/canvas-components"; -import { Box, Flex, Grid, type CSS } from "~/shared/design-system"; +import { Box, Flex, Grid, type CSS } from "@webstudio-is/design-system"; import interStyles from "~/shared/font-faces/inter.css"; import { SidebarLeft } from "./features/sidebar-left"; import { Inspector } from "./features/inspector"; diff --git a/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx b/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx index 1eb92573b8..321bcf4ecf 100644 --- a/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx +++ b/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx @@ -1,5 +1,5 @@ import { ChevronRightIcon } from "@webstudio-is/icons"; -import { Button, Flex, Text, darkTheme } from "~/shared/design-system"; +import { Button, Flex, Text, darkTheme } from "@webstudio-is/design-system"; import { useSelectedInstancePath } from "../../shared/instance/use-selected-instance-path"; import { type Publish, type Instance } from "@webstudio-is/react-sdk"; import { useSelectedInstanceData } from "~/designer/shared/nano-states"; diff --git a/apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx b/apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx index c1e9d26721..ee69b01042 100644 --- a/apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx +++ b/apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import useDebounce from "react-use/lib/useDebounce"; import { type Breakpoint, type Publish } from "@webstudio-is/react-sdk"; -import { Button, TextField, Flex, Text } from "~/shared/design-system"; +import { Button, TextField, Flex, Text } from "@webstudio-is/design-system"; import { PlusIcon, TrashIcon } from "@webstudio-is/icons"; import ObjectId from "bson-objectid"; import { useBreakpoints } from "~/shared/nano-states"; diff --git a/apps/designer/app/designer/features/breakpoints/breakpoints.tsx b/apps/designer/app/designer/features/breakpoints/breakpoints.tsx index 937a293a38..8a4801be85 100644 --- a/apps/designer/app/designer/features/breakpoints/breakpoints.tsx +++ b/apps/designer/app/designer/features/breakpoints/breakpoints.tsx @@ -14,7 +14,7 @@ import { DropdownMenuCheckboxItem, Text, Flex, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; import { sort } from "~/shared/breakpoints"; import { useSelectedBreakpoint } from "../../shared/nano-states"; import { BreakpointsEditor } from "./breakpoints-editor"; diff --git a/apps/designer/app/designer/features/breakpoints/confirmation-dialog.tsx b/apps/designer/app/designer/features/breakpoints/confirmation-dialog.tsx index 11554c9332..10a434bf34 100644 --- a/apps/designer/app/designer/features/breakpoints/confirmation-dialog.tsx +++ b/apps/designer/app/designer/features/breakpoints/confirmation-dialog.tsx @@ -1,5 +1,5 @@ import { type Breakpoint } from "@webstudio-is/react-sdk"; -import { Button, Flex, Text } from "~/shared/design-system"; +import { Button, Flex, Text } from "@webstudio-is/design-system"; type ConfirmationDialogProps = { onAbort: () => void; diff --git a/apps/designer/app/designer/features/breakpoints/preview.tsx b/apps/designer/app/designer/features/breakpoints/preview.tsx index 558792e460..8a706d719d 100644 --- a/apps/designer/app/designer/features/breakpoints/preview.tsx +++ b/apps/designer/app/designer/features/breakpoints/preview.tsx @@ -1,5 +1,5 @@ import { type Breakpoint } from "@webstudio-is/react-sdk"; -import { Paragraph, Flex, Text } from "~/shared/design-system"; +import { Paragraph, Flex, Text } from "@webstudio-is/design-system"; type PreviewProps = { breakpoint?: Breakpoint; diff --git a/apps/designer/app/designer/features/breakpoints/trigger-button.tsx b/apps/designer/app/designer/features/breakpoints/trigger-button.tsx index 0782827c37..599ce6bf8f 100644 --- a/apps/designer/app/designer/features/breakpoints/trigger-button.tsx +++ b/apps/designer/app/designer/features/breakpoints/trigger-button.tsx @@ -6,7 +6,7 @@ import { useSelectedBreakpoint, } from "~/designer/shared/nano-states"; import { willRender } from "~/designer/shared/breakpoints"; -import { Button, Text } from "~/shared/design-system"; +import { Button, Text } from "@webstudio-is/design-system"; import { DesktopIcon, LaptopIcon, diff --git a/apps/designer/app/designer/features/breakpoints/width-setting.tsx b/apps/designer/app/designer/features/breakpoints/width-setting.tsx index 461ff9e5a6..630083f5da 100644 --- a/apps/designer/app/designer/features/breakpoints/width-setting.tsx +++ b/apps/designer/app/designer/features/breakpoints/width-setting.tsx @@ -3,7 +3,7 @@ import { useCanvasWidth, useSelectedBreakpoint, } from "~/designer/shared/nano-states"; -import { Slider, Text, Flex } from "~/shared/design-system"; +import { Slider, Text, Flex } from "@webstudio-is/design-system"; import { sort } from "~/shared/breakpoints"; import { useBreakpoints, useIsPreviewMode } from "~/shared/nano-states"; diff --git a/apps/designer/app/designer/features/breakpoints/zoom-setting.tsx b/apps/designer/app/designer/features/breakpoints/zoom-setting.tsx index ee481c34d1..4c8f456810 100644 --- a/apps/designer/app/designer/features/breakpoints/zoom-setting.tsx +++ b/apps/designer/app/designer/features/breakpoints/zoom-setting.tsx @@ -1,5 +1,5 @@ import { useZoom } from "~/designer/shared/nano-states"; -import { Slider, Text, Flex } from "~/shared/design-system"; +import { Slider, Text, Flex } from "@webstudio-is/design-system"; export const minZoom = 10; diff --git a/apps/designer/app/designer/features/inspector/inspector.tsx b/apps/designer/app/designer/features/inspector/inspector.tsx index 02973722b9..f9e428fe36 100644 --- a/apps/designer/app/designer/features/inspector/inspector.tsx +++ b/apps/designer/app/designer/features/inspector/inspector.tsx @@ -8,7 +8,7 @@ import { Card, Paragraph, Box, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; import { StylePanel } from "~/designer/features/style-panel"; import { PropsPanel } from "~/designer/features/props-panel"; import { useSelectedInstanceData } from "~/designer/shared/nano-states"; diff --git a/apps/designer/app/designer/features/props-panel/control.tsx b/apps/designer/app/designer/features/props-panel/control.tsx index 38572e6bfd..c6da2f2903 100644 --- a/apps/designer/app/designer/features/props-panel/control.tsx +++ b/apps/designer/app/designer/features/props-panel/control.tsx @@ -10,8 +10,8 @@ import { Switch, Text, TextField, -} from "~/shared/design-system"; -import { Checkbox } from "~/shared/design-system/components/checkbox"; +} from "@webstudio-is/design-system"; +import { Checkbox } from "@webstudio-is/design-system"; type BaseControlProps = { value?: T; diff --git a/apps/designer/app/designer/features/props-panel/props-panel.tsx b/apps/designer/app/designer/features/props-panel/props-panel.tsx index 004a036fe7..b2f2c1c925 100644 --- a/apps/designer/app/designer/features/props-panel/props-panel.tsx +++ b/apps/designer/app/designer/features/props-panel/props-panel.tsx @@ -15,7 +15,7 @@ import { ComboboxPopperContent, Grid, Tooltip, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; import { PlusIcon, TrashIcon, diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 1e038afcd9..5cd97686ea 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -1,5 +1,5 @@ import { ImageIcon } from "@webstudio-is/icons"; -import { Flex, Grid, Heading } from "~/shared/design-system"; +import { Flex, Grid, Heading } from "@webstudio-is/design-system"; import { useEffect, useState } from "react"; import { useActionData } from "@remix-run/react"; import { Asset } from "@webstudio-is/prisma-client"; diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx index a19c673c17..ebf8f82f81 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx @@ -2,7 +2,7 @@ import { Form, useSubmit } from "@remix-run/react"; import { Asset } from "@webstudio-is/prisma-client"; import ObjectID from "bson-objectid"; import { ChangeEvent, useRef } from "react"; -import { Button } from "~/shared/design-system"; +import { Button } from "@webstudio-is/design-system"; import { UploadingAsset } from "../../types"; const readImages = async (fileList: FileList) => { diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/component-thumb.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/component-thumb.tsx index a0e2081305..64455e5ab3 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/component-thumb.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/component-thumb.tsx @@ -1,6 +1,6 @@ import { type Instance, components } from "@webstudio-is/react-sdk"; import { forwardRef, type ElementRef, type ComponentProps } from "react"; -import { Flex, Text, styled } from "~/shared/design-system"; +import { Flex, Text, styled } from "@webstudio-is/design-system"; const Thumb = styled(Flex, { px: 5, diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/components.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/components.tsx index 6861f1cc60..4d6560f7bb 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/components.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/components.tsx @@ -6,7 +6,7 @@ import { type Publish, components, } from "@webstudio-is/react-sdk"; -import { Flex } from "~/shared/design-system"; +import { Flex } from "@webstudio-is/design-system"; import { PlusIcon } from "@webstudio-is/icons"; import { type DragData } from "~/shared/canvas-components"; import { createInstance } from "~/shared/tree-utils"; diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 369b850e82..c52cf3925c 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { Box, ProgressBar } from "~/shared/design-system"; +import { Box, ProgressBar } from "@webstudio-is/design-system"; import { useInterval } from "react-use"; import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; diff --git a/apps/designer/app/designer/features/sidebar-left/panels/tree.tsx b/apps/designer/app/designer/features/sidebar-left/panels/tree.tsx index d9121b9d2e..01d0b75d94 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/tree.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/tree.tsx @@ -1,6 +1,6 @@ import { type Instance, type Publish } from "@webstudio-is/react-sdk"; import { ListNestedIcon } from "@webstudio-is/icons"; -import { Flex } from "~/shared/design-system"; +import { Flex } from "@webstudio-is/design-system"; import { type SelectedInstanceData } from "~/shared/canvas-components"; import { useSelectedInstancePath } from "~/designer/shared/instance/use-selected-instance-path"; import { Tree } from "~/designer/shared/tree"; 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 65b9cd96b8..5b6376d490 100644 --- a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx +++ b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx @@ -7,7 +7,7 @@ import { SidebarTabsContent, SidebarTabsList, SidebarTabsTrigger, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; import { useSelectedInstanceData } from "../../shared/nano-states"; import { panels } from "./panels"; import type { TabName } from "./types"; diff --git a/apps/designer/app/designer/features/style-panel/lib/color-picker.tsx b/apps/designer/app/designer/features/style-panel/lib/color-picker.tsx index e3fb77baa5..48403714d5 100644 --- a/apps/designer/app/designer/features/style-panel/lib/color-picker.tsx +++ b/apps/designer/app/designer/features/style-panel/lib/color-picker.tsx @@ -7,7 +7,7 @@ import { PopoverTrigger, PopoverContent, TextField, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; const stringifyRGBA = (color: RGBColor) => { const { r, g, b, a = 1 } = color; diff --git a/apps/designer/app/designer/features/style-panel/lib/spacing-widget.tsx b/apps/designer/app/designer/features/style-panel/lib/spacing-widget.tsx index 0b95652f29..d7b3860cf3 100644 --- a/apps/designer/app/designer/features/style-panel/lib/spacing-widget.tsx +++ b/apps/designer/app/designer/features/style-panel/lib/spacing-widget.tsx @@ -4,7 +4,7 @@ import { type StyleProperty, type StyleValue, } from "@webstudio-is/react-sdk"; -import { Box } from "~/shared/design-system"; +import { Box } from "@webstudio-is/design-system"; import { SetProperty } from "../use-style-data"; import { useIsFromCurrentBreakpoint } from "./utils/use-is-from-current-breakpoint"; import { propertyNameColorForSelectedBreakpoint } from "./constants"; diff --git a/apps/designer/app/designer/features/style-panel/render-property.tsx b/apps/designer/app/designer/features/style-panel/render-property.tsx index d96d4319fb..0f2c6b62bd 100644 --- a/apps/designer/app/designer/features/style-panel/render-property.tsx +++ b/apps/designer/app/designer/features/style-panel/render-property.tsx @@ -6,7 +6,7 @@ import { Combobox, ComboboxTextField, ComboboxPopperContent, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; import type { StyleConfig } from "~/shared/style-panel-configs"; import { categories, diff --git a/apps/designer/app/designer/features/style-panel/search.tsx b/apps/designer/app/designer/features/style-panel/search.tsx index 1a38de4e33..a8fd31d040 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 "~/shared/design-system"; +import { css, IconButton, TextField } from "@webstudio-is/design-system"; import { Cross1Icon } from "@webstudio-is/icons"; const formStyle = css({ diff --git a/apps/designer/app/designer/features/style-panel/settings.tsx b/apps/designer/app/designer/features/style-panel/settings.tsx index 4fc61a93bd..22bfb3dec1 100644 --- a/apps/designer/app/designer/features/style-panel/settings.tsx +++ b/apps/designer/app/designer/features/style-panel/settings.tsx @@ -6,7 +6,7 @@ import { type Category, type Style, } from "@webstudio-is/react-sdk"; -import { Flex, Collapsible, Button } from "~/shared/design-system"; +import { Flex, Collapsible, Button } from "@webstudio-is/design-system"; import { TriangleRightIcon, TriangleDownIcon } from "@webstudio-is/icons"; import { styleConfigs, type StyleConfig } from "~/shared/style-panel-configs"; import { CollapsibleSection } from "~/designer/shared/inspector"; diff --git a/apps/designer/app/designer/features/style-panel/style-panel.tsx b/apps/designer/app/designer/features/style-panel/style-panel.tsx index 2795024f0b..d56d456e01 100644 --- a/apps/designer/app/designer/features/style-panel/style-panel.tsx +++ b/apps/designer/app/designer/features/style-panel/style-panel.tsx @@ -1,6 +1,6 @@ import type { Publish } from "@webstudio-is/react-sdk"; import { willRender } from "~/designer/shared/breakpoints"; -import { Box, Card, Paragraph } from "~/shared/design-system"; +import { Box, Card, Paragraph } from "@webstudio-is/design-system"; import type { SelectedInstanceData } from "~/shared/canvas-components"; import { useStyleData } from "./use-style-data"; import { VisualSettings } from "./settings"; diff --git a/apps/designer/app/designer/features/topbar/menu/menu.tsx b/apps/designer/app/designer/features/topbar/menu/menu.tsx index 4abf36363e..c3ebd7b0fe 100644 --- a/apps/designer/app/designer/features/topbar/menu/menu.tsx +++ b/apps/designer/app/designer/features/topbar/menu/menu.tsx @@ -11,7 +11,7 @@ import { DropdownMenuSeparator, IconButton, Box, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; import { HamburgerMenuIcon, ChevronRightIcon } from "@webstudio-is/icons"; import type { Config } from "~/config"; import { ShortcutHint } from "./shortcut-hint"; diff --git a/apps/designer/app/designer/features/topbar/menu/shortcut-hint.tsx b/apps/designer/app/designer/features/topbar/menu/shortcut-hint.tsx index 0825e36714..d84148539a 100644 --- a/apps/designer/app/designer/features/topbar/menu/shortcut-hint.tsx +++ b/apps/designer/app/designer/features/topbar/menu/shortcut-hint.tsx @@ -1,4 +1,4 @@ -import { Text } from "~/shared/design-system"; +import { Text } from "@webstudio-is/design-system"; const isMac = typeof navigator === "object" ? /mac/i.test(navigator.platform) : false; diff --git a/apps/designer/app/designer/features/topbar/preview.tsx b/apps/designer/app/designer/features/topbar/preview.tsx index 0325804675..62a2585216 100644 --- a/apps/designer/app/designer/features/topbar/preview.tsx +++ b/apps/designer/app/designer/features/topbar/preview.tsx @@ -1,6 +1,6 @@ import { useSubscribe, type Publish } from "@webstudio-is/react-sdk"; import { EyeOpenIcon } from "@webstudio-is/icons"; -import { SimpleToggle } from "~/shared/design-system"; +import { SimpleToggle } from "@webstudio-is/design-system"; import { useIsPreviewMode } from "~/shared/nano-states"; type PreviewButtonProps = { diff --git a/apps/designer/app/designer/features/topbar/publish.tsx b/apps/designer/app/designer/features/topbar/publish.tsx index 379da0a8a2..2a3ae45e4c 100644 --- a/apps/designer/app/designer/features/topbar/publish.tsx +++ b/apps/designer/app/designer/features/topbar/publish.tsx @@ -1,6 +1,5 @@ import { useState, useEffect } from "react"; import { useFetcher } from "@remix-run/react"; -import { useId } from "@radix-ui/react-id"; import { RocketIcon, ExternalLinkIcon } from "@webstudio-is/icons"; import { type Project } from "@webstudio-is/prisma-client"; import { @@ -13,7 +12,8 @@ import { Text, Label, Link, -} from "~/shared/design-system"; + useId, +} from "@webstudio-is/design-system"; import { useIsPublishDialogOpen } from "../../shared/nano-states"; type PublishButtonProps = { project: Project }; diff --git a/apps/designer/app/designer/features/topbar/share.tsx b/apps/designer/app/designer/features/topbar/share.tsx index 9297bef4b7..6581e792d3 100644 --- a/apps/designer/app/designer/features/topbar/share.tsx +++ b/apps/designer/app/designer/features/topbar/share.tsx @@ -6,7 +6,7 @@ import { PopoverContent, PopoverTrigger, TextField, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; import { Share1Icon } from "@webstudio-is/icons"; import { type Project } from "@webstudio-is/prisma-client"; import { useIsShareDialogOpen } from "../../shared/nano-states"; diff --git a/apps/designer/app/designer/features/topbar/sync-status.tsx b/apps/designer/app/designer/features/topbar/sync-status.tsx index b401523133..19bedba285 100644 --- a/apps/designer/app/designer/features/topbar/sync-status.tsx +++ b/apps/designer/app/designer/features/topbar/sync-status.tsx @@ -4,7 +4,7 @@ import { AccessibleIcon, styled, Box, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; import { CheckIcon, DotsHorizontalIcon } from "@webstudio-is/icons"; import { useSyncStatus } from "../../shared/nano-states"; diff --git a/apps/designer/app/designer/features/topbar/topbar.tsx b/apps/designer/app/designer/features/topbar/topbar.tsx index 9ec3d4b8ca..123b7cbba0 100644 --- a/apps/designer/app/designer/features/topbar/topbar.tsx +++ b/apps/designer/app/designer/features/topbar/topbar.tsx @@ -1,6 +1,6 @@ import type { Publish } from "@webstudio-is/react-sdk"; import type { Project } from "@webstudio-is/prisma-client"; -import { darkTheme, Flex, type CSS } from "~/shared/design-system"; +import { darkTheme, Flex, type CSS } from "@webstudio-is/design-system"; import type { Config } from "~/config"; import { PreviewButton } from "./preview"; import { ShareButton } from "./share"; diff --git a/apps/designer/app/designer/features/tree-preview/tree-preview.tsx b/apps/designer/app/designer/features/tree-preview/tree-preview.tsx index fd70b8a7f4..63e62ccac6 100644 --- a/apps/designer/app/designer/features/tree-preview/tree-preview.tsx +++ b/apps/designer/app/designer/features/tree-preview/tree-preview.tsx @@ -3,7 +3,7 @@ import produce from "immer"; import { useState } from "react"; import { Tree } from "~/designer/shared/tree"; import { type DragData, type DropData } from "~/shared/canvas-components"; -import { Flex } from "~/shared/design-system"; +import { Flex } from "@webstudio-is/design-system"; import { useRootInstance } from "~/shared/nano-states"; import { findInstanceById, diff --git a/apps/designer/app/designer/features/workspace/canvas-iframe.tsx b/apps/designer/app/designer/features/workspace/canvas-iframe.tsx index 280281c239..08e9aa7b64 100644 --- a/apps/designer/app/designer/features/workspace/canvas-iframe.tsx +++ b/apps/designer/app/designer/features/workspace/canvas-iframe.tsx @@ -1,5 +1,5 @@ import { forwardRef } from "react"; -import { CSS, css } from "~/shared/design-system"; +import { CSS, css } from "@webstudio-is/design-system"; const iframeStyle = css({ border: "none", diff --git a/apps/designer/app/designer/features/workspace/canvas-tools/canvas-tools.tsx b/apps/designer/app/designer/features/workspace/canvas-tools/canvas-tools.tsx index 425c5f68c3..d4d9d1cf13 100644 --- a/apps/designer/app/designer/features/workspace/canvas-tools/canvas-tools.tsx +++ b/apps/designer/app/designer/features/workspace/canvas-tools/canvas-tools.tsx @@ -1,5 +1,5 @@ import { type Publish } from "@webstudio-is/react-sdk"; -import { Box } from "~/shared/design-system"; +import { Box } from "@webstudio-is/design-system"; import { useIsPreviewMode, useIsScrolling, diff --git a/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx b/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx index c481b0c5d6..e464ddf65d 100644 --- a/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx +++ b/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx @@ -1,5 +1,5 @@ import { useCallback, useState } from "react"; -import { styled } from "~/shared/design-system"; +import { styled } from "@webstudio-is/design-system"; import { type Instance, components } from "@webstudio-is/react-sdk"; type LabelPosition = "top" | "inside" | "bottom"; diff --git a/apps/designer/app/designer/features/workspace/canvas-tools/outline/outline.tsx b/apps/designer/app/designer/features/workspace/canvas-tools/outline/outline.tsx index 511a6d33eb..c4756f601e 100644 --- a/apps/designer/app/designer/features/workspace/canvas-tools/outline/outline.tsx +++ b/apps/designer/app/designer/features/workspace/canvas-tools/outline/outline.tsx @@ -1,5 +1,5 @@ import { useMemo } from "react"; -import { styled } from "~/shared/design-system"; +import { styled } from "@webstudio-is/design-system"; const OutlineContainer = styled("div", { position: "absolute", diff --git a/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx b/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx index fe9d095e6f..8e1e206b76 100644 --- a/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx +++ b/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx @@ -4,7 +4,7 @@ import { useSelectedInstanceData, useSelectionRect, } from "~/designer/shared/nano-states"; -import { ToggleGroup, type CSS } from "~/shared/design-system"; +import { ToggleGroup, type CSS } from "@webstudio-is/design-system"; import { FontBoldIcon, FontItalicIcon, Link2Icon } from "@webstudio-is/icons"; import { createInstance } from "~/shared/tree-utils"; diff --git a/apps/designer/app/designer/features/workspace/workspace.tsx b/apps/designer/app/designer/features/workspace/workspace.tsx index 916e0f0332..41b0d6a7e3 100644 --- a/apps/designer/app/designer/features/workspace/workspace.tsx +++ b/apps/designer/app/designer/features/workspace/workspace.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from "~/shared/design-system"; +import { Box, Flex } from "@webstudio-is/design-system"; import { useCanvasWidth, useZoom } from "~/designer/shared/nano-states"; import { CanvasTools } from "./canvas-tools"; import { type Publish } from "@webstudio-is/react-sdk"; diff --git a/apps/designer/app/designer/shared/inspector/collapsible-section.tsx b/apps/designer/app/designer/shared/inspector/collapsible-section.tsx index 7aa394a8ac..1af6fb4f73 100644 --- a/apps/designer/app/designer/shared/inspector/collapsible-section.tsx +++ b/apps/designer/app/designer/shared/inspector/collapsible-section.tsx @@ -1,5 +1,5 @@ import { createValueContainer, useValue } from "react-nano-state"; -import { Box, Flex, Text, Collapsible } from "~/shared/design-system"; +import { Box, Flex, Text, Collapsible } from "@webstudio-is/design-system"; import { ChevronDownIcon, ChevronRightIcon } from "@webstudio-is/icons"; type CollapsibleSectionProps = { diff --git a/apps/designer/app/designer/shared/inspector/component-info.tsx b/apps/designer/app/designer/shared/inspector/component-info.tsx index 3e0ad64306..421168a928 100644 --- a/apps/designer/app/designer/shared/inspector/component-info.tsx +++ b/apps/designer/app/designer/shared/inspector/component-info.tsx @@ -1,5 +1,5 @@ import { components } from "@webstudio-is/react-sdk"; -import { Flex, Text } from "~/shared/design-system"; +import { Flex, Text } from "@webstudio-is/design-system"; import type { SelectedInstanceData } from "~/shared/canvas-components"; export const ComponentInfo = ({ diff --git a/apps/designer/app/designer/shared/tree/tree.tsx b/apps/designer/app/designer/shared/tree/tree.tsx index 41adea19a3..a4aaf943c2 100644 --- a/apps/designer/app/designer/shared/tree/tree.tsx +++ b/apps/designer/app/designer/shared/tree/tree.tsx @@ -7,7 +7,7 @@ import { Button, keyframes, styled, -} from "~/shared/design-system"; +} from "@webstudio-is/design-system"; import { TriangleRightIcon, TriangleDownIcon } from "@webstudio-is/icons"; import noop from "lodash.noop"; diff --git a/apps/designer/app/shared/theme/theme.ts b/apps/designer/app/shared/theme/theme.ts index f33f49c7c8..577df22b1c 100644 --- a/apps/designer/app/shared/theme/theme.ts +++ b/apps/designer/app/shared/theme/theme.ts @@ -1,5 +1,5 @@ import { useLoaderData } from "@remix-run/react"; -import { darkTheme } from "~/shared/design-system"; +import { darkTheme } from "@webstudio-is/design-system"; import type { ColorScheme, ThemeSetting } from "./types"; // User selected theme setting. diff --git a/apps/designer/package.json b/apps/designer/package.json index 928940c399..c5956ff7c5 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -17,34 +17,6 @@ }, "dependencies": { "@lexical/react": "^0.3.5", - "@radix-ui/colors": "^0.1.8", - "@radix-ui/react-accessible-icon": "^0.1.4", - "@radix-ui/react-accordion": "^0.1.6", - "@radix-ui/react-alert-dialog": "^0.1.7", - "@radix-ui/react-avatar": "^0.1.4", - "@radix-ui/react-checkbox": "^0.1.5", - "@radix-ui/react-collapsible": "^0.1.6", - "@radix-ui/react-context-menu": "^0.1.6", - "@radix-ui/react-dialog": "^0.1.7", - "@radix-ui/react-dropdown-menu": "^0.1.6", - "@radix-ui/react-icons": "^1.1.0", - "@radix-ui/react-id": "^0.1.5", - "@radix-ui/react-label": "^0.1.5", - "@radix-ui/react-menu": "^0.1.6", - "@radix-ui/react-popover": "^0.1.6", - "@radix-ui/react-popper": "^1.0.0", - "@radix-ui/react-portal": "^0.1.4", - "@radix-ui/react-progress": "^0.1.4", - "@radix-ui/react-radio-group": "^0.1.5", - "@radix-ui/react-select": "^0.1.1", - "@radix-ui/react-separator": "^0.1.4", - "@radix-ui/react-slider": "^0.1.4", - "@radix-ui/react-switch": "^0.1.5", - "@radix-ui/react-tabs": "^0.1.5", - "@radix-ui/react-toggle": "^0.1.4", - "@radix-ui/react-toggle-group": "^0.1.5", - "@radix-ui/react-tooltip": "^0.1.7", - "@radix-ui/react-use-layout-effect": "^0.1.0", "@react-aria/utils": "^3.13.1", "@remix-run/node": "^1.6.4", "@remix-run/react": "^1.6.4", @@ -56,6 +28,8 @@ "@webstudio-is/asset-uploader": "*", "@webstudio-is/react-sdk": "*", "@webstudio-is/prisma-client": "*", + "@webstudio-is/design-system": "*", + "@webstudio-is/icons": "*", "bson-objectid": "^2.0.2", "camelcase": "^6.3.0", "debug": "^4.3.4", diff --git a/packages/asset-uploader/package.json b/packages/asset-uploader/package.json index 75a872e23c..cbef3f028d 100644 --- a/packages/asset-uploader/package.json +++ b/packages/asset-uploader/package.json @@ -7,9 +7,10 @@ "scripts": { "typecheck": "tsc --noEmit", "test": "jest", - "checks": "yarn typecheck && yarn test", + "checks": "yarn typecheck && yarn lint && yarn test", "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib", - "build": "rm -fr lib && tsc" + "build": "rm -fr lib && tsc", + "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0" }, "dependencies": { "@aws-sdk/client-s3": "^3.131.0", diff --git a/packages/design-system/LICENSE b/packages/design-system/LICENSE new file mode 100644 index 0000000000..1f6edad9a7 --- /dev/null +++ b/packages/design-system/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Webstudio + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/design-system/package.json b/packages/design-system/package.json new file mode 100644 index 0000000000..394a776160 --- /dev/null +++ b/packages/design-system/package.json @@ -0,0 +1,61 @@ +{ + "name": "@webstudio-is/design-system", + "version": "0.1.0", + "description": "Webstudio Design System", + "author": "Webstudio ", + "homepage": "https://webstudio.is", + "scripts": { + "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib", + "build": "rm -fr lib && tsc", + "typecheck": "tsc --noEmit", + "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0", + "checks": "yarn typecheck && yarn lint" + }, + "devDependencies": { + "tsup": "^6.1.3", + "typescript": "^4.6.2" + }, + "peerDependencies": { + "react": "^17.0.2", + "react-dom": "^17.0.2" + }, + "dependencies": { + "@radix-ui/colors": "^0.1.8", + "@radix-ui/react-accessible-icon": "^0.1.4", + "@radix-ui/react-accordion": "^0.1.6", + "@radix-ui/react-alert-dialog": "^0.1.7", + "@radix-ui/react-avatar": "^0.1.4", + "@radix-ui/react-checkbox": "^0.1.5", + "@radix-ui/react-collapsible": "^0.1.6", + "@radix-ui/react-context-menu": "^0.1.6", + "@radix-ui/react-dialog": "^0.1.7", + "@radix-ui/react-dropdown-menu": "^0.1.6", + "@radix-ui/react-icons": "^1.1.0", + "@radix-ui/react-id": "^0.1.5", + "@radix-ui/react-label": "^0.1.5", + "@radix-ui/react-menu": "^0.1.6", + "@radix-ui/react-popover": "^0.1.6", + "@radix-ui/react-popper": "^1.0.0", + "@radix-ui/react-portal": "^0.1.4", + "@radix-ui/react-progress": "^0.1.4", + "@radix-ui/react-radio-group": "^0.1.5", + "@radix-ui/react-select": "^0.1.1", + "@radix-ui/react-separator": "^0.1.4", + "@radix-ui/react-slider": "^0.1.4", + "@radix-ui/react-switch": "^0.1.5", + "@radix-ui/react-tabs": "^0.1.5", + "@radix-ui/react-toggle": "^0.1.4", + "@radix-ui/react-toggle-group": "^0.1.5", + "@radix-ui/react-tooltip": "^0.1.7", + "@radix-ui/react-use-layout-effect": "^0.1.0" + }, + "main": "lib/index.js", + "types": "lib/index.d.ts", + "files": [ + "lib/*", + "README.md", + "!*.test.*" + ], + "license": "MIT", + "private": false +} diff --git a/apps/designer/app/shared/design-system/components/accordion.tsx b/packages/design-system/src/components/accordion.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/accordion.tsx rename to packages/design-system/src/components/accordion.tsx diff --git a/apps/designer/app/shared/design-system/components/alert-dialog.tsx b/packages/design-system/src/components/alert-dialog.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/alert-dialog.tsx rename to packages/design-system/src/components/alert-dialog.tsx diff --git a/apps/designer/app/shared/design-system/components/alert.tsx b/packages/design-system/src/components/alert.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/alert.tsx rename to packages/design-system/src/components/alert.tsx diff --git a/apps/designer/app/shared/design-system/components/app-bar.tsx b/packages/design-system/src/components/app-bar.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/app-bar.tsx rename to packages/design-system/src/components/app-bar.tsx diff --git a/apps/designer/app/shared/design-system/components/avatar.tsx b/packages/design-system/src/components/avatar.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/avatar.tsx rename to packages/design-system/src/components/avatar.tsx diff --git a/apps/designer/app/shared/design-system/components/badge.tsx b/packages/design-system/src/components/badge.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/badge.tsx rename to packages/design-system/src/components/badge.tsx diff --git a/apps/designer/app/shared/design-system/components/banner.tsx b/packages/design-system/src/components/banner.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/banner.tsx rename to packages/design-system/src/components/banner.tsx diff --git a/apps/designer/app/shared/design-system/components/box.tsx b/packages/design-system/src/components/box.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/box.tsx rename to packages/design-system/src/components/box.tsx diff --git a/apps/designer/app/shared/design-system/components/button.tsx b/packages/design-system/src/components/button.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/button.tsx rename to packages/design-system/src/components/button.tsx diff --git a/apps/designer/app/shared/design-system/components/card.tsx b/packages/design-system/src/components/card.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/card.tsx rename to packages/design-system/src/components/card.tsx diff --git a/apps/designer/app/shared/design-system/components/checkbox.tsx b/packages/design-system/src/components/checkbox.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/checkbox.tsx rename to packages/design-system/src/components/checkbox.tsx diff --git a/apps/designer/app/shared/design-system/components/code.tsx b/packages/design-system/src/components/code.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/code.tsx rename to packages/design-system/src/components/code.tsx diff --git a/apps/designer/app/shared/design-system/components/combobox.stories.tsx b/packages/design-system/src/components/combobox.stories.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/combobox.stories.tsx rename to packages/design-system/src/components/combobox.stories.tsx diff --git a/apps/designer/app/shared/design-system/components/combobox.tsx b/packages/design-system/src/components/combobox.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/combobox.tsx rename to packages/design-system/src/components/combobox.tsx diff --git a/apps/designer/app/shared/design-system/components/container.tsx b/packages/design-system/src/components/container.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/container.tsx rename to packages/design-system/src/components/container.tsx diff --git a/apps/designer/app/shared/design-system/components/context-menu.tsx b/packages/design-system/src/components/context-menu.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/context-menu.tsx rename to packages/design-system/src/components/context-menu.tsx diff --git a/apps/designer/app/shared/design-system/components/control-group.tsx b/packages/design-system/src/components/control-group.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/control-group.tsx rename to packages/design-system/src/components/control-group.tsx diff --git a/apps/designer/app/shared/design-system/components/dialog.tsx b/packages/design-system/src/components/dialog.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/dialog.tsx rename to packages/design-system/src/components/dialog.tsx diff --git a/apps/designer/app/shared/design-system/components/dropdown-menu.tsx b/packages/design-system/src/components/dropdown-menu.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/dropdown-menu.tsx rename to packages/design-system/src/components/dropdown-menu.tsx diff --git a/apps/designer/app/shared/design-system/components/flex.tsx b/packages/design-system/src/components/flex.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/flex.tsx rename to packages/design-system/src/components/flex.tsx diff --git a/apps/designer/app/shared/design-system/components/grid.tsx b/packages/design-system/src/components/grid.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/grid.tsx rename to packages/design-system/src/components/grid.tsx diff --git a/apps/designer/app/shared/design-system/components/heading.tsx b/packages/design-system/src/components/heading.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/heading.tsx rename to packages/design-system/src/components/heading.tsx diff --git a/apps/designer/app/shared/design-system/components/icon-button.tsx b/packages/design-system/src/components/icon-button.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/icon-button.tsx rename to packages/design-system/src/components/icon-button.tsx diff --git a/apps/designer/app/shared/design-system/components/image.tsx b/packages/design-system/src/components/image.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/image.tsx rename to packages/design-system/src/components/image.tsx diff --git a/apps/designer/app/shared/design-system/components/kbd.tsx b/packages/design-system/src/components/kbd.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/kbd.tsx rename to packages/design-system/src/components/kbd.tsx diff --git a/apps/designer/app/shared/design-system/components/label.tsx b/packages/design-system/src/components/label.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/label.tsx rename to packages/design-system/src/components/label.tsx diff --git a/apps/designer/app/shared/design-system/components/link.tsx b/packages/design-system/src/components/link.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/link.tsx rename to packages/design-system/src/components/link.tsx diff --git a/apps/designer/app/shared/design-system/components/menu.tsx b/packages/design-system/src/components/menu.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/menu.tsx rename to packages/design-system/src/components/menu.tsx diff --git a/apps/designer/app/shared/design-system/components/overlay.tsx b/packages/design-system/src/components/overlay.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/overlay.tsx rename to packages/design-system/src/components/overlay.tsx diff --git a/apps/designer/app/shared/design-system/components/panel.tsx b/packages/design-system/src/components/panel.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/panel.tsx rename to packages/design-system/src/components/panel.tsx diff --git a/apps/designer/app/shared/design-system/components/paragraph.tsx b/packages/design-system/src/components/paragraph.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/paragraph.tsx rename to packages/design-system/src/components/paragraph.tsx diff --git a/apps/designer/app/shared/design-system/components/popover.tsx b/packages/design-system/src/components/popover.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/popover.tsx rename to packages/design-system/src/components/popover.tsx diff --git a/apps/designer/app/shared/design-system/components/primitives/create-content-controller.stories.tsx b/packages/design-system/src/components/primitives/create-content-controller.stories.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/create-content-controller.stories.tsx rename to packages/design-system/src/components/primitives/create-content-controller.stories.tsx diff --git a/apps/designer/app/shared/design-system/components/primitives/create-content-controller.ts b/packages/design-system/src/components/primitives/create-content-controller.ts similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/create-content-controller.ts rename to packages/design-system/src/components/primitives/create-content-controller.ts diff --git a/apps/designer/app/shared/design-system/components/primitives/dnd/canvas.stories.tsx b/packages/design-system/src/components/primitives/dnd/canvas.stories.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/dnd/canvas.stories.tsx rename to packages/design-system/src/components/primitives/dnd/canvas.stories.tsx diff --git a/apps/designer/app/shared/design-system/components/primitives/dnd/placement.tsx b/packages/design-system/src/components/primitives/dnd/placement.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/dnd/placement.tsx rename to packages/design-system/src/components/primitives/dnd/placement.tsx diff --git a/apps/designer/app/shared/design-system/components/primitives/dnd/sortable-list.stories.tsx b/packages/design-system/src/components/primitives/dnd/sortable-list.stories.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/dnd/sortable-list.stories.tsx rename to packages/design-system/src/components/primitives/dnd/sortable-list.stories.tsx diff --git a/apps/designer/app/shared/design-system/components/primitives/dnd/use-auto-scroll.ts b/packages/design-system/src/components/primitives/dnd/use-auto-scroll.ts similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/dnd/use-auto-scroll.ts rename to packages/design-system/src/components/primitives/dnd/use-auto-scroll.ts diff --git a/apps/designer/app/shared/design-system/components/primitives/dnd/use-drag.ts b/packages/design-system/src/components/primitives/dnd/use-drag.ts similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/dnd/use-drag.ts rename to packages/design-system/src/components/primitives/dnd/use-drag.ts diff --git a/apps/designer/app/shared/design-system/components/primitives/dnd/use-drop-target.ts b/packages/design-system/src/components/primitives/dnd/use-drop-target.ts similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/dnd/use-drop-target.ts rename to packages/design-system/src/components/primitives/dnd/use-drop-target.ts diff --git a/apps/designer/app/shared/design-system/components/primitives/dnd/use-move.ts b/packages/design-system/src/components/primitives/dnd/use-move.ts similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/dnd/use-move.ts rename to packages/design-system/src/components/primitives/dnd/use-move.ts diff --git a/apps/designer/app/shared/design-system/components/primitives/numeric-gesture-control.stories.tsx b/packages/design-system/src/components/primitives/numeric-gesture-control.stories.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/numeric-gesture-control.stories.tsx rename to packages/design-system/src/components/primitives/numeric-gesture-control.stories.tsx diff --git a/apps/designer/app/shared/design-system/components/primitives/numeric-gesture-control.ts b/packages/design-system/src/components/primitives/numeric-gesture-control.ts similarity index 100% rename from apps/designer/app/shared/design-system/components/primitives/numeric-gesture-control.ts rename to packages/design-system/src/components/primitives/numeric-gesture-control.ts diff --git a/apps/designer/app/shared/design-system/components/progress-bar.tsx b/packages/design-system/src/components/progress-bar.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/progress-bar.tsx rename to packages/design-system/src/components/progress-bar.tsx diff --git a/apps/designer/app/shared/design-system/components/radio-card.tsx b/packages/design-system/src/components/radio-card.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/radio-card.tsx rename to packages/design-system/src/components/radio-card.tsx diff --git a/apps/designer/app/shared/design-system/components/radio-grid.tsx b/packages/design-system/src/components/radio-grid.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/radio-grid.tsx rename to packages/design-system/src/components/radio-grid.tsx diff --git a/apps/designer/app/shared/design-system/components/radio.tsx b/packages/design-system/src/components/radio.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/radio.tsx rename to packages/design-system/src/components/radio.tsx diff --git a/apps/designer/app/shared/design-system/components/scrollbar.tsx b/packages/design-system/src/components/scrollbar.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/scrollbar.tsx rename to packages/design-system/src/components/scrollbar.tsx diff --git a/apps/designer/app/shared/design-system/components/section.tsx b/packages/design-system/src/components/section.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/section.tsx rename to packages/design-system/src/components/section.tsx diff --git a/apps/designer/app/shared/design-system/components/select.stories.tsx b/packages/design-system/src/components/select.stories.tsx similarity index 96% rename from apps/designer/app/shared/design-system/components/select.stories.tsx rename to packages/design-system/src/components/select.stories.tsx index 19c91f8c18..598ddbe691 100644 --- a/apps/designer/app/shared/design-system/components/select.stories.tsx +++ b/packages/design-system/src/components/select.stories.tsx @@ -1,6 +1,6 @@ import { ComponentStory } from "@storybook/react"; import React from "react"; -import { Select, SelectOption } from "~/shared/design-system"; +import { Select, SelectOption } from "./select"; export default { component: Select, diff --git a/apps/designer/app/shared/design-system/components/select.tsx b/packages/design-system/src/components/select.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/select.tsx rename to packages/design-system/src/components/select.tsx diff --git a/apps/designer/app/shared/design-system/components/separator.tsx b/packages/design-system/src/components/separator.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/separator.tsx rename to packages/design-system/src/components/separator.tsx diff --git a/apps/designer/app/shared/design-system/components/sheet.tsx b/packages/design-system/src/components/sheet.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/sheet.tsx rename to packages/design-system/src/components/sheet.tsx diff --git a/apps/designer/app/shared/design-system/components/sidebar-tabs.tsx b/packages/design-system/src/components/sidebar-tabs.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/sidebar-tabs.tsx rename to packages/design-system/src/components/sidebar-tabs.tsx diff --git a/apps/designer/app/shared/design-system/components/simple-toggle.tsx b/packages/design-system/src/components/simple-toggle.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/simple-toggle.tsx rename to packages/design-system/src/components/simple-toggle.tsx diff --git a/apps/designer/app/shared/design-system/components/skeleton.tsx b/packages/design-system/src/components/skeleton.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/skeleton.tsx rename to packages/design-system/src/components/skeleton.tsx diff --git a/apps/designer/app/shared/design-system/components/slider.tsx b/packages/design-system/src/components/slider.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/slider.tsx rename to packages/design-system/src/components/slider.tsx diff --git a/apps/designer/app/shared/design-system/components/status.tsx b/packages/design-system/src/components/status.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/status.tsx rename to packages/design-system/src/components/status.tsx diff --git a/apps/designer/app/shared/design-system/components/sub.tsx b/packages/design-system/src/components/sub.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/sub.tsx rename to packages/design-system/src/components/sub.tsx diff --git a/apps/designer/app/shared/design-system/components/sup.tsx b/packages/design-system/src/components/sup.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/sup.tsx rename to packages/design-system/src/components/sup.tsx diff --git a/apps/designer/app/shared/design-system/components/switch.tsx b/packages/design-system/src/components/switch.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/switch.tsx rename to packages/design-system/src/components/switch.tsx diff --git a/apps/designer/app/shared/design-system/components/tab-link.tsx b/packages/design-system/src/components/tab-link.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/tab-link.tsx rename to packages/design-system/src/components/tab-link.tsx diff --git a/apps/designer/app/shared/design-system/components/table.tsx b/packages/design-system/src/components/table.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/table.tsx rename to packages/design-system/src/components/table.tsx diff --git a/apps/designer/app/shared/design-system/components/tabs.tsx b/packages/design-system/src/components/tabs.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/tabs.tsx rename to packages/design-system/src/components/tabs.tsx diff --git a/apps/designer/app/shared/design-system/components/text-area.tsx b/packages/design-system/src/components/text-area.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/text-area.tsx rename to packages/design-system/src/components/text-area.tsx diff --git a/apps/designer/app/shared/design-system/components/text-field.tsx b/packages/design-system/src/components/text-field.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/text-field.tsx rename to packages/design-system/src/components/text-field.tsx diff --git a/apps/designer/app/shared/design-system/components/text.tsx b/packages/design-system/src/components/text.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/text.tsx rename to packages/design-system/src/components/text.tsx diff --git a/apps/designer/app/shared/design-system/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/toggle-group.tsx rename to packages/design-system/src/components/toggle-group.tsx diff --git a/apps/designer/app/shared/design-system/components/tooltip.tsx b/packages/design-system/src/components/tooltip.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/tooltip.tsx rename to packages/design-system/src/components/tooltip.tsx diff --git a/apps/designer/app/shared/design-system/components/tree-item.tsx b/packages/design-system/src/components/tree-item.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/tree-item.tsx rename to packages/design-system/src/components/tree-item.tsx diff --git a/apps/designer/app/shared/design-system/components/verified-badge.tsx b/packages/design-system/src/components/verified-badge.tsx similarity index 100% rename from apps/designer/app/shared/design-system/components/verified-badge.tsx rename to packages/design-system/src/components/verified-badge.tsx diff --git a/apps/designer/app/shared/design-system/index.ts b/packages/design-system/src/index.ts similarity index 94% rename from apps/designer/app/shared/design-system/index.ts rename to packages/design-system/src/index.ts index 9c912df80b..d9fc6e725f 100644 --- a/apps/designer/app/shared/design-system/index.ts +++ b/packages/design-system/src/index.ts @@ -15,7 +15,7 @@ export { export * as Collapsible from "@radix-ui/react-collapsible"; export { AccessibleIcon } from "@radix-ui/react-accessible-icon"; export * as Portal from "@radix-ui/react-portal"; - +export * from "@radix-ui/react-id"; export { Container } from "./components/container"; export { Label } from "./components/label"; export * as ToggleGroup from "./components/toggle-group"; @@ -57,3 +57,5 @@ export * from "./components/slider"; export * from "./components/control-group"; export * from "./components/radio"; export * from "./components/combobox"; +export * from "./components/checkbox"; +export * from "./components/avatar"; diff --git a/apps/designer/app/shared/design-system/stitches.config.ts b/packages/design-system/src/stitches.config.ts similarity index 100% rename from apps/designer/app/shared/design-system/stitches.config.ts rename to packages/design-system/src/stitches.config.ts diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json new file mode 100644 index 0000000000..329cf3ea13 --- /dev/null +++ b/packages/design-system/tsconfig.json @@ -0,0 +1,17 @@ +// Extends can't use node's resolution rn https://github.com/dividab/tsconfig-paths/issues/209#issuecomment-1177261091 +{ + "extends": "../../node_modules/tsconfig/base.json", + "include": ["./src/**/*.ts", "./src/**/*.tsx"], + "compilerOptions": { + "lib": ["DOM", "DOM.Iterable", "ES2019"], + "module": "commonjs", + "jsx": "react-jsx", + "target": "ES2019", + "strict": true, + "baseUrl": ".", + "paths": { + "~/*": ["./src/*"] + }, + "outDir": "./lib" + } +} diff --git a/packages/icons/package.json b/packages/icons/package.json index 5584e18c9d..b764e507ef 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -8,7 +8,7 @@ "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib", "build": "rm -fr lib && tsc", "typecheck": "tsc --noEmit", - "lint": "eslint . --ext .ts,.tsx --max-warnings 0", + "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0", "checks": "yarn typecheck && yarn lint" }, "devDependencies": { diff --git a/packages/prisma-client/package.json b/packages/prisma-client/package.json index c72021f048..d55cc3951b 100644 --- a/packages/prisma-client/package.json +++ b/packages/prisma-client/package.json @@ -6,7 +6,7 @@ "homepage": "https://webstudio.is", "scripts": { "typecheck": "tsc --noEmit", - "lint": "eslint . --ext .ts,.tsx --max-warnings 0", + "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0", "checks": "yarn typecheck && yarn lint", "build:prisma": "prisma format && prisma generate" }, diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index 60a718a910..d60fd94374 100644 --- a/packages/react-sdk/package.json +++ b/packages/react-sdk/package.json @@ -12,7 +12,8 @@ "typecheck": "tsc --noEmit", "build:lib": "rm -fr lib && tsc", "test": "jest", - "checks": "yarn typecheck && yarn test", + "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0", + "checks": "yarn typecheck && yarn lint && yarn test", "prepublishOnly": "yarn checks && yarn build:lib", "storybook:run": "start-storybook -p 6006", "storybook:build": "build-storybook" diff --git a/packages/react-sdk/src/arg-types/utils.ts b/packages/react-sdk/src/arg-types/utils.ts index 5288d349ea..e76eb9ea4e 100644 --- a/packages/react-sdk/src/arg-types/utils.ts +++ b/packages/react-sdk/src/arg-types/utils.ts @@ -21,7 +21,9 @@ export const propsToArgTypes = ( const filterFn = filter ?? validAttributes; const entries = Object.entries(props); return entries.reduce((result, current) => { - const [propName, prop] = current; + // @todo need halp + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const [propName, prop] = current as any; // Filter out props if (!filterFn(prop)) { @@ -39,7 +41,7 @@ const matchers = { date: /Date$/, }; -export const mapControlForType = (propItem: PropItem): any => { +export const mapControlForType = (propItem: PropItem) => { const { type, name } = propItem; if (!type) { return undefined; @@ -76,7 +78,7 @@ export const mapControlForType = (propItem: PropItem): any => { const { value } = type; // Remove additional quotes from enum values // @ts-expect-error Original type has `any` type - const values = value.map((val) => val.value.replace(/^\"(.+)\"$/, "$1")); + const values = value.map((val) => val.value.replace(/^"(.+)"$/, "$1")); return { control: { type: values?.length <= 5 ? "radio" : "select" }, options: values, diff --git a/packages/react-sdk/src/components/box.tsx b/packages/react-sdk/src/components/box.tsx index bb73d40aaf..873264f26d 100644 --- a/packages/react-sdk/src/components/box.tsx +++ b/packages/react-sdk/src/components/box.tsx @@ -1,4 +1,4 @@ -import React, { +import { createElement, forwardRef, type ElementRef, diff --git a/packages/react-sdk/src/components/heading.tsx b/packages/react-sdk/src/components/heading.tsx index 49a5f14474..dcfc8afd4f 100644 --- a/packages/react-sdk/src/components/heading.tsx +++ b/packages/react-sdk/src/components/heading.tsx @@ -1,4 +1,4 @@ -import React, { +import { forwardRef, createElement, type ElementRef, diff --git a/packages/react-sdk/src/components/heading.ws.tsx b/packages/react-sdk/src/components/heading.ws.tsx index d4baa43cb5..d772747f07 100644 --- a/packages/react-sdk/src/components/heading.ws.tsx +++ b/packages/react-sdk/src/components/heading.ws.tsx @@ -1,9 +1,3 @@ -import React, { - forwardRef, - createElement, - type ElementRef, - type ComponentProps, -} from "react"; import { HeadingIcon } from "@webstudio-is/icons"; import type { WsComponentMeta } from "./component-type"; import { Heading } from "./heading"; diff --git a/packages/react-sdk/src/components/input.ws.tsx b/packages/react-sdk/src/components/input.ws.tsx index 2f2509e102..4c3ae8bdc5 100644 --- a/packages/react-sdk/src/components/input.ws.tsx +++ b/packages/react-sdk/src/components/input.ws.tsx @@ -1,4 +1,3 @@ -import React, { forwardRef, type ElementRef, type ComponentProps } from "react"; import { InputIcon } from "@webstudio-is/icons"; import type { WsComponentMeta } from "./component-type"; import { Input } from "./input"; diff --git a/packages/react-sdk/src/css/get-browser-style.ts b/packages/react-sdk/src/css/get-browser-style.ts index bb1de7c043..bd0586e918 100644 --- a/packages/react-sdk/src/css/get-browser-style.ts +++ b/packages/react-sdk/src/css/get-browser-style.ts @@ -34,8 +34,8 @@ export const getBrowserStyle = (element?: Element): Style => { const computedStyle = getComputedStyle(element); for (knownProperty in properties) { if (knownProperty in computedStyle === false) continue; - // @ts-ignore Typescript doesn't know we can access CSSStyleDeclaration properties by keys - const computedValue = computedStyle[knownProperty]; + // Typescript doesn't know we can access CSSStyleDeclaration properties by keys + const computedValue = computedStyle[knownProperty as unknown as number]; browserStyle[knownProperty] = parseValue(knownProperty, computedValue); } return browserStyle; diff --git a/packages/react-sdk/src/pubsub/subscribe.ts b/packages/react-sdk/src/pubsub/subscribe.ts index 6cf5a06f3a..03f79d83bf 100644 --- a/packages/react-sdk/src/pubsub/subscribe.ts +++ b/packages/react-sdk/src/pubsub/subscribe.ts @@ -5,6 +5,7 @@ import { useEffect } from "react"; // Pro - you can't use a wrong event with a wrong data // Contra - if we have hundreds of events, this list will become a central thing to change, // may result in maintenance downsides and merge conflicts, because it will have to import each data type +// eslint-disable-next-line @typescript-eslint/no-explicit-any type Events = Record; export const emitter = mitt(); diff --git a/packages/react-sdk/src/stitches/css.ts b/packages/react-sdk/src/stitches/css.ts index 559314ef5f..38f559bda1 100644 --- a/packages/react-sdk/src/stitches/css.ts +++ b/packages/react-sdk/src/stitches/css.ts @@ -1,7 +1,6 @@ import { createStitches, globalCss, - type CreateStitches, type CSS, css as createCss, } from "@stitches/core"; @@ -10,6 +9,7 @@ import type { Breakpoint } from "../css"; let media = {}; // @todo needs fixing +// eslint-disable-next-line @typescript-eslint/no-explicit-any let stitches: any; export const getCachedConfig = () => { diff --git a/packages/react-sdk/src/user-props/all-user-props.ts b/packages/react-sdk/src/user-props/all-user-props.ts index 30aae5aef7..5bffff85af 100644 --- a/packages/react-sdk/src/user-props/all-user-props.ts +++ b/packages/react-sdk/src/user-props/all-user-props.ts @@ -15,6 +15,7 @@ export const useAllUserProps = (initialUserProps?: Array) => { } //We don't need to trigger rerender when setting the initial value allUserPropsContainer.value = propsMap; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return useValue(allUserPropsContainer); }; diff --git a/packages/react-sdk/src/user-props/use-user-props.ts b/packages/react-sdk/src/user-props/use-user-props.ts index 13bbd53ab9..50a8bfba5d 100644 --- a/packages/react-sdk/src/user-props/use-user-props.ts +++ b/packages/react-sdk/src/user-props/use-user-props.ts @@ -10,7 +10,7 @@ type UserProps = { [prop: UserProp["prop"]]: UserProp["value"] }; * up to date with props panel. */ export const useUserProps = (instanceId: Instance["id"]) => { - const [allUserProps, setAllUserProps] = useAllUserProps(); + const [allUserProps] = useAllUserProps(); const propsData = allUserProps[instanceId]; const initialUserProps = useMemo(() => { if (propsData === undefined) return {}; From 1d22c0c63bbc598e02e5aa7f6cf65204b56ff864 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 28 Jul 2022 00:04:56 +0200 Subject: [PATCH 2/2] fix dependencies --- packages/design-system/package.json | 4 ++-- packages/react-sdk/package.json | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 394a776160..3fe1bc1d18 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -30,7 +30,6 @@ "@radix-ui/react-context-menu": "^0.1.6", "@radix-ui/react-dialog": "^0.1.7", "@radix-ui/react-dropdown-menu": "^0.1.6", - "@radix-ui/react-icons": "^1.1.0", "@radix-ui/react-id": "^0.1.5", "@radix-ui/react-label": "^0.1.5", "@radix-ui/react-menu": "^0.1.6", @@ -47,7 +46,8 @@ "@radix-ui/react-toggle": "^0.1.4", "@radix-ui/react-toggle-group": "^0.1.5", "@radix-ui/react-tooltip": "^0.1.7", - "@radix-ui/react-use-layout-effect": "^0.1.0" + "@radix-ui/react-use-layout-effect": "^0.1.0", + "@webstudio-is/icons": "*" }, "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index d60fd94374..3b6256d555 100644 --- a/packages/react-sdk/package.json +++ b/packages/react-sdk/package.json @@ -33,18 +33,18 @@ "@types/css-tree": "^1.0.7", "@types/fs-extra": "^9.0.13", "@types/node": "^17.0.21", + "@webstudio-is/prisma-client": "*", "babel-loader": "^8.2.5", "camelcase": "^6.3.0", "css-tree": "^2.1.0", "esbuild": "^0.14.25", "esbuild-node-externals": "^1.4.1", "esbuild-node-loader": "^0.8.0", + "jest-config": "*", "mdn-data": "2.0.23", "react": "^17.0.2", "react-docgen-typescript": "^2.2.2", "react-dom": "^17.0.2", - "jest-config": "*", - "@webstudio-is/prisma-client": "*", "tsup": "^6.1.3", "typescript": "^4.6.2" }, @@ -57,10 +57,11 @@ }, "dependencies": { "@stitches/core": "^1.2.7", + "@webstudio-is/icons": "*", "immer": "^9.0.12", + "jest-config": "*", "mitt": "^3.0.0", "react-nano-state": "^0.4.0", - "jest-config": "*", "zod": "^3.17.3" }, "main": "lib/index.js",