@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,22 @@
+import { useTooltip } from './useTooltip';
+import { TooltipContext } from './useTooltipContext';
+import { ITooltipProps } from './types';
+
+/*
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button />
+ *   </TooltipTrigger>
+ *   <TooltipContent>Tooltip</TooltipContent>
+ * </Tooltip>
+ * */
+const Tooltip = ({ children, ...props }: ITooltipProps) => {
+  const tooltip = useTooltip(props);
+
+  return (
+    <TooltipContext.Provider value={tooltip}>
+      {children}
+    </TooltipContext.Provider>
+  );
+};
+export default Tooltip;

package/src/components/Tooltip/TooltipArrow.tsx

@@ -0,0 +1,26 @@
+import { useTheme } from '@emotion/react';
+import { FloatingArrow } from '@floating-ui/react';
+import { useTooltipContext } from './useTooltipContext';
+import { TooltipArrowProps } from './types';
+
+export const TooltipArrow = ({
+  width = 10,
+  height = 10,
+  fill,
+  ...props
+}: TooltipArrowProps) => {
+  const { context, arrowRef } = useTooltipContext();
+  const theme = useTheme();
+
+  return (
+    <FloatingArrow
+      data-testid="floating-arrow"
+      ref={arrowRef}
+      context={context}
+      width={width}
+      height={height}
+      fill={fill || theme.colors.greyLighter}
+      {...props}
+    />
+  );
+};

package/src/components/Tooltip/TooltipContentBase.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const TooltipContentBase = styled.div`
+  line-height: 0.75rem; /* 12px */
+  background: ${({ theme }) => theme.colors.greyLighter};
+  border-radius: 8px;
+  color: ${({ theme }) => theme.colors.greyDarker};
+  font-weight: 600;
+`;

package/src/components/Tooltip/index.ts

@@ -0,0 +1,5 @@
+export { default } from './Tooltip';
+export { TooltipContentBase } from './TooltipContentBase';
+export { SimpleChartTooltip } from './SimpleChartTooltip';
+export { ProgressChartTooltip } from './ProgressChartTooltip';
+export * as styles from './styles';

package/src/components/Tooltip/styles.ts

@@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+
+export const small = css`
+  font-size: 0.579rem; // 9.26px
+  padding: 6px 12px;
+`;
+
+export const medium = css`
+  font-size: 0.694rem; // 11.11px
+  padding: 8px 16px;
+`;
+
+export const large = css`
+  font-size: 0.833rem; // 13.33px
+  padding: 10px 20px;
+`;

package/src/components/Tooltip/types.ts

