@atlaskit/form 12.1.0 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/form
 
+## 12.2.0
+
+### Minor Changes
+
+- [`07de46497864a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/07de46497864a) -
+  We are testing a new way to render the Form component behind a feature flag. Rendering a `Form`
+  component with direct JSX elements instead of a function as `children` will render an HTML `form`
+  element internally, reducing the boilerplate required for most use cases. If this fix is
+  successful it will be available in a later release.
+
+## 12.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.0
 
 ### Minor Changes

package/codemods/__tests__/not-yet-migrate-to-simplified-form.test.tsx

@@ -0,0 +1,613 @@
+jest.autoMockOff();
+
+import transformer from '../not-yet-migrate-to-simplified-form';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import React from 'react';`,
+	`import React from 'react';`,
+	'should not transform if imports are not present',
+);
+
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`
+    import React from 'react';
+    import { Field } from '@atlaskit/form';
+
+    const Component1 = () => <Field />;
+
+    const Component2 = () => <><Field /></>;
+
+    class Component3 extends React.Component { render() { return <Field />; } }
+
+    const element = <Field />;
+    `,
+	`
+    import React from 'react';
+    import { Field } from '@atlaskit/form';
+
+    const Component1 = () => <Field />;
+
+    const Component2 = () => <><Field /></>;
+
+    class Component3 extends React.Component { render() { return <Field />; } }
+
+    const element = <Field />;
+    `,
+	'should not transform if default import is not preset',
+);
+
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`
+    import React from 'react';
+    import Form from '@atlaskit/form';
+
+    const Component1 = () => <Form />;
+
+    const Component2 = () => <><Form /></>;
+
+    class Component3 extends React.Component { render() { return <Form />; } }
+
+    const element = <Form />;
+    `,
+	`
+    import React from 'react';
+    import Form from '@atlaskit/form';
+
+    const Component1 = () => <Form />;
+
+    const Component2 = () => <><Form /></>;
+
+    class Component3 extends React.Component { render() { return <Form />; } }
+
+    const element = <Form />;
+    `,
+	'should not transform if children are not preset',
+);
+
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`
+    import React from 'react';
+    import Form from '@atlaskit/code';
+
+    const Component1 = () => (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+
+    const Component2 = () => (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+
+    class Component3 extends React.Component {
+      render() {
+        return (
+          <Form onSubmit={() => {}}>
+            <p>Test</p>
+          </Form>
+        );
+      }
+    }
+
+    const element = (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+  `,
+	`
+    import React from 'react';
+    import Form from '@atlaskit/code';
+
+    const Component1 = () => (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+
+    const Component2 = () => (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+
+    class Component3 extends React.Component {
+      render() {
+        return (
+          <Form onSubmit={() => {}}>
+            <p>Test</p>
+          </Form>
+        );
+      }
+    }
+
+    const element = (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+  `,
+	'should not transform if children is not a function',
+);
+
+describe('Migrate <Form> to simplified version if only `formProps` in child arg ', () => {
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps}>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps}>
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps}>
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps}>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}><input /></Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}><input /></Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (<Form onSubmit={() => {}}><input /></Form>);
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}><input /></Form>
+);
+      `,
+		'should convert from function with no props on form',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps: renamed }) => (
+      <form {...renamed}>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps: renamed }) => (
+        <form {...renamed}>
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps: renamed }) => (
+          <form {...renamed}>
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps: renamed }) => (
+      <form {...renamed}>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}><input /></Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}><input /></Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (<Form onSubmit={() => {}}><input /></Form>);
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}><input /></Form>
+);
+      `,
+		'should convert from function with no props on form',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo="bar">
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} foo="bar">
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: "bar"
+    }}><input /></Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: "bar"
+      }}><input /></Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form
+        onSubmit={() => {}}
+        formProps={{
+          foo: "bar"
+        }}><input /></Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: "bar"
+    }}><input /></Form>
+);
+      `,
+		'should convert from function with single prop on form',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo="bar" baz="qux">
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} foo="bar" baz="qux">
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: "bar",
+      baz: "qux"
+    }}><input /></Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: "bar",
+        baz: "qux"
+      }}><input /></Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form
+        onSubmit={() => {}}
+        formProps={{
+          foo: "bar",
+          baz: "qux"
+        }}><input /></Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: "bar",
+      baz: "qux"
+    }}><input /></Form>
+);
+      `,
+		'should convert from function with multiple props on form',
+	);
+});
+
+describe('Do not migrate Form when anything more than `formProps` in child arg', () => {
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps, submitting }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps, submitting }) => (
+        <form {...formProps} foo="bar" baz="qux">
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps, submitting }) => (
+          <form {...formProps} foo="bar" baz="qux">
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps, submitting }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps, submitting }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps, submitting }) => (
+        <form {...formProps} foo="bar" baz="qux">
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps, submitting }) => (
+          <form {...formProps} foo="bar" baz="qux">
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps, submitting }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		'should not migrate when anything other than `formProps` is an arg in child function',
+	);
+});