feat: create generic SelectSizeV2 component that manages both icon and file tree shapes, add selectSizeV2 to properties pod

Author: gustedeveloper

src/pods/properties/components/select-size/index.ts

@@ -1 +1,2 @@
 export * from './select-size.component';
+export * from './select-size-v2';

src/pods/properties/components/select-size/select-size-v2/index.ts

@@ -0,0 +1 @@
+export * from './select-size-v2.component';

src/pods/properties/components/select-size/select-size-v2/select-size-v2.component.module.css

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.container :first-child {
+  flex: 1;
+}
+
+.range {
+  cursor: pointer;
+  width: 60px;
+  height: var(--space-lg);
+}
+
+.size {
+  width: 10px;
+  padding: 0 var(--space-md) 0 var(--space-s);
+}

src/pods/properties/components/select-size/select-size-v2/select-size-v2.component.tsx

@@ -0,0 +1,40 @@
+import { ElementSize, ShapeType } from '@/core/model';
+import classes from './select-size-v2.component.module.css';
+import { sizeToStep, stepToSize } from './select-size.utils';
+import { getSizeConfigForShape } from '@/pods/canvas/model/shape-other-props.utils';
+
+interface Props {
+  label: string;
+  shapeType?: ShapeType;
+  value: string;
+  onChange: (value: ElementSize) => void;
+}
+
+export const SelectSizeV2: React.FC<Props> = ({
+  label,
+  shapeType,
+  value,
+  onChange,
+}) => {
+  if (!shapeType) return null;
+
+  const config = getSizeConfigForShape(shapeType);
+
+  if (!config) return null;
+
+  return (
+    <div className={classes.container}>
+      <p>{label}</p>
+      <input
+        type="range"
+        min={1}
+        max={config.availableSizes.length}
+        step={1}
+        value={sizeToStep(config, value)}
+        onChange={e => onChange(stepToSize(config, e.target.value))}
+        className={classes.range}
+      />
+      <p className={classes.size}>{value}</p>
+    </div>
+  );
+};

src/pods/properties/components/select-size/select-size-v2/select-size.utils.ts

@@ -0,0 +1,11 @@
+import { ElementSize, SizeConfig } from '@/core/model';
+
+export const sizeToStep = (config: SizeConfig, size: string): string => {
+  const index = config.availableSizes.indexOf(size as ElementSize);
+  return index >= 0 ? (index + 1).toString() : '1';
+};
+
+export const stepToSize = (config: SizeConfig, step: string): ElementSize => {
+  const index = parseInt(step) - 1;
+  return config.availableSizes[index] || config.availableSizes[0];
+};

src/pods/properties/properties.pod.tsx

@@ -3,7 +3,13 @@ import classes from './properties.pod.module.css';
 import { ZIndexOptions } from './components/zindex/zindex-option.component';
 import { ColorPicker } from './components/color-picker/color-picker.component';
 import { Checked } from './components/checked/checked.component';
-import { SelectSize, SelectIcon, BorderRadius, Disabled } from './components';
+import {
+  SelectSize,
+  SelectIcon,
+  BorderRadius,
+  Disabled,
+  SelectSizeV2,
+} from './components';
 import { StrokeStyle } from './components/stroke-style/stroke.style.component';
 import { ImageSrc } from './components/image-src/image-selector.component';
 import { ImageBlackAndWhite } from './components/image-black-and-white/image-black-and-white-selector.component';
@@ -145,6 +151,23 @@ export const PropertiesPod = () => {
             }
           />
         </ShowProp>
+
+        <ShowProp
+          singleSelection={isSingleSelection}
+          multipleSelectionPropsInCommon={multipleSelectionPropsInCommon}
+          propKey="size"
+          propValue={selectedShapeData?.otherProps?.size}
+        >
+          <SelectSizeV2
+            label="Size"
+            shapeType={selectedShapeData?.type}
+            value={selectedShapeData?.otherProps?.size ?? ''}
+            onChange={size =>
+              updateOtherPropsOnSelected('size', size, isMultipleSelection)
+            }
+          />
+        </ShowProp>
+
         <ShowProp
           singleSelection={isSingleSelection}
           multipleSelectionPropsInCommon={multipleSelectionPropsInCommon}