React: Support Tailwind CSS presets

fuma-nama · Jun 26, 2024 · 4e9b6b8 · 4e9b6b8
1 parent 20ca68f
commit 4e9b6b8
Show file tree

Hide file tree

Showing 27 changed files with 264 additions and 248 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -5,7 +5,6 @@
   "fixed": [],
   "linked": [
     [
-      "@fuma-comment/kysely-adapter",
       "@fuma-comment/prisma-adapter",
       "@fuma-comment/server",
       "@fuma-comment/react",

diff --git a/.changeset/lazy-berries-yell.md b/.changeset/lazy-berries-yell.md
@@ -0,0 +1,5 @@
+---
+"@fuma-comment/react": minor
+---
+
+Support Tailwind CSS presets
diff --git a/apps/docs/app/(demo)/layout.tsx b/apps/docs/app/(demo)/layout.tsx
@@ -1,5 +1,3 @@
-import "@fuma-comment/react/style.css";
-import "../globals.css";
 import { AuthProvider } from "./layout.client";
 
 export default function RootLayout({

diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
@@ -1,12 +1,13 @@
-import { createPreset } from 'fumadocs-ui/tailwind-plugin';
+import { createPreset as createCommentPreset } from "@fuma-comment/react/theme";
+import { createPreset as createDocsPreset } from "fumadocs-ui/tailwind-plugin";
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'class',
-  presets: [createPreset()],
+  darkMode: "class",
+  presets: [createCommentPreset(), createDocsPreset()],
   content: [
-    './node_modules/fumadocs-ui/dist/**/*.js',
-
+    "./node_modules/fumadocs-ui/dist/**/*.js",
+    "./node_modules/@fuma-comment/react/dist/**/*.js",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./content/**/*.{js,ts,jsx,tsx,mdx}",
@@ -24,6 +25,6 @@ export default {
           "2xl": "1400px",
         },
       },
-    }
-  }
-};
+    },
+  },
+};
diff --git a/packages/react/css/styles.css b/packages/react/css/styles.css
@@ -1,59 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --fc-background: 0 0% 100%;
-  --fc-foreground: 0 0% 3.9%;
-  --fc-muted: 0 0% 96.1%;
-  --fc-muted-foreground: 0 0% 45.1%;
-  --fc-popover: 0 0% 100%;
-  --fc-popover-foreground: 0 0% 15.1%;
-  --fc-card: 0 0% 96.7%;
-  --fc-card-foreground: 0 0% 3.9%;
-  --fc-border: 0 0% 89.8%;
-  --fc-primary: 0 0% 9%;
-  --fc-primary-foreground: 0 0% 98%;
-  --fc-accent: 0 0% 94.1%;
-  --fc-accent-foreground: 0 0% 9%;
-  --fc-danger: 3 99% 55%;
-  --fc-ring: 0 0% 63.9%;
-}
-
-.dark {
-  --fc-background: 0 0% 3.9%;
-  --fc-foreground: 0 0% 98%;
-  --fc-muted: 0 0% 14.9%;
-  --fc-muted-foreground: 0 0% 60.9%;
-  --fc-popover: 0 0% 7%;
-  --fc-popover-foreground: 0 0% 88%;
-  --fc-card: 0 0% 8%;
-  --fc-card-foreground: 0 0% 98%;
-  --fc-border: 0 0% 18%;
-  --fc-primary: 0 0% 98%;
-  --fc-primary-foreground: 0 0% 9%;
-  --fc-accent: 0 0% 14.9%;
-  --fc-accent-foreground: 0 0% 98%;
-  --fc-ring: 0 0% 14.9%;
-  --fc-danger: 3 95% 64%;
-}
-
-.tiptap p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-  @apply fc-text-muted-foreground;
-}
-
-.tiptap img {
-  @apply fc-rounded-lg fc-max-w-full fc-w-auto fc-max-h-60;
-}
-
-.tiptap img.ProseMirror-selectednode {
-  @apply fc-ring-2 fc-ring-primary;
-}
-
-.tiptap a {
-  @apply fc-font-medium fc-underline;
-}
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -2,26 +2,38 @@
   "name": "@fuma-comment/react",
   "version": "0.1.1",
   "main": "./dist/index.js",
-  "types": "./dist/index.d.mts",
+  "types": "./dist/index.d.ts",
   "author": "Fuma Nama",
   "homepage": "https://fuma-comment.vercel.app",
   "repository": "https://github.com/fuma-nama/fuma-comment",
   "files": [
     "./dist"
   ],
   "license": "MIT",
