build(deps): migrate to react 19

apps/hanerubeat/.gitignore

@@ -32,3 +32,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.env*.local

apps/hanerubeat/src/components/heart.tsx

@@ -11,13 +11,7 @@ export default function Heart({ ref }: ComponentProps<'audio'>) {
     <>
       <MdFavorite className={styles.heart} />
 
-      <audio
-        crossOrigin="anonymous"
-        loop
-        preload="none"
-        // @ts-expect-error `@types/react`のバージョン齟齬。全部v19.xにそろえられれば解決するはず。
-        ref={ref}
-      >
+      <audio crossOrigin="anonymous" loop preload="none" ref={ref}>
         <source src={oggPath} type="audio/ogg" />
         <source src={mp3Path} type="audio/mp3" />
         <track default kind="captions" src={captionPath} srcLang="ja" />

apps/neru-camera/app/(camera)/camera.tsx

@@ -11,7 +11,7 @@ import { track } from '@vercel/analytics'
 import { fileSave } from 'browser-fs-access'
 import clsx from 'clsx'
 import { type Application } from 'pixi.js'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import processing from '@/lib/processing'
 import { useAsset } from './asset'
 import styles from './camera.module.css'
@@ -27,13 +27,12 @@ const mediaStreamConstraints: MediaStreamConstraints = {
   }
 }
 
