REACTCMN-19 BaseComponentProps

.nvmrc

@@ -1 +1 @@
-18.17.1
+v20.18.0

README.md

@@ -6,9 +6,9 @@ A suite of common React components used to compose React applications for the Le
 
 This library requires the following
 
-- Node [LTS](https://github.com/nodejs/Release) 16.x or 18.x (preferable)
-- React ^18.2.0
-- TailwindCSS ^3.3.0
+- Node [LTS](https://github.com/nodejs/Release) 18 or higher
+- React 18.x
+- TailwindCSS 3.x
 
 ## Install
 

jest.config.json

@@ -0,0 +1,3 @@
+{
+  "testEnvironment": "jsdom"
+}

package.json

@@ -1,12 +1,14 @@
 {
   "name": "@leanstacks/react-common",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Leanstacks organization common React components.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs",
+    "clean": "rimraf coverage dist",
+    "clean:all": "npm run clean && rimraf storybook-static",
     "lint": "eslint --ext .ts,.tsx src/",
     "test": "jest",
     "test:coverage": "jest --coverage --silent --verbose --color",
@@ -16,7 +18,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/leanstacks/react-common"
+    "url": "git+https://github.com/leanstacks/react-common.git"
   },
   "keywords": [
     "react"
@@ -28,17 +30,17 @@
   },
   "homepage": "https://github.com/leanstacks/react-common#readme",
   "dependencies": {
-    "classnames": "^2.3.2",
-    "dayjs": "^1.11.9"
+    "classnames": "2.5.1",
+    "dayjs": "1.11.13"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.3",
+    "@babel/preset-env": "7.25.9",
+    "@babel/preset-react": "7.25.9",
+    "@babel/preset-typescript": "7.25.9",
+    "@rollup/plugin-commonjs": "28.0.1",
+    "@rollup/plugin-node-resolve": "15.3.0",
+    "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "12.1.1",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-interactions": "^7.4.0",
     "@storybook/addon-links": "^7.4.0",
@@ -48,32 +50,33 @@
     "@storybook/react": "^7.4.0",
     "@storybook/react-webpack5": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.4",
-    "@types/react": "^18.2.21",
-    "@typescript-eslint/parser": "^6.19.0",
-    "autoprefixer": "^10.4.15",
-    "eslint": "^8.56.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
-    "postcss": "^8.4.29",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^3.28.1",
-    "rollup-plugin-dts": "^6.0.1",
+    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/react": "16.0.1",
+    "@types/jest": "29.5.14",
+    "@types/react": "18.3.12",
+    "@typescript-eslint/parser": "8.11.0",
+    "autoprefixer": "10.4.20",
+    "eslint": "8.57.1",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-react": "7.37.2",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "postcss": "8.4.47",
+    "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "0.6.8",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "rimraf": "6.0.1",
+    "rollup": "4.24.0",
+    "rollup-plugin-dts": "6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^7.4.0",
-    "tailwindcss": "^3.3.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "tailwindcss": "3.4.14",
+    "tslib": "2.8.0",
+    "typescript": "5.6.3"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "tailwindcss": "^3.3.0"
+    "react": "18.x",
+    "tailwindcss": "3.x"
   }
 }

rollup.config.js

@@ -5,35 +5,22 @@ import { dts } from 'rollup-plugin-dts';
 import terser from '@rollup/plugin-terser';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
-const packageJson = require('./package.json');
-
-export default [
+const config = [
   {
     input: 'src/index.ts',
-    output: [
-      {
-        file: packageJson.main,
-        format: 'cjs',
-        sourcemap: true,
-      },
-      {
-        file: packageJson.module,
-        format: 'esm',
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript({ tsconfig: './tsconfig.json' }),
-      terser(),
-    ],
+    output: {
+      file: 'dist/index.js',
+      format: 'es',
+      sourcemap: true,
+    },
+    plugins: [peerDepsExternal(), resolve(), commonjs(), typescript(), terser()],
     external: ['react'],
   },
   {
-    input: 'dist/esm/types/index.d.ts',
-    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    input: 'dist/index.d.ts',
+    output: [{ file: 'dist/types/index.d.ts', format: 'es' }],
     plugins: [dts()],
   },
 ];
+
+export default config;

src/utils/index.ts

@@ -7,4 +7,4 @@ export {
   UnitDisplay,
 } from './constants';
 
-export { PropsWithClassName, PropsWithTestId } from './types';
+export { BaseComponentProps, PropsWithClassName, PropsWithTestId } from './types';

src/utils/types.ts

@@ -13,3 +13,11 @@ export interface PropsWithTestId {
 export interface PropsWithClassName {
   className?: string;
 }
+
+/**
+ * Utility interface combining the most commonly used React component
+ * properties interfaces.
+ * @see {@link PropsWithClassName}
+ * @see {@link PropsWithTestId}
+ */
+export interface BaseComponentProps extends PropsWithClassName, PropsWithTestId {}

tsconfig.json

@@ -70,7 +70,7 @@
     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
     // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-    "declarationDir": "types",                           /* Specify the output directory for generated declaration files. */
+    // "declarationDir": "types",                        /* Specify the output directory for generated declaration files. */
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 
     /* Interop Constraints */