feat(toolkit)!: 🏗️ split monorepo into separate packages 📦

BREAKING CHANGE: The toolkit package has been split into separate packages for better organization and maintainability:
- @zayne-labs/toolkit-core
- @zayne-labs/toolkit-react
- @zayne-labs/toolkit-type-helpers

The main toolkit package now acts as an aggregator that re-exports from these new packages.

Author: Ryan-Zayne

dev/package.json

@@ -11,18 +11,18 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@types/react": "19.0.1",
-		"@types/react-dom": "19.0.1",
+		"@types/react": "19.0.2",
+		"@types/react-dom": "19.0.2",
 		"@zayne-labs/toolkit": "workspace:*",
 		"react": "19.0.0",
 		"react-dom": "19.0.0"
 	},
 	"devDependencies": {
-		"@types/node": "^22.7.5",
+		"@types/node": "^22.10.3",
 		"@vitejs/plugin-react-swc": "^3.7.2",
 		"@zayne-labs/tsconfig": "catalog:",
 		"tsx": "^4.19.1",
 		"typescript": "catalog:",
-		"vite": "^5.4.8"
+		"vite": "^6.0.6"
 	}
 }

dev/src/client/AnotherApp.tsx

@@ -1,9 +1,10 @@
 import { useStorageState } from "@zayne-labs/toolkit/react";
 
-export default function AnotherApp() {
+function AnotherApp() {
 	const [stateTwo] = useStorageState("test");
 
 	console.info(stateTwo);
 
 	return null;
 }
+export default AnotherApp;

dev/src/client/App.tsx

@@ -1,8 +1,6 @@
 import { useSearchParamsObject } from "@zayne-labs/toolkit/react";
-import { DropZone } from "@zayne-labs/toolkit/react/ui/drop-zone";
-import "@zayne-labs/toolkit/tailwind.css";
 
-export default function App() {
+function App() {
 	const [searchParams, setSearchParams] = useSearchParamsObject();
 
 	console.info(searchParams.test);
@@ -12,9 +10,8 @@ export default function App() {
 			<button type="button" onClick={() => setSearchParams({ test: "clay" })}>
 				Click me
 			</button>
-			<DropZone>
-				<p>foo</p>
-			</DropZone>
 		</div>
 	);
 }
+
+export default App;

package.json

@@ -26,17 +26,17 @@
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.27.11",
-		"@eslint-react/eslint-plugin": "^1.22.1",
-		"@types/node": "^22.10.2",
-		"@zayne-labs/eslint-config": "^0.4.2",
+		"@eslint-react/eslint-plugin": "^1.23.0",
+		"@types/node": "^22.10.3",
+		"@zayne-labs/eslint-config": "^0.4.3",
 		"@zayne-labs/tsconfig": "catalog:",
 		"bumpp": "^9.9.2",
 		"eslint": "^9.17.0",
 		"eslint-plugin-react-hooks": "^5.1.0",
 		"eslint-plugin-react-refresh": "^0.4.16",
 		"eslint-plugin-tailwindcss": "^3.17.5",
 		"husky": "^9.1.7",
-		"lint-staged": "^15.2.11",
+		"lint-staged": "^15.3.0",
 		"pkg-pr-new": "^0.0.39",
 		"prettier": "^3.4.2",
 		"typescript": "catalog:"

packages/toolkit-core/package.json

@@ -0,0 +1,77 @@
+{
+	"name": "@zayne-labs/toolkit-core",
+	"type": "module",
+	"version": "0.8.21",
+	"packageManager": "[email protected]",
+	"description": "A collection of utility functions, types and composables used by my other projects. Nothing too fancy but can be useful.",
+	"author": "Ryan Zayne",
+	"license": "MIT",
+	"homepage": "https://github.com/zayne-labs/toolkit#readme",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/zayne-labs/toolkit.git"
+	},
+	"bugs": {
+		"url": "https://github.com/zayne-labs/toolkit/issues"
+	},
+	"keywords": [
+		"utilities",
+		"types",
+		"hooks"
+	],
+	"sideEffects": false,
+	"exports": {
+		".": "./dist/esm/index.js"
+	},
+	"main": "./dist/esm/index.js",
+	"module": "./dist/esm/index.js",
+	"types": "./dist/esm/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"engines": {
+		"node": ">=18.x"
+	},
+	"scripts": {
+		"build": "tsup",
+		"build:dev": "cross-env NODE_ENV=development tsup",
+		"build:test": "concurrently --prefix-colors \"yellow.bold,#7da4f8.bold,magenta\" --names PUBLINT,TSUP 'pnpm:lint:publint' 'pnpm:build:dev'",
+		"lint:attw": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
+		"lint:check-types": "tsc --pretty --incremental -p tsconfig.json",
+		"lint:publint": "publint --strict .",
+		"lint:size": "size-limit",
+		"release": "pnpm publish --no-git-checks",
+		"test:release": "pkg-pr-new publish"
+	},
+	"dependencies": {
+		"@zayne-labs/toolkit-type-helpers": "workspace:*"
+	},
+	"devDependencies": {
+		"@arethetypeswrong/cli": "^0.17.2",
+		"@changesets/cli": "^2.27.11",
+		"@size-limit/esbuild-why": "^11.1.6",
+		"@size-limit/preset-small-lib": "^11.1.6",
+		"@total-typescript/ts-reset": "^0.6.1",
+		"@types/node": "^22.10.3",
+		"@zayne-labs/tsconfig": "catalog:",
+		"clsx": "^2.1.1",
+		"concurrently": "^9.1.2",
+		"cross-env": "^7.0.3",
+		"publint": "^0.2.12",
+		"size-limit": "^11.1.6",
+		"terser": "^5.37.0",
+		"tsup": "^8.3.5",
+		"typescript": "catalog:"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org/",
+		"provenance": true
+	},
+	"size-limit": [
+		{
+			"path": "./src/index.ts",
+			"limit": "3.5 kb"
+		}
+	]
+}

