Merge pull request #374 from Lemoncode/feature/#213-Create-a-badge-component-to-be-placed-under-Rich-Components

feature/#213 Create a badge component to be placed under Rich Components

Author: brauliodiez

public/widgets/chip.svg

@@ -0,0 +1,88 @@
+import { forwardRef } from 'react';
+import { Group, Rect, Text } from 'react-konva';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { CHIP_SHAPE } from '../front-components/shape.const';
+import { ShapeProps } from '../shape.model';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const ChipShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 40,
+  minHeight: 28,
+  maxWidth: -1,
+  maxHeight: 28,
+  defaultWidth: 56,
+  defaultHeight: 28,
+};
+
+export const getChipShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  ChipShapeSizeRestrictions;
+
+const shapeType: ShapeType = 'chip';
+
+export const ChipShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    text,
+    onSelected,
+    otherProps,
+    ...shapeProps
+  } = props;
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    ChipShapeSizeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeigth } = restrictedSize;
+  const { stroke, strokeStyle, fill, textColor } = useShapeProps(
+    otherProps,
+    CHIP_SHAPE
+  );
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Rect
+        x={0}
+        y={0}
+        width={restrictedWidth + CHIP_SHAPE.DEFAULT_STROKE_WIDTH * 2}
+        height={restrictedHeigth}
+        fill={fill}
+        stroke={stroke}
+        dash={strokeStyle}
+        strokeWidth={CHIP_SHAPE.DEFAULT_STROKE_WIDTH}
+        cornerRadius={CHIP_SHAPE.DEFAULT_CORNER_RADIUS}
+      />
+
+      <Text
+        x={CHIP_SHAPE.DEFAULT_PADDING}
+        y={CHIP_SHAPE.DEFAULT_PADDING - CHIP_SHAPE.DEFAULT_STROKE_WIDTH * 2}
+        width={
+          restrictedWidth -
+          CHIP_SHAPE.DEFAULT_PADDING * 2 -
+          CHIP_SHAPE.DEFAULT_STROKE_WIDTH
+        }
+        text={text}
+        fontFamily={CHIP_SHAPE.DEFAULT_FONT_FAMILY}
+        fontSize={CHIP_SHAPE.DEFAULT_FONT_SIZE}
+        fill={textColor}
+        verticalAlign="middle"
+        align="center"
+        ellipsis={true}
+        wrap="none"
+      />
+    </Group>
+  );
+});

src/common/components/mock-components/front-components/chip-shape.tsx

@@ -15,3 +15,4 @@ export * from './horizontalscrollbar-shape';
 export * from './label-shape';
 export * from './tooltip-shape';
 export * from './slider-shape';
+export * from './chip-shape';

src/common/components/mock-components/front-components/index.ts

@@ -17,6 +17,8 @@ const DEFAULT_FONT_STYLE = 'normal';
 const DEFAULT_TEXT_DECORATION = 'none';
 const DEFAULT_TEXT_ALIGNMENT = 'left';
 const DEFAULT_DISABLED = false;
