From aa2d6431ae9236da28cedf5d2992300af8043658 Mon Sep 17 00:00:00 2001
From: Jesus Sanz <jesus@jsanz.dev>
Date: Sun, 4 Aug 2024 11:18:29 +0200
Subject: [PATCH 1/2] Feature: added radio button to component gallery.

Closes #22
---
 public/widgets/radiobutton.svg                | 12 +++
 .../components/front-components/index.ts      |  1 +
 .../front-components/radiobutton-shape.tsx    | 74 +++++++++++++++++++
 src/core/model/index.ts                       |  3 +-
 src/pods/canvas/shape-renderer/index.tsx      |  3 +
 .../shape-renderer/simple-component/index.ts  |  1 +
 .../simple-component/radiobutton.renderer.tsx | 28 +++++++
 .../component-gallery-data/index.ts           |  1 +
 8 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 public/widgets/radiobutton.svg
 create mode 100644 src/common/components/front-components/radiobutton-shape.tsx
 create mode 100644 src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx

diff --git a/public/widgets/radiobutton.svg b/public/widgets/radiobutton.svg
new file mode 100644
index 00000000..96164423
--- /dev/null
+++ b/public/widgets/radiobutton.svg
@@ -0,0 +1,12 @@
+<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
+  <!-- Círculo exterior del radio button -->
+  <circle cx="25" cy="25" r="15" stroke="black" stroke-width="2" fill="none"/>
+
+  <!-- Círculo interior del radio button (checked) -->
+  <circle cx="25" cy="25" r="8" fill="black"/>
+
+  <!-- Texto -->
+  <text x="50" y="30" font-family="Comic Sans MS, cursive" font-size="20" fill="black">
+    Select me!
+  </text>
+</svg>
\ No newline at end of file
diff --git a/src/common/components/front-components/index.ts b/src/common/components/front-components/index.ts
index f88c923b..ae6f5cca 100644
--- a/src/common/components/front-components/index.ts
+++ b/src/common/components/front-components/index.ts
@@ -8,3 +8,4 @@ export * from './listbox-shape';
 export * from './datepickerinput-shape';
 export * from './button-shape';
 export * from './timepickerinput-shape';
+export * from './radiobutton-shape';
diff --git a/src/common/components/front-components/radiobutton-shape.tsx b/src/common/components/front-components/radiobutton-shape.tsx
new file mode 100644
index 00000000..09e1aee0
--- /dev/null
+++ b/src/common/components/front-components/radiobutton-shape.tsx
@@ -0,0 +1,74 @@
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef, useState } from 'react';
+import { Group, Circle, Text } from 'react-konva';
+import { ShapeProps } from './shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+
+const radioButtonShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 50,
+  minHeight: 30,
+  maxWidth: 200,
+  maxHeight: 50,
+  defaultWidth: 120,
+  defaultHeight: 50,
+};
+
+export const RadioButtonShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        radioButtonShapeRestrictions,
+        width,
+        height
+      );
+
+    const [isOn, setIsOn] = useState(false);
+
+    const handleSwitch = () => {
+      setIsOn(!isOn);
+    };
+
+    const radius = restrictedHeight / 2;
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        ref={ref}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'radiobutton')}
+      >
+        {/* Círculo exterior del radio button */}
+        <Circle
+          x={radius}
+          y={radius}
+          radius={radius}
+          stroke="black"
+          strokeWidth={2}
+        />
+
+        {/* Círculo interior del radio button (checked) */}
+        <Circle
+          onClick={handleSwitch}
+          x={radius}
+          y={radius}
+          radius={radius * 0.5}
+          fill={isOn ? 'black' : 'white'}
+        />
+
+        {/* Texto */}
+        <Text
+          x={radius * 2 + 10}
+          y={radius * 0.5}
+          text="Select me!"
+          fontFamily="Comic Sans MS, cursive"
+          fontSize={20}
+          fill="none"
+          verticalAllign="middle"
+        />
+      </Group>
+    );
+  }
+);
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index eaad117a..af086b93 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -22,7 +22,8 @@ export type ShapeType =
   | 'mobilePhone'
   | 'tablet'
   | 'timepickerinput'
