@hyphen/hyphen-components 7.6.1 → 7.8.0

package/dist/index.d.ts

@@ -4,13 +4,12 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { BorderRadiusSize as BorderRadiusSize$1, BreakpointSize, SpacingSize, WidthSize, HeightSize, BackgroundColor, BorderColor, BorderSize, FontColor, FontFamily, FontSize, FontWeight, BoxShadowSize, TextTransform, TextWrap, ZIndexSize, IconName, HeadingSize, ColorName, BaseColor, LineHeightSize } from '@hyphen/hyphen-design-tokens/build/types';
 export { BackgroundColor, BaseColor, BorderColor, BorderSize, BoxShadowSize, BreakpointSize, ColorName, FontColor, FontFamily, FontSize, FontWeight, HeadingSize, HeightSize, IconName, LineHeightSize, SpacingSize, TextDecorationLine, TextDecorationStyle, TextTransform, TextWrap, WhiteSpace, WidthSize, WordBreak, ZIndexSize } from '@hyphen/hyphen-design-tokens/build/types';
 import * as CSS from 'csstype';
-import { DayPickerProps } from 'react-day-picker';
-export { Matcher } from 'react-day-picker';
+import { DayPickerProps } from '@daypicker/react';
+export { Matcher } from '@daypicker/react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { FieldAttributes, FormikTouched, FormikValues, FormikErrors } from 'formik';
-import { OnChangeValue, OptionsOrGroups } from 'react-select';
-import { GroupBase } from 'react-select/dist/declarations/src/types';
+import { OnChangeValue, OptionsOrGroups, GroupBase } from 'react-select';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -2005,14 +2004,14 @@ interface HeadingProps {
     className?: string;
     /**
      * A variant token identifier to use for the text variant. Available variants found:
-     * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/color/font.json).
+     * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/color/font.json).
      */
     color?: FontColor;
     /**
      * By default, size is determined by the chosen tag (e.g. h1 is bigger than h2).
      * However, size can be set independently so that its size is appropriate for the surrounding content.
      * Available sizes found:
-     * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/size/font.json).
+     * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/size/font.json).
      */
     size?: HeadingSize | ResponsiveProp<HeadingSize>;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.6.1",
+  "version": "7.8.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -15,40 +15,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Hyphen/hyphen-components.git"
-  },
-  "scripts": {
-    "build": "cross-env IS_PUBLISHING=true tsup && cross-env IS_PUBLISHING=true webpack --config webpack.config.js && node scripts/create-cjs-shim.js",
-    "build-storybook": "storybook build",
-    "build-storybook-docs": "storybook build --docs",
-    "storybook-docs": "storybook dev --docs",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint-fix": "eslint src --ext .ts,.tsx --fix",
-    "size": "size-limit",
-    "start": "tsup --watch",
-    "storybook": "storybook dev -p 6006",
-    "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": "eslint src --ext .ts,.tsx"
-    }
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+    "url": "git+https://github.com/Hyphen/hyphen-components.git",
+    "directory": "packages/components"
   },
   "peerDependencies": {
     "react": ">=16"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=20.19.0 <21 || >=22.12.0"
   },
   "size-limit": [
     {
@@ -61,38 +35,38 @@
     }
   ],
   "dependencies": {
+    "@daypicker/react": "^10.0.1",
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^7.6.0",
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-aspect-ratio": "^1.1.9",
+    "@radix-ui/react-collapsible": "^1.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
+    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-toggle": "^1.1.11",
+    "@radix-ui/react-toggle-group": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.9",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
-    "formik": "^2.4.6",
-    "react-day-picker": "^9.11.3",
+    "formik": "^2.4.9",
     "react-focus-lock": "^2.13.2",
     "react-modal": "^3.16.3",
-    "react-remove-scroll": "^2.6.3",
-    "react-router-dom": "^6.26.1",
+    "react-remove-scroll": "^2.7.2",
+    "react-router-dom": "^6.30.4",
     "react-select": "^5.10.0",
     "react-select-event": "^5.5.1",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.1",
+    "@hyphen/hyphen-design-tokens": "^7.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
-    "@chromatic-com/storybook": "^4.1.3",
-    "@semantic-release/commit-analyzer": "^11.1.0",
+    "@chromatic-com/storybook": "^5.2.1",
     "@size-limit/preset-small-lib": "^11.2.0",
-    "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-themes": "^9.1.3",
-    "@storybook/react-vite": "^9.1.3",
+    "@storybook/addon-a11y": "10.4.2",
+    "@storybook/addon-docs": "10.4.2",
+    "@storybook/addon-themes": "10.4.2",
+    "@storybook/addon-vitest": "10.4.2",
+    "@storybook/react-vite": "10.4.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -105,24 +79,30 @@
     "@types/react-modal": "^3.16.3",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
-    "chromatic": "^13.3.4",
+    "chromatic": "^13.3.5",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.11.0",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "cssnano": "^6.1.2",
     "csstype": "^3.1.3",
+    "eslint": "^8.57.0",
     "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",
+    "eslint-plugin-storybook": "10.4.2",
     "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-preview": "^0.3.1",
     "mini-css-extract-plugin": "^2.9.1",
+    "playwright": "^1.60.0",
+    "postcss": "^8.4.47",
     "postcss-loader": "^7.3.4",
     "postcss-modules": "^6.0.0",
     "react": "^18.3.1",
@@ -130,17 +110,31 @@
     "react-is": "^18.3.1",
     "sass": "^1.77.8",
     "sass-loader": "^13.3.3",
-    "semantic-release": "^25.0.2",
     "size-limit": "^11.2.0",
-    "storybook": "^9.1.3",
+    "storybook": "10.4.2",
     "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",
+    "vite": "^6.4.2",
+    "vitest": "^4.1.8",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-fix-style-only-entries": "^0.6.1"
+  },
+  "scripts": {
+    "build": "cross-env IS_PUBLISHING=true tsup && cross-env IS_PUBLISHING=true webpack --config webpack.config.js && node scripts/create-cjs-shim.js",
+    "build-storybook": "storybook build",
+    "build-storybook-docs": "storybook build --docs",
+    "storybook-docs": "storybook dev --docs",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint-fix": "eslint src --ext .ts,.tsx --fix",
+    "size": "size-limit",
+    "start": "tsup --watch",
+    "storybook": "storybook dev -p 6006",
+    "test": "jest --passWithNoTests",
+    "test-watch": "jest --coverage --watch",
+    "chromatic": "chromatic --only-changed"
   }
