@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.3

package/src/components/MessageBox/CollapsibleMessageBox.tsx

@@ -0,0 +1,38 @@
+import type { PropTypes } from './CollapsibleMessageBox.types';
+import type { PropsWithChildren } from 'react';
+
+import * as Collapsible from '@radix-ui/react-collapsible';
+import React, { useState } from 'react';
+
+import { ChevronDownIcon, ChevronUpIcon } from '../../icons';
+import { CollapsibleContent } from '../common/styles';
+import { Divider } from '../Divider';
+
+import { Trigger } from './CollapsibleMessageBox.styles';
+
+import { MessageBox } from '.';
+
+export function CollapsibleMessageBox(props: PropsWithChildren<PropTypes>) {
+  const { description, status, title, children } = props;
+  const [open, setOpen] = useState<boolean>(false);
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <Trigger>
+        <MessageBox title={title} description={description} type={status} />
+        <CollapsibleContent open={open}>
+          <Divider size={12} />
+
+          {children}
+        </CollapsibleContent>
+
+        <Divider size={12} />
+        {open ? (
+          <ChevronUpIcon color={'black'} size={16} />
+        ) : (
+          <ChevronDownIcon color={'black'} size={16} />
+        )}
+      </Trigger>
+    </Collapsible.Root>
+  );
+}

package/src/components/MessageBox/CollapsibleMessageBox.types.tsx

@@ -0,0 +1,11 @@
+import type { IconHighlight } from './MessageBox.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof IconHighlight>;
+type BaseTypes = Exclude<BaseProps['type'], object>;
+
+export interface PropTypes {
+  title: string;
+  description: string;
+  status: BaseTypes;
+}

package/src/components/MessageBox/DefaultMessageBox.tsx

@@ -0,0 +1,40 @@
+import type { PropTypes } from './MessageBox.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Divider } from '../Divider';
+import { Typography } from '../Typography';
+
+import { Container, Description, IconHighlight } from './MessageBox.styles';
+import StatusIcon from './StatusIcon';
+
+export function MessageBox(props: PropsWithChildren<PropTypes>) {
+  const { type, title, description, children, icon } = props;
+
+  return (
+    <Container>
+      <IconHighlight type={type}>
+        {icon || <StatusIcon type={type} />}
+      </IconHighlight>
+      <Divider size={4} />
+      <Typography
+        color={type === 'loading' ? 'info500' : `${type}500`}
+        variant="title"
+        size="medium">
+        {title}
+      </Typography>
+      <Divider size={16} />
+      <Description>
+        {typeof description === 'string' ? (
+          <Typography color="neutral900" variant="body" size="medium">
+            {description}
+          </Typography>
+        ) : (
+          description
+        )}
+      </Description>
+      {children}
+    </Container>
+  );
+}

package/src/components/MessageBox/MessageBox.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MessageBox } from './DefaultMessageBox';
+
+const meta: Meta<typeof MessageBox> = {
+  component: MessageBox,
+};
+
+export default meta;
+type Story = StoryObj<typeof MessageBox>;
+
+export const Main: Story = {
+  args: {
+    type: 'warning',
+    title: 'Title',
+    description: 'This is a test text',
+  },
+};

package/src/components/MessageBox/MessageBox.styles.tsx

@@ -0,0 +1,40 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+});
+
+export const Description = styled('div', {
+  textAlign: 'center',
+});
+
+export const IconHighlight = styled('div', {
+  borderRadius: '50%',
+  width: '$45',
+  height: '$45',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    type: {
+      success: {
+        backgroundColor: '$success300',
+      },
+      warning: {
+        backgroundColor: '$warning300',
+      },
+      error: {
+        backgroundColor: '$error300',
+      },
+      info: {
+        backgroundColor: '$info300',
+      },
+      loading: {
+        backgroundColor: '$info300',
+      },
+    },
+  },
+});

package/src/components/MessageBox/MessageBox.tsx

@@ -0,0 +1,2 @@
+export { MessageBox } from './DefaultMessageBox';
+export { CollapsibleMessageBox } from './CollapsibleMessageBox';

