壮大なリファクタリングを実施

sample/src/components/atoms/buttons/submit-button.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-interface SubmitButtonProps {
+type Props = {
   /**
    * ボタンのテキスト
    */
@@ -17,20 +17,20 @@ interface SubmitButtonProps {
 /**
  * フォームの送信ボタン
  */
-const SubmitButton: React.FC<SubmitButtonProps> = React.memo(
-  function SubmitButton(props: SubmitButtonProps) {
-    const buttonStyleClasses = `text-xl w-28 bg-green-600 text-white p-2 border-none rounded-md cursor-pointer ${props.className} ${props.disabled ? 'opacity-50' : 'hover:bg-green-700'}`
+const SubmitButton: React.FC<Props> = React.memo(function SubmitButton(
+  props: Props,
+) {
+  const buttonStyleClasses = `text-xl w-28 bg-green-600 text-white p-2 border-none rounded-md cursor-pointer ${props.className} ${props.disabled ? 'opacity-50' : 'hover:bg-green-700'}`
 
-    return (
-      <button
-        type="submit"
-        className={buttonStyleClasses}
-        disabled={props.disabled}
-      >
-        {props.children}
-      </button>
-    )
-  },
-)
+  return (
+    <button
+      type="submit"
+      className={buttonStyleClasses}
+      disabled={props.disabled}
+    >
+      {props.children}
+    </button>
+  )
+})
 
 export default SubmitButton

sample/src/components/molecules/forms/logins/login-form.stories.tsx

@@ -0,0 +1,33 @@
+import LoginForm from '@/components/molecules/forms/logins/login-form'
+import type { Meta, StoryObj } from '@storybook/react'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+
+const meta: Meta<typeof LoginForm> = {
+  title: 'molecules/forms/logins/login-form',
+  component: LoginForm,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof LoginForm>
+
+/**
+ * width: 100% を指定しているので、親オブジェクトで調整が必要です
+ * 下記のバリデーションルールが適用されています
+ * * ユーザー名：４文字以上
+ * * パスワード：８文字以上
+ */
+export const Default: Story = {
+  render: () => (
+    <MemoryRouter initialEntries={['/login']}>
+      <Routes>
+        <Route path="/login" element={<LoginForm />} />
+      </Routes>
+    </MemoryRouter>
+  ),
+}

sample/src/components/molecules/forms/products/product-addition-form.stories.tsx

@@ -0,0 +1,27 @@
+import ProductAdditionForm from '@/components/molecules/forms/products/product-addition-form'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof ProductAdditionForm> = {
+  title: 'molecules/forms/products/product-addition-form',
+  component: ProductAdditionForm,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ProductAdditionForm>
+
+/**
+ * 活性化時
+ *
+ * イメージURL には `https://placehold.jp/150x150.png` などを利用すると動作確認できます
+ */
+export const Default: Story = {
+  args: {
+    afterSubmit: () => alert('submit されました'),
+  },
+}

sample/src/components/molecules/forms/product-addition-form.tsx → sample/src/components/molecules/forms/products/product-addition-form.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
+import { useProductForm } from '@/hooks/use-product-form'
 import { useProducts } from '@/hooks/use-products'
 import { getAppend } from '@/reducks/products/selectors'
 import { Product } from '@/reducks/products/types'
-import { useProductForm } from '@/hooks/use-product-form'
+import React from 'react'
 
-type ProductAdditionFormProps = {
+type Props = {
   afterSubmit: () => void
 }
 
-const ProductAdditionForm: React.FC<ProductAdditionFormProps> = React.memo(
-  function ProductAdditionForm(props: ProductAdditionFormProps) {
+const ProductAdditionForm: React.FC<Props> = React.memo(
+  function ProductAdditionForm(props: Props) {
     const {
       register,
       handleSubmit,

sample/src/components/molecules/forms/products/product-deletion-form.stories.tsx

@@ -0,0 +1,34 @@
+import ProductDeletionForm from '@/components/molecules/forms/products/product-deletion-form'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof ProductDeletionForm> = {
+  title: 'molecules/forms/products/product-deletion-form',
+  component: ProductDeletionForm,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ProductDeletionForm>
+
+/**
+ * 活性化時
+ */
+export const Default: Story = {
+  args: {
+    selectedProduct: {
+      id: 123,
+      name: '商品A',
+      image: '商品.jpg',
+      price: 12000,
+      description:
+        'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis alias, reiciendis commodi possimus, maiores accusantium, iusto repellendus minima labore libero eius magnam impedit?',
+    },
+    handleCancel: () => alert('キャンセル'),
+    afterSubmit: () => alert('submit されました'),
+  },
+}

sample/src/components/molecules/forms/product-deletion-form.tsx → sample/src/components/molecules/forms/products/product-deletion-form.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
 import { useProducts } from '@/hooks/use-products'
 import { getRemove } from '@/reducks/products/selectors'
 import { Product } from '@/reducks/products/types'
+import React from 'react'
 
-type ProductDeletionFormProps = {
+type Props = {
   selectedProduct: Product
   handleCancel: () => void
   afterSubmit: () => void
 }
 
-const ProductDeletionForm: React.FC<ProductDeletionFormProps> = React.memo(
-  function ProductDeletionForm(props: ProductDeletionFormProps) {
+const ProductDeletionForm: React.FC<Props> = React.memo(
+  function ProductDeletionForm(props: Props) {
     const remove = useProducts(getRemove)
 
     const handleDeleteProduct = async (e: React.FormEvent) => {

sample/src/components/molecules/forms/products/product-editing-form.stories.tsx

@@ -0,0 +1,36 @@
+import ProductEditingForm from '@/components/molecules/forms/products/product-editing-form'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof ProductEditingForm> = {
+  title: 'molecules/forms/products/product-editing-form',
+  component: ProductEditingForm,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ProductEditingForm>
+
+/**
+ * 活性化時
+ *
+ * イメージURL には `https://placehold.jp/150x150.png` などを利用すると動作確認できます
+ */
+export const Default: Story = {
+  args: {
+    initialCurrentProduct: {
+      id: 123,
+      name: '商品A',
+      image: '商品.jpg',
+      price: 12000,
+      description:
+        'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis alias, reiciendis commodi possimus, maiores accusantium, iusto repellendus minima labore libero eius magnam impedit?',
+    },
+    handleCancel: () => alert('キャンセル'),
+    afterSubmit: () => alert('submit されました'),
+  },
+}

sample/src/components/molecules/forms/product-editing-form.tsx → sample/src/components/molecules/forms/products/product-editing-form.tsx

@@ -1,25 +1,30 @@
-import React from 'react'
+import { useProductForm } from '@/hooks/use-product-form'
 import { useProducts } from '@/hooks/use-products'
 import { getUpdate } from '@/reducks/products/selectors'
-import { useProductForm } from '@/hooks/use-product-form'
 import { Product } from '@/reducks/products/types'
+import React from 'react'
 
-type ProductEditingFormProps = {
+type Props = {
   initialCurrentProduct: Product
   handleCancel: () => void
   afterSubmit: () => void
 }
-const ProductEditingForm: React.FC<ProductEditingFormProps> = React.memo(
-  function ProductEditingForm(props: ProductEditingFormProps) {
+const ProductEditingForm: React.FC<Props> = React.memo(
+  function ProductEditingForm(props: Props) {
+    console.log(
+      `initialCurrentProduct: ${JSON.stringify(props.initialCurrentProduct)}`,
+    )
     const {
       register,
       handleSubmit,
       formState: { errors, isValid },
     } = useProductForm(props.initialCurrentProduct)
     const update = useProducts(getUpdate)
 
-    const handleSaveProduct = (product: Product) =>
-      update(product).then(() => props.afterSubmit())
+    const handleSaveProduct = (product: Product) => {
+      console.log(`update product: ${JSON.stringify(product)}`)
+      return update(product).then(() => props.afterSubmit())
+    }
 
     return (
       <form onSubmit={handleSubmit(handleSaveProduct)}>

sample/src/components/molecules/modals/modal.stories.tsx

@@ -19,6 +19,10 @@ type Story = StoryObj<typeof Modal>
 
 /**
  * 「開く」ボタン押下でモーダル展開時の挙動を確認することができます
+ *
+ * [dialog](https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog) 要素を使用して実装しています <br>
+ * [createPortal](https://ja.react.dev/reference/react-dom/createPortal) を使用して、body 直下にレンダリングされるようにしています <br>
+ * isOpen が false のときはレンダリングしません <br>
  */
 export const Default: Story = {
   render: () => {

sample/src/components/molecules/modals/modal.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 
 type Props = {
   isOpen: boolean
@@ -22,19 +23,23 @@ const Modal = React.memo(function Modal({
 
   return (
     <>
-      <dialog
-        ref={dialogRef}
-        className="min-w-96 bg-white border-none rounded-md"
-        onClose={onCancel}
-        onClick={onCancel}
-      >
-        <div
-          className="flex flex-col justify-center p-0 m-0"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {children}
-        </div>
-      </dialog>
+      {isOpen &&
+        createPortal(
+          <dialog
+            ref={dialogRef}
+            className="min-w-96 bg-white border-none rounded-md"
+            onClose={onCancel}
+            onClick={onCancel}
+          >
+            <div
+              className="flex flex-col justify-center p-0 m-0"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {children}
+            </div>
+          </dialog>,
+          document.body,
+        )}
     </>
   )
 })

sample/src/components/organisms/tenants/posts/bulk-action-buttons.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {
+  BulkDeleteButton,
+  BulkExportButton,
+  BulkUpdateButton,
+} from 'react-admin'
+
+const BulkActionButtons = React.memo(function BulkActionButtons() {
+  return (
+    <>
+      <BulkDeleteButton />
+      <BulkExportButton />
+      <BulkUpdateButton label="Reset Title" data={{ title: '' }} />
+    </>
+  )
+})
+
+export default BulkActionButtons