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

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,29 @@
+import type { ListItemProps } from './ListItem.types';
+
+import React from 'react';
+
+import { Typography } from '../Typography';
+
+import { BaseListItem } from './ListItem.styles';
+
+function ListItem(props: ListItemProps) {
+  const { start, title, description, end, onClick, hasDivider, ...restProps } =
+    props;
+
+  return (
+    <BaseListItem hasDivider={hasDivider} onClick={onClick} {...restProps}>
+      {start && <div className="item-start-container">{start}</div>}
+      <div className="item-text-container">
+        {title && <div className="item-text-title">{title}</div>}
+        {description && (
+          <Typography variant="body" size="small" color="neutral800">
+            {description}
+          </Typography>
+        )}
+      </div>
+      {end && <div className="item-end-container">{end}</div>}
+    </BaseListItem>
+  );
+}
+
+export { ListItem };

package/src/components/ListItem/ListItem.types.ts

@@ -0,0 +1,9 @@
+export type ListItemProps = {
+  title?: string | React.ReactElement;
+  description?: string | React.ReactElement;
+  start?: React.ReactNode;
+  end?: React.ReactNode;
+  as?: 'div' | 'li';
+  onClick?: () => void;
+  hasDivider?: boolean;
+};

package/src/components/ListItem/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemProps } from './ListItem.types';
+export { ListItem } from './ListItem';

package/src/components/ListItemButton/ListItemButton.styles.ts

@@ -0,0 +1,50 @@
+import { darkTheme, styled } from '../../theme';
+
+export const BaseListItemButton = styled('button', {
+  transition: 'all 0.35s',
+  border: 0,
+  width: '100%',
+  backgroundColor: 'transparent',
+  fontFamily: 'inherit',
+  '&:focus-visible': {
+    borderRadius: '$xs',
+
+    outline: 0,
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:hover': {
+    $$color: '$colors$info100',
+    borderRadius: '$xs',
+
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+    cursor: 'pointer',
+  },
+  '&:active': {
+    transform: 'scale(0.99)',
+  },
+  variants: {
+    hasDivider: {
+      true: {
+        borderBottom: '1px solid',
+        $$color: '$colors$neutral300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral400',
+        },
+        borderColor: '$$color',
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0,
+      },
+    },
+    selected: {
+      true: { outline: '1px solid $secondary500' },
+      false: { outline: 0 },
+    },
+  },
+});

package/src/components/ListItemButton/ListItemButton.tsx

@@ -0,0 +1,27 @@
+import type { ListItemButtonProps } from './ListItemButton.types';
+
+import React from 'react';
+
+import { ListItem } from '../ListItem/ListItem';
+
+import { BaseListItemButton } from './ListItemButton.styles';
+
+function ListItemButton(props: ListItemButtonProps) {
+  const { onClick, id, style, hasDivider, selected, ...restProps } = props;
+  const onClickWithKey = () => {
+    if (onClick) {
+      onClick(id);
+    }
+  };
+  return (
+    <BaseListItemButton
+      hasDivider={hasDivider}
+      selected={selected}
+      onClick={onClickWithKey}
+      style={style}>
+      <ListItem {...restProps} />
+    </BaseListItemButton>
+  );
+}
+
+export { ListItemButton };

package/src/components/ListItemButton/ListItemButton.types.ts

@@ -0,0 +1,10 @@
+import type { ListItemProps } from '../ListItem';
+import type { CSSProperties } from '@stitches/react';
+
+export type ListItemButtonProps = Omit<ListItemProps, 'onClick'> & {
+  id: string;
+  onClick: (id: string) => void;
+  style?: CSSProperties;
+  hasDivider?: boolean;
+  selected?: boolean;
+};

