Merge pull request #298 from arrow2nd/dev

dev
arrow2nd · Nov 18, 2023 · dd03bee · dd03bee · vercel · Nov 18, 2023
2 parents cee3de1 + 744562b
commit dd03bee
Show file tree

Hide file tree

Showing 83 changed files with 2,162 additions and 3,031 deletions.
diff --git a/.github/workflows/e2e.yaml b/.github/workflows/e2e.yaml
@@ -18,26 +18,26 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           cache: "pnpm"
 
       - name: Install dependencies
         run: pnpm install --no-frozen-lockfile
 
       - name: Setup playwright
-        run: npx playwright install --with-deps
+        run: pnpm exec playwright install --with-deps
 
       - name: Waiting for Vercel Preview
         uses: patrickedqvist/[email protected]
         id: shinypoems
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          max_timeout: 60
+          max_timeout: 180
 
       - name: Run E2E test
         run: |

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -12,12 +12,12 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           cache: "pnpm"
 
       - name: Install dependencies

diff --git a/.github/workflows/update.yaml b/.github/workflows/update.yaml
@@ -19,12 +19,12 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           cache: "pnpm"
 
       - name: Install dependencies

diff --git a/.github/workflows/vrt.yml b/.github/workflows/vrt.yml
@@ -18,12 +18,12 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           cache: "pnpm"
 
       - name: Install dependencies
@@ -37,12 +37,12 @@ jobs:
         id: shinypoems
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          max_timeout: 60
+          max_timeout: 180
 
       - name: Run VRT
         run: |
