@hyphen/hyphen-components 7.3.2 → 7.3.3

package/dist/index.js

@@ -1,4 +1,3 @@
-
 'use strict'
 
 if (process.env.NODE_ENV === 'production') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -14,25 +14,24 @@
     "src"
   ],
   "scripts": {
-    "build": "cross-env-shell BABEL_ENV=build IS_PUBLISHING=true \"dts build && webpack --config webpack.config.js\"",
-    "rollup": "cross-env-shell BABEL_ENV=build IS_PUBLISHING=true \"dts build\"",
+    "build": "cross-env IS_PUBLISHING=true tsup && node scripts/create-cjs-shim.js && cross-env IS_PUBLISHING=true webpack --config webpack.config.js",
     "build-storybook": "storybook build",
     "build-storybook-docs": "storybook build --docs",
     "storybook-docs": "storybook dev --docs",
-    "lint": "dts lint src",
-    "lint-fix": "dts lint src --fix",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint-fix": "eslint src --ext .ts,.tsx --fix",
     "size": "size-limit",
-    "start": "dts watch",
+    "start": "tsup --watch",
     "storybook": "storybook dev -p 6006",
-    "test": "dts test --passWithNoTests",
-    "test-watch": "dts test --watch",
+    "test": "jest --passWithNoTests",
+    "test-watch": "jest --coverage --watch",
     "semantic-release": "semantic-release",
     "prepare": "npm run build",
     "chromatic": "npx chromatic --project-token=chpt_8fddffb5556f0b7 --only-changed"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "dts lint src"
+      "pre-commit": "eslint src --ext .ts,.tsx"
     }
   },
   "prettier": {
@@ -41,9 +40,6 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "jest": {
-    "testEnvironment": "jsdom"
-  },
   "peerDependencies": {
     "react": ">=16"
   },
@@ -62,7 +58,7 @@
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^6.1.0",
+    "@hyphen/hyphen-design-tokens": "^7.0.1",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -98,10 +94,13 @@
     "@testing-library/user-event": "^14.6.1",
     "@tsconfig/recommended": "^1.0.7",
     "@tsconfig/vite-react": "^3.0.2",
+    "@types/jest": "^30.0.0",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-modal": "^3.16.3",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
     "chromatic": "^13.3.4",
@@ -111,17 +110,19 @@
     "css-minimizer-webpack-plugin": "^5.0.1",
     "cssnano": "^6.1.2",
     "csstype": "^3.1.3",
-    "dts-cli": "^2.0.5",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-preview": "^0.3.1",
     "mini-css-extract-plugin": "^2.9.1",
     "postcss-loader": "^7.3.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-scss": "^4.0.0",
     "sass": "^1.77.8",
     "sass-loader": "^13.3.3",
     "semantic-release": "^25.0.2",
@@ -129,14 +130,12 @@
     "storybook": "^9.1.3",
     "ts-jest": "^29.4.6",
     "tslib": "^2.8.1",
+    "tsup": "^8.0.0",
     "typescript": "^5.9.3",
     "url-loader": "^4.1.1",
     "vite": "^5.4.19",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-fix-style-only-entries": "^0.6.1"
-  },
-  "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.34.6"
   }
 }

package/src/components/Badge/Badge.module.scss

@@ -93,6 +93,12 @@
     color: var(--color-base-white);
   }
 
