@veeqo/ui 0.0.1 → 0.0.3

package/src/components/DataTableExp/components/ActionBar.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+import { renderHeader } from '../renderers/renderHeader';
+import { ColumnConfig } from '../types';
+import { headerCellHeight } from '../constants';
+
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  height: ${headerCellHeight};
+  background-color: white;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  border-bottom: 1px solid ${theme.colors.neutral.grey.base};
+
+  & > * {
+    flex: 1;
+  }
+`;
+
+export interface ActionBarProps {
+  children: ReactNode;
+  selectionColumn: ColumnConfig;
+  intersectionTargetRef: RefObject<HTMLElement>;
+  containerRef: RefObject<HTMLElement>;
+}
+
+export function ActionBar({
+  selectionColumn,
+  intersectionTargetRef,
+  containerRef,
+  children,
+}: ActionBarProps) {
+  const [isSticky, setIsSticky] = useState(false);
+
+  useEffect(() => {
+    if (!intersectionTargetRef.current) return;
+    const callback: IntersectionObserverCallback = (entries) => {
+      entries.forEach((entry) => {
+        setIsSticky(!entry.isIntersecting);
+      });
+    };
+    const intersectionObserver = new IntersectionObserver(callback);
+    intersectionObserver.observe(intersectionTargetRef.current);
+    /* eslint-disable-next-line consistent-return */
+    return () => intersectionObserver.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [intersectionTargetRef.current]);
+
+  const containerRect = containerRef.current?.getBoundingClientRect();
+
+  const defaultPositionStyles: CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  };
+
+  const stickyPositionStyles: CSSProperties = {
+    position: 'fixed',
+    top: 0,
+    left: containerRect?.left,
+    width: containerRect?.width,
+  };
+
+  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;
+
+  return (
+    <Container style={style}>
+      {renderHeader({ column: selectionColumn })}
+      <Content>{children}</Content>
+    </Container>
+  );
+}

package/src/components/DataTableExp/components/Cell.ts

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+import { ColumnAlignment, ColumnSpacing } from '../types';
+import { alignmentToFlex } from '../utils';
+import { defaultCellSpacing, footerCellHeight } from '../constants';
+
+export interface CellProps {
+  align?: ColumnAlignment;
+  spacing?: ColumnSpacing;
+  span?: number;
+}
+
+export const Cell = styled.td<CellProps>`
+  display: flex;
+  align-items: center;
+  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};
+
+  /* Styling */
+  background-color: white;
+  padding-bottom: var(--density);
+  padding-top: var(--density);
+  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};
+  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};
+
+  /* Content */
+  color: ${theme.text.bodySmall.color};
+  font-family: ${theme.text.bodySmall.fontFamily};
+  font-size: ${theme.text.bodySmall.fontSize};
+  font-style: ${theme.text.bodySmall.fontStyle};
+  font-weight: ${theme.text.bodySmall.fontWeight};
+  line-height: ${theme.text.bodySmall.lineHeight};
+
+  /* Grid */
+  grid-column-end: ${({ span = 1 }) => `span ${span}`};
+
+  tfoot & {
+    min-height: ${footerCellHeight};
+    border-top: 1px solid ${theme.colors.secondary.blue.base};
+    background-color: ${theme.colors.neutral.grey.lightest};
+  }
+`;

package/src/components/DataTableExp/components/ColumnHeader.tsx

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+
+export const SortIndicator = styled.div`
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  color: ${theme.colors.neutral.ink.lightest};
+`;
+
+export const HeaderContent = styled.span`
+  display: flex;
+  height: 28px;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+
+  color: ${theme.text.headingTable.color};
+  font-family: ${theme.text.headingTable.fontFamily};
+  font-size: ${theme.text.headingTable.fontSize};
+  font-style: ${theme.text.headingTable.fontStyle};
+  font-weight: ${theme.text.headingTable.fontWeight};
+  line-height: ${theme.text.headingTable.lineHeight};
+`;
+
+export const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({
+  as: 'button',
+  type: 'button',
+}))`
+  appearance: none;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background-color: transparent;
+
+  &:not(:disabled):hover {
+    cursor: pointer;
+  }
+
+  &:hover ${SortIndicator} {
+    background-color: ${theme.colors.neutral.grey.light};
+    color: ${theme.colors.neutral.ink.base};
+  }
+
+  &:focus-visible {
+    outline: 0;
+    box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};
+  }
+`;

package/src/components/DataTableExp/components/ColumnMenu.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+
+import { Button } from '../../Button';
+import { Card } from '../../Card';
+import { Popover } from '../../Popover';
+import { Stack } from '../../Stack';
+import { theme } from '../../../theme';
+import { ColumnConfig, ColumnConfigs, ColumnId } from '../types';
+
+import { VisiblityIcon } from '../../../tempIcons/VisibilityIcon';
+import { VisiblityOffIcon } from '../../../tempIcons/VisibilityOffIcon';
+import { ReorderIcon } from '../../../tempIcons/ReorderIcon';
+
+type ColumnsMap = {
+  [index: string]: ColumnConfig;
+};
+
+export interface ColumnMenuProps {
+  columns: ColumnConfigs;
+  columnGroups: ColumnId[][];
+  setColumns: (columns: ColumnConfigs) => void;
+}
+
+export function ColumnMenu({ columns, columnGroups, setColumns }: ColumnMenuProps) {
+  const [popoverAnchor, setPopoverAnchor] = useState<HTMLButtonElement | null>(null);
+  const [showPopover, setShowPopover] = useState(false);
+
+  const columnEntries = columns.map((column) => [column.id, column]);
+  const columnsMap: ColumnsMap = Object.fromEntries(columnEntries);
+  const groups = columnGroups.map((group) => group.map((columnId) => columnsMap[columnId]));
+
+  const setHidden = (groupIndex: number, hidden: boolean) => {
+    const columnIds = groups[groupIndex].map((column) => column.id);
+    const newColumns = [...columns];
+    columnIds.forEach((columnId) => {
+      const index = newColumns.findIndex((column) => column.id === columnId);
+      if (index < 0) return;
+      newColumns[index] = {
+        ...newColumns[index],
+        hidden,
+      };
+    });
+    setColumns(newColumns);
+  };
+
+  return (
+    <>
+      <Button ref={setPopoverAnchor} dropdown onClick={() => setShowPopover(true)}>
+        Columns
+      </Button>
+      {showPopover && (
+        <Popover anchorElement={popoverAnchor} onShouldClose={() => setShowPopover(false)}>
+          <Card style={{ width: 600 }}>
+            <Stack alignX="stretch" spacing="sm">
+              {groups.map((group, groupIndex) => (
+                <Stack
+                  key={group[0].id}
+                  direction="horizontal"
+                  alignY="center"
+                  spacing="sm"
+                  style={{
+                    border: '1px solid black',
+                    padding: 8,
+                  }}
+                >
+                  <Button variant="flat" icon={<ReorderIcon />} />
+                  <Stack spacing="sm" style={{ flex: 1 }}>
+                    {group.map((column) => (
+                      <div key={column.id}>{column.title}</div>
+                    ))}
+                  </Stack>
+                  <Stack direction="horizontal" spacing="sm">
+                    {group[0].hidden ? (
+                      <Button
+                        variant="flat"
+                        icon={<VisiblityOffIcon />}
+                        onClick={() => setHidden(groupIndex, false)}
+                        style={{ color: theme.colors.neutral.ink.lightest }}
+                      />
+                    ) : (
+                      <Button
+                        variant="flat"
+                        icon={<VisiblityIcon />}
+                        onClick={() => setHidden(groupIndex, true)}
+                      />
+                    )}
+                  </Stack>
+                </Stack>
+              ))}
+            </Stack>
+          </Card>
+        </Popover>
+      )}
+    </>
+  );
+}

package/src/components/DataTableExp/components/EmptyBodyContent.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+
+export interface EmptyBodyContentProps {
+  columnCount: number;
+}
+
+export const EmptyBodyContent = styled.div<EmptyBodyContentProps>`
+  padding-top: ${theme.sizes.lg};
+  padding-bottom: ${theme.sizes.lg};
+  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${theme.sizes.md};
+`;
+
+export const EmptyBodyGlyphWrapper = styled.div`
+  padding: ${theme.sizes.md};
+  background-color: ${theme.colors.neutral.grey.light};
+  border-radius: ${theme.radius.full};
+`;

package/src/components/DataTableExp/components/Header.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+import { alignmentToFlex } from '../utils';
+import { defaultCellSpacing, headerCellHeight } from '../constants';
+import { HeaderProps } from '../types';
+
+export const Header = styled.th<HeaderProps>`
+  height: ${headerCellHeight};
+
+  display: flex;
+  align-items: center;
+  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};
+
+  background-color: white;
+  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};
+  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};
+  border-bottom: 1px solid ${theme.colors.neutral.grey.base};
+
+  grid-column-end: ${({ span = 1 }) => `span ${span}`};
+`;

package/src/components/DataTableExp/components/LoadingCellContent.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+
+/* Loading content shimmer animation */
+const shimmerLight = theme.colors.neutral.grey.base;
+const shimmerDark = theme.colors.neutral.grey.dark;
+
+export const LoadingCellContent = styled.div`
+  height: 20px;
+  width: 75%;
+  border-radius: ${theme.radius.base};
+
+  background: ${shimmerLight};
+  background-image: linear-gradient(
+    to right,
+    ${shimmerLight} 0%,
+    ${shimmerDark} 20%,
+    ${shimmerLight} 40%,
+    ${shimmerLight} 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 800px 104px;
+
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeholderShimmer;
+  animation-timing-function: linear;
+
+  @keyframes placeholderShimmer {
+    0% {
+      background-position: -468px 0;
+    }
+
+    100% {
+      background-position: 468px 0;
+    }
+  }
+`;

package/src/components/DataTableExp/components/NoWrap.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const NoWrap = styled.div`
+  white-space: nowrap;
+`;

package/src/components/DataTableExp/components/Row.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+
+export interface RowProps {
+  accentColor?: string;
+  selected?: boolean;
+  expanded?: boolean;
+  disabled?: boolean;
+}
+
+export const Row = styled.tr<RowProps>`
+  display: contents;
+
+  ${({ selected }) =>
+    selected &&
+    `
+    &&&& > td {
+      background-color: ${theme.colors.brand.blue.lightest};
+    }
+  `};
+
+  ${({ accentColor }) =>
+    accentColor &&
+    `
+    &> *:first-child {
+      position: relative;
+    }
+
+    & > *:first-child::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 4px;
+      background-color: ${accentColor};
+    }
+  `}
+`;

package/src/components/DataTableExp/components/ScrollContainer.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const ScrollContainer = styled.div`
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+`;

package/src/components/DataTableExp/components/SelectionCell.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Checkbox } from '../../Checkbox';
+import { Radio } from '../../Radio';
+import { Cell, CellProps } from './Cell';
+import { RowId, SelectionMode } from '../types';
+
+export interface SelectionCellProps extends CellProps {
+  rowId: RowId;
+  selected: boolean;
+  onChange: (selected: boolean, value: RowId | undefined) => void;
+  selectionMode: SelectionMode;
+  disabled: boolean;
+}
+
+export function SelectionCell({
+  selected,
+  rowId,
+  onChange,
+  selectionMode,
+  disabled,
+  ...cellProps
+}: SelectionCellProps) {
+  if (selectionMode === 'single') {
+    return (
+      <Cell {...cellProps}>
+        <Radio value={rowId} checked={selected} disabled={disabled} onChange={onChange} />
+      </Cell>
+    );
+  }
+
+  return (
+    <Cell {...cellProps}>
+      <Checkbox value={rowId} checked={selected} disabled={disabled} onChange={onChange} />
+    </Cell>
+  );
+}

package/src/components/DataTableExp/components/SelectionHeader.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Checkbox } from '../../Checkbox';
+import { Header } from './Header';
+import { SelectionHeaderProps } from '../types';
+
+export function SelectionHeader({
+  selected,
+  indeterminate,
+  onChange,
+  selectionMode,
+  ...headerProps
+}: SelectionHeaderProps) {
+  if (selectionMode === 'single') return <Header {...headerProps} />;
+
+  return (
+    <Header {...headerProps}>
+      <Checkbox checked={selected} indeterminate={indeterminate} onChange={onChange} />
+    </Header>
+  );
+}

package/src/components/DataTableExp/components/StickyHead.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { CSSProperties, ReactNode, RefObject, useEffect, useRef, useState } from 'react';
+import throttle from 'lodash.throttle';
+import ResizeObserver from 'resize-observer-polyfill';
+import { theme } from '../../../theme';
+
+import { headerCellHeight } from '../constants';
+import { TableGrid } from './TableGrid';
+
+export interface StickyHeadProps {
+  tableCss: string;
+  children?: ReactNode;
+  intersectionTargetRef: RefObject<HTMLElement>;
+  containerRef: RefObject<HTMLElement>;
+  cellWidths: number[];
+}
+
+export function StickyHead({
+  children,
+  intersectionTargetRef,
+  containerRef,
+  cellWidths,
+  tableCss,
+}: StickyHeadProps) {
+  const stickyContainerRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [containerRect, setContainerRect] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+  });
+
+  const updateContainerDimensions = () => {
+    const targetRect = containerRef.current?.getBoundingClientRect();
+    const newRect = {
+      left: targetRect?.left || 0,
+      width: targetRect?.width || 0,
+      top: 0,
+      height: 48,
+    };
+    setContainerRect(newRect);
+  };
+
+  const updateContainerScrollPosition = () => {
+    if (!containerRef.current) return;
+    const xScrollOffset = containerRef.current.scrollLeft;
+    stickyContainerRef.current?.scrollTo(xScrollOffset, 0);
+  };
+
+  // Configure intersection observer to toggle sticky header on/off
+
+  useEffect(() => {
+    if (!intersectionTargetRef.current) return;
+    const options = {
+      threshold: 1.0,
+    };
+    const intersectionCallback: IntersectionObserverCallback = (entries) => {
+      entries.forEach((entry) => {
+        setIsVisible(!entry.isIntersecting);
+      });
+    };
+    const intersectionObserver = new IntersectionObserver(intersectionCallback, options);
+    intersectionObserver.observe(intersectionTargetRef.current);
+    return () => intersectionObserver.disconnect(); // eslint-disable-line consistent-return
+  }, [intersectionTargetRef.current]);
+
+  // Calculate sticky header position and size to match table container
+
+  useEffect(() => {
+    if (!isVisible) return;
+    if (!containerRef.current) return;
+    updateContainerDimensions();
+  }, [containerRef.current, isVisible]);
+
+  // Update dimensions when container element is resized
+
+  useEffect(() => {
+    if (!isVisible) return;
+    if (!containerRef.current) return;
+    const resizeObserverCallback = throttle(updateContainerDimensions, 33); // Throttle events
+    const resizeObserver = new ResizeObserver(resizeObserverCallback);
+    resizeObserver.observe(containerRef.current);
+    return () => resizeObserver.disconnect(); // eslint-disable-line consistent-return
+  }, [containerRef.current, isVisible]);
+
+  // Sync container scrolling
+
+  useEffect(() => {
+    updateContainerScrollPosition();
+  }, [isVisible]);
+
+  useEffect(() => {
+    containerRef.current?.addEventListener('scroll', updateContainerScrollPosition);
+    return () => {
+      containerRef.current?.removeEventListener('scroll', updateContainerScrollPosition);
+    };
+  }, [containerRef.current]);
+
+  // Render sticky header
+
+  if (!isVisible) return null;
+
+  const containerStyle: CSSProperties = {
+    ...containerRect,
+    height: headerCellHeight,
+    position: 'fixed',
+    zIndex: 5,
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+    borderBottom: `1px solid ${theme.colors.neutral.grey.base}`,
+  };
+
+  // Generate styles to sync sticky columns with "real" columns
+  const columnsCss = cellWidths
+    .map(
+      (width, index) => `
+    & th:nth-child(${index + 1}) {
+      width: ${width}px;
+    }
+  `,
+    )
+    .join('');
+  // Append to generated table styles
+  const allCss = tableCss + columnsCss;
+
+  return (
+    <div style={containerStyle} ref={stickyContainerRef}>
+      <TableGrid css={allCss}>
+        <thead>{children}</thead>
+      </TableGrid>
+    </div>
+  );
+}

package/src/components/DataTableExp/components/TableGrid.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+
+const defaultDensity = 'base';
+
+export interface TableGridProps {
+  css: string;
+}
+
+export const TableGrid = styled.table<TableGridProps>`
+  min-width: 100%;
+  width: max-content; /* Fixes sticky element bug in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1585254#c3 */
+  display: grid;
+
+  & thead,
+  & tbody,
+  & tfoot {
+    display: contents;
+  }
+
+  --density: ${theme.sizes[defaultDensity]};
+
+  && tr:hover td {
+    background-color: #f2f8fc;
+  }
+
+  ${({ css }) => css}/* CSS styles generate by hooks */
+`;

package/src/components/DataTableExp/components/Truncate.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Truncate = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

package/src/components/DataTableExp/components/Wrapper.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+import { BorderMode } from '../types';
+
+const borderModeStyles = {
+  full: `border-width: 1px; border-radius: ${theme.radius.base};`,
+  vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',
+  none: 'border-width: 0;',
+};
+
+export interface WrapperProps {
+  borderMode?: BorderMode;
+}
+
+export const Wrapper = styled.div<WrapperProps>`
+  width: 100%;
+  position: relative;
+  border-style: solid;
+  border-color: ${theme.colors.neutral.grey.dark};
+
+  ${({ borderMode = 'full' }) => borderModeStyles[borderMode]}
+
+  &, & * {
+    box-sizing: border-box;
+  }
+`;

package/src/components/DataTableExp/constants.ts

@@ -0,0 +1,4 @@
+export const defaultCellSpacing = 3;
+
+export const headerCellHeight = '56px';
+export const footerCellHeight = '56px';

package/src/components/DataTableExp/hooks/index.tsx

@@ -0,0 +1,6 @@
+export * from './useCellWidths';
+export * from './useColumns';
+export * from './useDragToScroll';
+export * from './useNested';
+export * from './useScrollPosition';
+export * from './useSelection';