-          pnpm run test:vrt:update
-          pnpm run test:vrt
+          pnpm run vrt:update
+          pnpm run vrt
         env:
           PREVIEW_URL: ${{ steps.shinypoems.outputs.url }}
 

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,24 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "importOrder": [
+    "<THIRD_PARTY_MODULES>",
+    "^components/(.*)$",
+    "^libs/(.*)$",
+    "^data/(.*)$",
+    "^types/(.*)$",
+    "^styles/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}
diff --git a/.prettierrc.js b/.prettierrc.js
diff --git a/app/font.ts b/app/font.ts
@@ -0,0 +1,7 @@
+import { Kiwi_Maru } from "next/font/google";
+
+export const kiwiMaru = Kiwi_Maru({
+  weight: ["400"],
+  subsets: ["latin"],
+  variable: "--font-kiwimaru"
+});
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -9,7 +9,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ja">
-      <body>{children}</body>
+      <body className="flex min-h-screen flex-col bg-neutral-white">
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,23 +1,19 @@
-import { Kiwi_Maru } from "next/font/google";
 import { Metadata } from "next/types";
 
-import Footer from "components/home/footer";
-import Header from "components/home/header";
+import Footer from "components/common/footer";
+import Header from "components/common/header";
 import UI from "components/ui";
 
 import { generateOgpImageUrl, getPoem } from "libs/query";
 
+import { clothes } from "data/clothes";
 import { SiteInfo } from "data/site";
+import { units } from "data/units";
 
-const kiwiMaru = Kiwi_Maru({
-  weight: ["400"],
-  subsets: ["latin"],
-  variable: "--font-kiwimaru"
-});
+import { kiwiMaru } from "./font";
 
 type Props = {
-  params: { id: string };
-  searchParams: { [key: string]: string | string[] | undefined };
+  searchParams: { id?: string };
 };
 
 export const dynamic = "force-dynamic";
@@ -53,12 +49,10 @@ export default function Page({ searchParams }: Props) {
   const poem = getPoem(searchParams.id);
 
   return (
-    <div
-      className={`flex flex-col min-h-screen bg-neutral-white ${kiwiMaru.variable}`}
-    >
+    <main className={kiwiMaru.variable}>
       <Header />
-      <UI poemText={poem?.text ?? ""} />
+      <UI selectOptions={{ units, clothes }} poems={poem ? [poem] : []} />
       <Footer />
-    </div>
+    </main>
   );
 }
diff --git a/components/home/footer/index.tsx → components/common/footer/index.tsx b/components/home/footer/index.tsx → components/common/footer/index.tsx
@@ -2,14 +2,14 @@
 
 import Wave from "react-wavify";
 
-import { updatedAtUTC } from "data/poem-list";
+import { updatedAtUTC } from "data/poems";
 
 import Links from "./links";
 
 const Footer = () => (
   <footer className="w-full">
     <Wave
-      className="relative h-24 top-0.5 align-bottom"
+      className="relative top-0.5 h-24 align-bottom"
       fill="#4C7ABE"
       paused={false}
       options={{
@@ -18,9 +18,9 @@ const Footer = () => (
         speed: 0.155
       }}
     />
-    <div className="flex flex-col items-center justify-center px-8 pt-0.5 pb-20 tracking-wider text-sm text-center text-white bg-main">
+    <div className="flex flex-col items-center justify-center bg-main px-8 pb-20 pt-0.5 text-center text-sm tracking-wider text-white">
       <Links />
-      <span className="w-8 mb-8 border-b-2 border-dashed border-white" />
+      <span className="mb-8 w-8 border-b-2 border-dashed border-white" />
       <span className="mb-2" data-testid="last-updated">
         Last updated : {updatedAtUTC}
       </span>

diff --git a/components/home/footer/links/index.tsx → components/common/footer/links/index.tsx b/components/home/footer/links/index.tsx → components/common/footer/links/index.tsx
diff --git a/components/common/footer/links/link.tsx b/components/common/footer/links/link.tsx
@@ -0,0 +1,23 @@
+import { HTMLProps } from "react";
+
+import CommonLink from "components/common/link";
+
+const Link = ({
+  className = "",
+  children,
+  title,
+  href
+}: HTMLProps<HTMLAnchorElement>) => (
+  <div className={className}>
+    <CommonLink
+      className={`inline-flex flex-row items-center transition-colors hover:text-black`}
+      title={title}
+      href={href}
+    >
+      {children}
+      <span>{`by ${title}`}</span>
+    </CommonLink>
+  </div>
+);
+
+export default Link;
diff --git a/components/home/header/github-corner.tsx → components/common/header/github-corner.tsx b/components/home/header/github-corner.tsx → components/common/header/github-corner.tsx
diff --git a/components/home/header/index.tsx → components/common/header/index.tsx b/components/home/header/index.tsx → components/common/header/index.tsx
@@ -4,8 +4,8 @@ import LogoImg from "public/logo.png";
 import GitHubCorner from "./github-corner";
 
 const Header = () => (
-  <header className="flex justify-center items-center py-20 w-full">
-    <a className="w-64 md:w-80 text-none" href="" data-testid="logo">
+  <header className="flex w-full items-center justify-center py-20">
+    <a className="w-64 text-none md:w-80" href="/" data-testid="logo">
       <Image
         src={LogoImg}
         alt="logo"

diff --git a/components/common/link.test.tsx b/components/common/link.test.tsx
@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react";
+
+import Link from "./link";
+
+describe("Link", () => {
+  const props = {
+    title: "サンプル",
+    href: "http://example.com/"
+  };
+
+  test("子要素を表示できる", () => {
+    const { getByText } = render(<Link {...props}>test</Link>);
+    expect(getByText("test")).toBeDefined();
+  });
+
+  test("子要素が省略された場合にtitleが表示される", () => {
+    const { getByText } = render(<Link {...props} />);
+    expect(getByText(props.title)).toBeDefined();
+  });
+});
diff --git a/components/common/link.tsx b/components/common/link.tsx
@@ -0,0 +1,9 @@
+import { HTMLProps } from "react";
+
+const Link = (props: HTMLProps<HTMLAnchorElement>) => (
+  <a {...props} target="_blank" rel="noopener noreferrer">
+    {props.children || props.title}
+  </a>
+);
+
+export default Link;
diff --git a/components/common/link/index.test.tsx b/components/common/link/index.test.tsx
diff --git a/components/common/link/index.tsx b/components/common/link/index.tsx