@rango-dev/ui 0.0.0-experimental-936229e8-20251208

package/src/components/MessageBox/CollapsibleMessageBox.tsx

@@ -0,0 +1,38 @@
+import type { PropTypes } from './CollapsibleMessageBox.types.js';
+import type { PropsWithChildren } from 'react';
+
+import * as Collapsible from '@radix-ui/react-collapsible';
+import React, { useState } from 'react';
+
+import { ChevronDownIcon, ChevronUpIcon } from '../../icons/index.js';
+import { CollapsibleContent } from '../common/styles.js';
+import { Divider } from '../Divider/index.js';
+
+import { Trigger } from './CollapsibleMessageBox.styles.js';
+
+import { MessageBox } from './index.js';
+
+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.js';
+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,45 @@
+import type { PropTypes } from './MessageBox.types.js';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Divider } from '../Divider/index.js';
+import { Typography } from '../Typography/index.js';
+
+import { Container, Description, IconHighlight } from './MessageBox.styles.js';
+import StatusIcon from './StatusIcon.js';
+
+export function MessageBox(props: PropsWithChildren<PropTypes>) {
+  const { type, title, description, children, icon, id } = props;
+
+  return (
+    <Container id={id}>
+      <IconHighlight type={type} className="_message_box_icon_container">
+        {icon || <StatusIcon type={type} />}
+      </IconHighlight>
+      <Divider size={4} />
+      <Typography
+        color={type === 'loading' ? 'info500' : `${type}500`}
+        variant="title"
+        size="medium"
+        className="_message_box_title">
+        {title}
+      </Typography>
+      <Divider size={4} />
+      <Description>
+        {typeof description === 'string' ? (
+          <Typography
+            color="neutral700"
+            variant="body"
+            size="medium"
+            className="_message_box_description">
+            {description}
+          </Typography>
+        ) : (
+          description
+        )}
+      </Description>
+      {children}
+    </Container>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { darkTheme, styled } from '../../theme.js';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+});
+
+export const Description = styled('div', {
+  width: '100%',
+  textAlign: 'center',
+});
+
+export const IconHighlight = styled('div', {
+  borderRadius: '50%',
+  width: '$45',
+  height: '$45',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    type: {
+      success: {
+        $$color: '$colors$success300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$success600',
+        },
+        backgroundColor: '$$color',
+      },
+      warning: {
+        $$color: '$colors$warning300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$warning600',
+        },
+        backgroundColor: '$$color',
+      },
+      error: {
+        $$color: '$colors$error300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$error600',
+        },
+        backgroundColor: '$$color',
+      },
+      info: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info600',
+        },
+        backgroundColor: '$$color',
+      },
+      loading: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info600',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+});

package/src/components/MessageBox/MessageBox.tsx

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

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

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

package/src/components/MessageBox/StatusIcon.tsx

@@ -0,0 +1,28 @@
+import type { PropTypes } from './MessageBox.types.js';
+
+import React from 'react';
+
+import {
+  CompleteIcon,
+  ErrorIcon,
+  InfoErrorIcon,
+  WarningIcon,
+} from '../../icons/index.js';
+import { Spinner } from '../Spinner/index.js';
+
+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,2 @@
+export * from './MessageBox.js';
+export type { MessageType } from './MessageBox.types.js';

package/src/components/Modal/Modal.helpers.ts

@@ -0,0 +1,4 @@
+// https://github.com/reactjs/react-transition-group/blob/master/src/CSSTransition.js#L48-L55
+export function forceReflow(node: HTMLElement) {
+  return node.scrollTop;
+}

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

