@ttoss/components 1.30.5 → 1.31.0

package/dist/index.d.ts

@@ -8,6 +8,8 @@ import ReactModal from 'react-modal';
 import { ToastContainerProps } from 'react-toastify';
 export { ToastContainerProps, toast } from 'react-toastify';
 import { Options } from 'react-markdown';
+import { IconifyIcon } from '@ttoss/react-icons';
+import DrawerUi from 'react-modern-drawer';
 
 type AccordionProps = BoxProps & {
     allowMultipleExpanded?: boolean;
@@ -325,4 +327,37 @@ type SearchProps = Omit<InputProps, 'onChange'> & {
 };
 declare const Search: ({ value, defaultValue, loading, onChange, ...props }: SearchProps) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionProps, InstallPwa, InstallPwaUi, type InstallPwaUiProps, Markdown, type MarkdownProps, Modal, type ModalProps, Search, type SearchProps, ToastContainer };
+type MenuProps = {
+    onClose: () => void;
+    onOpen: () => void;
+    isOpen: boolean;
+    children: React.ReactNode;
+    srcLogo?: string;
+    sx?: BoxProps['sx'];
+    /**
+     * Default direction: `left`
+     */
+    direction?: 'left' | 'right';
+    /**
+     * Default size: `100%`
+     */
+    sizeOnMobile?: string | number;
+    /**
+     * Default size: `300px`
+     */
+    sizeOnDesktop?: string | number;
+    /**
+     * Default icon: `menu-open`
+     */
+    menuIcon?: IconifyIcon | string;
+};
+declare const Menu: ({ children, srcLogo, onClose, onOpen, isOpen, sx, direction, sizeOnDesktop, sizeOnMobile, menuIcon, }: MenuProps) => react_jsx_runtime.JSX.Element;
+
+type DrawerUiProps = React.ComponentProps<typeof DrawerUi>;
+
+type DrawerProps = DrawerUiProps & {
+    sx?: BoxProps['sx'];
+};
+declare const Drawer: ({ children, sx, ...props }: DrawerProps) => react_jsx_runtime.JSX.Element;
+
+export { Accordion, type AccordionProps, Drawer, type DrawerProps, InstallPwa, InstallPwaUi, type InstallPwaUiProps, Markdown, type MarkdownProps, Menu, type MenuProps, Modal, type ModalProps, Search, type SearchProps, ToastContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.30.5",
+  "version": "1.31.0",
   "description": "React components for ttoss ecosystem.",
   "author": "ttoss",
   "contributors": [
@@ -16,6 +16,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/esm/index.js"
+    },
+    "./table": {
+      "types": "./dist/components/Table.d.ts",
+      "import": "./dist/esm/components/Table.js"
     }
   },
   "files": [
@@ -25,30 +29,32 @@
   "sideEffects": false,
   "dependencies": {
     "@emotion/css": "^11.11.2",
-    "@theme-ui/css": "^0.16.1",
+    "@tanstack/react-table": "^8.15.3",
+    "@theme-ui/css": "^0.16.2",
     "@types/react-modal": "^3.16.3",
     "react-accessible-accordion": "^5.0.0",
     "react-markdown": "^9.0.1",
     "react-modal": "^3.16.1",
-    "react-toastify": "^9.1.3",
+    "react-modern-drawer": "^1.2.2",
+    "react-toastify": "^10.0.4",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^4.1.3",
-    "@ttoss/react-hooks": "^1.25.3"
+    "@ttoss/react-hooks": "^1.25.3",
+    "@ttoss/ui": "^4.1.4"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.58",
     "jest": "^29.7.0",
     "tsup": "^8.0.2",
-    "@ttoss/config": "^1.31.5",
     "@ttoss/react-hooks": "^1.25.3",
-    "@ttoss/ui": "^4.1.3",
+    "@ttoss/config": "^1.31.5",
+    "@ttoss/react-icons": "^0.3.1",
     "@ttoss/test-utils": "^2.1.1",
-    "@ttoss/react-icons": "^0.3.1"
+    "@ttoss/ui": "^4.1.4"
   },
   "keywords": [
     "React",

package/src/components/Drawer.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Box, type BoxProps } from '@ttoss/ui';
+import DrawerUi from 'react-modern-drawer';
+
+type DrawerUiProps = React.ComponentProps<typeof DrawerUi>;
+
+import 'react-modern-drawer/dist/index.css';
+
+export type DrawerProps = DrawerUiProps & {
+  sx?: BoxProps['sx'];
+};
+
+export const Drawer = ({ children, sx, ...props }: DrawerProps) => {
+  return (
+    <DrawerUi {...props}>
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          ...sx,
+        }}
+      >
+        {children}
+      </Box>
+    </DrawerUi>
+  );
+};

