@ramesesinc/app-forms 0.1.0

package/dist/components/common/InputValidator.tsx

@@ -0,0 +1,252 @@
+import React, { useState, useEffect } from "react";
+
+type InputValidatorProps = {
+    datatype: "number" | "decimal" | "string" | "boolean" | "list" | "complexlist" | any;
+    value?: any;
+    onChange?: (value: any) => void;
+    options?: string[];
+    className?: string;
+    label?: string;
+    placeholder?: string;
+    activeFirst?: boolean;
+};
+
+const InputValidator: React.FC<InputValidatorProps> = ({ datatype, value, onChange, options = [], className = "", label = "", placeholder = "", activeFirst = true }) => {
+    const [inputValue, setInputValue] = useState<any>(value ?? "");
+
+    useEffect(() => {
+        setInputValue(value ?? "");
+    }, [value]);
+
+    const handleChange = (val: any) => {
+        setInputValue(val);
+        onChange?.(val);
+    };
+
+    switch (datatype) {
+        case "number":
+            return (
+                <input 
+                    type="text" 
+                    value={inputValue}
+                    placeholder={placeholder}
+                    className={`outline-none ${className}`}
+                    onChange={(e) => {
+                        const val = e.target.value;
+                        if (/^-?\d*$/.test(val)) {
+                            handleChange(val);
+                        }
+                    }}
+                />
+            );
+
+        case "decimal":
+            return (
+                <input 
+                    type="text" 
+                    value={inputValue}
+                    placeholder={placeholder}
+                    className={`outline-none ${className}`}
+                    onChange={(e) => {
+                        const val = e.target.value;
+                        if (/^-?\d*\.?\d*$/.test(val)) {
+                            handleChange(val);
+                        }
+                    }}
+                />
+            );
+
+        case "string":
+            return (
+                <input 
+                    type="text" 
+                    value={inputValue}
+                    placeholder={placeholder}
+                    className={`
+    focus:ring-0
+    focus:border-transparent
+    bg-transparent
+    focus:bg-transparent
+    shadow-none
+    focus:shadow-none
+    appearance-none ${className}`}
+                    onChange={(e) => {
+                        const val = e.target.value;
+
+                        // allow empty value
+                        if (val === "") {
+                            handleChange(val);
+                            return;
+                        }
+
+                        // allow alphanumeric + space
+                        if (/^[a-zA-Z0-9 ]+$/.test(val)) {
+                            handleChange(val);
+                        }
+                    }}
+                />
+            );
+
+        case "mobilenumber":
+            return (
+                <input
+                    type="text"
+                    value={inputValue}
+                    placeholder={placeholder}
+                    className={`focus:ring-0
+    focus:border-transparent
+    bg-transparent
+    focus:bg-transparent
+    shadow-none
+    focus:shadow-none
+    appearance-none ${className}`}
+                    onChange={(e) => {
+                        const val = e.target.value;
+
+                        // allow empty, digits, or + at start
+                        if (/^\+?\d*$/.test(val)) {
+                            handleChange(val);
+                        }
+                    }}
+                />
+            );
+
+        case "email":
+            return (
+                <input 
+                    type="text"
+                    value={inputValue}
+                    placeholder={placeholder}
+                    className={`focus:ring-0
+    focus:border-transparent
+    bg-transparent
+    focus:bg-transparent
+    shadow-none
+    focus:shadow-none
+    appearance-none ${className}`}
+                    onChange={(e) => {
+                        const val = e.target.value;
+
+                        // allow empty value
+                        if (val === "") {
+                            handleChange(val);
+                            return;
+                        }
+
+                        // allow email-safe characters while typing
+                        if (/^[a-zA-Z0-9@._-]*$/.test(val)) {
+                            handleChange(val);
+                        }
+                    }}
+                />
+            );
+
+
+        case "boolean":
+            if (options.length > 0) {
+                // Multiple checkboxes
+                return (
+                    <div className={`flex flex-col space-y-1 ${className}`}>
+                        {options.map((opt, i) => (
+                            <label key={i} className="inline-flex items-center space-x-2 cursor-pointer">
+                                <input
+                                    type="checkbox"
+                                    value={opt}
+                                    checked={Array.isArray(inputValue) ? inputValue.includes(opt) : false}
+                                    className="w-4 h-4 accent-blue-500"
+                                    onChange={(e) => {
+                                        let newValue = Array.isArray(inputValue) ? [...inputValue] : [];
+                                        if (e.target.checked) {
+                                            newValue.push(opt);
+                                        } else {
+                                            newValue = newValue.filter((v) => v !== opt);
+                                        }
+                                        handleChange(newValue);
+                                    }}
+                                />
+                                <span>{opt}</span>
+                            </label>
+                        ))}
+                    </div>
+                );
+            }
+
+            // Single checkbox (default)
+            return (
+                <label className={`inline-flex items-center space-x-2 cursor-pointer ${className}`}>
+                    <input
+                        type="checkbox"
+                        checked={!!inputValue}
+                        className="w-4 h-4 accent-blue-500"
+                        onChange={(e) => handleChange(e.target.checked)}
+                    />
+                    {label && <span>{label}</span>}
+                </label>
+            );
+
+        case "radio":
+            if (options.length === 0) {
+                return <span className={className}>No options provided</span>;
+            }
+
+            // Initialize first option as active if inputValue is empty and activeFirst is true
+            useEffect(() => {
+                if ((inputValue === "" || inputValue === undefined) && activeFirst) {
+                    handleChange(options[0]);
+                }
+            }, [options, activeFirst]);
+
+            return (
+                <div className={`flex flex-col space-y-1 ${className}`}>
+                    {options.map((opt, i) => (
+                        <label key={i} className="inline-flex items-center space-x-2 cursor-pointer">
+                            <input
+                                type="radio"
+                                name={`radio-${label || Math.random()}`} // dynamic name to avoid conflicts
+                                value={opt}
+                                checked={inputValue === opt}
+                                className="w-4 h-4 accent-blue-500"
+                                onChange={() => handleChange(opt)}
+                            />
+                            <span>{opt}</span>
+                        </label>
+                    ))}
+                </div>
+            );
+
+        case "list":
+            return (
+                <select value={inputValue}
+                    className={`bg-transparent ${className}`}
+                    onChange={(e) => handleChange(e.target.value)} 
+                >
+                    <option value="">Select an option</option>
+                    {options.map((opt, i) => (
+                        <option key={i} value={opt}>
+                        {opt}
+                        </option>
+                    ))}
+                </select>
+            );
+
+        case "complexlist":
+            return (
+                <select multiple value={inputValue || []}
+                    className={`${className}`}
+                    onChange={(e) => {
+                        const selected = Array.from(e.target.selectedOptions).map((opt) => opt.value);
+                        handleChange(selected);
+                    }}
+                >
+                    {options.map((opt, i) => (
+                        <option key={i} value={opt}> {opt} </option>
+                    ))}
+                </select>
+            );
+
+        default:
+        return <span className={className}>Unsupported datatype</span>;
+    }
+};
+
+export default InputValidator;