-export default function Camera(): JSX.Element {
+export default function Camera() {
   const { currentAsset: asset } = useAsset()
   const [pixiView, setPixiView] = useState<HTMLCanvasElement>()
   const [cameraStream, setCameraStream] = useState<MediaStream>()
   const [isShooting, setIsShooting] = useState(false)
   const [hasError, setHasError] = useState(false)
-  const cancelRef = useRef<HTMLDivElement>(null)
   const texture = useVideoTexture({ srcObject: cameraStream })
 
   const handleMount = useCallback(
@@ -144,7 +143,7 @@ export default function Camera(): JSX.Element {
       </div>
 
       {hasError && (
-        <AlertDialog leastDestructiveRef={cancelRef}>
+        <AlertDialog>
           <AlertDialogLabel>エラー</AlertDialogLabel>
 
           <AlertDialogDescription>

apps/neru-camera/app/(camera)/layout.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { type OverlayEntrySkeleton, createClient } from '@/lib/contentful'
 import { AssetProvider, type OverlayEntry } from './asset'
 import HeaderMenu from './menu'
@@ -16,13 +16,11 @@ async function getAssets(): Promise<OverlayEntry[]> {
   return items
 }
 
-type Props = {
-  children: ReactNode
-}
-
 export default async function CameraLayout({
   children
-}: Props): Promise<JSX.Element> {
+}: Readonly<{
+  children: ReactNode
+}>) {
   const assets = await getAssets()
 
   return (

apps/neru-camera/app/(camera)/menu.tsx

@@ -5,7 +5,7 @@ import { EllipsisVerticalIcon } from '@heroicons/react/24/solid'
 import { Menu, MenuButton, MenuItem, MenuList } from '@reach/menu-button'
 import { useAsset } from './asset'
 
-export default function HeaderMenu(): JSX.Element {
+export default function HeaderMenu() {
   const { assets, setAssetID } = useAsset()
 
   return (

apps/neru-camera/app/(camera)/overlay.tsx

@@ -8,11 +8,11 @@ import { ChromaKeyFilter } from './filters'
 import { useVideoTexture } from './hooks'
 import Viewport from './viewport'
 
-type Props = {
+export default function Overlay({
+  asset
+}: Readonly<{
   asset: OverlayEntry
-}
-
-export default function Overlay({ asset }: Props): JSX.Element {
+}>) {
   const app = useApp()
   const texture = useVideoTexture({
     src: asset.fields.media?.fields.file?.url

apps/neru-camera/app/(camera)/page.tsx

@@ -20,6 +20,6 @@ export const metadata: Metadata = {
 
 const Camera = dynamic(() => import('./camera'), { ssr: false })
 
-export default function CameraPage(): JSX.Element {
+export default function CameraPage() {
   return <Camera />
 }

package.json

@@ -9,7 +9,7 @@
     "url": "https://github.com/inabagumi/inaba-jinja/issues"
   },
   "dependencies": {},
-  "description": "This is a monorepo for Inaba Jinja.",
+  "description": "Mini apps by Haneru Developers.",
   "devDependencies": {
     "@commitlint/cli": "^19.6.0",
     "@commitlint/config-conventional": "^19.6.0",
@@ -24,7 +24,7 @@
   "homepage": "https://inaba-jinja.com",
   "license": "MIT",
   "main": "n/a",
-  "name": "@inaba-jinja/monorepo",
+  "name": "@inabagumi/mini-apps",
   "packageManager": "[email protected]",
   "private": true,
   "repository": {

website/docs/animare-shindan.md → website/docs/animare-shindan.mdx

@@ -2,7 +2,10 @@ import Image from '@theme/IdealImage'
 
 # あにまーれ診断
 
-<Image alt="あにまーれ診断" img={require('../src/data/showcase/animare-shindan.jpg')} />
+<Image
+  alt="あにまーれ診断"
+  img={require('../src/data/showcase/animare-shindan.jpg')}
+/>
 
 - [shindan.animare.cafe](https://shindan.animare.cafe/)
 - [リポジトリ (inabagumi/animare-shindan)](https://github.com/inabagumi/animare-shindan)

website/docs/hanerubeat.md → website/docs/hanerubeat.mdx

@@ -2,7 +2,10 @@ import Image from '@theme/IdealImage'
 
 # Haneru Beat!
 
-<Image alt="Haneru Beat!" img={require('../src/data/showcase/hanerubeat.jpg')} />
+<Image
+  alt="Haneru Beat!"
+  img={require('../src/data/showcase/hanerubeat.jpg')}
+/>
 
 - [hanerubeat.app](https://hanerubeat.app/)
 - [リポジトリ (inabagumi/hanerubeat)](https://github.com/inabagumi/hanerubeat)

website/docs/shinju-date.md → website/docs/shinju-date.mdx

@@ -2,7 +2,10 @@ import Image from '@theme/IdealImage'
 
 # SHINJU DATE
 
-<Image alt="SHINJU DATE" img={require('../src/data/showcase/shinju-date.jpg')} />
+<Image
+  alt="SHINJU DATE"
+  img={require('../src/data/showcase/shinju-date.jpg')}
+/>
 
 - [shinju.date](https://shinju.date/)
 - [リポジトリ (inabagumi/shinju-date)](https://github.com/inabagumi/shinju-date)

website/docusaurus.config.ts

@@ -17,8 +17,9 @@ const config: Config = {
   plugins: ['@docusaurus/plugin-ideal-image'],
   presets: [
     [
-      'classic',
+      '@docusaurus/preset-classic',
       {
+        debug: true,
         docs: {
           sidebarPath: './sidebars.ts'
         },
@@ -63,10 +64,6 @@ const config: Config = {
             {
               label: 'SHINJU DATE',
               to: 'docs/shinju-date'
-            },
-            {
-              label: '21g',
-              to: 'docs/21g'
             }
           ],
           title: 'プロダクト'

website/package.json

@@ -6,6 +6,7 @@
     "@docusaurus/preset-classic": "^3.6.3",
     "@formspree/react": "^2.5.1",
     "@hookform/error-message": "^2.0.1",
+    "@slorber/react-ideal-image": "^0.0.12",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",
     "react": "^19.0.0",
@@ -22,8 +23,6 @@
     "@inabagumi/prettier-config": "^3.0.0",
     "@types/lodash": "^4.17.13",
     "@types/react": "^19.0.1",
-    "@types/react-helmet": "^6.1.11",
-    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "eslint": "^8.57.1",
@@ -32,7 +31,6 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "prettier": "~3.4.2",
     "typescript": "~5.7.2"
   },
   "license": "MIT",

website/sidebars.ts

@@ -1,6 +1,6 @@
-import type { SidebarConfig } from '@docusaurus/plugin-content-docs'
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'
 
-const sidebars: SidebarConfig = {
+const sidebars: SidebarsConfig = {
   docs: [
     'introduction',
     {
@@ -9,7 +9,7 @@ const sidebars: SidebarConfig = {
       type: 'category'
     },
     {
-      items: ['shinju-date', '21g'],
+      items: ['shinju-date'],
       label: 'プロダクト',
       type: 'category'
     }

website/src/components/ContactForm/ContactForm.tsx

@@ -1,8 +1,7 @@
 import FormControl from './FormControl'
 import { useHandleSubmit } from './hooks'
-import type { VFC } from 'react'
 
-const ContactForm: VFC = () => {
+export default function ContactForm() {
   const [formState, handleSubmit] = useHandleSubmit('contact-form')
 
   return (
@@ -71,5 +70,3 @@ const ContactForm: VFC = () => {
     </form>
   )
 }
-
-export default ContactForm

website/src/components/ContactForm/FormControl.module.css

@@ -5,3 +5,53 @@
 .notice:empty::before {
   content: '\00a0';
 }
+
+.textarea {
+  background-color: var(--inb-textfield-background-color);
+  border: var(--inb-textfield-border-width) solid
+    var(--inb-textfield-border-color);
+  border-radius: var(--inb-textfield-border-radius);
+  color: var(--inb-textfield-color);
+  display: block;
+  font-size: var(--inb-textfield-font-size);
+  font-family: var(--ifm-font-family-monospace);
+  height: calc(
+    (var(--inb-textfield-border-width) * 2) +
+      (var(--inb-textfield-padding) * 2) +
+      (1rem * var(--inb-textfield-line-height) * 10)
+  );
+  line-height: var(--inb-textfield-line-height);
+  padding: var(--inb-textfield-padding);
+  resize: none;
+  width: 100%;
+}
+
+.textarea:disabled {
+  --inb-textfield-background-color: var(--ifm-color-gray-100);
+  --inb-textfield-border-color: var(--ifm-color-gray-300);
+  --inb-textfield-color: var(--ifm-color-gray-500);
+
+  pointer-events: none;
+}
+
+.textarea:focus {
+  --inb-textfield-border-color: var(--ifm-color-primary-darker);
+
+  outline: 0;
+}
+
+.textarea::placeholder {
+  color: var(--inb-textfield-placeholder-color);
+}
+
+.textarea[aria-invalid]:not([aria-invalid='false']) {
+  background-color: var(--inb-textfield-invalid-background-color);
+  border-color: var(--inb-textfield-invalid-border-color);
+}
+
+.textarea[aria-invalid]:not([aria-invalid='false']):focus {
+  --inb-textfield-invalid-background-color: var(
+    --inb-textfield-background-color
+  );
+  --inb-textfield-invalid-border-color: var(--inb-textfield-border-color);
+}