From bf74ef3981aa679018a849f30eb88e918d3c9c94 Mon Sep 17 00:00:00 2001 From: Esen Date: Fri, 28 Apr 2023 12:25:48 +0600 Subject: [PATCH 01/16] notifier, basic story --- .storybook/main.ts | 4 + .storybook/preview.jsx | 5 +- package.json | 2 + .../notifications/new-notification.tsx | 82 +++++++++ src/components/notifications/notification.tsx | 2 +- .../notifications/notifications.stories.tsx | 53 +++++- src/components/notifier/Notification.tsx | 82 +++++++++ src/components/notifier/index.tsx | 33 ++++ src/components/notifier/notifier.tsx | 44 +++++ src/components/notifier/stories.tsx | 66 ++++++++ src/theme-chakra/ChakraThemeProvider.tsx | 25 ++- src/theme/theme.ts | 54 +++--- yarn.lock | 158 +++++++++++++++++- 13 files changed, 572 insertions(+), 38 deletions(-) create mode 100644 src/components/notifications/new-notification.tsx create mode 100644 src/components/notifier/Notification.tsx create mode 100644 src/components/notifier/index.tsx create mode 100644 src/components/notifier/notifier.tsx create mode 100644 src/components/notifier/stories.tsx diff --git a/.storybook/main.ts b/.storybook/main.ts index 687675b29..a59572868 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -16,6 +16,10 @@ const config: StorybookConfig = { name: '@storybook/react-vite', options: {}, }, + features: { + // @ts-ignore + emotionAlias: false, + }, }; export default config; diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index bcb70f54c..521327773 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -1,6 +1,7 @@ import { themes } from '@storybook/theming'; import React from 'react'; import { useDarkMode } from 'storybook-dark-mode'; +import { ChakraThemeProvider } from '../src/chakra'; import ThemeProvider from '../src/theme/ThemeProvider'; @@ -19,7 +20,9 @@ export const parameters = { export const decorators = [ (Story) => ( - + + + ), ]; diff --git a/package.json b/package.json index 8e9e2ef7d..bf4afb488 100644 --- a/package.json +++ b/package.json @@ -110,12 +110,14 @@ ".releaserc.json" ], "dependencies": { + "@chakra-ui/anatomy": "^2.1.1", "@chakra-ui/react": "^2.5.5", "@codemirror/view": "^6.9.5", "@emotion/core": "^10.3.1", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@rebass/forms": "^4.0.6", + "@storybook/testing-library": "^0.1.0", "@styled-system/css": "^5.1.5", "@tanem/react-nprogress": "^5.0.34", "@uiw/codemirror-extensions-langs": "^4.19.16", diff --git a/src/components/notifications/new-notification.tsx b/src/components/notifications/new-notification.tsx new file mode 100644 index 000000000..ab98c07cd --- /dev/null +++ b/src/components/notifications/new-notification.tsx @@ -0,0 +1,82 @@ +import { + Alert, + AlertDescription, + AlertTitle, + CloseButton, + useToast, +} from '@chakra-ui/react'; +import React, { ReactNode } from 'react'; +import { Flex } from '../flex'; + +interface Props { + onClose: any; + title: string | ReactNode; + content: string | ReactNode; +} + +export const NewNotification = ({ + onClose, + content, + title, + isError = true, +}: Props) => { + return ( + + + {React.isValidElement(title) ? ( + title + ) : ( + {title} + )} + + + + {React.isValidElement(content) ? ( + content + ) : ( + {content} + )} + + ); +}; + +export interface Notification { + title: string | ReactNode; + content: string | ReactNode; + duration?: number; + isError?: boolean; +} + +export const useNotify = () => { + const toast = useToast(); + + return (notification: Notification) => + toast({ + position: 'top-right', + status: notification.isError ? 'error' : 'success', + duration: notification.duration ?? 5000, + isClosable: true, + render: ({ onClose }) => { + return ( + + ); + }, + }); +}; diff --git a/src/components/notifications/notification.tsx b/src/components/notifications/notification.tsx index 7ad7d69dc..7a4380667 100644 --- a/src/components/notifications/notification.tsx +++ b/src/components/notifications/notification.tsx @@ -23,7 +23,7 @@ const Notification: FC = ({ NotificationManager.remove(id); }, duration); - setTimeoutNumber(timeout); + setTimeoutNumber(timeout); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/src/components/notifications/notifications.stories.tsx b/src/components/notifications/notifications.stories.tsx index b9173fa9c..612eac736 100644 --- a/src/components/notifications/notifications.stories.tsx +++ b/src/components/notifications/notifications.stories.tsx @@ -1,19 +1,25 @@ +import { Meta } from '@storybook/react'; import React, { useCallback } from 'react'; -import { Story, Meta } from '@storybook/react'; +import { useToast } from '@chakra-ui/react'; import { Flex } from 'rebass'; import NotificationManager from './notifications-manager'; // Components -import NotificationsContainer from './index'; import { Button, Label, Labeling } from '../../index'; +import NotificationsContainer from './index'; +import { NewNotification, useNotify } from './new-notification'; +import { standaloneToast } from '../../theme-chakra/ChakraThemeProvider'; export default { title: 'Quartz/NotificationsContainer', component: NotificationsContainer, } as Meta; -const Template: Story = () => { +const Template = () => { + const notify = useNotify(); + const notifyHandler = useCallback(() => { NotificationManager.create({ + isError: true, type: , content: ( @@ -26,10 +32,51 @@ const Template: Story = () => { }); }, []); + const another = () => { + notify({ + title: 'Account created.', + content: ( + + message or message or message + + + ), + duration: 118000, + }); + }; + + const another2 = () => { + standaloneToast({ + title: 'Account created.', + description: "We've created your account for you.", + position: 'top-right', + duration: 10000000, + + render: ({ onClose }) => { + return ( + + + + + triggered for hey successfully + + + + ); + }, + }); + }; + return ( <> + + ); }; diff --git a/src/components/notifier/Notification.tsx b/src/components/notifier/Notification.tsx new file mode 100644 index 000000000..a00791239 --- /dev/null +++ b/src/components/notifier/Notification.tsx @@ -0,0 +1,82 @@ +import { + Alert, + AlertDescription, + AlertProps, + AlertTitle, + CloseButton, + useToast, +} from '@chakra-ui/react'; +import React, { ReactNode } from 'react'; +import { Flex } from '../flex'; + +interface Props extends Omit { + onClose: any; + title: string | ReactNode; + content: string | ReactNode; +} + +export const Notification = ({ onClose, content, title, status }: Props) => { + return ( + + + {React.isValidElement(title) ? ( + title + ) : ( + {title} + )} + + + + {React.isValidElement(content) ? ( + content + ) : ( + {content} + )} + + ); +}; + +export interface INotification { + /** Title of the alert. */ + title: string | ReactNode; + /** Content under the title. */ + content: string | ReactNode; + /** Duration in milliseconds. E.g. 5000 by default */ + duration?: number; + isError?: boolean; +} + +export const useNotify = () => { + const toast = useToast(); + + return (notification: INotification) => + toast({ + position: 'top-right', + status: notification.isError ? 'error' : 'success', + duration: notification.duration ?? 5000, + isClosable: true, + render: ({ onClose }) => { + return ( + + ); + }, + }); +}; diff --git a/src/components/notifier/index.tsx b/src/components/notifier/index.tsx new file mode 100644 index 000000000..04797057e --- /dev/null +++ b/src/components/notifier/index.tsx @@ -0,0 +1,33 @@ +import React, { FC, useCallback, useEffect, useState } from 'react'; + +import { FlexProps } from 'rebass'; +import NotificationManager, { + SystemNotification, +} from './notifications-manager'; +// Components +import NotificationsItemsContainer from './notifications-container'; + +export interface NotificationContainerProps extends Omit {} + +const NotificationsContainer: FC = (props) => { + const [notifications, setNotifications] = useState([]); + + const handleChange = useCallback((list: SystemNotification[]) => { + setNotifications(list.slice()); + }, []); + + useEffect(() => { + NotificationManager.addChangeListener(handleChange); + + return () => { + NotificationManager.removeChangeListener(handleChange); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + ); +}; + +export default NotificationsContainer; diff --git a/src/components/notifier/notifier.tsx b/src/components/notifier/notifier.tsx new file mode 100644 index 000000000..679c27720 --- /dev/null +++ b/src/components/notifier/notifier.tsx @@ -0,0 +1,44 @@ +import { useToast } from '@chakra-ui/react'; +import React, { ReactNode, useCallback } from 'react'; +import { Notification } from './Notification'; + +type Status = 'success' | 'error'; + +export interface INotification { + title: string | ReactNode; + content: string | ReactNode; + duration?: number; + status?: Status; +} + +export const useNotifier = () => { + const toast = useToast(); + + const notify = useCallback( + (status: Status) => (notification: INotification) => + toast({ + status, + position: 'top-right', + duration: notification.duration ?? 5000, + isClosable: true, + render: ({ onClose }) => { + return ( + + ); + }, + }), + [toast], + ); + + return { + success: notify('success'), + error: notify('error'), + closeAll: toast.closeAll, + close: toast.close, + }; +}; diff --git a/src/components/notifier/stories.tsx b/src/components/notifier/stories.tsx new file mode 100644 index 000000000..52d1b4eaa --- /dev/null +++ b/src/components/notifier/stories.tsx @@ -0,0 +1,66 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { within, userEvent } from '@storybook/testing-library'; + +import { expect } from '@storybook/jest'; + +import { INotification, Notification, useNotify } from './Notification'; +import { Button } from '../button'; +import { Box } from '../box'; +import { useNotifier } from './notifier'; + +const meta: Meta = { + title: 'Notifier', + args: { + title: 'Something happened', + content: 'You have to see it.', + duration: 5000, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Error: Story = { + args: { + title: 'Error happened', + }, + render: (args) => { + const notify = useNotifier(); + + const another = () => { + notify.error({ + title: args.title, + content: args.content, + duration: args.duration, + }); + }; + + return ( + + + + ); + }, +}; + +export const Success: Story = { + render: (args) => { + const notify = useNotifier(); + + const another = () => { + notify.success({ + title: args.title, + content: args.content, + duration: args.duration, + }); + }; + + return ( + + + + ); + }, +}; diff --git a/src/theme-chakra/ChakraThemeProvider.tsx b/src/theme-chakra/ChakraThemeProvider.tsx index dd780460e..f68657ed7 100644 --- a/src/theme-chakra/ChakraThemeProvider.tsx +++ b/src/theme-chakra/ChakraThemeProvider.tsx @@ -1,13 +1,32 @@ -import { ChakraProvider, extendTheme } from '@chakra-ui/react'; +import { + ChakraProvider, + createStandaloneToast, + extendTheme, +} from '@chakra-ui/react'; import React, { PropsWithChildren } from 'react'; +import { colors, darkThemeColors } from '../theme/theme'; const theme = extendTheme({ config: { cssVarPrefix: 'quartz', }, + colors: { + ...colors, + dark: darkThemeColors, + }, +}); + +const { ToastContainer, toast } = createStandaloneToast({ + theme, }); export const ChakraThemeProvider = ({ children }: PropsWithChildren) => { - // @ts-expect-error for some reason it says it doesn't accept children - return {children}; + return ( + <> + {children} + + + ); }; + +export const standaloneToast = toast; diff --git a/src/theme/theme.ts b/src/theme/theme.ts index dfe7cfb3b..3fea15b5a 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -53,35 +53,37 @@ import notification from './notifications'; // Chip import editableSelect from './editableSelect'; -const defaultTheme: ITheme = { - colors: { - primary: '#21B182', - primaryShade1: '#65D3AF', - primaryShade2: '#E6F2EE', +export const colors = { + primary: '#21B182', + primaryShade1: '#65D3AF', + primaryShade2: '#E6F2EE', - gray: '#a0a0a0', - grayShade1: '#CBCBCB', - grayShade2: '#E2E2E2', - grayShade3: '#F5F5F5', + gray: '#a0a0a0', + grayShade1: '#CBCBCB', + grayShade2: '#E2E2E2', + grayShade3: '#F5F5F5', - black: '#272727', - white: '#FFFFFF', + black: '#272727', + white: '#FFFFFF', - labels: { - red: '#EB5757', - orange: '#f2994a', - purple: '#9B51E0', - purpleShade2: '#F5EEFC', - yellow: '#FFE600', - yellowShade2: '#FFF8B3', - green: '#21B182', - blueShade1: '#41B7DC', - blueShade2: '#ECF8FC', - blue: '#186781', - orangeShade2: '#FDF0E4', - redShade2: '#F8DEDE', - }, + labels: { + red: '#EB5757', + orange: '#f2994a', + purple: '#9B51E0', + purpleShade2: '#F5EEFC', + yellow: '#FFE600', + yellowShade2: '#FFF8B3', + green: '#21B182', + blueShade1: '#41B7DC', + blueShade2: '#ECF8FC', + blue: '#186781', + orangeShade2: '#FDF0E4', + redShade2: '#F8DEDE', }, +}; + +const defaultTheme: ITheme = { + colors, fonts: { text: 'Inter', title: 'Inter', @@ -174,7 +176,7 @@ const defaultTheme: ITheme = { notification, }; -const darkThemeColors: ITheme['colors'] = { +export const darkThemeColors: ITheme['colors'] = { white: '#181a1b', gray: '#A6A6A6', diff --git a/yarn.lock b/yarn.lock index 3f008e52e..9d5e4caf7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -66,7 +66,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.21.4": +"@babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.21.4": version: 7.21.4 resolution: "@babel/code-frame@npm:7.21.4" dependencies: @@ -1701,7 +1701,7 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/anatomy@npm:2.1.2": +"@chakra-ui/anatomy@npm:2.1.2, @chakra-ui/anatomy@npm:^2.1.1": version: 2.1.2 resolution: "@chakra-ui/anatomy@npm:2.1.2" checksum: 87519672ae028ef3af44ecc7d87fa18dc7ec8d46958a3490cb312ebc6b857bc227e908ffe0b12eb1e2a11c860656c38c3160ebc20bf1e9522b0ae0ef7b31e28d @@ -4750,6 +4750,7 @@ __metadata: version: 0.0.0-use.local resolution: "@logicalclocks/quartz@workspace:." dependencies: + "@chakra-ui/anatomy": ^2.1.1 "@chakra-ui/react": ^2.5.5 "@chakra-ui/storybook-addon": ^4.0.16 "@codemirror/view": ^6.9.5 @@ -4771,6 +4772,7 @@ __metadata: "@storybook/react": ^7.0.4 "@storybook/react-vite": ^7.0.4 "@storybook/test-runner": ^0.10.0 + "@storybook/testing-library": ^0.1.0 "@styled-system/css": ^5.1.5 "@tanem/react-nprogress": ^5.0.34 "@types/node": ^16.12.38 @@ -6200,6 +6202,20 @@ __metadata: languageName: node linkType: hard +"@storybook/channel-postmessage@npm:7.0.8": + version: 7.0.8 + resolution: "@storybook/channel-postmessage@npm:7.0.8" + dependencies: + "@storybook/channels": 7.0.8 + "@storybook/client-logger": 7.0.8 + "@storybook/core-events": 7.0.8 + "@storybook/global": ^5.0.0 + qs: ^6.10.0 + telejson: ^7.0.3 + checksum: 42c759618c6bc065deca52d50ea3612ebd782b0d2cc7e86dc9a3ee79443db852ed8ff58d7e76ce87e91ee5fc9e699bf3a4e27210b701f5784e2bc1595ad73fd7 + languageName: node + linkType: hard + "@storybook/channel-websocket@npm:7.0.4": version: 7.0.4 resolution: "@storybook/channel-websocket@npm:7.0.4" @@ -6226,6 +6242,13 @@ __metadata: languageName: node linkType: hard +"@storybook/channels@npm:7.0.8": + version: 7.0.8 + resolution: "@storybook/channels@npm:7.0.8" + checksum: 8d6409e45587dcedb88659817a460770f2ce40c23f4456d11daade7d23e3e622272882003a44141b84025ddc096f8ee2b6f28b4c6324c35a70e55f793a56d0c5 + languageName: node + linkType: hard + "@storybook/cli@npm:7.0.4": version: 7.0.4 resolution: "@storybook/cli@npm:7.0.4" @@ -6293,6 +6316,15 @@ __metadata: languageName: node linkType: hard +"@storybook/client-logger@npm:7.0.8, @storybook/client-logger@npm:^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0": + version: 7.0.8 + resolution: "@storybook/client-logger@npm:7.0.8" + dependencies: + "@storybook/global": ^5.0.0 + checksum: 2c312e2257ac8ff1fb00d0496bcad3fd2874ec509fc5b3833c1c2e8bcb8274711afa2a519653e7eb5476be0a7f7b9f8df2231ee9dedddaf70877a6d6fc422992 + languageName: node + linkType: hard + "@storybook/codemod@npm:7.0.4": version: 7.0.4 resolution: "@storybook/codemod@npm:7.0.4" @@ -6430,6 +6462,13 @@ __metadata: languageName: node linkType: hard +"@storybook/core-events@npm:7.0.8": + version: 7.0.8 + resolution: "@storybook/core-events@npm:7.0.8" + checksum: 7bbddb06cfc5967b5882bd57e2100d67e40b254289cdcfe05bf7e36369a72c8ec75b5c06fb994c2d64c850d96247f93c0726cb5853da1772e1e78590aa05e443 + languageName: node + linkType: hard + "@storybook/core-server@npm:7.0.4": version: 7.0.4 resolution: "@storybook/core-server@npm:7.0.4" @@ -6575,6 +6614,19 @@ __metadata: languageName: node linkType: hard +"@storybook/instrumenter@npm:^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0": + version: 7.0.8 + resolution: "@storybook/instrumenter@npm:7.0.8" + dependencies: + "@storybook/channels": 7.0.8 + "@storybook/client-logger": 7.0.8 + "@storybook/core-events": 7.0.8 + "@storybook/global": ^5.0.0 + "@storybook/preview-api": 7.0.8 + checksum: 6200b84e6fd6a194ce61f0f576ee8bb3d6593454df6ab3dff1567e6d3f3f800ad462a8b160570932257f6ef667d62317978623978c4077e08af734012af8299f + languageName: node + linkType: hard + "@storybook/manager-api@npm:7.0.2": version: 7.0.2 resolution: "@storybook/manager-api@npm:7.0.2" @@ -6718,6 +6770,29 @@ __metadata: languageName: node linkType: hard +"@storybook/preview-api@npm:7.0.8": + version: 7.0.8 + resolution: "@storybook/preview-api@npm:7.0.8" + dependencies: + "@storybook/channel-postmessage": 7.0.8 + "@storybook/channels": 7.0.8 + "@storybook/client-logger": 7.0.8 + "@storybook/core-events": 7.0.8 + "@storybook/csf": ^0.1.0 + "@storybook/global": ^5.0.0 + "@storybook/types": 7.0.8 + "@types/qs": ^6.9.5 + dequal: ^2.0.2 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + qs: ^6.10.0 + synchronous-promise: ^2.0.15 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + checksum: 706b0810e161b1e0a5a848fd06f84bffd6567e400e1e4230ab11dc784de5a69d29d1ec1cd62dfcb70a42492755303e3f40c0b64de697b393f63c6d6dce82ad38 + languageName: node + linkType: hard + "@storybook/preview@npm:7.0.4": version: 7.0.4 resolution: "@storybook/preview@npm:7.0.4" @@ -6875,6 +6950,19 @@ __metadata: languageName: node linkType: hard +"@storybook/testing-library@npm:^0.1.0": + version: 0.1.0 + resolution: "@storybook/testing-library@npm:0.1.0" + dependencies: + "@storybook/client-logger": ^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0 + "@storybook/instrumenter": ^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0 + "@testing-library/dom": ^8.3.0 + "@testing-library/user-event": ^13.2.1 + ts-dedent: ^2.2.0 + checksum: a413110dafe80f8fe64da912fddb653bc3c695c94bd023b8cb918e519e9f94119bae559909bfb8ad229041a4f17a12b33425c61572270702c116d0b727b4d4ba + languageName: node + linkType: hard + "@storybook/theming@npm:7.0.2, @storybook/theming@npm:^7.0.0": version: 7.0.2 resolution: "@storybook/theming@npm:7.0.2" @@ -6929,6 +7017,18 @@ __metadata: languageName: node linkType: hard +"@storybook/types@npm:7.0.8": + version: 7.0.8 + resolution: "@storybook/types@npm:7.0.8" + dependencies: + "@storybook/channels": 7.0.8 + "@types/babel__core": ^7.0.0 + "@types/express": ^4.7.0 + file-system-cache: ^2.0.0 + checksum: fe274bd86a1a6638daad43395695c99c77cdc47fe7ede8395f81b154b379aa4d539dd2c30be19748d2773597a5ad17447abedb63c47dbb7ccbe7d59895ef50bb + languageName: node + linkType: hard + "@styled-system/background@npm:^5.1.2": version: 5.1.2 resolution: "@styled-system/background@npm:5.1.2" @@ -7069,6 +7169,33 @@ __metadata: languageName: node linkType: hard +"@testing-library/dom@npm:^8.3.0": + version: 8.20.0 + resolution: "@testing-library/dom@npm:8.20.0" + dependencies: + "@babel/code-frame": ^7.10.4 + "@babel/runtime": ^7.12.5 + "@types/aria-query": ^5.0.1 + aria-query: ^5.0.0 + chalk: ^4.1.0 + dom-accessibility-api: ^0.5.9 + lz-string: ^1.4.4 + pretty-format: ^27.0.2 + checksum: 1e599129a2fe91959ce80900a0a4897232b89e2a8e22c1f5950c36d39c97629ea86b4986b60b173b5525a05de33fde1e35836ea597b03de78cc51b122835c6f0 + languageName: node + linkType: hard + +"@testing-library/user-event@npm:^13.2.1": + version: 13.5.0 + resolution: "@testing-library/user-event@npm:13.5.0" + dependencies: + "@babel/runtime": ^7.12.5 + peerDependencies: + "@testing-library/dom": ">=7.21.4" + checksum: 16319de685fbb7008f1ba667928f458b2d08196918002daca56996de80ef35e6d9de26e9e1ece7d00a004692b95a597cf9142fff0dc53f2f51606a776584f549 + languageName: node + linkType: hard + "@tootallnate/once@npm:1": version: 1.1.2 resolution: "@tootallnate/once@npm:1.1.2" @@ -7147,6 +7274,13 @@ __metadata: languageName: node linkType: hard +"@types/aria-query@npm:^5.0.1": + version: 5.0.1 + resolution: "@types/aria-query@npm:5.0.1" + checksum: 69fd7cceb6113ed370591aef04b3fd0742e9a1b06dd045c43531448847b85de181495e4566f98e776b37c422a12fd71866e0a1dfd904c5ec3f84d271682901de + languageName: node + linkType: hard + "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14": version: 7.20.0 resolution: "@types/babel__core@npm:7.20.0" @@ -8386,7 +8520,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:^5.1.3": +"aria-query@npm:^5.0.0, aria-query@npm:^5.1.3": version: 5.1.3 resolution: "aria-query@npm:5.1.3" dependencies: @@ -10643,6 +10777,13 @@ __metadata: languageName: node linkType: hard +"dom-accessibility-api@npm:^0.5.9": + version: 0.5.16 + resolution: "dom-accessibility-api@npm:0.5.16" + checksum: 005eb283caef57fc1adec4d5df4dd49189b628f2f575af45decb210e04d634459e3f1ee64f18b41e2dcf200c844bc1d9279d80807e686a30d69a4756151ad248 + languageName: node + linkType: hard + "dom-align@npm:^1.7.0": version: 1.12.4 resolution: "dom-align@npm:1.12.4" @@ -16046,6 +16187,15 @@ __metadata: languageName: node linkType: hard +"lz-string@npm:^1.4.4": + version: 1.5.0 + resolution: "lz-string@npm:1.5.0" + bin: + lz-string: bin/bin.js + checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d + languageName: node + linkType: hard + "magic-string@npm:^0.27.0": version: 0.27.0 resolution: "magic-string@npm:0.27.0" @@ -18122,7 +18272,7 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^27.5.1": +"pretty-format@npm:^27.0.2, pretty-format@npm:^27.5.1": version: 27.5.1 resolution: "pretty-format@npm:27.5.1" dependencies: From 4bd05b207a81d3cb37353301cfd16a51c94f6e99 Mon Sep 17 00:00:00 2001 From: Esen Date: Wed, 3 May 2023 06:24:47 +0600 Subject: [PATCH 02/16] fix dark mode --- .storybook/preview.jsx | 29 +++++++++++++++++++---------- src/theme/ThemeProvider.tsx | 9 +++++++-- 2 files changed, 26 insertions(+), 12 deletions(-) diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 521327773..648e50ef8 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -1,3 +1,4 @@ +import { ColorModeScript } from '@chakra-ui/react'; import { themes } from '@storybook/theming'; import React from 'react'; import { useDarkMode } from 'storybook-dark-mode'; @@ -11,18 +12,26 @@ export const parameters = { controls: { expanded: true }, chakra: {}, darkMode: { - current: 'light', - dark: { ...themes.dark, appBg: themes.dark.appBg }, - light: { ...themes.light, appBg: themes.light.appBg }, + dark: { ...themes.dark }, + light: { ...themes.light }, + stylePreview: true, }, }; export const decorators = [ - (Story) => ( - - - - - - ), + (Story) => { + const isDark = useDarkMode(); + + return ( + <> + + + + + + + + + ); + }, ]; diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx index 53bf73ff7..eb2394660 100644 --- a/src/theme/ThemeProvider.tsx +++ b/src/theme/ThemeProvider.tsx @@ -1,7 +1,7 @@ import { ColorModeScript, useColorMode } from '@chakra-ui/react'; import { css, Global } from '@emotion/core'; import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; -import React, { FC } from 'react'; +import React, { FC, useEffect } from 'react'; import defaultTheme, { darkTheme } from './theme'; @@ -16,7 +16,12 @@ const ThemeProvider: FC = ({ children, colorMode: colorModeFromProps, }: ThemeProviderProps) => { - const { colorMode } = useColorMode(); + const { colorMode, setColorMode } = useColorMode(); + + useEffect(() => { + console.log(); + setColorMode(colorModeFromProps); + }, [colorModeFromProps, setColorMode]); const colorModeToUse = colorModeFromProps ?? colorMode; // the outer one overrides inner state From b56aedde31c9765764eb4ca48952a21af9a31f3f Mon Sep 17 00:00:00 2001 From: Esen Date: Wed, 3 May 2023 07:24:10 +0600 Subject: [PATCH 03/16] autodocs --- .storybook/main.ts | 1 - .storybook/preview.jsx | 11 ++++++++- package.json | 1 - src/components/notifier/notifier.tsx | 2 +- src/components/notifier/stories.tsx | 35 ++++++++++++++++++++++++++++ yarn.lock | 19 --------------- 6 files changed, 46 insertions(+), 23 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index a59572868..67aa2f3dc 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -10,7 +10,6 @@ const config: StorybookConfig = { '@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-dark-mode', - '@chakra-ui/storybook-addon', ], framework: { name: '@storybook/react-vite', diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 648e50ef8..1f549f38e 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -1,4 +1,5 @@ import { ColorModeScript } from '@chakra-ui/react'; +import { DocsContainer } from '@storybook/addon-docs'; import { themes } from '@storybook/theming'; import React from 'react'; import { useDarkMode } from 'storybook-dark-mode'; @@ -10,7 +11,15 @@ export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, layout: 'centered', controls: { expanded: true }, - chakra: {}, + docs: { + container: (props) => { + const isDark = useDarkMode(); + + return ( + + ); + }, + }, darkMode: { dark: { ...themes.dark }, light: { ...themes.light }, diff --git a/package.json b/package.json index bf4afb488..ef653aa06 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,6 @@ "react-router-dom": "^6.3.0" }, "devDependencies": { - "@chakra-ui/storybook-addon": "^4.0.16", "@playwright/experimental-ct-react": "^1.31.2", "@semantic-release/changelog": "^6.0.3", "@semantic-release/commit-analyzer": "^9.0.2", diff --git a/src/components/notifier/notifier.tsx b/src/components/notifier/notifier.tsx index 679c27720..a98684134 100644 --- a/src/components/notifier/notifier.tsx +++ b/src/components/notifier/notifier.tsx @@ -27,7 +27,7 @@ export const useNotifier = () => { title={notification.title} content={notification.content} onClose={onClose} - status="error" + status={status} /> ); }, diff --git a/src/components/notifier/stories.tsx b/src/components/notifier/stories.tsx index 52d1b4eaa..ad40f7a00 100644 --- a/src/components/notifier/stories.tsx +++ b/src/components/notifier/stories.tsx @@ -8,9 +8,11 @@ import { INotification, Notification, useNotify } from './Notification'; import { Button } from '../button'; import { Box } from '../box'; import { useNotifier } from './notifier'; +import { Flex } from '../flex'; const meta: Meta = { title: 'Notifier', + tags: ['autodocs'], args: { title: 'Something happened', content: 'You have to see it.', @@ -20,6 +22,39 @@ const meta: Meta = { export default meta; +export const Primary: Story = { + render: ({ title, content, duration }) => { + const notify = useNotifier(); + + const showSuccess = () => { + notify.success({ + title, + content, + duration, + }); + }; + + const showError = () => { + notify.error({ + title, + content, + duration, + }); + }; + + return ( + + + + + ); + }, +}; + type Story = StoryObj; export const Error: Story = { diff --git a/yarn.lock b/yarn.lock index 9d5e4caf7..d6e24baca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2615,24 +2615,6 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/storybook-addon@npm:^4.0.16": - version: 4.0.17 - resolution: "@chakra-ui/storybook-addon@npm:4.0.17" - peerDependencies: - "@chakra-ui/react": 0.0.0-dev-20230112160451 - "@storybook/addons": ">=6.4" - "@storybook/api": ">=6.4" - "@storybook/components": ">=6.4" - react: ">=16.8.x" - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: 20e425b3415baeaa9aed2b2bd1d5a829f01df280d7acd7c3f2f57cd382f13ef54f8b29df010cbe87a11201261ef786188942dc40538fa9779282d634669ef8b8 - languageName: node - linkType: hard - "@chakra-ui/styled-system@npm:2.8.0": version: 2.8.0 resolution: "@chakra-ui/styled-system@npm:2.8.0" @@ -4752,7 +4734,6 @@ __metadata: dependencies: "@chakra-ui/anatomy": ^2.1.1 "@chakra-ui/react": ^2.5.5 - "@chakra-ui/storybook-addon": ^4.0.16 "@codemirror/view": ^6.9.5 "@emotion/core": ^10.3.1 "@emotion/react": ^11.10.6 From ccb76f4a55ebabff00ed550fb6c318b796f5bba5 Mon Sep 17 00:00:00 2001 From: Esen Date: Wed, 3 May 2023 09:06:22 +0600 Subject: [PATCH 04/16] write tests --- package.json | 1 + src/components/notifier/notifier.tsx | 29 ++++- src/components/notifier/stories.tsx | 66 ++++++++-- src/theme-chakra/ChakraThemeProvider.tsx | 10 +- yarn.lock | 157 ++++++++++++++++++++++- 5 files changed, 249 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index ef653aa06..93ea2abfb 100644 --- a/package.json +++ b/package.json @@ -116,6 +116,7 @@ "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@rebass/forms": "^4.0.6", + "@storybook/jest": "^0.1.0", "@storybook/testing-library": "^0.1.0", "@styled-system/css": "^5.1.5", "@tanem/react-nprogress": "^5.0.34", diff --git a/src/components/notifier/notifier.tsx b/src/components/notifier/notifier.tsx index a98684134..524a425f0 100644 --- a/src/components/notifier/notifier.tsx +++ b/src/components/notifier/notifier.tsx @@ -1,5 +1,6 @@ import { useToast } from '@chakra-ui/react'; import React, { ReactNode, useCallback } from 'react'; +import { standaloneToast } from '../../theme-chakra/ChakraThemeProvider'; import { Notification } from './Notification'; type Status = 'success' | 'error'; @@ -18,7 +19,6 @@ export const useNotifier = () => { (status: Status) => (notification: INotification) => toast({ status, - position: 'top-right', duration: notification.duration ?? 5000, isClosable: true, render: ({ onClose }) => { @@ -42,3 +42,30 @@ export const useNotifier = () => { close: toast.close, }; }; + +export const createNotifier = () => { + const notify = (status: Status) => (notification: INotification) => + standaloneToast({ + status, + duration: notification.duration ?? 5000, + isClosable: true, + position: 'top-right', + render: ({ onClose }) => { + return ( + + ); + }, + }); + + return { + success: notify('success'), + error: notify('error'), + closeAll: standaloneToast.closeAll, + close: standaloneToast.close, + }; +}; diff --git a/src/components/notifier/stories.tsx b/src/components/notifier/stories.tsx index ad40f7a00..3813f73c0 100644 --- a/src/components/notifier/stories.tsx +++ b/src/components/notifier/stories.tsx @@ -1,14 +1,15 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, waitFor } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; import { INotification, Notification, useNotify } from './Notification'; import { Button } from '../button'; import { Box } from '../box'; -import { useNotifier } from './notifier'; +import { createNotifier, useNotifier } from './notifier'; import { Flex } from '../flex'; +import Value from '../typography/value'; const meta: Meta = { title: 'Notifier', @@ -36,23 +37,45 @@ export const Primary: Story = { const showError = () => { notify.error({ - title, + title: `Error!: ${title}`, content, duration, }); }; return ( - - - + + + ); }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const portal = within(document.querySelector('.chakra-portal')!); + + await userEvent.click(canvas.getByText('Success')); + await expect(portal.getByText('Something happened')).toBeInTheDocument(); + + await userEvent.click(canvas.getByText('Error')); + await expect( + portal.getByText('Error!: Something happened'), + ).toBeInTheDocument(); + + await userEvent.click(canvas.getByText('Clear all notifications')); + await waitFor(() => + expect(portal.queryByText('Something happened')).not.toBeInTheDocument(), + ); + }, }; type Story = StoryObj; @@ -99,3 +122,28 @@ export const Success: Story = { ); }, }; + +export const Standalone: Story = { + parameters: { + docs: { + source: `huy`, + }, + }, + render: (args) => { + const notifier = createNotifier(); + const another = () => { + notifier.success({ + title: args.title, + content: args.content, + duration: args.duration, + }); + }; + + return ( + + This is for situations when you cannot use a hook. + + + ); + }, +}; diff --git a/src/theme-chakra/ChakraThemeProvider.tsx b/src/theme-chakra/ChakraThemeProvider.tsx index f68657ed7..bae27d652 100644 --- a/src/theme-chakra/ChakraThemeProvider.tsx +++ b/src/theme-chakra/ChakraThemeProvider.tsx @@ -14,6 +14,9 @@ const theme = extendTheme({ ...colors, dark: darkThemeColors, }, + components: { + Alert: {}, + }, }); const { ToastContainer, toast } = createStandaloneToast({ @@ -23,7 +26,12 @@ const { ToastContainer, toast } = createStandaloneToast({ export const ChakraThemeProvider = ({ children }: PropsWithChildren) => { return ( <> - {children} + + {children} + ); diff --git a/yarn.lock b/yarn.lock index d6e24baca..66bdabcaf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -36,6 +36,13 @@ __metadata: languageName: node linkType: hard +"@adobe/css-tools@npm:^4.0.1": + version: 4.2.0 + resolution: "@adobe/css-tools@npm:4.2.0" + checksum: dc5cc92ba3d562e7ffddb79d6d222c7e00b65f255fd2725b3d71490ff268844be322f917415d8c4ab39eca646343b632058db8bd5b1d646193fcc94d1d3e420b + languageName: node + linkType: hard + "@ampproject/remapping@npm:^2.2.0": version: 2.2.0 resolution: "@ampproject/remapping@npm:2.2.0" @@ -1584,6 +1591,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.9.2": + version: 7.21.5 + resolution: "@babel/runtime@npm:7.21.5" + dependencies: + regenerator-runtime: ^0.13.11 + checksum: 358f2779d3187f5c67ad302e8f8d435412925d0b991d133c7d4a7b1ddd5a3fda1b6f34537cb64628dfd96a27ae46df105bed3895b8d754b88cacdded8d1129dd + languageName: node + linkType: hard + "@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.3.3": version: 7.20.7 resolution: "@babel/template@npm:7.20.7" @@ -4139,6 +4155,15 @@ __metadata: languageName: node linkType: hard +"@jest/expect-utils@npm:^29.5.0": + version: 29.5.0 + resolution: "@jest/expect-utils@npm:29.5.0" + dependencies: + jest-get-type: ^29.4.3 + checksum: c46fb677c88535cf83cf29f0a5b1f376c6a1109ddda266ad7da1a9cbc53cb441fa402dd61fc7b111ffc99603c11a9b3357ee41a1c0e035a58830bcb360871476 + languageName: node + linkType: hard + "@jest/expect@npm:^28.1.3": version: 28.1.3 resolution: "@jest/expect@npm:28.1.3" @@ -4750,6 +4775,7 @@ __metadata: "@storybook/addon-essentials": ^7.0.4 "@storybook/addon-interactions": ^7.0.4 "@storybook/addon-links": ^7.0.4 + "@storybook/jest": ^0.1.0 "@storybook/react": ^7.0.4 "@storybook/react-vite": ^7.0.4 "@storybook/test-runner": ^0.10.0 @@ -6575,6 +6601,15 @@ __metadata: languageName: node linkType: hard +"@storybook/expect@npm:storybook-jest": + version: 27.5.2-0 + resolution: "@storybook/expect@npm:27.5.2-0" + dependencies: + "@types/jest": ">=26.0.0" + checksum: 09738a8f8e0b9d3d5a909c80ce0c101080cf376316ceca1f3820e88877d6b5ef92abd847b4c4a4e9687c43c2168a6e3e8cdd74947b6af622688797f74cf523df + languageName: node + linkType: hard + "@storybook/global@npm:^5.0.0": version: 5.0.0 resolution: "@storybook/global@npm:5.0.0" @@ -6608,6 +6643,18 @@ __metadata: languageName: node linkType: hard +"@storybook/jest@npm:^0.1.0": + version: 0.1.0 + resolution: "@storybook/jest@npm:0.1.0" + dependencies: + "@storybook/expect": storybook-jest + "@storybook/instrumenter": ^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0 + "@testing-library/jest-dom": ^5.16.2 + jest-mock: ^27.3.0 + checksum: 74a4b9dc0ce921f72c2f4fbba053e4a4c84a6a16d07406492a26733f55438229197e547364d0848ac3df38ab5ce9e20829029196d376a267033d8e75904ab611 + languageName: node + linkType: hard + "@storybook/manager-api@npm:7.0.2": version: 7.0.2 resolution: "@storybook/manager-api@npm:7.0.2" @@ -7166,6 +7213,23 @@ __metadata: languageName: node linkType: hard +"@testing-library/jest-dom@npm:^5.16.2": + version: 5.16.5 + resolution: "@testing-library/jest-dom@npm:5.16.5" + dependencies: + "@adobe/css-tools": ^4.0.1 + "@babel/runtime": ^7.9.2 + "@types/testing-library__jest-dom": ^5.9.1 + aria-query: ^5.0.0 + chalk: ^3.0.0 + css.escape: ^1.5.1 + dom-accessibility-api: ^0.5.6 + lodash: ^4.17.15 + redent: ^3.0.0 + checksum: 94911f901a8031f3e489d04ac057cb5373621230f5d92bed80e514e24b069fb58a3166d1dd86963e55f078a1bd999da595e2ab96ed95f452d477e272937d792a + languageName: node + linkType: hard + "@testing-library/user-event@npm:^13.2.1": version: 13.5.0 resolution: "@testing-library/user-event@npm:13.5.0" @@ -7458,6 +7522,16 @@ __metadata: languageName: node linkType: hard +"@types/jest@npm:*, @types/jest@npm:>=26.0.0": + version: 29.5.1 + resolution: "@types/jest@npm:29.5.1" + dependencies: + expect: ^29.0.0 + pretty-format: ^29.0.0 + checksum: 0a22491dec86333c0e92b897be2c809c922a7b2b0aa5604ac369810d6b2360908b4a3f2c6892e8a237a54fa1f10ecefe0e823ec5fcb7915195af4dfe88d2197e + languageName: node + linkType: hard + "@types/json-schema@npm:^7.0.9": version: 7.0.11 resolution: "@types/json-schema@npm:7.0.11" @@ -7752,6 +7826,15 @@ __metadata: languageName: node linkType: hard +"@types/testing-library__jest-dom@npm:^5.9.1": + version: 5.14.5 + resolution: "@types/testing-library__jest-dom@npm:5.14.5" + dependencies: + "@types/jest": "*" + checksum: dcb05416758fe88c1f4f3aa97b4699fcb46a5ed8f53c6b81721e66155452a48caf12ecb97dfdfd4130678e65efd66b9fca0ac434b3d63affec84842a84a6bf38 + languageName: node + linkType: hard + "@types/unist@npm:^2.0.0": version: 2.0.6 resolution: "@types/unist@npm:2.0.6" @@ -9435,6 +9518,16 @@ __metadata: languageName: node linkType: hard +"chalk@npm:^3.0.0": + version: 3.0.0 + resolution: "chalk@npm:3.0.0" + dependencies: + ansi-styles: ^4.1.0 + supports-color: ^7.1.0 + checksum: 8e3ddf3981c4da405ddbd7d9c8d91944ddf6e33d6837756979f7840a29272a69a5189ecae0ff84006750d6d1e92368d413335eab4db5476db6e6703a1d1e0505 + languageName: node + linkType: hard + "chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.1, chalk@npm:^4.1.2": version: 4.1.2 resolution: "chalk@npm:4.1.2" @@ -10279,6 +10372,13 @@ __metadata: languageName: node linkType: hard +"css.escape@npm:^1.5.1": + version: 1.5.1 + resolution: "css.escape@npm:1.5.1" + checksum: f6d38088d870a961794a2580b2b2af1027731bb43261cfdce14f19238a88664b351cc8978abc20f06cc6bbde725699dec8deb6fe9816b139fc3f2af28719e774 + languageName: node + linkType: hard + "cssesc@npm:^3.0.0": version: 3.0.0 resolution: "cssesc@npm:3.0.0" @@ -10708,6 +10808,13 @@ __metadata: languageName: node linkType: hard +"diff-sequences@npm:^29.4.3": + version: 29.4.3 + resolution: "diff-sequences@npm:29.4.3" + checksum: 28b265e04fdddcf7f9f814effe102cc95a9dec0564a579b5aed140edb24fc345c611ca52d76d725a3cab55d3888b915b5e8a4702e0f6058968a90fa5f41fcde7 + languageName: node + linkType: hard + "diff@npm:^4.0.1": version: 4.0.2 resolution: "diff@npm:4.0.2" @@ -10758,7 +10865,7 @@ __metadata: languageName: node linkType: hard -"dom-accessibility-api@npm:^0.5.9": +"dom-accessibility-api@npm:^0.5.6, dom-accessibility-api@npm:^0.5.9": version: 0.5.16 resolution: "dom-accessibility-api@npm:0.5.16" checksum: 005eb283caef57fc1adec4d5df4dd49189b628f2f575af45decb210e04d634459e3f1ee64f18b41e2dcf200c844bc1d9279d80807e686a30d69a4756151ad248 @@ -11863,6 +11970,19 @@ __metadata: languageName: node linkType: hard +"expect@npm:^29.0.0": + version: 29.5.0 + resolution: "expect@npm:29.5.0" + dependencies: + "@jest/expect-utils": ^29.5.0 + jest-get-type: ^29.4.3 + jest-matcher-utils: ^29.5.0 + jest-message-util: ^29.5.0 + jest-util: ^29.5.0 + checksum: 58f70b38693df6e5c6892db1bcd050f0e518d6f785175dc53917d4fa6a7359a048e5690e19ddcb96b65c4493881dd89a3dabdab1a84dfa55c10cdbdabf37b2d7 + languageName: node + linkType: hard + "express@npm:^4.17.3": version: 4.18.2 resolution: "express@npm:4.18.2" @@ -14470,6 +14590,18 @@ __metadata: languageName: node linkType: hard +"jest-diff@npm:^29.5.0": + version: 29.5.0 + resolution: "jest-diff@npm:29.5.0" + dependencies: + chalk: ^4.0.0 + diff-sequences: ^29.4.3 + jest-get-type: ^29.4.3 + pretty-format: ^29.5.0 + checksum: dfd0f4a299b5d127779c76b40106c37854c89c3e0785098c717d52822d6620d227f6234c3a9291df204d619e799e3654159213bf93220f79c8e92a55475a3d39 + languageName: node + linkType: hard + "jest-docblock@npm:^27.5.1": version: 27.5.1 resolution: "jest-docblock@npm:27.5.1" @@ -14571,6 +14703,13 @@ __metadata: languageName: node linkType: hard +"jest-get-type@npm:^29.4.3": + version: 29.4.3 + resolution: "jest-get-type@npm:29.4.3" + checksum: 6ac7f2dde1c65e292e4355b6c63b3a4897d7e92cb4c8afcf6d397f2682f8080e094c8b0b68205a74d269882ec06bf696a9de6cd3e1b7333531e5ed7b112605ce + languageName: node + linkType: hard + "jest-haste-map@npm:^27.5.1": version: 27.5.1 resolution: "jest-haste-map@npm:27.5.1" @@ -14722,6 +14861,18 @@ __metadata: languageName: node linkType: hard +"jest-matcher-utils@npm:^29.5.0": + version: 29.5.0 + resolution: "jest-matcher-utils@npm:29.5.0" + dependencies: + chalk: ^4.0.0 + jest-diff: ^29.5.0 + jest-get-type: ^29.4.3 + pretty-format: ^29.5.0 + checksum: 1d3e8c746e484a58ce194e3aad152eff21fd0896e8b8bf3d4ab1a4e2cbfed95fb143646f4ad9fdf6e42212b9e8fc033268b58e011b044a9929df45485deb5ac9 + languageName: node + linkType: hard + "jest-message-util@npm:^27.5.1": version: 27.5.1 resolution: "jest-message-util@npm:27.5.1" @@ -14773,7 +14924,7 @@ __metadata: languageName: node linkType: hard -"jest-mock@npm:^27.0.6, jest-mock@npm:^27.5.1": +"jest-mock@npm:^27.0.6, jest-mock@npm:^27.3.0, jest-mock@npm:^27.5.1": version: 27.5.1 resolution: "jest-mock@npm:27.5.1" dependencies: @@ -18276,7 +18427,7 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^29.5.0": +"pretty-format@npm:^29.0.0, pretty-format@npm:^29.5.0": version: 29.5.0 resolution: "pretty-format@npm:29.5.0" dependencies: From b789af32289625e62f79f563662c174b575a50a9 Mon Sep 17 00:00:00 2001 From: Esen Date: Wed, 3 May 2023 09:16:42 +0600 Subject: [PATCH 05/16] a bit of cleanup --- .../notifications/new-notification.tsx | 82 ------------------- .../notifications/notifications.stories.tsx | 46 ----------- src/components/notifier/index.tsx | 33 -------- 3 files changed, 161 deletions(-) delete mode 100644 src/components/notifications/new-notification.tsx delete mode 100644 src/components/notifier/index.tsx diff --git a/src/components/notifications/new-notification.tsx b/src/components/notifications/new-notification.tsx deleted file mode 100644 index ab98c07cd..000000000 --- a/src/components/notifications/new-notification.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { - Alert, - AlertDescription, - AlertTitle, - CloseButton, - useToast, -} from '@chakra-ui/react'; -import React, { ReactNode } from 'react'; -import { Flex } from '../flex'; - -interface Props { - onClose: any; - title: string | ReactNode; - content: string | ReactNode; -} - -export const NewNotification = ({ - onClose, - content, - title, - isError = true, -}: Props) => { - return ( - - - {React.isValidElement(title) ? ( - title - ) : ( - {title} - )} - - - - {React.isValidElement(content) ? ( - content - ) : ( - {content} - )} - - ); -}; - -export interface Notification { - title: string | ReactNode; - content: string | ReactNode; - duration?: number; - isError?: boolean; -} - -export const useNotify = () => { - const toast = useToast(); - - return (notification: Notification) => - toast({ - position: 'top-right', - status: notification.isError ? 'error' : 'success', - duration: notification.duration ?? 5000, - isClosable: true, - render: ({ onClose }) => { - return ( - - ); - }, - }); -}; diff --git a/src/components/notifications/notifications.stories.tsx b/src/components/notifications/notifications.stories.tsx index 612eac736..83a5098e5 100644 --- a/src/components/notifications/notifications.stories.tsx +++ b/src/components/notifications/notifications.stories.tsx @@ -1,13 +1,10 @@ import { Meta } from '@storybook/react'; import React, { useCallback } from 'react'; -import { useToast } from '@chakra-ui/react'; import { Flex } from 'rebass'; import NotificationManager from './notifications-manager'; // Components import { Button, Label, Labeling } from '../../index'; import NotificationsContainer from './index'; -import { NewNotification, useNotify } from './new-notification'; -import { standaloneToast } from '../../theme-chakra/ChakraThemeProvider'; export default { title: 'Quartz/NotificationsContainer', @@ -15,8 +12,6 @@ export default { } as Meta; const Template = () => { - const notify = useNotify(); - const notifyHandler = useCallback(() => { NotificationManager.create({ isError: true, @@ -32,51 +27,10 @@ const Template = () => { }); }, []); - const another = () => { - notify({ - title: 'Account created.', - content: ( - - message or message or message - - - ), - duration: 118000, - }); - }; - - const another2 = () => { - standaloneToast({ - title: 'Account created.', - description: "We've created your account for you.", - position: 'top-right', - duration: 10000000, - - render: ({ onClose }) => { - return ( - - - - - triggered for hey successfully - - - - ); - }, - }); - }; - return ( <> - - ); }; diff --git a/src/components/notifier/index.tsx b/src/components/notifier/index.tsx deleted file mode 100644 index 04797057e..000000000 --- a/src/components/notifier/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { FC, useCallback, useEffect, useState } from 'react'; - -import { FlexProps } from 'rebass'; -import NotificationManager, { - SystemNotification, -} from './notifications-manager'; -// Components -import NotificationsItemsContainer from './notifications-container'; - -export interface NotificationContainerProps extends Omit {} - -const NotificationsContainer: FC = (props) => { - const [notifications, setNotifications] = useState([]); - - const handleChange = useCallback((list: SystemNotification[]) => { - setNotifications(list.slice()); - }, []); - - useEffect(() => { - NotificationManager.addChangeListener(handleChange); - - return () => { - NotificationManager.removeChangeListener(handleChange); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - ); -}; - -export default NotificationsContainer; From cdcfd9a939414dc292c93a0397ba9871baeaadb5 Mon Sep 17 00:00:00 2001 From: Esen Date: Wed, 3 May 2023 09:18:15 +0600 Subject: [PATCH 06/16] cleanup 2 --- src/components/notifier/Notification.tsx | 22 ---------------------- src/components/notifier/stories.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 26 deletions(-) diff --git a/src/components/notifier/Notification.tsx b/src/components/notifier/Notification.tsx index a00791239..daa3b57a8 100644 --- a/src/components/notifier/Notification.tsx +++ b/src/components/notifier/Notification.tsx @@ -58,25 +58,3 @@ export interface INotification { duration?: number; isError?: boolean; } - -export const useNotify = () => { - const toast = useToast(); - - return (notification: INotification) => - toast({ - position: 'top-right', - status: notification.isError ? 'error' : 'success', - duration: notification.duration ?? 5000, - isClosable: true, - render: ({ onClose }) => { - return ( - - ); - }, - }); -}; diff --git a/src/components/notifier/stories.tsx b/src/components/notifier/stories.tsx index 3813f73c0..1d8c1d05a 100644 --- a/src/components/notifier/stories.tsx +++ b/src/components/notifier/stories.tsx @@ -1,15 +1,15 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { userEvent, waitFor, within } from '@storybook/testing-library'; import React from 'react'; -import { within, userEvent, waitFor } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; -import { INotification, Notification, useNotify } from './Notification'; -import { Button } from '../button'; import { Box } from '../box'; -import { createNotifier, useNotifier } from './notifier'; +import { Button } from '../button'; import { Flex } from '../flex'; import Value from '../typography/value'; +import { INotification } from './Notification'; +import { createNotifier, useNotifier } from './notifier'; const meta: Meta = { title: 'Notifier', From 175cf3e6b47fbb2b7e5c508e2043e0ab87753137 Mon Sep 17 00:00:00 2001 From: Esen Date: Fri, 5 May 2023 16:36:12 +0600 Subject: [PATCH 07/16] cosmetics --- src/components/notifier/Notification.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/notifier/Notification.tsx b/src/components/notifier/Notification.tsx index daa3b57a8..86afd3763 100644 --- a/src/components/notifier/Notification.tsx +++ b/src/components/notifier/Notification.tsx @@ -17,9 +17,11 @@ interface Props extends Omit { export const Notification = ({ onClose, content, title, status }: Props) => { return ( + // make it 350px widevc { gap={1} pb={4} pl={6} - minW="300px" + minW="350px" > {React.isValidElement(title) ? ( From 66938e172035c19044dbda44e031d1ec83559e30 Mon Sep 17 00:00:00 2001 From: Esen Date: Tue, 9 May 2023 15:10:24 +0600 Subject: [PATCH 08/16] fix dark mode, misc --- .eslintrc | 8 +- package.json | 2 +- src/chakra.ts | 4 +- src/components/notifier/Notification.tsx | 6 +- src/components/notifier/index.ts | 1 + src/theme-chakra/ChakraThemeProvider.tsx | 3 - src/theme/ThemeProvider.tsx | 6 +- yarn.lock | 279 ++++++++++++----------- 8 files changed, 163 insertions(+), 146 deletions(-) create mode 100644 src/components/notifier/index.ts diff --git a/.eslintrc b/.eslintrc index d7d6bf454..e417c311b 100644 --- a/.eslintrc +++ b/.eslintrc @@ -29,7 +29,13 @@ "error", { "peerDependencies": false } ], - + + // turning these off as they + "import/named": 0, + "import/namespace": 0, + "import/default": 0, + "import/no-named-as-default-member": 0, + "react-hooks/exhaustive-deps": "error", "space-before-function-paren": 0, "react/prop-types": 0, diff --git a/package.json b/package.json index 93ea2abfb..0dd216261 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ ], "dependencies": { "@chakra-ui/anatomy": "^2.1.1", - "@chakra-ui/react": "^2.5.5", + "@chakra-ui/react": "^2.6.1", "@codemirror/view": "^6.9.5", "@emotion/core": "^10.3.1", "@emotion/react": "^11.10.6", diff --git a/src/chakra.ts b/src/chakra.ts index 58d0280d3..385c5799f 100644 --- a/src/chakra.ts +++ b/src/chakra.ts @@ -1,3 +1,5 @@ -export { useDisclosure } from '@chakra-ui/react'; +export { useDisclosure, ColorModeScript } from '@chakra-ui/react'; export { ChakraThemeProvider } from './theme-chakra/ChakraThemeProvider'; + +export * from './components/notifier'; diff --git a/src/components/notifier/Notification.tsx b/src/components/notifier/Notification.tsx index 86afd3763..6b56b264b 100644 --- a/src/components/notifier/Notification.tsx +++ b/src/components/notifier/Notification.tsx @@ -4,7 +4,6 @@ import { AlertProps, AlertTitle, CloseButton, - useToast, } from '@chakra-ui/react'; import React, { ReactNode } from 'react'; import { Flex } from '../flex'; @@ -17,7 +16,6 @@ interface Props extends Omit { export const Notification = ({ onClose, content, title, status }: Props) => { return ( - // make it 350px widevc { {React.isValidElement(title) ? ( title ) : ( - {title} + {title} )} @@ -45,7 +43,7 @@ export const Notification = ({ onClose, content, title, status }: Props) => { {React.isValidElement(content) ? ( content ) : ( - {content} + {content} )} ); diff --git a/src/components/notifier/index.ts b/src/components/notifier/index.ts new file mode 100644 index 000000000..9ca25b9b1 --- /dev/null +++ b/src/components/notifier/index.ts @@ -0,0 +1 @@ +export { useNotifier, createNotifier } from './notifier'; diff --git a/src/theme-chakra/ChakraThemeProvider.tsx b/src/theme-chakra/ChakraThemeProvider.tsx index bae27d652..32c27e0f3 100644 --- a/src/theme-chakra/ChakraThemeProvider.tsx +++ b/src/theme-chakra/ChakraThemeProvider.tsx @@ -14,9 +14,6 @@ const theme = extendTheme({ ...colors, dark: darkThemeColors, }, - components: { - Alert: {}, - }, }); const { ToastContainer, toast } = createStandaloneToast({ diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx index eb2394660..317048f5d 100644 --- a/src/theme/ThemeProvider.tsx +++ b/src/theme/ThemeProvider.tsx @@ -1,4 +1,4 @@ -import { ColorModeScript, useColorMode } from '@chakra-ui/react'; +import { useColorMode } from '@chakra-ui/react'; import { css, Global } from '@emotion/core'; import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; import React, { FC, useEffect } from 'react'; @@ -19,15 +19,13 @@ const ThemeProvider: FC = ({ const { colorMode, setColorMode } = useColorMode(); useEffect(() => { - console.log(); - setColorMode(colorModeFromProps); + if (colorModeFromProps) setColorMode(colorModeFromProps); }, [colorModeFromProps, setColorMode]); const colorModeToUse = colorModeFromProps ?? colorMode; // the outer one overrides inner state return ( - =2.0.0" react: ">=18" - checksum: c9fb47f328e2e50b621a5b3c01cda7ddb690b1ee37501d0368155f73b1a86ca90708dcd112a6bddf34e7888bfdeaee51dc25556576d9c8bfe9c0f7195d8f4c9d + checksum: 4f1d80c9f0498c27aeaf615f8a42b4e9913f329f03d44e058d20fc292ac6b21d19cf6339f9ef296bd091f13dc7c9bc02faa6e5d08cbc2a9d458710a0e3f89023 languageName: node linkType: hard @@ -1789,9 +1789,9 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/checkbox@npm:2.2.14": - version: 2.2.14 - resolution: "@chakra-ui/checkbox@npm:2.2.14" +"@chakra-ui/checkbox@npm:2.2.15": + version: 2.2.15 + resolution: "@chakra-ui/checkbox@npm:2.2.15" dependencies: "@chakra-ui/form-control": 2.0.18 "@chakra-ui/react-context": 2.0.8 @@ -1807,7 +1807,7 @@ __metadata: peerDependencies: "@chakra-ui/system": ">=2.0.0" react: ">=18" - checksum: 8d10394c5b7a772de3eca97ce3f93ed185f2eae531304803132d487dda2d3bade4c75cda4ca8164ee571150d40855803b487b4922e52ddf0ecc13d15867db6fb + checksum: f1a76b8b2ec0b8af02a55ca2cd6eadde10ac797fc36d03b43438132128ca1c38d544a6a359db8fb3dc59f39456e95605665b022fe0c8fbac8ba9d0743ea1646e languageName: node linkType: hard @@ -1898,9 +1898,9 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/editable@npm:2.0.21": - version: 2.0.21 - resolution: "@chakra-ui/editable@npm:2.0.21" +"@chakra-ui/editable@npm:3.0.0": + version: 3.0.0 + resolution: "@chakra-ui/editable@npm:3.0.0" dependencies: "@chakra-ui/react-context": 2.0.8 "@chakra-ui/react-types": 2.0.7 @@ -1914,7 +1914,7 @@ __metadata: peerDependencies: "@chakra-ui/system": ">=2.0.0" react: ">=18" - checksum: 07efd08dd10e438283ac7388cd8a9ac8508af18422ff0a80066a205505d41c28f7c3a5bb4dc49ed72d9afdeef641f37899b42b27da65240f9abf1cb226ba71a5 + checksum: 31f84fcab322d53653de96bbf262e2436f86e3126e2761191eb10a5b8b1d2870d3ae87e2f850ba56e3f522655787594038f4af16181d10e0756461b6a21614be languageName: node linkType: hard @@ -1953,9 +1953,9 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/hooks@npm:2.1.6": - version: 2.1.6 - resolution: "@chakra-ui/hooks@npm:2.1.6" +"@chakra-ui/hooks@npm:2.2.0": + version: 2.2.0 + resolution: "@chakra-ui/hooks@npm:2.2.0" dependencies: "@chakra-ui/react-utils": 2.0.12 "@chakra-ui/utils": 2.0.15 @@ -1963,7 +1963,7 @@ __metadata: copy-to-clipboard: 3.3.3 peerDependencies: react: ">=18" - checksum: 544f8d8d27be9c496610202bbbdd2e9e193815121bb13d9c4cc09ad1ad79248adfe95c7f29112a47e1c0f679c051e158cb1fb7dc3913158e5fca723423f5b9fd + checksum: 778313f236f3bbb7f303487f974305ab0656b40fbd1e0b3561e69ada8519d30eed67fb6289a18dcaa6880355e150d4e8e4066e3f08814a4b2fd378557d4b18a6 languageName: node linkType: hard @@ -1979,49 +1979,49 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/image@npm:2.0.15": - version: 2.0.15 - resolution: "@chakra-ui/image@npm:2.0.15" +"@chakra-ui/image@npm:2.0.16": + version: 2.0.16 + resolution: "@chakra-ui/image@npm:2.0.16" dependencies: "@chakra-ui/react-use-safe-layout-effect": 2.0.5 "@chakra-ui/shared-utils": 2.0.5 peerDependencies: "@chakra-ui/system": ">=2.0.0" react: ">=18" - checksum: ee2f1ba4a99ea4f39eba2ea77f8a0036132477329bcb77897a0e8560290a3dca2ec32ccc463fcba2db5271627c1e1104fd81aa8ac6afc68e47b45f3a5f7925f1 + checksum: 68cab8553fadb22f860c298e1863c874980b6b41d05af6ecced7a1d108e1fcbfa15b16e9c30607a2c9a9b534def4ee05700dc18d39082212d26c835e6658fc81 languageName: node linkType: hard -"@chakra-ui/input@npm:2.0.21": - version: 2.0.21 - resolution: "@chakra-ui/input@npm:2.0.21" +"@chakra-ui/input@npm:2.0.22": + version: 2.0.22 + resolution: "@chakra-ui/input@npm:2.0.22" dependencies: "@chakra-ui/form-control": 2.0.18 - "@chakra-ui/object-utils": 2.0.8 + "@chakra-ui/object-utils": 2.1.0 "@chakra-ui/react-children-utils": 2.0.6 "@chakra-ui/react-context": 2.0.8 "@chakra-ui/shared-utils": 2.0.5 peerDependencies: "@chakra-ui/system": ">=2.0.0" react: ">=18" - checksum: a4fff7c538d608a4d07063da254fbf2ef3db896acd2a670953be315f98a77a5ee8272b6f6bb70194423eab7fa6c0282b830d7612a97dacda41c50c8b2c7b8db2 + checksum: 9ec02f5c20a6f2a584ae641c8e238d25bcd355df7eed9c263b908a72a1c106fe5f3c1eaef8f2fffe9c131d18320c9cb0916c92a01f24409b7f08535fdb439d73 languageName: node linkType: hard -"@chakra-ui/layout@npm:2.1.18": - version: 2.1.18 - resolution: "@chakra-ui/layout@npm:2.1.18" +"@chakra-ui/layout@npm:2.1.19": + version: 2.1.19 + resolution: "@chakra-ui/layout@npm:2.1.19" dependencies: "@chakra-ui/breakpoint-utils": 2.0.8 "@chakra-ui/icon": 3.0.16 - "@chakra-ui/object-utils": 2.0.8 + "@chakra-ui/object-utils": 2.1.0 "@chakra-ui/react-children-utils": 2.0.6 "@chakra-ui/react-context": 2.0.8 "@chakra-ui/shared-utils": 2.0.5 peerDependencies: "@chakra-ui/system": ">=2.0.0" react: ">=18" - checksum: 4ae56ba9c166bb2fd491922b71a7451868d978674ed1e471014ee2b2cac98212a36f5190e2a780655e6a347c91851ad3995fbb1dd92f73bd9d88248c2e7f06a4 + checksum: 3b3e1c92361bda66ec67a2a6023cb137a5b0d7fbf17f5960f48a11c41d8a092044043a7d6be96d63658486630f8b8f3493ac1ba160572c366c624928da174695 languageName: node linkType: hard @@ -2055,22 +2055,22 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/menu@npm:2.1.12": - version: 2.1.12 - resolution: "@chakra-ui/menu@npm:2.1.12" +"@chakra-ui/menu@npm:2.1.14": + version: 2.1.14 + resolution: "@chakra-ui/menu@npm:2.1.14" dependencies: "@chakra-ui/clickable": 2.0.14 "@chakra-ui/descendant": 3.0.14 "@chakra-ui/lazy-utils": 2.0.5 - "@chakra-ui/popper": 3.0.13 + "@chakra-ui/popper": 3.0.14 "@chakra-ui/react-children-utils": 2.0.6 "@chakra-ui/react-context": 2.0.8 "@chakra-ui/react-use-animation-state": 2.0.8 "@chakra-ui/react-use-controllable-state": 2.0.8 "@chakra-ui/react-use-disclosure": 2.0.8 - "@chakra-ui/react-use-focus-effect": 2.0.9 + "@chakra-ui/react-use-focus-effect": 2.0.10 "@chakra-ui/react-use-merge-refs": 2.0.7 - "@chakra-ui/react-use-outside-click": 2.0.7 + "@chakra-ui/react-use-outside-click": 2.1.0 "@chakra-ui/react-use-update-effect": 2.0.7 "@chakra-ui/shared-utils": 2.0.5 "@chakra-ui/transition": 2.0.16 @@ -2078,7 +2078,7 @@ __metadata: "@chakra-ui/system": ">=2.0.0" framer-motion: ">=4.0.0" react: ">=18" - checksum: 513723149333e63aab4ca5e0dd7c7e4f18836977f8b56c5f7abec3160b49b5f8948774d88b7789180885b1de3ca00739aff85e2eef15c86b6822bfdde9509eca + checksum: 682ee33b2db0748880c3f8eb81f19d4c00967a558d63d03e756964fe60337dc09343682821c6d3caa51d1ea06da9351d10f03112a3c87b700ae08f0ea0e9a76a languageName: node linkType: hard @@ -2135,10 +2135,10 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/object-utils@npm:2.0.8": - version: 2.0.8 - resolution: "@chakra-ui/object-utils@npm:2.0.8" - checksum: 85dfc1c1afc37a914c9f236e050e1afdcea6181a3021efc850a7aa1a0a8a5d886e29fa76bab1d69170f0e083bab6224ba008d7a4e34f32c8922690770d988394 +"@chakra-ui/object-utils@npm:2.1.0": + version: 2.1.0 + resolution: "@chakra-ui/object-utils@npm:2.1.0" + checksum: ed4bf4365dcc77557f88a24a4844dbad47dfea9c426a1732895d151178561a3e8ab12d1c8638a5b00046fa2944c6b450ecccd4bc249b591cef7d70390af546fe languageName: node linkType: hard @@ -2159,18 +2159,18 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/popover@npm:2.1.9": - version: 2.1.9 - resolution: "@chakra-ui/popover@npm:2.1.9" +"@chakra-ui/popover@npm:2.1.11": + version: 2.1.11 + resolution: "@chakra-ui/popover@npm:2.1.11" dependencies: "@chakra-ui/close-button": 2.0.17 "@chakra-ui/lazy-utils": 2.0.5 - "@chakra-ui/popper": 3.0.13 + "@chakra-ui/popper": 3.0.14 "@chakra-ui/react-context": 2.0.8 "@chakra-ui/react-types": 2.0.7 "@chakra-ui/react-use-animation-state": 2.0.8 "@chakra-ui/react-use-disclosure": 2.0.8 - "@chakra-ui/react-use-focus-effect": 2.0.9 + "@chakra-ui/react-use-focus-effect": 2.0.10 "@chakra-ui/react-use-focus-on-pointer-down": 2.0.6 "@chakra-ui/react-use-merge-refs": 2.0.7 "@chakra-ui/shared-utils": 2.0.5 @@ -2178,20 +2178,20 @@ __metadata: "@chakra-ui/system": ">=2.0.0" framer-motion: ">=4.0.0" react: ">=18" - checksum: e54f45a64fe79e4f60db941b2fd7322200ab387453544b2d535df5b5b8a8207b83a4842c083dd47d20e9bf53f156bf73465bf9ef97c741baa42eaf046169a3a2 + checksum: 35dc02f155516fa083210fd936a02e27555ae3c5b2b5869a6cffba0338a22e82726f7b18c89c696f9a0113716dc65130a5addca022a3511ccb032af8fca2fa3b languageName: node linkType: hard -"@chakra-ui/popper@npm:3.0.13": - version: 3.0.13 - resolution: "@chakra-ui/popper@npm:3.0.13" +"@chakra-ui/popper@npm:3.0.14": + version: 3.0.14 + resolution: "@chakra-ui/popper@npm:3.0.14" dependencies: "@chakra-ui/react-types": 2.0.7 "@chakra-ui/react-use-merge-refs": 2.0.7 "@popperjs/core": ^2.9.3 peerDependencies: react: ">=18" - checksum: f01d762f76f7fa618ca22bfcf6168f8fa3a2a372277555c5c295b6315d99d2827e2ed2f0e7e0d0c4bf6e94f4c42c4eb2f47d12862bcd279bd88b4ad7b09be225 + checksum: 3a3a54d79b00f4feb8865f4eb15a9b906f287bbf1e920613724b953922f904c6425d1c51df0396dae2030ffb5225fa0b4c617d1b64421539fdcf486654ab31e4 languageName: node linkType: hard @@ -2220,21 +2220,21 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/provider@npm:2.2.2": - version: 2.2.2 - resolution: "@chakra-ui/provider@npm:2.2.2" +"@chakra-ui/provider@npm:2.2.4": + version: 2.2.4 + resolution: "@chakra-ui/provider@npm:2.2.4" dependencies: "@chakra-ui/css-reset": 2.1.1 "@chakra-ui/portal": 2.0.16 "@chakra-ui/react-env": 3.0.0 - "@chakra-ui/system": 2.5.5 + "@chakra-ui/system": 2.5.7 "@chakra-ui/utils": 2.0.15 peerDependencies: "@emotion/react": ^11.0.0 "@emotion/styled": ^11.0.0 react: ">=18" react-dom: ">=18" - checksum: abe8ae8522eaddca3e41b7c468d593d497ec934ad31b0dc154d2f46aa3f87a6c5416059766212d2874308b28d014bb0aa060a5bb89a84823e87ae37dae504d84 + checksum: f3e27402fba9eed881d872b172d55a4e60d4c885b7456f03037db7d35ecebbdce043ccf53928b58a176736f8a9a4e906a6435815d3c2e04af129bbcf89559d0c languageName: node linkType: hard @@ -2347,9 +2347,9 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/react-use-focus-effect@npm:2.0.9": - version: 2.0.9 - resolution: "@chakra-ui/react-use-focus-effect@npm:2.0.9" +"@chakra-ui/react-use-focus-effect@npm:2.0.10": + version: 2.0.10 + resolution: "@chakra-ui/react-use-focus-effect@npm:2.0.10" dependencies: "@chakra-ui/dom-utils": 2.0.6 "@chakra-ui/react-use-event-listener": 2.0.7 @@ -2357,7 +2357,7 @@ __metadata: "@chakra-ui/react-use-update-effect": 2.0.7 peerDependencies: react: ">=18" - checksum: 9490875f791bb63f3de5690f4556058ab3ffef59ba9c0bb4c8caf4f5f0d3f3e38b62769362239adaf93d41689c5924c0e353a51e4dbde092c032e9ec04a28768 + checksum: 6145ca543f340c4c92796cbd7b6a5ac757c41e54be2a252efc74a23102528db45faf86dd26219252b4cadb456b09c1dc6fa6f3982eb1213e23d1a83d8ca8c65c languageName: node linkType: hard @@ -2401,14 +2401,14 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/react-use-outside-click@npm:2.0.7": - version: 2.0.7 - resolution: "@chakra-ui/react-use-outside-click@npm:2.0.7" +"@chakra-ui/react-use-outside-click@npm:2.1.0": + version: 2.1.0 + resolution: "@chakra-ui/react-use-outside-click@npm:2.1.0" dependencies: "@chakra-ui/react-use-callback-ref": 2.0.7 peerDependencies: react: ">=18" - checksum: 4b2ed2b51874f22d8849f762b22bc1841313fc82f3e4bd7bfbef15a656c620697125765cee6f1b75840f8aa8502574ffbe62989ede1c0dc8723b9c8d7041ecdb + checksum: 08106bbbca812cac8ece79a21ede2ad7e953ed252773ae19df73a0d58f32fb3dbc73408ae90a20f4d105ed5a33626005cb9b34bc3c8a86640b6abb8874edc97c languageName: node linkType: hard @@ -2485,58 +2485,59 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/react@npm:^2.5.5": - version: 2.5.5 - resolution: "@chakra-ui/react@npm:2.5.5" +"@chakra-ui/react@npm:^2.6.1": + version: 2.6.1 + resolution: "@chakra-ui/react@npm:2.6.1" dependencies: "@chakra-ui/accordion": 2.1.11 "@chakra-ui/alert": 2.1.0 - "@chakra-ui/avatar": 2.2.8 + "@chakra-ui/avatar": 2.2.10 "@chakra-ui/breadcrumb": 2.1.5 "@chakra-ui/button": 2.0.18 "@chakra-ui/card": 2.1.6 - "@chakra-ui/checkbox": 2.2.14 + "@chakra-ui/checkbox": 2.2.15 "@chakra-ui/close-button": 2.0.17 "@chakra-ui/control-box": 2.0.13 "@chakra-ui/counter": 2.0.14 "@chakra-ui/css-reset": 2.1.1 - "@chakra-ui/editable": 2.0.21 + "@chakra-ui/editable": 3.0.0 "@chakra-ui/focus-lock": 2.0.16 "@chakra-ui/form-control": 2.0.18 - "@chakra-ui/hooks": 2.1.6 + "@chakra-ui/hooks": 2.2.0 "@chakra-ui/icon": 3.0.16 - "@chakra-ui/image": 2.0.15 - "@chakra-ui/input": 2.0.21 - "@chakra-ui/layout": 2.1.18 + "@chakra-ui/image": 2.0.16 + "@chakra-ui/input": 2.0.22 + "@chakra-ui/layout": 2.1.19 "@chakra-ui/live-region": 2.0.13 "@chakra-ui/media-query": 3.2.12 - "@chakra-ui/menu": 2.1.12 + "@chakra-ui/menu": 2.1.14 "@chakra-ui/modal": 2.2.11 "@chakra-ui/number-input": 2.0.19 "@chakra-ui/pin-input": 2.0.20 - "@chakra-ui/popover": 2.1.9 - "@chakra-ui/popper": 3.0.13 + "@chakra-ui/popover": 2.1.11 + "@chakra-ui/popper": 3.0.14 "@chakra-ui/portal": 2.0.16 "@chakra-ui/progress": 2.1.6 - "@chakra-ui/provider": 2.2.2 + "@chakra-ui/provider": 2.2.4 "@chakra-ui/radio": 2.0.22 "@chakra-ui/react-env": 3.0.0 "@chakra-ui/select": 2.0.19 "@chakra-ui/skeleton": 2.0.24 - "@chakra-ui/slider": 2.0.23 + "@chakra-ui/slider": 2.0.24 "@chakra-ui/spinner": 2.0.13 "@chakra-ui/stat": 2.0.18 - "@chakra-ui/styled-system": 2.8.0 - "@chakra-ui/switch": 2.0.26 - "@chakra-ui/system": 2.5.5 + "@chakra-ui/stepper": 2.2.0 + "@chakra-ui/styled-system": 2.9.0 + "@chakra-ui/switch": 2.0.27 + "@chakra-ui/system": 2.5.7 "@chakra-ui/table": 2.0.17 "@chakra-ui/tabs": 2.1.9 "@chakra-ui/tag": 3.0.0 "@chakra-ui/textarea": 2.0.19 - "@chakra-ui/theme": 3.0.1 - "@chakra-ui/theme-utils": 2.0.15 - "@chakra-ui/toast": 6.1.1 - "@chakra-ui/tooltip": 2.2.7 + "@chakra-ui/theme": 3.1.1 + "@chakra-ui/theme-utils": 2.0.17 + "@chakra-ui/toast": 6.1.3 + "@chakra-ui/tooltip": 2.2.8 "@chakra-ui/transition": 2.0.16 "@chakra-ui/utils": 2.0.15 "@chakra-ui/visually-hidden": 2.0.15 @@ -2546,7 +2547,7 @@ __metadata: framer-motion: ">=4.0.0" react: ">=18" react-dom: ">=18" - checksum: c79c2c45e44ccc41fbf86a7301cfb93fd038c55e926e2a939b348852235557e1aaf36c7665cea4a3f75cd5d0be6230210d8b56f214abbf6c217d2a93b33ca21f + checksum: ed7cd1547a29dbc9e632d5042c433c8ef2bc0a9cd794c77b57fcfd7eb224604ae8fa5150da84ddc903a59750edffc24ebcb297fde31eaf2bfc6b640ad929a485 languageName: node linkType: hard @@ -2584,9 +2585,9 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/slider@npm:2.0.23": - version: 2.0.23 - resolution: "@chakra-ui/slider@npm:2.0.23" +"@chakra-ui/slider@npm:2.0.24": + version: 2.0.24 + resolution: "@chakra-ui/slider@npm:2.0.24" dependencies: "@chakra-ui/number-utils": 2.0.7 "@chakra-ui/react-context": 2.0.8 @@ -2601,7 +2602,7 @@ __metadata: peerDependencies: "@chakra-ui/system": ">=2.0.0" react: ">=18" - checksum: 152ea41a7f50909d70c49df1c0ff08e05a359cab13f003cb6a326192d319a8676788de0f60da76df59677f362dc7764be9d8f4ea158a949592a4ca3262d2ffc9 + checksum: b10f3a89c63c9658c51a1a755d54a7ea0e82baccc884e670dbb09c2c4fd75937698b0a7e8d0a11957f462ccf83aac56d95df95ea3b26f26d4be6a86a8d389305 languageName: node linkType: hard @@ -2631,47 +2632,61 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/styled-system@npm:2.8.0": - version: 2.8.0 - resolution: "@chakra-ui/styled-system@npm:2.8.0" +"@chakra-ui/stepper@npm:2.2.0": + version: 2.2.0 + resolution: "@chakra-ui/stepper@npm:2.2.0" + dependencies: + "@chakra-ui/icon": 3.0.16 + "@chakra-ui/react-context": 2.0.8 + "@chakra-ui/shared-utils": 2.0.5 + peerDependencies: + "@chakra-ui/system": ">=2.0.0" + react: ">=18" + checksum: b999cd21152c463f3d42b2e67e2c1c2c3d320734332227c9c66c5bf3a3e1f31bf1137a64047ee23668e46887bc55c6c444d892571da9f7da5331241f5969faa5 + languageName: node + linkType: hard + +"@chakra-ui/styled-system@npm:2.9.0": + version: 2.9.0 + resolution: "@chakra-ui/styled-system@npm:2.9.0" dependencies: "@chakra-ui/shared-utils": 2.0.5 csstype: ^3.0.11 lodash.mergewith: 4.6.2 - checksum: 292694f685fe30b5f57b69e5ba440dd9367c6155b745d1ddfff04c7c35074a7d9ada52d63e2c8225ab1d93d6f697337ae773f479b7fde2d83bc6095731b384d7 + checksum: 4f8863cf684ce274be4f5247c8ff8880ecb90e4373e581f2ac26e925d3958a1db057597a9485acd59cfd69412d26939cf9a4e498f13beb0513dd5200fe6a2143 languageName: node linkType: hard -"@chakra-ui/switch@npm:2.0.26": - version: 2.0.26 - resolution: "@chakra-ui/switch@npm:2.0.26" +"@chakra-ui/switch@npm:2.0.27": + version: 2.0.27 + resolution: "@chakra-ui/switch@npm:2.0.27" dependencies: - "@chakra-ui/checkbox": 2.2.14 + "@chakra-ui/checkbox": 2.2.15 "@chakra-ui/shared-utils": 2.0.5 peerDependencies: "@chakra-ui/system": ">=2.0.0" framer-motion: ">=4.0.0" react: ">=18" - checksum: 094a769dbf115db15dead7ad6410cbb1a9e75c354b4da6aefbaf26ef0816c84698e423cc268e640fb6d6dd4bc5c1132170804fd5009966a91e0631322851b237 + checksum: 82c4d279cce2cf1d45f4c89cc544f55767852fb227a8872ce663664dc74dc2a8cf1b551bc171bb949d2b003537695aec0763a3713f10919d39ee59afeda85707 languageName: node linkType: hard -"@chakra-ui/system@npm:2.5.5": - version: 2.5.5 - resolution: "@chakra-ui/system@npm:2.5.5" +"@chakra-ui/system@npm:2.5.7": + version: 2.5.7 + resolution: "@chakra-ui/system@npm:2.5.7" dependencies: "@chakra-ui/color-mode": 2.1.12 - "@chakra-ui/object-utils": 2.0.8 + "@chakra-ui/object-utils": 2.1.0 "@chakra-ui/react-utils": 2.0.12 - "@chakra-ui/styled-system": 2.8.0 - "@chakra-ui/theme-utils": 2.0.15 + "@chakra-ui/styled-system": 2.9.0 + "@chakra-ui/theme-utils": 2.0.17 "@chakra-ui/utils": 2.0.15 react-fast-compare: 3.2.1 peerDependencies: "@emotion/react": ^11.0.0 "@emotion/styled": ^11.0.0 react: ">=18" - checksum: 7cd1ad064910ce887280216420c4e0f0e51ea3a58597cd7b788bf6079162daa5594ee89eeaf94a3603ec55b2419bbde718f5e55884827eaaf1f885ebe10f6e1f + checksum: 134635219a40dab9b92ae2188f695560bd28ee3e4ba0402687890498a7a94b13123c26d05e62ce39ab47dd361c4ab87bcb93eeb7f39e8d35481102dad50fe34b languageName: node linkType: hard @@ -2747,34 +2762,34 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/theme-utils@npm:2.0.15": - version: 2.0.15 - resolution: "@chakra-ui/theme-utils@npm:2.0.15" +"@chakra-ui/theme-utils@npm:2.0.17": + version: 2.0.17 + resolution: "@chakra-ui/theme-utils@npm:2.0.17" dependencies: "@chakra-ui/shared-utils": 2.0.5 - "@chakra-ui/styled-system": 2.8.0 - "@chakra-ui/theme": 3.0.1 + "@chakra-ui/styled-system": 2.9.0 + "@chakra-ui/theme": 3.1.1 lodash.mergewith: 4.6.2 - checksum: 6013884e59fdc019693834f048befdba80e9675a7135f40d8c83fb4259b6d723ea38077cca9bdebb1f6aa138cf7242f893ebc8aea79fc15c6727e6d72bc86b53 + checksum: 5e6dd5aae7365cbd96afe51cd13afcd408198d9cfbdb2acfd5fb1601194cdc685004bbb237b337f70e287aebb4eb022f7590d9292619967483806b2e234289e5 languageName: node linkType: hard -"@chakra-ui/theme@npm:3.0.1": - version: 3.0.1 - resolution: "@chakra-ui/theme@npm:3.0.1" +"@chakra-ui/theme@npm:3.1.1": + version: 3.1.1 + resolution: "@chakra-ui/theme@npm:3.1.1" dependencies: "@chakra-ui/anatomy": 2.1.2 "@chakra-ui/shared-utils": 2.0.5 "@chakra-ui/theme-tools": 2.0.17 peerDependencies: - "@chakra-ui/styled-system": ">=2.0.0" - checksum: 19356af79e46a843ac677ae756cc7190854a7224592d0fafcd2778e655302281f9339150bf35e4302f902370d53965bbb347b86c2a50a4d40f4474c0d03f1c98 + "@chakra-ui/styled-system": ">=2.8.0" + checksum: 6f77079e1a92b5cd83872b4e29e2066c5862fd96bd4d7e03fa4721034300f830905009642fbd234e879029249affd43f5bc1d595ea671d7d19723f5c5c8f1fba languageName: node linkType: hard -"@chakra-ui/toast@npm:6.1.1": - version: 6.1.1 - resolution: "@chakra-ui/toast@npm:6.1.1" +"@chakra-ui/toast@npm:6.1.3": + version: 6.1.3 + resolution: "@chakra-ui/toast@npm:6.1.3" dependencies: "@chakra-ui/alert": 2.1.0 "@chakra-ui/close-button": 2.0.17 @@ -2783,22 +2798,22 @@ __metadata: "@chakra-ui/react-use-timeout": 2.0.5 "@chakra-ui/react-use-update-effect": 2.0.7 "@chakra-ui/shared-utils": 2.0.5 - "@chakra-ui/styled-system": 2.8.0 - "@chakra-ui/theme": 3.0.1 + "@chakra-ui/styled-system": 2.9.0 + "@chakra-ui/theme": 3.1.1 peerDependencies: - "@chakra-ui/system": 2.5.5 + "@chakra-ui/system": 2.5.7 framer-motion: ">=4.0.0" react: ">=18" react-dom: ">=18" - checksum: 13dd3cd75e81615ce98c88f9e5106969c6244381b1aecffb16b01876ad9b637361acf04164ce240104940835149a494f693a39d98ac84398f1e41751e5a23635 + checksum: 9bca766bac57f8b59eb62053821271212e2fa5980b6f1d88e7d82c9083ad1236486ef79acbca180d7fd0f8c6807f2d2724a80cde3c2cc8aef4a237ac71aa2212 languageName: node linkType: hard -"@chakra-ui/tooltip@npm:2.2.7": - version: 2.2.7 - resolution: "@chakra-ui/tooltip@npm:2.2.7" +"@chakra-ui/tooltip@npm:2.2.8": + version: 2.2.8 + resolution: "@chakra-ui/tooltip@npm:2.2.8" dependencies: - "@chakra-ui/popper": 3.0.13 + "@chakra-ui/popper": 3.0.14 "@chakra-ui/portal": 2.0.16 "@chakra-ui/react-types": 2.0.7 "@chakra-ui/react-use-disclosure": 2.0.8 @@ -2810,7 +2825,7 @@ __metadata: framer-motion: ">=4.0.0" react: ">=18" react-dom: ">=18" - checksum: 48017ca51d0aaed4a7d3cb2c7445899379319f4035dc01712015199adc11abe9b0bba9319b3800266b2c54dfdaa18f2e1243812afccd623023369b6657539d3e + checksum: 8197445437a001a27ac6c9eb1c85b058c12844415da4b3ac8f5a6dc5f13049dc9ec6cb559aacbe158d137b49faf3aa12e72f72dccc53ada5c4f6c3c7c3b34a75 languageName: node linkType: hard @@ -4758,7 +4773,7 @@ __metadata: resolution: "@logicalclocks/quartz@workspace:." dependencies: "@chakra-ui/anatomy": ^2.1.1 - "@chakra-ui/react": ^2.5.5 + "@chakra-ui/react": ^2.6.1 "@codemirror/view": ^6.9.5 "@emotion/core": ^10.3.1 "@emotion/react": ^11.10.6 From 6f0199ed3150c935206237e5c78779a0a9ca7394 Mon Sep 17 00:00:00 2001 From: Esen Date: Tue, 9 May 2023 15:15:15 +0600 Subject: [PATCH 09/16] cleanup --- .storybook/main.ts | 4 ---- package.json | 1 - yarn.lock | 3 +-- 3 files changed, 1 insertion(+), 7 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 67aa2f3dc..0d132a1a0 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -15,10 +15,6 @@ const config: StorybookConfig = { name: '@storybook/react-vite', options: {}, }, - features: { - // @ts-ignore - emotionAlias: false, - }, }; export default config; diff --git a/package.json b/package.json index 0dd216261..b5bd3ca46 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,6 @@ ".releaserc.json" ], "dependencies": { - "@chakra-ui/anatomy": "^2.1.1", "@chakra-ui/react": "^2.6.1", "@codemirror/view": "^6.9.5", "@emotion/core": "^10.3.1", diff --git a/yarn.lock b/yarn.lock index 47c3ce8fc..8fde3d71c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1717,7 +1717,7 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/anatomy@npm:2.1.2, @chakra-ui/anatomy@npm:^2.1.1": +"@chakra-ui/anatomy@npm:2.1.2": version: 2.1.2 resolution: "@chakra-ui/anatomy@npm:2.1.2" checksum: 87519672ae028ef3af44ecc7d87fa18dc7ec8d46958a3490cb312ebc6b857bc227e908ffe0b12eb1e2a11c860656c38c3160ebc20bf1e9522b0ae0ef7b31e28d @@ -4772,7 +4772,6 @@ __metadata: version: 0.0.0-use.local resolution: "@logicalclocks/quartz@workspace:." dependencies: - "@chakra-ui/anatomy": ^2.1.1 "@chakra-ui/react": ^2.6.1 "@codemirror/view": ^6.9.5 "@emotion/core": ^10.3.1 From a253f109a4d773902459b99e12cc28ee19f70782 Mon Sep 17 00:00:00 2001 From: Esen Date: Tue, 9 May 2023 16:14:50 +0600 Subject: [PATCH 10/16] prevent hovered notification from hiding --- src/components/notifier/Notification.tsx | 15 ++++++--- src/components/notifier/notifier.tsx | 42 ++++++++++++++++-------- src/components/notifier/stories.tsx | 7 ++-- 3 files changed, 45 insertions(+), 19 deletions(-) diff --git a/src/components/notifier/Notification.tsx b/src/components/notifier/Notification.tsx index 6b56b264b..67b837e34 100644 --- a/src/components/notifier/Notification.tsx +++ b/src/components/notifier/Notification.tsx @@ -14,22 +14,29 @@ interface Props extends Omit { content: string | ReactNode; } -export const Notification = ({ onClose, content, title, status }: Props) => { +export const Notification = ({ + onClose, + content, + title, + status, + ...restProps +}: Props) => { return ( {React.isValidElement(title) ? ( diff --git a/src/components/notifier/notifier.tsx b/src/components/notifier/notifier.tsx index 524a425f0..45c6d81f8 100644 --- a/src/components/notifier/notifier.tsx +++ b/src/components/notifier/notifier.tsx @@ -1,4 +1,4 @@ -import { useToast } from '@chakra-ui/react'; +import { ToastId, useToast } from '@chakra-ui/react'; import React, { ReactNode, useCallback } from 'react'; import { standaloneToast } from '../../theme-chakra/ChakraThemeProvider'; import { Notification } from './Notification'; @@ -16,22 +16,38 @@ export const useNotifier = () => { const toast = useToast(); const notify = useCallback( - (status: Status) => (notification: INotification) => + (status: Status) => (notification: INotification) => { + const render = ({ onClose, id }: { onClose(): void; id: ToastId }) => { + return ( + hoverHandler(id)} + onMouseLeave={() => unhoverHandler(id)} + /> + ); + }; + + const hoverHandler = (id: ToastId) => { + toast.update(id, { duration: 1e6, render }); + }; + + const unhoverHandler = (id: ToastId) => { + toast.update(id, { + duration: notification.duration ?? 5000, + render, + }); + }; + toast({ status, duration: notification.duration ?? 5000, isClosable: true, - render: ({ onClose }) => { - return ( - - ); - }, - }), + render, + }); + }, [toast], ); diff --git a/src/components/notifier/stories.tsx b/src/components/notifier/stories.tsx index 1d8c1d05a..849ede908 100644 --- a/src/components/notifier/stories.tsx +++ b/src/components/notifier/stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { userEvent, waitFor, within } from '@storybook/testing-library'; -import React from 'react'; +import React, { useRef } from 'react'; import { expect } from '@storybook/jest'; @@ -106,13 +106,16 @@ export const Error: Story = { export const Success: Story = { render: (args) => { const notify = useNotifier(); + const counter = useRef(1); const another = () => { notify.success({ - title: args.title, + title: `${args.title} ${counter.current}`, content: args.content, duration: args.duration, }); + + counter.current += 1; }; return ( From 9faef419dbe68e8a46f11210ad0fecfd4bf0663f Mon Sep 17 00:00:00 2001 From: Esen Date: Tue, 9 May 2023 16:16:02 +0600 Subject: [PATCH 11/16] duration 1e6 sounds too big, 1e3 --- src/components/notifier/notifier.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notifier/notifier.tsx b/src/components/notifier/notifier.tsx index 45c6d81f8..0bd3f0aa2 100644 --- a/src/components/notifier/notifier.tsx +++ b/src/components/notifier/notifier.tsx @@ -31,7 +31,7 @@ export const useNotifier = () => { }; const hoverHandler = (id: ToastId) => { - toast.update(id, { duration: 1e6, render }); + toast.update(id, { duration: 1e3, render }); }; const unhoverHandler = (id: ToastId) => { From 01d2a44b706e2d7d9a37a32464122aefda958f62 Mon Sep 17 00:00:00 2001 From: Esen Date: Wed, 10 May 2023 17:01:47 +0600 Subject: [PATCH 12/16] add support for info and warning --- src/components/notifier/notifier.tsx | 14 +++++----- src/components/notifier/stories.tsx | 40 +++++++++++++++++++++++----- 2 files changed, 40 insertions(+), 14 deletions(-) diff --git a/src/components/notifier/notifier.tsx b/src/components/notifier/notifier.tsx index 0bd3f0aa2..67c7d2bb7 100644 --- a/src/components/notifier/notifier.tsx +++ b/src/components/notifier/notifier.tsx @@ -1,22 +1,20 @@ -import { ToastId, useToast } from '@chakra-ui/react'; +import { AlertStatus, ToastId, useToast } from '@chakra-ui/react'; import React, { ReactNode, useCallback } from 'react'; import { standaloneToast } from '../../theme-chakra/ChakraThemeProvider'; import { Notification } from './Notification'; -type Status = 'success' | 'error'; - export interface INotification { title: string | ReactNode; content: string | ReactNode; duration?: number; - status?: Status; + status?: AlertStatus; } export const useNotifier = () => { const toast = useToast(); const notify = useCallback( - (status: Status) => (notification: INotification) => { + (status: AlertStatus) => (notification: INotification) => { const render = ({ onClose, id }: { onClose(): void; id: ToastId }) => { return ( { }; const hoverHandler = (id: ToastId) => { - toast.update(id, { duration: 1e3, render }); + toast.update(id, { duration: 1e6, render }); }; const unhoverHandler = (id: ToastId) => { @@ -54,13 +52,15 @@ export const useNotifier = () => { return { success: notify('success'), error: notify('error'), + info: notify('info'), + warning: notify('warning'), closeAll: toast.closeAll, close: toast.close, }; }; export const createNotifier = () => { - const notify = (status: Status) => (notification: INotification) => + const notify = (status: AlertStatus) => (notification: INotification) => standaloneToast({ status, duration: notification.duration ?? 5000, diff --git a/src/components/notifier/stories.tsx b/src/components/notifier/stories.tsx index 849ede908..d5d9466d5 100644 --- a/src/components/notifier/stories.tsx +++ b/src/components/notifier/stories.tsx @@ -43,6 +43,22 @@ export const Primary: Story = { }); }; + const showInfo = () => { + notify.info({ + title: `Info: ${title}`, + content, + duration, + }); + }; + + const showWarning = () => { + notify.warning({ + title: `Warning: ${title}`, + content, + duration, + }); + }; + return ( @@ -52,6 +68,12 @@ export const Primary: Story = { + + + + + + + ); }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const portal = within(document.querySelector('.chakra-portal')!); + + userEvent.click(canvas.getByText('Success')); + expect( + await portal.findByText('Success: Something happened'), + ).toBeInTheDocument(); + + userEvent.click(canvas.getByText('Warning')); + expect( + await portal.findByText('Warning: Something happened'), + ).toBeInTheDocument(); + + userEvent.click(canvas.getByText('Info')); + expect( + await portal.findByText('Info: Something happened'), + ).toBeInTheDocument(); + + userEvent.click(canvas.getByText('Error')); + expect( + await portal.findByText('Error: Something happened'), + ).toBeInTheDocument(); + + userEvent.click(canvas.getByText('Clear all notifications')); + await waitFor(() => + expect(portal.queryByText('Something happened')).not.toBeInTheDocument(), + ); + }, }; From 9a744a6dd335053949c504a39cd05809bb6b4f6e Mon Sep 17 00:00:00 2001 From: Esen Date: Wed, 10 May 2023 17:30:57 +0600 Subject: [PATCH 16/16] fix lint --- src/components/notifications/notification.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notifications/notification.tsx b/src/components/notifications/notification.tsx index 7a4380667..7ad7d69dc 100644 --- a/src/components/notifications/notification.tsx +++ b/src/components/notifications/notification.tsx @@ -23,7 +23,7 @@ const Notification: FC = ({ NotificationManager.remove(id); }, duration); - setTimeoutNumber(timeout); + setTimeoutNumber(timeout); // eslint-disable-next-line react-hooks/exhaustive-deps }, []);