package/dist/components/index.d.ts

@@ -0,0 +1,10 @@
+export { default as AppContactForm } from "./AppContactForm";
+export { default as AppOtpForm } from "./AppOtpForm";
+export { default as AppSaveForm } from "./AppSaveForm";
+export { default as HtmlTemplate } from "./HtmlTemplate";
+export { default as ApplicantInfo } from "./ApplicantInfo";
+export { default as NewPermitAppCodeForm } from "./NewPermitAppCodeForm";
+export { default as NewPermitAppForm } from "./NewPermitAppForm";
+export { default as NewPermitAppTermForm } from "./NewPermitAppTermForm";
+export { default as NewPermitAppTypeForm } from "./NewPermitAppTypeForm";
+export { default as test } from "./test";

package/dist/components/index.js

@@ -0,0 +1,12 @@
+export { default as AppContactForm } from "./AppContactForm";
+// export { default as AppInitForm } from "./AppInitForm";
+export { default as AppOtpForm } from "./AppOtpForm";
+export { default as AppSaveForm } from "./AppSaveForm";
+export { default as HtmlTemplate } from "./HtmlTemplate";
+// export { default as PrivacyStatementForm } from "./PrivacyStatementForm";
+export { default as ApplicantInfo } from "./ApplicantInfo";
+export { default as NewPermitAppCodeForm } from "./NewPermitAppCodeForm";
+export { default as NewPermitAppForm } from "./NewPermitAppForm";
+export { default as NewPermitAppTermForm } from "./NewPermitAppTermForm";
+export { default as NewPermitAppTypeForm } from "./NewPermitAppTypeForm";
+export { default as test } from "./test";