@@ -0,0 +1,128 @@
+import { styled } from '../../theme.js';
+import { IconButton } from '../IconButton/index.js';
+
+export const BackDrop = styled('div', {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  right: '0',
+  bottom: '0',
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'transparent',
+  zIndex: 10,
+  borderRadius: '$primary',
+  overflow: 'hidden',
+  transition: 'background .35s',
+
+  variants: {
+    active: {
+      true: {
+        backgroundColor: 'color-mix(in srgb, $neutral500 70%, transparent)',
+      },
+    },
+  },
+});
+
+export const ModalContainer = styled('div', {
+  backgroundColor: '$background',
+  width: '100%',
+  maxHeight: '100%',
+  borderRadius: '$primary',
+  display: 'flex',
+  flexDirection: 'column',
+  zIndex: 9999999,
+  position: 'absolute',
+  transition:
+    'transform .45s ease-in-out, top .45s ease-in-out, left .45s ease-in-out',
+
+  variants: {
+    anchor: {
+      right: {
+        left: '100%',
+      },
+      center: {
+        top: '100%',
+        left: '50%',
+        transform: 'translateX(-50%)',
+      },
+      bottom: {
+        top: '100%',
+      },
+    },
+    active: {
+      true: {},
+    },
+  },
+  compoundVariants: [
+    {
+      active: true,
+      anchor: 'right',
+      css: {
+        transform: 'translateX(-100%)',
+      },
+    },
+    {
+      active: true,
+      anchor: 'center',
+      css: {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      },
+    },
+    {
+      active: true,
+      anchor: 'bottom',
+      css: {
+        transform: 'translateY(-100%)',
+      },
+    },
+  ],
+});
+
+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', {
+  padding: '0 $20 $10',
+  '& .footer__logo': {
+    '&.logo__show': {
+      opacity: 1,
+    },
+    '&.logo__hidden': {
+      visibility: 'hidden',
+    },
+  },
+});

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,163 @@
+import type { ModalPropTypes } from './Modal.types.js';
+import type { PropsWithChildren } from 'react';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { CloseIcon } from '../../icons/index.js';
+import { BottomLogo } from '../BottomLogo/index.js';
+import { Divider } from '../Divider/index.js';
+import { IconButton } from '../IconButton/index.js';
+import { Typography } from '../Typography/index.js';
+
+import { forceReflow } from './Modal.helpers.js';
+import {
+  BackDrop,
+  Content,
+  Flex,
+  Footer,
+  ModalContainer,
+  ModalHeader,
+} from './Modal.styles.js';
+
+export function Modal(props: PropsWithChildren<ModalPropTypes>) {
+  const {
+    title,
+    open,
+    onClose,
+    onExit,
+    styles,
+    anchor = 'bottom',
+    container = document.body,
+    prefix,
+    header,
+    dismissible = true,
+    id,
+    children,
+    suffix,
+    footer,
+    hasWatermark = true,
+    hasCloseIcon = true,
+  } = props;
+
+  const [status, setStatus] = useState<
+    'unmounted' | 'mounted' | 'activated' | 'deactivated'
+  >('unmounted');
+  const active = status === 'activated';
+  const isMount =
+    status == 'mounted' || status === 'activated' || status === 'deactivated';
+  const modalContainerRef = useRef<HTMLElement | null>(null);
+  const exitCallbackRef = useRef<ModalPropTypes['onExit']>();
+
+  const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+
+    if (event.target === event.currentTarget && dismissible) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    exitCallbackRef.current = onExit;
+  }, [onExit]);
+
+  useEffect(() => {
+    if (exitCallbackRef.current) {
+      modalContainerRef.current?.addEventListener(
+        'transitionend',
+        exitCallbackRef.current
+      );
+    }
+
+    if (!open) {
+      if (status === 'activated') {
+        setStatus('deactivated');
+        modalContainerRef.current?.addEventListener('transitionend', () => {
+          setStatus('unmounted');
+          container.style.removeProperty('overflow');
+        });
+      } else {
+        setStatus('unmounted');
+      }
+    } else {
+      setStatus('mounted');
+      container.style.overflow = 'hidden';
+    }
+
+    return () => {
+      if (exitCallbackRef.current) {
+        modalContainerRef.current?.removeEventListener(
+          'transitionend',
+          exitCallbackRef.current
+        );
+      }
+    };
+  }, [open]);
+
+  useEffect(() => {
+    return () => {
+      //container might be null
+      container?.style.removeProperty('overflow');
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!!container && isMount) {
+      if (modalContainerRef.current) {
+        forceReflow(modalContainerRef.current);
+      }
+      setStatus('activated');
+    }
+  }, [isMount, container]);
+
+  if (status === 'unmounted' || !container) {
+    return null;
+  }
+
+  return createPortal(
+    <BackDrop active={active} onClick={handleBackDropClick} css={styles?.root}>
+      <ModalContainer
+        id={id}
+        active={active}
+        css={styles?.container}
+        anchor={anchor}
+        ref={(ref) => (modalContainerRef.current = ref)}>
+        {header ?? (
+          <ModalHeader noTitle={!title && dismissible && !prefix}>
+            {prefix}
+            {title && (
+              <Typography variant="title" size="small">
+                {title}
+              </Typography>
+            )}
+            <Flex>
+              {suffix}
+              {dismissible && hasCloseIcon && (
+                <IconButton
+                  id={`${id}-close-btn`}
+                  onClick={onClose}
+                  variant="ghost">
+                  <CloseIcon color="gray" size={14} />
+                </IconButton>
+              )}
+            </Flex>
+          </ModalHeader>
+        )}
+        <Content css={styles?.content}>{children}</Content>
+
+        <Footer css={styles?.footer}>
+          {footer && <div className="footer__content">{footer}</div>}
+
+          <div
+            className={`footer__logo ${
+              hasWatermark ? 'logo__show' : 'logo__hidden'
+            }`}>
+            <Divider size={12} />
+            <BottomLogo />
+          </div>
+        </Footer>
+      </ModalContainer>
+    </BackDrop>,
+    container
+  );
+}

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

