Merge branch 'master' into jmfrancois/chore/upgrade-testing-library

.changeset/moody-turtles-study.md

@@ -0,0 +1,5 @@
+---
+'@talend/utils': minor
+---
+
+TDOPS-5386 - remove phone validation as not in use

packages/design-system/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @talend/design-system
 
+## 8.1.1
+
+### Patch Changes
+
+- 6816365dc: fix: binding in forms
+
 ## 8.1.0
 
 ### Minor Changes

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talend/design-system",
-  "version": "8.1.0",
+  "version": "8.1.1",
   "description": "Talend Design System",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx

@@ -15,7 +15,7 @@ const AffixSelect = forwardRef((props: AffixSelectPropsType, ref: Ref<HTMLSelect
 		const fieldID = useId(affixId, 'field-');
 
 		function AffixSelectComponent(
-			selectProps: Omit<SelectNoWrapperProps, 'hasError' | 'name' | 'children' | 'label'>,
+			selectProps: Omit<SelectNoWrapperProps, 'hasError' | 'children' | 'label'>,
 		) {
 			return (
 				<SelectNoWrapper id={fieldID} {...selectProps} isAffix isSuffix={isSuffix} ref={ref}>
@@ -25,7 +25,7 @@ const AffixSelect = forwardRef((props: AffixSelectPropsType, ref: Ref<HTMLSelect
 		}
 		return (
 			<FieldPrimitive label={label} name={name} id={fieldID} fieldId={fieldID} hideLabel>
-				<AffixSelectComponent {...rest} />
+				<AffixSelectComponent name={name} {...rest} />
 			</FieldPrimitive>
 		);
 	}

packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx

@@ -55,6 +55,9 @@ const Datalist = forwardRef(
 					<InputPrimitive
 						{...rest}
 						list={datalistListId}
+						name={name}
+						required={required}
+						hasError={hasError || false}
 						disabled={!!disabled}
 						readOnly={!!readOnly}
 						value={value}

packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx

@@ -83,6 +83,8 @@ const InputCopy = forwardRef(
 				<InputPrimitive
 					{...rest}
 					id={inputId}
+					name={name}
+					required={required}
 					ref={inputRef}
 					value={value}
 					defaultValue={defaultValue}

packages/design-system/src/components/Form/Field/Input/Input.File.tsx

@@ -193,7 +193,14 @@ const FieldFile = forwardRef(
 				hideLabel={hideLabel}
 				required={required}
 			>
-				<InputFile {...rest} id={fieldID} ref={ref} />
+				<InputFile
+					{...rest}
+					name={name}
+					required={required}
+					hasError={hasError || false}
+					id={fieldID}
+					ref={ref}
+				/>
 			</FieldPrimitive>
 		);
 	},

packages/design-system/src/components/Form/Field/Input/Input.tsx

@@ -43,11 +43,11 @@ const Field = forwardRef((props: InputFieldProps, ref: Ref<HTMLInputElement>) =>
 			<InputPrimitive
 				{...rest}
 				id={fieldID}
+				name={name}
+				required={required}
 				type={type}
 				ref={ref}
 				hasError={hasError || false}
-				name={name}
-				required={required}
 			/>
 		</FieldPrimitive>
 	);

packages/design-system/src/components/Form/Field/Select/Select.tsx

@@ -97,8 +97,8 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 				defaultValue={defaultValue}
 				hasError={hasError || false}
 				name={name}
-				label={label}
 				required={required}
+				label={label}
 				id={fieldID}
 				{...rest}
 			/>

packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx

@@ -44,6 +44,7 @@ const Textarea = forwardRef((props: InputTextareaProps, ref: Ref<HTMLTextAreaEle
 				{...rest}
 				required={required}
 				id={fieldID}
+				name={name}
 				ref={ref}
 			/>
 		</FieldPrimitive>

packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap

@@ -115,6 +115,7 @@ exports[`Form should render a11y html 1`] = `
             <input
               class="theme-inputFile__input theme-input"
               id="field--mocked-uuid-3"
+              name="file"
               type="file"
             />
             <div
@@ -228,6 +229,7 @@ exports[`Form should render a11y html 1`] = `
         <textarea
           class="theme-textarea"
           id="field--mocked-uuid-8"
+          name="textarea"
         />
       </div>
       <div

packages/utils/src/validation/methods.test.ts

@@ -1,67 +1,40 @@
-import { validFirstName, validLastName, validEmail, validPhone } from './methods';
-import {
-	validNames,
-	invalidNames,
-	validEmails,
-	invalidEmails,
-	validPhones,
-	invalidPhones,
-}  from './testValues';
+import { validFirstName, validLastName, validEmail } from './methods';
+import { validNames, invalidNames, validEmails, invalidEmails } from './testValues';
 
 describe('methods', () => {
 	describe('validFirstName', () => {
 		// Test valid values
-		test.each(validNames)(
-			'"%s" should be an acceptable first name',
-			(value: string) => expect(validFirstName(value)).toBe(true),
+		test.each(validNames)('"%s" should be an acceptable first name', (value: string) =>
+			expect(validFirstName(value)).toBe(true),
 		);
 
 		// Test invalid values
-		test.each(invalidNames)(
-			'"%s" should not be an acceptable first name',
-			(value: string) => expect(validFirstName(value)).toBe(false),
+		test.each(invalidNames)('"%s" should not be an acceptable first name', (value: string) =>
+			expect(validFirstName(value)).toBe(false),
 		);
 	});
 
 	describe('validLastName', () => {
 		// Test valid values
-		test.each(validNames)(
-			'"%s" should be an acceptable last name',
-			(value: string) => expect(validLastName(value)).toBe(true),
+		test.each(validNames)('"%s" should be an acceptable last name', (value: string) =>
+			expect(validLastName(value)).toBe(true),
 		);
 
 		// Test invalid values
-		test.each(invalidNames)(
-			'"%s" should not be an acceptable last name',
-			(value: string) => expect(validLastName(value)).toBe(false),
+		test.each(invalidNames)('"%s" should not be an acceptable last name', (value: string) =>
+			expect(validLastName(value)).toBe(false),
 		);
 	});
 
 	describe('validEmail', () => {
 		// Test valid values
-		test.each(validEmails)(
-			'"%s" should be an acceptable email',
-			(value: string) => expect(validEmail(value)).toBe(true),
+		test.each(validEmails)('"%s" should be an acceptable email', (value: string) =>
+			expect(validEmail(value)).toBe(true),
 		);
 
 		// Test invalid values
-		test.each(invalidEmails)(
-			'"%s" should not be an acceptable email',
-			(value: string) => expect(validEmail(value)).toBe(false),
-		);
-	});
-
-	describe('validPhone', () => {
-		// Test valid values
-		test.each(validPhones)(
-			'"%s" should be an acceptable phone',
-			(value: string) => expect(validPhone(value)).toBe(true),
-		);
-
-		// Test invalid values
-		test.each(invalidPhones)(
-			'"%s" should not be an acceptable phone',
-			(value: string) => expect(validPhone(value)).toBe(false),
+		test.each(invalidEmails)('"%s" should not be an acceptable email', (value: string) =>
+			expect(validEmail(value)).toBe(false),
 		);
 	});
 });

packages/utils/src/validation/methods.ts

@@ -1,4 +1,4 @@
-import { NAME, EMAIL, DOMAIN, PHONE } from './regexp';
+import { NAME, EMAIL, DOMAIN } from './regexp';
 
 /**
  * Build a validation method along a given regular expression
@@ -36,10 +36,3 @@ export const validEmail: Function = getValidationMethod(EMAIL);
  * @returns {boolean}
  */
 export const validDomain: Function = getValidationMethod(DOMAIN);
-
-/**
- * Check that a given value is a valid phone number
- * @param {string} value
- * @returns {boolean}
- */
-export const validPhone: Function = getValidationMethod(PHONE);

packages/utils/src/validation/regexp.ts

@@ -1,13 +1,6 @@
-/* eslint-disable no-useless-escape */
-
-export const PHONE =
-	/^((?:\+[\d().-]*\d[\d().-]*|[0-9A-F*#().-]*[0-9A-F*#][0-9A-F*#().-]*(?:;[a-z\d-]+(?:=(?:[a-z\d\[\]\/:&+$_!~*'().-]|%[\dA-F]{2})+)?)*;phone-context=(?:\+[\d().-]*\d[\d().-]*|(?:[a-z0-9]\.|[a-z0-9][a-z0-9-]*[a-z0-9]\.)*(?:[a-z]|[a-z][a-z0-9-]*[a-z0-9])))(?:;[a-z\d-]+(?:=(?:[a-z\d\[\]\/:&+$_!~*'().-]|%[\dA-F]{2})+)?)*(?:,(?:\+[\d().-]*\d[\d().-]*|[0-9A-F*#().-]*[0-9A-F*#][0-9A-F*#().-]*(?:;[a-z\d-]+(?:=(?:[a-z\d\[\]\/:&+$_!~*'().-]|%[\dA-F]{2})+)?)*;?)*)*)$/;
-
 export const EMAIL =
 	/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)*[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
 
 export const NAME = /^[^\~!@#$%^&*()|+=?;:",<>\{\}\[\]\\\/¤€¨£°§]*$/i;
 
 export const DOMAIN = /^[^\~!#$%^&*()|+=?;:",<>\{\}\[\]\\\/¤€¨£°§]*$/i;
-
-/* eslint-enable no-useless-escape */

packages/utils/src/validation/testValues.ts

@@ -46,14 +46,3 @@ export const validEmails: Array<string> = [
 ];
 
 export const invalidEmails: Array<string> = ['john', 'john@', 'john @', 'john\\@re'];
-
-// Phones
-export const validPhones: Array<string> = ['+33102030405'];
-
-export const invalidPhones: Array<string> = [
-	'john',
-	'john@',
-	'john @',
-	'[email protected]',
-	'Fred',
-];