From 075cc05db530ea4a255fe4a8afc2eac6766241ac Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 11:43:31 +0700 Subject: [PATCH 01/22] =?UTF-8?q?=E2=9A=92=EF=B8=8F=20build:=20add=20@radi?= =?UTF-8?q?x-ui/react-toast?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/package.json | 1 + yarn.lock | 55 ++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/packages/frontend/package.json b/packages/frontend/package.json index a9674426..0e22ca7b 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -8,6 +8,7 @@ "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-tabs": "^1.0.4", + "@radix-ui/react-toast": "^1.1.5", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/yarn.lock b/yarn.lock index d24c5a8a..98e99a0a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3342,6 +3342,18 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-dismissable-layer@1.0.5": + version "1.0.5" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4" + integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.1" + "@radix-ui/react-compose-refs" "1.0.1" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-use-callback-ref" "1.0.1" + "@radix-ui/react-use-escape-keydown" "1.0.3" + "@radix-ui/react-id@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0" @@ -3350,6 +3362,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-layout-effect" "1.0.1" +"@radix-ui/react-portal@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15" + integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-presence@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba" @@ -3406,6 +3426,25 @@ "@radix-ui/react-roving-focus" "1.0.4" "@radix-ui/react-use-controllable-state" "1.0.1" +"@radix-ui/react-toast@^1.1.5": + version "1.1.5" + resolved "https://registry.yarnpkg.com/@radix-ui/react-toast/-/react-toast-1.1.5.tgz#f5788761c0142a5ae9eb97f0051fd3c48106d9e6" + integrity sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.1" + "@radix-ui/react-collection" "1.0.3" + "@radix-ui/react-compose-refs" "1.0.1" + "@radix-ui/react-context" "1.0.1" + "@radix-ui/react-dismissable-layer" "1.0.5" + "@radix-ui/react-portal" "1.0.4" + "@radix-ui/react-presence" "1.0.1" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-use-callback-ref" "1.0.1" + "@radix-ui/react-use-controllable-state" "1.0.1" + "@radix-ui/react-use-layout-effect" "1.0.1" + "@radix-ui/react-visually-hidden" "1.0.3" + "@radix-ui/react-use-callback-ref@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a" @@ -3421,6 +3460,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "1.0.1" +"@radix-ui/react-use-escape-keydown@1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755" + integrity sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-callback-ref" "1.0.1" + "@radix-ui/react-use-layout-effect@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399" @@ -3443,6 +3490,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-layout-effect" "1.0.1" +"@radix-ui/react-visually-hidden@1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac" + integrity sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.3" + "@remix-run/router@1.13.1": version "1.13.1" resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.1.tgz#07e2a8006f23a3bc898b3f317e0a58cc8076b86e" From 3928e2610fe2b866484ec51a045b5bcacc20a6e7 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 11:45:01 +0700 Subject: [PATCH 02/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20zIndex=20to?= =?UTF-8?q?ast=20token?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/tailwind.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js index 4bcb0b01..8279056b 100644 --- a/packages/frontend/tailwind.config.js +++ b/packages/frontend/tailwind.config.js @@ -157,6 +157,9 @@ export default withMT({ 3.25: '0.8125rem', 3.5: '0.875rem', }, + zIndex: { + toast: '9999', + }, }, }, plugins: [], From 98a4d7be07c3bfc67aeccd327ffb71087c87bf1a Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 11:45:35 +0700 Subject: [PATCH 03/22] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20implement=20?= =?UTF-8?q?toast=20contexts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/shared/Toast/ToastProvider.tsx | 15 ++ .../src/components/shared/Toast/Toaster.tsx | 25 +++ .../src/components/shared/Toast/useToast.tsx | 190 ++++++++++++++++++ 3 files changed, 230 insertions(+) create mode 100644 packages/frontend/src/components/shared/Toast/ToastProvider.tsx create mode 100644 packages/frontend/src/components/shared/Toast/Toaster.tsx create mode 100644 packages/frontend/src/components/shared/Toast/useToast.tsx diff --git a/packages/frontend/src/components/shared/Toast/ToastProvider.tsx b/packages/frontend/src/components/shared/Toast/ToastProvider.tsx new file mode 100644 index 00000000..57ecf2b6 --- /dev/null +++ b/packages/frontend/src/components/shared/Toast/ToastProvider.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { + Provider, + Viewport, + type ToastProviderProps, +} from '@radix-ui/react-toast'; + +export const ToastProvider = ({ children, ...props }: ToastProviderProps) => { + return ( + + {children} + + + ); +}; diff --git a/packages/frontend/src/components/shared/Toast/Toaster.tsx b/packages/frontend/src/components/shared/Toast/Toaster.tsx new file mode 100644 index 00000000..85222167 --- /dev/null +++ b/packages/frontend/src/components/shared/Toast/Toaster.tsx @@ -0,0 +1,25 @@ +import React, { ComponentPropsWithoutRef, useMemo } from 'react'; +import { Provider, Viewport } from '@radix-ui/react-toast'; +import { SimpleToast, SimpleToastProps } from './SimpleToast'; +import { useToast } from './useToast'; + +interface ToasterProps extends ComponentPropsWithoutRef<'div'> {} + +export const Toaster = ({}: ToasterProps) => { + const { toasts } = useToast(); + + const renderToasts = useMemo( + () => + toasts.map(({ id, ...props }) => ( + + )), + [toasts], + ); + + return ( + + {renderToasts} + + + ); +}; diff --git a/packages/frontend/src/components/shared/Toast/useToast.tsx b/packages/frontend/src/components/shared/Toast/useToast.tsx new file mode 100644 index 00000000..ad088be4 --- /dev/null +++ b/packages/frontend/src/components/shared/Toast/useToast.tsx @@ -0,0 +1,190 @@ +// Inspired by react-hot-toast library +import React from 'react'; +import { type ToastProps } from '@radix-ui/react-toast'; + +const TOAST_LIMIT = 3; +const TOAST_REMOVE_DELAY_DEFAULT = 7000; + +type ToasterToast = ToastProps & { + id: string; +}; + +const actionTypes = { + ADD_TOAST: 'ADD_TOAST', + UPDATE_TOAST: 'UPDATE_TOAST', + DISMISS_TOAST: 'DISMISS_TOAST', + REMOVE_TOAST: 'REMOVE_TOAST', +} as const; + +let count = 0; + +const genId = () => { + count = (count + 1) % Number.MAX_VALUE; + return count.toString(); +}; + +type ActionType = typeof actionTypes; + +type Action = + | { + type: ActionType['ADD_TOAST']; + toast: ToasterToast; + } + | { + type: ActionType['UPDATE_TOAST']; + toast: Partial; + } + | { + type: ActionType['DISMISS_TOAST']; + toastId?: ToasterToast['id']; + duration?: ToasterToast['duration']; + } + | { + type: ActionType['REMOVE_TOAST']; + toastId?: ToasterToast['id']; + }; + +interface State { + toasts: ToasterToast[]; +} + +const toastTimeouts = new Map>(); + +const addToRemoveQueue = (toastId: string, duration: number) => { + if (toastTimeouts.has(toastId)) { + return; + } + + const timeout = setTimeout(() => { + toastTimeouts.delete(toastId); + dispatch({ + type: 'REMOVE_TOAST', + toastId: toastId, + }); + }, duration ?? TOAST_REMOVE_DELAY_DEFAULT); + + toastTimeouts.set(toastId, timeout); +}; + +export const reducer = (state: State, action: Action): State => { + switch (action.type) { + case 'ADD_TOAST': + return { + ...state, + toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), + }; + + case 'UPDATE_TOAST': + return { + ...state, + toasts: state.toasts.map((t) => + t.id === action.toast.id + ? ({ ...t, ...action.toast } as ToasterToast) + : t, + ), + }; + + case 'DISMISS_TOAST': { + const { toastId, duration = TOAST_REMOVE_DELAY_DEFAULT } = action; + + // ! Side effects ! - This could be extracted into a dismissToast() action, + // but I'll keep it here for simplicity + if (toastId) { + addToRemoveQueue(toastId, duration); + } else { + state.toasts.forEach((_toast) => { + addToRemoveQueue(_toast.id, duration); + }); + } + + return { + ...state, + toasts: state.toasts.map((t) => + t.id === toastId || toastId === undefined + ? { + ...t, + open: false, + } + : t, + ), + }; + } + case 'REMOVE_TOAST': + if (action.toastId === undefined) { + return { + ...state, + toasts: [], + }; + } + return { + ...state, + toasts: state.toasts.filter((t) => t.id !== action.toastId), + }; + } +}; + +const listeners: Array<(_state: State) => void> = []; + +let memoryState: State = { toasts: [] }; + +const dispatch = (action: Action) => { + memoryState = reducer(memoryState, action); + listeners.forEach((listener) => { + listener(memoryState); + }); +}; + +const toast = (props: ToasterToast) => { + if (!props.duration) { + props.duration = 20000; + } + const id = genId(); + + const update = (_props: ToasterToast) => + dispatch({ + type: 'UPDATE_TOAST', + toast: { ..._props, id }, + }); + const dismiss = () => + dispatch({ type: 'DISMISS_TOAST', toastId: id, duration: props.duration }); + + dispatch({ + type: 'ADD_TOAST', + toast: { + ...props, + id, + open: true, + onOpenChange: (open: boolean) => { + if (!open) dismiss(); + }, + }, + }); + + return { + id: id, + dismiss, + update, + }; +}; + +const useToast = () => { + const [state, setState] = React.useState(memoryState); + + React.useEffect(() => { + listeners.push(setState); + return () => { + const index = listeners.indexOf(setState); + if (index > -1) { + listeners.splice(index, 1); + } + }; + }, [state]); + + return { + ...state, + toast, + dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }), + }; +}; + +export { toast, useToast }; From d3013719e69b71738f30f2f969e49fd0d90bb857 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 11:45:55 +0700 Subject: [PATCH 04/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20wip=20simple=20to?= =?UTF-8?q?ast=20render?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/Toast/SimpleToast.theme.ts | 48 +++++++++++++++++++ .../components/shared/Toast/SimpleToast.tsx | 43 +++++++++++++++++ 2 files changed, 91 insertions(+) create mode 100644 packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts create mode 100644 packages/frontend/src/components/shared/Toast/SimpleToast.tsx diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts b/packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts new file mode 100644 index 00000000..0d8ae24b --- /dev/null +++ b/packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts @@ -0,0 +1,48 @@ +import { VariantProps, tv } from 'tailwind-variants'; + +export const simpleToastTheme = tv( + { + slots: { + wrapper: [ + 'flex', + 'py-2', + 'pl-2', + 'pr-1.5', + 'gap-2', + 'rounded-full', + 'mx-auto', + 'mt-3', + 'w-fit', + 'overflow-hidden', + 'bg-surface-high-contrast', + 'shadow-sm', + ], + icon: ['flex', 'items-center', 'justify-center', 'w-5', 'h-5'], + title: ['text-sm', 'text-elements-on-high-contrast'], + }, + variants: { + variant: { + success: { + icon: ['text-elements-success'], + }, + error: { + icon: ['text-elements-danger'], + }, + warning: { + icon: ['text-elements-warning'], + }, + info: { + icon: ['text-elements-info'], + }, + loading: { + icon: ['text-elements-info'], + }, + }, + }, + }, + { + responsiveVariants: true, + }, +); + +export type SimpleToastTheme = VariantProps; diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx new file mode 100644 index 00000000..e134d647 --- /dev/null +++ b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx @@ -0,0 +1,43 @@ +import React, { useMemo } from 'react'; +import * as ToastPrimitive from '@radix-ui/react-toast'; +import { ToastProps } from '@radix-ui/react-toast'; +import { simpleToastTheme, type SimpleToastTheme } from './SimpleToast.theme'; +import { CheckIcon, CheckRoundFilledIcon } from 'components/shared/CustomIcon'; +import { cloneIcon } from 'utils/cloneIcon'; + +export interface SimpleToastProps extends ToastProps { + title: string; + variant?: SimpleToastTheme['variant']; +} + +export const SimpleToast = ({ + className, + title, + variant = 'success', + ...props +}: SimpleToastProps) => { + const { + wrapper: wrapperCls, + icon: iconCls, + title: titleCls, + } = simpleToastTheme({ variant }); + + const Icon = useMemo(() => { + if (variant === 'success') return ; + if (variant === 'error') return ; + if (variant === 'warning') return ; + if (variant === 'info') return ; + return ; // variant === 'loading' + }, [variant]); + + return ( + +
+ {cloneIcon(Icon, { className: iconCls() })} + +

