chore: Add publish config

Author: Jimco

packages/react/package.json

@@ -3,20 +3,40 @@
     "version": "0.1.0",
     "description": "React hooks and components for building responsive websites.",
     "license": "MIT",
+    "homepage": "https://github.com/Milesight-IoT/responsive-toolkit",
+    "repository": "https://github.com/Milesight-IoT/responsive-toolkit.git",
+    "bugs": {
+        "url": "https://github.com/Milesight-IoT/responsive-toolkit/issues"
+    },
+    "keywords": [
+        "responsive",
+        "react",
+        "hook",
+        "useMediaQuery",
+        "breakpoints"
+    ],
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        }
+    },
+    "types": "dist/index.d.ts",
     "files": [
         "dist"
     ],
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"
     },
     "scripts": {
-        "dev": "echo \"No dev script provided for this package.\"",
-        "build": "echo \"No build script provided for this package.\"",
+        "dev": "tsup --watch",
+        "build": "tsup",
         "test": "vitest run",
         "test:watch": "vitest",
         "coverage": "vitest run --coverage",
         "lint": "eslint ./src/*",
-        "lint:fix": "eslint --fix ./src/*"
+        "lint:fix": "eslint --fix ./src/*",
+        "prepublish": "pnpm run build"
     },
     "peerDependencies": {
         "react": "^17 || ^18 || ^19"

packages/react/src/types/index.d.ts

@@ -2,12 +2,19 @@
  * Remove properties `K` from `T`.
  * Distributive for union types.
  */
-declare type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
 
 /**
  * Like `T & U`, but using the value types from `U` where their properties overlap.
  */
-declare type Overwrite<T, U> = DistributiveOmit<T, keyof U> & U;
+export type Overwrite<T, U> = DistributiveOmit<T, keyof U> & U;
+
+type GenerateStringUnion<T> = Extract<
+    {
+        [Key in keyof T]: true extends T[Key] ? Key : never;
+    }[keyof T],
+    string
+>;
 
 /**
  * Generate a set of string literal types with the given default record `T` and
@@ -16,6 +23,6 @@ declare type Overwrite<T, U> = DistributiveOmit<T, keyof U> & U;
  * If the property value was `true`, the property key will be added to the
  * string union.
  */
-declare type OverridableStringUnion<T extends string | number, U = any> = GenerateStringUnion<
+export type OverridableStringUnion<T extends string | number, U = any> = GenerateStringUnion<
     Overwrite<Record<T, true>, U>
 >;

packages/react/src/utils/create-breakpoints.ts

@@ -1,3 +1,5 @@
+import type { OverridableStringUnion } from '../types';
+
 export interface BreakpointOverrides {}
 
 export type Breakpoint = OverridableStringUnion<
@@ -96,7 +98,7 @@ export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
 const sortBreakpointsValues = (values: Breakpoints['values']) => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
         key,
-        val: values[key],
+        val: values[key as Breakpoint],
     })) || [];
 
     // Sort in ascending order
@@ -109,7 +111,7 @@ const sortBreakpointsValues = (values: Breakpoints['values']) => {
             ...acc,
             [obj.key]: obj.val,
         };
-    }, {});
+    }, {} as Breakpoints['values']);
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
@@ -133,29 +135,42 @@ export default function createBreakpoints(breakpoints: BreakpointsOptions): Brea
         ...other
     } = breakpoints;
     const sortedValues = sortBreakpointsValues(values);
-    const keys = Object.keys(sortedValues);
+    const keys = Object.keys(sortedValues) as Breakpoint[];
 
     function up(key: Breakpoint | number) {
-        const value = typeof values[key] === 'number' ? values[key] : key;
+        const value = typeof values[key as Breakpoint] === 'number'
+            ? values[key as Breakpoint]
+            : key;
         return `@media (min-width:${value}${unit})`;
     }
 
     function down(key: Breakpoint | number) {
-        const value = typeof values[key] === 'number' ? values[key] : key;
+        const value = typeof values[key as Breakpoint] === 'number'
+            ? values[key as Breakpoint]
+            : key as number;
         return `@media (max-width:${value - step / 100}${unit})`;
     }
 
     function between(start: Breakpoint | number, end: Breakpoint | number) {
-        const endIndex = keys.indexOf(end);
+        const endIndex = keys.indexOf(end as Breakpoint);
+
         return (
-            `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and `
-            + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`
+            `@media (min-width:${
+                typeof values[start as Breakpoint] === 'number'
+                    ? values[start as Breakpoint]
+                    : start
+            }${unit}) and `
+            + `(max-width:${(
+                endIndex !== -1 && typeof values[keys[endIndex] as Breakpoint] === 'number'
+                    ? values[keys[endIndex] as Breakpoint]
+                    : end as number
+            ) - step / 100}${unit})`
         );
     }
 
     function only(key: Breakpoint) {
         if (keys.indexOf(key) + 1 < keys.length) {
-            return between(key, keys[keys.indexOf(key) + 1]);
+            return between(key, keys[keys.indexOf(key) + 1] as Breakpoint);
         }
         return up(key);
     }
@@ -164,12 +179,12 @@ export default function createBreakpoints(breakpoints: BreakpointsOptions): Brea
         // handle first and last key separately, for better readability
         const keyIndex = keys.indexOf(key);
         if (keyIndex === 0) {
-            return up(keys[1]);
+            return up(keys[1] as Breakpoint);
         }
         if (keyIndex === keys.length - 1) {
-            return down(keys[keyIndex]);
+            return down(keys[keyIndex] as Breakpoint);
         }
-        return between(key, keys[keys.indexOf(key) + 1]).replace(
+        return between(key, keys[keys.indexOf(key) + 1] as Breakpoint).replace(
             '@media',
             '@media not all and',
         );

packages/react/tsconfig.json

@@ -1,19 +1,19 @@
 {
     "compilerOptions": {
-        "baseUrl": ".",
-        "declaration": true,
-        "pretty": true,
-        "skipLibCheck": true,
-        "esModuleInterop": true,
         "jsx": "react-jsx",
-        "strict": true,
         "lib": ["ESNEXT", "DOM", "DOM.Iterable"],
+        "baseUrl": ".",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
         // use global types for vite's expect, describe, etc.
         "types": ["vitest/globals"],
-        "noImplicitReturns": true,
+        "strict": true,
         "noFallthroughCasesInSwitch": true,
-        "module": "ESNext",
-        "moduleResolution": "Bundler"
+        "noImplicitReturns": true,
+        "declaration": true,
+        "pretty": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true
     },
     "exclude": ["node_modules", "dist"]
 }

packages/react/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+    entry: ['src/index.ts'],
+    dts: true,
+    outDir: 'dist',
+    clean: true,
+    // minify: true,
+    // sourcemap: true,
+    format: ['cjs', 'esm'],
+    treeshake: true,
+    splitting: false,
+    cjsInterop: true,
+});