packages/toolkit-core/reset.d.ts

@@ -0,0 +1,2 @@
+import "@total-typescript/ts-reset";
+import "@total-typescript/ts-reset/dom";

packages/toolkit/src/core/checkIsDeviceMobileOrTablet.ts packages/toolkit-core/src/checkIsDeviceMobileOrTablet.ts

@@ -1,4 +1,4 @@
-import type { AnyFunction } from "@/type-helpers";
+import type { AnyFunction } from "@zayne-labs/toolkit-type-helpers";
 import { checkIsDeviceMobileOrTablet } from "./checkIsDeviceMobileOrTablet";
 import { off, on } from "./on";
 

packages/toolkit/src/core/constants.ts packages/toolkit-core/src/constants.ts

@@ -1,5 +1,7 @@
-import { createStore, on, parseJSON } from "@/core";
-import { isFunction, isObject } from "@/type-helpers";
+import { createStore } from "@/createStore";
+import { on } from "@/on";
+import { parseJSON } from "@/parseJSON";
+import { isFunction, isObject } from "@zayne-labs/toolkit-type-helpers";
 import type { RemoveStorageState, SetStorageState, StorageOptions } from "./types";
 import { setAndDispatchStorageEvent } from "./utils";
 

packages/toolkit/src/core/copyToClipboard.ts packages/toolkit-core/src/copyToClipboard.ts

@@ -1,5 +1,7 @@
-import { type StoreApi, on, parseJSON } from "@/core";
-import { isFunction, isObject } from "@/type-helpers";
+import type { StoreApi } from "@/createStore";
+import { on } from "@/on";
+import { parseJSON } from "@/parseJSON";
+import { isFunction, isObject } from "@zayne-labs/toolkit-type-helpers";
 import type { RemoveStorageState, SetStorageState, StorageOptions } from "./types";
 import { setAndDispatchStorageEvent } from "./utils";
 

packages/toolkit/src/core/createDragScroll.ts packages/toolkit-core/src/createDragScroll.ts

