@rango-dev/ui 0.15.1-next.1 → 0.15.1-next.10

package/src/components/TokenPreview/TokenPreview.tsx

@@ -1,14 +1,12 @@
-import React, { ReactNode } from 'react';
-import {
-  Button,
-  InfoCircleIcon,
-  styled,
-  Typography,
-  Divider,
-  Image,
-} from '../..';
+import type { LoadingStatus } from '../../types/meta';
+import type { ReactNode } from 'react';
+
 import { i18n } from '@lingui/core';
-import { LoadingStatus } from '../../types/meta';
+import React from 'react';
+
+import { Button, Divider, Image, Typography } from '../..';
+import { styled } from '../../theme';
+import { InfoCircleIcon } from '../Icon';
 
 const Box = styled('div', {
   display: 'flex',
@@ -19,16 +17,16 @@ const Box = styled('div', {
 
 const Container = styled('div', {
   boxSizing: 'border-box',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   padding: '$8 $16 $16 $16',
 
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutral100',
+        backgroundColor: '$background',
       },
       outlined: {
-        border: '1px solid $neutral100',
+        border: '1px solid $background',
       },
     },
   },
@@ -68,14 +66,14 @@ const Container = styled('div', {
 const ImagePlaceholder = styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutral100',
+  backgroundColor: '$background',
   borderRadius: '99999px',
 });
 
 const OutputContainer = styled('div', {
   windth: '100%',
   height: '$48',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
@@ -119,14 +117,15 @@ export function TokenPreview(props: PropTypes) {
     <Box>
       <Container type={'outlined'}>
         <div className="head">
-          <Typography variant="body2" color="neutral800">
+          <Typography variant="body" size="small" color="neutral800">
             {props.label}
           </Typography>
           <div>
             {percentageChange}
             {props.usdValue && (
               <Typography
-                variant="caption"
+                variant="body"
+                size="xsmall"
                 color="neutral600"
                 className="usd-value">{`$${props.usdValue}`}</Typography>
             )}
@@ -145,7 +144,6 @@ export function TokenPreview(props: PropTypes) {
               )
             }
             suffix={ItemSuffix}
-            align="start"
             size="large">
             {loadingStatus === 'success' && chain
               ? chain.displayName
@@ -164,8 +162,7 @@ export function TokenPreview(props: PropTypes) {
               )
             }
             suffix={ItemSuffix}
-            size="large"
-            align="start">
+            size="large">
             {loadingStatus === 'success' && token
               ? token.symbol
               : i18n.t('Token')}
@@ -173,7 +170,9 @@ export function TokenPreview(props: PropTypes) {
           <Divider size={12} direction="horizontal" />
           <div className="amount">
             <OutputContainer>
-              <Typography variant="h4">{props.amount}</Typography>
+              <Typography variant="title" size="medium">
+                {props.amount}
+              </Typography>
             </OutputContainer>
           </div>
         </div>

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,16 +1,18 @@
+import type { PropTypes } from './Tooltip.types';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
 
-import { Tooltip, PropTypes } from './Tooltip';
 import { AddWalletIcon } from '../Icon';
 
+import { Tooltip } from './Tooltip';
+
 export default {
   title: 'Components/Tooltip',
   component: Tooltip,
   args: {
     content: 'I am a tooltip',
     side: 'top',
-    color: 'gray',
   },
   argTypes: {
     content: {
@@ -27,29 +29,13 @@ export default {
     color: {
       name: 'color',
       control: { type: 'select' },
-      options: [
-        'primary',
-        'error',
-        'warning',
-        'success',
-        'black',
-        'white',
-        'gray',
-      ],
-      defaultValue: 'gray',
+      options: ['primary', 'error', 'warning', 'success'],
     },
   },
 } as Meta<typeof Tooltip>;
 
 export const Main = (props: PropTypes) => (
-  <div
-    style={{
-      height: 300,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    }}
-  >
+  <div>
     <Tooltip {...props}>
       <AddWalletIcon size={24} />
     </Tooltip>

package/src/components/Tooltip/Tooltip.styles.ts

@@ -0,0 +1,9 @@
+import { styled } from '../../theme';
+import { Typography } from '../Typography';
+
+export const TooltipTypography = styled(Typography, {
+  borderRadius: '$md',
+  padding: '$5 $10',
+  boxShadow: '5px 5px 10px 0px rgba(0, 0, 0, 0.10)',
+  backgroundColor: '$neutral100',
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -1,114 +1,32 @@
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { styled } from '../../theme';
-import React, { PropsWithChildren } from 'react';
-
-export interface PropTypes {
-  content: string;
-  side?: 'top' | 'right' | 'bottom' | 'left';
-  color?:
-    | 'primary'
-    | 'error'
-    | 'warning'
-    | 'success'
-    | 'gray'
-    | 'white'
-    | 'black';
-}
-const TooltipTrigger = styled(RadixTooltip.Trigger, {
-  border: 0,
-  padding: 0,
+import type { PropTypes } from './Tooltip.types';
+import type { PropsWithChildren } from 'react';
 
-  backgroundColor: 'transparent',
-});
-const TooltipContent = styled(RadixTooltip.Content, {
-  borderRadius: '$5',
-  padding: '$4 $8',
-  fontSize: '$14',
-  animationDuration: '400ms',
-  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-  willChange: 'transform, opacity',
-  variants: {
-    color: {
-      primary: {
-        backgroundColor: '$primary',
-        color: '$white',
-      },
-      error: {
-        backgroundColor: '$error',
-        color: '$white',
-      },
-      warning: {
-        backgroundColor: '$warning',
-        color: '$white',
-      },
-      success: {
-        backgroundColor: '$success',
-        color: '$white',
-      },
-      gray: {
-        backgroundColor: '$neutral100',
-        color: '$black',
-      },
-      black: {
-        backgroundColor: '$black',
-        color: '$white',
-      },
-      white: {
-        backgroundColor: '$white',
-        color: '$black',
-      },
-    },
-  },
-});
-const TooltipArrow = styled(RadixTooltip.Arrow, {
-  variants: {
-    color: {
-      primary: {
-        fill: '$primary',
-      },
-      error: {
-        fill: '$error',
-      },
-      warning: {
-        fill: '$warning',
-      },
-      success: {
-        fill: '$success',
-      },
-      gray: {
-        fill: '$neutral100',
-      },
-      black: {
-        fill: '$black',
-      },
-      white: {
-        fill: '$white',
-      },
-    },
-  },
-});
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import React from 'react';
 
-const ChildrenWrapper = styled('div', {
-  display: 'inline-block',
-});
+import { TooltipTypography } from './Tooltip.styles';
 
-export function Tooltip({
-  children,
-  content,
-  side = 'top',
-  color = 'gray',
-}: PropsWithChildren<PropTypes>) {
+export function Tooltip(props: PropsWithChildren<PropTypes>) {
+  const {
+    children,
+    content,
+    color,
+    sideOffset,
+    container,
+    side = 'top',
+  } = props;
   return (
     <RadixTooltip.Provider>
       <RadixTooltip.Root>
-        <TooltipTrigger asChild>
-          <ChildrenWrapper>{children}</ChildrenWrapper>
-        </TooltipTrigger>
-        <RadixTooltip.Portal>
-          <TooltipContent color={color} side={side} sideOffset={5}>
-            {content}
-            <TooltipArrow color={color} />
-          </TooltipContent>
+        <RadixTooltip.Trigger asChild>
+          <div>{children}</div>
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Portal container={container}>
+          <RadixTooltip.Content side={side} sideOffset={sideOffset}>
+            <TooltipTypography variant="label" size="medium" color={color}>
+              {content}
+            </TooltipTypography>
+          </RadixTooltip.Content>
         </RadixTooltip.Portal>
       </RadixTooltip.Root>
     </RadixTooltip.Provider>

package/src/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,12 @@
+import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type { ComponentProps, ReactNode } from 'react';
+
+type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
+
+export interface PropTypes {
+  content: ReactNode;
+  side?: RadixTooltipContentProps['side'];
+  color?: 'primary' | 'error' | 'warning' | 'success';
+  sideOffset?: RadixTooltipContentProps['sideOffset'];
+  container?: HTMLElement;
+}

package/src/components/Tooltip/useEventListener.ts

@@ -0,0 +1,54 @@
+import { RefObject, useEffect, useRef } from 'react';
+
+function useEventListener<K extends keyof WindowEventMap>(
+  eventName: K,
+  handler: (event: WindowEventMap[K]) => void
+): void;
+function useEventListener<
+  K extends keyof HTMLElementEventMap,
+  T extends HTMLElement = HTMLDivElement
+>(
+  eventName: K,
+  handler: (event: HTMLElementEventMap[K]) => void,
+  element: RefObject<T>
+): void;
+
+function useEventListener<
+  KW extends keyof WindowEventMap,
+  KH extends keyof HTMLElementEventMap,
+  T extends HTMLElement | void = void
+>(
+  eventName: KW | KH,
+  handler: (
+    event: WindowEventMap[KW] | HTMLElementEventMap[KH] | Event
+  ) => void,
+  element?: RefObject<T>
+) {
+  const savedHandler = useRef<typeof handler>();
+
+  useEffect(() => {
+    // Define the listening target
+    const targetElement: T | Window = element?.current || window;
+    if (!(targetElement && targetElement.addEventListener)) return;
+
+    // Update saved handler if necessary
+    if (savedHandler.current !== handler) {
+      savedHandler.current = handler;
+    }
+
+    // Create event listener that calls handler function stored in ref
+    const eventListener: typeof handler = (event) => {
+      if (savedHandler?.current) {
+        savedHandler.current(event);
+      }
+    };
+
+    targetElement.addEventListener(eventName, eventListener);
+
+    return () => {
+      targetElement.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element, handler]);
+}
+
+export default useEventListener;

package/src/components/Typography/Typography.stories.tsx

@@ -1,7 +1,9 @@
+import type { PropTypes } from './Typography.types';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
 
-import { Typography, PropTypes } from './Typography';
+import { Typography } from './Typography';
 
 export default {
   title: 'Components/Typography',
@@ -34,39 +36,90 @@ export default {
       control: { type: 'boolean' },
     },
   },
-} as Meta<typeof Typography>;
+} satisfies Meta<typeof Typography>;
 
 export const Main = (props: PropTypes) => (
   <div>
-    <Typography {...props} variant="h1">
-      Heading 1
-    </Typography>
-    <Typography {...props} variant="h2">
-      Heading 2
-    </Typography>
-    <Typography {...props} variant="h3">
-      Heading 3
-    </Typography>
-    <Typography {...props} variant="h4">
-      Heading 4
-    </Typography>
-    <Typography {...props} variant="h5">
-      Heading 5
-    </Typography>
-    <Typography {...props} variant="h6">
-      Heading 6
-    </Typography>
-    <Typography {...props} variant="body1">
-      Body 1
-    </Typography>
-    <Typography {...props} variant="body2">
-      Body 2
-    </Typography>
-    <Typography {...props} variant="body3">
-      Body 3
-    </Typography>
-    <Typography {...props} variant="caption">
-      Caption
-    </Typography>
+    <div>
+      <Typography {...props} variant="display" size="large">
+        Display Large
+      </Typography>
+      {', '}
+      <Typography {...props} variant="display" size="medium">
+        Display Medium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="display" size="small">
+        Display Small
+      </Typography>
+    </div>
+
+    <div>
+      <Typography {...props} variant="headline" size="large">
+        Headline Large
+      </Typography>
+      {', '}
+      <Typography {...props} variant="headline" size="medium">
+        Headline Medium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="headline" size="small">
+        Headline Small
+      </Typography>
+      {', '}
+      <Typography {...props} variant="headline" size="xsmall">
+        Headline Xsmall
+      </Typography>
+    </div>
+
+    <div>
+      <Typography {...props} variant="title" size="large">
+        Title Large
+      </Typography>
+      {', '}
+      <Typography {...props} variant="title" size="medium">
+        Title Medium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="title" size="xmedium">
+        Title Xmedium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="title" size="small">
+        Title Small
+      </Typography>
+    </div>
+
+    <div>
+      <Typography {...props} variant="label" size="large">
+        Label Large
+      </Typography>
+      {', '}
+      <Typography {...props} variant="label" size="medium">
+        Label Medium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="label" size="small">
+        Label Small
+      </Typography>
+    </div>
+
+    <div>
+      <Typography {...props} variant="body" size="large">
+        Body Large
+      </Typography>
+      {', '}
+      <Typography {...props} variant="body" size="medium">
+        Body Medium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="body" size="small">
+        Body Small
+      </Typography>
+      {', '}
+      <Typography {...props} variant="body" size="xsmall">
+        Body Xsmall
+      </Typography>
+    </div>
   </div>
 );