@multiplatform.one/components 5.0.1 → 5.0.7

package/src/forms/Button/SubmitButton.spec.tsx

@@ -0,0 +1,121 @@
+/**
+ * File: /src/forms/Button/SubmitButton.spec.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 30-12-2024 18:13:16
+ * Author: Clay Risser
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { FormApi } from "@tanstack/react-form";
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Form } from "../Form";
+import { SubmitButton } from "./SubmitButton";
+
+describe("SubmitButton", () => {
+  const createMockForm = () =>
+    ({
+      handleSubmit: vi.fn(),
+      options: {},
+      store: {},
+      state: {},
+      fieldInfo: {},
+      getFieldValue: vi.fn(),
+      setFieldValue: vi.fn(),
+      getMeta: vi.fn(),
+      setMeta: vi.fn(),
+      validate: vi.fn(),
+      reset: vi.fn(),
+      isMutating: false,
+      isValidating: false,
+      isSubmitting: false,
+      submitCount: 0,
+      defaultValues: {},
+      formState: {},
+      fieldElements: new Map(),
+    }) as unknown as FormApi<unknown>;
+
+  it("should render successfully", () => {
+    const mockForm = createMockForm();
+    const { getByText } = render(
+      <SubmitButton form={mockForm}>Submit</SubmitButton>,
+    );
+    expect(getByText("Submit")).toBeDefined();
+  });
+
+  it("should call form.handleSubmit when pressed", () => {
+    const mockForm = createMockForm();
+    const { getByText } = render(
+      <SubmitButton form={mockForm}>Submit</SubmitButton>,
+    );
+    fireEvent.click(getByText("Submit"));
+    expect(mockForm.handleSubmit).toHaveBeenCalled();
+  });
+
+  it("should call onPress callback if provided", () => {
+    const mockForm = createMockForm();
+    const onPress = vi.fn();
+    const { getByText } = render(
+      <SubmitButton form={mockForm} onPress={onPress}>
+        Submit
+      </SubmitButton>,
+    );
+    fireEvent.click(getByText("Submit"));
+    expect(onPress).toHaveBeenCalled();
+    expect(mockForm.handleSubmit).toHaveBeenCalled();
+  });
+
+  it("should work with Form component", async () => {
+    const onSubmit = vi.fn();
+    const { getByText } = render(
+      <Form
+        defaultValues={{ test: "value" }}
+        onSubmit={async ({ value }) => {
+          onSubmit(value);
+        }}
+      >
+        <SubmitButton>Submit</SubmitButton>
+      </Form>,
+    );
+    await act(async () => {
+      fireEvent.click(getByText("Submit"));
+    });
+    expect(onSubmit).toHaveBeenCalledWith({ test: "value" });
+  });
+
+  it("should work with useForm hook", async () => {
+    const onSubmit = vi.fn();
+    const TestComponent = () => {
+      const form = useForm({
+        defaultValues: { test: "value" },
+        onSubmit: async ({ value }) => {
+          onSubmit(value);
+        },
+      });
+      return (
+        <Form form={form}>
+          <SubmitButton>Submit</SubmitButton>
+        </Form>
+      );
+    };
+    const { getByText } = render(<TestComponent />);
+    await act(async () => {
+      fireEvent.click(getByText("Submit"));
+    });
+    expect(onSubmit).toHaveBeenCalledWith({ test: "value" });
+  });
+});

package/src/forms/Button/SubmitButton.stories.tsx

@@ -19,24 +19,23 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { SubmitButton, SubmitButtonProps } from './SubmitButton';
-import { useForm } from '@tanstack/react-form';
-import { Meta } from '@storybook/react';
+import type { Meta } from "@storybook/react";
+import { useForm } from "@tanstack/react-form";
+import { SubmitButton, type SubmitButtonProps } from "./SubmitButton";
 
 const meta: Meta = {
-  title: 'forms/SubmitButton',
+  title: "forms/SubmitButton",
   component: SubmitButton,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
 export const main = (args) => {
   const form = useForm({
     defaultValues: {
-      firstName: 'Hello',
-      lastName: 'Bob',
+      firstName: "Hello",
+      lastName: "Bob",
       age: 24,
       isGraduate: true,
     },
@@ -45,7 +44,7 @@ export const main = (args) => {
 };
 
 const mainArgs: Partial<SubmitButtonProps> = {
-  children: 'Submit',
+  children: "Submit",
 };
 
 main.args = mainArgs;

package/src/forms/Button/SubmitButton.tsx

@@ -19,31 +19,41 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { ButtonProps } from './Button';
-import type { FormApi } from '@tanstack/react-form';
-import type { Validator } from '@tanstack/form-core';
-import { Button } from './Button';
-import { useForm } from '@tanstack/react-form';
+import type { Validator } from "@tanstack/form-core";
+import type { FormApi } from "@tanstack/react-form";
+import { useForm } from "@tanstack/react-form";
+import { useFormContext } from "../Form";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
 
 export type SubmitButtonProps<
   TParentData = any,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
 > = ButtonProps & {
-  form: FormApi<TParentData, TFormValidator>;
+  form?: FormApi<TParentData, TFormValidator>;
 };
 
 export function SubmitButton<
   TParentData,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
->({ form, onPress, ...buttonProps }: SubmitButtonProps<TParentData, TFormValidator>) {
-  form = form || useForm();
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+>({
+  form,
+  onPress,
+  ...buttonProps
+}: SubmitButtonProps<TParentData, TFormValidator>) {
+  const formContext = useFormContext();
+  form =
+    form || (formContext as FormApi<TParentData, TFormValidator>) || useForm();
   return (
     <Button
       onPress={(e) => {
         e.preventDefault();
         if (onPress) onPress(e);
-        form.handleSubmit();
+        form?.handleSubmit();
       }}
       {...buttonProps}
     />

package/src/forms/Button/index.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export * from './Button';
-export * from './SubmitButton';
+export * from "./Button";
+export * from "./SubmitButton";

package/src/forms/Checkbox/Checkbox.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export type { CheckboxProps } from 'tamagui';
-export { Checkbox } from 'tamagui';
+export type { CheckboxProps } from "tamagui";
+export { Checkbox } from "tamagui";

package/src/forms/Checkbox/FieldCheckbox.spec.tsx

@@ -0,0 +1,173 @@
+/**
+ * File: /src/forms/Checkbox/FieldCheckbox.spec.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 30-12-2024 18:20:00
+ * Author: Clay Risser
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { config } from "@tamagui/config";
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, render } from "@testing-library/react";
+import { TamaguiProvider, YStack, createTamagui } from "tamagui";
+import { describe, expect, it, vi } from "vitest";
+import { SubmitButton } from "../Button/SubmitButton";
+import { Form } from "../Form";
+import { FieldCheckbox } from "./FieldCheckbox";
+
+const tamaguiConfig = createTamagui(config);
+
+describe("FieldCheckbox", () => {
+  const renderWithProviders = (ui: React.ReactElement) => {
+    return render(
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {ui}
+      </TamaguiProvider>,
+    );
+  };
+
+  describe("without form context", () => {
+    it("should render with label and helper text correctly", () => {
+      const { getByText, getByRole } = renderWithProviders(
+        <FieldCheckbox
+          label="Hello"
+          helperText="please check this box"
+          name="test"
+          defaultValue={false}
+        />,
+      );
+      const checkbox = getByRole("checkbox");
+      const label = getByText("Hello");
+      const helperText = getByText("please check this box");
+      expect(label).toBeDefined();
+      expect(helperText).toBeDefined();
+      expect(checkbox).not.toBeChecked();
+      expect(checkbox).toBeEnabled();
+    });
+
+    it("should handle checkbox state changes", () => {
+      const onCheckedChange = vi.fn();
+      const { getByRole } = renderWithProviders(
+        <FieldCheckbox
+          label="Hello"
+          name="test"
+          onCheckedChange={onCheckedChange}
+          defaultValue={false}
+        />,
+      );
+      const checkbox = getByRole("checkbox");
+      expect(checkbox).not.toBeChecked();
+      fireEvent.click(checkbox);
+      expect(onCheckedChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe("with form context", () => {
+    const FormExample = ({
+      defaultValue = false,
+      name = "foo",
+      onSubmit = async (_value: any) => {},
+    }) => {
+      return (
+        <Form
+          defaultValues={{
+            [name]: defaultValue,
+          }}
+          onSubmit={async ({ value }) => {
+            await onSubmit(value);
+          }}
+        >
+          <FieldCheckbox label="Accept" name={name} />
+          <SubmitButton>Submit</SubmitButton>
+        </Form>
+      );
+    };
+
+    it("should render with form context and handle form submission", async () => {
+      const onSubmit = vi.fn();
+      const { getByText, getByRole } = renderWithProviders(
+        <YStack>
+          <FormExample onSubmit={onSubmit} />
+        </YStack>,
+      );
+      const checkbox = getByRole("checkbox");
+      const submitButton = getByText("Submit");
+      expect(checkbox).not.toBeChecked();
+      await act(async () => {
+        fireEvent.click(submitButton);
+      });
+      expect(onSubmit).toHaveBeenCalledWith({ foo: false });
+      await act(async () => {
+        fireEvent.click(checkbox);
+        fireEvent.click(submitButton);
+      });
+      expect(onSubmit).toHaveBeenCalledWith({ foo: true });
+    });
+
+    it("should handle disabled state in form context", () => {
+      const onCheckedChange = vi.fn();
+      const { getByRole } = renderWithProviders(
+        <Form defaultValues={{ terms: false }}>
+          <FieldCheckbox
+            label="Accept"
+            name="terms"
+            disabled
+            onCheckedChange={onCheckedChange}
+          />
+        </Form>,
+      );
+      const checkbox = getByRole("checkbox");
+      fireEvent.click(checkbox);
+      expect(onCheckedChange).not.toHaveBeenCalled();
+      expect(checkbox).not.toBeChecked();
+      expect(checkbox).toBeDisabled();
+    });
+  });
+
+  describe("with useForm hook directly", () => {
+    it("should handle form submission with useForm", async () => {
+      const onSubmitMock = vi.fn();
+      const TestComponent = () => {
+        const form = useForm({
+          defaultValues: {
+            terms: false,
+          },
+          onSubmit: async ({ value }) => {
+            onSubmitMock(value);
+          },
+        });
+        return (
+          <Form form={form}>
+            <FieldCheckbox label="Accept Terms" name="terms" />
+            <SubmitButton>Submit</SubmitButton>
+          </Form>
+        );
+      };
+      const { getByRole, getByText } = renderWithProviders(<TestComponent />);
+      const checkbox = getByRole("checkbox");
+      const submitButton = getByText("Submit");
+      await act(async () => {
+        fireEvent.click(submitButton);
+      });
+      expect(onSubmitMock).toHaveBeenCalledWith({ terms: false });
+      await act(async () => {
+        fireEvent.click(checkbox);
+        fireEvent.click(submitButton);
+      });
+      expect(onSubmitMock).toHaveBeenCalledWith({ terms: true });
+    });
+  });
+});

package/src/forms/Checkbox/FieldCheckbox.stories.tsx

@@ -19,24 +19,25 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { FieldCheckboxProps } from './FieldCheckbox';
-import { Button, YStack } from 'tamagui';
-import { FieldCheckbox } from './FieldCheckbox';
-import { action } from '@storybook/addon-actions';
-import { useForm } from '@tanstack/react-form';
+import { action } from "@storybook/addon-actions";
+import { useForm } from "@tanstack/react-form";
+import { Button, YStack } from "tamagui";
+import type { FieldCheckboxProps } from "./FieldCheckbox";
+import { FieldCheckbox } from "./FieldCheckbox";
 
 export default {
-  title: 'forms/FieldCheckBox',
+  title: "forms/FieldCheckBox",
   component: FieldCheckbox,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 
-export const main = (args) => <FieldCheckbox onCheckedChange={action('onCheckedChange')} {...args} />;
+export const main = (args) => (
+  <FieldCheckbox onCheckedChange={action("onCheckedChange")} {...args} />
+);
 const mainArgs: FieldCheckboxProps = {
-  label: 'Hello',
+  label: "Hello",
   error: undefined,
-  helperText: 'please check this box',
+  helperText: "please check this box",
   checked: undefined,
 };
 main.args = mainArgs;
@@ -48,7 +49,7 @@ export const form = () => {
       bar: true,
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (

package/src/forms/Checkbox/FieldCheckbox.tsx

@@ -19,36 +19,70 @@
  * limitations under the License.
  */
 
