feat: added drawer, sonner

nmashchenko · Oct 10, 2023 · abe8162 · abe8162 · github-actions · Oct 10, 2023
1 parent 9eb15c9
commit abe8162
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 30 deletions.
diff --git a/client/package.json b/client/package.json
@@ -37,12 +37,13 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
-    "react-hot-toast": "^2.4.1",
     "react-modal": "^3.16.1",
+    "react-modern-drawer": "^1.2.2",
     "react-particles": "^2.12.2",
     "react-select": "^5.7.4",
     "react-tooltip": "^5.21.3",
     "sass": "^1.64.2",
+    "sonner": "^1.0.3",
     "teameights-types": "^1.0.1",
     "tsparticles": "^2.12.0",
     "typescript": "5.1.6",

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { Rubik } from 'next/font/google';
-import { Toaster } from 'react-hot-toast';
+import { Toaster } from 'sonner';
 import { ReactQueryProvider } from './providers';
 import './styles/globals.scss';
 import { ReactNode } from 'react';
@@ -19,10 +19,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <body className={inter.variable}>
           {/* <CookieBanner /> */}
           <Toaster
-            gutter={8}
+            theme='dark'
             toastOptions={{
-              style: { ...inter.style, background: '#2F3239', color: 'white' },
-              duration: 2000,
+              style: { ...inter.style, background: '#2F3239', color: '#fff', border: 'none' },
             }}
           />
           {children}

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -1,14 +1,17 @@
 'use client';
 
-import { Flex, Typography, Skeleton } from '@/shared/ui';
+import { Flex, Typography, Skeleton, Button, Drawer } from '@/shared/ui';
 import { useGetScreenWidth } from '@/shared/lib';
 import { Crown } from '@/shared/assets';
 import { IUserRequest } from 'teameights-types';
-import { NewtonsCradle, RaceBy } from '@uiball/loaders';
+import { NewtonsCradle, RaceBy, Ring } from '@uiball/loaders';
+import { toast } from 'sonner';
+import { useState } from 'react';
 
 export default function Home() {
   const width = useGetScreenWidth();
   const user: IUserRequest = { username: 'nmashchenko' };
+  const [open, setOpen] = useState(false);
 
   return (
     <>
@@ -33,11 +36,28 @@ export default function Home() {
 
       <Crown width={70} height={70} />
 
+      <Button
+        onClick={() =>
+          toast('Loading some dummy data lol...', {
+            icon: <Ring size={17} speed={1.5} color='white' />,
+          })
+        }
+      >
+        Spawn loading toaster
+      </Button>
+
       <Flex direction='column' gap='200px' width='100%' justify='center' align='center'>
         <NewtonsCradle size={50} speed={1.4} color='white' />
 
         <RaceBy size={80} lineWeight={5} speed={1.4} color='#46A11B' />
       </Flex>
+
+      <Button typeBtn='tertiary' onClick={() => setOpen(true)}>
+        open drawer
+      </Button>
+      <Drawer open={open} onClose={() => setOpen(false)}>
+        <button onClick={() => setOpen(false)}>close</button>
+      </Drawer>
     </>
   );
 }
diff --git a/client/src/shared/lib/react-query/query-client.ts b/client/src/shared/lib/react-query/query-client.ts
@@ -1,7 +1,7 @@
 'use client';
 
 import { QueryCache, QueryClient } from '@tanstack/react-query';
-import { toast } from 'react-hot-toast';
+import { toast } from 'sonner';
 
 export const queryClient = new QueryClient({
   defaultOptions: {

diff --git a/client/src/shared/ui/drawer/drawer.stories.tsx b/client/src/shared/ui/drawer/drawer.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta } from '@storybook/react';
+import { useState } from 'react';
+import { Button } from '@/shared/ui';
+import { Drawer } from './drawer';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Drawer> = {
+  title: 'shared/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Drawer_Default = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div style={{ height: '100dvh' }}>
+      <Drawer open={open} onClose={() => setOpen(false)}>
+        Some Text
+      </Drawer>
+
+      <Button typeBtn='primary' size='m' onClick={() => setOpen(true)}>
+        Open drawer
+      </Button>
+    </div>
+  );
+};
+
+export const Drawer_Fullheight = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div style={{ height: '100dvh' }}>
+      <Drawer open={open} onClose={() => setOpen(false)} isFullHeight>
+        <Button typeBtn='primary' size='m' onClick={() => setOpen(false)}>
+          close
+        </Button>
+      </Drawer>
+
+      <Button typeBtn='primary' size='m' onClick={() => setOpen(true)}>
+        Open drawer
+      </Button>
+    </div>
+  );
+};
diff --git a/client/src/shared/ui/drawer/drawer.tsx b/client/src/shared/ui/drawer/drawer.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+/**
+ * Drawer Component
+ *
+ * A customizable drawer component powered by `react-modern-drawer`. It provides a sliding drawer that can be utilized for additional navigation or content display, overlaying it on the current screen without navigating away.
+ *
+ * Props:
+ *
+ * @prop {boolean} open - Determines whether the drawer is visible (open) or not.
+ * @prop {function} onClose - Callback function that gets triggered when the drawer is requested to be closed.
+ * @prop {boolean} [isFullHeight=false] - Specifies whether the drawer should cover full height of the viewport. Default is `false`.
+ * @prop {ReactNode} [children] - Content to be displayed inside the drawer.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * import { Drawer } from '@/shared/ui';
+ *
+ * <Drawer open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} isFullHeight>
+ *   <p>Drawer content here</p>
+ * </Drawer>
+ * ```
+ *
+ * Note:
+ * - The component is designed to slide from the bottom towards the top. This is hardcoded and not customizable via props.
+ * - Styling for the drawer can be adjusted through CSS variables or directly modifying inline styles in the component. Particularly, the `--cards-color` CSS variable is used for the background color.
+ * - Ensure proper installation and import of `react-modern-drawer` and its CSS file as shown in the component code snippet.
+ * - Conditional styling is applied based on `isFullHeight` prop for the `borderRadius` and `height` CSS properties.
+ *
+ * Styling:
+ * To further customize the drawer's appearance, consider adjusting the CSS variables or modifying the styles directly in the component's `style` object. Be mindful of the UI/UX impact that may come with stylistic changes.
+ */
+
+import React, { FC, PropsWithChildren } from 'react';
+import DrawerComponent from 'react-modern-drawer';
+import 'react-modern-drawer/dist/index.css';
+
+interface DrawerProps {
+  open: boolean;
+  onClose: () => void;
+  isFullHeight?: boolean;
+  // direction: "left" | "right" | "top" | "bottom";
+}
+export const Drawer: FC<PropsWithChildren<DrawerProps>> = props => {
+  const { open, onClose, children, isFullHeight } = props;
+
+  const style = {
+    borderRadius: isFullHeight ? '0' : '15px 15px 0 0',
+    minHeight: '250px',
+    height: isFullHeight ? '100dvh' : 'auto',
+    background: 'var(--cards-color)',
+  } as React.CSSProperties;
+
+  return (
+    <DrawerComponent open={open} onClose={onClose} direction={'bottom'} style={style}>
+      {children}
+    </DrawerComponent>
+  );
+};
diff --git a/client/src/shared/ui/drawer/index.ts b/client/src/shared/ui/drawer/index.ts
@@ -0,0 +1 @@
+export { Drawer } from './drawer';
diff --git a/client/src/shared/ui/index.ts b/client/src/shared/ui/index.ts
@@ -11,3 +11,4 @@ export * from './portal';
 export * from './flex';
 export * from './skeleton';
 export * from './icon-wrapper';
