Merge pull request #38 from crow-fox/refactor/tailwindColors

tailwindConfigを使用したオブジェクトの取得はサーバー側のみで行う

app/_features/color/ColorController.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { TailwindColors } from "@/app/_features/color/tailwind";
+import { TailwindColors } from "@/app/_features/color/tailwind.server";
 import { useTailwindColorQuery } from "@/app/_features/color/useTailwindColorQuery";
 
 type Props = {

app/_features/color/ColorGridItem.tsx

@@ -6,10 +6,11 @@ import {
 } from "@/app/_features/color/contrast";
 import {
   TailwindColorGrade,
-  TailwindColors,
   TailwindGradedColorName,
   TailwindSingleColorName,
-} from "@/app/_features/color/tailwind";
+} from "@/app/_features/color/tailwind.client";
+import { TailwindColors } from "@/app/_features/color/tailwind.server";
+
 import { useTailwindColorQuery } from "@/app/_features/color/useTailwindColorQuery";
 import { useClipboardCopy } from "@/app/_utils/useClipboardCopy";
 import { useCallback } from "react";

app/_features/color/ColorGridTable.tsx

@@ -4,7 +4,8 @@ import {
   getTailwindColorGrades,
   getTailwindColors,
   getTailwindThemeColors,
-} from "@/app/_features/color/tailwind";
+} from "@/app/_features/color/tailwind.server";
+
 import { getObjectKeys } from "@/app/_utils/object";
 import { capitalizeFirstLetter } from "@/app/_utils/string";
 import { Suspense } from "react";

app/_features/color/FallbackColorGridItem.tsx