package/src/components/MessageBox/MessageBox.types.tsx

@@ -0,0 +1,13 @@
+import type { IconHighlight } from './MessageBox.styles';
+import type * as Stitches from '@stitches/react';
+import type { ReactNode } from 'react';
+
+type BaseProps = Stitches.VariantProps<typeof IconHighlight>;
+type BaseTypes = Exclude<BaseProps['type'], object>;
+
+export interface PropTypes {
+  type: BaseTypes;
+  title: string;
+  description?: string | ReactNode;
+  icon?: ReactNode;
+}

package/src/components/MessageBox/StatusIcon.tsx

@@ -0,0 +1,28 @@
+import type { PropTypes } from './MessageBox.types';
+
+import React from 'react';
+
+import {
+  CompleteIcon,
+  ErrorIcon,
+  InfoErrorIcon,
+  WarningIcon,
+} from '../../icons';
+import { Spinner } from '../Spinner';
+
+function StatusIcon(props: Pick<PropTypes, 'type'>) {
+  switch (props.type) {
+    case 'success':
+      return <CompleteIcon color={props.type} size={30} />;
+    case 'warning':
+      return <WarningIcon color={props.type} size={30} />;
+    case 'error':
+      return <ErrorIcon color={props.type} size={30} />;
+    case 'loading':
+      return <Spinner color="info" size={30} />;
+    default:
+      return <InfoErrorIcon color={props.type} size={30} />;
+  }
+}
+
+export default StatusIcon;

package/src/components/MessageBox/index.ts

@@ -0,0 +1 @@
+export * from './MessageBox';

package/src/components/Modal/Modal.stories.tsx

@@ -1,12 +1,18 @@
+import type { PropTypes } from './Modal.types';
+import type { Meta } from '@storybook/react';
+
 import React, { useState } from 'react';
-import { Meta } from '@storybook/react';
-import { Modal, PropTypes } from './Modal';
+
+import { MessageBox } from '../MessageBox';
+
+import { Modal } from './Modal';
 
 export default {
   name: 'Modal',
   component: Modal,
   args: {
     title: 'I`m a modal',
+    container: document.getElementById('storybook-root'),
   },
 } as Meta<typeof Modal>;
 
@@ -15,7 +21,13 @@ export const Main = (args: PropTypes) => {
   return (
     <div>
       <button onClick={() => setOpen(true)}>Open Modal</button>
-      <Modal {...args} open={open} onClose={() => setOpen(false)} />
+      <Modal {...args} open={open} onClose={() => setOpen(false)}>
+        <MessageBox
+          type="warning"
+          title="Title"
+          description="This is a test text"
+        />
+      </Modal>
     </div>
   );
 };

package/src/components/Modal/Modal.styles.ts

@@ -0,0 +1,104 @@
+import { styled } from '../../theme';
+import { IconButton } from '../IconButton';
+
+export const BackDrop = styled('div', {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'rgba(0,0,0,0)',
+  zIndex: 10,
+  borderRadius: '20px',
+  display: 'flex',
+  overflow: 'hidden',
+  transition: 'background .35s',
+
+  variants: {
+    anchor: {
+      bottom: {
+        justifyContent: 'end',
+        alignItems: 'end',
+        bottom: '0',
+      },
+      center: {
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+    },
+    active: {
+      true: {
+        backgroundColor: 'rgba(0,0,0,.1)',
+      },
+    },
+  },
+});
+
+export const ModalContainer = styled('div', {
+  backgroundColor: '$background',
+  width: '100%',
+  borderRadius: '20px',
+  display: 'flex',
+  flexDirection: 'column',
+  zIndex: 9999999,
+  transform: 'translateY(100%)',
+  transition: 'transform .45s ease-in-out',
+
+  variants: {
+    anchor: {
+      bottom: {
+        width: '100%',
+        maxHeight: '95%',
+      },
+      center: { height: '100%' },
+    },
+    active: {
+      true: {
+        transform: 'translateY(0)',
+      },
+    },
+  },
+});
+
+export const Flex = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'end',
+  [`& ${IconButton}`]: {
+    padding: '$5',
+  },
+});
+export const ModalHeader = styled('div', {
+  padding: '$20 $20 $0 $20',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  variants: {
+    noTitle: {
+      true: {
+        justifyContent: 'flex-end',
+      },
+    },
+  },
+});
+
+export const Content = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  padding: '$0 $20 $10 $20',
+  backgroundColor: '$background',
+  position: 'relative',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+});
+
+export const Footer = styled('div', {
+  '& .footer__content': {
+    padding: '$0 $20',
+  },
+  '& .footer__logo': {
+    padding: '$0 $20 $10 $20',
+  },
+});

