datastake-daf 0.6.554 → 0.6.556

package/package.json

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

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

@@ -0,0 +1,360 @@
+import ThemeLayout from "../ThemeLayout";
+import AuthForm from "./index";
+
+export default {
+    title: "Form/AuthForm",
+    component: AuthForm,
+    tags: ["autodocs"],
+    decorators: [
+        (Story) => (
+            <div style={{ margin: "3em" }}>
+                <ThemeLayout>
+                    <Story />
+                </ThemeLayout>
+            </div>
+        ),
+    ],
+    argTypes: {
+        steps: {
+            control: "object",
+            description: "Array of step objects for multi-step forms. Each step should have a title and fields array.",
+            table: {
+                type: { summary: "array" },
+            },
+        },
+        fields: {
+            control: "object",
+            description: "Array of field objects for single-step forms. Each field should have name, label, type, etc.",
+            table: {
+                type: { summary: "array" },
+            },
+        },
+        onSubmit: {
+            action: "submitted",
+            description: "Callback function called when form is submitted with form values",
+            table: {
+                type: { summary: "function" },
+            },
+        },
+        initialValues: {
+            control: "object",
+            description: "Initial values for form fields",
+            table: {
+                type: { summary: "object" },
+                defaultValue: { summary: "{}" },
+            },
+        },
+        submitText: {
+            control: "text",
+            description: "Text for the submit button",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Submit" },
+            },
+        },
+        form: {
+            control: false,
+            description: "Ant Design form instance",
+            table: {
+                type: { summary: "FormInstance" },
+            },
+        },
+    },
+};
+
+export const SimpleForm = {
+    name: "Simple Form",
+    args: {
+        fields: [
+            {
+                name: "email",
+                label: "Email",
+                type: "email",
+                placeholder: "Enter your email",
+                required: true,
+            },
+            {
+                name: "password",
+                label: "Password",
+                type: "password",
+                placeholder: "Enter your password",
+                required: true,
+            },
+        ],
+        submitText: "Login",
+        onSubmit: (values) => {
+            console.log("Form values:", values);
+        },
+    },
+};
+
+export const CompleteForm = {
+    name: "Complete Form with All Field Types",
+    args: {
+        fields: [
+            {
+                name: "username",
+                label: "Username",
+                type: "input",
+                placeholder: "Enter username",
+                required: true,
+            },
+            {
+                name: "email",
+                label: "Email",
+                type: "email",
+                placeholder: "Enter email address",
+                required: true,
+                rules: [
+                    {
+                        type: "email",
+                        message: "Please enter a valid email",
+                    },
+                ],
+            },
+            {
+                name: "age",
+                label: "Age",
+                type: "number",
+                placeholder: "Enter your age",
+                required: false,
+            },
+            {
+                name: "password",
+                label: "Password",
+                type: "password",
+                placeholder: "Enter password",
+                required: true,
+                rules: [
+                    {
+                        min: 8,
+                        message: "Password must be at least 8 characters",
+                    },
+                ],
+            },
+            {
+                name: "country",
+                label: "Country",
+                type: "select",
+                placeholder: "Select your country",
+                required: true,
+                options: [
+                    { value: "us", label: "United States" },
+                    { value: "uk", label: "United Kingdom" },
+                    { value: "ca", label: "Canada" },
+                    { value: "au", label: "Australia" },
+                ],
+            },
+            {
+                name: "bio",
+                label: "Bio",
+                type: "textarea",
+                placeholder: "Tell us about yourself",
+                required: false,
+                props: {
+                    rows: 4,
+                },
+            },
+        ],
+        submitText: "Register",
+        initialValues: {
+            country: "us",
+        },
+        onSubmit: (values) => {
+            console.log("Complete form values:", values);
+        },
+    },
+};
+
+export const MultiStepForm = {
+    name: "Multi-Step Form",
+    args: {
+        steps: [
+            {
+                title: "Personal Info",
+                fields: [
+                    {
+                        name: "firstName",
+                        label: "First Name",
+                        type: "input",
+                        placeholder: "Enter first name",
+                        required: true,
+                    },
+                    {
+                        name: "lastName",
+                        label: "Last Name",
+                        type: "input",
+                        placeholder: "Enter last name",
+                        required: true,
+                    },
+                    {
+                        name: "email",
+                        label: "Email",
+                        type: "email",
+                        placeholder: "Enter email",
+                        required: true,
+                    },
+                ],
+            },
+            {
+                title: "Account Details",
+                fields: [
+                    {
+                        name: "username",
+                        label: "Username",
+                        type: "input",
+                        placeholder: "Choose a username",
+                        required: true,
+                    },
+                    {
+                        name: "password",
+                        label: "Password",
+                        type: "password",
+                        placeholder: "Create a password",
+                        required: true,
+                    },
+                    {
+                        name: "confirmPassword",
+                        label: "Confirm Password",
+                        type: "password",
+                        placeholder: "Confirm your password",
+                        required: true,
+                    },
+                ],
+            },
+            {
+                title: "Preferences",
+                fields: [
+                    {
+                        name: "language",
+                        label: "Language",
+                        type: "select",
+                        placeholder: "Select language",
+                        required: true,
+                        options: [
+                            { value: "en", label: "English" },
+                            { value: "fr", label: "French" },
+                            { value: "sp", label: "Spanish" },
+                        ],
+                    },
+                    {
+                        name: "notifications",
+                        label: "Notification Preferences",
+                        type: "textarea",
+                        placeholder: "Enter your notification preferences",
+                        required: false,
+                    },
+                ],
+            },
+        ],
+        submitText: "Complete Registration",
+        initialValues: {
+            language: "en",
+            category: "coprporation"
+        },
+        executeRecaptcha: () => {
+            return "mock-recaptcha-token";
+        },
+        onSubmit: (values) => {
+            console.log("Multi-step form values:", values);
+        },
+    },
+};
+
+export const WithInitialValues = {
+    name: "Form with Initial Values",
+    args: {
+        fields: [
+            {
+                name: "name",
+                label: "Name",
+                type: "input",
+                placeholder: "Enter name",
+                required: true,
+            },
+            {
+                name: "email",
+                label: "Email",
+                type: "email",
+                placeholder: "Enter email",
+                required: true,
+            },
+            {
+                name: "role",
+                label: "Role",
+                type: "select",
+                placeholder: "Select role",
+                required: true,
+                options: [
+                    { value: "admin", label: "Administrator" },
+                    { value: "user", label: "User" },
+                    { value: "guest", label: "Guest" },
+                ],
+            },
+        ],
+        initialValues: {
+            name: "John Doe",
+            email: "john.doe@example.com",
+            role: "user",
+        },
+        submitText: "Update Profile",
+        onSubmit: (values) => {
+            console.log("Updated values:", values);
+        },
+    },
+};
+
+export const CustomValidation = {
+    name: "Form with Custom Validation",
+    args: {
+        fields: [
+            {
+                name: "email",
+                label: "Email",
+                type: "email",
+                placeholder: "Enter email",
+                required: true,
+                rules: [
+                    {
+                        type: "email",
+                        message: "Invalid email format",
+                    },
+                    {
+                        pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+                        message: "Please enter a valid email address",
+                    },
+                ],
+            },
+            {
+                name: "phone",
+                label: "Phone Number",
+                type: "input",
+                placeholder: "Enter phone number",
+                required: true,
+                rules: [
+                    {
+                        pattern: /^\d{10}$/,
+                        message: "Phone number must be 10 digits",
+                    },
+                ],
+            },
+            {
+                name: "website",
+                label: "Website",
+                type: "input",
+                placeholder: "Enter website URL",
+                required: false,
+                rules: [
+                    {
+                        type: "url",
+                        message: "Please enter a valid URL",
+                    },
+                ],
+            },
+        ],
+        submitText: "Submit",
+        onSubmit: (values) => {
+            console.log("Validated values:", values);
+        },
+    },
+};

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

