src
├── assets
├── features
│   ├── auth
│   ├── task
│   └── user
│       ├── shared
│       │   ├── components
│       │   ├── containers
│       │   └── hooks
│       ├── user-detail
│       └── user-list
├── lib
├── routes
├── shared
│   ├── components
│   └── hooks
└── styles

function withStyles(Component) {
  return props => {
    const style = { padding: '0.2rem', margin: '1rem' }
    return <Component style={style} {...props} />
  }
}

const Button = () = <button>Click me!</button>
const Text = () => <p>Hello World!</p>

const StyledButton = withStyles(Button)
const StyedText = withStyles(Text)

  function withStyles(Component) {
  return props => {
    const style = {
      padding: '0.2rem',
      margin: '1rem',
      ...props.style
    }

    return <Component style={style} {...props} />
  }
}

const Button = () = <button style={{ color: 'red' }}>Click me!</button>
const StyledButton = withStyles(Button)

const FlyOutContext = createContext();

function FlyOut(props) {
  const [open, toggle] = useState(false);

  return (
    <FlyOutContext.Provider value={{ open, toggle }}>
      {props.children}
    </FlyOutContext.Provider>
  );
}

function Toggle() {
  const { open, toggle } = useContext(FlyOutContext);

  return (
    <div onClick={() => toggle(!open)}>
      <Icon />
    </div>
  );
}

function List({ children }) {
  const { open } = useContext(FlyOutContext);
  return open && <ul>{children}</ul>;
}

function Item({ children }) {
  return <li>{children}</li>;
}

FlyOut.Toggle = Toggle;
FlyOut.List = List;
FlyOut.Item = Item;

import React from "react";
import { FlyOut } from "./FlyOut";

export default function FlyoutMenu() {
  return (
    <FlyOut>
      <FlyOut.Toggle />
      <FlyOut.List>
        <FlyOut.Item>Edit</FlyOut.Item>
        <FlyOut.Item>Delete</FlyOut.Item>
      </FlyOut.List>
    </FlyOut>
  );
}

function Input(props) {
  const [value, setValue] = useState("");

  return (
    <>
      <input
        type="text"
        value={value}
        onChange={e => setValue(e.target.value)}
        placeholder="Temp in °C"
      />
      {props.render(value)}
    </>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>☃️ Temperature Converter 🌞</h1>
      <Input
        render={value => (
          <>
            <Kelvin value={value} />
            <Fahrenheit value={value} />
          </>
        )}
      />
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>☃️ Temperature Converter 🌞</h1>
      <Input>
        {value => (
          <>
            <Kelvin value={value} />
            <Fahrenheit value={value} />
          </>
        )}
      </Input>
    </div>
  );
}

function Input(props) {
  const [value, setValue] = useState("");

  return (
    <>
      <input
        type="text"
        value={value}
        onChange={e => setValue(e.target.value)}
        placeholder="Temp in °C"
      />
      {props.children(value)}
    </>
  );
}

// routes/posts.tsx
export const Route = createFileRoute('/posts')({
  component, // skip
  loader,
  errorComponent,
  pendingComponent,
  validateSearch,
})

type loader = ({/** 省略 */}) => Promise<TLoaderData> | TLoaderData | void

const link = (
  <Link
    to="/shop"
    search={{
      pageIndex: 3, 
      includeCategories: ["electronics", "gifts"], 
      sortBy: "price", 
      desc: true,
    }}
  />
);

type ProductSearchSortOptions = "newest" | "oldest" | "price";

type ProductSearch = {
  page: number;
  filter: string;
  sort: ProductSearchSortOptions;
};

export const Route = createFileRoute("/shop/products")({
  validateSearch: (search: Record<string, unknown>): ProductSearch => {
    return {
      page: Number(search?.page ?? 1), // `page` は `number`
      filter: (search.filter as string) || "", // `filter` は `string`
      sort: (search.sort as ProductSearchSortOptions) || "newest", // `sort` は `ProductSearchSortOptions`
    };
  },
});

loaderDeps: ({ search: { index, size } }) => ({ index, size })

export const Route = createFileRoute('/users/user')({
  // `validateSearch` で search params を型安全に扱う
  validateSearch: (search) =>
    search as {
      userId: string
    },

  // `loaderDeps` を使って search params を明示的に渡す
  loaderDeps: ({ search: { userId } }) => ({
    userId,
  }),

  // `deps` を通して search params を loader に渡す
  loader: async ({ deps: { userId } }) => getUser(userId),
});

// src/routes/posts.tsx

const postsQueryOptions = queryOptions({
  queryKey: 'posts',
  queryFn: () => fetchPosts,
})

export const Route = createFileRoute('/posts')({
  // Use the `loader` option to ensure that the data is loaded
  loader: () => queryClient.ensureQueryData(postsQueryOptions),
  component: () => {
    // Read the data from the cache and subscribe to updates
    const posts = useSuspenseQuery(postsQueryOptions)

    return (
      <div>
        {posts.map((post) => (
          <Post key={post.id} post={post} />
        ))}
      </div>
    )
  },
})

const { data, isPending } = useQuery({
  queryKey: ["issues"],
  queryFn: () => axios.get("/issues").then(res => res.data)
})

queryFn: (context: QueryFunctionContext) => Promise<TData>

// ユーザ情報を取得
const { data: user } = useQuery({
  queryKey: ['user', email],
  queryFn: getUserByEmail,
})

const userId = user?.id

const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  // ユーザIDの取得が完了されるまでクエリは発火されない
  enabled: !!userId,
})

staleTime: number | Infinity

const transformTodoNames = (data: Todos) =>
  data.map((todo) => todo.name.toUpperCase())

export const useTodosQuery = () =>
  useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    select: transformTodoNames,
  })

const {
  data, // データ
  error,
  status,  // pending | success | error
  fetchStatus,
  isPending,
  isSuccess,
  isFetching,
  isPaused,
  isError,
  isLoading
} = useQuery()

function Todos() {
  const { status, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  // if (isPending) {
  if (status === 'pending') {
    return <span>Loading...</span>
  }

  // if (isError) {
  if (status === 'error') {
    return <span>Error: {error.message}</span>
  }

  // also status === 'success', but "else" logic works, too
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

{
  "data": {
    "jwt_token": "string"
  },
  "status": 0
}

function AppProvider({ children }: AppProviderProps) {
	return (
		<>
			<QueryClientProvider client={queryClient}>
				<ErrorBoundary fallback={<p>error</p>}>
					<Suspense fallback={<LoadingSpinner />}>
						<AuthProvider>
							<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
								{children}
							</ThemeProvider>
						</AuthProvider>
					</Suspense>
				</ErrorBoundary>
				<ReactQueryDevtools initialIsOpen={false} />
			</QueryClientProvider>
		</>
	);
}

export const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			gcTime: 1000 * 60 * 60 * 24, // 24 hours
		},
	},
});

persistQueryClient({
	queryClient,
	persister: createSyncStoragePersister({ storage: window.localStorage }),
	dehydrateOptions: {
		shouldDehydrateQuery: (query) => {
			const keys = query.queryKey.map((key) => {
				return String(key);
			});
			const allowKeys = userKeys.current();
			return (
				keys.length === allowKeys.length &&
				keys.every((key) => allowKeys.includes(key))
			);
		},
	},
});

function AppProvider({ children }: AppProviderProps) {
	return (
		<>
			<QueryClientProvider client={queryClient}>
                ....