+  &.orange {
+    background: var(--color-background-brand-orange);
+    border-color: var(--color-border-brand-orange);
+    color: var(--color-base-white);
+  }
+
   &.hyphen {
     background: var(--color-background-brand-gradient);
     border-color: var(--color-base-yellow-500);

package/src/components/Badge/Badge.stories.tsx

@@ -12,6 +12,7 @@ const BADGE_VARIANTS: BadgeVariant[] = [
   'green',
   'yellow',
   'red',
+  'orange',
   'hyphen',
 ];
 

package/src/components/Badge/Badge.test.tsx

@@ -11,6 +11,7 @@ export const BADGE_VARIANTS: BadgeVariant[] = [
   'blue',
   'red',
   'purple',
+  'orange',
   'hyphen',
 ];
 
@@ -25,7 +26,7 @@ describe('Badge', () => {
 
   describe('Variants', () => {
     BADGE_VARIANTS.map((variant) =>
-      describe(`${BADGE_VARIANTS}`, () => {
+      describe(`${variant}`, () => {
         test(`it has a ${variant} class applied to it`, () => {
           render(<Badge variant={variant} message={`${variant} Badge`} />);
           const badge = screen.getByText(`${variant} Badge`);
@@ -38,7 +39,7 @@ describe('Badge', () => {
 
   describe('Sizes', () => {
     BADGE_SIZES.map((size) =>
-      describe(`${BADGE_SIZES}`, () => {
+      describe(`${size}`, () => {
         test(`it has a ${size} class applied to it`, () => {
           render(<Badge size={size} message={`${size} Badge`} />);
           const badge = screen.getByText(`${size} Badge`);

package/src/components/Badge/Badge.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, forwardRef } from 'react';
 import classNames from 'classnames';
-import { FontSize, BaseSpacing, ResponsiveProp } from '../../types';
+import { ResponsiveProp } from '../../types';
 import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
 import styles from './Badge.module.scss';
 import { Box, BoxProps } from '../Box/Box';
@@ -16,16 +16,16 @@ export type BadgeVariant =
   | 'blue'
   | 'red'
   | 'purple'
+  | 'orange'
   | 'hyphen';
 
-export type BadgeSizeAttributes = { fontSize: FontSize; padding: BaseSpacing };
 export interface BadgeProps extends BoxProps {
   /**
    * @deprecated Use children instead. The text message or ReactNode to be rendered in the badge.
    */
   message?: string | ReactNode;
   /**
-   * The size of the button.
+   * The size of the badge.
    */
   size?: BadgeSize | ResponsiveProp<BadgeSize>;
   /**
@@ -73,3 +73,5 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
     );
   }
 );
+
+Badge.displayName = 'Badge';

package/src/components/Box/Box.tsx

@@ -549,8 +549,8 @@ export const Box: FC<BoxProps> = forwardRef(
         'base',
       ];
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const findMatchingBreakpoint = (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         responsiveObj: ResponsiveProp<any>,
         key: BreakpointSizeWithBase
       ): string => {
@@ -589,10 +589,11 @@ export const Box: FC<BoxProps> = forwardRef(
     /**
      * Shallow merges existing classes of child node with a className based on the childGap value.
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const decorateChildren = (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       child: string | number | ReactElement<any>,
       i: number,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       array: ReactElement<any>[]
     ) => {
       if (
@@ -643,6 +644,8 @@ export const Box: FC<BoxProps> = forwardRef(
   }
 );
 
+Box.displayName = 'Box';
+
 export const boxPropsKeys: (keyof Pick<BoxProps, KnownKeys<BoxProps>>)[] = [
   'as',
   'alignItems',

package/src/components/Button/Button.module.scss

@@ -1,7 +1,7 @@
 @import '@hyphen/hyphen-design-tokens/build/scss/variables';
 
 :root {
-  --button-box-shadow-focus: 0 0 0 4px var(--color-base-primary-200);
+  --button-box-shadow-focus: 0 0 0 4px var(--color-base-grey-300);
   --button-neutral-box-shadow-focus: 0 0 0 4px var(--color-base-grey-200);
   --button-danger-box-shadow-focus: 0 0 0 4px var(--color-base-danger-200);
 }

package/src/components/Button/Button.test.tsx

@@ -18,7 +18,7 @@ describe('Button', () => {
       expect(button).toHaveAttribute('aria-disabled', 'true');
       expect(button).toBeDisabled();
 
-      rerender(<Button isLoading={false} children="Loading Button" />);
+      rerender(<Button isLoading={false}>Loading Button</Button>);
       expect(button).not.toHaveAttribute('aria-disabled');
       expect(button).not.toBeDisabled();
     });
@@ -32,7 +32,7 @@ describe('Button', () => {
       expect(button).toHaveAttribute('aria-disabled', 'true');
       expect(button).toBeDisabled();
 
-      rerender(<Button isDisabled={false} children="Disabled Button" />);
+      rerender(<Button isDisabled={false}>Disabled Button</Button>);
       expect(button).not.toHaveAttribute('aria-disabled');
       expect(button).not.toBeDisabled();
     });

package/src/components/Calendar/Calendar.test.tsx

@@ -0,0 +1,262 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Calendar } from './Calendar';
+
+describe('Calendar', () => {
+  describe('Rendering', () => {
+    test('renders the calendar component', () => {
+      render(<Calendar />);
+      expect(screen.getByRole('grid')).toBeInTheDocument();
+    });
+
+    test('renders with default class names when no className provided', () => {
+      const { container } = render(<Calendar />);
+      const calendarRoot = container.querySelector('.rdp-root');
+      expect(calendarRoot).toHaveClass('p-lg', 'bw-sm', 'br-sm');
+    });
+
+    test('renders with custom className when provided', () => {
+      const { container } = render(<Calendar className="custom-calendar" />);
+      const calendarRoot = container.querySelector('.rdp-root');
+      expect(calendarRoot).toHaveClass('custom-calendar');
+    });
+
+    test('renders navigation buttons', () => {
+      render(<Calendar />);
+      const prevButton = screen.getByRole('button', { name: /previous/i });
+      const nextButton = screen.getByRole('button', { name: /next/i });
+      expect(prevButton).toBeInTheDocument();
+      expect(nextButton).toBeInTheDocument();
+    });
+
+    test('renders weekday headers', () => {
+      render(<Calendar />);
+      // Check for some weekday abbreviations
+      expect(screen.getByText('Su')).toBeInTheDocument();
+      expect(screen.getByText('Mo')).toBeInTheDocument();
+      expect(screen.getByText('Tu')).toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation', () => {
+    test('navigates to previous month when clicking previous button', () => {
+      const testDate = new Date(2024, 5, 15); // June 2024
+      render(<Calendar defaultMonth={testDate} />);
+
+      expect(screen.getByText('June 2024')).toBeInTheDocument();
+
+      const prevButton = screen.getByRole('button', { name: /previous/i });
+      fireEvent.click(prevButton);
+
+      expect(screen.getByText('May 2024')).toBeInTheDocument();
+    });
+
+    test('navigates to next month when clicking next button', () => {
+      const testDate = new Date(2024, 5, 15); // June 2024
+      render(<Calendar defaultMonth={testDate} />);
+
+      expect(screen.getByText('June 2024')).toBeInTheDocument();
+
+      const nextButton = screen.getByRole('button', { name: /next/i });
+      fireEvent.click(nextButton);
+
+      expect(screen.getByText('July 2024')).toBeInTheDocument();
+    });
+  });
+
+  describe('Selection', () => {
+    test('calls onSelect when a day is clicked (single mode)', () => {
+      const handleSelect = jest.fn();
+      const testDate = new Date(2024, 5, 15); // June 2024
+      render(
+        <Calendar
+          mode="single"
+          defaultMonth={testDate}
+          onSelect={handleSelect}
+        />
+      );
+
+      // In react-day-picker v9, we need to click the button inside the day cell
+      const dayButton = screen.getByRole('button', { name: /June 16th/i });
+      fireEvent.click(dayButton);
+
+      expect(handleSelect).toHaveBeenCalled();
+    });
+
+    test('supports range selection mode', () => {
+      const handleSelect = jest.fn();
+      const testDate = new Date(2024, 5, 1); // June 2024
+      render(
+        <Calendar
+          mode="range"
+          defaultMonth={testDate}
+          onSelect={handleSelect}
+        />
+      );
+
+      const day10 = screen.getByRole('button', { name: /June 10th/i });
+      const day18 = screen.getByRole('button', { name: /June 18th/i });
+
+      fireEvent.click(day10);
+      fireEvent.click(day18);
+
+      expect(handleSelect).toHaveBeenCalled();
+    });
+
+    test('supports multiple selection mode', () => {
+      const handleSelect = jest.fn();
+      const testDate = new Date(2024, 5, 1); // June 2024
+      render(
+        <Calendar
+          mode="multiple"
+          defaultMonth={testDate}
+          onSelect={handleSelect}
+        />
+      );
+
+      const day6 = screen.getByRole('button', { name: /June 6th/i });
+      const day12 = screen.getByRole('button', { name: /June 12th/i });
+
+      fireEvent.click(day6);
+      fireEvent.click(day12);
+
+      expect(handleSelect).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('Controlled selection', () => {
+    test('renders with selected date in single mode', () => {
+      const selectedDate = new Date(2024, 5, 16); // June 16, 2024
+      const { container } = render(
+        <Calendar mode="single" selected={selectedDate} month={selectedDate} />
+      );
+
+      // The selected day should have the selected class
+      const selectedDay = container.querySelector('[data-selected="true"]');
+      expect(selectedDay).toBeInTheDocument();
+    });
+  });
+
+  describe('Disabled dates', () => {
+    test('disables specific dates via disabled prop', () => {
+      const testDate = new Date(2024, 5, 1); // June 2024
+      const disabledDate = new Date(2024, 5, 11); // June 11, 2024
+      const { container } = render(
+        <Calendar defaultMonth={testDate} disabled={[disabledDate]} />
+      );
+
+      // The disabled day cell should have the disabled data attribute
+      const disabledCell = container.querySelector('[data-disabled="true"]');
+      expect(disabledCell).toBeInTheDocument();
+    });
+
+    test('disables dates before a specific date', () => {
+      const testDate = new Date(2024, 5, 15); // June 2024
+      const { container } = render(
+        <Calendar
+          defaultMonth={testDate}
+          disabled={{ before: new Date(2024, 5, 10) }}
+        />
+      );
+
+      // Multiple dates should be disabled
+      const disabledCells = container.querySelectorAll(
+        '[data-disabled="true"]'
+      );
+      expect(disabledCells.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Caption layout', () => {
+    test('defaults to label caption layout', () => {
+      const testDate = new Date(2024, 5, 15); // June 2024
+      render(<Calendar defaultMonth={testDate} />);
+      expect(screen.getByText('June 2024')).toBeInTheDocument();
+    });
+
+    test('supports dropdown caption layout', () => {
+      const testDate = new Date(2024, 5, 15); // June 2024
+      render(
+        <Calendar
+          defaultMonth={testDate}
+          captionLayout="dropdown"
+          startMonth={new Date(2020, 0)}
+          endMonth={new Date(2030, 11)}
+        />
+      );
+
+      // With dropdown, month and year should be selectable
+      expect(
+        screen.getByRole('combobox', { name: /month/i })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('combobox', { name: /year/i })
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Number of months', () => {
+    test('can display multiple months', () => {
+      const testDate = new Date(2024, 5, 15); // June 2024
+      render(<Calendar defaultMonth={testDate} numberOfMonths={2} />);
+
+      expect(screen.getByText('June 2024')).toBeInTheDocument();
+      expect(screen.getByText('July 2024')).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom styling', () => {
+    test('applies custom CSS variables for theming', () => {
+      const { container } = render(<Calendar />);
+      const calendarRoot = container.querySelector('.rdp-root');
+
+      expect(calendarRoot).toHaveStyle({
+        '--rdp-accent-color': 'var(--color-font-base)',
+      });
+    });
+  });
+
+  describe('Chevron icons', () => {
+    test('renders chevron icon for previous navigation', () => {
+      render(<Calendar />);
+      const prevButton = screen.getByRole('button', { name: /previous/i });
+      // The Icon component renders an SVG
+      const icon = prevButton.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+    });
+
+    test('renders chevron icon for next navigation', () => {
+      render(<Calendar />);
+      const nextButton = screen.getByRole('button', { name: /next/i });
+      // The Icon component renders an SVG
+      const icon = nextButton.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+    });
+  });
+
+  describe('Props passthrough', () => {
+    test('passes additional props to DayPicker', () => {
+      const handleMonthChange = jest.fn();
+      const testDate = new Date(2024, 5, 15); // June 2024
+      render(
+        <Calendar defaultMonth={testDate} onMonthChange={handleMonthChange} />
+      );
+
+      const nextButton = screen.getByRole('button', { name: /next/i });
+      fireEvent.click(nextButton);
+
+      expect(handleMonthChange).toHaveBeenCalled();
+    });
+  });
+
+  describe('Today indicator', () => {
+    test('renders today with bold font weight class', () => {
+      const today = new Date();
+      render(<Calendar defaultMonth={today} />);
+
+      // The calendar should have today's date styled
+      const calendarGrid = screen.getByRole('grid');
+      expect(calendarGrid).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Card/Card.tsx

@@ -40,6 +40,8 @@ export const CardBaseComponent: React.FC<CardProps> = React.forwardRef(
   }
 );
 
+CardBaseComponent.displayName = 'Card';
+
 export interface CardStatic {
   Header: typeof CardHeader;
   Section: typeof CardSection;

package/src/components/CheckboxInput/components/Checkbox.module.scss

@@ -125,7 +125,7 @@ $lg-dimension: 36px;
   input:checked:disabled + div {
     color: var(
       --form-control-checkbox-color-checked-disabled,
-      var(--color-base-primary-200)
+      var(--color-base-grey-200)
     );
   }
 

package/src/components/CheckboxInput/components/Checkbox.tsx

@@ -174,3 +174,5 @@ export const Checkbox: React.FC<CheckboxProps> = React.forwardRef(
     );
   }
 );
+
+Checkbox.displayName = 'Checkbox';

package/src/components/Details/Details.module.scss

@@ -13,13 +13,13 @@
 
     &:focus {
       outline: 0;
-      box-shadow: 0 0 0 2px var(--color-base-primary-light);
+      box-shadow: 0 0 0 2px var(--color-base-grey-200);
     }
 
     //Show focus styles on keyboard focus.
     &:focus-visible {
       outline: 0;
-      box-shadow: 0 0 0 2px var(--color-base-primary-light);
+      box-shadow: 0 0 0 2px var(--color-base-grey-200);
     }
 
     // Hide focus styles if they are not needed, for example,

package/src/components/Details/Details.tsx

@@ -35,6 +35,8 @@ export const DetailsBaseComponent: React.FC<DetailsProps> = React.forwardRef<
   );
 });
 
+DetailsBaseComponent.displayName = 'Details';
+
 export interface DetailsStatic {
   Summary: typeof DetailsSummary;
 }

package/src/components/Drawer/Drawer.stories.tsx

@@ -240,7 +240,7 @@ export const Width = () => {
     <DrawerProvider defaultIsOpen={false}>
       <Box gap="md" direction="row">
         {widths.map((width: string) => (
-          <DrawerTrigger asChild>
+          <DrawerTrigger asChild key={width}>
             <Button
               variant="primary"
               onClick={() => handleClick(width as WidthSize)}