Feature/#36 canvas size dialog

package.json

@@ -13,6 +13,11 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@lemoncode/fonk": "^1.5.4",
+    "@lemoncode/fonk-formik": "^4.0.1",
+    "@lemoncode/fonk-is-number-validator": "^1.1.2",
+    "@lemoncode/fonk-min-number-validator": "^1.2.0",
+    "formik": "^2.4.5",
     "immer": "^10.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

src/common/components/forms/index.ts

@@ -0,0 +1 @@
+export * from './input-formik.component';

src/common/components/forms/input-formik.component.module.css

@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.label {
+  font-size: 60%;
+}
+
+.error {
+  color: red;
+  font-size: 60%;
+  margin-bottom: 5px;
+}

src/common/components/forms/input-formik.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useField } from 'formik';
+import classes from './input-formik.component.module.css';
+
+// We inherit HTML input props and add an optional label prop
+interface InputFormikProps
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  label?: string;
+}
+
+// Input props, we got this value by double clicking on a input element
+// and going to definition (d.ts)
+export const InputFormik: React.FC<InputFormikProps> = props => {
+  const { label } = props;
+  // useField allows us to extract all formik metadata about that field
+  const [field, meta] = useField(props.name ?? '');
+  // If the field doesn't exist then treat this as a normal input
+  const inputFieldProps = Boolean(field) ? field : props;
+  // We only want to display the field validation error message
+  // if Formik is enabled, and is the field has been touched
+  // not a very good UX experience to show a blank form full
+  // of error a the initial state
+  const hasError = Boolean(meta && meta.touched && meta.error);
+
+  return (
+    <div className={classes.container}>
+      {label ? <span>{label}</span> : null}
+      <input
+        {...props}
+        name={inputFieldProps.name}
+        onChange={inputFieldProps.onChange}
+        onBlur={inputFieldProps.onBlur}
+        value={inputFieldProps.value}
+        style={{ width: '100%' }}
+      />
+      <span className={classes.error}>{hasError ? meta.error : ''}</span>
+    </div>
+  );
+};

src/core/model/index.ts

@@ -1,3 +1,8 @@
+export interface Size {
+  width: number;
+  height: number;
+}
+
 export interface Coords {
   x: number;
   y: number;

src/core/providers/canvas-view-settings/canvas-view-settings.model.ts

@@ -1,7 +1,4 @@
-export interface Size {
-  width: number;
-  height: number;
-}
+import { Size } from '@/core/model';
 
 export interface CanvasViewSettingsModel {
   canvasSize: Size;
@@ -15,6 +12,7 @@ export const createInitialSettings = () => ({
 
 export interface CanvasViewSettingsContextModel {
   canvasViewSettings: CanvasViewSettingsModel;
+  setCanvasSize: (canvasSize: Size) => void;
   zoomIn: () => void;
   zoomOut: () => void;
 }

src/core/providers/canvas-view-settings/canvas-view-settings.provider.tsx

@@ -4,6 +4,7 @@ import {
   createInitialSettings,
 } from './canvas-view-settings.model';
 import { CanvasViewSettingsContext } from './canvas-view-settings.context';
+import { Size } from '@/core/model';
 
 interface Props {
   children: React.ReactNode;
@@ -26,9 +27,16 @@ export const CanvasViewSettingsProvider: React.FC<Props> = props => {
       zoomFactor: canvasViewSettings.zoomFactor * 1.1,
     });
 
+  const setCanvasSize = (canvasSize: Size) => {
+    setCanvasViewSettings({
+      ...canvasViewSettings,
+      canvasSize,
+    });
+  };
+
   return (
     <CanvasViewSettingsContext.Provider
-      value={{ canvasViewSettings, zoomIn, zoomOut }}
+      value={{ canvasViewSettings, zoomIn, zoomOut, setCanvasSize }}
     >
       {children}
     </CanvasViewSettingsContext.Provider>

src/pods/canvas-settings/canvas-settings.pod.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}