@veeqo/ui 0.0.1 → 0.0.4

package/src/components/PaginationRange/PaginationRange.tsx

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+
+import { PaginationRangeOption, PaginationRangeProps, PaginationRangeState } from './types';
+import { paginationDefaultRangeList } from '../../utils/paginationList';
+
+import { theme } from '../../theme';
+
+import { Container, Dropdown, Button, Text } from './styled';
+import { Items } from './Items';
+import { DropdownIcon } from '../../tempIcons/DropdownIcon';
+
+export class PaginationRange extends Component<PaginationRangeProps, PaginationRangeState> {
+  constructor(props: PaginationRangeProps) {
+    super(props);
+    const { dropdownValue = paginationDefaultRangeList[1] } = this.props;
+
+    this.state = {
+      dropdownValue,
+      shouldShowDropdown: false,
+    };
+  }
+
+  handleRangeListChange = (item: PaginationRangeOption) => {
+    const { onPaginationRangeChange } = this.props;
+    this.setDropdownValue(item);
+    onPaginationRangeChange(item);
+  };
+
+  setDropdownValue = (currentValue: PaginationRangeOption) =>
+    this.setState({
+      shouldShowDropdown: false,
+      dropdownValue: currentValue,
+    });
+
+  toggleShouldShow = () => {
+    const { shouldShowDropdown } = this.state;
+    this.setState({ shouldShowDropdown: !shouldShowDropdown });
+  };
+
+  render() {
+    const {
+      className,
+      paginationRange = paginationDefaultRangeList,
+      reversedDropdown,
+    } = this.props;
+    const { shouldShowDropdown, dropdownValue } = this.state;
+
+    return (
+      <Container className={className}>
+        <Dropdown
+          cta={
+            <Button onClick={this.toggleShouldShow}>
+              <Text variant="bodySmall">{dropdownValue.label}</Text>
+              <DropdownIcon color={theme.colors.neutral.ink.base} />
+            </Button>
+          }
+          shouldShowDropdown={shouldShowDropdown}
+          onClickAway={this.toggleShouldShow}
+          reversed={reversedDropdown}
+        >
+          <Items
+            paginationRange={paginationRange}
+            handleRangeListChange={this.handleRangeListChange}
+          />
+        </Dropdown>
+      </Container>
+    );
+  }
+}

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