-  | 'label';
+  | 'label'
+  | 'radiobutton';
 /* | "text"| "button" |  "radio" | "image"*/
 
 export type ShapeRefs = {
diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx
index fd77f5d5..837da55a 100644
--- a/src/pods/canvas/shape-renderer/index.tsx
+++ b/src/pods/canvas/shape-renderer/index.tsx
@@ -13,6 +13,7 @@ import {
   renderDatepickerinput,
   renderTimepickerinput,
   renderLabel,
+  renderRadioButton,
 } from './simple-component';
 import {
   renderBrowserWindow,
@@ -53,6 +54,8 @@ export const renderShapeComponent = (
       return renderMobilePhoneContainer(shape, shapeRenderedProps);
     case 'label':
       return renderLabel(shape, shapeRenderedProps);
+    case 'radiobutton':
+      return renderRadioButton(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }
diff --git a/src/pods/canvas/shape-renderer/simple-component/index.ts b/src/pods/canvas/shape-renderer/simple-component/index.ts
index 63a735e7..6480968e 100644
--- a/src/pods/canvas/shape-renderer/simple-component/index.ts
+++ b/src/pods/canvas/shape-renderer/simple-component/index.ts
@@ -10,3 +10,4 @@ export * from './listbox.renderer';
 export * from './datepickerinput.renderer';
 export * from './timepickerinput.renderer';
 export * from './label.renderer';
+export * from './radiobutton.renderer';
diff --git a/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx
new file mode 100644
index 00000000..deb32f2f
--- /dev/null
+++ b/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx
@@ -0,0 +1,28 @@
+import { ShapeModel } from '@/core/model';
+import { ShapeRendererProps } from '../model';
+import { RadioButtonShape } from '@/common/components/front-components/radiobutton-shape';
+
+export const renderRadioButton = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <RadioButtonShape
+      id={shape.id}
+      key={shape.id}
+      x={shape.x}
+      y={shape.y}
+      width={shape.width}
+      height={shape.height}
+      draggable
+      onSelected={handleSelected}
+      ref={shapeRefs.current[shape.id]}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+    />
+  );
+};
diff --git a/src/pods/component-gallery/component-gallery-data/index.ts b/src/pods/component-gallery/component-gallery-data/index.ts
index d766483c..f00c3f84 100644
--- a/src/pods/component-gallery/component-gallery-data/index.ts
+++ b/src/pods/component-gallery/component-gallery-data/index.ts
@@ -12,4 +12,5 @@ export const mockWidgetCollection: ItemInfo[] = [
   { thumbnailSrc: '/widgets/listbox.svg', type: 'listbox' },
   { thumbnailSrc: '/widgets/datepicker.svg', type: 'datepickerinput' },
   { thumbnailSrc: '/widgets/timepicker.svg', type: 'timepickerinput' },
+  { thumbnailSrc: '/widgets/radiobutton.svg', type: 'radiobutton' },
 ];

From 7002a4690bb4dcac1cfa72f0811bedd4d664bf1a Mon Sep 17 00:00:00 2001
From: Braulio <braulio.diez@gmail.com>
Date: Sun, 4 Aug 2024 12:58:45 +0200
Subject: [PATCH 2/2] small pixes adjustment

---
 src/common/components/front-components/radiobutton-shape.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/front-components/radiobutton-shape.tsx b/src/common/components/front-components/radiobutton-shape.tsx
index 09e1aee0..0862865e 100644
--- a/src/common/components/front-components/radiobutton-shape.tsx
+++ b/src/common/components/front-components/radiobutton-shape.tsx
@@ -61,7 +61,7 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>(
         {/* Texto */}
         <Text
           x={radius * 2 + 10}
-          y={radius * 0.5}
+          y={radius * 0.5 + 5}
           text="Select me!"
           fontFamily="Comic Sans MS, cursive"
           fontSize={20}