@veeqo/ui 0.0.4 → 0.0.7

package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -1,395 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Pagination renders correctly with page count and total pages as expected 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c0 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c0 > * + * {
-  margin-left: 0.25rem;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c8 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c8 > * + * {
-  margin-top: 1rem;
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.c4 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c1 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 2px;
-  height: 32px;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.c1:hover {
-  cursor: pointer;
-}
-
-.c1:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c1 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c2 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #0079D1;
-}
-
-.c2:hover {
-  background-color: #FAFAFB;
-}
-
-.c2:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c2:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c2:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c7 {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  line-height: 16px;
-  color: #37424d;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 16px;
-  color: #37424D;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-letter-spacing: 0;
-  -moz-letter-spacing: 0;
-  -ms-letter-spacing: 0;
-  letter-spacing: 0;
-}
-
-.c5 {
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 0 12px;
-  border-radius: 4px;
-  border: 1px solid #959fa8;
-  color: #1b2126;
-  height: 32px;
-  font-size: 12px;
-}
-
-.c5 {
-  --outline-size: 2px;
-}
-
-.c5:focus {
-  border-color: #0079d1;
-  box-shadow: 0 0 0 var(--outline-size) #80bce8;
-  outline: 0;
-}
-
-.c5:invalid {
-  border-color: #eb5757;
-  box-shadow: 0 0 0 var(--outline-size) #f7bcbc;
-}
-
-.c5:disabled {
-  box-shadow: none;
-  background-color: #f2f3f5;
-  border-color: #959fa8;
-  color: #637381;
-}
-
-.c5::-webkit-outer-spin-button,
-.c5::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c5[type='number'] {
-  -moz-appearance: textfield;
-  width: 8ch;
-  text-align: right;
-}
-
-.c9 {
-  width: 2rem;
-  height: 30px;
-  background-color: #F2F3F5;
-  border: 1px solid #DFE3E8;
-  border-radius: 0.25rem;
-}
-
-.c3 {
-  color: #37424D;
-  width: 32px;
-  height: 32px;
-}
-
-.c3 svg {
-  width: 24px;
-  height: 24px;
-}
-
-.c6[type='number'] {
-  width: 5.5ch;
-}
-
-<div>
-  <div
-    class="c0 paginator"
-    direction="horizontal"
-    spacing="xs"
-  >
-    <button
-      aria-label="go to first page"
-      class="c1 c2 c3"
-    >
-      <span
-        class="c4"
-      >
-        <svg
-          fill="none"
-          viewBox="0 0 16 16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11.6434 11.06L8.59004 8L11.6434 4.94L10.7034 4L6.70337 8L10.7034 12L11.6434 11.06Z"
-            fill="currentColor"
-          />
-          <path
-            clip-rule="evenodd"
-            d="M4.37004 12L4.37004 4L5.70337 4L5.70337 12L4.37004 12Z"
-            fill="currentColor"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-disabled="true"
-      aria-label="go to previous page"
-      class="c1 c2 c3"
-    >
-      <span
-        class="c4"
-      >
-        <svg
-          fill="none"
-          viewBox="0 0 16 16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M10.44 11.06L7.38667 8L10.44 4.94L9.5 4L5.5 8L9.5 12L10.44 11.06Z"
-            fill="currentColor"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </button>
-    <form>
-      <input
-        aria-label="page 1 of 5"
-        aria-live="polite"
-        class="c5 c6"
-        id="test-id"
-        max="5"
-        min="1"
-        spellcheck="false"
-        type="number"
-        value="1"
-      />
-    </form>
-    <div>
-      <span
-        aria-hidden="true"
-        class="c7"
-      >
-        /
-      </span>
-    </div>
-    <div
-      aria-hidden="true"
-      class="c8 c9"
-    >
-      <span
-        class="c7"
-      >
-        5
-      </span>
-    </div>
-    <button
-      aria-disabled="false"
-      aria-label="go to next page"
-      class="c1 c2 c3"
-    >
-      <span
-        class="c4"
-      >
-        <svg
-          fill="none"
-          viewBox="0 0 16 16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M5.99994 11.06L9.05327 8L5.99994 4.94L6.93994 4L10.9399 8L6.93994 12L5.99994 11.06Z"
-            fill="currentColor"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      aria-label="go to last page"
-      class="c1 c2 c3"
-    >
-      <span
-        class="c4"
-      >
-        <svg
-          fill="none"
-          viewBox="0 0 16 16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M4.33661 11.06L7.38994 8L4.33661 4.94L5.27661 4L9.27661 8L5.27661 12L4.33661 11.06Z"
-            fill="currentColor"
-            fill-rule="evenodd"
-          />
-          <path
-            clip-rule="evenodd"
-            d="M11.67 4L11.67 12L10.3367 12L10.3367 4L11.67 4Z"
-            fill="currentColor"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</div>
-`;

package/src/components/Pagination/components.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Text } from '../Text';
-import { PageLimitContainer } from './styled';
-
-export const PageCount = ({ count }: { count: number }) => (
-  <>
-    <div>
-      <Text variant="bodySmall" aria-hidden>
-        /
-      </Text>
-    </div>
-    <PageLimitContainer alignX="center" alignY="center" aria-hidden>
-      <Text variant="bodySmall">{count}</Text>
-    </PageLimitContainer>
-  </>
-);

package/src/components/Pagination/hooks/usePagination.ts

@@ -1,88 +0,0 @@
-import { FormEvent, useEffect, useState } from 'react';
-import { UsePaginationInputs } from '../types';
-
-/**
- * A hook to handle pagination state.
- */
-export const usePagination = ({
-  currentPage,
-  totalPagesCount,
-  handleChangePage,
-}: UsePaginationInputs) => {
-  const [pageInputValue, setPageInputValue] = useState(`${currentPage}`);
-
-  /**
-   * When a new value is passed into the component we update the local state, meaning the input
-   * value gets updated.
-   */
-  useEffect(() => {
-    setPageInputValue(`${currentPage}`);
-  }, [currentPage]);
-
-  const validatePageValue = (value: number): boolean => value >= 1 && value <= totalPagesCount;
-  const checkAndSetLocalPage = (newPage: number) => {
-    if (validatePageValue(newPage)) setPageInputValue(`${newPage}`);
-  };
-
-  /**
-   * A function to handle changes to the input, a string will be passed int. We check for an empty
-   * string and directly set that, otherwise we validate the input number is within range.
-   * @param newValue The new string input value.
-   */
-  const handleInputChange = (newValue: string) => {
-    if (!newValue) setPageInputValue(newValue);
-
-    const intValue = parseInt(newValue, 10);
-    checkAndSetLocalPage(intValue);
-  };
-
-  /**
-   * A function to increment the current page, using callback from props. Local state will update
-   * when a new `currentPage` is passed.
-   */
-  const handleIncrement = () => {
-    if (validatePageValue(currentPage + 1)) handleChangePage(currentPage + 1);
-  };
-
-  /**
-   * A function to decrement the current page, using callback from props. Local state will update
-   * when a new `currentPage` is passed.
-   */
-  const handleDecrement = () => {
-    if (validatePageValue(currentPage - 1)) handleChangePage(currentPage - 1);
-  };
-
-  /**
-   * When the input is unfocussed we want to update parent or local state depending on 3 cases:
-   *   1. Local page input is '', reset it to the currentPage
-   *   2. Local page input is the same as passed by prop, catch and do nothing.
-   *   3. Local state has a new value, convert it, validate it and potentially send to parent via
-   *  `handlePageChange`
-   */
-  const handleSubmit = () => {
-    if (!pageInputValue) setPageInputValue(`${currentPage}`);
-    if (pageInputValue === `${currentPage}`) return;
-
-    const newValue = parseInt(pageInputValue, 10);
-    if (validatePageValue(newValue)) handleChangePage(newValue);
-  };
-
-  /**
-   * When the user submits the form, either pressing enter or a screenreader shortcut we prevent
-   * default action and try and send update.
-   * @param event The event fired from the form when submitting.
-   */
-  const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    handleSubmit();
-  };
-
-  return {
-    pageInputValue,
-    handleIncrement,
-    handleDecrement,
-    handleInputChange,
-    handleSubmit,
-    handleFormSubmit,
-  };
-};

package/src/components/Pagination/styled.ts

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-import { theme } from '../../theme';
-import { Stack } from '../Stack';
-import { Button } from '../Button';
-import { TextField } from '../TextField';
-
-export const PageLimitContainer = styled(Stack)`
-  width: ${theme.sizes.lg};
-  height: 30px;
-  background-color: ${theme.colors.neutral.grey.light};
-
-  border: 1px solid ${theme.colors.neutral.grey.base};
-  border-radius: ${theme.sizes.xs};
-`;
-
-export const PaginationButton = styled(Button)`
-  color: ${theme.colors.neutral.ink.base};
-  width: 32px;
-  height: 32px;
-
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-`;
-
-export const PageInput = styled(TextField)`
-  &[type='number'] {
-    width: 5.5ch;
-  }
-`;

package/src/components/Pagination/types.ts

@@ -1,9 +0,0 @@
-export type PaginationProps = {
-  testId?: string;
-  e2eClassName?: string;
-  currentPage: number;
-  totalPagesCount: number;
-  handleChangePage: (newPageIndex: number) => void;
-};
-
-export type UsePaginationInputs = Omit<PaginationProps, 'testId'>;

package/src/components/PaginationRange/Items/Item/Item.tsx

@@ -1,14 +0,0 @@
-import React, { useCallback } from 'react';
-
-import { PaginationListItemProps } from './types';
-import { Container, Text } from './styled';
-
-export const Item = ({ item, handleRangeListChange }: PaginationListItemProps) => {
-  const onClick = useCallback(() => handleRangeListChange(item), [handleRangeListChange, item]);
-
-  return (
-    <Container onClick={onClick}>
-      <Text variant="bodySmall">{item.label}</Text>
-    </Container>
-  );
-};

package/src/components/PaginationRange/Items/Item/styled.ts

@@ -1,26 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from '../../../../theme/modules/colors';
-
-import { Text } from '../../../Text';
-import { BaseContainer } from '../../../BaseContainer';
-
-const Container = styled(BaseContainer)`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-`;
-
-const StyledText = styled(Text)`
-  width: 100%;
-  padding: 8px 16px;
-  cursor: pointer;
-
-  &:hover {
-    color: ${colors.secondary.blue.base};
-    background: ${colors.neutral.grey.lightest};
-  }
-`;
-
-export { StyledText as Text, Container };

package/src/components/PaginationRange/Items/Item/types.ts

@@ -1,6 +0,0 @@
-import { PaginationRangeOption } from '../../types';
-
-export interface PaginationListItemProps {
-  item: PaginationRangeOption;
-  handleRangeListChange: (item: PaginationRangeOption) => void;
-}

package/src/components/PaginationRange/Items/Items.tsx

@@ -1,27 +0,0 @@
-import React, { Fragment } from 'react';
-
-import { paginationDefaultRangeList } from '../../../utils/paginationList';
-
-import { PaginationListItemProps } from './Item/types';
-import { PaginationRangeProps } from '../types';
-
-import { Item } from './Item';
-
-export type PaginationRangeItemsOwnProps = Pick<PaginationRangeProps, 'paginationRange'>;
-export type PaginationListItemOwnProps = Pick<PaginationListItemProps, 'handleRangeListChange'>;
-
-export type PaginationRangeItemsProps = PaginationRangeItemsOwnProps & PaginationListItemOwnProps;
-
-export const Items = (props: PaginationRangeItemsProps) => {
-  const { handleRangeListChange, paginationRange = paginationDefaultRangeList } = props;
-
-  return (
-    <>
-      {paginationRange.map((item) => (
-        <Fragment key={item.label}>
-          <Item item={item} handleRangeListChange={handleRangeListChange} />
-        </Fragment>
-      ))}
-    </>
-  );
-};

package/src/components/PaginationRange/PaginationRange.stories.tsx

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { PaginationRange } from '.';
-
-const meta = {
-  title: 'Components/UI/PaginationRange',
-  component: PaginationRange,
-  tags: ['autodocs'],
-} satisfies Meta<typeof PaginationRange>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/components/PaginationRange/PaginationRange.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { PaginationRange } from './PaginationRange';
-
-describe('PaginationRange', () => {
-  test('it renders correctly', () => {
-    const { container } = render(<PaginationRange onPaginationRangeChange={() => {}} />);
-    expect(container).toMatchSnapshot();
-  });
-});