♻️ directory

.eslintrc.js

@@ -28,7 +28,7 @@ module.exports = {
     "react/jsx-handler-names": [
       "error",
       {
-        eventHandlerPrefix: "handle",
+        eventHandlerPrefix: "on",
         eventHandlerPropPrefix: "on",
         checkLocalVariables: true,
         checkInlineFunction: true,

src/components/functional/ErrorBoundary/LayoutErrorBoundary.tsx

@@ -1,18 +1,17 @@
-import type { ReactNode, VFC } from "react";
+import type { FC, ReactNode } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 type ErrorFallbackProps = {
   error: Error;
   resetErrorBoundary: () => void;
 };
 
-const ErrorFallback: VFC<ErrorFallbackProps> = (props) => {
+const ErrorFallback: FC<ErrorFallbackProps> = ({ error, resetErrorBoundary: onReset }) => {
   return (
     <div role="alert">
       <p>エラーが発生しました。</p>
-      <pre>{props.error.message}</pre>
-      {/* eslint-disable-next-line react/jsx-handler-names */}
-      <button onClick={props.resetErrorBoundary}>Try again</button>
+      <pre>{error.message}</pre>
+      <button onClick={onReset}>Try again</button>
     </div>
   );
 };
@@ -22,10 +21,10 @@ type LayoutErrorBoundaryProps = {
   onReset?: () => void;
 };
 
-export const LayoutErrorBoundary: VFC<LayoutErrorBoundaryProps> = (props) => {
+export const LayoutErrorBoundary: FC<LayoutErrorBoundaryProps> = ({ children, onReset }) => {
   return (
-    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={props.onReset}>
-      {props.children}
+    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={onReset}>
+      {children}
     </ErrorBoundary>
   );
 };

src/components/functional/WithTheme/ColorChanger.tsx

@@ -1,15 +1,33 @@
 import { useTheme } from "next-themes";
-import type { VFC } from "react";
 import { useEffect, useState } from "react";
 
 import { RadioGroup } from "~/components/ui/RadioGroup";
 
-export const ColorChanger: VFC = () => {
+type OptionsProps = {
+  id: string;
+  label: string;
+  value: string;
+  color: "blue" | "amber" | "crimson" | "violet" | "orange" | "green";
+};
+
+const RADIO_OPTIONS: OptionsProps[] = [
+  { id: "1", label: "blue", value: "blue", color: "blue" },
+  { id: "2", label: "amber", value: "amber", color: "amber" },
+  { id: "3", label: "crimson", value: "crimson", color: "crimson" },
+  { id: "4", label: "violet", value: "violet", color: "violet" },
+  { id: "5", label: "orange", value: "orange", color: "orange" },
+  { id: "6", label: "green", value: "green", color: "green" },
+];
+
+/**
+ * @package
+ */
+export const ColorChanger = () => {
   const { setTheme, resolvedTheme } = useTheme();
   const [isMounted, setIsMounted] = useState(false);
   const [currentColor, setCurrentColor] = useState("");
 
-  const handleClick = (e: any) => {
+  const onClick = (e: any) => {
     if (e.target.value === undefined) return;
     if (resolvedTheme?.indexOf("light") === 0) {
       const customColor = "light_" + e.target.value;
@@ -27,23 +45,5 @@ export const ColorChanger: VFC = () => {
 
   if (!isMounted) return null;
 
-  return (
-    <RadioGroup options={RADIO_OPTIONOS} defaultValue={currentColor} ariaLabel="colorChanger" onClick={handleClick} />
-  );
+  return <RadioGroup options={RADIO_OPTIONS} defaultValue={currentColor} ariaLabel="colorChanger" onClick={onClick} />;
 };
-
-type OptionsProps = {
-  id: string;
-  label: string;
-  value: string;
-  color: "blue" | "amber" | "crimson" | "violet" | "orange" | "green";
-};
-
-const RADIO_OPTIONOS: OptionsProps[] = [
-  { id: "1", label: "blue", value: "blue", color: "blue" },
-  { id: "2", label: "amber", value: "amber", color: "amber" },
-  { id: "3", label: "crimson", value: "crimson", color: "crimson" },
-  { id: "4", label: "violet", value: "violet", color: "violet" },
-  { id: "5", label: "orange", value: "orange", color: "orange" },
-  { id: "6", label: "green", value: "green", color: "green" },
-];

src/components/functional/WithTheme/ThemeChanger.tsx

@@ -1,15 +1,17 @@
 import { useTheme } from "next-themes";
-import type { VFC } from "react";
 import { useEffect, useState } from "react";
 
 import { Switch } from "~/components/ui/Switch";
 
-export const ThemeChanger: VFC = () => {
+/**
+ * @package
+ */
+export const ThemeChanger = () => {
   const { resolvedTheme, setTheme } = useTheme();
   const [isMounted, setIsMounted] = useState(false);
   const [currentTheme, setCurrentTheme] = useState("");
 
-  const handleClick = () => {
+  const onClick = () => {
     if (resolvedTheme) {
       const oppositeColor =
         resolvedTheme.indexOf("light") === 0
@@ -32,7 +34,7 @@ export const ThemeChanger: VFC = () => {
       labalRight="is dark"
       defaultChecked={currentTheme !== "light"}
       isDark
-      onClick={handleClick}
+      onClick={onClick}
     />
   );
 };

src/components/functional/WithTheme/WithTheme.tsx

@@ -1,6 +1,6 @@
 import type { AppProps } from "next/app";
 import { ThemeProvider, useTheme } from "next-themes";
-import type { VFC } from "react";
+import type { FC } from "react";
 import { useEffect } from "react";
 
 import {
@@ -16,12 +16,15 @@ import {
   lightGreen,
   lightOrange,
   lightViolet,
-} from "~/utils/theme";
+} from "~/libs/stiches/theme";
 
 type AppPage = (props: AppProps) => JSX.Element;
 
+/**
+ * @package
+ */
 export const WithTheme = (Component: AppPage) => {
-  const withTheme = (props: AppProps) => {
+  return (props: AppProps) => {
     return (
       <ThemeProvider
         attribute="class"
@@ -46,11 +49,9 @@ export const WithTheme = (Component: AppPage) => {
       </ThemeProvider>
     );
   };
-
-  return withTheme;
 };
 
-const InitTheme: VFC<{ children: JSX.Element }> = (props) => {
+const InitTheme: FC<{ children: JSX.Element }> = (props) => {
   const { resolvedTheme, setTheme } = useTheme();
 
   useEffect(() => {

src/components/page/Root/Root.tsx

@@ -23,7 +23,7 @@ import { Switch } from "~/components/ui/Switch";
 import { Text } from "~/components/ui/Text";
 
 export const Root: FC = () => {
-  const handleClick = () => {
+  const onClick = () => {
     console.info("click!!");
   };
 
@@ -57,35 +57,35 @@ export const Root: FC = () => {
 
       <Text>ボタン</Text>
       <Flex gap={1}>
-        <Button color="primary" onClick={handleClick}>
+        <Button color="primary" onClick={onClick}>
           Primary
         </Button>
-        <Button color="primary" isOutline onClick={handleClick}>
+        <Button color="primary" isOutline onClick={onClick}>
           PrimaryOutline
         </Button>
-        <Button color="primary" isGhost under onClick={handleClick}>
+        <Button color="primary" isGhost under onClick={onClick}>
           PrimaryGhost
         </Button>
       </Flex>
       <Flex gap={1}>
-        <Button color="red" onClick={handleClick}>
+        <Button color="red" onClick={onClick}>
           Red
         </Button>
-        <Button color="red" isOutline onClick={handleClick}>
+        <Button color="red" isOutline onClick={onClick}>
           RedOutline
         </Button>
-        <Button color="red" isGhost under onClick={handleClick}>
+        <Button color="red" isGhost under onClick={onClick}>
           RedGhost
         </Button>
       </Flex>
       <Flex gap={1}>
-        <Button color="slate" onClick={handleClick}>
+        <Button color="slate" onClick={onClick}>
           Slate
         </Button>
-        <Button color="slate" isOutline onClick={handleClick}>
+        <Button color="slate" isOutline onClick={onClick}>
           SlateOutline
         </Button>
-        <Button color="slate" isGhost under onClick={handleClick}>
+        <Button color="slate" isGhost under onClick={onClick}>
           SlateGhost
         </Button>
         <NextLink href="/" btn>
@@ -95,15 +95,15 @@ export const Root: FC = () => {
 
       <Text>アイコン付き</Text>
       <Flex gap={1}>
-        <Button color="primary" onClick={handleClick}>
+        <Button color="primary" onClick={onClick}>
           <AllowLeftIcon size={15} />
           Back
         </Button>
-        <Button color="primary" isOutline onClick={handleClick}>
+        <Button color="primary" isOutline onClick={onClick}>
           Next
           <AllowRightIcon size={15} />
         </Button>
-        <Button color="primary" isGhost onClick={handleClick}>
+        <Button color="primary" isGhost onClick={onClick}>
           <CloseIcon size={15} />
           Close
         </Button>
@@ -113,16 +113,16 @@ export const Root: FC = () => {
         <Flex gap={1}>
           <Text>ラジオボタン</Text>
           <RadioGroup
-            options={RADIO_OPTIONOS}
-            defaultValue={RADIO_OPTIONOS[0].value}
+            options={RADIO_OPTIONS}
+            defaultValue={RADIO_OPTIONS[0].value}
             ariaLabel="radioGroup"
-            onClick={handleClick}
+            onClick={onClick}
           />
         </Flex>
 
         <Flex gap={1}>
           <Text>スイッチ</Text>
-          <Switch labalLeft="off" labalRight="on" onClick={handleClick} />
+          <Switch labalLeft="off" labalRight="on" onClick={onClick} />
         </Flex>
       </Flex>
 
@@ -173,7 +173,7 @@ type OptionsProps = {
   color?: "blue" | "amber" | "crimson" | "violet" | "orange" | "green";
 };
 
-const RADIO_OPTIONOS: OptionsProps[] = [
+const RADIO_OPTIONS: OptionsProps[] = [
   { id: "1", label: "OFF", value: "off" },
   { id: "2", label: "ON", value: "on" },
 ];

src/components/ui/Button.tsx

@@ -1,5 +1,6 @@
-import type { MouseEventHandler, ReactNode, VFC } from "react";
-import { styled } from "src/utils";
+import type { FC, MouseEventHandler, ReactNode } from "react";
+
+import { styled } from "~/libs/stiches";
 
 export const StitchesButton = styled("button", {
   all: "unset",
@@ -102,7 +103,7 @@ type Props = {
   onClick: MouseEventHandler<HTMLButtonElement>;
 };
 
-export const Button: VFC<Props> = (props) => {
+export const Button: FC<Props> = (props) => {
   return (
     <StitchesButton
       color={props.color}

src/components/ui/CircleImg.tsx

@@ -1,4 +1,4 @@
-import { styled } from "src/utils";
+import { styled } from "~/libs/stiches";
 
 export const CircleImg = styled("img", {
   display: "block",

src/components/ui/Dialog.tsx

@@ -1,12 +1,12 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import type { ReactNode, VFC } from "react";
-import { styled } from "src/utils";
+import type { FC, ReactNode } from "react";
 
 import { contentShow, overlayShow } from "~/components/ui/animation";
 import { StitchesButton } from "~/components/ui/Button";
 import { Flex } from "~/components/ui/Flex";
 import { IconButton } from "~/components/ui/IconButton";
 import { Text } from "~/components/ui/Text";
+import { styled } from "~/libs/stiches";
 
 const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
   backgroundColor: "$slate4",
@@ -44,7 +44,7 @@ type Props = {
   confirmationButtonLabel: string;
 };
 
-export const Dialog: VFC<Props> = (props) => {
+export const Dialog: FC<Props> = (props) => {
   return (
     <AlertDialogPrimitive.Root>
       <StyledOverlay />

src/components/ui/Fieldset.tsx

@@ -1,4 +1,4 @@
-import { styled } from "src/utils";
+import { styled } from "~/libs/stiches";
 
 export const Fieldset = styled("fieldset", {
   all: "unset",

src/components/ui/Flex.tsx

@@ -1,5 +1,6 @@
-import type { ReactNode, VFC } from "react";
-import { styled } from "src/utils";
+import type { FC, ReactNode } from "react";
+
+import { styled } from "~/libs/stiches";
 
 const StitchesFlex = styled("div", {
   display: "flex",
@@ -48,7 +49,7 @@ type Props = {
   children: ReactNode;
 };
 
-export const Flex: VFC<Props> = (props) => {
+export const Flex: FC<Props> = (props) => {
   const gap: string = props.gap + "rem";
   return (
     <StitchesFlex direction={props.direction} justify={props.justify} items={props.items} css={{ gap }}>