Merge pull request #36 from pkolt/34-add-select-all-button-in-export-…

…json-dialog

34-add-select-all-button-in-export-json-dialog

.git-hooks/pre-commit

@@ -1,2 +1 @@
- #!/bin/sh
-npm run lint-all && npm test
+npm run pre-commit

package.json

@@ -17,7 +17,8 @@
     "knip": "knip --production",
     "lint-all": "npm run check-ts && npm run eslint && npm run format && npm run knip",
     "lint-all-fix": "npm run eslint-fix && npm run format-fix",
-    "prepare": "git config core.hooksPath .git-hooks"
+    "prepare": "git config core.hooksPath .git-hooks",
+    "pre-commit": "npm run lint-all && npm test"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",

src/components/BitmapEditor/components/ExportDialog/index.tsx

@@ -16,7 +16,7 @@ interface ExportDialogProps {
   onClose: () => void;
 }
 
-interface FormData {
+interface FormValues {
   name: string;
   bitOrder: BitOrder;
   sizeFormat: SizeFormat;
@@ -25,7 +25,7 @@ interface FormData {
   progmem: boolean;
 }
 
-const defaultValues: FormData = {
+const defaultValues: FormValues = {
   name: '',
   bitOrder: BitOrder.BigEndian,
   sizeFormat: SizeFormat.Defines,
@@ -38,17 +38,17 @@ export const ExportDialog = ({ bitmapId, area, onClose }: ExportDialogProps): JS
   const { findBitmap: findBitmap } = useBitmapStore();
   const bitmapEntity = findBitmap(bitmapId);
 
-  const methods = useForm<FormData>({
+  const methods = useForm<FormValues>({
     mode: 'onChange',
     defaultValues: { ...defaultValues, name: bitmapEntity?.name ?? '' },
   });
 
   const { register, handleSubmit, watch } = methods;
 
-  const formData = watch();
+  const formValues = watch();
   const exportCode = useMemo<string>(
-    () => (bitmapEntity ? exportBitmap({ bitmapEntity, area, ...formData }) : ''),
-    [area, bitmapEntity, formData],
+    () => (bitmapEntity ? exportBitmap({ bitmapEntity, area, ...formValues }) : ''),
+    [area, bitmapEntity, formValues],
   );
 
   const handleCopy = () => {

src/components/BitmapEditor/components/GridDialog/index.tsx

@@ -18,11 +18,11 @@ interface GridDialogProps {
   onClose: () => void;
 }
 
-type FormData = GridSettings;
+type FormValues = GridSettings;
 
 export const GridDialog = ({ onClose }: GridDialogProps): JSX.Element | null => {
   const { grid, setGrid } = useSettingsStore();
-  const methods = useForm<FormData>({
+  const methods = useForm<FormValues>({
     mode: 'onChange',
     defaultValues: grid,
   });
@@ -33,7 +33,7 @@ export const GridDialog = ({ onClose }: GridDialogProps): JSX.Element | null =>
     formState: { isValid },
   } = methods;
 
-  const onSubmit = (data: FormData) => {
+  const onSubmit = (data: FormValues) => {
     setGrid(data);
   };
 

src/components/BitmapEditor/components/RenameDialog/index.tsx

@@ -8,14 +8,14 @@ interface RenameDialogProps {
   onClose: () => void;
 }
 
-interface FormData {
+interface FormValues {
   name: string;
 }
 
 export const RenameDialog = ({ bitmapId, onClose }: RenameDialogProps): JSX.Element | null => {
   const { findBitmap, changeBitmap } = useBitmapStore();
   const bitmapEntity = findBitmap(bitmapId);
-  const methods = useForm<FormData>({
+  const methods = useForm<FormValues>({
     mode: 'onChange',
     defaultValues: { name: bitmapEntity?.name },
   });
@@ -26,7 +26,7 @@ export const RenameDialog = ({ bitmapId, onClose }: RenameDialogProps): JSX.Elem
     formState: { isValid, isDirty },
   } = methods;
 
-  const onSubmit = (data: FormData) => {
+  const onSubmit = (data: FormValues) => {
     if (bitmapEntity) {
       changeBitmap(bitmapId, { name: data.name });
     }

src/components/BitmapEditor/components/ResizeDialog/index.tsx

@@ -5,7 +5,7 @@ import { Bitmap } from '@/utils/bitmap/Bitmap';
 import { useCallback } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-interface FormData {
+interface FormValues {
   width: number;
   height: number;
 }
@@ -17,7 +17,7 @@ interface ResizeDialogProps {
 }
 
 export const ResizeDialog = ({ bitmap, onChangeBitmap, onClose }: ResizeDialogProps): JSX.Element | null => {
-  const methods = useForm<FormData>({
+  const methods = useForm<FormValues>({
     mode: 'onChange',
     defaultValues: { width: bitmap.width, height: bitmap.height },
   });
@@ -34,7 +34,7 @@ export const ResizeDialog = ({ bitmap, onChangeBitmap, onClose }: ResizeDialogPr
 
   const onReset = useCallback(() => reset(defaultValues), [defaultValues, reset]);
 
-  const onSubmit = ({ width, height }: FormData) => {
+  const onSubmit = ({ width, height }: FormValues) => {
     const clonedBitmap = bitmap.clone();
     clonedBitmap.resize(width, height);
     onChangeBitmap(clonedBitmap);

src/components/SelectBitmap/index.tsx

@@ -0,0 +1,37 @@
+import { BitmapEntity } from '@/utils/bitmap/types';
+import { CheckBox } from '../CheckBox';
+import { useCallback, useMemo } from 'react';
+import { isEqualArrays } from './utils';
+import { useFormContext } from 'react-hook-form';
+
+interface SelectBitmapProps {
+  name: string;
+  bitmaps: BitmapEntity[];
+  className?: string;
+}
+
+export const SelectBitmap = ({ name, bitmaps, className }: SelectBitmapProps) => {
+  const { watch, setValue, register } = useFormContext();
+
+  const selectedIds = watch(name);
+  const allIds = useMemo(() => bitmaps.map((it) => it.id), [bitmaps]);
+  const isSelectedAll = isEqualArrays(selectedIds, allIds);
+  const toggleSelectAll = useCallback(() => {
+    setValue(name, isSelectedAll ? [] : allIds);
+  }, [allIds, isSelectedAll, name, setValue]);
+
+  return (
+    <div className={className}>
+      <CheckBox label="Select all" checked={isSelectedAll} onChange={toggleSelectAll} />
+      <hr />
+      {bitmaps.map((it) => (
+        <CheckBox
+          key={it.id}
+          label={`${it.name} (${it.width}x${it.height})`}
+          value={it.id}
+          {...register(name, { required: true })}
+        />
+      ))}
+    </div>
+  );
+};

src/components/SelectBitmap/utils.ts

@@ -0,0 +1,4 @@
+export const isEqualArrays = <T>(arr1: T[], arr2: T[]) => {
+  const merged: T[] = Array.from(new Set([...arr1, ...arr2]));
+  return merged.length > 0 && merged.every((it) => arr1.includes(it) && arr2.includes(it));
+};

src/pages/BitmapList/CopyBitmapDialog/index.tsx

@@ -8,7 +8,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { BitmapEntity } from '@/utils/bitmap/types';
 
-interface FormData {
+interface FormValues {
   name: string;
 }
 
@@ -22,7 +22,7 @@ export const CopyBitmapDialog = ({ bitmapId, onClose }: CopyBitmapDialogProps):
   const { findBitmap, addBitmap } = useBitmapStore();
   const bitmapEntity = findBitmap(bitmapId);
 
-  const methods = useForm<FormData>({
+  const methods = useForm<FormValues>({
     mode: 'onChange',
     defaultValues: {
       name: bitmapEntity?.name,
@@ -35,7 +35,7 @@ export const CopyBitmapDialog = ({ bitmapId, onClose }: CopyBitmapDialogProps):
     formState: { isValid, isDirty },
   } = methods;
 
-  const onSubmit = (data: FormData) => {
+  const onSubmit = (data: FormValues) => {
     if (!bitmapEntity) {
       return;
     }

src/pages/BitmapList/ExportBitmapDialog/index.tsx

@@ -4,11 +4,11 @@ import { Modal } from '@/components/Modal';
 import { useBitmapStore } from '@/store/bitmaps/useBitmapsStore';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useMemo } from 'react';
-import { CheckBox } from '@/components/CheckBox';
 import { convertToBitmapFile } from '@/utils/bitmap/file';
 import { Input } from '@/components/Input';
+import { SelectBitmap } from '@/components/SelectBitmap';
 
-interface FormData {
+interface FormValues {
   name: string;
   ids: string[];
 }
@@ -22,12 +22,12 @@ export const ExportBitmapDialog = ({ bitmapId, onClose }: ExportBitmapDialogProp
   const { findBitmap, bitmaps } = useBitmapStore();
   const bitmapEntity = findBitmap(bitmapId);
 
-  const defaultValues = useMemo<FormData>(() => {
+  const defaultValues = useMemo<FormValues>(() => {
     const name = `bitmap_${DateTime.now().toFormat('yyyy_LL_dd_HH_mm')}`;
     return { name, ids: [bitmapId] };
   }, [bitmapId]);
 
-  const methods = useForm<FormData>({
+  const methods = useForm<FormValues>({
     mode: 'onChange',
     defaultValues,
   });
@@ -38,7 +38,7 @@ export const ExportBitmapDialog = ({ bitmapId, onClose }: ExportBitmapDialogProp
     formState: { isValid },
   } = methods;
 
-  const onSubmit = (data: FormData) => {
+  const onSubmit = (data: FormValues) => {
     const entities = bitmaps.filter((it) => data.ids.includes(it.id));
     const blob = convertToBitmapFile(entities);
     const filename = `${data.name}.json`;
@@ -55,16 +55,7 @@ export const ExportBitmapDialog = ({ bitmapId, onClose }: ExportBitmapDialogProp
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(onSubmit)} className="d-flex flex-column gap-3">
           <Input label="Filename" {...register('name', { required: true, minLength: 1 })} />
-          <div>
-            {bitmaps.map((it) => (
-              <CheckBox
-                key={it.id}
-                label={`${it.name} (${it.width}x${it.height})`}
-                value={it.id}
-                {...register('ids', { required: true })}
-              />
-            ))}
-          </div>
+          <SelectBitmap name={'ids' satisfies keyof FormValues} bitmaps={bitmaps} />
           <div className="text-center">
             <button type="submit" className="btn btn-primary" disabled={!isValid}>
               Save as file

src/pages/CreateBitmap/index.tsx

@@ -10,19 +10,19 @@ import { useBitmapStore } from '@/store/bitmaps/useBitmapsStore';
 import { BitmapSizeAlert } from '@/components/BitmapSizeAlert';
 import { Bitmap } from '@/utils/bitmap/Bitmap';
 
-interface FormData {
+interface FormValues {
   name: string;
   width: number;
   height: number;
 }
 
-const defaultValues: FormData = { name: '', width: 128, height: 64 };
+const defaultValues: FormValues = { name: '', width: 128, height: 64 };
 
 const CreateBitmap = () => {
   const navigate = useNavigate();
   const { addBitmap } = useBitmapStore();
 
-  const methods = useForm<FormData>({
+  const methods = useForm<FormValues>({
     mode: 'onChange',
     defaultValues,
   });
@@ -36,7 +36,7 @@ const CreateBitmap = () => {
 
   const bitmapWidth = watch('width');
 
-  const onSubmit = (data: FormData) => {
+  const onSubmit = (data: FormValues) => {
     const id = uuidv4();
     const timestamp = DateTime.now().toMillis();
     const bitmap = new Bitmap(data.width, data.height);

src/pages/ImportFromImage/ImportForm/constants.ts

@@ -1,6 +1,6 @@
-import { ImportFormData } from './types';
+import { FormValues } from './types';
 
-export const defaultValues: ImportFormData = {
+export const defaultValues: FormValues = {
   files: null,
   top: 0,
   left: 0,

src/pages/ImportFromImage/ImportForm/index.tsx

@@ -4,18 +4,18 @@ import { Range } from '@/components/Range';
 import { CheckBox } from '@/components/CheckBox';
 import { BitmapSizeAlert } from '@/components/BitmapSizeAlert';
 import { defaultValues } from './constants';
-import { ImportFormData } from './types';
+import { FormValues } from './types';
 import { useCallback, useEffect } from 'react';
 import { Bitmap } from '@/utils/bitmap/Bitmap';
 import { useEditImage } from './useEditImage';
 
 interface ImportFormProps {
   setBitmap: (value: Bitmap | null) => void;
-  onSubmit: (data: ImportFormData) => void;
+  onSubmit: (data: FormValues) => void;
 }
 
 export const ImportForm = ({ setBitmap, onSubmit }: ImportFormProps) => {
-  const methods = useForm<ImportFormData>({
+  const methods = useForm<FormValues>({
     mode: 'onChange',
     defaultValues,
   });
@@ -39,7 +39,7 @@ export const ImportForm = ({ setBitmap, onSubmit }: ImportFormProps) => {
     onClickAlignBottom,
     onClickAlignVertical,
     onClickFitToImage,
-  } = useEditImage({ data, setBitmap: setBitmap, setFormValue: setValue });
+  } = useEditImage({ values: data, setBitmap: setBitmap, setValue: setValue });
 
   const handleReset = useCallback(() => {
     reset(defaultValues);

src/pages/ImportFromImage/ImportForm/types.ts

@@ -1,4 +1,4 @@
-export interface ImportFormData {
+export interface FormValues {
   files: FileList | null;
   name: string;
   top: number;