-import React, { useId } from 'react';
-import type { CheckboxProps } from './Checkbox';
-import type { CheckedState, FontSizeTokens } from 'tamagui';
-import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
-import type { FieldComponentProps } from '../types';
-import type { FormFieldProps } from '../FormField';
-import { CheckRegular, MinusRegular } from '../../icons';
-import { Checkbox } from './Checkbox';
-import { Field, useForm } from '@tanstack/react-form';
-import { useProps, XStack, Label, Paragraph, YStack } from 'tamagui';
+import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
+import { Field, type FormApi, useForm } from "@tanstack/react-form";
+import { useId } from "react";
+import type { CheckedState, FontSizeTokens } from "tamagui";
+import { Label, Paragraph, XStack, YStack, useProps } from "tamagui";
+import { CheckRegular, MinusRegular } from "../../icons";
+import { useFormContext } from "../Form";
+import type { FormFieldProps } from "../FormField";
+import type { FieldComponentProps } from "../types";
+import type { CheckboxProps } from "./Checkbox";
+import { Checkbox } from "./Checkbox";
 
 export type FieldCheckboxProps<
   TParentData = any,
   TName extends DeepKeys<TParentData> = any,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = Omit<FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children' | 'field'> &
-  Pick<CheckboxProps, 'checked' | 'children' | 'onCheckedChange'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    checkboxProps?: Omit<CheckboxProps, 'children' | 'checked' | 'id' | 'onCheckedChange'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<CheckboxProps, "checked" | "children" | "onCheckedChange"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    checkboxProps?: Omit<
+      CheckboxProps,
+      "children" | "checked" | "id" | "onCheckedChange"
+    >;
   };
 
 export function FieldCheckbox<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
