@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FieldValues, useForm } from 'react-hook-form';
+
+import Textarea from '@components/Textarea';
+
+type Args = Parameters<typeof Textarea>[0];
+
+export default {
+  title: 'Components/Textarea',
+  component: Textarea,
+  argTypes: {
+    validationSchema: {
+      control: {
+        disable: true,
+      },
+    },
+    register: {
+      control: {
+        disable: true,
+      },
+    },
+    setCountChar: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} as Meta<typeof Textarea>;
+
+export const Basic: StoryObj<typeof Textarea> = (args: Args) => {
+  const { register } = useForm<FieldValues>();
+
+  return <Textarea {...args} register={register} />;
+};
+
+Basic.args = {
+  placeholder: 'Textarea',
+  name: 'textarea',
+  validationSchema: {
+    required: 'Required',
+  },
+};
+Basic.storyName = 'Textarea';
+
+export const Focused: StoryObj<typeof Textarea> = (args: Args) => {
+  const { register } = useForm<FieldValues>();
+
+  return <Textarea {...args} register={register} />;
+};
+Focused.args = {
+  ...Basic.args,
+};
+
+Focused.parameters = {
+  pseudo: {
+    focus: true,
+  },
+};

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,35 @@
+import { callAll } from '@ssa-ui-kit/utils';
+
+import { TextareaProps } from './types';
+import { TextareaBase } from './TextareaBase';
+
+const Textarea = ({
+  name,
+  placeholder,
+  register,
+  validationSchema,
+  disabled = false,
+  rows = 10,
+  setCountChar,
+  maxLength,
+}: TextareaProps) => {
+  if (!register) {
+    throw new Error('Input component must be used within a Form component');
+  }
+
+  const { onChange, ...options } = register(name, validationSchema);
+
+  return (
+    <TextareaBase
+      id={`formElement-${name}`}
+      placeholder={placeholder}
+      disabled={disabled}
+      rows={rows}
+      maxLength={maxLength}
+      onChange={callAll(setCountChar, onChange)}
+      {...options}
+    />
+  );
+};
+
+export default Textarea;

package/src/components/Textarea/TextareaBase.tsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+export const TextareaBase = styled.textarea`
+  flex: 1 100%;
+
+  background: ${({ theme }) => theme.colors.white};
+  border-radius: 12px;
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+
+  border: ${({ theme }) => `1px solid ${theme.colors.grey}`};
+
+  color: ${({ theme }) => theme.colors.greyDarker};
+
+  width: 100%;
+  min-height: 114px;
+  padding: 14px;
+
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1rem;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.greyDarker60};
+  }
+
+  &:hover {
+    border: ${({ theme }) => `1.4px solid ${theme.colors.greyDarker60};`};
+  }
+
+  &:focus {
+    border: ${({ theme }) => `2px solid ${theme.colors.grey40};`};
+  }
+
+  &:disabled {
+    color: ${({ theme }) => `${theme.colors.grey}`};
+    border: ${({ theme }) => `1px solid  ${theme.colors.grey}`};
+    background: ${({ theme }) => theme.colors.greyLighter};
+
+    &::placeholder {
+      color: ${({ theme }) => theme.colors.grey};
+    }
+  }
+`;

package/src/components/Textarea/index.ts

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

package/src/components/Textarea/types.ts

@@ -0,0 +1,15 @@
+import { ReactEventHandler } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
+
+export interface TextareaProps
+  extends Partial<Pick<UseFormReturn, 'register'>> {
+  name: string;
+  placeholder?: string;
+  validationSchema?: Record<string, unknown>;
+  disabled?: boolean;
+  rows?: number;
+  maxLength?: number;
+  as?: React.ElementType;
+  className?: string;
+  setCountChar?: ReactEventHandler;
+}

package/src/components/Tooltip/ProgressChartTooltip.tsx

@@ -0,0 +1,48 @@
+import ProgressBar from '@components/ProgressBar';
+import Icon from '@components/Icon';
+import Typography from '@components/Typography';
+
+import { TooltipContentBase } from './TooltipContentBase';
+import { IProgressChartTooltipProps } from './types';
+import { mapSizes } from './utils';
+
+export const ProgressChartTooltip = ({
+  caption,
+  value,
+  valueFormatted,
+  iconName,
+  barProps = {},
+}: IProgressChartTooltipProps) => {
+  const { color } = barProps;
+
+  return (
+    <TooltipContentBase
+      css={[mapSizes.small, { padding: '12px', width: '112px' }]}>
+      <div
+        css={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          lineHeight: '1rem',
+          marginBottom: '6px',
+        }}>
+        <Typography variant="body2" weight="medium">
+          {caption}
+        </Typography>
+        <Typography
+          variant="body3"
+          weight="lighter"
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+          }}>
+          {valueFormatted}
+          {iconName && <Icon name={iconName} size={8} />}
+        </Typography>
+      </div>
+
+      <ProgressBar percentage={value} color={color} bgColor={'#fff'} size={6} />
+    </TooltipContentBase>
+  );
+};

