refactor: better organize TS React components

apps/thirdweb-connectwallet-nextjs/pages/_app.tsx

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import type { AppProps } from "next/app";
 import { ThirdwebProvider, metamaskWallet } from "@thirdweb-dev/react";
 import "../styles/globals.css";
@@ -8,16 +9,14 @@ import { BerachainArtio } from "@thirdweb-dev/chains";
 // You can also import additional chains from `@thirdweb-dev/chains` and pass them directly.
 const activeChain = "BerachainArtio";
 
-function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    <ThirdwebProvider
-      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID}
-      activeChain={BerachainArtio}
-      supportedWallets={[metamaskWallet()]}
-    >
-      <Component {...pageProps} />
-    </ThirdwebProvider>
-  );
-}
+const MyApp: FC<AppProps> = ({ Component, pageProps }) => (
+  <ThirdwebProvider
+    clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID}
+    activeChain={BerachainArtio}
+    supportedWallets={[metamaskWallet()]}
+  >
+    <Component {...pageProps} />
+  </ThirdwebProvider>
+);
 
 export default MyApp;

apps/walletconnect-expo/components/Connect/index.tsx

@@ -6,17 +6,17 @@ import { View } from "react-native";
 // Component
 // ========================================================
 export default function Connect() {
-	return (
-		<View className="Connect">
+  return (
+    <View className="Connect">
       {/* Customizing the web3modal button requires passing it certain props */}
-			<W3mButton
-				connectStyle={{
-					backgroundColor: "#2E1E1A",
-				}}
-				accountStyle={{
-					backgroundColor: "#2E1E1A",
-				}}
-			/>
-		</View>
-	);
+      <W3mButton
+        connectStyle={{
+          backgroundColor: "#2E1E1A",
+        }}
+        accountStyle={{
+          backgroundColor: "#2E1E1A",
+        }}
+      />
+    </View>
+  );
 }

packages/ui/src/button.tsx

@@ -1,20 +1,19 @@
 "use client";
 
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 
-interface ButtonProps {
+interface Props {
   children: ReactNode;
   className?: string;
   appName: string;
 }
 
-export const Button = ({ children, className, appName }: ButtonProps) => {
-  return (
-    <button
-      className={className}
-      onClick={() => alert(`Hello from your ${appName} app!`)}
-    >
-      {children}
-    </button>
-  );
-};
+export const Button: FC<Props> = ({ children, className, appName }) => (
+  <button
+    type="button"
+    className={className}
+    onClick={() => alert(`Hello from your ${appName} app!`)}
+  >
+    {children}
+  </button>
+);

packages/ui/src/card.tsx

@@ -1,25 +1,22 @@
-export function Card({
-  className,
-  title,
-  children,
-  href,
-}: {
+import { FC } from "react";
+
+interface Props {
   className?: string;
   title: string;
   children: React.ReactNode;
   href: string;
-}): JSX.Element {
-  return (
-    <a
-      className={className}
-      href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <h2>
-        {title} <span>-&gt;</span>
-      </h2>
-      <p>{children}</p>
-    </a>
-  );
 }
+
+export const Card: FC<Props> = ({ className, title, children, href }) => (
+  <a
+    className={className}
+    href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <h2>
+      {title} <span>-&gt;</span>
+    </h2>
+    <p>{children}</p>
+  </a>
+);

packages/ui/src/code.tsx

@@ -1,9 +1,10 @@
-export function Code({
-  children,
-  className,
-}: {
+import { FC } from "react";
+
+interface Props {
   children: React.ReactNode;
   className?: string;
-}): JSX.Element {
-  return <code className={className}>{children}</code>;
 }
+
+export const Code: FC<Props> = ({ children, className }) => (
+  <code className={className}>{children}</code>
+);

packages/ui/turbo/generators/templates/component.hbs

@@ -1,14 +1,12 @@
-import * as React from "react";
+import { FC, ReactNode } from "react";
 
 interface Props {
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
-export const {{ pascalCase name }} = ({ children }: Props) => {
-  return (
-    <div>
-      <h1>{{ name }}</h1>
-      {children}
-    </div>
-  );
-};
+export const {{ pascalCase name }}: FC<Props> = ({ children }) => (
+  <div>
+    <h1>{{ name }}</h1>
+    {children}
+  </div>
+)