@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PaginationRange it renders correctly 1`] = `
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  min-width: 100%;
+}
+
+.c5 {
+  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;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c3-container {
+  width: 100%;
+}
+
+.c4 {
+  width: 100%;
+  height: 32px;
+  padding: 6px 8px 8px 8px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border: 1px solid #DFE3E8;
+  box-sizing: border-box;
+  border-radius: 4px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  background: white;
+  cursor: pointer;
+}
+
+.c4 svg {
+  padding-left: 8px;
+  padding-top: 2px;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    <div
+      class="c0 c2 c3-container sc-kAyceB c3"
+    >
+      <button
+        class="c4"
+      >
+        <span
+          class="c5"
+        >
+          25 / page
+        </span>
+        <svg
+          color="#37424D"
+          fill="none"
+          style="width: 1rem; height: 1rem;"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M4 6L8 10L12 6H4Z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </button>
+      <div
+        class="c0 c6 c3-wrap sc-kAyceB c3"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/PaginationRange/index.ts

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

package/src/components/PaginationRange/styled.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+import { AnimatedDropdown } from '../AnimatedDropdown';
+import { Text } from '../Text';
+import { BaseContainer } from '../BaseContainer';
+import { colors } from '../../theme/modules/colors';
+
+const Container = styled(BaseContainer)`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const Dropdown = styled(AnimatedDropdown)`
+  &-container {
+    width: 100%;
+  }
+`;
+
+const Button = styled.button`
+  width: 100%;
+  height: 32px;
+  padding: 6px 8px 8px 8px;
+  display: flex;
+  border: 1px solid ${colors.neutral.grey.base};
+  box-sizing: border-box;
+  border-radius: 4px;
+  justify-content: space-between;
+  background: white;
+  cursor: pointer;
+
+  svg {
+    padding-left: 8px;
+    padding-top: 2px;
+  }
+`;
+
+export { Container, Dropdown, Button, Text };

package/src/components/PaginationRange/types.ts

@@ -0,0 +1,17 @@
+export interface PaginationRangeOption {
+  label: string;
+  value: number;
+}
+
+export interface PaginationRangeProps {
+  className?: string;
+  dropdownValue?: PaginationRangeOption;
+  paginationRange?: PaginationRangeOption[];
+  reversedDropdown?: boolean;
+  onPaginationRangeChange: (currentItem: PaginationRangeOption) => void;
+}
+
+export interface PaginationRangeState {
+  dropdownValue: PaginationRangeOption;
+  shouldShowDropdown: boolean;
+}

package/src/components/Popover/Popover.test.tsx

@@ -0,0 +1,87 @@
+import React, { useRef, useState } from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import { Popover } from '.';
+
+const CustomRootTest = () => {
+  const [isActive, setIsActive] = useState(false);
+  const customRootRef = useRef<HTMLDivElement>(null);
+  const anchorRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div>
+      <div data-testid="custom-root" ref={customRootRef}>
+        Custom root element
+      </div>
+      <button type="button" onClick={() => setIsActive(!isActive)} ref={anchorRef}>
+        TRIGGER
+      </button>
+      {isActive && (
+        <Popover
+          anchorElement={null}
+          rootElementRef={customRootRef.current ?? undefined}
+          placement="right"
+          onShouldClose={() => {}}
+        >
+          <p>Popover content</p>
+        </Popover>
+      )}
+    </div>
+  );
+};
+
+const StandardRootTest = () => {
+  const [isActive, setIsActive] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div>
+      <div data-testid="custom-root">Custom root element</div>
+      <button type="button" onClick={() => setIsActive(!isActive)} ref={anchorRef}>
+        TRIGGER
+      </button>
+      {isActive && (
+        <Popover anchorElement={null} placement="right" onShouldClose={() => {}}>
+          <p>Popover content</p>
+        </Popover>
+      )}
+    </div>
+  );
+};
+
+describe('Popover', () => {
+  it('renders correctly', () => {
+    const { asFragment } = render(<StandardRootTest />);
+    expect(asFragment()).toMatchSnapshot();
+
+    userEvent.click(screen.getByText('TRIGGER'));
+
+    expect(
+      within(screen.getByTestId('custom-root')).queryByText('Popover content'),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText('Popover content')).toBeInTheDocument();
+
+    userEvent.click(screen.getByRole('button', { name: 'TRIGGER' }));
+
+    expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+  });
+
+  it('renders correctly within custom root element', () => {
+    const { asFragment } = render(<CustomRootTest />);
+    expect(asFragment()).toMatchSnapshot();
+
+    userEvent.click(screen.getByText('TRIGGER'));
+
+    expect(
+      within(screen.getByTestId('custom-root')).getByText('Popover content'),
+    ).toBeInTheDocument();
+
+    userEvent.click(screen.getByRole('button', { name: 'TRIGGER' }));
+
+    expect(
+      within(screen.getByTestId('custom-root')).queryByText('Popover content'),
+    ).not.toBeInTheDocument();
+  });
+});

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable consistent-return */
+import React, { useState, useEffect, ReactNode } from 'react';
+import styled from 'styled-components';
+import { usePopper } from 'react-popper';
+import { Placement } from '@popperjs/core';
+import ResizeObserver from 'resize-observer-polyfill';
+
+import { Portal } from '../Portal';
+import { theme } from '../../theme';
+
+export const Backdrop = styled.div<{ zIndex: number }>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: ${({ zIndex }) => zIndex};
+`;
+
+const PopoverWrapper = styled.div<{ zIndex: number }>`
+  z-index: ${({ zIndex }) => zIndex + 1};
+`;
+
+export type PopoverProps = {
+  children: ReactNode;
+  className?: string;
+  anchorElement: HTMLElement | null;
+  rootElementRef?: HTMLElement;
+  placement?: Placement;
+  onShouldClose?: () => void;
+  zIndex?: number;
+};
+
+export const Popover = ({
+  children,
+  className,
+  anchorElement,
+  rootElementRef,
+  placement = 'bottom',
+  onShouldClose,
+  // FIXME: Added zIndex prop as a temporary solution for issues with nested overlays
+  // to be replaced with long term solution
+  zIndex = theme.layers.popup,
+}: PopoverProps) => {
+  // Set up PopperJS
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });
+
+  // When content size is changed, force popper update
+  useEffect(() => {
+    if (!update || !popperElement) return;
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(popperElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [update, popperElement]);
+
+  // When window is resized, force popper update
+  useEffect(() => {
+    if (!update) return;
+    window.addEventListener('resize', update);
+    return () => {
+      window.removeEventListener('resize', update);
+    };
+  }, [update]);
+
+  return (
+    <Portal rootElementRef={rootElementRef}>
+      {onShouldClose && <Backdrop onClick={onShouldClose} zIndex={zIndex} />}
+      <PopoverWrapper
+        ref={setPopperElement}
+        className={className}
+        zIndex={zIndex}
+        style={{ ...styles.popper }}
+        {...attributes.popper}
+      >
+        {children}
+      </PopoverWrapper>
+    </Portal>
+  );
+};

package/src/components/Popover/PopoverDemo.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Button } from '../Button';
+import { Card } from '../Card';
+import { Popover } from './Popover';
+
+export const PopoverDefaultDemo = () => {
+  const [isActive, setIsActive] = useState(false);
+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
+
+  return (
+    <>
+      <Button ref={setAnchorRef} onClick={() => setIsActive(true)}>
+        Click to show popover
+      </Button>
+      {isActive && (
+        <Popover
+          placement="bottom-start"
+          anchorElement={anchorRef}
+          onShouldClose={() => setIsActive(false)}
+        >
+          <Card>Content goes here</Card>
+        </Popover>
+      )}
+    </>
+  );
+};
+
+export const PopoverCustomPlacementDemo = () => {
+  const [isActive, setIsActive] = useState(false);
+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
+  const customRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div>
+      <div ref={customRef} id="SHOW-HERE">
+        RENDERS HERE
+      </div>
+      <Button ref={setAnchorRef} onClick={() => setIsActive(true)}>
+        Click to show popover
+      </Button>
+      {isActive && (
+        <Popover
+          placement="bottom-start"
+          anchorElement={anchorRef}
+          onShouldClose={() => setIsActive(false)}
+          rootElementRef={customRef?.current as HTMLElement}
+        >
+          <Card>Content goes here</Card>
+        </Popover>
+      )}
+    </div>
+  );
+};

