datastake-daf 0.6.558 → 0.6.560

package/dist/components/index.js

@@ -40633,7 +40633,7 @@ function AuthForm(_ref) {
       initialValues: initialValues,
       onFinish: handleSubmit,
       children: [currentFields.map(renderField), formErrors ? renderErrors(formErrors, t) : null, isMultiStep && currentStep > 0 ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-column gap-2 mt-4",
+        className: "flex flex-column gap-2",
         style: {
           width: '100%'
         },
@@ -40645,6 +40645,9 @@ function AuthForm(_ref) {
             const allFieldsFilled = checkRequiredFieldsFilled({}, form.getFieldsValue());
             return /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "buttons",
+              style: {
+                marginTop: 0
+              },
               children: /*#__PURE__*/jsxRuntime.jsx(BorderedButton, {
                 type: "primary",
                 htmlType: "submit",
@@ -40657,6 +40660,9 @@ function AuthForm(_ref) {
           }
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "buttons",
+          style: {
+            marginTop: 0
+          },
           children: /*#__PURE__*/jsxRuntime.jsx(BorderedButton, {
             onClick: prev,
             block: true,
@@ -40666,6 +40672,9 @@ function AuthForm(_ref) {
         })]
       }) : /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "buttons",
+        style: {
+          marginTop: 0
+        },
         children: /*#__PURE__*/jsxRuntime.jsx(BorderedButton, {
           type: "primary",
           htmlType: "submit",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.558",
+	"version": "0.6.560",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/AuthForm/AuthForm.stories.js

@@ -1,3 +1,5 @@
+import React from "react";
+import { Checkbox, DatePicker, Rate, Slider } from "antd";
 import ThemeLayout from "../ThemeLayout";
 import AuthForm from "./index";
 
@@ -24,7 +26,7 @@ export default {
         },
         fields: {
             control: "object",
-            description: "Array of field objects for single-step forms. Each field should have name, label, type, etc.",
+            description: "Array of field objects for single-step forms. Each field should have name, label, type, etc. Supported types: 'input', 'email', 'number', 'password', 'textarea', 'select', 'custom'. For custom type, provide a 'component' prop with your custom React component.",
             table: {
                 type: { summary: "array" },
             },
@@ -357,4 +359,63 @@ export const CustomValidation = {
             console.log("Validated values:", values);
         },
     },
+};
+
+export const WithCustomFields = {
+    name: "Form with Custom Field Components",
+    // Note: For custom fields with default values, always set those values in initialValues
+    // to ensure they are included in form submission even when not touched by the user
+    args: {
+        fields: [
+            {
+                name: "username",
+                label: "Username",
+                type: "input",
+                placeholder: "Enter username",
+                required: true,
+            },
+            {
+                name: "birthdate",
+                label: "Birth Date",
+                type: "custom",
+                required: true,
+                component: <DatePicker style={{ width: "100%" }} placeholder="Select your birth date" />,
+            },
+            {
+                name: "rating",
+                label: "Rate Your Experience",
+                type: "custom",
+                required: false,
+                component: <Rate allowHalf />,
+            },
+            {
+                name: "budget",
+                label: "Budget Range ($)",
+                type: "custom",
+                required: false,
+                component: <Slider range min={0} max={10000} />,
+            },
+            {
+                name: "bio",
+                label: "Bio",
+                type: "textarea",
+                placeholder: "Tell us about yourself",
+                required: false,
+                props: {
+                    rows: 3,
+                },
+            },
+        ],
+        initialValues: {
+            rating: 3,
+            budget: [1000, 5000],
+        },
+        submitText: "Submit",
+        onSubmit: (values) => {
+            console.log("Form with custom fields values:", values);
+        },
+        executeRecaptcha: () => {
+            return "mock-recaptcha-token";
+        },
+    },
 };

package/src/@daf/core/components/AuthForm/index.jsx

@@ -157,14 +157,14 @@ function AuthForm ({
         ) : null}
 
         {isMultiStep && currentStep > 0 ? (
-            <div className="flex flex-column gap-2 mt-4" style={{ width: '100%' }}>
+            <div className="flex flex-column gap-2" style={{ width: '100%' }}>
                 <Form.Item noStyle shouldUpdate>
                 {(form) => {
                     const isLastStep = currentStep === steps?.length - 1;
                     const allFieldsFilled = checkRequiredFieldsFilled({}, form.getFieldsValue());
                     
                     return (
-                        <div className="buttons">                        
+                        <div className="buttons" style={{ marginTop: 0}}>                   
                             <BorderedButton 
                                 type="primary" 
                                 htmlType="submit"
@@ -177,14 +177,14 @@ function AuthForm ({
                     );
                 }}
                 </Form.Item>
-                <div className="buttons">
+                <div className="buttons" style={{ marginTop: 0}}>
                     <BorderedButton onClick={prev} block className="normal-br">
                         {t("Back")}
                     </BorderedButton>
                 </div>
             </div>
         ) : (
-            <div className="buttons">
+            <div className="buttons" style={{ marginTop: 0}}>
                 <BorderedButton type="primary" htmlType="submit" block className="normal-br">
                     {isMultiStep ? t("Next") : submitText}
                 </BorderedButton>