feat: utilities package (#557)

Author: blvdmitry

.changeset/easy-pots-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@reshaped/utilities": patch
+---
+
+Flyout: Moved implementation to the new utilities package

.github/workflows/pull-request.yml

@@ -206,6 +206,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build all packages
+        run: pnpm build
+
       - name: Run tests
         run: pnpm test:browser --shard ${{ matrix.shard }}
 

eslint.config.mjs

@@ -51,6 +51,7 @@ export default defineConfig([
 			],
 			"react-hooks/rules-of-hooks": "error",
 			"react-hooks/exhaustive-deps": "error",
+			"react-hooks/refs": "off",
 		},
 		settings: {
 			"import/resolver": {

package.json

@@ -8,7 +8,7 @@
 		"url": "https://github.com/reshaped-ui/reshaped.git"
 	},
 	"scripts": {
-		"dev": "storybook dev -p 3001 --disable-telemetry",
+		"dev": "pnpm -r --parallel run dev",
 		"clean": "pnpm -r run clean",
 		"commit": "git-cz",
 		"changeset": "changeset",
@@ -23,7 +23,7 @@
 		"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic) --only-changed --externals '.storybook/public/**'",
 		"test:vrt": "pnpm chromatic",
 		"test:browser": "pnpm --filter reshaped run test:browser",
-		"test:unit": "pnpm --filter reshaped run test:unit",
+		"test:unit": "pnpm -r run test:unit",
 		"test:size": "size-limit",
 		"lint": "pnpm lint:js && pnpm lint:css",
 		"lint:js": "eslint './packages/**/*.{ts,tsx}' --fix",
@@ -85,7 +85,8 @@
 		"vite": "7.3.0",
 		"vite-tsconfig-paths": "5.1.4",
 		"vitest": "4.0.16",
-		"vitest-browser-react": "2.0.2"
+		"vitest-browser-react": "2.0.2",
+		"tsc-watch": "7.2.0"
 	},
 	"engines": {
 		"node": ">=22"

packages/core/package.json

@@ -31,6 +31,7 @@
 	},
 	"scripts": {
 		"clean": "rm -rf dist",
+		"dev": "tsc --watch -p tsconfig.json",
 		"build": "pnpm clean && tsc -p tsconfig.json"
 	},
 	"peerDependencies": {

packages/reshaped/package.json

@@ -77,6 +77,7 @@
   },
   "scripts": {
     "clean": "sh ./bin/clean.sh",
+		"dev": "storybook dev -p 3001 -c ../../.storybook --disable-telemetry",
     "build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
     "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
     "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
@@ -98,6 +99,7 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
+		"@reshaped/utilities": "workspace:*",
     "@csstools/postcss-global-data": "3.1.0",
     "chalk": "4.1.2",
     "commander": "14.0.2",

packages/reshaped/src/components/Accordion/AccordionControlled.tsx

@@ -20,7 +20,7 @@ const AccordionControlled: React.FC<T.ControlledProps> = (props) => {
 			triggerId: `${id}-trigger`,
 			contentId: `${id}-content`,
 			active,
-			// eslint-disable-next-line react-hooks/refs
+
 			onToggle: onToggleRef.current,
 			iconPosition,
 			iconSize,

packages/reshaped/src/components/Calendar/Calendar.utils.ts

@@ -141,6 +141,10 @@ export const applyNavigationBounds = (args: { date: Date; min?: Date; max?: Date
 	};
 };
 
+const isMonthMatch = (date1: Date, date2: Date) => {
+	return date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+};
+
 /**
  * Decide if date has to be focusable with Tab (only one date should be)
  * 1. If there is a selected value - it's focusable
@@ -154,17 +158,13 @@ export const isDateFocusable = (args: {
 }) => {
 	const { date, startValue, lastFocusedDate } = args;
 	const today = new Date();
-	const renderedMonth = date.getMonth();
-	const valueMonth = startValue?.getMonth();
-	const todayMonth = today.getMonth();
-	const lastFocusedMonth = lastFocusedDate?.getMonth();
 	const isoDate = getLocalISODate({ date });
 	const isoToday = getLocalISODate({ date: today });
 	const isoValueDate = startValue && getLocalISODate({ date: startValue });
 	const isoLastFocusedDate = lastFocusedDate && getLocalISODate({ date: lastFocusedDate });
 
-	if (lastFocusedDate && renderedMonth === lastFocusedMonth) return isoDate === isoLastFocusedDate;
-	if (startValue && renderedMonth === valueMonth) return isoDate === isoValueDate;
-	if (renderedMonth === todayMonth) return isoDate === isoToday;
+	if (lastFocusedDate && isMonthMatch(date, lastFocusedDate)) return isoDate === isoLastFocusedDate;
+	if (startValue && isMonthMatch(date, startValue)) return isoDate === isoValueDate;
+	if (isMonthMatch(date, today)) return isoDate === isoToday;
 	return true;
 };

packages/reshaped/src/components/Carousel/Carousel.tsx

@@ -58,7 +58,6 @@ const Carousel: React.FC<T.Props> = (props) => {
 		// };
 	};
 
-	// eslint-disable-next-line react-hooks/refs
 	const handleScroll = rafThrottle((event: React.UIEvent<HTMLUListElement>) => {
 		const el = event.target as Element;
 		const firstVisibleIndex = getFirstVisibleIndex();

packages/reshaped/src/components/Flyout/Flyout.module.css

@@ -1,5 +1,4 @@
 .content {
-	--rs-flyout-gap: 0;
 	--rs-flyout-max-h: 100%;
 	--rs-flyout-max-w: 100%;
 	--rs-flyout-origin-x: 50%;
@@ -57,16 +56,12 @@
 .content.--position-top-end,
 .content.--position-top-start {
 	--rs-flyout-origin-y: 100%;
-
-	padding-bottom: calc(var(--rs-unit-x1) * var(--rs-flyout-gap));
 }
 
 .content.--position-bottom,
 .content.--position-bottom-end,
 .content.--position-bottom-start {
 	--rs-flyout-origin-y: 0%;
-
-	padding-top: calc(var(--rs-unit-x1) * var(--rs-flyout-gap));
 }
 
 .content.--position-top-start,
@@ -83,16 +78,12 @@
 .content.--position-start-top,
 .content.--position-start-bottom {
 	--rs-flyout-origin-x: 100%;
-
-	padding-right: calc(var(--rs-unit-x1) * var(--rs-flyout-gap));
 }
 
 .content.--position-end,
 .content.--position-end-top,
 .content.--position-end-bottom {
 	--rs-flyout-origin-x: 0%;
-
-	padding-left: calc(var(--rs-unit-x1) * var(--rs-flyout-gap));
 }
 
 .content.--position-start-top,