@@ -2,7 +2,7 @@ import {
   TailwindColorGrade,
   TailwindGradedColorName,
   TailwindSingleColorName,
-} from "@/app/_features/color/tailwind";
+} from "@/app/_features/color/tailwind.client";
 
 type Props = {
   color:

app/_features/color/tailwind.client.ts

@@ -0,0 +1,159 @@
+import { TailwindColors } from "@/app/_features/color/tailwind.server";
+import { getObjectKeys } from "@/app/_utils/object";
+import { Output, literal, safeParse, union } from "valibot";
+
+function tailwindGradedColorNameSchemaFactory(tailwindColors: TailwindColors) {
+  return union(
+    getObjectKeys(tailwindColors.graded).map((color) => literal(color)),
+  );
+}
+
+export type TailwindGradedColorName = Output<
+  ReturnType<typeof tailwindGradedColorNameSchemaFactory>
+>;
+
+export function isTailwindGradedColorName(
+  name: unknown,
+  tailwindColors: TailwindColors,
+): name is TailwindGradedColorName {
+  const result = safeParse(
+    tailwindGradedColorNameSchemaFactory(tailwindColors),
+    name,
+  );
+  if (result.success) {
+    return true;
+  }
+  return false;
+}
+
+function tailwindSingleColorNameSchemaFactory(tailwindColors: TailwindColors) {
+  return union(
+    getObjectKeys(tailwindColors.single).map((color) => literal(color)),
+  );
+}
+
+export type TailwindSingleColorName = Output<
+  ReturnType<typeof tailwindSingleColorNameSchemaFactory>
+>;
+
+export function isTailwindSingleColorName(
+  name: unknown,
+  tailwindColors: TailwindColors,
+): name is TailwindSingleColorName {
+  const result = safeParse(
+    tailwindSingleColorNameSchemaFactory(tailwindColors),
+    name,
+  );
+  if (result.success) {
+    return true;
+  }
+  return false;
+}
+
+export function tailwindColorNameSchemaFactory(tailwindColors: TailwindColors) {
+  return union(
+    getObjectKeys({
+      ...tailwindColors.graded,
+      ...tailwindColors.single,
+    }).map((color) => literal(color)),
+  );
+}
+
+type TailwindColorName = Output<
+  ReturnType<typeof tailwindColorNameSchemaFactory>
+>;
+
+export function isTailwindColorName(
+  name: unknown,
+  tailwindColors: TailwindColors,
+): name is TailwindColorName {
+  const result = safeParse(
+    tailwindColorNameSchemaFactory(tailwindColors),
+    name,
+  );
+  if (result.success) {
+    return true;
+  }
+  return false;
+}
+
+function tailwindColorGradeSchemaFactory(tailwindColors: TailwindColors) {
+  return union(
+    getObjectKeys(tailwindColors.graded.amber).map((grade) => literal(grade)),
+  );
+}
+
+export type TailwindColorGrade = Output<
+  ReturnType<typeof tailwindColorGradeSchemaFactory>
+>;
+
+export function isTailwindColorGrade(
+  grade: unknown,
+  tailwindColors: TailwindColors,
+): grade is TailwindColorGrade {
+  const result = safeParse(
+    tailwindColorGradeSchemaFactory(tailwindColors),
+    grade,
+  );
+  if (result.success) {
+    return true;
+  }
+  return false;
+}
+
+export function findTailwindColor(
+  color: { name: string; grade: string },
+  tailwindColors: TailwindColors,
+):
+  | {
+      type: "notFound";
+    }
+  | {
+      type: "single";
+      color: {
+        name: TailwindSingleColorName;
+        value: string;
+      };
+    }
+  | {
+      type: "graded";
+      color: {
+        name: TailwindGradedColorName;
+        grade: TailwindColorGrade;
+        value: string;
+      };
+    } {
+  if (!isTailwindColorName(color.name, tailwindColors)) {
+    return {
+      type: "notFound",
+    };
+  }
+
+  if (isTailwindSingleColorName(color.name, tailwindColors)) {
+    return {
+      type: "single",
+      color: {
+        name: color.name,
+        value: tailwindColors.single[color.name],
+      },
+    };
+  }
+
+  if (isTailwindGradedColorName(color.name, tailwindColors)) {
+    if (isTailwindColorGrade(color.grade, tailwindColors)) {
+      return {
+        type: "graded",
+        color: {
+          name: color.name,
+          grade: color.grade,
+          value: tailwindColors.graded[color.name][color.grade],
+        },
+      };
+    }
+    return {
+      type: "notFound",
+    };
+  }
+
+  throw new Error(`Unreachable color name: ${color.name}`);
+}

app/_features/color/tailwind.server.ts

@@ -0,0 +1,50 @@
+import "server-only";
+
+import tailwindConfig from "@/tailwind.config";
+import resolveConfig from "tailwindcss/resolveConfig";
+import { DefaultColors } from "tailwindcss/types/generated/colors";
+import { getObjectKeys } from "@/app/_utils/object";
+
+export function getTailwindThemeColors() {
+  const { theme } = resolveConfig(tailwindConfig);
+  return theme.colors;
+}
+
+export function getTailwindColors(colors: DefaultColors) {
+  return {
+    graded: {
+      slate: colors.slate,
+      gray: colors.gray,
+      zinc: colors.zinc,
+      neutral: colors.neutral,
+      stone: colors.stone,
+      red: colors.red,
+      orange: colors.orange,
+      amber: colors.amber,
+      yellow: colors.yellow,
+      lime: colors.lime,
+      green: colors.green,
+      emerald: colors.emerald,
+      teal: colors.teal,
+      cyan: colors.cyan,
+      sky: colors.sky,
+      blue: colors.blue,
+      indigo: colors.indigo,
+      violet: colors.violet,
+      purple: colors.purple,
+      fuchsia: colors.fuchsia,
+      pink: colors.pink,
+      rose: colors.rose,
+    },
+    single: {
+      white: colors.white,
+      black: colors.black,
+    },
+  } as const;
+}
+
+export type TailwindColors = ReturnType<typeof getTailwindColors>;
+
+export function getTailwindColorGrades(colors: DefaultColors) {
+  return getObjectKeys(colors.amber);
+}