refactor: remove explicit component types

README.md

@@ -47,7 +47,7 @@ const { Stack, useFlow } = stackflow({
   // ...
 });
 
-const App: React.FC = () => {
+const App = () => {
   return (
     <Stack />
   );

demo/src/App.tsx

@@ -2,7 +2,7 @@ import { StrictMode, Suspense } from "react";
 
 import { Stack } from "./stackflow";
 
-const App: React.FC = () => (
+const App = () => (
   <StrictMode>
     <Suspense>
       <Stack />

demo/src/assets/IconBell.tsx

@@ -6,7 +6,7 @@ const SVG = `
 </svg>
 `;
 
-const IconBell: React.FC = () => (
+const IconBell = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 

demo/src/assets/IconChatting.tsx

@@ -6,7 +6,7 @@ const SVG = `
 </svg>
 `;
 
-const IconChatting: React.FC = () => (
+const IconChatting = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 

demo/src/assets/IconExpandMore.tsx

@@ -6,7 +6,7 @@ const SVG = `
 </svg>
 `;
 
-const IconExpandMore: React.FC = () => (
+const IconExpandMore = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 

demo/src/assets/IconHome.tsx

@@ -6,7 +6,7 @@ const SVG = `
 </svg>
 `;
 
-const IconHome: React.FC = () => (
+const IconHome = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 

demo/src/assets/IconMenu.tsx

@@ -8,7 +8,7 @@ const SVG = `
 </svg>
 `;
 
-const IconMenu: React.FC = () => (
+const IconMenu = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 

demo/src/assets/IconProfile.tsx

@@ -7,7 +7,7 @@ const SVG = `
 </svg>
 `;
 
-const IconProfile: React.FC = () => (
+const IconProfile = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 

demo/src/assets/IconSearch.tsx

@@ -6,7 +6,7 @@ const SVG = `
 </svg>
 `;
 
-const IconSearch: React.FC = () => (
+const IconSearch = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 

demo/src/assets/IconSell.tsx

@@ -8,7 +8,7 @@ const SVG = `
 </svg>
 `;
 
-const IconSell: React.FC = () => (
+const IconSell = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 

demo/src/assets/IconSettings.tsx

@@ -7,7 +7,7 @@ const SVG = `
 </svg>
 `;
 
-const IconSettings: React.FC = () => (
+const IconSettings = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 

demo/src/assets/ImageProfileRating.tsx

@@ -42,7 +42,7 @@ const SVG = `
 </svg>
 `;
 
-const ImageProfileRating: React.FC = () => (
+const ImageProfileRating = () => (
   <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
 );
 

demo/src/components/ArticleCard.tsx

@@ -8,11 +8,7 @@ interface ArticleCardProps {
   title: string;
   price: number;
 }
-const ArticleCard: React.FC<ArticleCardProps> = ({
-  articleId,
-  title,
-  price,
-}) => {
+const ArticleCard = ({ articleId, title, price }: ArticleCardProps) => {
   const { push } = useFlow();
 
   const imageUrl = `https://picsum.photos/800/800/?id=${articleId}`;

demo/src/components/ArticleProfile.tsx

@@ -3,7 +3,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component";
 import ImageProfileRating from "../assets/ImageProfileRating";
 import * as css from "./ArticleProfile.css";
 
-const ArticleProfile: React.FC = () => {
+const ArticleProfile = () => {
   const imageUrl = `https://picsum.photos/120/120/`;
 
   return (

demo/src/components/BottomTab.tsx

@@ -5,7 +5,7 @@ import IconProfile from "../assets/IconProfile";
 import IconSell from "../assets/IconSell";
 import * as css from "./BottomTab.css";
 
-const BottomTab: React.FC = () => (
+const BottomTab = () => (
   <div className={css.container}>
     <button type="button" className={css.button}>
       <div className={css.buttonIcon}>

demo/src/components/FeedCard.tsx

@@ -10,13 +10,13 @@ interface FeedCardProps {
   price: number;
   daysAgo: number;
 }
-const FeedCard: React.FC<FeedCardProps> = ({
+const FeedCard = ({
   articleId,
   title,
   price,
   region,
   daysAgo,
-}) => {
+}: FeedCardProps) => {
   const { push } = useFlow();
 
   const imageUrl = `https://picsum.photos/800/800/?id=${articleId}`;

demo/src/components/Layout.tsx

@@ -6,7 +6,7 @@ interface LayoutProps {
   appBar?: PropOf<typeof AppScreen>["appBar"];
   children: React.ReactNode;
 }
-const Layout: React.FC<LayoutProps> = ({ appBar, children }) => (
+const Layout = ({ appBar, children }: LayoutProps) => (
   <AppScreen appBar={appBar}>{children}</AppScreen>
 );
 

docs/components/Demo.tsx

@@ -1,7 +1,7 @@
 import { Stack } from "@stackflow/demo";
 import { useSimpleReveal } from "simple-reveal";
 
-const Demo: React.FC = () => {
+const Demo = () => {
   const { cn, ref, style } = useSimpleReveal({
     delay: 200,
     initialTransform: "scale(0.95)",

docs/components/DiagramActivity.tsx

@@ -13,7 +13,7 @@ const svg = `
 
 `;
 
-const DiagramActivity: React.FC = () => (
+const DiagramActivity = () => (
   <div style={{ display: "flex", justifyContent: "center" }}>
     <div
       style={{ width: "100%", padding: "2rem 0 1rem", maxWidth: "20rem" }}

docs/components/DiagramEffectHook.tsx

@@ -26,7 +26,7 @@ const svg = `
 </svg>
 `;
 
-const DiagramEffectHook: React.FC = () => (
+const DiagramEffectHook = () => (
   // eslint-disable-next-line react/no-danger
   <div style={{ width: "100%" }} dangerouslySetInnerHTML={{ __html: svg }} />
 );

docs/components/DiagramStep.tsx

@@ -18,7 +18,7 @@ const svg = `
 </svg>
 `;
 
-const DiagramStep: React.FC = () => (
+const DiagramStep = () => (
   <div style={{ display: "flex", justifyContent: "center" }}>
     <div
       style={{ width: "100%", padding: "2rem 0 1rem", maxWidth: "20rem" }}

docs/components/DiagramTransitioningStack.tsx

@@ -24,7 +24,7 @@ const svg = `
 
 `;
 
-const DiagramTransitioningStack: React.FC = () => (
+const DiagramTransitioningStack = () => (
   <div style={{ display: "flex", justifyContent: "center" }}>
     <div
       style={{ width: "100%", padding: "2.5rem 0 1rem", maxWidth: "45rem" }}

docs/pages/advanced/migrate-from-karrotframe.ko.mdx

@@ -39,7 +39,7 @@ Karrotframe의 경우,
 /**
  * as-is:
  */
-const App: React.FC = () => {
+const App = () => {
   return (
     <Navigator>
       <Screen path="/my-page/:someid" component={MyPage} />
@@ -68,7 +68,7 @@ const { Stack } = stackflow({
   ],
 });
 
-const App: React.FC = () => {
+const App = () => {
   return <Stack />;
 };
 ```

docs/pages/guided-tour/activity.ko.mdx

@@ -141,7 +141,7 @@ type ArticleParams = {
     title: string;
   };
 };
-const Article: React.FC<ArticleParams> = ({ params: { title } }) => {
+const Article = ({ params: { title } }: ArticleParams) => {
   return (
     <AppScreen appBar={{ title: "Article" }}>
       <div>

docs/pages/index.ko.mdx

@@ -94,7 +94,7 @@ import "@stackflow/plugin-basic-ui/index.css";
  */
 import { Stack } from "./stackflow";
 
-const App: React.FC = () => {
+const App = () => {
   return (
     <div>
       <Stack />

extensions/plugin-basic-ui/README.md

@@ -27,7 +27,7 @@ const { Stack, useFlow } = stackflow({
 ```tsx
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
-const Something: React.FC = () => {
+const Something = () => {
   return (
     <AppScreen appBar={{ title: "Home" }}>
       <div>Hello, World</div>
@@ -39,7 +39,7 @@ const Something: React.FC = () => {
 ```tsx
 import { Modal } from "@stackflow/plugin-basic-ui";
 
-const Something: React.FC = () => {
+const Something = () => {
   return (
     <Modal>
       <div>Hello, World</div>

extensions/plugin-basic-ui/src/assets/IconBack.tsx

@@ -1,6 +1,4 @@
-const IconBack: React.FC<{
-  className?: string;
-}> = (props) => (
+const IconBack = (props: { className?: string }) => (
   <svg
     className={props.className}
     width="24"

extensions/plugin-basic-ui/src/assets/IconClose.tsx

@@ -1,6 +1,4 @@
-const IconClose: React.FC<{
-  className?: string;
-}> = (props) => (
+const IconClose = (props: { className?: string }) => (
   <svg
     className={props.className}
     width="24"

extensions/plugin-basic-ui/src/components/AppScreen.tsx

@@ -36,14 +36,14 @@ export type AppScreenProps = Partial<
   modalPresentationStyle?: "fullScreen";
   children: React.ReactNode;
 };
-const AppScreen: React.FC<AppScreenProps> = ({
+const AppScreen = ({
   backgroundColor,
   dimBackgroundColor,
   appBar,
   preventSwipeBack,
   modalPresentationStyle,
   children,
-}) => {
+}: AppScreenProps) => {
   const globalOptions = useGlobalOptions();
   const activity = useNullableActivity();
 

extensions/plugin-basic-ui/src/components/BottomSheet.tsx

@@ -17,13 +17,13 @@ export type BottomSheetProps = Partial<
     onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
   };
-const BottomSheet: React.FC<BottomSheetProps> = ({
+const BottomSheet = ({
   borderRadius = "1rem",
   backgroundColor,
   dimBackgroundColor,
   onOutsideClick,
   children,
-}) => {
+}: BottomSheetProps) => {
   const activity = useNullableActivity();
   const { pop } = useActions();
 

extensions/plugin-basic-ui/src/components/Modal.tsx

@@ -17,13 +17,13 @@ export type ModalProps = Partial<
     onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
   };
-const Modal: React.FC<ModalProps> = ({
+const Modal = ({
   backgroundColor,
   dimBackgroundColor,
   borderRadius = "1rem",
   onOutsideClick,
   children,
-}) => {
+}: ModalProps) => {
   const activity = useNullableActivity();
   const { pop } = useActions();
 

extensions/plugin-history-sync/src/RoutesContext.tsx

@@ -10,7 +10,7 @@ interface RoutesProviderProps {
   routes: RoutesMap;
   children: React.ReactNode;
 }
-export const RoutesProvider: React.FC<RoutesProviderProps> = (props) => (
+export const RoutesProvider = (props: RoutesProviderProps) => (
   <RoutesContext.Provider value={props.routes}>
     {props.children}
   </RoutesContext.Provider>

extensions/plugin-preload/src/LoadersContext.tsx

@@ -12,7 +12,7 @@ interface LoadersProviderProps {
   loaders: LoadersMap;
   children: React.ReactNode;
 }
-export const LoadersProvider: React.FC<LoadersProviderProps> = (props) => (
+export const LoadersProvider = (props: LoadersProviderProps) => (
   <LoadersContext.Provider value={props.loaders}>
     {props.children}
   </LoadersContext.Provider>

integrations/react/src/MainRenderer.tsx

@@ -11,9 +11,7 @@ interface MainRendererProps {
     [key: string]: ActivityComponentType;
   };
 }
-const MainRenderer: React.FC<MainRendererProps> = ({
-  activityComponentMap,
-}) => {
+const MainRenderer = ({ activityComponentMap }: MainRendererProps) => {
   const coreState = useCoreState();
   const plugins = usePlugins();
 

integrations/react/src/PluginRenderer.tsx

@@ -12,10 +12,10 @@ interface PluginRendererProps {
   };
   plugin: WithRequired<ReturnType<StackflowReactPlugin>, "render">;
 }
-const PluginRenderer: React.FC<PluginRendererProps> = ({
+const PluginRenderer = ({
   activityComponentMap,
   plugin,
-}) => {
+}: PluginRendererProps) => {
   const coreState = useCoreState();
   const plugins = usePlugins();
 

integrations/react/src/activity/ActivityProvider.tsx

@@ -9,10 +9,10 @@ interface ActivityProviderProps {
   children: React.ReactNode;
   value: Activity;
 }
-export const ActivityProvider: React.FC<ActivityProviderProps> = ({
+export const ActivityProvider = ({
   children,
   value,
-}) => (
+}: ActivityProviderProps) => (
   <ActivityContext.Provider value={useMemoDeep(value)}>
     {children}
   </ActivityContext.Provider>

integrations/react/src/core/CoreProvider.tsx

@@ -12,10 +12,7 @@ export interface CoreProviderProps {
   coreStore: CoreStore;
   children: React.ReactNode;
 }
-export const CoreProvider: React.FC<CoreProviderProps> = ({
-  coreStore,
-  children,
-}) => {
+export const CoreProvider = ({ coreStore, children }: CoreProviderProps) => {
   const stack = useSyncExternalStore(
     coreStore.subscribe,
     coreStore.actions.getStack,