readme + ts setup

Author: smartlabsAT

README.md

@@ -0,0 +1,206 @@
+
+# React Resize Detector Context
+
+![Demo GIF](/doc/assets/demo.gif)
+
+A lightweight React context that leverages [react-resize-detector](https://github.com/maslianok/react-resize-detector) to detect the current breakpoint based on an element's width. It provides utility functions and helper components to conditionally render content based on responsive breakpoints.
+
+---
+
+## Features
+
+- Dynamically detects the current breakpoint based on element width.
+- Supports custom breakpoint names (e.g., "XS", "SM", "MD", "LG", "XL" or any arbitrary names like "Smart", "Mini", etc.).
+- Utility functions:
+  - `isAtLeast(breakpoint)`: Returns `true` if the current breakpoint is greater than or equal to the provided one.
+  - `isBelow(breakpoint)`: Returns `true` if the current breakpoint is less than the provided one.
+  - `valueByBreakpoint(mapping)`: Returns a value from the provided mapping based on the current breakpoint.
+- Helper component `BreakpointConditional` for conditional rendering.
+- Error logging for invalid configurations (e.g. duplicate values, width not set, etc.).
+- Fully typed in TypeScript with comprehensive IDE support.
+
+---
+
+## Requirements
+
+- **Node.js**: >= 18.0.0  
+- **React**: >= 17  
+- **React-DOM**: >= 17  
+
+---
+
+## Installation
+
+Install via npm:
+
+```
+npm install my-breakpoint-package
+```
+
+---
+
+## Usage
+
+### Basic Usage
+
+Wrap your component tree with the `BreakpointProvider` and provide a breakpoint configuration. Then, access the current breakpoint and utility functions via the `useBreakpoint` hook.
+
+```typescript
+import React from 'react';
+import { BreakpointProvider, useBreakpoint } from 'my-breakpoint-package';
+
+const breakpoints = {
+  XS: 0,
+  SM: 500,
+  MD: 700,
+  LG: 900,
+  XL: 1100,
+};
+
+const ResponsiveComponent = () => {
+  const { width, breakpoint, isAtLeast, valueByBreakpoint } = useBreakpoint();
+  return (
+    <div>
+      <p>Current width: {width}px</p>
+      <p>Current breakpoint: {breakpoint}</p>
+      <p>Is at least MD: {isAtLeast('MD') ? '✅' : '❌'}</p>
+      <p>
+        Mapping: {valueByBreakpoint({
+          XS: 'Extra Small',
+          SM: 'Small',
+          MD: 'Medium',
+          LG: 'Large',
+          XL: 'Extra Large'
+        })}
+      </p>
+    </div>
+  );
+};
+
+const App = () => (
+  <BreakpointProvider breakpoints={breakpoints}>
+    <ResponsiveComponent />
+  </BreakpointProvider>
+);
+
+export default App;
+```
+
+---
+
+### Conditional Rendering with BreakpointConditional
+
+Use `BreakpointConditional` to render content only when certain breakpoint conditions are met.
+
+```typescript
+import React from 'react';
+import { BreakpointProvider, BreakpointConditional } from 'my-breakpoint-package';
+
+const breakpoints = {
+  XS: 0,
+  SM: 500,
+  MD: 700,
+  LG: 900,
+  XL: 1100,
+};
+
+const ConditionalComponent = () => (
+  <div>
+    <BreakpointConditional isAtLeast="MD">
+      <p>😊 This content is visible from MD and up.</p>
+    </BreakpointConditional>
+    <BreakpointConditional isBelow="LG">
+      <p>🚀 This content is visible for breakpoints below LG.</p>
+    </BreakpointConditional>
+  </div>
+);
+
+const App = () => (
+  <BreakpointProvider breakpoints={breakpoints}>
+    <ConditionalComponent />
+  </BreakpointProvider>
+);
+
+export default App;
+```
+
+---
+
+### Custom Breakpoints Example
+
+You can define your own custom breakpoints with any names. For instance, using car sizes:
+
+```typescript
+import React from 'react';
+import { BreakpointProvider, useBreakpoint } from 'my-breakpoint-package';
+
+const carBreakpoints = {
+  Smart: 0,
+  Mini: 350,
+  Sedan: 600,
+  SUV: 900,
+  Ram: 1200,
+};
+
+const CarComponent = () => {
+  const { width, breakpoint, valueByBreakpoint } = useBreakpoint();
+  return (
+    <div>
+      <p>Current width: {width}px</p>
+      <p>Current car size: {breakpoint}</p>
+      <p>
+        Mapping: {valueByBreakpoint({
+          Smart: '🚗 Smart',
+          Mini: '🚙 Mini',
+          Sedan: '🚘 Sedan',
+          SUV: '🚐 SUV',
+          Ram: '🚚 Ram'
+        })}
+      </p>
+    </div>
+  );
+};
+
+const App = () => (
+  <BreakpointProvider breakpoints={carBreakpoints}>
+    <CarComponent />
+  </BreakpointProvider>
+);
+
+export default App;
+```
+
+---
+
+## Available Scripts
+
+You can use the following scripts from your command line:
+
+- **`npm run build`**  
+  Builds the package (using [tsup](https://github.com/egoist/tsup)).
+
+- **`npm run dev`**  
+  Runs development mode concurrently with build watch, Storybook, and tests.
+
+- **`npm run storybook`**  
+  Launches Storybook for interactive component demos on port 6006.
+
+- **`npm run test`**  
+  Runs tests using Vitest.
+
+- **`npm run test:ci`**  
+  Runs tests with coverage.
+
+- **`npm run lint`**  
+  Runs biome check with auto-fix.
+
+- **`npm run release`**  
+  Builds and triggers the release process.
+
+---
+
+## License
+
+This project is licensed under the MIT License.
+
+---

tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"esModuleInterop": true,
+		"jsx": "react-jsx",
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"skipLibCheck": true,
+		"strict": true,
+		"noEmit": true
+	}
+}

tsup.config.ts

@@ -0,0 +1,76 @@
+import childProcess from "node:child_process";
+import fs from "node:fs";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { type Options, defineConfig } from "tsup";
+
+const common: Options = {
+	entry: ["src/index.ts"],
+	treeshake: false,
+	sourcemap: "inline",
+	minify: true,
+	clean: true,
+	dts: true,
+	splitting: false,
+	format: ["cjs", "esm"],
+	external: ["react"],
+	injectStyle: false,
+};
+
+const getPackageName = async () => {
+	try {
+		const packageJson = JSON.parse(
+			await readFile(path.join(__dirname, "package.json"), "utf-8"),
+		);
+		return packageJson.name;
+	} catch (_error) {
+		return "package-name";
+	}
+};
+
+const _addUseStatement = async (
+	basePath: string,
+	type: "server" | "client",
+) => {
+	const fullPath = path.join(__dirname, basePath);
+	const files = fs.readdirSync(fullPath);
+
+	for (const file of files) {
+		if (file.endsWith(".js") || file.endsWith(".mjs")) {
+			const filePath = path.join(fullPath, file);
+			let content = await readFile(filePath, "utf-8");
+			content = `"use ${type}";\n${content}`;
+			fs.writeFileSync(filePath, content, "utf-8");
+		}
+	}
+};
+
+const linkSelf = async () => {
+	await new Promise((resolve) => {
+		childProcess.exec("pnpm link:self", (error, _stdout, _stderr) => {
+			if (error) {
+				// biome-ignore lint/suspicious/noConsole: <explanation>
+				console.error(`exec error: ${error}`);
+				return;
+			}
+
+			resolve(undefined);
+		});
+	});
+
+	// biome-ignore lint/suspicious/noConsoleLog: <explanation>
+	// biome-ignore lint/suspicious/noConsole: <explanation>
+	console.log(
+		`Run 'pnpm link ${await getPackageName()} --global' inside another project to consume this package.`,
+	);
+};
+
+export default defineConfig({
+	async onSuccess() {
+		// If you want need to add a use statement to files, you can use the following code:
+		// await _addUseStatement('dist/react', 'client');
+
+		await linkSelf();
+	},
+	...common,
+});

vitest.config.mts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {
+		environment: "jsdom",
+		setupFiles: "./tests/setup.js",
+		passWithNoTests: true,
+		coverage: {
+			include: ["{src,tests}/**/*"],
+		},
+	},
+});