@multiplatform.one/components 4.1.10 → 4.1.11

package/src/code/Code/index.ts

@@ -1,7 +1,7 @@
-/*
+/**
  * File: /src/code/Code/index.ts
  * Project: @multiplatform.one/components
- * File Created: 04-04-2024 15:50:39
+ * File Created: 19-11-2024 20:26:31
  * Author: Clay Risser
  * -----
  * BitSpur (c) Copyright 2021 - 2024
@@ -19,7 +19,7 @@
  * limitations under the License.
  */
 
-import { MultiPlatform } from "multiplatform.one";
+import { isWeb } from "multiplatform.one";
 import type { GetProps } from "tamagui";
 import { Paragraph, styled } from "tamagui";
 
@@ -28,7 +28,7 @@ export const Code = styled(Paragraph, {
   borderRadius: "$4",
   cursor: "inherit",
   // @ts-ignore
-  fontFamily: MultiPlatform.isWeb ? "$mono" : undefined,
+  fontFamily: isWeb ? "$mono" : undefined,
   lineHeight: 18,
   padding: "$1",
   // @ts-ignore
@@ -52,7 +52,7 @@ export const CodeInline = styled(Paragraph, {
   color: "$colorHover",
   cursor: "inherit",
   // @ts-ignore
-  fontFamily: MultiPlatform.isWeb ? "$mono" : undefined,
+  fontFamily: isWeb ? "$mono" : undefined,
   // @ts-ignore
   fontSize: "85%",
   padding: "$1.5",

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.tsx

@@ -22,6 +22,7 @@
 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";
 
@@ -31,7 +32,7 @@ export type SubmitButtonProps<
     | Validator<TParentData, unknown>
     | undefined = undefined,
 > = ButtonProps & {
-  form: FormApi<TParentData, TFormValidator>;
+  form?: FormApi<TParentData, TFormValidator>;
 };
 
 export function SubmitButton<
@@ -44,13 +45,15 @@ export function SubmitButton<
   onPress,
   ...buttonProps
 }: SubmitButtonProps<TParentData, TFormValidator>) {
-  form = form || useForm();
+  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/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.tsx

@@ -20,11 +20,12 @@
  */
 
 import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
-import { Field, useForm } from "@tanstack/react-form";
+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";
@@ -104,9 +105,12 @@ 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;
   if (!form || !name) {
@@ -115,7 +119,11 @@ export function FieldCheckbox<
         <XStack gap="$2" alignItems="center">
           <Checkbox
             {...checkboxProps}
-            onCheckedChange={onCheckedChange}
+            disabled={disabled}
+            onCheckedChange={(checked) => {
+              if (disabled) return;
+              return onCheckedChange?.(checked);
+            }}
             checked={checked ?? (defaultValue as boolean | "indeterminate")}
             id={id}
           >
@@ -184,9 +192,11 @@ 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);
                 }}

package/src/forms/Form.tsx

@@ -0,0 +1,67 @@
+/**
+ * File: /src/forms/Form.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 30-12-2024 18:45: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 type { Validator } from "@tanstack/form-core";
+import { type FormApi, type FormOptions, useForm } from "@tanstack/react-form";
+import { createContext, useContext } from "react";
+import type { ReactNode } from "react";
+
+export const FormContext = createContext<FormApi<any, any> | undefined>(
+  undefined,
+);
+
+export function useFormContext<
+  TParentData,
+  TFormValidator extends Validator<TParentData, unknown> | undefined,
+>() {
+  return useContext(FormContext) as FormApi<TParentData, TFormValidator>;
+}
+
+export type FormProps<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+> = (
+  | {
+      form: FormApi<TFormData, TFormValidator>;
+    }
+  | FormOptions<TFormData, TFormValidator>
+) & {
+  children: ReactNode;
+};
+
+export function Form<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+>(props: FormProps<TFormData, TFormValidator>) {
+  const { children, form, ...formOptions } = props as FormProps<
+    TFormData,
+    TFormValidator
+  > & {
+    form?: FormApi<TFormData, TFormValidator>;
+  };
+  return (
+    <FormContext.Provider
+      value={form || useForm<TFormData, TFormValidator>(formOptions)}
+    >
+      {children}
+    </FormContext.Provider>
+  );
+}

package/src/forms/Input/FieldInput.spec.tsx

@@ -0,0 +1,181 @@
+/**
+ * File: /src/forms/Input/FieldInput.spec.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 31-12-2024 07:36:50
+ * 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, createTamagui } from "tamagui";
+import { describe, expect, it, vi } from "vitest";
+import { SubmitButton } from "../Button/SubmitButton";
+import { Form } from "../Form";
+import { FieldInput } from "./FieldInput";
+
+const tamaguiConfig = createTamagui(config);
+
+describe("FieldInput", () => {
+  const renderWithProviders = (ui: React.ReactElement) => {
+    return render(
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {ui}
+      </TamaguiProvider>,
+    );
+  };
+
+  it("should render successfully", () => {
+    const { getByRole } = renderWithProviders(
+      <FieldInput name="name" defaultValue="" />,
+    );
+    expect(getByRole("textbox")).toBeDefined();
+  });
+
+  it("should render with label and helper text", () => {
+    const { getByText, getByRole } = renderWithProviders(
+      <FieldInput
+        label="Name"
+        helperText="Enter your name"
+        name="name"
+        defaultValue=""
+      />,
+    );
+    expect(getByText("Name")).toBeDefined();
+    expect(getByText("Enter your name")).toBeDefined();
+    expect(getByRole("textbox")).toBeDefined();
+  });
+
+  it("should handle input changes", () => {
+    const onChangeText = vi.fn();
+    const { getByRole } = renderWithProviders(
+      <FieldInput name="name" onChangeText={onChangeText} defaultValue="" />,
+    );
+    const input = getByRole("textbox");
+    fireEvent.change(input, { target: { value: "John" } });
+    expect(onChangeText).toHaveBeenCalledWith("John");
+  });
+
+  it("should handle disabled state", () => {
+    const onChangeText = vi.fn();
+    const { getByRole } = renderWithProviders(
+      <FieldInput
+        name="name"
+        onChangeText={onChangeText}
+        defaultValue=""
+        disabled
+      />,
+    );
+    const input = getByRole("textbox");
+    expect(input).toBeDisabled();
+    fireEvent.change(input, { target: { value: "John" } });
+    expect(onChangeText).not.toHaveBeenCalled();
+  });
+
+  describe("with Form component", () => {
+    it("should handle form submission", async () => {
+      const onSubmit = vi.fn();
+      const { getByRole, getByText } = renderWithProviders(
+        <Form
+          defaultValues={{ name: "" }}
+          onSubmit={async ({ value }) => {
+            onSubmit(value);
+          }}
+        >
+          <FieldInput name="name" />
+          <SubmitButton>Submit</SubmitButton>
+        </Form>,
+      );
+      const input = getByRole("textbox");
+      const submitButton = getByText("Submit");
+      await act(async () => {
+        fireEvent.change(input, { target: { value: "John" } });
+        fireEvent.click(submitButton);
+      });
+      expect(onSubmit).toHaveBeenCalledWith({ name: "John" });
+    });
+
+    it("should handle disabled state", async () => {
+      const onSubmit = vi.fn();
+      const { getByRole } = renderWithProviders(
+        <Form defaultValues={{ name: "" }} onSubmit={onSubmit}>
+          <FieldInput name="name" disabled />
+          <SubmitButton>Submit</SubmitButton>
+        </Form>,
+      );
+      const input = getByRole("textbox");
+      expect(input).toBeDisabled();
+      fireEvent.change(input, { target: { value: "John" } });
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("with useForm hook", () => {
+    it("should handle form submission", async () => {
+      const onSubmit = vi.fn();
+      const TestComponent = () => {
+        const form = useForm({
+          defaultValues: {
+            name: "",
+          },
+          onSubmit: async ({ value }) => {
+            onSubmit(value);
+          },
+        });
+        return (
+          <Form form={form}>
+            <FieldInput name="name" />
+            <SubmitButton>Submit</SubmitButton>
+          </Form>
+        );
+      };
+      const { getByRole, getByText } = renderWithProviders(<TestComponent />);
+      const input = getByRole("textbox");
+      const submitButton = getByText("Submit");
+      await act(async () => {
+        fireEvent.change(input, { target: { value: "John" } });
+        fireEvent.click(submitButton);
+      });
+      expect(onSubmit).toHaveBeenCalledWith({ name: "John" });
+    });
+
+    it("should handle disabled state", async () => {
+      const onSubmit = vi.fn();
+      const TestComponent = () => {
+        const form = useForm({
+          defaultValues: {
+            name: "",
+          },
+          onSubmit: async ({ value }) => {
+            onSubmit(value);
+          },
+        });
+        return (
+          <Form form={form}>
+            <FieldInput name="name" disabled />
+            <SubmitButton>Submit</SubmitButton>
+          </Form>
+        );
+      };
+      const { getByRole } = renderWithProviders(<TestComponent />);
+      const input = getByRole("textbox");
+      expect(input).toBeDisabled();
+      fireEvent.change(input, { target: { value: "John" } });
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+  });
+});