@@ -1,5 +1,5 @@
-import type { StoreStateSetter } from "@/core";
-import type { UnmaskType } from "@/type-helpers";
+import type { StoreStateSetter } from "@/createStore";
+import type { UnmaskType } from "@zayne-labs/toolkit-type-helpers";
 
 export type StorageOptions<TState> = {
 	equalityFn?: (nextState: Partial<TState>, previousState: Partial<TState>) => boolean;

packages/toolkit/src/core/createExternalStore/index.ts packages/toolkit-core/src/createExternalStore/index.ts

@@ -1,4 +1,4 @@
-import { isFunction, isObject } from "@/type-helpers/guard";
+import { isFunction, isObject } from "@zayne-labs/toolkit-type-helpers";
 import type { EqualityFn, Listener, StoreApi } from "./types";
 
 export type StateInitializer<TState, TResult = TState> = (

packages/toolkit/src/core/createExternalStore/new-implementation.ts packages/toolkit-core/src/createExternalStore/new-implementation.ts

@@ -1,4 +1,4 @@
-import type { UnmaskType } from "@/type-helpers";
+import type { UnmaskType } from "@zayne-labs/toolkit-type-helpers";
 
 export type StoreStateSetter<TState, TResult = TState> = UnmaskType<(prevState: TState) => TResult>;
 

packages/toolkit/src/core/createExternalStore/old-implementation.ts packages/toolkit-core/src/createExternalStore/old-implementation.ts

@@ -1,4 +1,4 @@
-import { type CallbackFn, isArray, isObject } from "@/type-helpers";
+import { type CallbackFn, isArray, isObject } from "@zayne-labs/toolkit-type-helpers";
 
 type DebouncedFnParams<TParams> =
 	| [params: TParams | TParams[], overrideOptions: { $delay: number }]

packages/toolkit/src/core/createExternalStore/types.ts packages/toolkit-core/src/createExternalStore/types.ts

@@ -1,4 +1,4 @@
-import { isFile } from "@/type-helpers";
+import { isFile } from "@zayne-labs/toolkit-type-helpers";
 
 export type ImagePreviewOptions = {
 	file: File | undefined;

packages/toolkit/src/core/createExternalStore/utils.ts packages/toolkit-core/src/createExternalStore/utils.ts

@@ -0,0 +1,21 @@
+export { checkIsDeviceMobileOrTablet } from "./checkIsDeviceMobileOrTablet";
+export * from "./constants";
+export { copyToClipboard } from "./copyToClipboard";
+export * from "./createExternalStore";
+export * from "./createLocationStore";
+export * from "./createStore";
+export { debounce } from "./debounce";
+export * from "./handleFileValidation";
+export * from "./handleImagePreview";
+export { lockScroll } from "./lockScroll";
+export * from "./omitKeys";
+export * from "./on";
+export { parseJSON } from "./parseJSON";
+export * from "./pickKeys";
+export { PromiseWithResolvers } from "./promiseWithResolvers";
+export * from "./setAnimationInterval";
+export { syncStateWithStorage } from "./syncStateWithStorage";
+export * from "./throttle";
+export { toArray } from "./toArray";
+export * from "./navigation";
+export * from "./wait";

packages/toolkit/src/core/createLocationStore/createLocationStore.ts packages/toolkit-core/src/createLocationStore/createLocationStore.ts

@@ -0,0 +1,42 @@
+import { checkIsDeviceMobileOrTablet } from "./checkIsDeviceMobileOrTablet";
+
+type LockScrollOptions = {
+	isActive: boolean;
+};
+
+const getScrollbarWidth = () => {
+	// == Store the initial overflow style
+	const initialOverflowValue = document.documentElement.style.overflow;
+
+	// == Get width without scrollbar
+	document.documentElement.style.overflow = "hidden";
+	const widthWithoutScrollbar = document.documentElement.clientWidth;
+
+	// == Get width with scrollbar
+	document.documentElement.style.overflow = "scroll";
+	const widthWithScrollbar = document.documentElement.clientWidth;
+
+	// == Restore the original overflow
+	document.documentElement.style.overflow = initialOverflowValue;
+
+	return widthWithoutScrollbar - widthWithScrollbar;
+};
+
+const lockScroll = ({ isActive }: LockScrollOptions) => {
+	const isMobileOrTablet = checkIsDeviceMobileOrTablet();
+	const isDesktop = !isMobileOrTablet;
+
+	if (!isActive) {
+		document.body.style.setProperty("--overflow-y", null);
+		isDesktop && document.body.style.setProperty("--scrollbar-padding", null);
+		return;
+	}
+
+	document.body.style.setProperty("--overflow-y", "hidden");
+
+	const scrollbarWidth = getScrollbarWidth();
+
+	isDesktop && document.body.style.setProperty("--scrollbar-padding", `${scrollbarWidth}px`);
+};
+
+export { lockScroll };

packages/toolkit/src/core/createLocationStore/index.ts packages/toolkit-core/src/createLocationStore/index.ts

@@ -1,4 +1,4 @@
-import { defineEnum, isArray, isIterable, isString } from "@/type-helpers";
+import { defineEnum, isArray, isIterable, isString } from "@zayne-labs/toolkit-type-helpers";
 
 type KeyValuePair = [string, string];
 

packages/toolkit/src/core/createStore/createStore.ts packages/toolkit-core/src/createStore/createStore.ts

@@ -1,4 +1,4 @@
-import type { AnyObject } from "@/type-helpers";
+import type { AnyObject } from "@zayne-labs/toolkit-type-helpers";
 
 type OmitKeys<TKeys extends keyof TObject, TObject extends AnyObject> = Omit<TObject, TKeys>;
 

packages/toolkit/src/core/createStore/index.ts packages/toolkit-core/src/createStore/index.ts

@@ -1,4 +1,4 @@
-import { isArray, isString } from "@/type-helpers";
+import { isArray, isString } from "@zayne-labs/toolkit-type-helpers";
 import type { ElementOrSelectorArray, PossibleNodes, RegisterConfig } from "./types";
 
 const registerSingleElement = (element: PossibleNodes, config: RegisterConfig) => {

packages/toolkit/src/core/createStore/types.ts packages/toolkit-core/src/createStore/types.ts

@@ -1,4 +1,4 @@
-import type { NonEmptyArray } from "@/type-helpers";
+import type { NonEmptyArray } from "@zayne-labs/toolkit-type-helpers";
 
 export type PossibleNodes = string | Document | HTMLElement | MediaQueryList | Window | null;
 

packages/toolkit/src/core/debounce.ts packages/toolkit-core/src/debounce.ts

@@ -1,4 +1,4 @@
-import type { AnyObject } from "@/type-helpers";
+import type { AnyObject } from "@zayne-labs/toolkit-type-helpers";
 
 type PickKeys<TKeys extends keyof TObject, TObject extends AnyObject> = Pick<TObject, TKeys>;
 

packages/toolkit/src/core/handleFileValidation.ts packages/toolkit-core/src/handleFileValidation.ts

@@ -2,7 +2,7 @@
  * Copied from https://github.com/pmndrs/zustand/blob/main/src/vanilla/shallow.ts
  */
 
-import { isIterable, isObject } from "@/type-helpers";
+import { isIterable, isObject } from "@zayne-labs/toolkit-type-helpers";
 
 type RecordWithEntries = {
 	entries: () => Iterable<[unknown, unknown]>;

packages/toolkit/src/core/handleImagePreview.ts packages/toolkit-core/src/handleImagePreview.ts

@@ -1,4 +1,4 @@
-import { isArray, isPlainObject } from "@/type-helpers";
+import { isArray, isPlainObject } from "@zayne-labs/toolkit-type-helpers";
 import { pickKeys } from "./pickKeys";
 
 type SyncStorageParams =

packages/toolkit-core/src/index.ts

@@ -1,4 +1,4 @@
-import type { CallbackFn } from "@/type-helpers";
+import type { CallbackFn } from "@zayne-labs/toolkit-type-helpers";
 
 export const throttleBySetTimeout = <TParams>(callbackFn: CallbackFn<TParams>, delay: number) => {
 	let timeoutId: number | null = null;

packages/toolkit-core/src/lockScroll.ts

@@ -1,4 +1,4 @@
-import { isArray } from "@/type-helpers";
+import { isArray } from "@zayne-labs/toolkit-type-helpers";
 
 const toArray = <TValue>(value: TValue | TValue[]): TValue[] => (isArray(value) ? value : [value]);
 

packages/toolkit/src/core/navigation.ts packages/toolkit-core/src/navigation.ts

@@ -0,0 +1,15 @@
+{
+	"extends": "@zayne-labs/tsconfig/bundler/dom/library",
+
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["src/*"]
+		}
+		// "declaration": true,
+		// "isolatedDeclarations": true
+	},
+
+	"include": ["src/**/*", "**/*"],
+	"exclude": ["dist", "node_modules/**"]
+}

packages/toolkit/src/core/omitKeys.ts packages/toolkit-core/src/omitKeys.ts

@@ -0,0 +1,26 @@
+import { type Options, defineConfig } from "tsup";
+
+const isDevMode = process.env.NODE_ENV === "development";
+
+const sharedOptions = {
+	clean: true, // clean up dist folder,
+	dts: true, // generate d.ts
+	entry: ["src/index.ts"],
+	format: ["esm"],
+	platform: "browser",
+	sourcemap: !isDevMode,
+	splitting: true,
+	target: "esnext",
+	treeshake: true,
+	tsconfig: "tsconfig.json",
+} satisfies Options;
+
+const config = defineConfig([
+	{
+		...sharedOptions,
+		name: "ESM",
+		outDir: "./dist/esm",
+	},
+]);
+
+export default config;

packages/toolkit/src/core/on/index.ts packages/toolkit-core/src/on/index.ts

@@ -0,0 +1,16 @@
+{
+	"plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-classnames", "prettier-plugin-merge"],
+	"tailwindFunctions": ["cnMerge", "cnJoin", "cn", "tv"],
+	"tailwindStylesheet": "./src/react/tailwind.css",
+	"tailwindConfig": "./tailwind.config.ts",
+	"customFunctions": ["cnMerge", "cnJoin", "cn", "tv"],
+	"tailwindAttributes": ["classNames"],
+	"customAttributes": ["classNames"],
+	"endingPosition": "absolute-with-indent",
+	"jsxSingleQuote": false,
+	"printWidth": 107,
+	"singleQuote": false,
+	"tabWidth": 3,
+	"trailingComma": "es5",
+	"useTabs": true
+}