package/src/components/Menu.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+  Box,
+  BoxProps,
+  Flex,
+  Image,
+  Text,
+  useResponsiveValue,
+} from '@ttoss/ui';
+import { Drawer } from '..';
+import { Icon, IconifyIcon } from '@ttoss/react-icons';
+
+export type MenuProps = {
+  onClose: () => void;
+  onOpen: () => void;
+  isOpen: boolean;
+  children: React.ReactNode;
+  srcLogo?: string;
+  sx?: BoxProps['sx'];
+  /**
+   * Default direction: `left`
+   */
+  direction?: 'left' | 'right';
+  /**
+   * Default size: `100%`
+   */
+  sizeOnMobile?: string | number;
+  /**
+   * Default size: `300px`
+   */
+  sizeOnDesktop?: string | number;
+  /**
+   * Default icon: `menu-open`
+   */
+  menuIcon?: IconifyIcon | string;
+};
+
+export const Menu = ({
+  children,
+  srcLogo,
+  onClose,
+  onOpen,
+  isOpen,
+  sx,
+  direction = 'left',
+  sizeOnDesktop = '300px',
+  sizeOnMobile = '100%',
+  menuIcon = 'menu-open',
+}: MenuProps) => {
+  const responsiveSize = useResponsiveValue([sizeOnMobile, sizeOnDesktop]);
+
+  return (
+    <>
+      <Text sx={{ cursor: 'pointer' }} onClick={onOpen}>
+        <Icon icon={menuIcon} />
+      </Text>
+
+      <Drawer size={responsiveSize} direction={direction} open={isOpen}>
+        <Box
+          sx={{
+            position: 'fixed',
+            height: '100%',
+            backgroundColor: 'background',
+            width: '100%',
+            maxWidth: 'md',
+            right: 0,
+            boxShadow: 'lg',
+            paddingX: 'xl',
+            paddingTop: 'lg',
+            paddingBottom: '2xl',
+            ...sx,
+          }}
+        >
+          <Flex sx={{ justifyContent: 'space-between' }}>
+            <Image
+              src={srcLogo}
+              sx={{
+                maxWidth: '200px',
+                height: '44px',
+                objectFit: 'cover',
+              }}
+            />
+
+            <Text
+              sx={{
+                marginLeft: 'auto',
+                fontSize: '2xl',
+                alignSelf: 'center',
+                flexShrink: 0,
+                cursor: 'pointer',
+                lineHeight: 0,
+              }}
+              role="button"
+              onClick={onClose}
+            >
+              <Icon icon="close" />
+            </Text>
+          </Flex>
+
+          <Box sx={{ paddingTop: '3xl' }} as="nav">
+            {children}
+          </Box>
+        </Box>
+      </Drawer>
+    </>
+  );
+};

package/src/components/Search.tsx

@@ -21,12 +21,12 @@ export const Search = ({
 
   React.useEffect(() => {
     onChange(debouncedValue);
-  }, [debouncedValue]);
+  }, [debouncedValue, onChange]);
 
   return (
     <Input
       leadingIcon={loading ? 'loading' : 'search'}
-      value={text}
+      defaultValue={text}
       onChange={(e) => {
         return setText(e.target.value);
       }}

package/src/components/Table.tsx

@@ -0,0 +1,36 @@
+import { Box, BoxProps } from '@ttoss/ui';
+
+// eslint-disable-next-line react-refresh/only-export-components
+export * from '@tanstack/react-table';
+
+export const Table = (props: BoxProps) => {
+  return <Box as="table" {...props} />;
+};
+
+export const TableHead = (props: BoxProps) => {
+  return <Box as="thead" {...props} />;
+};
+
+export const TableBody = (props: BoxProps) => {
+  return <Box as="tbody" {...props} />;
+};
+
+export const TableRow = (props: BoxProps) => {
+  return <Box as="tr" {...props} />;
+};
+
+export const TableCell = (props: BoxProps) => {
+  return <Box as="td" {...props} />;
+};
+
+export const TableHeader = (props: BoxProps) => {
+  return <Box as="th" {...props} />;
+};
+
+export const TableCaption = (props: BoxProps) => {
+  return <Box as="caption" {...props} />;
+};
+
+export const TableFooter = (props: BoxProps) => {
+  return <Box as="tfoot" {...props} />;
+};

package/src/index.ts

@@ -4,3 +4,5 @@ export * from './components/Modal';
 export * from './components/Toast';
 export * from './components/Markdown';
 export * from './components/Search';
+export * from './components/Menu';
+export * from './components/Drawer';