From 76a2c133b3441cce9e418b9a39aa8808ca62e6ac Mon Sep 17 00:00:00 2001
From: Philzen <Philzen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 13:21:16 +0100
Subject: [PATCH] Add full typing OOTB for all cell components

---
 .../generate/cell/templates/cell.tsx.template | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/cli/src/commands/generate/cell/templates/cell.tsx.template b/packages/cli/src/commands/generate/cell/templates/cell.tsx.template
index e5d2ce24f31b..2d892c6145b3 100644
--- a/packages/cli/src/commands/generate/cell/templates/cell.tsx.template
+++ b/packages/cli/src/commands/generate/cell/templates/cell.tsx.template
@@ -1,8 +1,9 @@
 import type { ${operationName}, ${operationName}Variables } from 'types/graphql'
 
 import type {
-  CellSuccessProps,
   CellFailureProps,
+  CellLoadingProps,
+  CellSuccessProps,
   TypedDocumentNode,
 } from '@redwoodjs/web'
 
@@ -17,18 +18,22 @@ export const QUERY: TypedDocumentNode<
   }
 `
 
-export const Loading = () => <div>Loading...</div>
+export const Loading: React.FC<
+  CellLoadingProps<<${operationName}Variables>
+> = () => <div>Loading...</div>
 
-export const Empty = () => <div>Empty</div>
+export const Empty: React.FC<
+  CellSuccessProps<${operationName}Variables>
+> = () => <div>Empty</div>
 
-export const Failure = ({
-  error,
-}: CellFailureProps<${operationName}Variables>) => (
+export const Failure: React.FC<
+  CellFailureProps<${operationName}Variables>
+> = ({ error }) => (
   <div style={{ color: 'red' }}>Error: {error?.message}</div>
 )
 
-export const Success = ({
-  ${camelName},
-}: CellSuccessProps<${operationName}, ${operationName}Variables>) => {
+export const Success: React.FC<
+  CellSuccessProps<${operationName}, ${operationName}Variables>
+> = ({ ${camelName} }) => {
   return <div>{JSON.stringify(${camelName})}</div>
 }