From 6e37ef402d0ba864dbd8701095ba9ba8e16d4b04 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 23:20:39 +0200 Subject: [PATCH 1/9] start --- apps/designer/app/designer/designer.tsx | 23 +++- .../designer/features/workspace/workspace.tsx | 3 + .../shared/design-system/components/toast.tsx | 115 ++++++++++++++++++ apps/designer/package.json | 4 +- yarn.lock | 109 +++++++++++++++++ 5 files changed, 252 insertions(+), 2 deletions(-) create mode 100644 apps/designer/app/shared/design-system/components/toast.tsx diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx index 43b14a34b8..ecdb0f61a5 100644 --- a/apps/designer/app/designer/designer.tsx +++ b/apps/designer/app/designer/designer.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { DndProvider } from "react-dnd"; import { TouchBackend } from "react-dnd-touch-backend"; import { useSubscribe, usePublish } from "@webstudio-is/react-sdk"; @@ -34,6 +34,14 @@ import { usePublishShortcuts } from "./shared/shortcuts"; import { type SyncStatus } from "~/shared/sync"; import { useIsPreviewMode, useRootInstance } from "~/shared/nano-states"; import { useSubscribeClientSetting } from "./shared/client-settings"; +import toast from "react-hot-toast/headless"; +import { + AngleIcon, + CheckIcon, + Cross1Icon, + ExclamationTriangleIcon, + TriangleDownIcon, +} from "@radix-ui/react-icons"; export const links = () => { return [ @@ -199,6 +207,18 @@ export const Designer = ({ config, project, assets }: DesignerProps) => { [publishRef, onRefReadCanvasWidth, onRefReadCanvas] ); + useEffect(() => { + window.setTimeout(() => { + toast.success("Hiiiii, I am a success toast"); + }, 2500); + window.setTimeout(() => { + toast.error("Hi am an error"); + }, 3000); + window.setTimeout(() => { + toast("Hi I am a message"); + }, 3500); + }, []); + return ( @@ -208,6 +228,7 @@ export const Designer = ({ config, project, assets }: DesignerProps) => { project={project} publish={publish} /> +
+ ); }; diff --git a/apps/designer/app/shared/design-system/components/toast.tsx b/apps/designer/app/shared/design-system/components/toast.tsx new file mode 100644 index 0000000000..2c93de273c --- /dev/null +++ b/apps/designer/app/shared/design-system/components/toast.tsx @@ -0,0 +1,115 @@ +import { styled } from "@stitches/react"; +import { slate } from "@radix-ui/colors"; +import * as ToastPrimitive from "@radix-ui/react-toast"; +import { useToaster } from "react-hot-toast/headless"; +import { keyframes } from "../stitches.config"; +import { CheckIcon, Cross1Icon } from "@radix-ui/react-icons"; + +const VIEWPORT_PADDING = 10; + +const hide = keyframes({ + "0%": { opacity: 1 }, + "100%": { opacity: 0 }, +}); + +const slideIn = keyframes({ + from: { transform: `translateY(calc(0px - ${VIEWPORT_PADDING}px))` }, + to: { transform: "translateY(0)" }, +}); + +const swipeOut = keyframes({ + from: { transform: "translateX(var(--radix-toast-swipe-end-x))" }, + to: { transform: `translateX(calc(100% + ${VIEWPORT_PADDING}px))` }, +}); + +const StyledViewport = styled(ToastPrimitive.Viewport, { + position: "absolute", + top: 0, + right: 0, + display: "flex", + flexDirection: "column", + padding: VIEWPORT_PADDING, + gap: VIEWPORT_PADDING, + minWidth: 200, + width: "auto", + maxWidth: "100vw", + margin: 0, + listStyle: "none", + zIndex: 2147483649, + outline: "none", +}); + +const StyledToast = styled(ToastPrimitive.Root, { + borderRadius: 6, + boxShadow: + "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px", + padding: 15, + display: "flex", + gap: 15, + alignItems: "center", + color: slate.slate12, + fontWeight: 500, + fontSize: 15, + + "@media (prefers-reduced-motion: no-preference)": { + '&[data-state="open"]': { + animation: `${slideIn} 250ms cubic-bezier(0.16, 1, 0.3, 1)`, + }, + '&[data-state="closed"]': { + animation: `${hide} 100ms ease-in`, + }, + '&[data-swipe="move"]': { + transform: "translateX(var(--radix-toast-swipe-move-x))", + }, + '&[data-swipe="cancel"]': { + transform: "translateX(0)", + transition: "transform 200ms ease-out", + }, + '&[data-swipe="end"]': { + animation: `${swipeOut} 100ms ease-out`, + }, + }, + variants: { + variant: { + error: { + backgroundColor: "red", + color: "white", + }, + success: { + backgroundColor: "green", + }, + blank: { + background: "white", + }, + custom: {}, + loading: {}, + }, + }, +}); + +const StyledTitle = styled(ToastPrimitive.Title, { + marginBottom: 5, +}); + +export const Notifications = () => { + const { toasts, handlers } = useToaster(); + const { startPause, endPause } = handlers; + + return ( + + {toasts.map((toast) => ( + + {toast.type === "success" && } + {toast.type === "error" && } + {toast.message} + + ))} + + + ); +}; diff --git a/apps/designer/package.json b/apps/designer/package.json index 928940c399..3669f44eeb 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -41,6 +41,7 @@ "@radix-ui/react-slider": "^0.1.4", "@radix-ui/react-switch": "^0.1.5", "@radix-ui/react-tabs": "^0.1.5", + "@radix-ui/react-toast": "^1.0.0", "@radix-ui/react-toggle": "^0.1.4", "@radix-ui/react-toggle-group": "^0.1.5", "@radix-ui/react-tooltip": "^0.1.7", @@ -54,8 +55,8 @@ "@stitches/react": "^1.2.7", "@vercel/node": "^2.4.1", "@webstudio-is/asset-uploader": "*", - "@webstudio-is/react-sdk": "*", "@webstudio-is/prisma-client": "*", + "@webstudio-is/react-sdk": "*", "bson-objectid": "^2.0.2", "camelcase": "^6.3.0", "debug": "^4.3.4", @@ -80,6 +81,7 @@ "react-dnd-touch-backend": "^15.1.1", "react-dom": "^17.0.2", "react-error-boundary": "^3.1.4", + "react-hot-toast": "^2.3.0", "react-hotkeys-hook": "^3.4.4", "react-nano-state": "^0.4.0", "react-router-dom": "^6.2.2", diff --git a/yarn.lock b/yarn.lock index f89a7fbd79..3538589f7e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2752,6 +2752,13 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/primitive@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253" + integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-accessible-icon@^0.1.4": version "0.1.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-accessible-icon/-/react-accessible-icon-0.1.4.tgz#bdbf1e3226a0e9e7778b68728b175bdc532b720c" @@ -2857,6 +2864,17 @@ "@radix-ui/react-primitive" "0.1.4" "@radix-ui/react-slot" "0.1.2" +"@radix-ui/react-collection@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.0.tgz#0ec4c72fabd35a03b5787075ac799e3b17ca5710" + integrity sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-context" "1.0.0" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-slot" "1.0.0" + "@radix-ui/react-compose-refs@0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz#cff6e780a0f73778b976acff2c2a5b6551caab95" @@ -2931,6 +2949,18 @@ "@radix-ui/react-use-callback-ref" "0.1.0" "@radix-ui/react-use-escape-keydown" "0.1.0" +"@radix-ui/react-dismissable-layer@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b" + integrity sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.0" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-escape-keydown" "1.0.0" + "@radix-ui/react-dropdown-menu@^0.1.6": version "0.1.6" resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-0.1.6.tgz#3203229788cd57e552c9f19dcc7008e2b545919c" @@ -3071,6 +3101,14 @@ "@radix-ui/react-primitive" "0.1.4" "@radix-ui/react-use-layout-effect" "0.1.0" +"@radix-ui/react-portal@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b" + integrity sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-presence@0.1.2": version "0.1.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.1.2.tgz#9f11cce3df73cf65bc348e8b76d891f0d54c1fe3" @@ -3080,6 +3118,15 @@ "@radix-ui/react-compose-refs" "0.1.0" "@radix-ui/react-use-layout-effect" "0.1.0" +"@radix-ui/react-presence@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a" + integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-use-layout-effect" "1.0.0" + "@radix-ui/react-primitive@0.1.4": version "0.1.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz#6c233cf08b0cb87fecd107e9efecb3f21861edc1" @@ -3232,6 +3279,25 @@ "@radix-ui/react-roving-focus" "0.1.5" "@radix-ui/react-use-controllable-state" "0.1.0" +"@radix-ui/react-toast@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-toast/-/react-toast-1.0.0.tgz#0d808e7f13376ddc74c0dbb7a4ff1c0602778ae2" + integrity sha512-mdoF6rahgushdev0OX+9a7JKoH0xZAZBo2Ktf/s779S7EnkZeL3/MFiRIV5LpRP5CtASmfdSD3FLnEvG1RHRtQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.0" + "@radix-ui/react-collection" "1.0.0" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-context" "1.0.0" + "@radix-ui/react-dismissable-layer" "1.0.0" + "@radix-ui/react-portal" "1.0.0" + "@radix-ui/react-presence" "1.0.0" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-controllable-state" "1.0.0" + "@radix-ui/react-use-layout-effect" "1.0.0" + "@radix-ui/react-visually-hidden" "1.0.0" + "@radix-ui/react-toggle-group@^0.1.5": version "0.1.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-0.1.5.tgz#9e4d65e22c4fc0ba3a42fbc8d5496c430e5e9852" @@ -3291,6 +3357,13 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-use-callback-ref@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90" + integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-controllable-state@0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz#4fced164acfc69a4e34fb9d193afdab973a55de1" @@ -3299,6 +3372,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "0.1.0" +"@radix-ui/react-use-controllable-state@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f" + integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-direction@0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz#97ac1d52e497c974389e7988f809238ed72e7df7" @@ -3314,6 +3395,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "0.1.0" +"@radix-ui/react-use-escape-keydown@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1" + integrity sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-layout-effect@0.1.0", "@radix-ui/react-use-layout-effect@^0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz#ebf71bd6d2825de8f1fbb984abf2293823f0f223" @@ -3374,6 +3463,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "0.1.4" +"@radix-ui/react-visually-hidden@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz#4d69d7e3b6d21ee4678ed6de5215dcd068394401" + integrity sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/rect@0.1.1": version "0.1.1" resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419" @@ -10050,6 +10147,11 @@ globby@^9.2.0: pify "^4.0.1" slash "^2.0.0" +goober@^2.1.10: + version "2.1.10" + resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.10.tgz#058def43ba1e3b06f973dbb372a4978aa42f1049" + integrity sha512-7PpuQMH10jaTWm33sQgBQvz45pHR8N4l3Cu3WMGEWmHShAcTuuP7I+5/DwKo39fwti5A80WAjvqgz6SSlgWmGA== + got@^11.0.0: version "11.8.5" resolved "https://registry.yarnpkg.com/got/-/got-11.8.5.tgz#ce77d045136de56e8f024bebb82ea349bc730046" @@ -14624,6 +14726,13 @@ react-error-boundary@^3.1.0, react-error-boundary@^3.1.4: dependencies: "@babel/runtime" "^7.12.5" +react-hot-toast@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.3.0.tgz#70b3d183ac2a4afb6b17cda4a7f4cfe02e730415" + integrity sha512-/RxV+bfjld7tSJR1SCLzMAXgFuNW7fCpK6+vbYqfmbGSWcqTMz2rizrvfWKvtcPH5HK0NqxmBaC5SrAy1F42zA== + dependencies: + goober "^2.1.10" + react-hotkeys-hook@^3.4.4: version "3.4.6" resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-3.4.6.tgz#21eda8e97121583a14056479e3eea9e51d2e2a69" From 664fcf1fe741d0397937688df90324977867671d Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 23:29:36 +0200 Subject: [PATCH 2/9] revert tsconfig --- apps/designer/tsconfig.json | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/apps/designer/tsconfig.json b/apps/designer/tsconfig.json index f30c095e48..4ce92c95f5 100644 --- a/apps/designer/tsconfig.json +++ b/apps/designer/tsconfig.json @@ -5,17 +5,6 @@ "paths": { "~/*": ["app/*"] }, - "baseUrl": ".", - "allowJs": true, - "forceConsistentCasingInFileNames": true, - "lib": ["DOM", "DOM.Iterable", "ES2019"], - "strict": true, - "target": "ES2019", - "esModuleInterop": true, - "isolatedModules": true, - "jsx": "react-jsx", - "moduleResolution": "node", - "noEmit": true, - "resolveJsonModule": true + "baseUrl": "." } } From 3056c9532c512c717714b1542bb22c7cf0491b75 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 29 Jul 2022 17:28:07 +0200 Subject: [PATCH 3/9] rename --- apps/designer/app/designer/designer.tsx | 15 +------------ .../workspace/canvas-tools/canvas-tools.tsx | 1 + .../designer/features/workspace/workspace.tsx | 20 +++++++++++++++-- .../design-system/src/components/toast.tsx | 22 +++++++++---------- packages/design-system/src/index.ts | 2 +- 5 files changed, 31 insertions(+), 29 deletions(-) diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx index 18c939efe8..26c17be585 100644 --- a/apps/designer/app/designer/designer.tsx +++ b/apps/designer/app/designer/designer.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from "react"; +import { useCallback, useState } from "react"; import { DndProvider } from "react-dnd"; import { TouchBackend } from "react-dnd-touch-backend"; import { useSubscribe, usePublish } from "@webstudio-is/react-sdk"; @@ -34,7 +34,6 @@ import { usePublishShortcuts } from "./shared/shortcuts"; import { type SyncStatus } from "~/shared/sync"; import { useIsPreviewMode, useRootInstance } from "~/shared/nano-states"; import { useSubscribeClientSetting } from "./shared/client-settings"; -import toast from "react-hot-toast/headless"; export const links = () => { return [ @@ -200,18 +199,6 @@ export const Designer = ({ config, project, assets }: DesignerProps) => { [publishRef, onRefReadCanvasWidth, onRefReadCanvas] ); - useEffect(() => { - window.setTimeout(() => { - toast.success("Hiiiii, I am a success toast"); - }, 2500); - window.setTimeout(() => { - toast.error("Hi am an error"); - }, 3000); - window.setTimeout(() => { - toast("Hi I am a message"); - }, 3500); - }, []); - return ( 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 d4d9d1cf13..ac6b121874 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 @@ -36,6 +36,7 @@ export const CanvasTools = ({ publish }: CanvasToolsProps) => { if (isPreviewMode || isScrolling) { return null; } + return ( diff --git a/apps/designer/app/designer/features/workspace/workspace.tsx b/apps/designer/app/designer/features/workspace/workspace.tsx index f1e803b2c0..81ec376706 100644 --- a/apps/designer/app/designer/features/workspace/workspace.tsx +++ b/apps/designer/app/designer/features/workspace/workspace.tsx @@ -1,7 +1,9 @@ -import { Box, Flex, Notifications } from "@webstudio-is/design-system"; +import { Box, Flex, Toaster } 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"; +import { useEffect } from "react"; +import toast from "react-hot-toast/headless"; const workspaceStyle = { flexGrow: 1, @@ -42,6 +44,20 @@ export const Workspace = ({ publish<"unselectInstance">({ type: "unselectInstance" }); }; + useEffect(() => { + window.setTimeout(() => { + toast.success("Hiiiii, I am a success toast", { + duration: Infinity, + }); + }, 2500); + window.setTimeout(() => { + toast.error("Hi am an error"); + }, 3000); + window.setTimeout(() => { + toast("Hi I am a message"); + }, 3500); + }, []); + return ( - + ); }; diff --git a/packages/design-system/src/components/toast.tsx b/packages/design-system/src/components/toast.tsx index 77dae9638a..02ed497f3d 100644 --- a/packages/design-system/src/components/toast.tsx +++ b/packages/design-system/src/components/toast.tsx @@ -1,11 +1,9 @@ -import { styled } from "@stitches/react"; -import { slate } from "@radix-ui/colors"; import * as ToastPrimitive from "@radix-ui/react-toast"; import { useToaster } from "react-hot-toast/headless"; -import { keyframes } from "../stitches.config"; +import { keyframes, styled } from "../stitches.config"; import { CheckIcon, Cross1Icon } from "@webstudio-is/icons"; -const VIEWPORT_PADDING = 10; +const VIEWPORT_PADDING = "$2"; const hide = keyframes({ "0%": { opacity: 1 }, @@ -35,7 +33,7 @@ const StyledViewport = styled(ToastPrimitive.Viewport, { maxWidth: "100vw", margin: 0, listStyle: "none", - zIndex: 2147483649, + zIndex: "$max", outline: "none", }); @@ -43,13 +41,13 @@ const StyledToast = styled(ToastPrimitive.Root, { borderRadius: 6, boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px", - padding: 15, + padding: "$3", display: "flex", - gap: 15, + gap: "$3", alignItems: "center", - color: slate.slate12, + color: "$highContrast", fontWeight: 500, - fontSize: 15, + fontSize: "$3", "@media (prefers-reduced-motion: no-preference)": { '&[data-state="open"]': { @@ -88,13 +86,13 @@ const StyledToast = styled(ToastPrimitive.Root, { }); const StyledTitle = styled(ToastPrimitive.Title, { - marginBottom: 5, + marginBottom: "$1", }); -export const Notifications = () => { +export const Toaster = () => { const { toasts, handlers } = useToaster(); const { startPause, endPause } = handlers; - + console.log(toasts); return ( {toasts.map((toast) => ( diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 3788a741d5..c563bc6e5e 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -11,7 +11,7 @@ export { theme, type CSS, } from "./stitches.config"; -export { Notifications } from "./components/toast"; +export { Toaster } from "./components/toast"; export * as Collapsible from "@radix-ui/react-collapsible"; export { AccessibleIcon } from "@radix-ui/react-accessible-icon"; From d98e26a18a2d7846c211d58e5a758e3a538d9abc Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 29 Jul 2022 17:29:21 +0200 Subject: [PATCH 4/9] small cleanup --- apps/designer/app/designer/designer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx index 26c17be585..fef2db5c3e 100644 --- a/apps/designer/app/designer/designer.tsx +++ b/apps/designer/app/designer/designer.tsx @@ -208,7 +208,6 @@ export const Designer = ({ config, project, assets }: DesignerProps) => { project={project} publish={publish} /> -
Date: Fri, 29 Jul 2022 19:30:53 +0200 Subject: [PATCH 5/9] clean up --- .../designer/features/workspace/workspace.tsx | 5 ++-- apps/designer/package.json | 1 - .../design-system/src/components/toast.tsx | 26 ++++++++++--------- packages/design-system/src/index.ts | 2 +- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/apps/designer/app/designer/features/workspace/workspace.tsx b/apps/designer/app/designer/features/workspace/workspace.tsx index 81ec376706..45c558f358 100644 --- a/apps/designer/app/designer/features/workspace/workspace.tsx +++ b/apps/designer/app/designer/features/workspace/workspace.tsx @@ -1,9 +1,8 @@ -import { Box, Flex, Toaster } from "@webstudio-is/design-system"; +import { Box, Flex, Toaster, toast } 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"; import { useEffect } from "react"; -import toast from "react-hot-toast/headless"; const workspaceStyle = { flexGrow: 1, @@ -46,7 +45,7 @@ export const Workspace = ({ useEffect(() => { window.setTimeout(() => { - toast.success("Hiiiii, I am a success toast", { + toast.success("Success", { duration: Infinity, }); }, 2500); diff --git a/apps/designer/package.json b/apps/designer/package.json index 6223e2c8c6..e67d3ce568 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -54,7 +54,6 @@ "react-dnd-touch-backend": "^15.1.1", "react-dom": "^17.0.2", "react-error-boundary": "^3.1.4", - "react-hot-toast": "^2.3.0", "react-hotkeys-hook": "^3.4.4", "react-nano-state": "^0.4.0", "react-router-dom": "^6.2.2", diff --git a/packages/design-system/src/components/toast.tsx b/packages/design-system/src/components/toast.tsx index 02ed497f3d..1c4f638cd4 100644 --- a/packages/design-system/src/components/toast.tsx +++ b/packages/design-system/src/components/toast.tsx @@ -1,7 +1,8 @@ import * as ToastPrimitive from "@radix-ui/react-toast"; -import { useToaster } from "react-hot-toast/headless"; +import BaseToast, { useToaster } from "react-hot-toast/headless"; import { keyframes, styled } from "../stitches.config"; import { CheckIcon, Cross1Icon } from "@webstudio-is/icons"; +import { Box } from "./box"; const VIEWPORT_PADDING = "$2"; @@ -40,14 +41,15 @@ const StyledViewport = styled(ToastPrimitive.Viewport, { const StyledToast = styled(ToastPrimitive.Root, { borderRadius: 6, boxShadow: - "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px", + "$colors$highContrast 0 $2 $6 -$2, $colors$highContrast 0 $2 $4 -$3", padding: "$3", display: "flex", - gap: "$3", + gap: "$1", alignItems: "center", color: "$highContrast", fontWeight: 500, fontSize: "$3", + background: "white", "@media (prefers-reduced-motion: no-preference)": { '&[data-state="open"]': { @@ -70,15 +72,12 @@ const StyledToast = styled(ToastPrimitive.Root, { variants: { variant: { error: { - backgroundColor: "red", - color: "white", + color: "$red11", }, success: { - backgroundColor: "green", - }, - blank: { - background: "white", + color: "$green9", }, + blank: {}, custom: {}, loading: {}, }, @@ -92,7 +91,6 @@ const StyledTitle = styled(ToastPrimitive.Title, { export const Toaster = () => { const { toasts, handlers } = useToaster(); const { startPause, endPause } = handlers; - console.log(toasts); return ( {toasts.map((toast) => ( @@ -102,8 +100,10 @@ export const Toaster = () => { onMouseEnter={startPause} onMouseLeave={endPause} > - {toast.type === "success" && } - {toast.type === "error" && } + + {toast.type === "success" && } + {toast.type === "error" && } + {toast.message} ))} @@ -111,3 +111,5 @@ export const Toaster = () => { ); }; + +export const toast = BaseToast; diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index c563bc6e5e..70c38ab2f7 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -11,7 +11,7 @@ export { theme, type CSS, } from "./stitches.config"; -export { Toaster } from "./components/toast"; +export { toast, Toaster } from "./components/toast"; export * as Collapsible from "@radix-ui/react-collapsible"; export { AccessibleIcon } from "@radix-ui/react-accessible-icon"; From f7565fa993dd5fecfb4b3f0e0f54cf87bce0f214 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 29 Jul 2022 19:34:45 +0200 Subject: [PATCH 6/9] fix thememing --- packages/design-system/src/components/toast.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-system/src/components/toast.tsx b/packages/design-system/src/components/toast.tsx index 1c4f638cd4..76097696b6 100644 --- a/packages/design-system/src/components/toast.tsx +++ b/packages/design-system/src/components/toast.tsx @@ -41,7 +41,7 @@ const StyledViewport = styled(ToastPrimitive.Viewport, { const StyledToast = styled(ToastPrimitive.Root, { borderRadius: 6, boxShadow: - "$colors$highContrast 0 $2 $6 -$2, $colors$highContrast 0 $2 $4 -$3", + "hsl(206 22% 7% / 35%) 0 $space$2 $space$6 -$space$2, hsl(206 22% 7% / 20%) 0 $space$2 $space$4 -$space$3", padding: "$3", display: "flex", gap: "$1", @@ -49,7 +49,7 @@ const StyledToast = styled(ToastPrimitive.Root, { color: "$highContrast", fontWeight: 500, fontSize: "$3", - background: "white", + background: "$loContrast", "@media (prefers-reduced-motion: no-preference)": { '&[data-state="open"]': { From 2e7d8624482549fec062b716b8491bfd21fc543c Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 29 Jul 2022 19:35:53 +0200 Subject: [PATCH 7/9] clean up --- .../workspace/canvas-tools/canvas-tools.tsx | 1 - .../designer/features/workspace/workspace.tsx | 17 +---------------- 2 files changed, 1 insertion(+), 17 deletions(-) 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 ac6b121874..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 @@ -36,7 +36,6 @@ export const CanvasTools = ({ publish }: CanvasToolsProps) => { if (isPreviewMode || isScrolling) { return null; } - return ( diff --git a/apps/designer/app/designer/features/workspace/workspace.tsx b/apps/designer/app/designer/features/workspace/workspace.tsx index 45c558f358..53c2581306 100644 --- a/apps/designer/app/designer/features/workspace/workspace.tsx +++ b/apps/designer/app/designer/features/workspace/workspace.tsx @@ -1,8 +1,7 @@ -import { Box, Flex, Toaster, toast } from "@webstudio-is/design-system"; +import { Box, Flex, Toaster } 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"; -import { useEffect } from "react"; const workspaceStyle = { flexGrow: 1, @@ -43,20 +42,6 @@ export const Workspace = ({ publish<"unselectInstance">({ type: "unselectInstance" }); }; - useEffect(() => { - window.setTimeout(() => { - toast.success("Success", { - duration: Infinity, - }); - }, 2500); - window.setTimeout(() => { - toast.error("Hi am an error"); - }, 3000); - window.setTimeout(() => { - toast("Hi I am a message"); - }, 3500); - }, []); - return ( Date: Fri, 29 Jul 2022 19:37:52 +0200 Subject: [PATCH 8/9] increas4e animation time --- packages/design-system/src/components/toast.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-system/src/components/toast.tsx b/packages/design-system/src/components/toast.tsx index 76097696b6..5e9120adfe 100644 --- a/packages/design-system/src/components/toast.tsx +++ b/packages/design-system/src/components/toast.tsx @@ -56,7 +56,7 @@ const StyledToast = styled(ToastPrimitive.Root, { animation: `${slideIn} 250ms cubic-bezier(0.16, 1, 0.3, 1)`, }, '&[data-state="closed"]': { - animation: `${hide} 100ms ease-in`, + animation: `${hide} 105ms ease-in`, }, '&[data-swipe="move"]': { transform: "translateX(var(--radix-toast-swipe-move-x))", @@ -66,7 +66,7 @@ const StyledToast = styled(ToastPrimitive.Root, { transition: "transform 200ms ease-out", }, '&[data-swipe="end"]': { - animation: `${swipeOut} 100ms ease-out`, + animation: `${swipeOut} 150ms ease-out`, }, }, variants: { From 54472e3879a2c63075c1acc2dc8930f7899d0f57 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 1 Aug 2022 11:35:32 +0200 Subject: [PATCH 9/9] PR fxies --- packages/design-system/src/components/toast.tsx | 4 ++-- packages/design-system/src/index.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/design-system/src/components/toast.tsx b/packages/design-system/src/components/toast.tsx index 5e9120adfe..f4b28ccaf0 100644 --- a/packages/design-system/src/components/toast.tsx +++ b/packages/design-system/src/components/toast.tsx @@ -1,5 +1,5 @@ import * as ToastPrimitive from "@radix-ui/react-toast"; -import BaseToast, { useToaster } from "react-hot-toast/headless"; +import toast, { useToaster } from "react-hot-toast/headless"; import { keyframes, styled } from "../stitches.config"; import { CheckIcon, Cross1Icon } from "@webstudio-is/icons"; import { Box } from "./box"; @@ -112,4 +112,4 @@ export const Toaster = () => { ); }; -export const toast = BaseToast; +export { toast }; diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 70c38ab2f7..3e3c378ad0 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -11,7 +11,7 @@ export { theme, type CSS, } from "./stitches.config"; -export { toast, Toaster } from "./components/toast"; +export * from "./components/toast"; export * as Collapsible from "@radix-ui/react-collapsible"; export { AccessibleIcon } from "@radix-ui/react-accessible-icon";