基本的なコンポーネント群を追加

Author: kuramapommel

sample/src/components/atoms/buttons/standard-button.stories.tsx

@@ -0,0 +1,38 @@
+import StandardButton from '@/components/atoms/buttons/standard-button'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof StandardButton> = {
+  title: 'atoms/buttons/standard-button',
+  component: StandardButton,
+  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 StandardButton>
+
+/**
+ * 活性化時
+ */
+export const Default: Story = {
+  args: {
+    onclick: () => alert('標準ボタンが押下されました'),
+    name: '活性状態',
+    disabled: false,
+  },
+}
+
+/**
+ * 非活性化時
+ */
+export const Disabled: Story = {
+  args: {
+    onclick: () => alert('error'),
+    name: '非活性状態',
+    disabled: true,
+  },
+}

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

@@ -0,0 +1,30 @@
+import React from 'react'
+
+type Props = {
+  onclick: () => void
+  name: string
+  disabled?: boolean
+  classes?: string[]
+}
+
+const StandardButton = React.memo(function StandardButton({
+  name,
+  onclick,
+  disabled = false,
+  classes = [],
+}: Props) {
+  const style = `text-xl min-w-28 bg-green-600 text-white p-2 border-none rounded-md cursor-pointer ${disabled ? 'opacity-50' : 'hover:bg-green-700'} mx-auto${classes.map((className) => ` ${className}`)}`
+
+  return (
+    <button
+      type={'button'}
+      onClick={onclick}
+      className={style}
+      disabled={disabled}
+    >
+      {name}
+    </button>
+  )
+})
+
+export default StandardButton

sample/src/components/molecules/modal/form-modal.tsx renamed to sample/src/components/molecules/modals/form-modal.tsx

@@ -0,0 +1,41 @@
+import StandardButton from '@/components/atoms/buttons/standard-button'
+import Modal from '@/components/molecules/modals/modal'
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+
+const meta: Meta<typeof Modal> = {
+  title: 'molecules/modals/modal',
+  component: Modal,
+  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 Modal>
+
+/**
+ * 「開く」ボタン押下でモーダル展開時の挙動を確認することができます
+ */
+export const Default: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+      <>
+        <StandardButton onclick={() => setIsOpen(true)} name={'開く'} />
+        <Modal isOpen={isOpen} onCancel={() => setIsOpen(false)}>
+          <h1 className="text-center text-2xl mt-2 mb-5 mx-auto">モーダル</h1>
+          <p className="text-base mb-5 mx-auto">
+            モーダル内の要素は自由に設定できます
+          </p>
+          <StandardButton onclick={() => setIsOpen(false)} name={'閉じる'} />
+          <div className="min-h-5" />
+        </Modal>
+      </>
+    )
+  },
+}

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

@@ -0,0 +1,42 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+
+type Props = {
+  isOpen: boolean
+  children: React.ReactNode
+  onCancel: () => void
+}
+
+const Modal = React.memo(function Modal({
+  isOpen = false,
+  children,
+  onCancel,
+}: Props) {
+  const dialogRef = useRef<HTMLDialogElement>(null)
+  const open = useCallback(() => dialogRef.current?.showModal(), [])
+  const close = useCallback(() => dialogRef.current?.close(), [])
+
+  useEffect(() => {
+    const switchOpenClose = isOpen ? open : close
+    switchOpenClose()
+  }, [isOpen, open, close])
+
+  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>
+    </>
+  )
+})
+
+export default Modal

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

@@ -1,15 +1,15 @@
 // ProductList.tsx
 /** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react'
-import { useEffect, useState } from 'react'
 import ProductAdditionForm from '@/components/molecules/forms/product-addition-form'
-import ProductEditingForm from '@/components/molecules/forms/product-editing-form'
-import FormModal from '@/components/molecules/modal/form-modal'
 import ProductDeletionForm from '@/components/molecules/forms/product-deletion-form'
+import ProductEditingForm from '@/components/molecules/forms/product-editing-form'
+import FormModal from '@/components/molecules/modals/form-modal'
+import TenantsTemplate from '@/components/templtates/tenants-template'
 import { useProducts } from '@/hooks/use-products'
 import { getProductsAndRefresh } from '@/reducks/products/selectors'
-import TenantsTemplate from '@/components/templtates/tenants-template'
 import { Product } from '@/reducks/products/types'
+import { css } from '@emotion/react'
+import { useEffect, useState } from 'react'
 
 const styles = {
   button: css`