form icon indicating copy to clipboard operation
form copied to clipboard

[WIP] Array and provider refactor

Open crutchcorn opened this issue 1 year ago • 1 comments

This PR aims to fix issues with array usage typings and removes the Provider component.

With this change, an array-based form in React might look like:

import * as React from "react";
import { createRoot } from "react-dom/client";
import { useForm } from "@tanstack/react-form";

export default function App() {
  const form = useForm({
    defaultValues: {
      people: [] as Array<{ age: number; name: string }>,
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      alert(JSON.stringify(value, null, 2));
    },
  });

  return (
    <div>
      <h1>Simple Form Example</h1>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          void form.handleSubmit();
        }}
      >
        <form.Field name="people">
          {(field) => {
            return (
              <div>
                {field.state.value.map((_, i) => {
                  return (
                    <form.Field name={`people[${i}].name`}>
                      {(subField) => {
                        return (
                          <div>
                            <label>
                              <div>Name for person {i}</div>
                              <input
                                value={subField.state.value}
                                onChange={(e) =>
                                  subField.handleChange(e.target.value)
                                }
                              />
                            </label>
                          </div>
                        );
                      }}
                    </form.Field>
                  );
                })}
                <button
                  onClick={() => field.pushValue({ name: "", age: 0 })}
                  type="button"
                >
                  Add person
                </button>
              </div>
            );
          }}
        </form.Field>
        <form.Subscribe
          selector={(state) => [state.canSubmit, state.isSubmitting]}
          children={([canSubmit, isSubmitting]) => (
            <button type="submit" disabled={!canSubmit}>
              {isSubmitting ? "..." : "Submit"}
            </button>
          )}
        />
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root")!;

createRoot(rootElement).render(<App />);

TODO List

  • [x] Fix tests for core path helpers
  • [x] Fix tests for array usage in Core
  • [x] Fix types in React
  • [x] Fix types in Solid
  • [ ] Fix types in Vue
  • [ ] Write array tests for React
  • [ ] Write array tests for Solid
  • [ ] Write array tests for Vue
  • [ ] Write array example for React
    • [ ] Update docs example as well
  • [ ] Write array example for Solid
  • [ ] Write array example for Vue
  • [x] Remove provider for React
    • [ ] Remove from docs
    • [ ] Remove from examples
  • [x] Remove provider for Solid
    • [ ] Remove from docs
    • [ ] Remove from examples
  • [ ] Remove provider for Vue
    • [ ] Remove from docs
    • [ ] Remove from examples

crutchcorn avatar Jan 28 '24 15:01 crutchcorn

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

codesandbox-ci[bot] avatar Jan 28 '24 15:01 codesandbox-ci[bot]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 1e1e48bf2330479492ac470c1c3c91056f49619c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

nx-cloud[bot] avatar Feb 29 '24 10:02 nx-cloud[bot]

Codecov Report

Attention: Patch coverage is 85.71429% with 3 lines in your changes are missing coverage. Please review.

Project coverage is 91.18%. Comparing base (0003063) to head (c740617).

Files Patch % Lines
packages/solid-form/src/createForm.tsx 60.00% 2 Missing :warning:
packages/vue-form/src/useField.tsx 0.00% 1 Missing :warning:

:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #588      +/-   ##
==========================================
+ Coverage   90.73%   91.18%   +0.45%     
==========================================
  Files          29       26       -3     
  Lines         766      726      -40     
  Branches      179      172       -7     
==========================================
- Hits          695      662      -33     
+ Misses         66       59       -7     
  Partials        5        5              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov-commenter avatar Mar 05 '24 02:03 codecov-commenter