@variamosple/variamos-components 0.4.0 → 0.4.1

package/dist/Components/Header/BugFormModal.js

@@ -1,96 +1,101 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useState as a, useEffect as N } from "react";
-import { Modal as o, Form as t, Alert as k, Button as y } from "react-bootstrap";
-const G = ({
-  show: i,
-  onHide: d,
-  onSubmit: C,
-  categories: n,
-  isSubmitting: c,
-  errorMessage: s
+import { useState as o, useEffect as x } from "react";
+import { Modal as i, Form as r, Alert as k, Button as B } from "react-bootstrap";
+import { bugFormErrors as F, TITLE_MAX_LENGTH as D } from "./bugFormErrors.js";
+const A = ({
+  show: c,
+  onHide: p,
+  onSubmit: N,
+  categories: s,
+  isSubmitting: u,
+  errorMessage: h
 }) => {
-  const [u, h] = a(""), [p, m] = a(""), [g, b] = a(""), [F, f] = a(null), [x, v] = a(!1);
-  N(() => {
-    i && (h(""), m(""), b(n[0] || "Other"), f(null), v(!1));
-  }, [i, n]);
-  const B = (r) => {
-    if (r.preventDefault(), r.currentTarget.checkValidity() === !1) {
-      r.stopPropagation(), v(!0);
+  const [n, m] = o(""), [a, b] = o(""), [g, v] = o(""), [I, f] = o(null), [L, C] = o(!1), d = L ? F({ title: n, description: a }) : {};
+  x(() => {
+    c && (m(""), b(""), v(s[0] || "Other"), f(null), C(!1));
+  }, [c, s]);
+  const T = (t) => {
+    t.preventDefault(), C(!0);
+    const y = F({ title: n, description: a });
+    if (y.title || y.description) {
+      t.stopPropagation();
       return;
     }
-    C({ title: u, description: p, category: g }, F ?? void 0);
+    N({ title: n, description: a, category: g }, I ?? void 0);
   };
   return /* @__PURE__ */ l(
-    o,
+    i,
     {
-      show: i,
-      onHide: d,
+      show: c,
+      onHide: p,
       backdrop: "static",
       keyboard: !1,
       centered: !0,
       children: [
-        /* @__PURE__ */ e(o.Header, { closeButton: !0, children: /* @__PURE__ */ e(o.Title, { children: "Report a New Bug" }) }),
-        /* @__PURE__ */ l(t, { noValidate: !0, validated: x, onSubmit: B, children: [
-          /* @__PURE__ */ l(o.Body, { children: [
-            s ? /* @__PURE__ */ e(k, { variant: "danger", role: "alert", children: s }) : null,
-            /* @__PURE__ */ l(t.Group, { className: "mb-3", controlId: "bugTitle", children: [
-              /* @__PURE__ */ e(t.Label, { children: "Title *" }),
+        /* @__PURE__ */ e(i.Header, { closeButton: !0, children: /* @__PURE__ */ e(i.Title, { children: "Report a New Bug" }) }),
+        /* @__PURE__ */ l(r, { noValidate: !0, onSubmit: T, children: [
+          /* @__PURE__ */ l(i.Body, { children: [
+            h ? /* @__PURE__ */ e(k, { variant: "danger", role: "alert", children: h }) : null,
+            /* @__PURE__ */ l(r.Group, { className: "mb-3", controlId: "bugTitle", children: [
+              /* @__PURE__ */ e(r.Label, { children: "Title *" }),
               /* @__PURE__ */ e(
-                t.Control,
+                r.Control,
                 {
                   required: !0,
                   type: "text",
                   placeholder: "e.g. Build error on auth routes",
-                  value: u,
-                  onChange: (r) => h(r.target.value),
-                  maxLength: 100
+                  value: n,
+                  onChange: (t) => m(t.target.value),
+                  maxLength: D,
+                  isInvalid: !!d.title
                 }
               ),
-              /* @__PURE__ */ e(t.Control.Feedback, { type: "invalid", children: "Title is required (max 100 characters)" })
+              /* @__PURE__ */ e(r.Control.Feedback, { type: "invalid", children: d.title })
             ] }),
-            /* @__PURE__ */ l(t.Group, { className: "mb-3", controlId: "bugDescription", children: [
-              /* @__PURE__ */ e(t.Label, { children: "Description *" }),
+            /* @__PURE__ */ l(r.Group, { className: "mb-3", controlId: "bugDescription", children: [
+              /* @__PURE__ */ e(r.Label, { children: "Description *" }),
               /* @__PURE__ */ e(
-                t.Control,
+                r.Control,
                 {
                   required: !0,
                   as: "textarea",
                   rows: 4,
                   placeholder: "Describe step-by-step how to reproduce the bug...",
-                  value: p,
-                  onChange: (r) => m(r.target.value)
+                  value: a,
+                  onChange: (t) => b(t.target.value),
+                  isInvalid: !!d.description
                 }
               ),
-              /* @__PURE__ */ e(t.Control.Feedback, { type: "invalid", children: "Description is required" })
+              /* @__PURE__ */ e(r.Control.Feedback, { type: "invalid", children: d.description })
             ] }),
-            /* @__PURE__ */ e("div", { className: "row", children: /* @__PURE__ */ e("div", { className: "col-md-12", children: /* @__PURE__ */ l(t.Group, { className: "mb-3", controlId: "bugCategory", children: [
-              /* @__PURE__ */ e(t.Label, { children: "Category *" }),
+            /* @__PURE__ */ e("div", { className: "row", children: /* @__PURE__ */ e("div", { className: "col-md-12", children: /* @__PURE__ */ l(r.Group, { className: "mb-3", controlId: "bugCategory", children: [
+              /* @__PURE__ */ e(r.Label, { children: "Category *" }),
               /* @__PURE__ */ e(
-                t.Select,
+                r.Select,
                 {
                   required: !0,
                   value: g,
-                  onChange: (r) => b(r.target.value),
-                  children: n.map((r) => /* @__PURE__ */ e("option", { value: r, children: r }, r))
+                  onChange: (t) => v(t.target.value),
+                  children: s.map((t) => /* @__PURE__ */ e("option", { value: t, children: t }, t))
                 }
               )
             ] }) }) }),
-            /* @__PURE__ */ l(t.Group, { className: "mb-3", controlId: "bugFile", children: [
-              /* @__PURE__ */ e(t.Label, { children: "Attachment (Optional)" }),
+            /* @__PURE__ */ l(r.Group, { className: "mb-3", controlId: "bugFile", children: [
+              /* @__PURE__ */ e(r.Label, { children: "Attachment (Optional)" }),
               /* @__PURE__ */ e(
-                t.Control,
+                r.Control,
                 {
                   type: "file",
-                  onChange: (r) => {
-                    r.target.files && r.target.files.length > 0 && f(r.target.files[0]);
+                  onChange: (t) => {
+                    t.target.files && t.target.files.length > 0 && f(t.target.files[0]);
                   }
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ l(o.Footer, { children: [
-            /* @__PURE__ */ e(y, { variant: "secondary", onClick: d, disabled: c, children: "Cancel" }),
-            /* @__PURE__ */ e(y, { variant: "primary", type: "submit", disabled: c, children: c ? "Creating..." : "Report Bug" })
+          /* @__PURE__ */ l(i.Footer, { children: [
+            /* @__PURE__ */ e(B, { variant: "secondary", onClick: p, disabled: u, children: "Cancel" }),
+            /* @__PURE__ */ e(B, { variant: "primary", type: "submit", disabled: u, children: u ? "Creating..." : "Report Bug" })
           ] })
         ] })
       ]
@@ -98,5 +103,5 @@ const G = ({
   );
 };
 export {
-  G as BugFormModal
+  A as BugFormModal
 };

package/dist/Components/Header/bugFormErrors.d.ts

@@ -0,0 +1,11 @@
+export interface BugFormFields {
+    title: string;
+    description: string;
+}
+export declare const TITLE_MAX_LENGTH = 100;
+/**
+ * The message of each invalid field, or nothing for a valid one. The form
+ * shows them only after a submission attempt, and writes no message text
+ * otherwise, so that no style of the host application can show it early.
+ */
+export declare function bugFormErrors({ title, description, }: BugFormFields): Partial<Record<keyof BugFormFields, string>>;

package/dist/Components/Header/bugFormErrors.js

@@ -0,0 +1,12 @@
+const t = 100;
+function T({
+  title: i,
+  description: e
+}) {
+  const r = {};
+  return (i.trim() === "" || i.length > 100) && (r.title = "Title is required (max 100 characters)"), e.trim() === "" && (r.description = "Description is required"), r;
+}
+export {
+  t as TITLE_MAX_LENGTH,
+  T as bugFormErrors
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@variamosple/variamos-components",
   "private": false,
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",