@multiplatform.one/components 5.0.1 → 5.0.4

package/src/forms/Checkbox/index.ts

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

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

@@ -19,17 +19,30 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { DeepKeys, DeepValue, Validator, FieldApi } from '@tanstack/form-core';
-import type { LabelProps, YStackProps, SizeTokens, FontSizeTokens } from 'tamagui';
-import type { ReactNode } from 'react';
-import { Label, Paragraph, YStack, useProps } from 'tamagui';
+import type {
+  DeepKeys,
+  DeepValue,
+  FieldApi,
+  Validator,
+} from "@tanstack/form-core";
+import type { ReactNode } from "react";
+import type {
+  FontSizeTokens,
+  LabelProps,
+  SizeTokens,
+  YStackProps,
+} from "tamagui";
+import { Label, Paragraph, YStack, useProps } from "tamagui";
 
 export interface FormFieldProps<
   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>,
 > extends YStackProps {
   children: ReactNode;
@@ -38,7 +51,7 @@ export interface FormFieldProps<
   helperText?: string;
   id?: string;
   label?: ReactNode;
-  labelProps?: Omit<LabelProps, 'htmlFor' | 'ref'>;
+  labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
   required?: boolean;
   size?: SizeTokens;
 }
@@ -46,25 +59,59 @@ export interface FormFieldProps<
 export function FormField<
   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: FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
-  let { children, error, field, helperText, id, label, labelProps, required, size, ...stackProps } = useProps(props);
-  error = field?.state.meta.errors.length ? field.state.meta.errors.join(', ') : error;
-  helperText = error && typeof error === 'string' ? error : helperText;
+>(
+  props: FormFieldProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
+  let {
+    children,
+    error,
+    field,
+    helperText,
+    id,
+    label,
+    labelProps,
+    required,
+    size,
+    ...stackProps
+  } = useProps(props);
+  error = field?.state.meta.errors.length
+    ? field.state.meta.errors.join(", ")
+    : error;
+  helperText = error && typeof error === "string" ? error : helperText;
   return (
-    <YStack theme={error ? 'red' : undefined} {...stackProps}>
+    <YStack theme={error ? "red" : undefined} {...stackProps}>
       {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>
       )}
       <YStack>
         {children}
         {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>
         )}

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();
+    });
+  });
+});

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

