@zauru-sdk/components 1.0.54 → 1.0.61

package/src/Form/FormButtons/index.tsx

@@ -1,78 +1,78 @@
-import React from "react";
-
-type Props = {
-  //Guardar
-  saveTitle?: string;
-  saveName?: string;
-  onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  //Cancelar
-  showCancel?: boolean;
-  cancelTitle?: string;
-  cancelName?: string;
-  //Limpiar
-  showClear?: boolean;
-  clearTitle?: string;
-  clearName?: string;
-  //Cargando...
-  loading?: boolean;
-  loadingSaveText?: string;
-};
-
-export const FormButtons = (props: Props) => {
-  const {
-    saveTitle = "Guardar",
-    saveName = "save",
-    cancelTitle = "Cancelar",
-    cancelName = "cancel",
-    showCancel = true,
-    showClear = false,
-    clearName = "clear",
-    clearTitle = "Limpiar",
-    loading = false,
-    onClickSave,
-    loadingSaveText = "Guardando...",
-  } = props;
-
-  return (
-    <>
-      {showClear && (
-        <button
-          type="reset"
-          name="action"
-          disabled={loading}
-          value={clearName}
-          className={`ml-5 ${
-            loading ? " bg-opacity-25 cursor-progress" : ""
-          } rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
-        >
-          {clearTitle}
-        </button>
-      )}
-      {showCancel && (
-        <button
-          type="button"
-          name="action"
-          disabled={loading}
-          value={cancelName}
-          className={`${showClear ? "ml-2" : "ml-5"} ${
-            loading ? " bg-opacity-25 cursor-progress" : ""
-          } rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
-        >
-          {cancelTitle}
-        </button>
-      )}
-      <button
-        type="submit"
-        name="action"
-        disabled={loading}
-        value={saveName}
-        onClick={onClickSave}
-        className={`ml-2 ${
-          loading ? " bg-opacity-25 cursor-progress" : "hover:bg-indigo-700"
-        } inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
-      >
-        {loading ? loadingSaveText : saveTitle}
-      </button>
-    </>
-  );
-};
+import React from "react";
+
+type Props = {
+  //Guardar
+  saveTitle?: string;
+  saveName?: string;
+  onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  //Cancelar
+  showCancel?: boolean;
+  cancelTitle?: string;
+  cancelName?: string;
+  //Limpiar
+  showClear?: boolean;
+  clearTitle?: string;
+  clearName?: string;
+  //Cargando...
+  loading?: boolean;
+  loadingSaveText?: string;
+};
+
+export const FormButtons = (props: Props) => {
+  const {
+    saveTitle = "Guardar",
+    saveName = "save",
+    cancelTitle = "Cancelar",
+    cancelName = "cancel",
+    showCancel = true,
+    showClear = false,
+    clearName = "clear",
+    clearTitle = "Limpiar",
+    loading = false,
+    onClickSave,
+    loadingSaveText = "Guardando...",
+  } = props;
+
+  return (
+    <>
+      {showClear && (
+        <button
+          type="reset"
+          name="action"
+          disabled={loading}
+          value={clearName}
+          className={`ml-5 ${
+            loading ? " bg-opacity-25 cursor-progress" : ""
+          } rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
+        >
+          {clearTitle}
+        </button>
+      )}
+      {showCancel && (
+        <button
+          type="button"
+          name="action"
+          disabled={loading}
+          value={cancelName}
+          className={`${showClear ? "ml-2" : "ml-5"} ${
+            loading ? " bg-opacity-25 cursor-progress" : ""
+          } rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
+        >
+          {cancelTitle}
+        </button>
+      )}
+      <button
+        type="submit"
+        name="action"
+        disabled={loading}
+        value={saveName}
+        onClick={onClickSave}
+        className={`ml-2 ${
+          loading ? " bg-opacity-25 cursor-progress" : "hover:bg-indigo-700"
+        } inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
+      >
+        {loading ? loadingSaveText : saveTitle}
+      </button>
+    </>
+  );
+};

package/src/Form/FormLayout/index.tsx

@@ -1,37 +1,37 @@
-import { Form, type FormMethod } from "@remix-run/react";
-import { type ReactNode } from "react";
-import { ButtonSectionContainer } from "../../Containers/index.js";
-
-type Props = {
-  formId: string;
-  title?: string;
-  children: ReactNode;
-  buttons?: ReactNode;
-  method?: FormMethod;
-};
-
-export const FormLayout = (props: Props) => {
-  const { title, children, buttons, method, formId } = props;
-
-  return (
-    <Form id={formId} name={formId} method={method ?? "post"} key={formId}>
-      {title && (
-        <label className="block text-sm font-medium text-gray-700 mb-3">
-          {title}
-        </label>
-      )}
-      <div className="shadow sm:overflow-hidden sm:rounded-md">
-        <div className="space-y-6 bg-white px-4 py-5 sm:p-6">
-          {/* AQUÍ VAN EL CONTENIDO DEL FORM */}
-          {children}
-        </div>
-        {buttons && (
-          <ButtonSectionContainer>
-            {/* AQUÍ VAN LOS BOTONES */}
-            {buttons}
-          </ButtonSectionContainer>
-        )}
-      </div>
-    </Form>
-  );
-};
+import { Form, type FormMethod } from "@remix-run/react";
+import { type ReactNode } from "react";
+import { ButtonSectionContainer } from "../../Containers/index.js";
+
+type Props = {
+  formId: string;
+  title?: string;
+  children: ReactNode;
+  buttons?: ReactNode;
+  method?: FormMethod;
+};
+
+export const FormLayout = (props: Props) => {
+  const { title, children, buttons, method, formId } = props;
+
+  return (
+    <Form id={formId} name={formId} method={method ?? "post"} key={formId}>
+      {title && (
+        <label className="block text-sm font-medium text-gray-700 mb-3">
+          {title}
+        </label>
+      )}
+      <div className="shadow sm:overflow-hidden sm:rounded-md">
+        <div className="space-y-6 bg-white px-4 py-5 sm:p-6">
+          {/* AQUÍ VAN EL CONTENIDO DEL FORM */}
+          {children}
+        </div>
+        {buttons && (
+          <ButtonSectionContainer>
+            {/* AQUÍ VAN LOS BOTONES */}
+            {buttons}
+          </ButtonSectionContainer>
+        )}
+      </div>
+    </Form>
+  );
+};