Standardize recipe props

.vscode/settings.json

@@ -8,6 +8,7 @@
     "Astia",
     "authjs",
     "camelcase",
+    "CLAR",
     "cloudflarestorage",
     "cmdk",
     "Consolas",

app/admin/recipes/[recipe]/edit/page.tsx

@@ -45,7 +45,7 @@ export default async function RecipePageEdit({
       accessory={recipeData && film &&
         <AdminShowRecipeButton
           title={recipe}
-          recipe={recipeData}
+          data={recipeData}
           film={film}
         />
       }

src/admin/AdminShowRecipeButton.tsx

@@ -1,20 +1,11 @@
 'use client';
 
 import LoaderButton from '@/components/primitives/LoaderButton';
-import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
+import { RecipeProps } from '@/recipe';
-import { FujifilmSimulation } from '@/platforms/fujifilm/simulation';
 import { useAppState } from '@/state/AppState';
 import { TbChecklist } from 'react-icons/tb';
 
-export default function AdminShowRecipeButton({
+export default function AdminShowRecipeButton(props: RecipeProps) {
-  title,
-  recipe,
-  film,
-}: {
-  title: string
-  recipe: FujifilmRecipe
-  film: FujifilmSimulation
-}) {
   const { setRecipeModalProps } = useAppState();
 
   return (
@@ -23,11 +14,7 @@ export default function AdminShowRecipeButton({
         size={17}
         className="translate-y-[1px]"
       />}
-      onClick={() => setRecipeModalProps?.({
+      onClick={() => setRecipeModalProps?.(props)}
-        title,
-        recipe,
-        film,
-      })}
     >
         Preview
     </LoaderButton>

src/image-response/RecipeImageResponse.tsx

@@ -34,7 +34,7 @@ export default function RecipeImageResponse({
 
   let recipeLines = recipeData && film
     ? generateRecipeText({
-      recipe: recipeData,
+      data: recipeData,
       film,
     }, true)
     : [];

src/photo/PhotoLarge.tsx

@@ -229,7 +229,7 @@ export default function PhotoLarge({
               <PhotoRecipeOverlay
                 ref={refRecipe}
                 title={photo.recipeTitle}
-                recipe={photo.recipeData}
+                data={photo.recipeData}
                 film={photo.film}
                 iso={photo.isoFormatted}
                 exposure={photo.exposureCompensationFormatted}

src/recipe/PhotoRecipeOverlay.tsx

@@ -24,7 +24,7 @@ import { labelForFilm } from '@/film';
 export default function PhotoRecipeOverlay({
   ref,
   title,
-  recipe,
+  data,
   film,
   onClose,
 }: RecipeProps & {
@@ -43,9 +43,9 @@ export default function PhotoRecipeOverlay({
     colorChromeFXBlue,
     bwAdjustment,
     bwMagentaGreen,
-  } = recipe;
+  } = data;
 
-  const whiteBalanceTypeFormatted = formatWhiteBalance(recipe);
+  const whiteBalanceTypeFormatted = formatWhiteBalance(data);
 
   const renderDataSquare = (
     value: ReactNode,
@@ -122,7 +122,7 @@ export default function PhotoRecipeOverlay({
           label={`${title
             ? `${formatRecipe(title).toLocaleUpperCase()} recipe`
             : 'Recipe'}`}
-          text={generateRecipeText({ title, recipe, film }).join('\n')}
+          text={generateRecipeText({ title, data, film }).join('\n')}
           iconSize={17}
           className={clsx(
             'translate-y-[0.5px]',
@@ -171,7 +171,7 @@ export default function PhotoRecipeOverlay({
           'col-span-8',
         )}
         {renderDataSquare(
-          formatNoiseReduction(recipe),
+          formatNoiseReduction(data),
           'ISO NR',
           'col-span-4',
         )}
@@ -195,7 +195,7 @@ export default function PhotoRecipeOverlay({
         )}
         {/* ROW */}
         {renderDataSquare(
-          formatGrain(recipe),
+          formatGrain(data),
           'grain',
           'col-span-6',
         )}

src/recipe/RecipeHeader.tsx

@@ -35,7 +35,7 @@ export default function RecipeHeader({
           photo?.film
         ) ? setRecipeModalProps?.({
             title: photo.recipeTitle,
-            recipe: photo.recipeData,
+            data: photo.recipeData,
             film: photo.film,
             iso: photo.isoFormatted,
             exposure: photo.exposureTimeFormatted,

src/recipe/index.ts

@@ -18,7 +18,7 @@ export type Recipes = RecipeWithCount[]
 
 export interface RecipeProps {
   title?: string
-  recipe: FujifilmRecipe
+  data: FujifilmRecipe
   film: string
   iso?: string
   exposure?: string   
@@ -55,7 +55,7 @@ export const descriptionForRecipePhotos = (
 
 export const generateRecipeText = ({
   title,
-  recipe,
+  data,
   film,
 }: RecipeProps,
 abbreviate?: boolean,
@@ -63,53 +63,51 @@ abbreviate?: boolean,
   const lines = [
     `${labelForFilm(film).small.toLocaleUpperCase()}`,
     // eslint-disable-next-line max-len
-    `${formatWhiteBalance(recipe).toLocaleUpperCase()} ${formatWhiteBalanceColor(recipe)}`,
+    `${formatWhiteBalance(data).toLocaleUpperCase()} ${formatWhiteBalanceColor(data)}`,
   ];
 
   if (abbreviate) {
     // eslint-disable-next-line max-len
-    lines.push(`DR${recipe.dynamicRange.development} NR${formatNoiseReduction(recipe)}`);
+    lines.push(`DR${data.dynamicRange.development} NR${formatNoiseReduction(data)}`);
   } else {
     lines.push(
-      `DYNAMIC RANGE ${recipe.dynamicRange.development}`,
+      `DYNAMIC RANGE ${data.dynamicRange.development}`,
-      `NOISE REDUCTION ${formatNoiseReduction(recipe)}`,
+      `NOISE REDUCTION ${formatNoiseReduction(data)}`,
     );
   }
 
-  if (recipe.highlight || recipe.shadow) {
+  if (data.highlight || data.shadow) {
     lines.push(abbreviate
-      ? `HIGH${addSign(recipe.highlight)} SHAD${addSign(recipe.shadow)}`
+      ? `HIGH${addSign(data.highlight)} SHAD${addSign(data.shadow)}`
-      // eslint-disable-next-line max-len
+      : `HIGHLIGHT ${addSign(data.highlight)} SHADOW ${addSign(data.shadow)}`,
-      : `HIGHLIGHT ${addSign(recipe.highlight)} SHADOW ${addSign(recipe.shadow)}`,
     );
   }
   lines.push(abbreviate
     // eslint-disable-next-line max-len
-    ? `COL${addSign(recipe.color)} SHARP${addSign(recipe.sharpness)} CLAR${addSign(recipe.clarity)}`
+    ? `COL${addSign(data.color)} SHARP${addSign(data.sharpness)} CLAR${addSign(data.clarity)}`
     // eslint-disable-next-line max-len
-    : `COLOR ${addSign(recipe.color)} SHARPEN ${addSign(recipe.sharpness)} CLARITY ${addSign(recipe.clarity)}`,
+    : `COLOR ${addSign(data.color)} SHARPEN ${addSign(data.sharpness)} CLARITY ${addSign(data.clarity)}`,
   );
-  if (recipe.colorChromeEffect) {
+  if (data.colorChromeEffect) {
     lines.push(abbreviate
-      ? `CHROME ${recipe.colorChromeEffect.toLocaleUpperCase()}`
+      ? `CHROME ${data.colorChromeEffect.toLocaleUpperCase()}`
-      : `COLOR CHROME ${recipe.colorChromeEffect.toLocaleUpperCase()}`,
+      : `COLOR CHROME ${data.colorChromeEffect.toLocaleUpperCase()}`,
     );
   }
-  if (recipe.colorChromeFXBlue) {
+  if (data.colorChromeFXBlue) {
     lines.push(abbreviate
-      ? `FX BLUE ${recipe.colorChromeFXBlue.toLocaleUpperCase()}`
+      ? `FX BLUE ${data.colorChromeFXBlue.toLocaleUpperCase()}`
-      : `CHROME FX BLUE ${recipe.colorChromeFXBlue.toLocaleUpperCase()}`,
+      : `CHROME FX BLUE ${data.colorChromeFXBlue.toLocaleUpperCase()}`,
     );
   }
-  if (recipe.grainEffect.roughness !== 'off') {
+  if (data.grainEffect.roughness !== 'off') {
-    lines.push(`GRAIN ${formatGrain(recipe, abbreviate)}`);
+    lines.push(`GRAIN ${formatGrain(data, abbreviate)}`);
   }
-  if (recipe.bwAdjustment || recipe.bwMagentaGreen) {
+  if (data.bwAdjustment || data.bwMagentaGreen) {
     lines.push(abbreviate
+      ? `BW ADJ${addSign(data.bwAdjustment)} M/G${addSign(data.bwMagentaGreen)}`
       // eslint-disable-next-line max-len
-      ? `BW ADJ${addSign(recipe.bwAdjustment)} M/G${addSign(recipe.bwMagentaGreen)}`
+      : `BW ADJUSTMENT ${addSign(data.bwAdjustment)} MAGENTA/GREEN ${addSign(data.bwMagentaGreen)}`,
-      // eslint-disable-next-line max-len
-      : `BW ADJUSTMENT ${addSign(recipe.bwAdjustment)} MAGENTA/GREEN ${addSign(recipe.bwMagentaGreen)}`,
     );
   }