package/src/components/Tooltip/SimpleChartTooltip.tsx

@@ -0,0 +1,20 @@
+import { TooltipContentBase } from './TooltipContentBase';
+import { SimpleChartTooltipProps } from './types';
+import { mapSizes } from './utils';
+
+export const SimpleChartTooltip = ({
+  point,
+  size = 'small',
+  renderValue,
+}: SimpleChartTooltipProps) => {
+  const { data } = point;
+  const { xFormatted, yFormatted } = data;
+
+  return (
+    <TooltipContentBase css={mapSizes[size]}>
+      {typeof renderValue === 'function'
+        ? renderValue(data)
+        : `${xFormatted} - ${yFormatted}`}
+    </TooltipContentBase>
+  );
+};

package/src/components/Tooltip/Tooltip.spec.tsx

@@ -0,0 +1,305 @@
+import { waitFor } from '../../../customTest';
+import { Point } from '@nivo/line';
+import userEvent from '@testing-library/user-event';
+import ResizeObserver from 'resize-observer-polyfill';
+import theme from '@themes/main';
+
+import Button from '@components/Button';
+import TooltipTrigger from '@components/TooltipTrigger';
+import TooltipContent from '@components/TooltipContent';
+
+import Tooltip, { SimpleChartTooltip, ProgressChartTooltip } from './index';
+
+function setup(component: React.ReactElement) {
+  const user = userEvent.setup();
+  return {
+    user,
+    ...render(component),
+  };
+}
+
+window.ResizeObserver = ResizeObserver;
+const tooltipText = 'Tooltip';
+
+/**
+ * This is to fix the following error that shows up in the test suite.
+ * Error: `NaN` is an invalid value for the `left` css style property at svg
+ *
+ * The error doesn't break tests.
+ *
+ * It's caused by NaN values (width and height) returned from the
+ * #getCssDimensions() function at @floating-ui/dom.
+ * */
+
+describe('Tooltip', () => {
+  beforeEach(() => {
+    const getComputedStyle = window.getComputedStyle;
+    jest.spyOn(window, 'getComputedStyle').mockImplementation((...args) => {
+      const result = getComputedStyle(
+        ...(args as [Element, string | null | undefined]),
+      );
+
+      const el = args[0];
+      if (el instanceof SVGSVGElement) {
+        /**
+         * Inspired by
+         * https://github.com/jsdom/jsdom/issues/135#issuecomment-68191941
+         * */
+        Object.defineProperties(result, {
+          offsetHeight: {
+            get() {
+              return 0;
+            },
+          },
+          offsetWidth: {
+            get() {
+              return 0;
+            },
+          },
+          width: {
+            get() {
+              return 0;
+            },
+          },
+          height: {
+            get() {
+              return 0;
+            },
+          },
+        });
+      }
+      return result;
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('Shows up when the trigger is clicked', async () => {
+    const { user, queryByText, getByText, getByRole, getByTestId } = setup(
+      <Tooltip>
+        <TooltipTrigger>
+          <Button size="medium" text="Click me!" />
+        </TooltipTrigger>
+        <TooltipContent>{tooltipText}</TooltipContent>
+      </Tooltip>,
+    );
+
+    const buttonEl = getByRole('button');
+    expect(queryByText(tooltipText)).not.toBeInTheDocument();
+
+    await user.click(buttonEl);
+
+    getByText(tooltipText);
+    getByTestId('floating-arrow');
+
+    await user.click(document.body);
+
+    expect(queryByText(tooltipText)).not.toBeInTheDocument();
+  });
+
+  it('Shows up when the trigger is hovered', async () => {
+    const { user, queryByText, getByText, getByRole, getByTestId } = setup(
+      <Tooltip enableClick={false} enableHover={true}>
+        <TooltipTrigger>
+          <Button size="medium" text="Hover over me!" />
+        </TooltipTrigger>
+        <TooltipContent>{tooltipText}</TooltipContent>
+      </Tooltip>,
+    );
+
+    const buttonEl = getByRole('button');
+    expect(queryByText(tooltipText)).not.toBeInTheDocument();
+
+    await userEvent.click(buttonEl, { skipHover: true });
+    expect(queryByText(tooltipText)).not.toBeInTheDocument();
+
+    await user.hover(buttonEl);
+    getByText(tooltipText);
+    getByTestId('floating-arrow');
+  });
+
+  it("Doesn't show arrow", async () => {
+    const { user, queryByText, getByText, getByRole, queryByTestId } = setup(
+      <Tooltip hasArrow={false}>
+        <TooltipTrigger>
+          <Button size="medium" text="Click me!" />
+        </TooltipTrigger>
+        <TooltipContent>{tooltipText}</TooltipContent>
+      </Tooltip>,
+    );
+
+    const buttonEl = getByRole('button');
+    expect(queryByText(tooltipText)).not.toBeInTheDocument();
+
+    await user.click(buttonEl);
+    getByText(tooltipText);
+    expect(queryByTestId('floating-arrow')).not.toBeInTheDocument();
+  });
+
+  it("Doesn't render not valid triggers", () => {
+    const { queryByText } = setup(
+      <Tooltip>
+        <TooltipTrigger>Trigger </TooltipTrigger>
+        <TooltipContent>{tooltipText}</TooltipContent>
+      </Tooltip>,
+    );
+
+    expect(queryByText('Trigger')).not.toBeInTheDocument();
+  });
+
+  it('Throws an error if not wrapped with <Tooltip />', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {
+      /* No-op */
+    });
+
+    const errorText =
+      'The component should be wrapped with <Tooltip> to have access to the context';
+    expect(() => setup(<TooltipTrigger>Trigger</TooltipTrigger>)).toThrow(
+      errorText,
+    );
+    expect(() => setup(<TooltipContent>{tooltipText}</TooltipContent>)).toThrow(
+      errorText,
+    );
+
+    (console.error as jest.Mock).mockRestore();
+  });
+
+  it('Shows up by default', () => {
+    const { queryByText } = setup(
+      <Tooltip isOpen>
+        <TooltipTrigger>
+          <Button size="medium" text="Click me!" />
+        </TooltipTrigger>
+        <TooltipContent>{tooltipText}</TooltipContent>
+      </Tooltip>,
+    );
+
+    expect(queryByText(tooltipText)).toBeInTheDocument();
+  });
+
+  describe('SimpleChartTooltip', () => {
+    const point: Point = {
+      id: '',
+      index: 0,
+      serieId: '',
+      serieColor: '',
+      x: 1,
+      y: 1,
+      color: 'white',
+      borderColor: 'black',
+      data: {
+        x: 1,
+        xFormatted: 'x-formatted',
+        y: 1,
+        yFormatted: 'y-formatted',
+      },
+    };
+
+    it('Renders with the default formatting', () => {
+      const { getByText } = setup(<SimpleChartTooltip point={point} />);
+      getByText('x-formatted - y-formatted');
+    });
+
+    it('Renders with a custom formatting', () => {
+      const renderFn = ({
+        xFormatted,
+        yFormatted,
+      }: {
+        xFormatted: string | number;
+        yFormatted: string | number;
+      }) => `${xFormatted} - ${yFormatted}`.toUpperCase();
+
+      const { getByText } = setup(
+        <SimpleChartTooltip point={point} renderValue={renderFn} />,
+      );
+      getByText('X-FORMATTED - Y-FORMATTED');
+    });
+  });
+
+  describe('ProgressChartTooltip', () => {
+    it('Renders with an icon', async () => {
+      const caption = 'Calories';
+      const value = 90;
+      const valueFormatted = '90';
+      const iconName = 'arrow-up';
+
+      const { getByText, getByRole, findByTitle } = setup(
+        <ProgressChartTooltip
+          caption={caption}
+          value={value}
+          valueFormatted={valueFormatted}
+          iconName={iconName}
+        />,
+      );
+
+      getByText(caption);
+      getByText(valueFormatted);
+      await findByTitle('Arrow Up');
+
+      const progressBar = getByRole(/progressbar/i);
+
+      expect(progressBar).toHaveStyle(
+        `background-color: ${theme.colors.green}`,
+      );
+      expect(progressBar).toHaveStyle('width: 90%');
+    });
+
+    it('Renders without an icon', async () => {
+      const caption = 'Calories';
+      const value = 80;
+      const valueFormatted = '80';
+
+      const { getByText, getByRole, queryByTitle } = setup(
+        <ProgressChartTooltip
+          caption={caption}
+          value={value}
+          valueFormatted={valueFormatted}
+        />,
+      );
+
+      getByText(caption);
+      getByText(valueFormatted);
+      await waitFor(() =>
+        expect(queryByTitle('Arrow Up')).not.toBeInTheDocument(),
+      );
+
+      const progressBar = getByRole(/progressbar/i);
+
+      expect(progressBar).toHaveStyle(
+        `background-color: ${theme.colors.green}`,
+      );
+      expect(progressBar).toHaveStyle('width: 80%');
+    });
+
+    it('Renders with a customized progress bar', () => {
+      const caption = 'Calories';
+      const value = 85;
+      const valueFormatted = '85';
+      const barProps = {
+        color: 'purple' as keyof MainColors,
+      };
+
+      const { getByText, getByRole, queryByTitle } = setup(
+        <ProgressChartTooltip
+          caption={caption}
+          value={value}
+          valueFormatted={valueFormatted}
+          barProps={barProps}
+        />,
+      );
+
+      getByText(caption);
+      getByText(valueFormatted);
+      expect(queryByTitle('Arrow Up')).not.toBeInTheDocument();
+
+      const progressBar = getByRole(/progressbar/i);
+
+      expect(progressBar).toHaveStyle(
+        `background-color: ${theme.colors.purple}`,
+      );
+      expect(progressBar).toHaveStyle('width: 85%');
+    });
+  });
+});

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

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useTheme } from '@emotion/react';
+
+import Button from '@components/Button';
+import ProgressCircle from '@components/ProgressCircle';
+import Typography from '@components/Typography';
+import Icon from '@components/Icon';
+import TooltipTrigger from '@components/TooltipTrigger';
+import TooltipContent from '@components/TooltipContent';
+
+import Tooltip from './index';
+
+type Args = Parameters<typeof Tooltip>[0];
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    placement: {
+      options: ['bottom', 'left', 'right', 'top'],
+      control: {
+        type: 'select',
+      },
+    },
+    arrowProps: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '300px',
+          height: '300px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof Tooltip>;
+
+export const OnClick: StoryObj<typeof Tooltip> = (args: Args) => {
+  return (
+    <Tooltip {...args}>
+      <TooltipTrigger>
+        <Button size="medium" text="Click me!" />
+      </TooltipTrigger>
+      <TooltipContent>Tooltip</TooltipContent>
+    </Tooltip>
+  );
+};
+
+OnClick.args = {
+  size: 'large',
+};
+OnClick.storyName = 'Click';
+
+export const OnHover: StoryObj<typeof Tooltip> = (args: Args) => {
+  return (
+    <Tooltip {...args}>
+      <TooltipTrigger>
+        <Button size="medium" text="Hover over me!" />
+      </TooltipTrigger>
+      <TooltipContent>Tooltip</TooltipContent>
+    </Tooltip>
+  );
+};
+
+OnHover.args = {
+  enableClick: false,
+  enableHover: true,
+  size: 'large',
+};
+OnHover.storyName = 'Hover';
+
+export const CustomContent: StoryObj<typeof Tooltip> = (args: Args) => {
+  const theme = useTheme();
+
+  return (
+    <Tooltip {...args}>
+      <TooltipTrigger>
+        <Button
+          size="medium"
+          endIcon={<Icon name="plus" color={theme.colors.white} size={12} />}
+        />
+      </TooltipTrigger>
+      <TooltipContent css={{ textAlign: 'center' }}>
+        <Typography variant="h6">Your progress</Typography>
+        <div css={{ margin: '0 auto', width: '60px' }}>
+          <ProgressCircle
+            max={100}
+            currentValue={80}
+            color="purple"
+            infoContent="80%"
+            size={60}
+          />
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+CustomContent.args = {
+  size: 'large',
+  placement: 'top',
+};
+CustomContent.storyName = 'Custom content';
+
+export const NoArrow: StoryObj<typeof Tooltip> = (args: Args) => {
+  const theme = useTheme();
+
+  return (
+    <Tooltip {...args}>
+      <TooltipTrigger>
+        <Button
+          size="small"
+          endIcon={<Icon name="check" color={theme.colors.white} size={12} />}
+          text="Action"
+        />
+      </TooltipTrigger>
+      <TooltipContent>No arrow</TooltipContent>
+    </Tooltip>
+  );
+};
+
+NoArrow.args = {
+  size: 'large',
+  hasArrow: false,
+  placement: 'left',
+};
+NoArrow.storyName = 'No arrow';
+
+export const Opened: StoryObj<typeof Tooltip> = (args: Args) => {
+  return (
+    <Tooltip {...args}>
+      <TooltipTrigger>
+        <Button size="medium" text="Hover over me!" />
+      </TooltipTrigger>
+      <TooltipContent>Tooltip</TooltipContent>
+    </Tooltip>
+  );
+};
+
+Opened.args = {
+  enableClick: false,
+  enableHover: true,
+  size: 'large',
+  isOpen: true,
+};
+Opened.parameters = {
+  pseudo: {
+    hover: true,
+    rootSelector: 'body',
+  },
+};