+const DEFAULT_CORNER_RADIUS_CHIP = 1000;
+const DEFAULT_FONT_SIZE_CHIP = 14;
 
 export interface DefaultStyleShape {
   DEFAULT_CORNER_RADIUS: number;
@@ -135,3 +137,23 @@ export const LINK_SHAPE: DefaultStyleShape = {
   ...BASIC_SHAPE,
   DEFAULT_FILL_TEXT: '#0000FF',
 };
+
+export const CHIP_SHAPE: DefaultStyleShape = {
+  DEFAULT_CORNER_RADIUS: DEFAULT_CORNER_RADIUS_CHIP,
+  DEFAULT_STROKE_COLOR,
+  DEFAULT_STROKE_WIDTH,
+  DEFAULT_FILL_BACKGROUND,
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE: DEFAULT_FONT_SIZE_CHIP,
+  DEFAULT_FILL_TEXT,
+  DEFAULT_PADDING,
+  DEFAULT_LINE_HEIGHT,
+  DEFAULT_TEXT_WIDTH,
+  DEFAULT_TEXT_HEIGHT,
+  DEFAULT_STROKE_STYLE,
+  DEFAULT_FONT_VARIANT,
+  DEFAULT_FONT_STYLE,
+  DEFAULT_TEXT_DECORATION,
+  DEFAULT_TEXT_ALIGNMENT,
+  DEFAULT_DISABLED,
+};

src/common/components/mock-components/front-components/shape.const.ts

@@ -69,6 +69,7 @@ export type ShapeType =
   | 'buttonBar'
   | 'tooltip'
   | 'slider'
+  | 'chip'
   | 'link'
   | 'cilinder'
   | 'richtext'
@@ -136,6 +137,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   buttonBar: 'Button Bar',
   tooltip: 'Tooltip',
   slider: 'Slider',
+  chip: 'Chip',
   richtext: 'Rich Text',
   cilinder: 'Cilinder',
   'loading-indicator': 'Loading',

src/core/model/index.ts

@@ -32,6 +32,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'buttonBar',
   'tabsBar',
   'tooltip',
+  'chip',
   'timepickerinput',
   'datepickerinput',
   'browser',
@@ -74,6 +75,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'buttonBar',
   'tabsBar',
   'link',
+  'chip',
   'timepickerinput',
   'datepickerinput',
   'browser',
@@ -114,6 +116,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   buttonBar: 'Button 1, Button 2, Button 3',
   tabsBar: 'Tab 1, Tab 2, Tab 3',
   link: 'Link',
+  chip: 'Chip',
   timepickerinput: 'hh:mm',
   datepickerinput: new Date().toLocaleDateString(),
   browser: 'https://example.com',

src/pods/canvas/model/inline-editable.model.ts

@@ -253,6 +253,13 @@ export const generateDefaultOtherProps = (
       return {
         activeElement: 0,
       };
+    case 'chip':
+      return {
+        stroke: '#939393',
+        backgroundColor: '#D3D3D3',
+        textColor: '#000000',
+        strokeStyle: [],
+      };
     default:
       return undefined;
   }

src/pods/canvas/model/shape-other-props.utils.ts

@@ -19,6 +19,7 @@ import {
   getToggleSwitchShapeSizeRestrictions,
   getTooltipShapeSizeRestrictions,
   getVerticalScrollBarShapeSizeRestrictions,
+  getChipShapeSizeRestrictions,
 } from '@/common/components/mock-components/front-components';
 import {
   getBrowserWindowShapeSizeRestrictions,
@@ -63,6 +64,7 @@ import {
   getVideoPlayerShapeSizeRestrictions,
   getVideoconferenceShapeSizeRestrictions,
   getGaugeShapeSizeRestrictions,
+
   // other imports
 } from '@/common/components/mock-components/front-rich-components';
 import {
@@ -153,6 +155,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   videoconference: getVideoconferenceShapeSizeRestrictions,
   gauge: getGaugeShapeSizeRestrictions,
   imagePlaceholder: getImagePlaceholderShapeSizeRestrictions,
+  chip: getChipShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;

src/pods/canvas/model/shape-size.mapper.ts

@@ -67,6 +67,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'loading-indicator':
     case 'buttonBar':
     case 'slider':
+    case 'chip':
       return ['middle-left', 'middle-right'];
     case 'verticalLine':
     case 'verticalScrollBar':

src/pods/canvas/model/transformer.model.ts

@@ -19,6 +19,7 @@ import {
   renderVerticalScrollBar,
   renderTooltip,
   renderSlider,
+  renderChip,
 } from './simple-component';
 import {
   renderBrowserWindow,
@@ -203,6 +204,8 @@ export const renderShapeComponent = (
       return renderGauge(shape, shapeRenderedProps);
     case 'imagePlaceholder':
       return renderImagePlaceHolder(shape, shapeRenderedProps);
+    case 'chip':
+      return renderChip(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }