@veeqo/ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,395 @@
+// 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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,88 @@
+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/index.ts

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

package/src/components/Pagination/styled.ts

@@ -0,0 +1,31 @@
+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

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

@@ -0,0 +1,14 @@
+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/index.ts

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

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

@@ -0,0 +1,26 @@
+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

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

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

@@ -0,0 +1,27 @@
+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/Items/index.ts

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

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

@@ -0,0 +1,14 @@
+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

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