@@ -0,0 +1,197 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Form, Input, Select } from "antd";
+import BorderedButton from "../Button/BorderedButton";
+
+function AuthForm ({
+  steps,
+  fields,
+  onSubmit,
+  initialValues = {},
+  submitText = "Submit",
+  form,
+  errors,
+  t = (key) => key,
+  executeRecaptcha = () => {},
+}){
+  const [formInstance] = Form.useForm(form);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [allFormValues, setAllFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(null);
+
+  const isMultiStep = !!steps;
+  const currentFields = isMultiStep ? steps?.[currentStep]?.fields : fields || [];
+
+  useEffect(() => {
+    if (isMultiStep && Object.keys(allFormValues).length > 0) {
+      formInstance.setFieldsValue(allFormValues);
+    }
+  }, [currentStep, allFormValues, formInstance, isMultiStep]);
+
+  const handleReCaptchaVerify = useCallback(async () => {
+    if (!executeRecaptcha) {
+      console.log('Execute recaptcha not yet available');
+      return;
+    }
+
+    const token = await executeRecaptcha('submit');
+    return token;
+  }, [executeRecaptcha]);
+
+  const next = async () => {
+    try {
+      await formInstance.validateFields(
+        currentFields.map((f) => f.name)
+      );
+      // Save current step values before moving to next step
+      const currentValues = formInstance.getFieldsValue();
+      setAllFormValues((prev) => ({ ...prev, ...currentValues }));
+      setCurrentStep((prev) => prev + 1);
+    } catch (err) {
+      console.error("Please fix the validation errors before continuing.");
+    }
+  };
+
+  const prev = () => setCurrentStep((prev) => prev - 1);
+
+  const handleSubmit = async (values) => {
+    const token = await handleReCaptchaVerify();
+    if (!token) {
+      console.error('reCAPTCHA verification failed');
+      return;
+    }
+    setFormErrors(null);
+    if (!isMultiStep) return onSubmit?.(values);
+
+    if (currentStep < steps?.length - 1) return next();
+    
+    const finalValues = { ...allFormValues, ...values };
+    onSubmit?.(finalValues);
+  };
+
+  const checkRequiredFieldsFilled = (changedValues, allValues) => {
+    const requiredFields = currentFields.filter(f => f.required).map(f => f.name);
+    return requiredFields.every(fieldName => {
+      const value = allValues[fieldName];
+      return value !== undefined && value !== null && value !== '';
+    });
+  };
+
+  useEffect(() => {
+    setFormErrors(errors);
+  }, [errors]);
+
+  const renderErrors = (err, t) => {
+    document.querySelectorAll('.ant-form-item')
+      .forEach(input => input.classList.add('ant-form-item-has-error'))
+    return Object.keys(err).map(key => {
+      return err[key].map(error =>
+        <div
+          key={error}
+          className="ant-form-item-explain errors-cont"
+          style={{ color: '#ff4d4f' }}>
+          {t(error)}
+        </div>
+      )
+    });
+  }
+
+  const renderField = (field) => {
+    const rules = [
+      ...(field.required
+        ? [{ required: true, message: `${field.label} is required` }]
+        : []),
+      ...(field.rules || []),
+    ];
+
+    let inputNode = null;
+    switch (field.type) {
+      case "input":
+      case "email":
+      case "number":
+        inputNode = <Input type={field.type} placeholder={field.placeholder} {...field.props} />;
+        break;
+      case "password":
+        inputNode = <Input.Password placeholder={field.placeholder} {...field.props} />;
+        break;
+      case "textarea":
+        inputNode = <Input.TextArea placeholder={field.placeholder} {...field.props} />;
+        break;
+      case "select":
+        inputNode = (
+          <Select placeholder={field.placeholder} {...field.props}>
+            {field.options?.map((opt) => (
+              <Select.Option key={opt.value} value={opt.value}>
+                {opt.label}
+              </Select.Option>
+            ))}
+          </Select>
+        );
+        break;
+      case "custom":
+        inputNode = field.component;
+        break;
+      default:
+        inputNode = <Input placeholder={field.placeholder} {...field.props} />;
+    }
+
+    return (
+      <Form.Item key={field.name} name={field.name} label={field.label} rules={rules}>
+        {inputNode}
+      </Form.Item>
+    );
+  };
+
+  return (
+      <>
+        <Form
+            form={formInstance}
+            layout="vertical"
+            initialValues={initialValues}
+            onFinish={handleSubmit}
+        >
+            {currentFields.map(renderField)}
+
+
+        {formErrors ? (
+            renderErrors(formErrors, t)
+        ) : null}
+
+        {isMultiStep && currentStep > 0 ? (
+            <div className="flex flex-column gap-2 mt-4" style={{ width: '100%' }}>
+                <Form.Item noStyle shouldUpdate>
+                {(form) => {
+                    const isLastStep = currentStep === steps?.length - 1;
+                    const allFieldsFilled = checkRequiredFieldsFilled({}, form.getFieldsValue());
+                    
+                    return (
+                        <div className="buttons">                        
+                            <BorderedButton 
+                                type="primary" 
+                                htmlType="submit"
+                                disabled={isLastStep && !allFieldsFilled}
+                                block className="normal-br"
+                            >
+                                {isLastStep ? submitText : t("Next")}
+                            </BorderedButton>
+                        </div>
+                    );
+                }}
+                </Form.Item>
+                <div className="buttons">
+                    <BorderedButton onClick={prev} block className="normal-br">
+                        {t("Back")}
+                    </BorderedButton>
+                </div>
+            </div>
+        ) : (
+            <div className="buttons">
+                <BorderedButton type="primary" htmlType="submit" block className="normal-br">
+                    {isMultiStep ? t("Next") : submitText}
+                </BorderedButton>
+            </div>
+        )}
+                </Form>
+      </>
+  );
+}
+export default AuthForm;