@veeqo/ui 0.0.4 → 0.0.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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