package/src/components/Popover/PopoverDocs.mdx

@@ -0,0 +1,64 @@
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Button } from '../Button';
+import { Popover } from '.';
+import { PopoverDefaultDemo, PopoverCustomPlacementDemo } from './PopoverDemo';
+
+<Meta title="Components/UI/Popover" component={Popover} />
+
+# Popover
+
+#### Default/standard usecase
+
+<Canvas>
+  <PopoverDefaultDemo />
+</Canvas>
+
+#### Example with custom placement
+
+<Canvas>
+  <PopoverCustomPlacementDemo />
+</Canvas>
+
+## Usage
+
+```jsx
+import { VeeqoUI } from '@veeqo/components';
+
+const { Popover } = VeeqoUI;
+
+export default () => {
+  const [isActive, setIsActive] = useState(false);
+  const [anchorRef, setAnchorRef] = (useState < HTMLButtonElement) | (null > null);
+
+  return (
+    <>
+      <Button ref={setAnchorRef} onClick={() => setIsActive(true)}>
+        Click to show popover
+      </Button>
+      {isActive && (
+        <Popover
+          placement="bottom-start"
+          anchorElement={anchorRef}
+          onShouldClose={() => setIsActive(false)}
+        >
+          <Card>Content goes here</Card>
+        </Popover>
+      )}
+    </>
+  );
+};
+```
+
+## Props
+
+```ts
+PopoverProps: {
+    anchorElement: HTMLElement | null;
+    children: ReactNode;
+    className?: string;
+    onShouldClose?: (() => void);
+    placement?: Placement;
+    rootElementRef?: HTMLElement;
+    zIndex?: number;
+}
+```

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

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popover renders correctly 1`] = `
+<DocumentFragment>
+  <div>
+    <div
+      data-testid="custom-root"
+    >
+      Custom root element
+    </div>
+    <button
+      type="button"
+    >
+      TRIGGER
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Popover renders correctly within custom root element 1`] = `
+<DocumentFragment>
+  <div>
+    <div
+      data-testid="custom-root"
+    >
+      Custom root element
+    </div>
+    <button
+      type="button"
+    >
+      TRIGGER
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Popover/index.ts

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

package/src/components/Portal/Portal.stories.tsx

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

package/src/components/Portal/Portal.tsx

@@ -0,0 +1,62 @@
+import { PureComponent, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { generateId } from '../../utils/generateId';
+
+type PortalProps = {
+  children: ReactNode;
+  rootElementRef?: HTMLElement;
+};
+
+type PortalState = {
+  isMounted: boolean;
+};
+
+/**
+ * The portal component renders content on the document `body` unless `rootElementRef` is passed.
+ */
+export class Portal extends PureComponent<PortalProps, PortalState> {
+  id = generateId('portal');
+
+  portalNode: HTMLElement | null = null;
+
+  constructor(props: PortalProps) {
+    super(props);
+    this.state = {
+      isMounted: false,
+    };
+  }
+
+  componentDidMount() {
+    const { rootElementRef } = this.props;
+
+    this.portalNode = document.createElement('div');
+    this.portalNode.setAttribute('id', `portal-${this.id}`);
+    this.portalNode.style.cssText = 'position: absolute; top: 0; left: 0;';
+
+    if (rootElementRef) {
+      rootElementRef?.appendChild(this.portalNode);
+    } else {
+      document.body.appendChild(this.portalNode);
+    }
+
+    this.setState({ isMounted: true });
+  }
+
+  componentWillUnmount() {
+    if (this.portalNode) {
+      const { rootElementRef } = this.props;
+      if (rootElementRef) {
+        rootElementRef.removeChild(this.portalNode);
+      } else {
+        document.body.removeChild(this.portalNode);
+      }
+    }
+  }
+
+  render(): React.ReactPortal | null {
+    const { children } = this.props;
+    const { isMounted } = this.state;
+
+    return this.portalNode && isMounted ? createPortal(children, this.portalNode) : null;
+  }
+}

package/src/components/Portal/index.ts

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