npm - @omnibase/shadcn - Versions diffs - 0.2.0 → 0.3.0 - Mend

@omnibase/shadcn 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.cjs CHANGED Viewed

@@ -307,84 +307,144 @@ function isUiNodeInputAttributes(attributes) {
   return attributes && typeof attributes === "object" && "name" in attributes && "type" in attributes;
 }
 function CustomFlowForm({ flow, Header }) {
+  const nodesByGroup = flow.ui.nodes.reduce((groups, node) => {
+    const group = node.group || "default";
+    if (!groups[group]) {
+      groups[group] = [];
+    }
+    groups[group].push(node);
+    return groups;
+  }, {});
+  const oidcNodes = nodesByGroup.oidc || [];
+  const regularNodes = Object.entries(nodesByGroup).filter(([group]) => group !== "oidc").flatMap(([, nodes]) => nodes);
+  const csrfToken = regularNodes.find(
+    (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.name === "csrf_token"
+  );
   const hasSubmitButton = flow.ui.nodes.some(
     (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit"
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Messages, { flow }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Card, { className: "w-full max-w-md mx-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { action: flow.ui.action, method: flow.ui.method, children: [
-      Header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-center pb-4", children: Header }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardContent, { className: "space-y-4", children: [
-        flow.ui.nodes.map((node) => {
-          if (isUiNodeInputAttributes(node.attributes)) {
-            const isSubmitButton = node.attributes.type === "submit";
-            const isHiddenField = node.attributes.type === "hidden";
-            const isVisibleField = !isHiddenField && !isSubmitButton;
-            if (isHiddenField) {
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "input",
-                {
-                  name: node.attributes.name,
-                  type: "hidden",
-                  value: node.attributes.value || "",
-                  readOnly: true
-                },
-                node.attributes.name
-              );
-            }
-            if (isSubmitButton) {
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                Button,
-                {
-                  type: "submit",
-                  name: node.attributes.name,
-                  value: node.attributes.value || "",
-                  className: "w-full mt-2",
-                  children: node.meta.label?.text || node.attributes.value || "Submit"
-                },
-                node.attributes.name
-              );
-            }
-            if (isVisibleField && [
-              "default",
-              "password",
-              "code",
-              "webauthn",
-              "passkey",
-              "totp",
-              "lookup_secret"
-            ].includes(node.group)) {
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Card, { className: "w-full max-w-md mx-auto", children: [
+      Header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-center pb-1", children: Header }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardContent, { className: "space-y-6", children: [
+        oidcNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-3", children: [
+          oidcNodes.map((node, index) => {
+            if (isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit") {
               return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                "div",
+                "form",
                 {
-                  className: "space-y-2",
+                  action: flow.ui.action,
+                  method: flow.ui.method,
+                  className: "w-full",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Label, { htmlFor: node.attributes.name, children: [
-                      node.meta.label?.text,
-                      node.attributes.required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-destructive ml-1", children: "*" })
-                    ] }),
+                    csrfToken && isUiNodeInputAttributes(csrfToken.attributes) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      "input",
+                      {
+                        name: csrfToken.attributes.name,
+                        type: "hidden",
+                        value: csrfToken.attributes.value || "",
+                        readOnly: true
+                      }
+                    ),
                     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                      Input,
+                      Button,
                       {
-                        id: node.attributes.name,
+                        type: "submit",
                         name: node.attributes.name,
-                        type: node.attributes.type,
-                        defaultValue: node.attributes.value || "",
-                        required: node.attributes.required,
-                        placeholder: `Enter your ${node.meta.label?.text?.toLowerCase() || node.attributes.name}`
+                        value: node.attributes.value || "",
+                        variant: "outline",
+                        className: "w-full",
+                        children: node.meta.label?.text || node.attributes.value || "Sign in"
                       }
                     )
                   ]
                 },
-                node.meta.label?.id || node.attributes.name
+                `oidc-${index}`
               );
             }
-          }
-          return null;
-        }),
-        !hasSubmitButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { type: "submit", className: "w-full", children: "Submit" })
+            return null;
+          }),
+          regularNodes.some(
+            (node) => isUiNodeInputAttributes(node.attributes) && !["hidden", "submit"].includes(node.attributes.type)
+          ) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative my-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-full border-t border-border" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "bg-background px-3 text-muted-foreground font-medium", children: "Or continue with email" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { action: flow.ui.action, method: flow.ui.method, children: [
+          regularNodes.map((node) => {
+            if (isUiNodeInputAttributes(node.attributes)) {
+              const isSubmitButton = node.attributes.type === "submit";
+              const isHiddenField = node.attributes.type === "hidden";
+              const isVisibleField = !isHiddenField && !isSubmitButton;
+              if (isHiddenField) {
+                return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "input",
+                  {
+                    name: node.attributes.name,
+                    type: "hidden",
+                    value: node.attributes.value || "",
+                    readOnly: true
+                  },
+                  node.attributes.name
+                );
+              }
+              if (isSubmitButton) {
+                return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  Button,
+                  {
+                    type: "submit",
+                    name: node.attributes.name,
+                    value: node.attributes.value || "",
+                    className: "w-full mt-2",
+                    children: node.meta.label?.text || node.attributes.value || "Submit"
+                  },
+                  node.attributes.name
+                );
+              }
+              if (isVisibleField && [
+                "default",
+                "password",
+                "code",
+                "webauthn",
+                "passkey",
+                "totp",
+                "lookup_secret",
+                "profile"
+              ].includes(node.group)) {
+                return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                  "div",
+                  {
+                    className: "space-y-2 mb-4",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Label, { htmlFor: node.attributes.name, children: [
+                        node.meta.label?.text,
+                        node.attributes.required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        Input,
+                        {
+                          id: node.attributes.name,
+                          name: node.attributes.name,
+                          type: node.attributes.type,
+                          defaultValue: node.attributes.value || "",
+                          required: node.attributes.required,
+                          placeholder: `Enter your ${node.meta.label?.text?.toLowerCase() || node.attributes.name}`
+                        }
+                      )
+                    ]
+                  },
+                  node.meta.label?.id || node.attributes.name
+                );
+              }
+            }
+            return null;
+          }),
+          !hasSubmitButton && !oidcNodes.length && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { type: "submit", className: "w-full", children: "Submit" })
+        ] })
       ] })
