statemorph 1.0.0

package/index.ts

@@ -0,0 +1,3 @@
+import StateMorph from "./src/package";
+
+export default StateMorph;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "statemorph",
+  "version": "1.0.0",
+  "description": "Zero-dep React wrapper that eliminates loading/error/empty/success ternary hell.",
+  "license": "ISC",
+  "author": "",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "rollup": "rollup -c --bundleConfigAsCjs"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
+    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "rollup": "^4.58.0",
+    "rollup-plugin-postcss": "^4.0.2"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,43 @@
+    import resolve from "@rollup/plugin-node-resolve";
+    import commonjs from "@rollup/plugin-commonjs";
+    import typescript from "@rollup/plugin-typescript";
+    import dts from "rollup-plugin-dts";
+    import terser from "@rollup/plugin-terser";
+    import peerDepsExternal from "rollup-plugin-peer-deps-external";
+
+    import postcss from "rollup-plugin-postcss";
+
+    const packageJson = require("./package.json");
+
+    export default [
+      {
+        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(),
+          postcss(),
+        ],
+        external: ["react", "react-dom"],
+      },
+      {
+        input: "src/index.ts",
+        output: [{ file: packageJson.types }],
+        plugins: [dts.default()],
+        external: [/\.css$/],
+      },
+    ];

package/src/package/index.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { memo, type ReactNode } from 'react';
+
+interface StateConfig<T> {
+  isLoading: boolean;
+  loadingUI?: ReactNode;
+  isError: boolean;
+  errorUI?: ReactNode;
+  isIdle: boolean;
+  idleUI?: ReactNode;
+  data: T | null;
+  emptyUI?: ReactNode;
+}
+
+interface StateMorphProps<T> {
+  config: StateConfig<T>;
+  children: ReactNode;
+}
+
+const StateMorph: React.FC<StateMorphProps<any>> = memo(({ config, children }) => {
+  const { 
+    isLoading, loadingUI, 
+    isError, errorUI, 
+    isIdle, idleUI, 
+    data, emptyUI 
+  } = config;
+
+  if (isLoading) {
+    return <>{loadingUI ?? <div className="animate-pulse p-8 text-center text-gray-500">Loading...</div>}</>;
+  }
+
+  if (isError) {
+    return <>{errorUI ?? <div className="p-8 text-center text-red-500">Something went wrong. Please try again.</div>}</>;
+  }
+
+  if (isIdle) {
+    return <>{idleUI ?? <div className="p-8 text-center text-gray-500">Ready to load data</div>}</>;
+  }
+
+  if (!data || (Array.isArray(data) && data.length === 0) || (data && typeof data === 'object' && Object.keys(data).length === 0)) {
+    return <>{emptyUI ?? <div className="p-8 text-center text-gray-500">No data available</div>}</>;
+  }
+
+  return <div>{children}</div>;
+});
+
+StateMorph.displayName = 'StateMorph';
+
+export default StateMorph;

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}