feat: 特定日の天気詳細を表示する

src/app/pages/specific_day.tsx

@@ -1,12 +1,30 @@
+import { Suspense } from "react"
+import { ErrorBoundary } from "react-error-boundary"
+
+import { HeadGroup } from "@/components/ui/HeadGroup"
 import { Section } from "@/components/ui/Section"
+import * as BackButton from "@/features/weather/components/back_button"
 import * as LocationInput from "@/features/weather/components/location_input"
+import * as SpecificDate from "@/features/weather/components/specific_date"
+import * as WeatherSpecificDay from "@/features/weather/components/weather_specific_day"
 import { LocationContextProvider } from "@/features/weather/providers/location/provider"
 
 export default function SpecificDay() {
   return (
     <LocationContextProvider>
       <Section>
-        <LocationInput.Container />
+        <HeadGroup>
+          <BackButton.Container />
+          <SpecificDate.Container />
+        </HeadGroup>
+        <ErrorBoundary fallbackRender={LocationInput.Error}>
+          <LocationInput.Container />
+        </ErrorBoundary>
+        <ErrorBoundary fallbackRender={WeatherSpecificDay.Error}>
+          <Suspense fallback={<WeatherSpecificDay.Loading />}>
+            <WeatherSpecificDay.Container />
+          </Suspense>
+        </ErrorBoundary>
       </Section>
     </LocationContextProvider>
   )

src/components/ui/Button/index.css.ts

@@ -0,0 +1,36 @@
+import { recipe, RecipeVariants } from "@vanilla-extract/recipes"
+
+import { vars } from "@/styles/vars.css"
+
+export const button = recipe({
+  base: {
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: vars.rounded.md,
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    fontWeight: 500,
+    whiteSpace: "nowrap",
+    color: vars.colors.button.text,
+    cursor: "pointer",
+    ":hover": {
+      opacity: ".7",
+    },
+  },
+  variants: {
+    color: {
+      primary: { background: vars.colors.button.primary },
+    },
+    size: {
+      sm: { padding: "0 0.75rem", height: "2.25rem" },
+      md: { padding: "0 1rem", height: "2.5rem" },
+    },
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+  },
+})
+
+export type ButtonVariants = RecipeVariants<typeof button>

src/components/ui/Button/index.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { expect, fn, userEvent, within } from "@storybook/test"
+
+import { Button } from "."
+
+const meta = {
+  title: "UI/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  args: { children: "button", onClick: fn() },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const testButton: Story["play"] = async ({ args, canvasElement, step }) => {
+  const canvas = within(canvasElement)
+  const button = await canvas.findByRole("button")
+
+  await step("ボタンをクリックできること", async () => {
+    await userEvent.click(button)
+    await expect(args.onClick).toHaveBeenCalled()
+  })
+}
+
+const testDisabledButton: Story["play"] = async ({ args, canvasElement, step }) => {
+  const canvas = within(canvasElement)
+  const button = await canvas.findByRole("button")
+
+  await step("ボタンがクリックできないこと", async () => {
+    await userEvent.click(button, { pointerEventsCheck: 0 })
+    await expect(args.onClick).not.toHaveBeenCalled()
+  })
+}
+
+export const Default: Story = {
+  play: testButton,
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  play: testDisabledButton,
+}
+
+export const Small: Story = {
+  args: { size: "sm" },
+}
+
+export const Medium: Story = {
+  args: { size: "md" },
+}

src/components/ui/Button/index.tsx

@@ -0,0 +1,14 @@
+import clsx from "clsx"
+import type { ComponentPropsWithoutRef } from "react"
+import { forwardRef } from "react"
+
+import * as styles from "./index.css"
+
+type ButtonProps = ComponentPropsWithoutRef<"button"> & styles.ButtonVariants
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function ButtonBase(
+  { color, size, className, ...props },
+  ref,
+) {
+  return <button className={clsx(styles.button({ color, size }), className)} ref={ref} {...props} />
+})

src/components/ui/HeadGroup/index.css.ts

@@ -0,0 +1,7 @@
+import { style } from "@vanilla-extract/css"
+
+export const module = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+})

src/components/ui/HeadGroup/index.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Button } from "../Button"
+import { Heading } from "../Heading"
+import { HeadGroup } from "."
+
+const meta = {
+  title: "UI/HeadGroup",
+  component: HeadGroup,
+  tags: ["autodocs"],
+  args: {
+    children: (
+      <>
+        <Heading className="grow" level={"h1"}>
+          見出し見出し
+        </Heading>
+        <Button size="sm">詳細へ</Button>
+      </>
+    ),
+  },
+} satisfies Meta<typeof HeadGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/components/ui/HeadGroup/index.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx"
+import React from "react"
+
+import * as styles from "./index.css"
+
+type Props = {
+  children: React.ReactNode
+  className?: string
+}
+
+export const HeadGroup = ({ children, className }: Props) => {
+  return <header className={clsx(styles.module, className)}>{children}</header>
+}

src/features/weather/components/back_button/container.tsx

