fix: preview with invalid values

src/components/form/components/field_groups/svg_text_style.schema.ts

@@ -5,7 +5,7 @@ import { stringToNumberOptional } from '../../utils/validators.ts';
 export const svgTextStyleFieldsSchema = z.object({
   fill: z.string().optional(),
   fontSize: stringToNumberOptional({
-    numSchema: z.int().min(0),
+    numSchema: z.int().min(1),
     parse: (str) => Number.parseInt(str, 10),
   }),
   fontStyle: z.enum(['normal', 'italic']).optional(),

src/components/form/components/field_groups/svg_text_style.tsx

@@ -47,7 +47,7 @@ export const FieldGroupSVGTextStyleFields = withFieldGroup({
           {(field) => <field.ColorPicker label="Color" />}
         </group.AppField>
         <group.AppField name="fontSize">
-          {(field) => <field.NumericInput label="Font size" />}
+          {(field) => <field.NumericInput label="Font size" min={1} />}
         </group.AppField>
         <FormGroup label="Font style">
           <TextStyleSwitchContainer>
@@ -100,15 +100,37 @@ const TextStyleFieldPreviewContainer = styled.div`
   min-height: 30px;
 `;
 
-interface TextStyleFieldPreviewProps extends SvgTextStyleFields {
+const TextStyleFieldPreviewErrorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: oklch(98% 0.016 73.684deg);
+  color: oklch(55.3% 0.195 38.402deg);
+  border-radius: 6px;
+  padding: 10px;
+
+  & > ul > li {
+    margin-left: 30px;
+    list-style: disc;
+  }
+
+  & > p {
+    font-weight: 600;
+    color: oklch(47% 0.157 37.304deg);
+  }
+`;
+
+interface RenderTextStyleFieldPreviewProps {
   children?: ReactNode;
+  values: {
+    fill?: string | undefined;
+    fontSize?: number | undefined;
+    fontStyle?: 'normal' | 'italic' | undefined;
+    fontWeight?: 'bold' | 'normal' | undefined;
+  };
 }
 
-const TextStyleFieldPreview = memo(function TextStyleFieldPreview(
-  props: TextStyleFieldPreviewProps,
-) {
-  const parsedValues = svgTextStyleFieldsSchema.parse(props);
-  const fontSize = parsedValues.fontSize ?? 16;
+function RenderTextStyleFieldPreview(props: RenderTextStyleFieldPreviewProps) {
+  const fontSize = props.values.fontSize ?? 16;
   const svgHeight = Math.round(fontSize * 1.5);
   const textY = Math.round(svgHeight / 4);
 
@@ -119,18 +141,50 @@ const TextStyleFieldPreview = memo(function TextStyleFieldPreview(
           dominantBaseline="hanging"
           x={0}
           y={textY}
-          {...parsedValues}
+          {...props.values}
         >
           {props.children}
         </SVGStyledText>
       </svg>
     </TextStyleFieldPreviewContainer>
   );
+}
+
+interface TextStyleFieldPreviewProps extends SvgTextStyleFields {
+  children?: ReactNode;
+}
+
+const TextStyleFieldPreview = memo(function TextStyleFieldPreview(
+  props: TextStyleFieldPreviewProps,
+) {
+  const safeResult = svgTextStyleFieldsSchema.safeParse(props);
+
+  if (!safeResult.success) {
+    return (
+      <TextStyleFieldPreviewErrorContainer>
+        <p>Cannot render preview with invalid values</p>
+        <ul>
+          {safeResult.error.issues.map((error) => (
+            <li key={`${error.path.join('.')}-${error.code}`}>
+              {error.path.join('.')}: ${error.message}
+            </li>
+          ))}
+        </ul>
+      </TextStyleFieldPreviewErrorContainer>
+    );
+  }
+
+  return (
+    <RenderTextStyleFieldPreview values={safeResult.data}>
+      {props.children}
+    </RenderTextStyleFieldPreview>
+  );
 });
 
 const BoldLabel = styled.span`
   font-weight: bold;
 `;
+
 const ItalicLabel = styled.span`
   font-style: italic;
 `;