+export * from './drawer';
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -7641,12 +7641,13 @@ __metadata:
     react: 18.2.0
     react-dom: 18.2.0
     react-hook-form: ^7.45.4
-    react-hot-toast: ^2.4.1
     react-modal: ^3.16.1
+    react-modern-drawer: ^1.2.2
     react-particles: ^2.12.2
     react-select: ^5.7.4
     react-tooltip: ^5.21.3
     sass: ^1.64.2
+    sonner: ^1.0.3
     storybook: 7.2.1
     teameights-types: ^1.0.1
     tsparticles: ^2.12.0
@@ -10274,15 +10275,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"goober@npm:^2.1.10":
-  version: 2.1.13
-  resolution: "goober@npm:2.1.13"
-  peerDependencies:
-    csstype: ^3.0.10
-  checksum: 0c00b90d26d1a2fad432e311fd4f47bc9fef1eee2a733158d9e2c72a89cf76d414090d063a8d20fe378f2b2b8087df0a83b0f00a3244d1466b97a0d3b14344a7
-  languageName: node
-  linkType: hard
-
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -14674,18 +14666,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-hot-toast@npm:^2.4.1":
-  version: 2.4.1
-  resolution: "react-hot-toast@npm:2.4.1"
-  dependencies:
-    goober: ^2.1.10
-  peerDependencies:
-    react: ">=16"
-    react-dom: ">=16"
-  checksum: 3e337816db574782454bf09c63a8aca546bf9c5be3f83d0494d24bdcfd97ca2db64d4c151c4ab0184d2342d7a7226403e6812e70caf03c8b55a07787bb4ad0f2
-  languageName: node
-  linkType: hard
-
 "react-inspector@npm:^6.0.0":
   version: 6.0.2
   resolution: "react-inspector@npm:6.0.2"
@@ -14745,6 +14725,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-modern-drawer@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "react-modern-drawer@npm:1.2.2"
+  peerDependencies:
+    react: ">16.0.0"
+  checksum: 379ad55a02b6c6d647448e5670ae99fc3d7bff70c43a07a978ac0ac18dbd40b055c2ca8f764627f4252451fa3d2125b2d90271eaaaf6a0048baa2ec6e577b756
+  languageName: node
+  linkType: hard
+
 "react-particles@npm:^2.12.2":
   version: 2.12.2
   resolution: "react-particles@npm:2.12.2"
@@ -15757,6 +15746,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sonner@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "sonner@npm:1.0.3"
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: e7233c9982c05413e24c7ee14af4439c734c713f5a4e4d5f2c4ca9425615f96e9c560d0053af3ff0555dc70aaff49079d05a0bdf90457e551bd2641925bd08fd
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"