@ssa-ui-kit/core 0.0.2-alpha → 0.0.4-alpha

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

@@ -1,106 +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 = {};
+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

@@ -1,86 +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;
+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

@@ -1,27 +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;
+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

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

package/src/components/Indicator/types.ts

@@ -1,9 +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>;
+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

@@ -1,95 +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();
-  });
-});
+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();
+  });
+});