package/dist/components/index.ts

@@ -0,0 +1,14 @@
+export { default as AppContactForm } from "./AppContactForm";
+// export { default as AppInitForm } from "./AppInitForm";
+export { default as AppOtpForm } from "./AppOtpForm";
+export { default as AppSaveForm } from "./AppSaveForm";
+export { default as HtmlTemplate } from "./HtmlTemplate";
+// export { default as PrivacyStatementForm } from "./PrivacyStatementForm";
+
+export { default as ApplicantInfo } from "./ApplicantInfo";
+export { default as NewPermitAppCodeForm } from "./NewPermitAppCodeForm";
+export { default as NewPermitAppForm } from "./NewPermitAppForm";
+export { default as NewPermitAppTermForm } from "./NewPermitAppTermForm";
+export { default as NewPermitAppTypeForm } from "./NewPermitAppTypeForm";
+export { default as test } from "./test";
+

package/dist/components/test.d.ts

@@ -0,0 +1,2 @@
+declare const test: () => import("react/jsx-runtime").JSX.Element;
+export default test;

package/dist/components/test.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const test = () => {
+    return _jsx("div", { children: "test" });
+};
+export default test;

package/dist/components/test.tsx

@@ -0,0 +1,5 @@
+const test = () => {
+  return <div>test</div>;
+};
+
+export default test;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./components";

package/dist/styles/index.css

@@ -0,0 +1,47 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    @apply bg-white text-gray-900;
+
+    font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+      "Droid Sans", "Helvetica Neue", sans-serif;
+  }
+
+  input:focus,
+  textarea:focus,
+  select:focus {
+    @apply outline-none placeholder-gray-400 ring-2 ring-primary-400 border-transparent;
+    @apply transition-all duration-200;
+    @apply bg-yellow-50;
+  }
+
+  /* --- Base Styles for Headings --- */
+  h1 {
+    @apply text-4xl font-bold mb-4;
+  }
+  h2 {
+    @apply text-3xl font-semibold mb-3;
+  }
+  h3 {
+    @apply text-2xl font-semibold mb-2;
+  }
+  h4 {
+    @apply text-xl font-medium mb-1;
+  }
+  h5 {
+    @apply text-lg font-semibold mb-1;
+  }
+  h6 {
+    @apply text-base font-semibold mb-1;
+  }
+}
+
+@layer utilities {
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@ramesesinc/app-forms",
+  "version": "0.1.0",
+  "description": "Platform Core Library",
+  "author": "Rameses Systems Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc && postcss src/styles/index.css -o dist/styles/index.css && cp src/styles/* dist/styles/ && cp -r src/components dist/",
+    "build2": "rm -rf dist && tsc",
+    "clean": "rm -rf dist",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "next": ">=13.5.6 <15.0.0",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@ramesesinc/client": "1.0.14",
+    "@ramesesinc/lib": "1.0.12",
+    "@types/crypto-js": "^4.2.2",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^20",
+    "@types/pako": "^2.0.3",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.21",
+    "clsx": "^2.1.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.9",
+    "postcss": "^8",
+    "@ramesesinc/loader": "*",
+    "supports-color": "^10.2.2",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  },
+  "keywords": [
+    "ramesesinc-platform-core"
+  ],
+  "dependencies": {
+    "seti-ramesesv1": "^1.0.154"
+  }
+}