Remove defaultProps from sparkle and front (#5097)

* remove default props from sparkle

* remove defaultProps from font

front/components/assistant/conversation/AssistantEditionMenu.tsx

@@ -27,26 +27,21 @@ import { useAgentConfiguration, useUser } from "@app/lib/swr";
 interface AssistantEditionMenuProps {
   agentConfigurationId: string;
   owner: WorkspaceType;
-  variant: "button" | "plain";
+  variant?: "button" | "plain";
   onAgentDeletion?: () => void;
   tryButton?: boolean;
-  showAddRemoveToList: boolean;
+  showAddRemoveToList?: boolean;
 }
 
-AssistantEditionMenu.defaultProps = {
-  variant: "plain",
-  showAddRemoveToList: false,
-};
-
 export function AssistantEditionMenu({
   // The `agentConfiguration` cannot be used directly as it isn't dynamically
   // updated upon user list mutations. This limitation stems from its
   // propagation method from <ConversationMessage>.
   agentConfigurationId,
   owner,
-  variant,
+  variant = "plain",
   onAgentDeletion,
-  showAddRemoveToList,
+  showAddRemoveToList = false,
   tryButton,
 }: AssistantEditionMenuProps) {
   const [isUpdatingList, setIsUpdatingList] = useState(false);

front/components/assistant/conversation/ConversationMessage.tsx

@@ -84,12 +84,6 @@ export function EmojiSelector({
  * Parent component for both UserMessage and AgentMessage, to ensure avatar,
  * side buttons and spacing are consistent between the two
  */
-
-ConversationMessage.defaultProps = {
-  avatarBusy: false,
-  enableEmojis: true,
-};
-
 export function ConversationMessage({
   owner,
   user,
@@ -100,8 +94,8 @@ export function ConversationMessage({
   pictureUrl,
   buttons,
   reactions,
-  avatarBusy,
-  enableEmojis,
+  avatarBusy = false,
+  enableEmojis = true,
   renderName,
 }: {
   owner: WorkspaceType;
@@ -119,7 +113,7 @@ export function ConversationMessage({
   }[];
   reactions: MessageReactionType[];
   avatarBusy?: boolean;
-  enableEmojis: boolean;
+  enableEmojis?: boolean;
   renderName: (name: string | null) => React.ReactNode;
 }) {
   const { mutate } = useSWRConfig();

sparkle/src/components/ContentMessage.tsx

@@ -21,13 +21,9 @@ export interface ContentMessageProps {
     | "red";
 }
 
-ContentMessage.defaultProps = {
-  variant: "amber" as const,
-};
-
 export function ContentMessage({
   title,
-  variant,
+  variant = "amber",
   children,
   size = "md",
   className = "",

sparkle/src/components/Hoverable.tsx

@@ -5,15 +5,15 @@ import { classNames } from "@sparkle/lib/utils";
 
 interface HoverableProps {
   children: ReactNode;
-  className: string;
+  className?: string;
   onClick: (e: SyntheticEvent) => void;
 }
 
-Hoverable.defaultProps = {
-  className: "",
-};
-
-export function Hoverable({ children, className, onClick }: HoverableProps) {
+export function Hoverable({
+  children,
+  className = "",
+  onClick,
+}: HoverableProps) {
   return (
     <span
       className={classNames(

sparkle/src/components/Page.tsx

@@ -7,14 +7,10 @@ import { Icon } from "./Icon";
 
 interface PageProps {
   children: React.ReactNode;
-  variant: "modal" | "normal";
+  variant?: "modal" | "normal";
 }
 
-Page.defaultProps = {
-  variant: "normal" as const,
-};
-
-export function Page({ children, variant }: PageProps) {
+export function Page({ children, variant = "normal" }: PageProps) {
   const mainVariantClasses =
     variant === "normal" ? "s-h-full s-py-16" : "s-h-full s-py-4 s-px-2";
   const divVariantClassNames =