-}
+}

package/src/components/Calendar/Calendar.stories.tsx

@@ -2,7 +2,7 @@ import { Calendar } from './Calendar';
 
 import type { Meta } from '@storybook/react-vite';
 import React, { useState, ChangeEvent } from 'react';
-import { type DateRange } from 'react-day-picker';
+import { type DateRange } from '@daypicker/react';
 import { TextInput } from '../TextInput/TextInput';
 import { format, isValid, parse } from 'date-fns';
 

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

@@ -76,7 +76,6 @@ describe('Calendar', () => {
         />
       );
 
-      // 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);
 
@@ -214,6 +213,13 @@ describe('Calendar', () => {
         '--rdp-accent-color': 'var(--color-font-base)',
       });
     });
+
+    test('applies table width class to the month grid', () => {
+      const { container } = render(<Calendar />);
+      const monthGrid = container.querySelector('.rdp-month_grid');
+
+      expect(monthGrid).toHaveClass('w-100');
+    });
   });
 
   describe('Chevron icons', () => {

package/src/components/Calendar/Calendar.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import classNames from 'classnames';
 import {
   DayPicker,
-  DayPickerProps,
   getDefaultClassNames,
-  Matcher,
-} from 'react-day-picker';
-import 'react-day-picker/style.css';
+  type DayPickerProps,
+  type Matcher,
+} from '@daypicker/react';
+import '@daypicker/react/style.css';
 import { Icon } from '../Icon/Icon';
 
 export type CalendarProps = DayPickerProps;
@@ -74,11 +74,10 @@ function Calendar({
         selected: classNames(
           'font-color-inverse background-color-inverse hover:font-color-inverse'
         ),
-        month_grid: classNames(defaultClassNames.month_grid, 'm-top-lg'),
+        month_grid: classNames(defaultClassNames.month_grid, 'm-top-lg w-100'),
         day: classNames(defaultClassNames.day, 'hover:font-color-base'),
         day_button: classNames(defaultClassNames.day_button),
         range_middle: classNames(defaultClassNames.range_middle),
-        table: classNames('w-100'),
         dropdowns: classNames(defaultClassNames.dropdowns, 'h-100'),
         caption_label: classNames(defaultClassNames.caption_label, 'g-2xs'),
       }}

package/src/components/Heading/Heading.tsx

@@ -26,14 +26,14 @@ export interface HeadingProps {
   className?: string;
   /**
    * A variant token identifier to use for the text variant. Available variants found:
-   * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/color/font.json).
+   * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/color/font.json).
    */
   color?: FontColor;
   /**
    * By default, size is determined by the chosen tag (e.g. h1 is bigger than h2).
    * However, size can be set independently so that its size is appropriate for the surrounding content.
    * Available sizes found:
-   * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/size/font.json).
+   * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/size/font.json).
    */
   size?: HeadingSize | ResponsiveProp<HeadingSize>;
   /**

package/src/components/SelectInput/SelectInput.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import Select, {
   components,
   ClearIndicatorProps,
+  GroupBase,
   OptionsOrGroups,
   OnChangeValue,
 } from 'react-select';
@@ -16,7 +17,6 @@ import { Icon } from '../Icon/Icon';
 import { FormLabel } from '../FormLabel/FormLabel';
 import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
 import styles from './SelectInput.module.scss';
-import { GroupBase } from 'react-select/dist/declarations/src/types';
 
 type SelectOption = {
   value: string;

package/src/components/Table/Table.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Table } from './Table';
 import { Button } from '../Button/Button';
 import { Badge } from '../Badge/Badge';
@@ -208,20 +208,16 @@ export const Sortable = () => {
       return;
     }
     const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
+    const sortedData =
+      newSortDirection === 'ascending'
+        ? sortAscending(tableData, sortedKey)
+        : sortDescending(tableData, sortedKey);
     setSortedColumn({
       dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
+    setTableData(sortedData);
   };
-  useEffect(() => {
-    if (sortedColumn.dataKey && sortedColumn.sortDirection) {
-      const sortedData =
-        sortedColumn.sortDirection === 'ascending'
-          ? sortAscending(tableData, sortedColumn.dataKey)
-          : sortDescending(tableData, sortedColumn.dataKey);
-      setTableData(sortedData);
-    }
-  }, [sortedColumn, tableData]);
   const columnConfig = [
     { heading: 'ID', dataKey: 'id', isSortable: true },
     { heading: 'Color', dataKey: 'color', isSortable: true },
@@ -276,20 +272,16 @@ export const SortablewithDefaultSortedColumn = () => {
       return;
     }
     const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
+    const sortedData =
+      newSortDirection === 'ascending'
+        ? sortAscending(tableData, sortedKey)
+        : sortDescending(tableData, sortedKey);
     setSortedColumn({
       dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
+    setTableData(sortedData);
   };
-  useEffect(() => {
-    if (sortedColumn.dataKey && sortedColumn.sortDirection) {
-      const sortedData =
-        sortedColumn.sortDirection === 'ascending'
-          ? sortAscending(tableData, sortedColumn.dataKey)
-          : sortDescending(tableData, sortedColumn.dataKey);
-      setTableData(sortedData);
-    }
-  }, [sortedColumn, tableData]);
   const columnConfig = [
     { heading: 'ID', dataKey: 'id', isSortable: true },
     { heading: 'Color', dataKey: 'color', isSortable: true },
@@ -336,20 +328,16 @@ export const SortableAndLoading = () => {
       return;
     }
     const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
+    const sortedData =
+      newSortDirection === 'ascending'
+        ? sortAscending(tableData, sortedKey)
+        : sortDescending(tableData, sortedKey);
     setSortedColumn({
       dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
+    setTableData(sortedData);
   };
-  useEffect(() => {
-    if (sortedColumn.dataKey && sortedColumn.sortDirection) {
-      const sortedData =
-        sortedColumn.sortDirection === 'ascending'
-          ? sortAscending(tableData, sortedColumn.dataKey)
-          : sortDescending(tableData, sortedColumn.dataKey);
-      setTableData(sortedData);
-    }
-  }, [sortedColumn, tableData]);
   const columnConfig = [
     { heading: 'ID', dataKey: 'id', isSortable: true },
     { heading: 'Color', dataKey: 'color', isSortable: true },

package/src/docs/Brands.mdx

@@ -1,17 +1,19 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 
-import HyphenLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalRgbPositive';
-import HyphenLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalRgbNegative';
-import HyphenLogoHorizontalBlack from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalBlack';
-import HyphenLogoHorizontalWhite from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalWhite';
-import EnvLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/EnvLogoRgbPositive';
-import EnvLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/EnvLogoRgbNegative';
-import LinkLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbPositive';
-import LinkLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbNegative';
-import ToggleLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbPositive';
-import ToggleLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbNegative';
-import DeployLogoHorizontalPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalPositive';
-import DeployLogoHorizontalNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalNegative';
+import logos from '@hyphen/hyphen-design-tokens/build/assets/images/react';
+
+export const HyphenLogoHorizontalRgbPositive = logos['hyphen-logo-horizontal-rgb-positive'];
+export const HyphenLogoHorizontalRgbNegative = logos['hyphen-logo-horizontal-rgb-negative'];
+export const HyphenLogoHorizontalBlack = logos['hyphen-logo-horizontal-black'];
+export const HyphenLogoHorizontalWhite = logos['hyphen-logo-horizontal-white'];
+export const EnvLogoRgbPositive = logos['env-logo-rgb-positive'];
+export const EnvLogoRgbNegative = logos['env-logo-rgb-negative'];
+export const LinkLogoRgbPositive = logos['link-logo-rgb-positive'];
+export const LinkLogoRgbNegative = logos['link-logo-rgb-negative'];
+export const ToggleLogoHorizontalRgbPositive = logos['toggle-logo-horizontal-rgb-positive'];
+export const ToggleLogoHorizontalRgbNegative = logos['toggle-logo-horizontal-rgb-negative'];
+export const DeployLogoHorizontalPositive = logos['deploy-logo-horizontal-positive'];
+export const DeployLogoHorizontalNegative = logos['deploy-logo-horizontal-negative'];
 
 
 import { Box } from '../components/Box/Box';

package/src/docs/DesignTokens.mdx

@@ -13,7 +13,7 @@ We use [Style Dictionary](https://amzn.github.io/style-dictionary/) to generate
 
 ## Source on Github
 
-[Hyphen Design Tokens](https://github.com/hyphen/hyphen-design-tokens) are available as an [npm package](https://www.npmjs.com/package/@hyphen/hyphen-design-tokens) so that you can create a Hyphen unified product experience for your platform of choice.
+[Hyphen Design Tokens](https://github.com/Hyphen/hyphen-components/tree/main/packages/design-tokens) are available as an [npm package](https://www.npmjs.com/package/@hyphen/hyphen-design-tokens) so that you can create a Hyphen unified product experience for your platform of choice.
 
 ## Border Radius
 

package/src/docs/GetStarted.mdx

@@ -6,7 +6,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 ### 1. Install
 
-`yarn add @hyphen/hyphen-components`
+`pnpm add @hyphen/hyphen-components`
 
 or
 

package/src/docs/intro.mdx

@@ -7,6 +7,6 @@ import { Meta } from '@storybook/addon-docs/blocks';
 Welcome to the Hyphen Design System, whose purpose is to help us deliver high quality Hyphen branded applications, faster and better. It consists of the following:
 
 - [Hyphen Components](https://github.com/hyphen/hyphen-components) - an open source, react-based, component library for Hyphen applications and websites.
-- [Hyphen Design Tokens](https://github.com/hyphen/hyphen-design-tokens) - A central location to store shared attributes of the Hyphen Design System. These include things like color, fonts, spacing, and more.
+- [Hyphen Design Tokens](https://github.com/Hyphen/hyphen-components/tree/main/packages/design-tokens) - A central location to store shared attributes of the Hyphen Design System. These include things like color, fonts, spacing, and more.
 
 ❤️ The Hyphen Team