@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Icon/icons/index.tsx

@@ -0,0 +1,103 @@
+import { IconProps, IMapIcons } from '../types';
+
+import { Calendar } from './Calendar';
+import { Diet } from './Diet';
+import { Home } from './Home';
+import { Measurements } from './Measurements';
+import { Settings } from './Settings';
+import { Sleep } from './Sleep';
+import { Stats } from './Stats';
+import { Trainings } from './Trainings';
+
+import { Plus } from './Plus';
+import { Minus } from './Minus';
+import { Cross } from './Cross';
+import { Check } from './Check';
+import { CheckCircle } from './CheckCircle';
+import { More } from './More';
+import { MoreVertical } from './MoreVertical';
+import { Notification } from './Notification';
+import { User } from './User';
+import { Union } from './Union';
+import { Visible } from './Visible';
+import { Invisible } from './Invisible';
+import { LogOut } from './LogOut';
+import { Information } from './Information';
+import { Warning } from './Warning';
+import { Attention } from './Attention';
+
+import { CarrotDown } from './CarrotDown';
+import { CarrotUp } from './CarrotUp';
+import { CarrotLeft } from './CarrotLeft';
+import { CarrotRight } from './CarrotRight';
+
+import { RadioOn } from './RadioOn';
+import { Circle } from './Circle';
+
+import { ArrowUp } from './ArrowUp';
+import { ArrowDown } from './ArrowDown';
+
+import { iconsList } from './iconsList';
+import { Filter } from './Filter';
+import { Search } from './Search';
+import { Archive } from './Archive';
+import { Bin } from './Bin';
+import { Change } from './Change';
+import { Copy } from './Copy';
+
+const componentsList = [
+  Diet,
+  Calendar,
+  Home,
+  Stats,
+  Sleep,
+  Trainings,
+  Measurements,
+  Settings,
+  Plus,
+  Minus,
+  More,
+  MoreVertical,
+  Check,
+  CheckCircle,
+  Cross,
+  User,
+  Union,
+  Notification,
+  Information,
+  Warning,
+  Attention,
+  Visible,
+  Invisible,
+  LogOut,
+  CarrotDown,
+  CarrotUp,
+  CarrotLeft,
+  CarrotRight,
+  RadioOn,
+  Circle,
+  ArrowUp,
+  ArrowDown,
+  Filter,
+  Search,
+  Archive,
+  Bin,
+  Change,
+  Copy,
+];
+
+const iconsMap: IMapIcons = iconsList.reduce((res, name, index) => {
+  res[name] = componentsList[index];
+  return res;
+}, {} as IMapIcons);
+
+const IconMapComponent = ({ name, color, size }: IconProps) => {
+  const Component = iconsMap[name];
+
+  if (Component == null) {
+    return null;
+  }
+
+  return <Component fill={color} size={size} />;
+};
+export default IconMapComponent;

package/src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Icon';
+export { iconsList } from './icons/iconsList';

package/src/components/Icon/types.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CommonProps } from '@global-types/emotion';
+import { iconsList } from './icons/iconsList';
+
+export interface IconProps extends CommonProps {
+  name: keyof IMapIcons;
+  color?: string;
+  size?: number;
+}
+
+export type IMapIcons = {
+  [key in (typeof iconsList)[number]]: React.ElementType;
+};
+
+export interface SVGProps {
+  fill?: string;
+  size?: number;
+}

package/src/components/Indicator/Indicator.spec.tsx

@@ -0,0 +1,67 @@
+import Indicator from './Indicator';
+
+describe('Indicator', () => {
+  it('Renders with default left position', () => {
+    const { getByTestId } = render(
+      <Indicator isVisible={true}>
+        <span>Content</span>
+      </Indicator>,
+    );
+
+    getByTestId('indicator-left');
+  });
+
+  it('Renders with right position', () => {
+    const { getByTestId } = render(
+      <Indicator isVisible={true} position="right">
+        <span>Content</span>
+      </Indicator>,
+    );
+
+    getByTestId('indicator-right');
+  });
+
+  it('Renders with children and default left position', () => {
+    const { getByText, getByTestId } = render(
+      <Indicator isVisible={true}>
+        <span>Content</span>
+      </Indicator>,
+    );
+
+    getByTestId('indicator-left');
+    getByText('Content');
+  });
+
+  it('Renders with children and right position', () => {
+    const { getByText, getByTestId } = render(
+      <Indicator position="right" isVisible={true}>
+        <span>Content</span>
+      </Indicator>,
+    );
+
+    getByTestId('indicator-right');
+    getByText('Content');
+  });
+
+  it('Renders with children and Indicator text', () => {
+    const { getByText, getByTestId } = render(
+      <Indicator isVisible={true} text={'+20'}>
+        <span>Content</span>
+      </Indicator>,
+    );
+
+    getByTestId('indicator-left');
+    getByText('Content');
+    getByText('+20');
+  });
+
+  it('Is not rendered in the document', () => {
+    const { queryByTestId } = render(
+      <Indicator isVisible={false}>
+        <span>Content</span>
+      </Indicator>,
+    );
+
+    expect(queryByTestId('indicator-left')).not.toBeInTheDocument();
+  });
+});