-    ] }) })
+    ] })
   ] });
 }

package/dist/index.js CHANGED Viewed

@@ -269,84 +269,144 @@ function isUiNodeInputAttributes(attributes) {
   return attributes && typeof attributes === "object" && "name" in attributes && "type" in attributes;
 }
 function CustomFlowForm({ flow, Header }) {
+  const nodesByGroup = flow.ui.nodes.reduce((groups, node) => {
+    const group = node.group || "default";
+    if (!groups[group]) {
+      groups[group] = [];
+    }
+    groups[group].push(node);
+    return groups;
+  }, {});
+  const oidcNodes = nodesByGroup.oidc || [];
+  const regularNodes = Object.entries(nodesByGroup).filter(([group]) => group !== "oidc").flatMap(([, nodes]) => nodes);
+  const csrfToken = regularNodes.find(
+    (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.name === "csrf_token"
+  );
   const hasSubmitButton = flow.ui.nodes.some(
     (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit"
   );
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx7(Messages, { flow }),
-    /* @__PURE__ */ jsx7(Card, { className: "w-full max-w-md mx-auto", children: /* @__PURE__ */ jsxs("form", { action: flow.ui.action, method: flow.ui.method, children: [
-      Header && /* @__PURE__ */ jsx7(CardHeader, { children: /* @__PURE__ */ jsx7(CardTitle, { className: "text-center pb-4", children: Header }) }),
-      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-        flow.ui.nodes.map((node) => {
-          if (isUiNodeInputAttributes(node.attributes)) {
-            const isSubmitButton = node.attributes.type === "submit";
-            const isHiddenField = node.attributes.type === "hidden";
-            const isVisibleField = !isHiddenField && !isSubmitButton;
-            if (isHiddenField) {
-              return /* @__PURE__ */ jsx7(
-                "input",
-                {
-                  name: node.attributes.name,
-                  type: "hidden",
-                  value: node.attributes.value || "",
-                  readOnly: true
-                },
-                node.attributes.name
-              );
-            }
-            if (isSubmitButton) {
-              return /* @__PURE__ */ jsx7(
-                Button,
-                {
-                  type: "submit",
-                  name: node.attributes.name,
-                  value: node.attributes.value || "",
-                  className: "w-full mt-2",
-                  children: node.meta.label?.text || node.attributes.value || "Submit"
-                },
-                node.attributes.name
-              );
-            }
-            if (isVisibleField && [
-              "default",
-              "password",
-              "code",
-              "webauthn",
-              "passkey",
-              "totp",
-              "lookup_secret"
-            ].includes(node.group)) {
+    /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-md mx-auto", children: [
+      Header && /* @__PURE__ */ jsx7(CardHeader, { children: /* @__PURE__ */ jsx7(CardTitle, { className: "text-center pb-1", children: Header }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-6", children: [
+        oidcNodes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          oidcNodes.map((node, index) => {
+            if (isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit") {
               return /* @__PURE__ */ jsxs(
-                "div",
+                "form",
                 {
-                  className: "space-y-2",
+                  action: flow.ui.action,
+                  method: flow.ui.method,
+                  className: "w-full",
                   children: [
-                    /* @__PURE__ */ jsxs(Label, { htmlFor: node.attributes.name, children: [
-                      node.meta.label?.text,
-                      node.attributes.required && /* @__PURE__ */ jsx7("span", { className: "text-destructive ml-1", children: "*" })
-                    ] }),
+                    csrfToken && isUiNodeInputAttributes(csrfToken.attributes) && /* @__PURE__ */ jsx7(
+                      "input",
+                      {
+                        name: csrfToken.attributes.name,
+                        type: "hidden",
+                        value: csrfToken.attributes.value || "",
+                        readOnly: true
+                      }
+                    ),
                     /* @__PURE__ */ jsx7(
-                      Input,
+                      Button,
                       {
-                        id: node.attributes.name,
+                        type: "submit",
                         name: node.attributes.name,
-                        type: node.attributes.type,
-                        defaultValue: node.attributes.value || "",
-                        required: node.attributes.required,
-                        placeholder: `Enter your ${node.meta.label?.text?.toLowerCase() || node.attributes.name}`
+                        value: node.attributes.value || "",
+                        variant: "outline",
+                        className: "w-full",
+                        children: node.meta.label?.text || node.attributes.value || "Sign in"
                       }
                     )
                   ]
                 },
-                node.meta.label?.id || node.attributes.name
+                `oidc-${index}`
               );
             }
-          }
-          return null;
-        }),
-        !hasSubmitButton && /* @__PURE__ */ jsx7(Button, { type: "submit", className: "w-full", children: "Submit" })
+            return null;
+          }),
+          regularNodes.some(
+            (node) => isUiNodeInputAttributes(node.attributes) && !["hidden", "submit"].includes(node.attributes.type)
+          ) && /* @__PURE__ */ jsxs("div", { className: "relative my-6", children: [
+            /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx7("span", { className: "w-full border-t border-border" }) }),
+            /* @__PURE__ */ jsx7("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx7("span", { className: "bg-background px-3 text-muted-foreground font-medium", children: "Or continue with email" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("form", { action: flow.ui.action, method: flow.ui.method, children: [
+          regularNodes.map((node) => {
+            if (isUiNodeInputAttributes(node.attributes)) {
+              const isSubmitButton = node.attributes.type === "submit";
+              const isHiddenField = node.attributes.type === "hidden";
+              const isVisibleField = !isHiddenField && !isSubmitButton;
+              if (isHiddenField) {
+                return /* @__PURE__ */ jsx7(
+                  "input",
+                  {
+                    name: node.attributes.name,
+                    type: "hidden",
+                    value: node.attributes.value || "",
+                    readOnly: true
+                  },
+                  node.attributes.name
+                );
+              }
+              if (isSubmitButton) {
+                return /* @__PURE__ */ jsx7(
+                  Button,
+                  {
+                    type: "submit",
+                    name: node.attributes.name,
+                    value: node.attributes.value || "",
+                    className: "w-full mt-2",
+                    children: node.meta.label?.text || node.attributes.value || "Submit"
+                  },
+                  node.attributes.name
+                );
+              }
+              if (isVisibleField && [
+                "default",
+                "password",
+                "code",
+                "webauthn",
+                "passkey",
+                "totp",
+                "lookup_secret",
+                "profile"
+              ].includes(node.group)) {
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "space-y-2 mb-4",
+                    children: [
+                      /* @__PURE__ */ jsxs(Label, { htmlFor: node.attributes.name, children: [
+                        node.meta.label?.text,
+                        node.attributes.required && /* @__PURE__ */ jsx7("span", { className: "text-destructive ml-1", children: "*" })
+                      ] }),
+                      /* @__PURE__ */ jsx7(
+                        Input,
+                        {
+                          id: node.attributes.name,
+                          name: node.attributes.name,
+                          type: node.attributes.type,
+                          defaultValue: node.attributes.value || "",
+                          required: node.attributes.required,
+                          placeholder: `Enter your ${node.meta.label?.text?.toLowerCase() || node.attributes.name}`
+                        }
+                      )
+                    ]
+                  },
+                  node.meta.label?.id || node.attributes.name
+                );
+              }
+            }
+            return null;
+          }),
+          !hasSubmitButton && !oidcNodes.length && /* @__PURE__ */ jsx7(Button, { type: "submit", className: "w-full", children: "Submit" })
+        ] })
       ] })
-    ] }) })
+    ] })
   ] });
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@omnibase/shadcn",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "OmniBase ShadCN UI Package",
   "type": "module",
   "exports": {