@ttoss/components 1.27.3 → 1.28.1

package/src/components/{InstallPwa/InstallPwaUi.tsx → InstallPwa.tsx}

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Button, Flex, Text } from '@ttoss/ui';
 
 export type InstallPwaUiProps = {
@@ -33,3 +34,36 @@ export const InstallPwaUi = ({ onInstall }: InstallPwaUiProps) => {
     </Flex>
   );
 };
+
+export const InstallPwa = () => {
+  const [supportsPwa, setSupportsPwa] = React.useState(false);
+  const [promptInstall, setPromptInstall] = React.useState<any>(null);
+
+  React.useEffect(() => {
+    const handler = (e: any) => {
+      e.preventDefault();
+      setSupportsPwa(true);
+      setPromptInstall(e);
+    };
+
+    window.addEventListener('beforeinstallprompt', handler);
+
+    return () => {
+      return window.removeEventListener('transitionend', handler);
+    };
+  }, []);
+
+  const onInstall = (e: any) => {
+    e.preventDefault();
+    if (!promptInstall) {
+      return;
+    }
+    promptInstall.prompt();
+  };
+
+  if (!supportsPwa) {
+    return null;
+  }
+
+  return <InstallPwaUi onInstall={onInstall} />;
+};

package/src/components/{Modal/Modal.tsx → Modal.tsx}

@@ -1,3 +1,4 @@
+import { css as transformStyleObject } from '@theme-ui/css';
 import { useResponsiveValue, useTheme } from '@ttoss/ui';
 import ReactModal from 'react-modal';
 
@@ -11,33 +12,33 @@ export type ModalProps = ReactModal.Props;
 export const Modal = (props: ModalProps) => {
   const { theme } = useTheme();
 
+  const space = theme.space as Record<string, string>;
+
   const padding =
-    useResponsiveValue([
-      theme.space?.[2],
-      theme.space?.[3],
-      theme.space?.[4],
-    ]) || 0;
+    useResponsiveValue([space?.['lg'], space?.['xl'], space?.['xl']]) || 0;
 
   const style: ReactModal.Styles = {
-    overlay: {
+    overlay: transformStyleObject({
       position: 'fixed',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
-      backgroundColor: 'rgba(255, 255, 255, 0.5)',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
-      padding,
       ...props.style?.overlay,
-    },
-    content: {
+    })(theme) as any,
+    content: transformStyleObject({
       /**
        * Theme
        */
-      backgroundColor: theme.rawColors?.background?.toString() || '#fff',
+      backgroundColor: 'surface',
       padding,
+      border: 'default',
+      borderColor: 'surface',
+      borderRadius: 'default',
       /**
        * General
        */
@@ -48,13 +49,10 @@ export const Modal = (props: ModalProps) => {
       left: '0px',
       right: '0px',
       bottom: '0px',
-      border: '2px solid',
-      borderColor: theme.rawColors?.muted?.toString() || '#fff',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
+      maxHeight: '90%',
+      maxWidth: '90%',
       ...props.style?.content,
-    },
+    })(theme) as any,
   };
 
   return <ReactModal {...props} style={style} />;

package/src/components/Toast.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Box } from '@ttoss/ui';
+import {
+  ToastContainer as ReactToastifyToastContainer,
+  type ToastContainerProps,
+  toast,
+} from 'react-toastify';
+import { injectStyle } from 'react-toastify/dist/inject-style';
+
+export { toast };
+
+export { type ToastContainerProps };
+
+export const ToastContainer = (props: ToastContainerProps) => {
+  React.useEffect(() => {
+    injectStyle();
+  }, []);
+
+  return (
+    <Box
+      sx={({ colors, fonts }) => {
+        return {
+          '--toastify-color-light': '#fff',
+          '--toastify-color-dark': '#121212',
+          '--toastify-color-info': colors?.info || '#3498db',
+          '--toastify-color-success': colors?.success || '#07bc0c',
+          '--toastify-color-warning': '#f1c40f',
+          '--toastify-color-error': '#e74c3c',
+          '--toastify-color-progress-light': `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
+          '--toastify-font-family': (fonts as { body: string }).body,
+        };
+      }}
+    >
+      <ReactToastifyToastContainer {...props} />
+    </Box>
+  );
+};

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from './components/Accordion/Accordion';
-export * from './components/InstallPwa/InstallPwa';
-export * from './components/Modal/Modal';
-export * from './components/Toast/Toast';
+export * from './components/Accordion';
+export * from './components/InstallPwa';
+export * from './components/Modal';
+export * from './components/Toast';

package/src/components/InstallPwa/InstallPwa.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { InstallPwaUi } from './InstallPwaUi';
-
-export const InstallPwa = () => {
-  const [supportsPwa, setSupportsPwa] = React.useState(false);
-  const [promptInstall, setPromptInstall] = React.useState<any>(null);
-
-  React.useEffect(() => {
-    const handler = (e: any) => {
-      e.preventDefault();
-      setSupportsPwa(true);
-      setPromptInstall(e);
-    };
-
-    window.addEventListener('beforeinstallprompt', handler);
-
-    return () => window.removeEventListener('transitionend', handler);
-  }, []);
-
-  const onInstall = (e: any) => {
-    e.preventDefault();
-    if (!promptInstall) {
-      return;
-    }
-    promptInstall.prompt();
-  };
-
-  if (!supportsPwa) {
-    return null;
-  }
-
-  return <InstallPwaUi onInstall={onInstall} />;
-};

package/src/components/Toast/Toast.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { Box } from '@ttoss/ui';
-import {
-  ToastContainer as ReactToastifyToastContainer,
-  ToastContainerProps,
-  toast,
-} from 'react-toastify';
-import { injectStyle } from 'react-toastify/dist/inject-style';
-
-export { toast };
-
-export { type ToastContainerProps };
-
-export const ToastContainer = (props: ToastContainerProps) => {
-  React.useEffect(() => {
-    injectStyle();
-  }, []);
-
-  return (
-    <Box
-      sx={({ colors, fonts }) => ({
-        '--toastify-color-light': '#fff',
-        '--toastify-color-dark': '#121212',
-        '--toastify-color-info': colors?.info || '#3498db',
-        '--toastify-color-success': colors?.success || '#07bc0c',
-        '--toastify-color-warning': '#f1c40f',
-        '--toastify-color-error': '#e74c3c',
-        '--toastify-color-progress-light': `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
-        '--toastify-font-family': (fonts as { body: string }).body,
-      })}
-    >
-      <ReactToastifyToastContainer {...props} />
-    </Box>
-  );
-};

package/src/index.spec.tsx

@@ -1,11 +0,0 @@
-import * as componentsModule from './index';
-
-test.each([
-  componentsModule.Accordion,
-  componentsModule.InstallPwa,
-  componentsModule.Modal,
-  componentsModule.ToastContainer,
-  componentsModule.toast,
-])('should export components %#', (Component) => {
-  expect(Component).toBeDefined();
-});