->(props: FieldCheckboxProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldCheckboxProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -71,24 +105,32 @@ export function FieldCheckbox<
     size,
     validatorAdapter,
     validators,
+    disabled,
     ...fieldProps
   } = useProps(props);
-  form = form || useForm();
+  const formContext = useFormContext();
+  form =
+    form || (formContext as FormApi<TParentData, TFormValidator>) || useForm();
   const id = fieldProps.id || useId();
-  helperText = error && typeof error === 'string' ? error : helperText;
+  helperText = error && typeof error === "string" ? error : helperText;
   if (!form || !name) {
     return (
-      <YStack theme={error ? 'red' : undefined} {...fieldProps} onBlur={onBlur}>
+      <YStack theme={error ? "red" : undefined} {...fieldProps} onBlur={onBlur}>
         <XStack gap="$2" alignItems="center">
           <Checkbox
             {...checkboxProps}
-            onCheckedChange={onCheckedChange}
-            checked={checked ?? (defaultValue as boolean | 'indeterminate')}
+            disabled={disabled}
+            onCheckedChange={(checked) => {
+              if (disabled) return;
+              return onCheckedChange?.(checked);
+            }}
+            checked={checked ?? (defaultValue as boolean | "indeterminate")}
             id={id}
           >
             {children ?? (
               <Checkbox.Indicator>
-                {(checked ?? (defaultValue as boolean | 'indeterminate')) === 'indeterminate' ? (
+                {(checked ?? (defaultValue as boolean | "indeterminate")) ===
+                "indeterminate" ? (
                   <MinusRegular />
                 ) : (
                   <CheckRegular />
@@ -97,14 +139,23 @@ export function FieldCheckbox<
             )}
           </Checkbox>
           {label && (
-            <Label htmlFor={id} size={size || '$3'} color={error ? '$red10' : undefined} {...labelProps}>
+            <Label
+              htmlFor={id}
+              size={size || "$3"}
+              color={error ? "$red10" : undefined}
+              {...labelProps}
+            >
               {label}
-              {required && ` *`}
+              {required && " *"}
             </Label>
           )}
         </XStack>
         {helperText && (
-          <Paragraph paddingLeft="$2" size={size as FontSizeTokens} color={error ? '$red10' : undefined}>
+          <Paragraph
+            paddingLeft="$2"
+            size={size as FontSizeTokens}
+            color={error ? "$red10" : undefined}
+          >
             {helperText}
           </Paragraph>
         )}
@@ -125,11 +176,13 @@ export function FieldCheckbox<
       validators={validators}
     >
       {(field) => {
-        error = field.state.meta.errors.length ? field.state.meta.errors.join(', ') : error;
-        helperText = typeof error === 'string' ? error : helperText;
+        error = field.state.meta.errors.length
+          ? field.state.meta.errors.join(", ")
+          : error;
+        helperText = typeof error === "string" ? error : helperText;
         return (
           <YStack
-            theme={error ? 'red' : undefined}
+            theme={error ? "red" : undefined}
             {...fieldProps}
             onBlur={(e) => {
               field.handleBlur();
@@ -139,16 +192,19 @@ export function FieldCheckbox<
             <XStack gap="$2" alignItems="center">
               <Checkbox
                 {...checkboxProps}
+                disabled={disabled}
                 checked={checked ?? (field.state.value as CheckedState)}
                 id={id}
                 onCheckedChange={(checked) => {
+                  if (disabled) return;
                   field.handleChange(checked as TData);
                   return onCheckedChange?.(checked);
                 }}
               >
                 {children ?? (
                   <Checkbox.Indicator>
-                    {(checked ?? (field.state.value as CheckedState)) === 'indeterminate' ? (
+                    {(checked ?? (field.state.value as CheckedState)) ===
+                    "indeterminate" ? (
                       <MinusRegular />
                     ) : (
                       <CheckRegular />
@@ -157,14 +213,23 @@ export function FieldCheckbox<
                 )}
               </Checkbox>
               {label && (
-                <Label htmlFor={id} size={size || '$3'} color={error ? '$red10' : undefined} {...labelProps}>
+                <Label
+                  htmlFor={id}
+                  size={size || "$3"}
+                  color={error ? "$red10" : undefined}
+                  {...labelProps}
+                >
                   {label}
-                  {required && ` *`}
+                  {required && " *"}
                 </Label>
               )}
             </XStack>
             {helperText && (
-              <Paragraph paddingLeft="$2" size={size as FontSizeTokens} color={error ? '$red10' : undefined}>
+              <Paragraph
+                paddingLeft="$2"
+                size={size as FontSizeTokens}
+                color={error ? "$red10" : undefined}
+              >
                 {helperText}
               </Paragraph>
             )}