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/Properties/Properties.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import * as React from 'react';
 import { expect, describe, it, vi } from 'vitest';
+import { XPositionReference } from '../../Enums/XPositionReference';
 import IProperties from '../../Interfaces/IProperties';
 import { Properties } from './Properties';
 
@@ -26,6 +27,7 @@ describe.concurrent('Properties', () => {
       y: 1,
       width: 1,
       height: 1,
+      XPositionReference: XPositionReference.Left,
       isRigidBody: false,
       isAnchor: false
     };
@@ -62,10 +64,10 @@ describe.concurrent('Properties', () => {
     fireEvent.change(propertyParentId as Element, { target: { value: 'parentedId' } });
     fireEvent.change(propertyX as Element, { target: { value: '2' } });
     fireEvent.change(propertyY as Element, { target: { value: '2' } });
-    expect(handleChange).toBeCalledTimes(4);
+    expect(handleChange).toBeCalledTimes(2);
 
-    expect(prop.id).toBe('stuffed');
-    expect(prop.parentId).toBe('parentedId');
+    expect(prop.id).toBe('stuff');
+    expect(prop.parentId).toBe('parentId');
     expect(prop.x).toBe('2');
     expect(prop.y).toBe('2');
     rerender(<Properties
@@ -79,9 +81,9 @@ describe.concurrent('Properties', () => {
     propertyX = container.querySelector('#x');
     propertyY = container.querySelector('#y');
     expect(propertyId).toBeDefined();
-    expect((propertyId as HTMLInputElement).value).toBe('stuffed');
+    expect((propertyId as HTMLInputElement).value).toBe('stuff');
     expect(propertyParentId).toBeDefined();
-    expect((propertyParentId as HTMLInputElement).value).toBe('parentedId');
+    expect((propertyParentId as HTMLInputElement).value).toBe('parentId');
     expect(propertyX).toBeDefined();
     expect((propertyX as HTMLInputElement).value).toBe('2');
     expect(propertyY).toBeDefined();