From c29fa0242f7e8e7b3b2daa89c9b05e96867acc83 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Wed, 28 Feb 2024 11:39:19 -0800
Subject: [PATCH] Updating images and columns sidebars. Adding width/height to
 block-image. (#35)

---
 packages/block-image/package.json             |  2 +-
 packages/block-image/src/index.tsx            |  9 +++++
 .../ColumnsContainerSidebarPanel.tsx          | 40 ++++++++++++++++++-
 .../input-panels/ImageSidebarPanel.tsx        | 16 +++++++-
 .../helpers/inputs/TextDimensionInput.tsx     | 33 +++++++++++++++
 5 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextDimensionInput.tsx

diff --git a/packages/block-image/package.json b/packages/block-image/package.json
index 608b65e..1f90ffa 100644
--- a/packages/block-image/package.json
+++ b/packages/block-image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@usewaypoint/block-image",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "@usewaypoint/document compatible Image component",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/block-image/src/index.tsx b/packages/block-image/src/index.tsx
index e0dcbb8..36001ac 100644
--- a/packages/block-image/src/index.tsx
+++ b/packages/block-image/src/index.tsx
@@ -29,6 +29,8 @@ export const ImagePropsSchema = z.object({
     .nullable(),
   props: z
     .object({
+      width: z.number().optional().nullable(),
+      height: z.number().optional().nullable(),
       url: z.string().optional().nullable(),
       alt: z.string().optional().nullable(),
       linkHref: z.string().optional().nullable(),
@@ -48,11 +50,18 @@ export function Image({ style, props }: ImageProps) {
   };
 
   const linkHref = props?.linkHref ?? null;
+  const width = props?.width ?? undefined;
+  const height = props?.height ?? undefined;
+
   const imageElement = (
     <img
       alt={props?.alt ?? ''}
       src={props?.url ?? ''}
+      width={width}
+      height={height}
       style={{
+        width,
+        height,
         outline: 'none',
         border: 'none',
         textDecoration: 'none',
diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx
index d1fbad2..9cb1931 100644
--- a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx
+++ b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx
@@ -1,5 +1,11 @@
 import React, { useState } from 'react';
 
+import {
+  SpaceBarOutlined,
+  VerticalAlignBottomOutlined,
+  VerticalAlignCenterOutlined,
+  VerticalAlignTopOutlined,
+} from '@mui/icons-material';
 import { ToggleButton } from '@mui/material';
 
 import ColumnsContainerPropsSchema, {
@@ -8,6 +14,7 @@ import ColumnsContainerPropsSchema, {
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import RadioGroupInput from './helpers/inputs/RadioGroupInput';
+import SliderInput from './helpers/inputs/SliderInput';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';
 
 type ColumnsContainerPanelProps = {
@@ -30,7 +37,7 @@ export default function ColumnsContainerPanel({ data, setData }: ColumnsContaine
     <BaseSidebarPanel title="Columns block">
       <RadioGroupInput
         label="Number of columns"
-        defaultValue={data.props.columnsCount === 2 ? '2' : '3'}
+        defaultValue={data.props?.columnsCount === 2 ? '2' : '3'}
         onChange={(v) => {
           updateData({ ...data, props: { ...data.props, columnsCount: v === '2' ? 2 : 3 } });
         }}
@@ -38,8 +45,37 @@ export default function ColumnsContainerPanel({ data, setData }: ColumnsContaine
         <ToggleButton value="2">2</ToggleButton>
         <ToggleButton value="3">3</ToggleButton>
       </RadioGroupInput>
+      <SliderInput
+        label="Columns gap"
+        iconLabel={<SpaceBarOutlined sx={{ color: 'text.secondary' }} />}
+        units="px"
+        step={4}
+        marks
+        min={0}
+        max={80}
+        defaultValue={data.props?.columnsGap ?? 0}
+        onChange={(columnsGap) => updateData({ ...data, props: { ...data.props, columnsGap } })}
+      />
+      <RadioGroupInput
+        label="Alignment"
+        defaultValue={data.props?.contentAlignment ?? 'middle'}
+        onChange={(contentAlignment) => {
+          updateData({ ...data, props: { ...data.props, contentAlignment } });
+        }}
+      >
+        <ToggleButton value="top">
+          <VerticalAlignTopOutlined fontSize="small" />
+        </ToggleButton>
+        <ToggleButton value="middle">
+          <VerticalAlignCenterOutlined fontSize="small" />
+        </ToggleButton>
+        <ToggleButton value="bottom">
+          <VerticalAlignBottomOutlined fontSize="small" />
+        </ToggleButton>
+      </RadioGroupInput>
+
       <MultiStylePropertyPanel
-        names={['backgroundColor', 'borderColor', 'borderRadius', 'padding']}
+        names={['backgroundColor', 'padding']}
         value={data.style}
         onChange={(style) => updateData({ ...data, style })}
       />
diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx
index bdf2259..ff36cbc 100644
--- a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx
+++ b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx
@@ -5,11 +5,12 @@ import {
   VerticalAlignCenterOutlined,
   VerticalAlignTopOutlined,
 } from '@mui/icons-material';
-import { ToggleButton } from '@mui/material';
+import { Stack, ToggleButton } from '@mui/material';
 import { ImageProps, ImagePropsSchema } from '@usewaypoint/block-image';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import RadioGroupInput from './helpers/inputs/RadioGroupInput';
+import TextDimensionInput from './helpers/inputs/TextDimensionInput';
 import TextInput from './helpers/inputs/TextInput';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';
 
@@ -32,6 +33,19 @@ export default function ImageSidebarPanel({ data, setData }: ImageSidebarPanelPr
 
   return (
     <BaseSidebarPanel title="Image block">
+      <Stack direction="row" spacing={2}>
+        <TextDimensionInput
+          label="Width"
+          defaultValue={30}
+          onChange={(width) => updateData({ ...data, props: { ...data.props, width } })}
+        />
+        <TextDimensionInput
+          label="Height"
+          defaultValue={30}
+          onChange={(height) => updateData({ ...data, props: { ...data.props, height } })}
+        />
+      </Stack>
+
       <RadioGroupInput
         label="Alignment"
         defaultValue={data.props?.contentAlignment ?? 'middle'}
diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextDimensionInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextDimensionInput.tsx
new file mode 100644
index 0000000..bbbe831
--- /dev/null
+++ b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextDimensionInput.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { TextField, Typography } from '@mui/material';
+
+type TextDimensionInputProps = {
+  label: string;
+  defaultValue: number | null | undefined;
+  onChange: (v: number | null) => void;
+};
+export default function TextDimensionInput({ label, defaultValue, onChange }: TextDimensionInputProps) {
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (ev) => {
+    const value = parseInt(ev.target.value);
+    onChange(isNaN(value) ? null : value);
+  };
+  return (
+    <TextField
+      fullWidth
+      onChange={handleChange}
+      defaultValue={defaultValue}
+      label={label}
+      variant="standard"
+      placeholder="auto"
+      size="small"
+      InputProps={{
+        endAdornment: (
+          <Typography variant="body2" color="text.secondary">
+            px
+          </Typography>
+        ),
+      }}
+    />
+  );
+}