Unrefactor Properties form to allow more freedom on the input types and form (#32)

- The css style is now in IProperties.Style again.
- Forms are divided in DynamicForm and StaticForm
- Faster because less logic
- Add RadioGroupButton
- Add InputGroup
- Fix Children Dimensions not using x for their origin

Co-authored-by: Eric NGUYEN <enguyen@techform.fr>
Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/32

src/Components/RadioGroupButtons/RadioGroupButtons.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { IInputGroup } from '../../Interfaces/IInputGroup';
+
+interface IRadioGroupButtonsProps {
+  name: string
+  value?: string
+  defaultValue?: string
+  inputClassName: string
+  labelText: string
+  inputGroups: IInputGroup[]
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps> = (props) => {
+  let inputGroups;
+  if (props.value !== undefined) {
+    // dynamic
+    inputGroups = props.inputGroups.map((inputGroup) => (
+      <div key={inputGroup.value}>
+        <input
+          id={inputGroup.value}
+          type='radio'
+          name={props.name}
+          className={`peer m-2 ${props.inputClassName}`}
+          value={inputGroup.value}
+          checked={props.value === inputGroup.value}
+          onChange={props.onChange}
+        />
+        <label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
+          {inputGroup.text}
+        </label>
+      </div>
+
+    ));
+  } else {
+    // static
+    inputGroups = props.inputGroups.map((inputGroup) => (
+      <div key={inputGroup.value}>
+        <input
+          id={inputGroup.value}
+          type='radio'
+          name={props.name}
+          className={`peer m-2 ${props.inputClassName}`}
+          value={inputGroup.value}
+          defaultChecked={props.defaultValue === inputGroup.value}
+        />
+        <label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
+          {inputGroup.text}
+        </label>
+      </div>
+    ));
+  }
+
+  return (
+    <>
+      <label className='mt-4 text-xs font-medium text-gray-800'>
+        {props.labelText}
+      </label>
+      <div id='XPositionReference'
+        className='flex flex-col'
+      >
+        { inputGroups }
+      </div>
+    </>
+  );
+};