package/src/components/Modal/Modal.tsx

@@ -1,79 +1,134 @@
-import { CSS } from '@stitches/react';
-import React, { useEffect } from 'react';
+import type { PropTypes } from './Modal.types';
+import type { PropsWithChildren } from 'react';
+
+import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { config, styled } from '../../theme';
-import { CloseIcon } from '../Icon/CloseIcon';
-import { Typography } from '../Typography';
 
-export interface PropTypes {
-  title: string;
-  open: boolean;
-  onClose: () => void;
-  content: React.ReactNode;
-  action?: React.ReactNode;
-  containerStyle?: CSS<typeof config>;
-}
+import { usePaddingRight } from '../../hooks';
+import { CloseIcon } from '../../icons';
+import { theme } from '../../theme';
+import { BottomLogo } from '../BottomLogo';
+import { Divider } from '../Divider';
+import { IconButton } from '../IconButton/IconButton';
+import { Typography } from '../Typography';
 
-const BackDrop = styled('div', {
-  position: 'fixed',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  top: '0',
-  left: '0',
-  width: '100vw',
-  height: '100vh',
-  backgroundColor: 'rgba(0,0,0,.1)',
-  zIndex: 10,
-});
+import {
+  BackDrop,
+  Content,
+  Flex,
+  Footer,
+  ModalContainer,
+  ModalHeader,
+} from './Modal.styles';
 
-const ModalContainer = styled('div', {
-  backgroundColor: '$background',
-  borderRadius: '$10',
-  padding: '$16 $16',
-  display: 'flex',
-  flexDirection: 'column',
-  zIndex: 20,
-});
-const Row = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-});
-const ModalHeader = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  position: 'relative',
-  marginBottom: '$16',
-});
+const CLOSED_DELAY = 600;
+const OPEN_DELAY = 10;
+const DEFAULT_CONTENT_PADDING = 20;
 