@@ -0,0 +1,88 @@
+import {
+  useInteractions,
+  FloatingArrow,
+  Placement,
+  UseFloatingReturn,
+} from '@floating-ui/react';
+import { PointTooltipProps, Point } from '@nivo/line';
+import { IMapIcons } from '@components/Icon/types';
+import { ProgressBarProps } from '@components/ProgressBar/types';
+import { SerializedStyles } from '@emotion/react';
+import { CommonProps } from '@global-types/emotion';
+
+export type TooltipSize = 'small' | 'medium' | 'large';
+
+export interface ITooltipProps extends CommonProps {
+  children: React.ReactNode;
+  placement?: Placement;
+  enableHover?: boolean;
+  enableClick?: boolean;
+  offsetPx?: number;
+  // TooltipContent-related props
+  size?: TooltipSize;
+  hasArrow?: boolean;
+  arrowProps?: TooltipArrowProps;
+  isOpen?: boolean;
+}
+
+export type UseTooltipArgs = Omit<ITooltipProps, 'children'>;
+
+type UseInteractions = ReturnType<typeof useInteractions>;
+
+interface MutableRefObject<T> {
+  current: T;
+}
+
+export type UseTooltip = (props: UseTooltipArgs) => Pick<
+  ITooltipProps,
+  'size' | 'hasArrow' | 'arrowProps'
+> & {
+  arrowRef: MutableRefObject<null>;
+  isOpen: boolean;
+} & UseFloatingReturn &
+  UseInteractions;
+
+export type TooltipContextType =
+  | (UseFloatingReturn &
+      ReturnType<typeof useInteractions> & {
+        isOpen: boolean;
+        arrowRef: React.Ref<SVGSVGElement>;
+      } & Pick<ITooltipProps, 'size' | 'hasArrow' | 'arrowProps'>)
+  | null;
+
+export type TooltipArrowProps = Omit<
+  React.ComponentProps<typeof FloatingArrow>,
+  'context'
+>;
+
+export interface ITooltipContentProps {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface ITooltipContentSizes {
+  small: SerializedStyles;
+  medium: SerializedStyles;
+  large: SerializedStyles;
+}
+
+export interface ITooltipTriggerProps {
+  children: React.ReactNode;
+}
+
+export type SimpleChartTooltipProps =
+  | PointTooltipProps &
+      Pick<ITooltipProps, 'size'> & {
+        renderValue?: (data: Point['data']) => React.ReactNode;
+      };
+
+export interface IProgressChartTooltipProps {
+  caption: string;
+  value: number;
+  valueFormatted: string;
+  iconName?: keyof IMapIcons;
+  barProps?: Partial<Omit<ProgressBarProps, 'currentValue'>>;
+}
+
+export type UseTooltipContext = () => NonNullable<TooltipContextType>;

package/src/components/Tooltip/useTooltip.tsx

@@ -0,0 +1,74 @@
+import { useState, useMemo, useRef } from 'react';
+import {
+  useFloating,
+  offset,
+  flip,
+  shift,
+  arrow,
+  autoUpdate,
+  useHover,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+} from '@floating-ui/react';
+import { UseTooltip } from './types';
+
+export const useTooltip: UseTooltip = ({
+  placement,
+  enableClick = true,
+  enableHover = false,
+  offsetPx = 12,
+  size = 'small',
+  hasArrow = true,
+  arrowProps = {},
+  isOpen: isInitOpen = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(isInitOpen || false);
+  const arrowRef = useRef(null);
+
+  const floatingData = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement,
+    middleware: [
+      offset(offsetPx),
+      flip(),
+      shift(),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const { context } = floatingData;
+
+  const hover = useHover(context, { enabled: enableHover, move: true });
+  const click = useClick(context, { enabled: enableClick });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const interactionsData = useInteractions([hover, click, dismiss, role]);
+
+  return useMemo(
+    () => ({
+      isOpen,
+      arrowRef,
+      size,
+      hasArrow,
+      arrowProps,
+      ...floatingData,
+      ...interactionsData,
+    }),
+    [
+      isOpen,
+      arrowRef,
+      size,
+      hasArrow,
+      arrowProps,
+      floatingData,
+      interactionsData,
+    ],
+  );
+};

package/src/components/Tooltip/useTooltipContext.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+import { TooltipContextType, UseTooltipContext } from './types';
+
+export const TooltipContext = createContext<TooltipContextType>(null);
+
+export const useTooltipContext: UseTooltipContext = () => {
+  const tooltipContext = useContext(TooltipContext);
+
+  if (tooltipContext == null) {
+    throw new Error(
+      'The component should be wrapped with <Tooltip> to have access to the context',
+    );
+  }
+
+  return tooltipContext;
+};

package/src/components/Tooltip/utils.tsx

@@ -0,0 +1,8 @@
+import { ITooltipContentSizes } from './types';
+import { small, medium, large } from './styles';
+
+export const mapSizes: ITooltipContentSizes = {
+  small,
+  medium,
+  large,
+};

package/src/components/TooltipContent/TooltipContent.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import {
+  FloatingPortal,
+  FloatingFocusManager,
+  useMergeRefs,
+} from '@floating-ui/react';
+
+import { TooltipArrow } from '@components/Tooltip/TooltipArrow';
+import { TooltipContentBase } from '@components/Tooltip/TooltipContentBase';
+import { ITooltipContentProps, TooltipSize } from '@components/Tooltip/types';
+import { useTooltipContext } from '@components/Tooltip/useTooltipContext';
+import { mapSizes } from '@components/Tooltip/utils';
+
+const TooltipContent = forwardRef<HTMLDivElement, ITooltipContentProps>(
+  function TooltipContent({ children, className, style }, refProp) {
+    const tooltipCtx = useTooltipContext();
+    const ref = useMergeRefs([tooltipCtx?.refs.setFloating, refProp]);
+
+    return (
+      <FloatingPortal>
+        {tooltipCtx?.isOpen && (
+          <FloatingFocusManager context={tooltipCtx.context} modal={false}>
+            <TooltipContentBase
+              {...tooltipCtx.getFloatingProps({
+                ref,
+                css:
+                  tooltipCtx.size && mapSizes[tooltipCtx.size as TooltipSize],
+                className,
+                style: {
+                  position: tooltipCtx.strategy,
+                  top: tooltipCtx.y ?? 0,
+                  left: tooltipCtx.x ?? 0,
+                  width: 'max-content',
+                  ...style,
+                },
+              })}>
+              {tooltipCtx.hasArrow && (
+                <TooltipArrow {...tooltipCtx.arrowProps} />
+              )}
+              {children}
+            </TooltipContentBase>
+          </FloatingFocusManager>
+        )}
+      </FloatingPortal>
+    );
+  },
+);
+
+export default TooltipContent;

package/src/components/TooltipContent/index.ts

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

package/src/components/TooltipTrigger/TooltipTrigger.tsx

@@ -0,0 +1,21 @@
+import { cloneElement, isValidElement } from 'react';
+
+import { ITooltipTriggerProps } from '@components/Tooltip/types';
+import { useTooltipContext } from '@components/Tooltip/useTooltipContext';
+
+const TooltipTrigger = ({ children }: ITooltipTriggerProps) => {
+  const tooltipCtx = useTooltipContext();
+
+  if (isValidElement(children)) {
+    return cloneElement(
+      children,
+      tooltipCtx?.getReferenceProps({
+        ref: tooltipCtx.refs.setReference,
+      }),
+    );
+  }
+
+  return null;
+};
+
+export default TooltipTrigger;

package/src/components/TooltipTrigger/index.ts

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

package/src/components/Typography/Typography.spec.tsx

@@ -0,0 +1,259 @@
+import { createRef } from 'react';
+import { screen } from '../../../customTest';
+import Typography from './index';
+
+describe('Typography', () => {
+  it('Render Typography h1 with correct font-size and weight', () => {
+    render(<Typography variant="h1">text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 2.488rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="h1" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography h2 with correct font-size and weight', () => {
+    render(<Typography variant="h2">text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 1.188rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="h2" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography h3 with correct font-size and weight', () => {
+    render(<Typography variant="h3">text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 1.438rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="h3" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography h4 with correct font-size and weight', () => {
+    render(<Typography variant="h4">text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 1.44rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="h4" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography h5 with correct font-size and weight', () => {
+    render(<Typography variant="h5">text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 1rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="h5" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography h6 with correct font-size and weight', () => {
+    render(<Typography variant="h6">text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 1rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="h6" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography subtitle with correct font-size and weight', () => {
+    render(<Typography variant="subtitle">text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 0.833rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="subtitle" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography body1 with correct font-size and weight', () => {
+    render(<Typography>text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 0.694rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="body1" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography body2 with correct font-size and weight', () => {
+    render(<Typography variant="body2">text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 0.579rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="body2" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography body3 with correct font-size and weight', () => {
+    render(<Typography variant="body3">text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 0.5rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="body3" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography caption with correct font-size and weight', () => {
+    render(<Typography variant="caption">text regular</Typography>);
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 0.481rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+
+    render(
+      <Typography variant="caption" weight="bold">
+        text bold
+      </Typography>,
+    );
+
+    const textBold = screen.getByText(/text bold/i);
+
+    expect(textBold).toHaveStyle(`font-weight: 700`);
+  });
+
+  it('Render Typography with gutter', () => {
+    render(
+      <Typography variant="h1" gutter>
+        text regular
+      </Typography>,
+    );
+
+    const textRegular = screen.getByText(/text regular/i);
+
+    expect(textRegular).toHaveStyle(`font-size: 2.488rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+    expect(textRegular).toHaveStyle('margin-block-end: 1rem');
+  });
+
+  it('Render Typography with a tag specified in the "as" prop', () => {
+    render(
+      <Typography variant="h1" gutter as="p">
+        text regular
+      </Typography>,
+    );
+
+    const textRegular = screen.getByText(/text regular/i);
+    expect(textRegular.tagName.toLowerCase()).toBe('p');
+
+    expect(textRegular).toHaveStyle(`font-size: 2.488rem`);
+    expect(textRegular).toHaveStyle(`font-weight: 500`);
+    expect(textRegular).toHaveStyle('margin-block-end: 1rem');
+  });
+
+  it('Accepts a ref', () => {
+    const ref = createRef<HTMLElement>();
+
+    render(
+      <Typography variant="h1" weight="bold" ref={ref}>
+        A text
+      </Typography>,
+    );
+
+    expect(ref.current).toBeTruthy();
+    (ref.current as HTMLElement).style.backgroundColor = 'Indigo';
+
+    const h1El = screen.getByRole('heading');
+    expect(h1El).toHaveStyle(`background-color: Indigo`);
+  });
+});

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Typography from './index';
+import { TypographyProps } from './types';
+
+export default {
+  title: 'Components/Typography',
+  component: Typography,
+  argTypes: {
+    color: { control: 'color' },
+    variant: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} as Meta<typeof Typography>;
+
+export const Basic: StoryObj<typeof Typography> = ({
+  weight,
+  gutter,
+  color,
+}: TypographyProps) => {
+  return (
+    <div>
+      <Typography variant="h1" weight={weight} gutter={gutter} color={color}>
+        H1. text variant
+      </Typography>
+      <Typography variant="h2" weight={weight} gutter={gutter} color={color}>
+        H2. text variant
+      </Typography>
+      <Typography variant="h3" weight={weight} gutter={gutter} color={color}>
+        H3. text variant
+      </Typography>
+      <Typography variant="h4" weight={weight} gutter={gutter} color={color}>
+        H4. text variant
+      </Typography>
+      <Typography variant="h5" weight={weight} gutter={gutter} color={color}>
+        H5. text variant
+      </Typography>
+      <Typography variant="h6" weight={weight} gutter={gutter} color={color}>
+        H6. text variant
+      </Typography>
+      <Typography
+        variant="subtitle"
+        weight={weight}
+        gutter={gutter}
+        color={color}>
+        Sub-title. text variant
+      </Typography>
+      <Typography variant="body1" weight={weight} gutter={gutter} color={color}>
+        Body 1. text variant
+      </Typography>
+      <Typography variant="body2" weight={weight} gutter={gutter} color={color}>
+        Body 2. text variant
+      </Typography>
+      <Typography
+        variant="caption"
+        weight={weight}
+        gutter={gutter}
+        color={color}>
+        Caption. text variant
+      </Typography>
+    </div>
+  );
+};
+
+Basic.storyName = 'Typography';