@@ -0,0 +1,23 @@
+import { ArrowLeft } from "lucide-react"
+import { useNavigate } from "react-router-dom"
+
+import { useLinkProps } from "@/hooks"
+
+import { Presenter, PresenterProps } from "./presenter"
+
+export const Container = () => {
+  const navigate = useNavigate()
+  const { generateLinkProps } = useLinkProps()
+
+  const presenterProps = {
+    children: (
+      <>
+        <ArrowLeft />
+        戻る
+      </>
+    ),
+    onClick: () => navigate(generateLinkProps({ pathname: "/", removeParams: ["date"] }).to),
+  } satisfies PresenterProps
+
+  return <Presenter {...presenterProps} />
+}

src/features/weather/components/back_button/index.ts

@@ -0,0 +1,2 @@
+export * from "./container"
+export * from "./presenter"

src/features/weather/components/back_button/presenter.css.ts

@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css"
+
+export const module = style({
+  display: "flex",
+  gap: "0.5rem",
+})

src/features/weather/components/back_button/presenter.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import { Presenter } from "./presenter"
+
+const meta = {
+  title: "Features/Weather/BackButton/Presenter",
+  tags: ["autodocs"],
+  component: Presenter,
+  args: {
+    children: "戻る",
+  },
+} satisfies Meta<typeof Presenter>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}

src/features/weather/components/back_button/presenter.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react"
+
+import { Button } from "@/components/ui/Button"
+
+import * as styles from "./presenter.css"
+
+export type PresenterProps = ComponentProps<typeof Button>
+
+export const Presenter = ({ ...props }: PresenterProps) => {
+  return <Button className={styles.module} {...props} />
+}

src/features/weather/components/location_input/container.tsx

@@ -1,5 +1,6 @@
 import { Suspense, useCallback, useState } from "react"
 
+import { useWeatherParams } from "@/features/weather/hooks"
 import { useLocationContext } from "@/features/weather/providers/location/useLocationContext"
 import { useDebouncedValue } from "@/hooks"
 
@@ -11,15 +12,18 @@ export const Container = () => {
   const [inputLocation, setInputLocation] = useState<string>("")
   const [debouncedValue] = useDebouncedValue(inputLocation, 300)
 
+  const { setSearchParams, date } = useWeatherParams({})
+
   const { setLocation } = useLocationContext()
 
   const onClickHandler = useCallback(
     (location: string) => {
       setLocation(location)
       setInputLocation(location)
       setIsFocused(false)
+      setSearchParams({ location, date })
     },
-    [setLocation],
+    [setLocation, setSearchParams, date],
   )
 
   const handleFocus = useCallback(() => {

src/features/weather/components/specific_date/container.tsx

@@ -0,0 +1,12 @@
+import { useWeatherParams } from "@/features/weather/hooks"
+
+import { Presenter, PresenterProps } from "./presenter"
+
+export const Container = () => {
+  const { date } = useWeatherParams({})
+  const presenterProps = {
+    date,
+  } satisfies PresenterProps
+
+  return <Presenter {...presenterProps} />
+}

src/features/weather/components/specific_date/index.ts

@@ -0,0 +1,2 @@
+export * from "./container"
+export * from "./presenter"

src/features/weather/components/specific_date/presenter.css.ts

@@ -0,0 +1,18 @@
+import { style } from "@vanilla-extract/css"
+
+import { responsiveStyle } from "@/styles/utils"
+import { vars } from "@/styles/vars.css"
+
+export const module = style([
+  {
+    fontWeight: "bold",
+    fontSize: vars.font.size["xl"],
+    lineHeight: vars.font.lineHeight["xl"],
+  },
+  responsiveStyle({
+    md: {
+      fontSize: vars.font.size["3xl"],
+      lineHeight: vars.font.lineHeight["3xl"],
+    },
+  }),
+])

src/features/weather/components/specific_date/presenter.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import { format } from "@/utils"
+
+import { Presenter } from "./presenter"
+
+const date = "2024-10-01"
+
+const meta = {
+  title: "Features/Weather/SpecificDate/Presenter",
+  tags: ["autodocs"],
+  component: Presenter,
+  args: {
+    date: format(new Date(date), "yyyy-MM-dd"),
+  },
+} satisfies Meta<typeof Presenter>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}

src/features/weather/components/specific_date/presenter.test.tsx

@@ -0,0 +1,17 @@
+import { composeStories } from "@storybook/react"
+import { render, screen } from "@testing-library/react"
+import { describe, expect, test } from "vitest"
+
+import * as stories from "./presenter.stories"
+
+const { Default } = composeStories(stories)
+
+describe("Features/Weather/SpecificDate/Presenter", () => {
+  test("should render Heading & time ", () => {
+    const date = "2024-10-01"
+    render(<Default />)
+    const time = screen.getByTestId("datetime")
+    expect(time).toBeInTheDocument()
+    expect(time).toHaveAttribute("datetime", date)
+  })
+})

src/features/weather/components/specific_date/presenter.tsx

@@ -0,0 +1,13 @@
+import * as styles from "./presenter.css"
+
+export type PresenterProps = {
+  date: string
+}
+
+export const Presenter = ({ ...props }: PresenterProps) => {
+  return (
+    <time data-testid="datetime" dateTime={props.date} className={styles.module}>
+      {props.date}
+    </time>
+  )
+}