+  "type": "module",
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
     "./style.css": "./dist/style.css",
     "./atom": {
       "import": "./dist/atom.js",
-      "types": "./dist/atom.d.mts"
+      "types": "./dist/atom.d.ts"
+    },
+    "./theme": {
+      "import": "./dist/theme/index.js",
+      "require": "./dist/theme/index.js",
+      "types": "./dist/theme/index.d.ts"
     }
   },
   "typesVersions": {
     "*": {
       "atom": [
-        "./dist/atom.d.mts"
+        "./dist/atom.d.ts"
+      ],
+      "theme": [
+        "./dist/theme/index.d.ts"
       ]
     }
   },

diff --git a/packages/react/postcss.config.js b/packages/react/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     "tailwindcss/nesting": {},
     tailwindcss: {},

diff --git a/packages/react/src/atom.tsx b/packages/react/src/atom.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   useMemo,
   type ReactNode,
@@ -48,11 +50,7 @@ export const CommentsPost = forwardRef<
   const auth = useAuthContext();
 
   return (
-    <div
-      className={cn("fc-flex fc-flex-col fc-gap-2", className)}
-      ref={ref}
-      {...props}
-    >
+    <div className={cn("flex flex-col gap-2", className)} ref={ref} {...props}>
       <CommentPost />
       {auth.status === "unauthenticated" && <AuthButton />}
     </div>
@@ -78,13 +76,13 @@ export const CommentsList = forwardRef<
 
   return (
     <div
-      className={cn("fc-flex fc-min-h-[80px] fc-flex-col", className)}
+      className={cn("flex min-h-[80px] flex-col", className)}
       ref={ref}
       {...props}
     >
-      {query.isLoading ? <Spinner className="fc-m-auto fc-h-8 fc-w-8" /> : null}
+      {query.isLoading ? <Spinner className="m-auto size-8" /> : null}
       {query.data?.length === 0 && (
-        <p className="fc-m-auto fc-text-center fc-text-sm fc-text-muted-foreground">
+        <p className="m-auto text-center text-sm text-fc-muted-foreground">
           No comments
         </p>
       )}

diff --git a/packages/react/src/comments.tsx b/packages/react/src/comments.tsx
@@ -18,14 +18,14 @@ export const Comments = forwardRef<HTMLDivElement, CommentsProps>(
       <atom.CommentsProvider page={page}>
         <div
           className={cn(
-            "fc-rounded-xl fc-border fc-border-border fc-bg-background fc-text-foreground",
+            "rounded-xl border border-fc-border bg-fc-background text-fc-foreground",
             className,
           )}
           ref={ref}
           {...props}
         >
-          <div className="fc-border-b fc-border-border fc-p-3">
-            {title ? <div className="fc-mb-2">{title}</div> : null}
+          <div className="border-b border-fc-border p-3">
+            {title ? <div className="mb-2">{title}</div> : null}
             <atom.CommentsPost />
           </div>
           <atom.CommentsList />

diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx
@@ -1,21 +1,21 @@
 import { cva } from "cva";
 
 export const buttonVariants = cva(
-  "fc-inline-flex fc-items-center fc-justify-center fc-rounded-lg fc-font-medium disabled:fc-pointer-events-none disabled:fc-bg-muted disabled:fc-text-muted-foreground",
+  "inline-flex items-center justify-center rounded-lg font-medium disabled:pointer-events-none disabled:bg-fc-muted disabled:text-fc-muted-foreground",
   {
     variants: {
       size: {
-        small: "fc-h-8 fc-px-2 fc-text-xs",
-        medium: "fc-px-3 fc-py-2 fc-text-sm",
-        default: "fc-h-8 fc-w-20 fc-text-sm",
-        icon: "fc-h-7 fc-w-7 fc-rounded-full",
+        small: "h-8 px-2 text-xs",
+        medium: "px-3 py-2 text-sm",
+        default: "h-8 w-20 text-sm",
+        icon: "size-7 rounded-full",
       },
       variant: {
         primary:
-          "fc-bg-primary fc-text-primary-foreground fc-transition-colors hover:fc-bg-primary/80",
+          "bg-fc-primary text-fc-primary-foreground transition-colors hover:bg-fc-primary/80",
         secondary:
-          "fc-border fc-border-border fc-bg-card fc-transition-colors hover:fc-bg-accent",
-        ghost: "fc-transition-colors hover:fc-bg-accent/80",
+          "border border-fc-border bg-fc-card transition-colors hover:bg-fc-accent",
+        ghost: "transition-colors hover:bg-fc-accent/80",
       },
     },
     defaultVariants: {

diff --git a/packages/react/src/components/comment-edit.tsx b/packages/react/src/components/comment-edit.tsx
@@ -61,19 +61,19 @@ export function CommentEdit(): JSX.Element {
         onSubmit={submit}
         placeholder="Edit Message"
       />
-      <div className="fc-mt-2 fc-flex fc-flex-row fc-gap-1">
+      <div className="mt-2 flex flex-row gap-1">
         <button
           aria-label="Edit"
           className={cn(
-            buttonVariants({ variant: "primary", className: "fc-gap-2" }),
+            buttonVariants({ variant: "primary", className: "gap-2" }),
           )}
           disabled={mutation.isMutating || (editor?.isEmpty ?? true)}
           type="submit"
         >
           {mutation.isMutating ? (
             <Spinner />
           ) : (
-            <PencilIcon className="fc-h-4 fc-w-4" />
+            <PencilIcon className="size-4" />
           )}
           Edit
         </button>

diff --git a/packages/react/src/components/comment-post.tsx b/packages/react/src/components/comment-post.tsx
@@ -47,7 +47,7 @@ export function CommentPost(): JSX.Element {
 
   return (
     <form onSubmit={onSubmit}>
-      <div className="fc-relative">
+      <div className="relative">
         <CommentEditor
           disabled={disabled}
           editor={editor}
@@ -59,22 +59,18 @@ export function CommentPost(): JSX.Element {
           aria-label="Send Comment"
           className={cn(
             buttonVariants({
-              className: "fc-absolute fc-right-2 fc-bottom-1.5",
+              className: "absolute right-2 bottom-1.5",
               size: "icon",
             }),
           )}
           disabled={disabled || (editor?.isEmpty ?? true)}
           type="submit"
         >
-          {mutation.isMutating ? (
-            <Spinner />
-          ) : (
-            <SendIcon className="fc-h-4 fc-w-4" />
-          )}
+          {mutation.isMutating ? <Spinner /> : <SendIcon className="size-4" />}
         </button>
       </div>
       {mutation.error ? (
-        <p className="fc-mt-1 fc-text-sm fc-text-error">
+        <p className="mt-1 text-sm text-fc-error">
           {(mutation.error as FetcherError).message}
         </p>
       ) : null}

diff --git a/packages/react/src/components/comment-renderer.tsx b/packages/react/src/components/comment-renderer.tsx
@@ -15,7 +15,7 @@ type BaseRenderer = (props: {
 }) => JSX.Element;
 
 export const codeVariants = cva(
-  "fc-rounded-sm fc-border fc-border-border fc-bg-muted fc-p-0.5",
+  "rounded-sm border border-fc-border bg-fc-muted p-0.5",
 );
 
 const defaultRenderer: BaseRenderer = (props) => <span {...props} />;
@@ -30,20 +30,20 @@ type Marks = Record<
 
 const marks: Marks = {
   bold: {
-    className: "fc-font-bold",
+    className: "font-bold",
   },
   strike: {
-    className: "fc-line-through",
+    className: "line-through",
   },
   italic: {
-    className: "fc-italic",
+    className: "italic",
   },
   code: {
     className: codeVariants(),
     element: () => (props) => <code {...props} />,
   },
   link: {
-    className: "fc-font-medium fc-underline",
+    className: "font-medium underline",
     element(mark) {
       const href = mark.attrs?.href;
       if (typeof href === "string")
@@ -96,7 +96,7 @@ export function ContentRenderer({
     return (
       <img
         alt={attrs.alt ?? "upload"}
-        className="fc-max-h-60 fc-w-auto fc-max-w-full fc-rounded-lg"
+        className="max-h-60 w-auto max-w-full rounded-lg"
         height={attrs.height}
         src={content.attrs.src}
         width={attrs.width}
@@ -114,11 +114,7 @@ export function ContentRenderer({
   }
 
   if (content.type === "doc") {
-    return (
-      <div className="fc-grid fc-whitespace-pre-wrap fc-break-words">
-        {joined}
-      </div>
-    );
+    return <div className="grid whitespace-pre-wrap break-words">{joined}</div>;
   }
 
   return <>{joined}</>;

diff --git a/packages/react/src/components/comment-reply.tsx b/packages/react/src/components/comment-reply.tsx
@@ -53,7 +53,7 @@ export function CommentReply(): JSX.Element {
   };
 
   return (
-    <form className="fc-mt-2" onSubmit={onSubmit}>
+    <form className="mt-2" onSubmit={onSubmit}>
       <CommentEditor
         autofocus
         disabled={disabled}
@@ -63,9 +63,9 @@ export function CommentReply(): JSX.Element {
         onSubmit={submit}
         placeholder="Reply to comment"
       />
-      <div className="fc-mt-2 fc-flex fc-flex-row fc-gap-1">
+      <div className="mt-2 flex flex-row gap-1">
         <button
-          className={cn(buttonVariants({ className: "fc-gap-2" }))}
+          className={cn(buttonVariants({ className: "gap-2" }))}
           disabled={disabled || (editor?.isEmpty ?? true)}
           type="submit"
         >
@@ -85,7 +85,7 @@ export function CommentReply(): JSX.Element {
         </button>
       </div>
       {mutation.error ? (
-        <p className="fc-mt-1 fc-text-sm fc-text-error">
+        <p className="mt-1 text-sm text-fc-error">
           {(mutation.error as FetcherError).message}
         </p>
       ) : null}