package/src/components/ListItemButton/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemButtonProps } from './ListItemButton.types';
+export { ListItemButton } from './ListItemButton';

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,35 @@
+import type { SvgIconProps } from '../SvgIcon';
+
+import React from 'react';
+
+import { SvgWithColor } from '../SvgIcon/SvgIcon.style';
+
+export function Logo(props: SvgIconProps) {
+  const { size = '1em', color } = props;
+  const commonProps = {
+    width: size,
+    height: size,
+    color: color,
+    className: '_icon',
+  };
+  return (
+    <SvgWithColor
+      {...commonProps}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 18 18"
+      className="c-lekKBq">
+      <g fill="currentColor">
+        <path d="m7.641 6.333.89.492 6.982-2.896a8.471 8.471 0 0 0-.825-.939c-.05.028-.09.044-.09.044L7.315 6.097c.083.084.19.164.33.236H7.64ZM3.134 14.967l7.067-2.947-1.315-.743-5.393 2.291-1.366.578c.251.325.526.63.82.914l.187-.095v.002Z" />
+        <path d="m16.253 5.1-1.287.498c-1.03.377-5.082 1.975-5.082 1.975.662.365 1.378.759 2.008 1.102 1.612.88.592 2.812.379 3.18l-.01.014a5.873 5.873 0 0 0-.027.046s.151-1.443-.866-1.977a648.55 648.55 0 0 1-4.365-2.313c-.466-.248-.804-.7-.868-1.223-.048-.392.051-.843.521-1.238.274-.254.569-.39.569-.39l5.253-2.156s.033-.013.081-.038l1.093-.454A8.421 8.421 0 0 0 1.447 13.12l2.032-.886 4.046-1.697c-.698-.383-1.342-.739-1.648-.903-.152-.081-.344-.21-.496-.292-.82-.433-1.357-1.656-.113-3.107 0 0-.13 1.377.641 1.845.734.446 3.582 1.905 4.428 2.358.216.116.416.264.576.453.329.39.454.87.316 1.38-.006.025-.015.049-.023.073l-.016.048a1.018 1.018 0 0 1-.037.095c-.29.7-1.062.91-1.062.91L10 13.43l-4.917 2.018-1.084.476A8.42 8.42 0 0 0 16.253 5.099v.002Z" />
+      </g>
+      <path
+        fill="currentColor"
+        d="m7.53 10.53 1.36.74-.68.29-1.426-.717.745-.314ZM10.09 13.392s1.13-.8.108-1.378l-.643.268s1.072.287.535 1.11ZM9.889 7.567l-1.361-.74.695-.29 1.437.731-.771.3ZM7.41 4.705s-1.131.801-.108 1.378l.642-.268s-1.072-.287-.535-1.11Z"
+        opacity={0.4}
+        style={{
+          mixBlendMode: 'multiply',
+        }}
+      />
+    </SvgWithColor>
+  );
+}

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import React from 'react';
+
+import { Typography } from '../Typography';
+
+import { CollapsibleMessageBox } from './CollapsibleMessageBox';
+
+const meta: Meta<typeof CollapsibleMessageBox> = {
+  component: CollapsibleMessageBox,
+};
+
+export default meta;
+type Story = StoryObj<typeof CollapsibleMessageBox>;
+
+export const Main: Story = {
+  args: {
+    status: 'warning',
+    title: 'Title',
+    description: 'This is a test text',
+    children: (
+      <Typography variant="body" size="medium">
+        test
+      </Typography>
+    ),
+  },
+};

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

@@ -0,0 +1,33 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+
+import { darkTheme, styled } from '../../theme';
+
+export const Trigger = styled(Collapsible.Trigger, {
+  padding: '$15',
+  paddingBottom: '$5',
+  borderRadius: '$xm',
+  cursor: 'pointer',
+  $$backgroundColor: '$colors$neutral200',
+  [`.${darkTheme} &`]: {
+    $$backgroundColor: '$colors$neutral500',
+  },
+  backgroundColor: '$$backgroundColor',
+  textAlign: 'center',
+  border: 0,
+  width: '100%',
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 0,
+  },
+});

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,60 @@
+import { darkTheme, 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: {
+        $$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';
+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: 'transparent',
+  zIndex: 10,
+  borderRadius: '$primary',
+  display: 'flex',
+  overflow: 'hidden',
+  transition: 'background .35s',
+
+  variants: {
+    anchor: {
+      bottom: {
+        justifyContent: 'end',
+        alignItems: 'end',
+        bottom: '0',
+      },
+      center: {
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+    },
+    active: {
+      true: {
+        backgroundColor: 'color-mix(in srgb, $neutral500 70%, transparent)',
+      },
+    },
+  },
+});
+
+export const ModalContainer = styled('div', {
+  backgroundColor: '$background',
+  width: '100%',
+  borderRadius: '$primary',
+  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',
+  },
+});