Create Button konva component

[brauliodiez]

Pending on trasnformer implementation to be merged

Create a button konva component

We have got the following input SVG component:

https://github.com/brauliodiez/konba-playground/blob/main/public/widgets/button.svg

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, Rect, Text } from 'react-konva';
import { ShapeConfig } from 'konva/lib/Shape';

interface ButtonShapeProps extends ShapeConfig {
  id: string;
  x: number;
  y: number;
  width: number;
  height: number;
  onSelected: (id: string) => void;
}

export const ButtonShape = forwardRef<any, ButtonShapeProps>(
  ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
    return (
      <Group
        x={x}
        y={y}
        onClick={() => onSelected(id)}
        ref={ref}
        {...shapeProps}
      >
        <Rect
          x={10}
          y={20}
          width={180}
          height={30}
          cornerRadius={10}
          stroke="black"
          strokeWidth={2}
          fill="none"
        />
        <Text
          x={60}
          y={40}
          text="Click Me!"
          fontFamily="Comic Sans MS, cursive"
          fontSize={15}
          fill="black"
        />
      </Group>
    );
  }
);

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