@@ -0,0 +1,29 @@
+import type { ModalContainer } from './Modal.styles.js';
+import type { config } from '../../theme.js';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof ModalContainer>;
+type BaseAnchor = Exclude<BaseProps['anchor'], object>;
+
+export interface ModalPropTypes {
+  title?: string;
+  open: boolean;
+  onClose: () => void;
+  onExit?: () => void;
+  anchor?: BaseAnchor;
+  id?: string;
+  dismissible?: boolean;
+  header?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  container?: HTMLElement;
+  styles?: {
+    root?: Stitches.CSS<typeof config>;
+    container?: Stitches.CSS<typeof config>;
+    content?: Stitches.CSS<typeof config>;
+    footer?: Stitches.CSS<typeof config>;
+  };
+  footer?: React.ReactNode;
+  hasWatermark?: boolean;
+  hasCloseIcon?: boolean;
+}

package/src/components/Modal/index.ts

@@ -0,0 +1,3 @@
+export { Modal } from './Modal.js';
+export { ModalHeader } from './Modal.styles.js';
+export type { ModalPropTypes } from './Modal.types.js';

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

@@ -0,0 +1,15 @@
+import { darkTheme, styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  textAlign: 'center',
+  '& .not-found-description': {
+    color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral900',
+    },
+  },
+});

package/src/components/NotFound/NotFound.tsx

@@ -0,0 +1,29 @@
+import type { NotFoundPropTypes } from './NotFound.types.js';
+
+import React from 'react';
+
+import { SearchIcon } from '../../icons/index.js';
+import { Divider } from '../Divider/index.js';
+import { Typography } from '../Typography/index.js';
+
+import { Container } from './NotFound.styles.js';
+
+export function NotFound(props: NotFoundPropTypes) {
+  const { icon, titleColor, hasIcon = true } = props;
+  return (
+    <Container>
+      {hasIcon && (icon || <SearchIcon color="secondary" size={26} />)}
+      <Divider size={4} />
+      <Typography variant="title" size="medium" color={titleColor}>
+        {props.title}
+      </Typography>
+      <Divider size={10} />
+      <Typography
+        className="not-found-description"
+        variant="body"
+        size="medium">
+        {props.description}
+      </Typography>
+    </Container>
+  );
+}

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+
+export type NotFoundPropTypes = {
+  title: string;
+  description?: string;
+  titleColor?: string;
+  icon?: ReactNode;
+  hasIcon?: boolean;
+};

package/src/components/NotFound/index.tsx

@@ -0,0 +1,2 @@
+export { NotFound } from './NotFound.js';
+export type { NotFoundPropTypes } from './NotFound.types.js';

package/src/components/Popover/Popover.styles.ts

@@ -0,0 +1,22 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+
+import { darkTheme, styled } from '../../theme.js';
+
+export const PopoverContainer = styled(RadixPopover.Content, {
+  borderRadius: '$sm',
+  filter: 'drop-shadow(0px 5px 20px rgba(130, 130, 130, 0.20))',
+  backgroundColor: '$neutral100',
+  zIndex: 10,
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral300',
+  },
+});
+
+export const PopoverArrow = styled(RadixPopover.Arrow, {
+  fill: '$neutral100',
+  [`.${darkTheme} &`]: {
+    fill: '$neutral300',
+  },
+  width: '$16',
+  height: '$8',
+});

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,61 @@
+import type { ContentType, PopoverPropTypes, Ref } from './Popover.types.js';
+import type { PropsWithChildren } from 'react';
+
+import * as RadixPopover from '@radix-ui/react-popover';
+import React from 'react';
+
+import { PopoverArrow, PopoverContainer } from './Popover.styles.js';
+
+const DEFAULT_SIDE_OFFSET = 0;
+const DEFAULT_ALIGN_OFFSET = 0;
+
+export const PopoverContentComponent = (
+  props: PropsWithChildren<ContentType>,
+  forwardedRef: Ref
+) => {
+  const { container, children, styles, hasArrow = true, ...rest } = props;
+  return (
+    <RadixPopover.Portal container={container}>
+      <PopoverContainer {...rest} ref={forwardedRef}>
+        {children}
+        {hasArrow && <PopoverArrow css={styles?.arrowStyles} />}
+      </PopoverContainer>
+    </RadixPopover.Portal>
+  );
+};
+
+const PopoverContent = React.forwardRef(PopoverContentComponent);
+PopoverContent.displayName = 'PopoverContent';
+
+export function Popover(props: PropsWithChildren<PopoverPropTypes>) {
+  const {
+    children,
+    content,
+    side = 'bottom',
+    sideOffset = DEFAULT_SIDE_OFFSET,
+    alignOffset = DEFAULT_ALIGN_OFFSET,
+    align = 'center',
+    collisionBoundary = [],
+    collisionPadding = 0,
+    container = document.body,
+    onOpenChange,
+    open,
+    ...rest
+  } = props;
+  return (
+    <RadixPopover.Root onOpenChange={onOpenChange} open={open}>
+      <RadixPopover.Trigger asChild>{children}</RadixPopover.Trigger>
+      <PopoverContent
+        align={align}
+        alignOffset={alignOffset}
+        collisionBoundary={collisionBoundary}
+        collisionPadding={collisionPadding}
+        side={side}
+        sideOffset={sideOffset}
+        container={container}
+        {...rest}>
+        {content}
+      </PopoverContent>
+    </RadixPopover.Root>
+  );
+}