-export function Modal(props: PropTypes) {
-  const { title, content, open, onClose, containerStyle, action } = props;
+export function Modal(props: PropsWithChildren<PropTypes>) {
+  const {
+    title,
+    open,
+    onClose,
+    containerStyle,
+    anchor = 'bottom',
+    container = document.body,
+    prefix,
+    header,
+    dismissible = true,
+    children,
+    suffix,
+    footer,
+    hasLogo = true,
+  } = props;
+  const [active, setActive] = useState(false);
+  const [isMount, setIsMount] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  usePaddingRight({
+    element: contentRef.current,
+    paddingRight: theme.sizes[DEFAULT_CONTENT_PADDING],
+  });
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) onClose();
+    if (event.target === event.currentTarget && dismissible) {
+      onClose();
+    }
   };
   useEffect(() => {
-    if (open) document.body.style.overflow = 'hidden';
-    else document.body.style.overflow = 'unset';
-  }, [open]);
+    if (container) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (open) {
+        setIsMount(true);
+        container.style.overflow = 'hidden';
+        timeoutRef.current = setTimeout(() => {
+          setActive(true);
+        }, OPEN_DELAY);
+      } else {
+        setActive(false);
+        timeoutRef.current = setTimeout(() => {
+          setIsMount(false);
+          container.style.overflow = 'unset';
+        }, CLOSED_DELAY);
+      }
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [open, container]);
+
   return (
     <>
-      {open &&
+      {isMount &&
+        container &&
         createPortal(
-          <BackDrop onClick={handleBackDropClick}>
-            <ModalContainer css={containerStyle}>
-              <ModalHeader>
-                <Typography variant="h4">{title}</Typography>
-                <Row>
-                  {action}
-                  <CloseIcon size={24} onClick={onClose} />
-                </Row>
-              </ModalHeader>
-              {content}
+          <BackDrop
+            active={active}
+            onClick={handleBackDropClick}
+            anchor={anchor}>
+            <ModalContainer
+              active={active}
+              css={containerStyle}
+              anchor={anchor}>
+              {header ?? (
+                <ModalHeader noTitle={!title}>
+                  {prefix}
+                  {title && (
+                    <Typography variant="title" size="small">
+                      {title}
+                    </Typography>
+                  )}
+                  <Flex>
+                    {suffix}
+                    {dismissible && (
+                      <IconButton onClick={onClose} variant="ghost">
+                        <CloseIcon color="gray" size={14} />
+                      </IconButton>
+                    )}
+                  </Flex>
+                </ModalHeader>
+              )}
+              <Content ref={(ref) => (contentRef.current = ref)}>
+                {children}
+              </Content>
+              {(hasLogo || footer) && (
+                <Footer>
+                  <div className="footer__content">{footer}</div>
+                  {hasLogo && (
+                    <div className="footer__logo">
+                      <Divider size={12} />
+                      <BottomLogo />
+                    </div>
+                  )}
+                </Footer>
+              )}
             </ModalContainer>
           </BackDrop>,
-          document.body,
+          container
         )}
     </>
   );

package/src/components/Modal/Modal.types.ts

@@ -0,0 +1,21 @@
+import type { BackDrop } from './Modal.styles';
+import type { config } from '../../theme';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof BackDrop>;
+type BaseAnchor = Exclude<BaseProps['anchor'], object>;
+
+export interface PropTypes {
+  title?: string;
+  open: boolean;
+  onClose: () => void;
+  anchor?: BaseAnchor;
+  dismissible?: boolean;
+  header?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  container?: HTMLElement;
+  containerStyle?: Stitches.CSS<typeof config>;
+  footer?: React.ReactNode;
+  hasLogo?: boolean;
+}

package/src/components/NotFound/NotFound.stories.tsx

@@ -0,0 +1,17 @@
+import type { PropTypes } from './NotFound.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { NotFound } from './NotFound';
+
+export default {
+  title: 'Components/NotFound',
+  component: NotFound,
+  args: {
+    title: 'Not Found!',
+    description: 'Try using different keywords',
+  },
+} as Meta<typeof NotFound>;
+
+export const Main = (args: PropTypes) => <NotFound {...args} />;

package/src/components/NotFound/NotFound.styles.ts

@@ -0,0 +1,8 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+});

package/src/components/NotFound/NotFound.tsx

@@ -0,0 +1,24 @@
+import type { PropTypes } from './NotFound.types';
+
+import React from 'react';
+
+import { SearchIcon } from '../../icons';
+import { Divider } from '../Divider';
+import { Typography } from '../Typography';
+
+import { Container } from './NotFound.styles';
+
+export function NotFound(props: PropTypes) {
+  return (
+    <Container>
+      <SearchIcon color="secondary" size={26} />
+      <Divider size={4} />
+      <Typography variant="title" size="medium">
+        {props.title}
+      </Typography>
+      <Typography variant="body" size="medium" color="neutral900">
+        {props.description}
+      </Typography>
+    </Container>
+  );
+}

package/src/components/NotFound/NotFound.types.ts

@@ -0,0 +1,4 @@
+export type PropTypes = {
+  title: string;
+  description?: string;
+};

package/src/components/NotFound/index.tsx

@@ -0,0 +1 @@
+export { NotFound } from './NotFound';

package/src/components/PercentageChange/PercentageChange.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Typography } from '..';
 
 interface PropTypes {
@@ -12,7 +13,7 @@ export function PercentageChange(props: PropTypes) {
   return (
     <>
       {showPercentageChange && (
-        <Typography variant="caption" color="$error500">
+        <Typography variant="title" size="small" color="$error500">
           {`(${percentageChange}%)`}
         </Typography>
       )}