@jordan-mace/chaser-design-system 1.2.2 → 1.2.4

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,138 @@
+import clsx from 'clsx';
+import React from 'react';
+import { paginationContainer, pageButton, pageButtonVariants, ellipsis } from './styles.css';
+import Box from '../Box';
+
+export type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+  showFirstLast?: boolean;
+  showPrevNext?: boolean;
+};
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  showFirstLast = true,
+  showPrevNext = true,
+}: PaginationProps) => {
+  const generatePageNumbers = () => {
+    const pages: (number | string)[] = [];
+    
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    
+    const shouldShowLeftEllipsis = leftSiblingIndex > 2;
+    const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;
+    
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      
+      if (shouldShowLeftEllipsis) {
+        pages.push('left-ellipsis');
+      } else if (currentPage > 3) {
+        for (let i = 2; i < leftSiblingIndex; i++) {
+          pages.push(i);
+        }
+      }
+      
+      for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+        if (i !== 1 && i !== totalPages) {
+          pages.push(i);
+        }
+      }
+      
+      if (shouldShowRightEllipsis) {
+        pages.push('right-ellipsis');
+      } else if (currentPage < totalPages - 2) {
+        for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
+          pages.push(i);
+        }
+      }
+      
+      pages.push(totalPages);
+    }
+    
+    return pages;
+  };
+  
+  const pages = generatePageNumbers();
+  
+  return (
+    <Box className={paginationContainer}>
+      {showFirstLast && (
+        <Box
+          as="button"
+          className={clsx(pageButton, pageButtonVariants.default)}
+          onClick={() => onPageChange(1)}
+          disabled={currentPage === 1}
+        >
+          {'<<'}
+        </Box>
+      )}
+      
+      {showPrevNext && (
+        <Box
+          as="button"
+          className={clsx(pageButton, pageButtonVariants.default)}
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+        >
+          {'<'}
+        </Box>
+      )}
+      
+      {pages.map((page, index) => (
+        typeof page === 'number' ? (
+          <Box
+            key={`page-${page}`}
+            as="button"
+            className={clsx(
+              pageButton,
+              page === currentPage ? pageButtonVariants.active : pageButtonVariants.default
+            )}
+            onClick={() => onPageChange(page)}
+          >
+            {page}
+          </Box>
+        ) : (
+          <Box key={`${page}-${index}`} className={ellipsis}>
+            ...
+          </Box>
+        )
+      ))}
+      
+      {showPrevNext && (
+        <Box
+          as="button"
+          className={clsx(pageButton, pageButtonVariants.default)}
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+        >
+          {'>'}
+        </Box>
+      )}
+      
+      {showFirstLast && (
+        <Box
+          as="button"
+          className={clsx(pageButton, pageButtonVariants.default)}
+          onClick={() => onPageChange(totalPages)}
+          disabled={currentPage === totalPages}
+        >
+          {'>>'}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default Pagination;

package/src/components/Pagination/index.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';

package/src/components/Pagination/styles.css.ts

@@ -0,0 +1,48 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const paginationContainer = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5rem',
+});
+
+export const pageButton = styleWithLayer({
+  padding: '0.5rem 0.75rem',
+  borderRadius: '0.5rem',
+  border: `1px solid ${vars.colors.borderDefault}`,
+  backgroundColor: 'transparent',
+  cursor: 'pointer',
+  minWidth: '2.5rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ':disabled': {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
+});
+
+export const pageButtonVariants = styleVariants({
+  default: {
+    color: vars.colors.textPrimary,
+    ':hover': {
+      backgroundColor: vars.colors.buttonBackgroundSecondary,
+    },
+  },
+  active: {
+    backgroundColor: vars.colors.buttonBackgroundPrimary,
+    color: vars.colors.buttonTextPrimary,
+    borderColor: vars.colors.buttonBackgroundPrimary,
+    ':hover': {
+      backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
+    },
+  },
+});
+
+export const ellipsis = styleWithLayer({
+  padding: '0.5rem',
+  color: vars.colors.textPrimary,
+  userSelect: 'none',
+});

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { Popover } from '.';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Components/Popover',
+  component: Popover,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ClickTrigger: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Click me" />,
+    title: 'Popover Title',
+    children: 'This is the popover content. It can contain any React content.',
+    triggerType: 'click',
+    defaultOpen: true,
+  },
+};
+
+export const HoverTrigger: Story = {
+  args: {
+    trigger: <Button variant="secondary" label="Hover me" />,
+    children: 'This popover appears on hover.',
+    triggerType: 'hover',
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Open Popover" />,
+    title: 'Confirmation',
+    children: 'Are you sure you want to proceed with this action?',
+    footer: (
+      <>
+        <Button variant="secondary" label="Cancel" />
+        <Button variant="primary" label="Confirm" />
+      </>
+    ),
+    defaultOpen: true,
+  },
+};
+
+export const WithoutArrow: Story = {
+  args: {
+    trigger: <Button variant="primary" label="No Arrow" />,
+    title: 'No Arrow Popover',
+    children: 'This popover does not show the arrow pointer.',
+    showArrow: false,
+    defaultOpen: true,
+  },
+};
+
+export const PositionLeft: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Left Position" />,
+    title: 'Left Aligned',
+    children: 'This popover appears to the left.',
+    position: 'left',
+    defaultOpen: true,
+  },
+};
+
+export const PositionTop: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Top Position" />,
+    title: 'Top Aligned',
+    children: 'This popover appears at the top.',
+    position: 'top',
+    defaultOpen: true,
+  },
+};

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

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Popover from './Popover';
+import React from 'react';
+import { Button } from '../Button';
+
+describe('Popover', () => {
+  it('renders correctly with default props', async () => {
+    const { container } = await render(
+      <Popover
+        trigger={<Button variant="primary" label="Click me" />}
+        title="Popover Title"
+        defaultOpen={true}
+      >
+        Popover content goes here
+      </Popover>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders without title', async () => {
+    const { container } = await render(
+      <Popover
+        trigger={<Button variant="primary" label="Hover me" />}
+        triggerType="hover"
+        defaultOpen={true}
+      >
+        Simple popover content
+      </Popover>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with footer', async () => {
+    const { container } = await render(
+      <Popover
+        trigger={<Button variant="primary" label="Open" />}
+        title="Confirmation"
+        footer={<button>Confirm</button>}
+        defaultOpen={true}
+      >
+        Are you sure you want to proceed?
+      </Popover>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,171 @@
+import clsx from 'clsx';
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  popoverContainer,
+  popoverTrigger,
+  popoverContent,
+  popoverPositionVariants,
+  popoverArrow,
+  popoverArrowPositionVariants,
+  popoverHeader,
+  popoverTitle,
+  popoverCloseButton,
+  popoverBody,
+  popoverFooter,
+} from './styles.css';
+import Box from '../Box';
+
+export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export type PopoverTriggerType = 'click' | 'hover';
+
+export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  position?: PopoverPosition;
+  title?: string;
+  footer?: React.ReactNode;
+  showArrow?: boolean;
+  triggerType?: PopoverTriggerType;
+  closeOnClickOutside?: boolean;
+  closeOnEscape?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+const Popover = ({
+  trigger,
+  children,
+  position = 'bottom',
+  title,
+  footer,
+  showArrow = true,
+  triggerType = 'click',
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  ...props
+}: PopoverProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    onOpenChange?.(isOpen);
+  }, [isOpen, onOpenChange]);
+
+  useEffect(() => {
+    if (!closeOnClickOutside) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, closeOnClickOutside]);
+
+  useEffect(() => {
+    if (!closeOnEscape) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, closeOnEscape]);
+
+  const handleTriggerClick = () => {
+    if (triggerType === 'click') {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleTriggerMouseEnter = () => {
+    if (triggerType === 'hover') {
+      setIsOpen(true);
+    }
+  };
+
+  const handleTriggerMouseLeave = () => {
+    if (triggerType === 'hover') {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <Box
+      ref={containerRef}
+      className={clsx(popoverContainer, className)}
+      onMouseEnter={handleTriggerMouseEnter}
+      onMouseLeave={handleTriggerMouseLeave}
+      {...props}
+    >
+      <Box
+        className={popoverTrigger}
+        onClick={handleTriggerClick}
+        aria-expanded={isOpen}
+      >
+        {trigger}
+      </Box>
+      
+      {isOpen && (
+        <Box
+          className={clsx(popoverContent, popoverPositionVariants[position])}
+          role="dialog"
+          aria-modal="false"
+        >
+          {showArrow && (
+            <Box
+              as="span"
+              className={clsx(popoverArrow, popoverArrowPositionVariants[position])}
+            />
+          )}
+          
+          {(title || triggerType === 'click') && (
+            <Box as="div" className={popoverHeader}>
+              {title && (
+                <Box as="h3" className={popoverTitle}>
+                  {title}
+                </Box>
+              )}
+              {triggerType === 'click' && (
+                <Box
+                  as="button"
+                  className={popoverCloseButton}
+                  onClick={() => setIsOpen(false)}
+                  aria-label="Close popover"
+                  type="button"
+                >
+                  ×
+                </Box>
+              )}
+            </Box>
+          )}
+          
+          <Box as="div" className={popoverBody}>
+            {children}
+          </Box>
+          
+          {footer && (
+            <Box as="div" className={popoverFooter}>
+              {footer}
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default Popover;

package/src/components/Popover/index.ts

@@ -0,0 +1,2 @@
+export { default as Popover } from './Popover';
+export type { PopoverProps, PopoverPosition, PopoverTriggerType } from './Popover';

package/src/components/Popover/styles.css.ts

@@ -0,0 +1,197 @@
+import { style, styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+const fadeIn = keyframes({
+  from: { opacity: 0, transform: 'scale(0.95)' },
+  to: { opacity: 1, transform: 'scale(1)' },
+});
+
+export const popoverContainer = styleWithLayer({
+  position: 'relative',
+  display: 'inline-block',
+});
+
+export const popoverTrigger = styleWithLayer({
+  cursor: 'pointer',
+});
+
+export const popoverContent = styleWithLayer({
+  position: 'absolute',
+  backgroundColor: vars.colors.backgroundDefault,
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '0.75rem',
+  boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  zIndex: 50,
+  padding: '1rem',
+  minWidth: '200px',
+  maxWidth: '400px',
+  animation: `${fadeIn} 0.15s ease-out`,
+});
+
+export const popoverPositionVariants = styleVariants({
+  top: {
+    bottom: '100%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginBottom: '0.5rem',
+  },
+  bottom: {
+    top: '100%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginTop: '0.5rem',
+  },
+  left: {
+    right: '100%',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    marginRight: '0.5rem',
+  },
+  right: {
+    left: '100%',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    marginLeft: '0.5rem',
+  },
+  topLeft: {
+    bottom: '100%',
+    right: 0,
+    marginBottom: '0.5rem',
+  },
+  topRight: {
+    bottom: '100%',
+    left: 0,
+    marginBottom: '0.5rem',
+  },
+  bottomLeft: {
+    top: '100%',
+    right: 0,
+    marginTop: '0.5rem',
+  },
+  bottomRight: {
+    top: '100%',
+    left: 0,
+    marginTop: '0.5rem',
+  },
+});
+
+export const popoverArrow = styleWithLayer({
+  position: 'absolute',
+  width: '8px',
+  height: '8px',
+  backgroundColor: vars.colors.backgroundDefault,
+  border: `1px solid ${vars.colors.borderDefault}`,
+  transform: 'rotate(45deg)',
+});
+
+export const popoverArrowPositionVariants = styleVariants({
+  top: {
+    bottom: '-5px',
+    left: '50%',
+    transform: 'translateX(-50%) rotate(45deg)',
+    borderTop: 'none',
+    borderLeft: 'none',
+  },
+  bottom: {
+    top: '-5px',
+    left: '50%',
+    transform: 'translateX(-50%) rotate(45deg)',
+    borderBottom: 'none',
+    borderRight: 'none',
+  },
+  left: {
+    right: '-5px',
+    top: '50%',
+    transform: 'translateY(-50%) rotate(45deg)',
+    borderLeft: 'none',
+    borderBottom: 'none',
+  },
+  right: {
+    left: '-5px',
+    top: '50%',
+    transform: 'translateY(-50%) rotate(45deg)',
+    borderRight: 'none',
+    borderTop: 'none',
+  },
+  topLeft: {
+    bottom: '-5px',
+    right: '1rem',
+    transform: 'rotate(45deg)',
+    borderTop: 'none',
+    borderLeft: 'none',
+  },
+  topRight: {
+    bottom: '-5px',
+    left: '1rem',
+    transform: 'rotate(45deg)',
+    borderTop: 'none',
+    borderLeft: 'none',
+  },
+  bottomLeft: {
+    top: '-5px',
+    right: '1rem',
+    transform: 'rotate(45deg)',
+    borderBottom: 'none',
+    borderRight: 'none',
+  },
+  bottomRight: {
+    top: '-5px',
+    left: '1rem',
+    transform: 'rotate(45deg)',
+    borderBottom: 'none',
+    borderRight: 'none',
+  },
+});
+
+export const popoverHeader = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  marginBottom: '0.75rem',
+  paddingBottom: '0.75rem',
+  borderBottom: `1px solid ${vars.colors.borderMuted}`,
+});
+
+export const popoverTitle = styleWithLayer({
+  fontFamily: vars.fontFamily.heading,
+  fontSize: '1rem',
+  fontWeight: '600',
+  color: vars.colors.textPrimary,
+  margin: 0,
+});
+
+export const popoverCloseButton = styleWithLayer({
+  background: 'none',
+  border: 'none',
+  padding: '0.25rem',
+  cursor: 'pointer',
+  borderRadius: '0.25rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: vars.colors.textSecondary,
+  fontSize: '1.25rem',
+  lineHeight: '1',
+  marginLeft: '0.5rem',
+  transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+  ':hover': {
+    backgroundColor: vars.colors.borderMuted,
+    color: vars.colors.textPrimary,
+  },
+});
+
+export const popoverBody = styleWithLayer({
+  fontSize: '14px',
+  color: vars.colors.textPrimary,
+  lineHeight: '1.5',
+});
+
+export const popoverFooter = styleWithLayer({
+  display: 'flex',
+  gap: '0.5rem',
+  justifyContent: 'flex-end',
+  marginTop: '0.75rem',
+  paddingTop: '0.75rem',
+  borderTop: `1px solid ${vars.colors.borderMuted}`,
+});