{title}

+ +
+ + ); +}; From 22c581dd332e536e33e4639cfefa59a3d810e7db Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 11:46:17 +0700 Subject: [PATCH 05/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomIcon/CheckRoundFilledIcon.tsx | 21 +++++++++++++++++++ .../src/components/shared/CustomIcon/index.ts | 1 + 2 files changed, 22 insertions(+) create mode 100644 packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx diff --git a/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx new file mode 100644 index 00000000..145e68e1 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const CheckRoundFilledIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index c1ec6410..5e246238 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -5,3 +5,4 @@ export * from './ChevronGrabberHorizontal'; export * from './ChevronLeft'; export * from './ChevronRight'; export * from './GlobeIcon'; +export * from './CheckRoundFilledIcon'; From fa96b6e73478f6dc2317709a7f9a7cf6b2b22d3d Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 11:46:39 +0700 Subject: [PATCH 06/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20to=20compon?= =?UTF-8?q?ents=20render=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/pages/components/index.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx index c1c46f6c..82fa69f3 100644 --- a/packages/frontend/src/pages/components/index.tsx +++ b/packages/frontend/src/pages/components/index.tsx @@ -13,8 +13,12 @@ import { renderTabs, renderVerticalTabs, } from './renders/tabs'; +import { useToast } from 'components/shared/Toast/useToast'; +import { Button } from 'components/shared/Button'; const Page = () => { + const { toast } = useToast(); + const [singleDate, setSingleDate] = useState(); const [dateRange, setDateRange] = useState(); @@ -31,6 +35,13 @@ const Page = () => {
+ {/* Toast */} +
+

Toasts

+ +
{/* Button */}

Button

From ef9f4df28aa514743e5adaad7cbb7957fbfc78ca Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 14:13:10 +0700 Subject: [PATCH 07/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20ghost=20button=20?= =?UTF-8?q?is=20white,=20not=20transparent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/shared/Button/Button.theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/shared/Button/Button.theme.ts b/packages/frontend/src/components/shared/Button/Button.theme.ts index 6c9614c6..194c6550 100644 --- a/packages/frontend/src/components/shared/Button/Button.theme.ts +++ b/packages/frontend/src/components/shared/Button/Button.theme.ts @@ -62,7 +62,7 @@ export const buttonTheme = tv( 'text-elements-on-tertiary', 'border', 'border-border-interactive/10', - 'bg-transparent', + 'bg-controls-tertiary', 'hover:bg-controls-tertiary-hovered', 'hover:border-border-interactive-hovered', 'hover:border-border-interactive-hovered/[0.14]', From 028dd35db1df49f60e5f6dbabda973107c562cff Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 14:13:27 +0700 Subject: [PATCH 08/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/CustomIcon/InfoRoundFilledIcon.tsx | 21 +++++++++++++++++++ .../shared/CustomIcon/LoadingIcon.tsx | 21 +++++++++++++++++++ .../src/components/shared/CustomIcon/index.ts | 2 ++ 3 files changed, 44 insertions(+) create mode 100644 packages/frontend/src/components/shared/CustomIcon/InfoRoundFilledIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/LoadingIcon.tsx diff --git a/packages/frontend/src/components/shared/CustomIcon/InfoRoundFilledIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/InfoRoundFilledIcon.tsx new file mode 100644 index 00000000..d7eb24c4 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/InfoRoundFilledIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const InfoRoundFilledIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/LoadingIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/LoadingIcon.tsx new file mode 100644 index 00000000..012fa986 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/LoadingIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const LoadingIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index 7b84840e..cb5f9f37 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -10,3 +10,5 @@ export * from './SearchIcon'; export * from './CrossIcon'; export * from './GlobeIcon'; export * from './CheckRoundFilledIcon'; +export * from './InfoRoundFilledIcon'; +export * from './LoadingIcon'; From 5836779403f7004ff3be8b6c6a4b25c4a00dac24 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 14:13:47 +0700 Subject: [PATCH 09/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20export=20buttonBa?= =?UTF-8?q?seProps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/shared/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/shared/Button/Button.tsx b/packages/frontend/src/components/shared/Button/Button.tsx index af845e0c..6033a440 100644 --- a/packages/frontend/src/components/shared/Button/Button.tsx +++ b/packages/frontend/src/components/shared/Button/Button.tsx @@ -9,7 +9,7 @@ import { cloneIcon } from 'utils/cloneIcon'; /** * Represents the properties of a base button component. */ -interface ButtonBaseProps { +export interface ButtonBaseProps { /** * The optional left icon element for a component. * @type {ReactNode} From cb928c3360303255a1b86f937a415f5ea42a8943 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 14:16:21 +0700 Subject: [PATCH 10/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20use=20buttonbasep?= =?UTF-8?q?rops,=20duration=202000=20default?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/shared/Toast/useToast.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/components/shared/Toast/useToast.tsx b/packages/frontend/src/components/shared/Toast/useToast.tsx index ad088be4..bd0be17e 100644 --- a/packages/frontend/src/components/shared/Toast/useToast.tsx +++ b/packages/frontend/src/components/shared/Toast/useToast.tsx @@ -1,13 +1,15 @@ // Inspired by react-hot-toast library import React from 'react'; import { type ToastProps } from '@radix-ui/react-toast'; +import { SimpleToastProps } from './SimpleToast'; const TOAST_LIMIT = 3; const TOAST_REMOVE_DELAY_DEFAULT = 7000; -type ToasterToast = ToastProps & { - id: string; -}; +type ToasterToast = ToastProps & + SimpleToastProps & { + id: string; + }; const actionTypes = { ADD_TOAST: 'ADD_TOAST', @@ -136,7 +138,7 @@ const dispatch = (action: Action) => { const toast = (props: ToasterToast) => { if (!props.duration) { - props.duration = 20000; + props.duration = 2000; } const id = genId(); From 675112079c5676a4dcce1cde3c1ceaed3f8083d5 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 14:16:47 +0700 Subject: [PATCH 11/22] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20implement=20?= =?UTF-8?q?toast=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/Toast/SimpleToast.theme.ts | 10 ++++ .../components/shared/Toast/SimpleToast.tsx | 51 ++++++++++++++++--- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts b/packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts index 0d8ae24b..bac805ce 100644 --- a/packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts +++ b/packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts @@ -5,6 +5,7 @@ export const simpleToastTheme = tv( slots: { wrapper: [ 'flex', + 'items-center', 'py-2', 'pl-2', 'pr-1.5', @@ -18,6 +19,15 @@ export const simpleToastTheme = tv( 'shadow-sm', ], icon: ['flex', 'items-center', 'justify-center', 'w-5', 'h-5'], + closeIcon: [ + 'cursor-pointer', + 'flex', + 'items-center', + 'justify-center', + 'w-6', + 'h-6', + 'text-elements-on-high-contrast', + ], title: ['text-sm', 'text-elements-on-high-contrast'], }, variants: { diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx index e134d647..b3bafc21 100644 --- a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx +++ b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx @@ -2,41 +2,80 @@ import React, { useMemo } from 'react'; import * as ToastPrimitive from '@radix-ui/react-toast'; import { ToastProps } from '@radix-ui/react-toast'; import { simpleToastTheme, type SimpleToastTheme } from './SimpleToast.theme'; -import { CheckIcon, CheckRoundFilledIcon } from 'components/shared/CustomIcon'; +import { + LoadingIcon, + CheckRoundFilledIcon, + CrossIcon, + InfoRoundFilledIcon, + WarningIcon, +} from 'components/shared/CustomIcon'; +import { Button, ButtonBaseProps, ButtonTheme } from 'components/shared/Button'; import { cloneIcon } from 'utils/cloneIcon'; +import { cn } from 'utils/classnames'; +interface CtaProps extends ButtonBaseProps, ButtonTheme { + buttonLabel: string; +} export interface SimpleToastProps extends ToastProps { title: string; variant?: SimpleToastTheme['variant']; + cta?: CtaProps[]; + onDismiss: (id?: string) => void; } export const SimpleToast = ({ className, title, variant = 'success', + cta = [], + onDismiss, ...props }: SimpleToastProps) => { + const hasCta = cta.length > 0; const { wrapper: wrapperCls, icon: iconCls, + closeIcon: closeIconCls, title: titleCls, } = simpleToastTheme({ variant }); const Icon = useMemo(() => { if (variant === 'success') return ; - if (variant === 'error') return ; - if (variant === 'warning') return ; - if (variant === 'info') return ; - return ; // variant === 'loading' + if (variant === 'error') return ; + if (variant === 'warning') return ; + if (variant === 'info') return ; + return ; // variant === 'loading' }, [variant]); + const renderCta = useMemo( + () => + hasCta ? ( +
+ {cta.map(({ buttonLabel, ...props }, index) => ( + + ))} +
+ ) : null, + [], + ); + + const renderCloseButton = () => ( +
onDismiss(props.id)} className={closeIconCls()}> + +
+ ); + return ( -
+
{cloneIcon(Icon, { className: iconCls() })}

{title}

 + {renderCta} + {renderCloseButton()}
); From bb7a88f7e97e7e71e82f94fee1d73c264d690792 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 14:17:02 +0700 Subject: [PATCH 12/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20toast=20ren?= =?UTF-8?q?der=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/pages/components/index.tsx | 13 ++-- .../src/pages/components/renders/toast.tsx | 66 +++++++++++++++++++ 2 files changed, 72 insertions(+), 7 deletions(-) create mode 100644 packages/frontend/src/pages/components/renders/toast.tsx diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx index 5866cdde..89403520 100644 --- a/packages/frontend/src/pages/components/index.tsx +++ b/packages/frontend/src/pages/components/index.tsx @@ -17,17 +17,14 @@ import { renderTabs, renderVerticalTabs, } from './renders/tabs'; -import { useToast } from 'components/shared/Toast/useToast'; -import { Button } from 'components/shared/Button'; import { renderInlineNotificationWithDescriptions, renderInlineNotifications, } from './renders/inlineNotifications'; import { renderInputs } from './renders/input'; +import { renderToast, renderToastsWithCta } from './renders/toast'; const Page = () => { - const { toast } = useToast(); - const [singleDate, setSingleDate] = useState(); const [dateRange, setDateRange] = useState(); @@ -47,10 +44,12 @@ const Page = () => { {/* Toast */}

Toasts

- + {renderToastsWithCta()} + {renderToast()}
+ +
+ {/* Button */}

Input

diff --git a/packages/frontend/src/pages/components/renders/toast.tsx b/packages/frontend/src/pages/components/renders/toast.tsx new file mode 100644 index 00000000..9b066e8c --- /dev/null +++ b/packages/frontend/src/pages/components/renders/toast.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { Button } from 'components/shared/Button'; +import { useToast } from 'components/shared/Toast/useToast'; + +export const renderToastsWithCta = () => { + const { toast, dismiss } = useToast(); + + return ( +
+ {(['success', 'error', 'warning', 'info', 'loading'] as const).map( + (variant, index) => ( + + ), + )} +
+ ); +}; + +export const renderToast = () => { + const { toast, dismiss } = useToast(); + + return ( +
+ {(['success', 'error', 'warning', 'info', 'loading'] as const).map( + (variant, index) => ( + + ), + )} +
+ ); +}; From c8a153ad279271583b3f6288d72d11bd1f219098 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 14:20:26 +0700 Subject: [PATCH 13/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20usememo=20depende?= =?UTF-8?q?ncies?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/shared/Toast/SimpleToast.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx index b3bafc21..405cff0d 100644 --- a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx +++ b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx @@ -58,13 +58,16 @@ export const SimpleToast = ({ ))}
) : null, - [], + [cta], ); - const renderCloseButton = () => ( -
onDismiss(props.id)} className={closeIconCls()}> - -
+ const renderCloseButton = useMemo( + () => ( +
onDismiss(props.id)} className={closeIconCls()}> + +
+ ), + [], ); return ( @@ -75,7 +78,7 @@ export const SimpleToast = ({

{title}

{renderCta} - {renderCloseButton()} + {renderCloseButton}
); From 1cd60d84dd6728ac81d555bd2e3968a005d8bee7 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 14:22:29 +0700 Subject: [PATCH 14/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20use=20framer-moti?= =?UTF-8?q?on?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/shared/Toast/SimpleToast.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx index 405cff0d..001ac32b 100644 --- a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx +++ b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx @@ -1,6 +1,7 @@ import React, { useMemo } from 'react'; import * as ToastPrimitive from '@radix-ui/react-toast'; import { ToastProps } from '@radix-ui/react-toast'; +import { motion } from 'framer-motion'; import { simpleToastTheme, type SimpleToastTheme } from './SimpleToast.theme'; import { LoadingIcon, @@ -11,7 +12,6 @@ import { } from 'components/shared/CustomIcon'; import { Button, ButtonBaseProps, ButtonTheme } from 'components/shared/Button'; import { cloneIcon } from 'utils/cloneIcon'; -import { cn } from 'utils/classnames'; interface CtaProps extends ButtonBaseProps, ButtonTheme { buttonLabel: string; @@ -72,14 +72,22 @@ export const SimpleToast = ({ return ( -
+ {cloneIcon(Icon, { className: iconCls() })}

{title}

 {renderCta} {renderCloseButton} -
+ ); }; From fffc370d40636adae9700a001f64ea1cb31fab9f Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 14:58:57 +0700 Subject: [PATCH 15/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20rework=20usememo?= =?UTF-8?q?=20logic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/shared/Toast/SimpleToast.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx index 001ac32b..d780640f 100644 --- a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx +++ b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx @@ -47,9 +47,9 @@ export const SimpleToast = ({ return ; // variant === 'loading' }, [variant]); - const renderCta = useMemo( - () => - hasCta ? ( + const renderCta = useMemo(() => { + if (!hasCta) return null; + return (
{cta.map(({ buttonLabel, ...props }, index) => ( ))}
- ) : null, - [cta], ); + }, [cta]); const renderCloseButton = useMemo( () => ( From 5be29a9745aa08310edc3ebfcd2dc4112367d5c7 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 14:59:12 +0700 Subject: [PATCH 16/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20id=20to=20a?= =?UTF-8?q?llow=20singular=20toast=20deletion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/shared/Toast/SimpleToast.tsx | 24 ++++++++++--------- .../src/components/shared/Toast/Toaster.tsx | 2 +- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx index d780640f..c15f2d45 100644 --- a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx +++ b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx @@ -17,13 +17,15 @@ interface CtaProps extends ButtonBaseProps, ButtonTheme { buttonLabel: string; } export interface SimpleToastProps extends ToastProps { + id: string; title: string; variant?: SimpleToastTheme['variant']; cta?: CtaProps[]; - onDismiss: (id?: string) => void; + onDismiss: (toastId: string) => void; } export const SimpleToast = ({ + id, className, title, variant = 'success', @@ -50,23 +52,23 @@ export const SimpleToast = ({ const renderCta = useMemo(() => { if (!hasCta) return null; return ( -
- {cta.map(({ buttonLabel, ...props }, index) => ( - - ))} -
- ); +
+ {cta.map(({ buttonLabel, ...props }, index) => ( + + ))} +
+ ); }, [cta]); const renderCloseButton = useMemo( () => ( -
onDismiss(props.id)} className={closeIconCls()}> +
onDismiss(id)} className={closeIconCls()}>
), - [], + [id], ); return ( diff --git a/packages/frontend/src/components/shared/Toast/Toaster.tsx b/packages/frontend/src/components/shared/Toast/Toaster.tsx index 85222167..66556956 100644 --- a/packages/frontend/src/components/shared/Toast/Toaster.tsx +++ b/packages/frontend/src/components/shared/Toast/Toaster.tsx @@ -11,7 +11,7 @@ export const Toaster = ({}: ToasterProps) => { const renderToasts = useMemo( () => toasts.map(({ id, ...props }) => ( - + )), [toasts], ); From 4d646e1ac08b4e5ab4e1f0fc8c7ef1886b09aaca Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 15:03:21 +0700 Subject: [PATCH 17/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20extend=20to=20but?= =?UTF-8?q?tonOrLinkProps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/shared/Toast/SimpleToast.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx index c15f2d45..7c10f855 100644 --- a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx +++ b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx @@ -10,12 +10,12 @@ import { InfoRoundFilledIcon, WarningIcon, } from 'components/shared/CustomIcon'; -import { Button, ButtonBaseProps, ButtonTheme } from 'components/shared/Button'; +import { Button, type ButtonOrLinkProps } from 'components/shared/Button'; import { cloneIcon } from 'utils/cloneIcon'; -interface CtaProps extends ButtonBaseProps, ButtonTheme { +type CtaProps = ButtonOrLinkProps & { buttonLabel: string; -} +}; export interface SimpleToastProps extends ToastProps { id: string; title: string; From ba87c6f22a037b43c35815e3092de9bfd3d30bf6 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 16:11:37 +0700 Subject: [PATCH 18/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20replace=20react-h?= =?UTF-8?q?ot-toast=20with=20custom=20toast?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx index da29f575..cc0281f1 100644 --- a/packages/frontend/src/index.tsx +++ b/packages/frontend/src/index.tsx @@ -1,7 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import assert from 'assert'; -import { Toaster } from 'react-hot-toast'; import { GQLClient } from 'gql-client'; import { ThemeProvider } from '@material-tailwind/react'; @@ -11,6 +10,7 @@ import '@fontsource/inter'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { GQLClientProvider } from './context/GQLClientContext'; +import { Toaster } from 'components/shared/Toast/Toaster'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement, @@ -26,7 +26,7 @@ root.render( - + , From 200ea3ca7bd6714cb1e7a223def942cc979d312a Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 16:14:27 +0700 Subject: [PATCH 19/22] =?UTF-8?q?=F0=9F=90=9B=20fix:=20aria-hidden=20namin?= =?UTF-8?q?g=20on=20input?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/shared/Input/Input.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/shared/Input/Input.tsx b/packages/frontend/src/components/shared/Input/Input.tsx index f5bbdca5..d2d5459a 100644 --- a/packages/frontend/src/components/shared/Input/Input.tsx +++ b/packages/frontend/src/components/shared/Input/Input.tsx @@ -55,7 +55,7 @@ export const Input = ({ const renderLeftIcon = useMemo(() => { return (
- {cloneIcon(leftIcon, { className: iconCls(), ariaHidden: true })} + {cloneIcon(leftIcon, { className: iconCls(), 'aria-hidden': true })}
); }, [cloneIcon, iconCls, iconContainerCls, leftIcon]); @@ -63,7 +63,7 @@ export const Input = ({ const renderRightIcon = useMemo(() => { return (
- {cloneIcon(rightIcon, { className: iconCls(), ariaHidden: true })} + {cloneIcon(rightIcon, { className: iconCls(), 'aria-hidden': true })}
); }, [cloneIcon, iconCls, iconContainerCls, rightIcon]); @@ -73,7 +73,7 @@ export const Input = ({
{state && cloneIcon(, { - ariaHidden: true, + 'aria-hidden': true, })}

{helperText}

From 32918b793016d3835b0243c5735c28180f6c7308 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 17:07:15 +0700 Subject: [PATCH 20/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20index=20import?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/shared/Toast/index.ts | 2 ++ packages/frontend/src/index.tsx | 3 +-- packages/frontend/src/pages/components/renders/toast.tsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) create mode 100644 packages/frontend/src/components/shared/Toast/index.ts diff --git a/packages/frontend/src/components/shared/Toast/index.ts b/packages/frontend/src/components/shared/Toast/index.ts new file mode 100644 index 00000000..6404e342 --- /dev/null +++ b/packages/frontend/src/components/shared/Toast/index.ts @@ -0,0 +1,2 @@ +export * from './Toaster'; +export * from './useToast'; diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx index cc0281f1..bdfe6f6d 100644 --- a/packages/frontend/src/index.tsx +++ b/packages/frontend/src/index.tsx @@ -9,8 +9,7 @@ import './index.css'; import '@fontsource/inter'; import App from './App'; import reportWebVitals from './reportWebVitals'; -import { GQLClientProvider } from './context/GQLClientContext'; -import { Toaster } from 'components/shared/Toast/Toaster'; +import { Toaster } from 'components/shared/Toast'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement, diff --git a/packages/frontend/src/pages/components/renders/toast.tsx b/packages/frontend/src/pages/components/renders/toast.tsx index 9b066e8c..fb19e33a 100644 --- a/packages/frontend/src/pages/components/renders/toast.tsx +++ b/packages/frontend/src/pages/components/renders/toast.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Button } from 'components/shared/Button'; -import { useToast } from 'components/shared/Toast/useToast'; +import { useToast } from 'components/shared/Toast'; export const renderToastsWithCta = () => { const { toast, dismiss } = useToast(); From 8952393b31468520a2069e880eb24052da97573b Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 17:08:05 +0700 Subject: [PATCH 21/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20remove=20not=20wo?= =?UTF-8?q?rking=20swipe=20down=20gesture?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/shared/Toast/ToastProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/shared/Toast/ToastProvider.tsx b/packages/frontend/src/components/shared/Toast/ToastProvider.tsx index 57ecf2b6..d45d6e89 100644 --- a/packages/frontend/src/components/shared/Toast/ToastProvider.tsx +++ b/packages/frontend/src/components/shared/Toast/ToastProvider.tsx @@ -7,7 +7,7 @@ import { export const ToastProvider = ({ children, ...props }: ToastProviderProps) => { return ( - + {children} From 0e7343da6f016db569ec99bc54d6a46efe9503f1 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 22 Feb 2024 17:11:03 +0700 Subject: [PATCH 22/22] =?UTF-8?q?=F0=9F=94=A7=20chore:=20gqlclientprovider?= =?UTF-8?q?=20import?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx index bdfe6f6d..d0c0d9b7 100644 --- a/packages/frontend/src/index.tsx +++ b/packages/frontend/src/index.tsx @@ -9,6 +9,7 @@ import './index.css'; import '@fontsource/inter'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import { GQLClientProvider } from './context/GQLClientContext'; import { Toaster } from 'components/shared/Toast'; const root = ReactDOM.createRoot(