Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Array and provider refactor #588

Merged
merged 27 commits into from
Mar 13, 2024
Merged

Array and provider refactor #588

merged 27 commits into from
Mar 13, 2024

Conversation

crutchcorn
Copy link
Member

@crutchcorn crutchcorn commented Jan 28, 2024

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

  • Fix tests for core path helpers
  • Fix tests for array usage in Core
  • Fix types in React
  • 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
    • Mention For vs Index looping API
  • Write array example for Vue
  • Remove provider for React
    • Remove from docs
    • Remove from examples
  • Remove provider for Solid
    • Remove from docs
    • Remove from examples
  • Remove provider for Vue
    • Remove from docs
    • Remove from examples

Copy link

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.

# Conflicts:
#	packages/form-core/src/FieldApi.ts
#	packages/form-core/src/FormApi.ts
#	packages/form-core/src/utils.ts
#	packages/react-form/src/formContext.ts
#	packages/react-form/src/types.ts
#	packages/react-form/src/useField.tsx
#	packages/react-form/src/useForm.tsx
#	packages/solid-form/src/createForm.tsx
#	packages/solid-form/src/types.ts
Copy link

nx-cloud bot commented Feb 29, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 1e1e48b. 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.

@codecov-commenter
Copy link

codecov-commenter commented Mar 5, 2024

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 ⚠️
packages/vue-form/src/useField.tsx 0.00% 1 Missing ⚠️

❗ 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              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@crutchcorn crutchcorn changed the title [WIP] Array and provider refactor Array and provider refactor Mar 5, 2024
@crutchcorn crutchcorn requested a review from a team March 5, 2024 05:50
@crutchcorn crutchcorn marked this pull request as ready for review March 5, 2024 05:50
# Conflicts:
#	packages/solid-form/src/tests/createField.test.tsx
#	packages/vue-form/src/tests/useField.test.tsx
#	packages/vue-form/src/tests/useForm.test.tsx
Copy link
Contributor

@fulopkovacs fulopkovacs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love seeing the Provider go! ☺️ (There's only two tiny things to fix, otherwise it LGTM! 🚀 )

docs/config.json Outdated Show resolved Hide resolved
docs/config.json Outdated Show resolved Hide resolved
@crutchcorn crutchcorn merged commit e833f1a into main Mar 13, 2024
2 checks passed
@crutchcorn crutchcorn deleted the array-and-provider-refactor branch March 13, 2024 11:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants