Create Radio Button for konva component

Pending on trasnformer implementation to be merged

Create a Radio button for konva component

We have got the following radiobutton SVG component:

https://github.com/brauliodiez/konba-playground/blob/main/public/widgets/radiobutton.svg?short_path=a58008d

Implement a React.konba component that takes into consideration resizing, take a look to the combobox konba implementation on Quick Mock

https://github.com/Lemoncode/quickmock/blob/main/src/common/components/front-components/combobox-shape.tsx

Add a solid white background to the input inner content.

Right now we will support dynamic resizing, but we won't bother about adding a text property.

A possible starting point:

import React, { forwardRef } from 'react';
import { Group, Circle, Text } from 'react-konva';
import { ShapeConfig } from 'konva/lib/Shape';

interface RadioButtonShapeProps extends ShapeConfig {
  id: string;
  x: number;
  y: number;
  radius: number;
  onSelected: (id: string) => void;
}

export const RadioButtonShape = forwardRef<any, RadioButtonShapeProps>(
  ({ x, y, radius, id, onSelected, ...shapeProps }, ref) => {
    const handleClick = () => {
      onSelected(id);
    };

    return (
      <Group x={x} y={y} ref={ref} {...shapeProps} onClick={handleClick}>
        {/* Círculo exterior del radio button */}
        <Circle
          x={radius}
          y={radius}
          radius={radius}
          stroke="black"
          strokeWidth={2}
          fill="none"
        />

        {/* Círculo interior del radio button (checked) */}
        <Circle
          x={radius}
          y={radius}
          radius={radius * 0.5}
          fill="black"
        />

        {/* Texto */}
        <Text
          x={radius * 2 + 10}
          y={radius * 0.5}
          text="Select me!"
          fontFamily="Comic Sans MS, cursive"
          fontSize={radius * 0.8}
          fill="black"
          verticalAlign="middle"
        />
      </Group>
    );
  }
);

export default RadioButtonShape;

About styling we will create a separate task to extract common styles for all components (e.g. font used)

Lemoncode / quickmock

Create Radio Button for konva component #22