一括登録ボタンの csv ファイル読み込み部分のみ実装

Author: kuramapommel

sample/src/components/organisms/products/bulk-import-button.stories.tsx

@@ -0,0 +1,23 @@
+import BulkImportButton from '@/components/organisms/products/bulk-import-button'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof BulkImportButton> = {
+  title: 'organisms/products/bulk-import-button',
+  component: BulkImportButton,
+  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 BulkImportButton>
+
+/**
+ * 一括登録ボタン
+ */
+export const Default: Story = {
+  args: {},
+}

sample/src/components/organisms/products/bulk-import-button.tsx

@@ -0,0 +1,35 @@
+import StandardButton from '@/components/atoms/buttons/standard-button'
+import { parse } from '@/libs/papaparse'
+import { validationSchema } from '@/reducks/products/types'
+import React, { ChangeEvent, useCallback } from 'react'
+import { z } from 'zod'
+
+const BulkImportButton = React.memo(function BulkImportButton() {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const onChange = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    const parsed = await parse(file, z.array(validationSchema))
+    alert(JSON.stringify(parsed))
+  }, [])
+
+  const upload = useCallback(() => {
+    inputRef.current?.click()
+  }, [])
+
+  return (
+    <div>
+      <StandardButton onclick={upload} name="一括登録" />
+      <input
+        hidden
+        type="file"
+        accept=".csv"
+        ref={inputRef}
+        onChange={onChange}
+      />
+    </div>
+  )
+})
+
+export default BulkImportButton

sample/src/pages/product-list.tsx

@@ -4,6 +4,7 @@ import ProductAdditionForm from '@/components/molecules/forms/products/product-a
 import ProductDeletionForm from '@/components/molecules/forms/products/product-deletion-form'
 import ProductEditingForm from '@/components/molecules/forms/products/product-editing-form'
 import Modal from '@/components/molecules/modals/modal'
+import BulkImportButton from '@/components/organisms/products/bulk-import-button'
 import TenantsTemplate from '@/components/templates/tenants-template'
 import { useProducts } from '@/hooks/use-products'
 import { getProductsAndRefresh } from '@/reducks/products/selectors'
@@ -55,6 +56,7 @@ const ProductList: React.FC = () => {
       <button css={styles.button} onClick={() => setIsModalOpen(true)}>
         新規作成
       </button>
+      <BulkImportButton />
 
       {isDeleteDialogOpen && productToDelete && (
         <div css={styles.overlay}>