feat: ReportCard component created

src/shared/composites/ListCard/ListCard.stories.tsx

@@ -0,0 +1,164 @@
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ListCard } from './ListCard'
+
+const meta = {
+  title: 'Shared/Composites/ListCard',
+
+  component: ListCard,
+
+  tags: ['autodocs'],
+} satisfies Meta<typeof ListCard>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const header = (
+  <div className="space-y-1">
+    <div className="text-text-primary text-sm font-medium">Report title</div>
+
+    <div className="text-text-secondary text-xs">Additional metadata</div>
+  </div>
+)
+
+const body = <div className="text-text-primary text-sm">Expanded body content</div>
+
+const footer = (
+  <>
+    <button type="button" className="border-border-secondary rounded-md border px-3 py-2 text-sm">
+      Action 1
+    </button>
+
+    <button type="button" className="border-border-secondary rounded-md border px-3 py-2 text-sm">
+      Action 2
+    </button>
+  </>
+)
+
+export const Collapsed: Story = {
+  args: {
+    header,
+
+    children: body,
+
+    isExpanded: false,
+  },
+}
+
+export const Expanded: Story = {
+  args: {
+    header,
+
+    children: body,
+
+    isExpanded: true,
+  },
+}
+
+export const ExpandedWithFooter: Story = {
+  args: {
+    header,
+
+    children: body,
+
+    footer,
+
+    isExpanded: true,
+  },
+}
+
+export const HoverState: Story = {
+  args: {
+    header,
+    children: body,
+  },
+  render: () => (
+    <ListCard header={header} isClickable isExpanded>
+      {body}
+    </ListCard>
+  ),
+}
+
+export const Expandable: Story = {
+  args: {
+    header,
+    children: body,
+  },
+  render: () => {
+    const [expanded, setExpanded] = useState(false)
+
+    return (
+      <ListCard
+        header={header}
+        footer={footer}
+        isClickable
+        isExpanded={expanded}
+        onToggle={() => setExpanded((prev) => !prev)}
+      >
+        {body}
+      </ListCard>
+    )
+  },
+}
+
+export const NoToggle: Story = {
+  args: {
+    header,
+
+    children: body,
+
+    isExpanded: true,
+
+    isClickable: false,
+  },
+}
+
+export const FooterActionsDoNotCollapse: Story = {
+  args: {
+    header,
+    children: body,
+  },
+
+  render: () => {
+    const [expanded, setExpanded] = useState(true)
+
+    return (
+      <ListCard
+        header={header}
+        footer={
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                console.log('Approve clicked')
+              }}
+              className="border-border-secondary rounded-md border px-3 py-2 text-sm"
+            >
+              Approve
+            </button>
+
+            <button
+              type="button"
+              onClick={() => {
+                console.log('Reject clicked')
+              }}
+              className="border-border-danger text-text-danger rounded-md border px-3 py-2 text-sm"
+            >
+              Reject
+            </button>
+          </>
+        }
+        isClickable
+        isExpanded={expanded}
+        onToggle={() => {
+          setExpanded((prev) => !prev)
+        }}
+      >
+        {body}
+      </ListCard>
+    )
+  },
+}

src/shared/composites/ListCard/ListCard.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+import { BaseCard } from '@/shared/primitives/BaseCard'
+
+export interface ListCardProps {
+  children: React.ReactNode
+
+  header: React.ReactNode
+
+  footer?: React.ReactNode
+
+  isClickable?: boolean
+
+  isExpanded?: boolean
+
+  onToggle?: () => void
+
+  className?: string
+
+  testId?: string
+}
+
+export function ListCard({
+  children,
+
+  header,
+
+  footer,
+
+  isClickable = false,
+
+  isExpanded = false,
+
+  onToggle,
+}: ListCardProps) {
+  const handleToggle = () => {
+    if (!isClickable || !onToggle) {
+      return
+    }
+
+    onToggle()
+  }
+
+  return (
+    <BaseCard
+      role={isClickable ? 'button' : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onKeyDown={(e) => {
+        if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault()
+
+          handleToggle()
+        }
+      }}
+    >
+      <div className="p-4">{header}</div>
+
+      {isExpanded && (
+        <>
+          <div className="border-border-tertiary border-t p-4">{children}</div>
+
+          {footer && (
+            <div
+              onClickCapture={(e) => e.stopPropagation()}
+              className="border-border-tertiary flex flex-wrap gap-2 border-t p-4"
+            >
+              {footer}
+            </div>
+          )}
+        </>
+      )}
+    </BaseCard>
+  )
+}
+
+export default ListCard

src/shared/composites/ListCard/index.ts

@@ -0,0 +1,3 @@
+export * from './ListCard'
+
+export { default } from './ListCard'

src/shared/composites/ReportCard/ReportCard.stories.tsx

@@ -0,0 +1,86 @@
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ReportCard } from './ReportCard'
+
+const meta = {
+  title: 'Shared/composites/ReportCard',
+
+  component: ReportCard,
+
+  tags: ['autodocs'],
+} satisfies Meta<typeof ReportCard>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Expanded: Story = {
+  args: {
+    useDummyData: true,
+
+    isExpanded: true,
+
+    onAction: (reportId, action) => {
+      console.log(reportId, action)
+    },
+
+    onToggleExpand: () => {},
+  },
+}
+
+export const Collapsed: Story = {
+  args: {
+    useDummyData: true,
+
+    isExpanded: false,
+
+    onAction: (reportId, action) => {
+      console.log(reportId, action)
+    },
+
+    onToggleExpand: () => {},
+  },
+}
+
+export const Interactive: Story = {
+  args: {
+    useDummyData: true,
+    isExpanded: false,
+    onToggleExpand: () => {},
+    onAction: () => {},
+  },
+  render: () => {
+    const [expanded, setExpanded] = useState(false)
+
+    return (
+      <ReportCard
+        useDummyData
+        isExpanded={expanded}
+        onToggleExpand={() => setExpanded(!expanded)}
+        onAction={(reportId, action) => {
+          console.log(reportId, action)
+        }}
+      />
+    )
+  },
+}
+
+export const Claimed: Story = {
+  args: {
+    useDummyData: true,
+
+    isExpanded: true,
+
+    isClaimed: true,
+
+    claimedBy: 'Moderator Jane',
+
+    onAction: (reportId, action) => {
+      console.log(reportId, action)
+    },
+
+    onToggleExpand: () => {},
+  },
+}