Merge pull request #22 from crow-fox/refactor/findTailwindColor

findTailwindColorに引数としてtailwindColorを渡すように変更
crow-fox · Apr 27, 2024 · 1348bc0 · 1348bc0
2 parents 7e72612 + 3cc8fc3
commit 1348bc0
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 24 deletions.
diff --git a/app/_features/color/ColorController.tsx b/app/_features/color/ColorController.tsx
@@ -1,9 +1,16 @@
 "use client";
 
+import { TailwindColors } from "@/app/_features/color/tailwind";
 import { useTailwindColorQuery } from "@/app/_features/color/useTailwindColorQuery";
 
-export function ColorController() {
-  const { currentColor, resetCurrentColor } = useTailwindColorQuery();
+type Props = {
+  tailwindColors: TailwindColors;
+};
+
+export function ColorController({ tailwindColors }: Props) {
+  const { currentColor, resetCurrentColor } =
+    useTailwindColorQuery(tailwindColors);
+
   return (
     <div>
       {currentColor.type === "notFound" ? (

diff --git a/app/_features/color/ColorGridItem.tsx b/app/_features/color/ColorGridItem.tsx
@@ -6,8 +6,10 @@ import {
 } from "@/app/_features/color/contrast";
 import {
   TailwindColorGrade,
+  TailwindColors,
   TailwindGradedColorName,
   TailwindSingleColorName,
+  getTailwindColors,
 } from "@/app/_features/color/tailwind";
 import { useTailwindColorQuery } from "@/app/_features/color/useTailwindColorQuery";
 import Link from "next/link";
@@ -23,10 +25,12 @@ type Props = {
         name: TailwindSingleColorName;
         value: string;
       };
+  tailwindColors: TailwindColors;
 };
 
-export function ColorGridItem({ color }: Props) {
-  const { createColorHref, currentColor } = useTailwindColorQuery();
+export function ColorGridItem({ color, tailwindColors }: Props) {
+  const { createColorHref, currentColor } =
+    useTailwindColorQuery(tailwindColors);
 
   const contrastResult =
     currentColor.type === "notFound"

diff --git a/app/_features/color/ColorGridTable.tsx b/app/_features/color/ColorGridTable.tsx
@@ -11,8 +11,7 @@ import { Suspense } from "react";
 
 export function ColorGridTable() {
   const tailwindThemeColors = getTailwindThemeColors();
-  const { graded: tailwindGradedColors, single: tailwindSingleColors } =
-    getTailwindColors(tailwindThemeColors);
+  const tailwindColors = getTailwindColors(tailwindThemeColors);
   const tailwindColorGrades = getTailwindColorGrades(tailwindThemeColors);
 
   return (
@@ -35,20 +34,20 @@ export function ColorGridTable() {
           </tr>
         </thead>
         <tbody>
-          {getObjectKeys(tailwindGradedColors).map((name) => (
+          {getObjectKeys(tailwindColors.graded).map((name) => (
             <tr key={name}>
               <th className=" border border-black px-2 py-2 align-top text-sm">
                 {capitalizeFirstLetter(name)}
               </th>
-              {getObjectKeys(tailwindGradedColors[name]).map((grade) => (
+              {getObjectKeys(tailwindColors.graded[name]).map((grade) => (
                 <td key={grade} className="border border-slate-200">
                   <Suspense
                     fallback={
                       <FallbackColorGridItem
                         color={{
                           name,
                           grade,
-                          value: tailwindGradedColors[name][grade],
+                          value: tailwindColors.graded[name][grade],
                         }}
                       />
                     }
@@ -57,15 +56,16 @@ export function ColorGridTable() {
                       color={{
                         name,
                         grade,
-                        value: tailwindGradedColors[name][grade],
+                        value: tailwindColors.graded[name][grade],
                       }}
+                      tailwindColors={tailwindColors}
                     />
                   </Suspense>
                 </td>
               ))}
             </tr>
           ))}
-          {getObjectKeys(tailwindSingleColors).map((name) => (
+          {getObjectKeys(tailwindColors.single).map((name) => (
             <tr key={name}>
               <th className=" border border-black px-2 py-2 align-top text-sm">
                 {capitalizeFirstLetter(name)}
@@ -79,16 +79,17 @@ export function ColorGridTable() {
                     <FallbackColorGridItem
                       color={{
                         name,
-                        value: tailwindSingleColors[name],
+                        value: tailwindColors.single[name],
                       }}
                     />
                   }
                 >
                   <ColorGridItem
                     color={{
                       name,
-                      value: tailwindSingleColors[name],
+                      value: tailwindColors.single[name],
                     }}
+                    tailwindColors={tailwindColors}
                   />
                 </Suspense>
               </td>

diff --git a/app/_features/color/tailwind.ts b/app/_features/color/tailwind.ts
@@ -42,6 +42,8 @@ export function getTailwindColors(colors: DefaultColors) {
   } as const;
 }
 
+export type TailwindColors = ReturnType<typeof getTailwindColors>;
+
 const tailwindGradedColorNameSchema = union(
   getObjectKeys(getTailwindColors(getTailwindThemeColors()).graded).map(
     (color) => literal(color),
@@ -121,7 +123,10 @@ export function isTailwindColorGrade(
   return false;
 }
 
-export function findTailwindColor(color: { name: string; grade: string }):
+export function findTailwindColor(
+  color: { name: string; grade: string },
+  tailwindColors: TailwindColors,
+):
   | {
       type: "notFound";
     }
@@ -140,9 +145,6 @@ export function findTailwindColor(color: { name: string; grade: string }):
         value: string;
       };
     } {
-  const tailwindThemeColors = getTailwindThemeColors();
-  const tailwindColors = getTailwindColors(tailwindThemeColors);
-
   if (!isTailwindColorName(color.name)) {
     return {
       type: "notFound",

diff --git a/app/_features/color/useTailwindColorQuery.ts b/app/_features/color/useTailwindColorQuery.ts
@@ -1,25 +1,29 @@
 import {
   TailwindColorGrade,
+  TailwindColors,
   TailwindGradedColorName,
   TailwindSingleColorName,
   findTailwindColor,
 } from "@/app/_features/color/tailwind";
 import { useURLQueryParams } from "@/app/_utils/useURLQueryParams";
 import { useMemo } from "react";
 
-export function useTailwindColorQuery() {
+export function useTailwindColorQuery(tailwindColors: TailwindColors) {
   const { getQueryValue, deleteQueries, updateQueries, createHrefWithQueries } =
     useURLQueryParams<"colorname" | "colorgrade">();
 
   const colorName = getQueryValue("colorname") ?? "";
   const colorGrade = getQueryValue("colorgrade") ?? "";
 
   const currentColor = useMemo(() => {
-    return findTailwindColor({
-      name: colorName,
-      grade: colorGrade,
-    });
-  }, [colorName, colorGrade]);
+    return findTailwindColor(
+      {
+        name: colorName,
+        grade: colorGrade,
+      },
+      tailwindColors,
+    );
+  }, [colorName, colorGrade, tailwindColors]);
 
   function resetCurrentColor() {
     deleteQueries(["colorname", "colorgrade"]);

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,14 +1,21 @@
 import { ColorGridTable } from "@/app/_features/color/ColorGridTable";
 import { ColorController } from "@/app/_features/color/ColorController";
 import { Suspense } from "react";
+import {
+  getTailwindColors,
+  getTailwindThemeColors,
+} from "@/app/_features/color/tailwind";
 
 export default function Home() {
+  const tailwindThemeColors = getTailwindThemeColors();
+  const tailwindColors = getTailwindColors(tailwindThemeColors);
+
   return (
     <div className="grid justify-center gap-y-8">
       <div className=" grid gap-y-2">
         <h1 className=" text-lg font-bold">Tailwind Color Contrast Grid</h1>
         <Suspense fallback={<p>読み込み中...</p>}>
-          <ColorController />
+          <ColorController tailwindColors={tailwindColors} />
         </Suspense>
       </div>
       <ColorGridTable />