package/src/components/Indicator/Indicator.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Theme, useTheme } from '@emotion/react';
+import Typography from '@components/Typography';
+import Badge from '@components/Badge';
+import Icon from '@components/Icon';
+import Indicator from './Indicator';
+import { IndicatorProps } from './types';
+import Button from '@components/Button';
+
+const BadgeWrapper = (theme: Theme) => `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  width: 30px;
+  padding: 5px;
+  border-radius: 6px;
+  box-shadow: -4px 12px 14px 0px #DAE1E1;
+
+  ${theme.mediaQueries.md} {
+    height: 42px;
+    width: 42px;
+    padding: 11px;
+    border-radius: 12px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    },
+  },
+`;
+
+export default {
+  title: 'Components/Indicator',
+  component: Indicator,
+  argTypes: {
+    isVisible: {
+      control: 'boolean',
+    },
+    position: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: ['right', 'left'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+} as Meta<typeof Indicator>;
+
+export const Default: StoryObj<typeof Indicator> = ({
+  isVisible,
+  position,
+  background,
+}: IndicatorProps) => {
+  const theme = useTheme();
+  return (
+    <Indicator
+      isVisible={isVisible}
+      position={position}
+      background={background}>
+      <Badge color="blueLight" size="small" css={BadgeWrapper}>
+        <Icon name="information" color={theme.colors.white} size={14} />
+      </Badge>
+    </Indicator>
+  );
+};
+
+Default.argTypes = {};
+
+export const RightSide: StoryObj<typeof Indicator> = () => {
+  const theme = useTheme();
+  return (
+    <Indicator position="right" isVisible={true}>
+      <Badge color="blueLight" size="small" css={BadgeWrapper}>
+        <Icon name="information" color={theme.colors.white} size={14} />
+      </Badge>
+    </Indicator>
+  );
+};
+
+RightSide.argTypes = {};
+
+export const WithContent: StoryObj<typeof Indicator> = () => {
+  const theme = useTheme();
+  return (
+    <Indicator
+      isVisible={true}
+      position="right"
+      background={`linear-gradient(90deg, ${theme.colors.yellow} 0%, ${theme.colors.yellowLighter} 100%)`}
+      text={
+        <Typography variant="body2" weight="regular" color={theme.colors.white}>
+          +2100
+        </Typography>
+      }>
+      <Button size="large" block={true}>
+        Button
+      </Button>
+    </Indicator>
+  );
+};
+
+WithContent.args = {};

package/src/components/Indicator/Indicator.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { css, useTheme } from '@emotion/react';
+import IndicatorBase from './IndicatorBase';
+import { ChildrenDataProps, IndicatorProps } from './types';
+import { useWindowSize } from '@ssa-ui-kit/hooks';
+
+const Indicator = ({
+  isVisible = true,
+  position = 'left',
+  background,
+  text,
+  children,
+}: IndicatorProps) => {
+  const indicatorRef = useRef<HTMLDivElement>(null);
+  const childrenRef = useRef<HTMLDivElement | null>(null);
+  const [width, setWidth] = useState<number>(0);
+  const [childrenData, setChildrenData] = useState<ChildrenDataProps | null>(
+    {} || null,
+  );
+  const { width: windowWidth } = useWindowSize();
+  const theme = useTheme();
+
+  const refValue = indicatorRef.current ? indicatorRef.current.offsetWidth : 0;
+  const isRight = position === 'right';
+
+  useEffect(() => {
+    if (indicatorRef.current && childrenRef.current) {
+      const refData = {
+        top: childrenRef.current.offsetTop,
+        left: childrenRef.current.offsetLeft,
+        width: childrenRef.current.offsetWidth,
+        right: childrenRef.current.offsetWidth + childrenRef.current.offsetLeft,
+      };
+      setWidth(refValue);
+      setChildrenData(refData);
+    }
+  }, [width, childrenRef.current, windowWidth]);
+
+  return (
+    <React.Fragment>
+      {isVisible ? (
+        <IndicatorBase
+          data-testid={`indicator-${position}`}
+          ref={indicatorRef}
+          css={
+            childrenData && [
+              css`
+                top: ${childrenData.top + 2}px;
+                left: ${isRight ? '-6px' : '1px'};
+                transform: translate(${childrenData?.[position]}px, -50%);
+
+                ${theme.mediaQueries.md} {
+                  left: ${isRight ? '-10px' : '1px'};
+                }
+              `,
+              width > 8 &&
+                css`
+                  left: ${isRight ? '4px' : '-4px'};
+                  transform: ${isRight
+                    ? `translate(${childrenData?.[position] - width}px, -50%)`
+                    : `translate(${childrenData?.[position]}px, -50%)`};
+
+                  ${theme.mediaQueries.md} {
+                    left: ${isRight ? '4px' : '-4px'};
+                  }
+                `,
+              width > 24 &&
+                css`
+                  border-radius: 10px;
+                  aspect-ratio: 0;
+                `,
+            ]
+          }
+          background={background}>
+          {text}
+        </IndicatorBase>
+      ) : null}
+      {React.cloneElement(children, {
+        ref: (ref: HTMLDivElement | null) => (childrenRef.current = ref),
+      })}
+    </React.Fragment>
+  );
+};
+
+export default Indicator;

package/src/components/Indicator/IndicatorBase.tsx

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+
+const IndicatorBase = styled.div<{ background?: string }>`
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 5px;
+  min-height: 5px;
+  padding: 2px;
+  border-radius: 50%;
+  aspect-ratio: 1;
+  background: ${({ theme, background }) =>
+    background
+      ? background
+      : `linear-gradient(291.8deg, ${theme.colors.blueLightDarker}, ${theme.colors.blueDark})`};
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    min-width: 8px;
+    min-height: 8px;
+    padding: 3px;
+  }
+`;
+
+export default IndicatorBase;

package/src/components/Indicator/index.ts

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

package/src/components/Indicator/types.ts

@@ -0,0 +1,9 @@
+export interface IndicatorProps {
+  isVisible: boolean;
+  children: React.ReactElement;
+  position?: 'right' | 'left';
+  background?: string;
+  text?: string | number | JSX.Element;
+}
+
+export type ChildrenDataProps = Record<string, number>;

package/src/components/Input/Input.spec.tsx

@@ -0,0 +1,95 @@
+import { screen, fireEvent, mockUseForm } from '../../../customTest';
+import Input from '@components/Input';
+
+const { register } = mockUseForm();
+
+describe('Inputs', () => {
+  it('Render input with label and helper text', () => {
+    render(<Input placeholder="Field" name="field" register={register} />);
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: 'rock n roll' } });
+
+    expect(input.value).toBe('rock n roll');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('Trow error when without register', () => {
+    jest.spyOn(console, 'error').mockImplementation();
+
+    expect(() =>
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      render(<Input placeholder="Field" name="field" disabled={true} />),
+    ).toThrow('Input component must be used within a Form component');
+  });
+
+  it('Render input disabled', () => {
+    render(
+      <Input
+        placeholder="Field"
+        name="field"
+        register={register}
+        disabled={true}
+      />,
+    );
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveProperty('disabled', true);
+  });
+
+  it('Render input with status of success', async () => {
+    render(
+      <Input
+        placeholder="Field"
+        name="field"
+        register={register}
+        status="success"
+      />,
+    );
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    const icon = await screen.findByTitle('Check');
+
+    expect(input).toBeInTheDocument();
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Render input with status of error', async () => {
+    render(
+      <Input
+        placeholder="Field"
+        name="field"
+        register={register}
+        validationSchema={{
+          required: 'Required',
+        }}
+        status="error"
+      />,
+    );
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    const icon = await screen.findByTitle('Union');
+
+    expect(input).toBeInTheDocument();
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Render input with startElement and endElement', () => {
+    render(
+      <Input
+        placeholder="Field"
+        name="field"
+        register={register}
+        startElement={<span data-testid="startElement">+</span>}
+        endElement={<span data-testid="endElement">-</span>}
+      />,
+    );
+
+    expect(screen.getByTestId('startElement')).toBeInTheDocument();
+    expect(screen.getByTestId('endElement')).toBeInTheDocument();
+  });
+});