@@ -19,40 +19,41 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Button } from 'tamagui';
-import { FieldInput } from './FieldInput';
-import { YStack } from 'tamagui';
-import { action } from '@storybook/addon-actions';
-import { useForm } from '@tanstack/react-form';
-import type { FieldInputProps } from './FieldInput';
+import { action } from "@storybook/addon-actions";
+import { useForm } from "@tanstack/react-form";
+import { Button } from "tamagui";
+import { YStack } from "tamagui";
+import { FieldInput } from "./FieldInput";
+import type { FieldInputProps } from "./FieldInput";
 
 export default {
-  title: 'forms/FieldInput',
+  title: "forms/FieldInput",
   component: FieldInput,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
-export const main = (args) => <FieldInput onCheckedChange={action('onCheckedChange')} {...args} />;
+export const main = (args) => (
+  <FieldInput onCheckedChange={action("onCheckedChange")} {...args} />
+);
 const mainArgs: FieldInputProps = {
-  label: 'Hi',
+  label: "Hi",
   error: undefined,
-  helperText: 'please check this input',
+  helperText: "please check this input",
   mode: undefined,
-  size: '$1',
+  size: "$1",
 };
 main.args = mainArgs;
 
 export const form = () => {
   const form = useForm({
     defaultValues: {
-      firstName: '',
-      lastName: '',
+      firstName: "",
+      lastName: "",
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (

package/src/forms/Input/FieldInput.tsx

@@ -19,35 +19,67 @@
  * limitations under the License.
  */
 
-import React, { useId } from 'react';
-import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
-import type { FieldComponentProps } from '../types';
-import type { FormFieldProps } from '../FormField';
-import type { InputProps } from './Input';
-import { FormField } from '../FormField';
-import { Input } from './Input';
-import { useForm, Field } from '@tanstack/react-form';
-import { useProps } from 'tamagui';
+import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
+import { Field, useForm } from "@tanstack/react-form";
+import type { FormApi } from "@tanstack/react-form";
+import { useId } from "react";
+import { useProps } from "tamagui";
+import { useFormContext } from "../Form";
+import type { FormFieldProps } from "../FormField";
+import { FormField } from "../FormField";
+import type { FieldComponentProps } from "../types";
+import type { InputProps } from "./Input";
+import { Input } from "./Input";
 
 export type FieldInputProps<
   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<InputProps, 'value' | 'onChange' | 'onChangeText'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    inputProps?: Omit<InputProps, 'value' | 'id' | 'onChange' | 'onChangeText'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<InputProps, "value" | "onChange" | "onChangeText"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    inputProps?: Omit<InputProps, "value" | "id" | "onChange" | "onChangeText">;
   };
 
 export function FieldInput<
   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: FieldInputProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldInputProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -63,15 +95,28 @@ export function FieldInput<
     preserveValue,
     validatorAdapter,
     validators,
+    disabled,
     value,
     ...fieldProps
   } = useProps(props);
-  form = form || useForm();
+  const formContext = useFormContext();
+  form =
+    form || (formContext as FormApi<TParentData, TFormValidator>) || useForm();
   const id = fieldProps.id || useId();
   if (!form || !name) {
     return (
       <FormField {...fieldProps} id={id} onBlur={onBlur}>
-        <Input {...inputProps} id={id} value={value ?? (defaultValue as string)} onChange={onChange} />
+        <Input
+          {...inputProps}
+          disabled={disabled}
+          id={id}
+          value={value ?? (defaultValue as string)}
+          onChange={onChange}
+          onChangeText={(text) => {
+            if (disabled) return;
+            return onChangeText?.(text);
+          }}
+        />
       </FormField>
     );
   }
@@ -89,7 +134,9 @@ export function FieldInput<
       validators={validators}
     >
       {(field) => {
-        const error = field.state.meta.errors.length ? field.state.meta.errors.join(', ') : fieldProps.error;
+        const error = field.state.meta.errors.length
+          ? field.state.meta.errors.join(", ")
+          : fieldProps.error;
         return (
           <FormField
             error={error}
@@ -105,7 +152,9 @@ export function FieldInput<
               id={id}
               onChange={onChange}
               value={value ?? (field.state.value as string)}
+              disabled={disabled}
               onChangeText={(text) => {
+                if (disabled) return;
                 field.handleChange(text as TData);
                 return onChangeText?.(text);
               }}

package/src/forms/Input/Input.ts

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

package/src/forms/Input/index.ts

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

package/src/forms/Progress/FieldProgress.stories.tsx

@@ -19,29 +19,30 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { FieldProgressProps } from './FieldProgress';
-import { Button, YStack } from 'tamagui';
-import { FieldProgress } from './FieldProgress';
-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 { FieldProgressProps } from "./FieldProgress";
+import { FieldProgress } from "./FieldProgress";
 
 export default {
-  title: 'forms/FieldProgress',
+  title: "forms/FieldProgress",
   component: FieldProgress,
   parameters: {
     status: {
-      type: 'beta',
+      type: "beta",
     },
   },
 };
 
-export const main = (args) => <FieldProgress onProgressChange={action('onProgressChange')} {...args} />;
+export const main = (args) => (
+  <FieldProgress onProgressChange={action("onProgressChange")} {...args} />
+);
 const mainArgs: FieldProgressProps = {
-  label: 'john',
+  label: "john",
   error: undefined,
-  helperText: 'please check this progress',
-  size: '$2',
+  helperText: "please check this progress",
+  size: "$2",
 };
 main.args = mainArgs;
 export const form = () => {
@@ -51,7 +52,7 @@ export const form = () => {
       bar: true,
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (