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

package/src/components/Tooltip/Tooltip.tsx

@@ -1,116 +1,59 @@
-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, { useState } from 'react';
 
-const ChildrenWrapper = styled('div', {
-  display: 'inline-block',
-});
+import { TooltipTypography } from './Tooltip.styles';
+import useEventListener from './useEventListener';
 
 export function Tooltip({
   children,
   content,
   side = 'top',
-  color = 'gray',
+  color,
 }: PropsWithChildren<PropTypes>) {
+  const [open, setOpen] = useState<boolean>(false);
+  const [{ clientX, clientY }, setPosition] = useState({
+    clientX: 0,
+    clientY: 0,
+  });
+  useEventListener('mousemove', ({ clientX, clientY }) =>
+    setPosition({ clientX, clientY })
+  );
   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.Portal>
-      </RadixTooltip.Root>
-    </RadixTooltip.Provider>
+    <>
+      <div
+        style={{ display: 'contents' }}
+        onMouseOver={() => setOpen(true)}
+        onMouseOut={() => setOpen(false)}>
+        {children}
+      </div>
+      <RadixTooltip.Provider>
+        <RadixTooltip.Root open={open}>
+          <RadixTooltip.Trigger asChild>
+            <div
+              style={{
+                position: 'fixed',
+                pointerEvents: 'none',
+                top: `${clientY}px`,
+                left: `${clientX}px`,
+              }}
+            />
+          </RadixTooltip.Trigger>
+          <RadixTooltip.Content
+            key={`${clientX}${clientY}`}
+            sideOffset={20}
+            style={{
+              zIndex: 9999999,
+            }}
+            side={side}>
+            <TooltipTypography variant="label" size="medium" color={color}>
+              {content}
+            </TooltipTypography>
+          </RadixTooltip.Content>
+        </RadixTooltip.Root>
+      </RadixTooltip.Provider>
+    </>
   );
 }

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+
+export interface PropTypes {
+  content: ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  color?: 'primary' | 'error' | 'warning' | 'success';
+}

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>
 );

package/src/components/Typography/Typography.styles.tsx

@@ -0,0 +1,262 @@
+import { styled } from '../../theme';
+
+export const TypographyContainer = styled('span', {
+  display: 'inline-block',
+  variants: {
+    variant: {
+      display: {},
+      headline: {},
+      title: {},
+      label: {},
+      body: {},
+    },
+    size: {
+      large: {},
+      medium: {},
+      xmedium: {},
+      small: {},
+      xsmall: {},
+    },
+    align: {
+      center: {
+        textAlign: 'center',
+      },
+      left: {
+        textAlign: 'left',
+      },
+      right: {
+        textAlign: 'right',
+      },
+    },
+    noWrap: {
+      true: {
+        whiteSpace: 'nowrap',
+      },
+    },
+    ml: {
+      2: {
+        marginLeft: '$2',
+      },
+      4: {
+        marginLeft: '$4',
+      },
+      8: {
+        marginLeft: '$8',
+      },
+      12: {
+        marginLeft: '$12',
+      },
+    },
+    mt: {
+      2: {
+        marginTop: '$2',
+      },
+      4: {
+        marginTop: '$4',
+      },
+      8: {
+        marginTop: '$8',
+      },
+      12: {
+        marginTop: '$12',
+      },
+    },
+    mr: {
+      2: {
+        marginRight: '$2',
+      },
+      4: {
+        marginRight: '$4',
+      },
+      8: {
+        marginRight: '$8',
+      },
+      12: {
+        marginRight: '$12',
+      },
+    },
+    mb: {
+      2: {
+        marginBottom: '$2',
+      },
+      4: {
+        marginBottom: '$4',
+      },
+      8: {
+        marginBottom: '$8',
+      },
+      12: {
+        marginBottom: '$12',
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      size: 'large',
+      variant: 'display',
+      css: {
+        fontSize: '$48',
+        fontWeight: '$semiBold',
+        lineHeight: '$64',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'display',
+      css: {
+        fontSize: '$40',
+        fontWeight: '$semiBold',
+        lineHeight: '$52',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'display',
+      css: {
+        fontSize: '$36',
+        fontWeight: '$semiBold',
+        lineHeight: '$44',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'headline',
+      css: {
+        fontSize: '$32',
+        fontWeight: '$semiBold',
+        lineHeight: '$40',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'headline',
+      css: {
+        fontSize: '$38',
+        fontWeight: '$semiBold',
+        lineHeight: '$36',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'headline',
+      css: {
+        fontSize: '$22',
+        fontWeight: '$semiBold',
+        lineHeight: '$30',
+      },
+    },
+    {
+      size: 'xsmall',
+      variant: 'headline',
+      css: {
+        fontSize: '$20',
+        fontWeight: '$semiBold',
+        lineHeight: '$28',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'title',
+      css: {
+        fontSize: '$22',
+        fontWeight: '$medium',
+        lineHeight: '$28',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'title',
+      css: {
+        fontSize: '$18',
+        fontWeight: '$medium',
+        lineHeight: '$26',
+      },
+    },
+    {
+      size: 'xmedium',
+      variant: 'title',
+      css: {
+        fontSize: '$16',
+        fontWeight: '$medium',
+        lineHeight: '$24',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'title',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$medium',
+        lineHeight: '$20',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'label',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$medium',
+        lineHeight: '$20',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'label',
+      css: {
+        fontSize: '$12',
+        fontWeight: '$medium',
+        lineHeight: '$16',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'label',
+      css: {
+        fontSize: '$10',
+        fontWeight: '$medium',
+        lineHeight: '$16',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'body',
+      css: {
+        fontSize: '$16',
+        fontWeight: '$regular',
+        lineHeight: '$24',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'body',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$regular',
+        lineHeight: '$20',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'body',
+      css: {
+        fontSize: '$12',
+        fontWeight: '$regular',
+        lineHeight: '$16',
+      },
+    },
+    {
+      size: 'xsmall',
+      variant: 'body',
+      css: {
+        fontSize: '$10',
+        fontWeight: '$regular',
+        lineHeight: '$12',
+      },
+    },
+  ],
+});