ci: add prettier-plugin-tailwindcss (#29)

* ci: add prettier-plugin-tailwindcss

* chore: run format:write

package.json

@@ -99,6 +99,7 @@
     "postcss": "^8",
     "prettier": "^3.2.5",
     "shiki": "^1.1.3",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "simple-git-hooks": "^2.9.0",
     "tailwindcss": "^3.3.0",
     "tsx": "^4.7.0",

prettier.config.js

@@ -27,5 +27,8 @@ module.exports = {
     "<THIRD_PARTY_MODULES>",
   ],
   importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
-  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  plugins: [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss",
+  ],
 };

src/app/(auth)/layout.tsx

@@ -11,5 +11,5 @@ export default async function AuthLayout({
   console.log(session);
   if (session?.session) redirect("/");
 
-  return <div className="bg-muted h-screen pt-8">{children}</div>;
+  return <div className="h-screen bg-muted pt-8">{children}</div>;
 }

src/app/(auth)/sign-in/page.tsx

@@ -6,7 +6,7 @@ import AuthForm from "@/components/auth/form";
 
 const Page = async () => {
   return (
-    <main className="bg-popover mx-auto my-4 max-w-lg p-10">
+    <main className="mx-auto my-4 max-w-lg bg-popover p-10">
       <h1 className="text-center text-2xl font-bold">
         Sign in to your account
       </h1>
@@ -22,11 +22,11 @@ const Page = async () => {
         <Input type="password" name="password" id="password" />
         <br />
       </AuthForm>
-      <div className="text-muted-foreground mt-4 text-center text-sm">
+      <div className="mt-4 text-center text-sm text-muted-foreground">
         Don&apos;t have an account yet?{" "}
         <Link
           href="/sign-up"
-          className="text-accent-foreground hover:text-primary underline"
+          className="text-accent-foreground underline hover:text-primary"
         >
           Create an account
         </Link>

src/app/(auth)/sign-up/page.tsx

@@ -6,7 +6,7 @@ import AuthForm from "@/components/auth/form";
 
 const Page = async () => {
   return (
-    <main className="bg-popover mx-auto my-4 max-w-lg p-10">
+    <main className="mx-auto my-4 max-w-lg bg-popover p-10">
       <h1 className="text-center text-2xl font-bold">Create an account</h1>
       <AuthForm action="/api/sign-up">
         <Label htmlFor="username" className="text-muted-foreground">
@@ -20,7 +20,7 @@ const Page = async () => {
         <Input type="password" name="password" id="password" />
         <br />
       </AuthForm>
-      <div className="text-muted-foreground mt-4 text-center text-sm">
+      <div className="mt-4 text-center text-sm text-muted-foreground">
         Already have an account?{" "}
         <Link href="/sign-in" className="text-secondary-foreground underline">
           Sign in

src/app/(private)/write/(components)/publish-article-dialog.tsx

@@ -89,7 +89,7 @@ export const PublishArticleDialog = ({ children }: PropsWithChildren) => {
         <form className="space-y-5" onSubmit={handleSubmit}>
           <div className="space-y-1">
             <Label>Preview</Label>
-            <div className="bg-secondary flex aspect-video items-center justify-center rounded-md">
+            <div className="flex aspect-video items-center justify-center rounded-md bg-secondary">
               <span className="text-muted-foreground">
                 Havent implement file upload yet, jam tich.
               </span>

src/app/(public)/[username]/[slug]/page.tsx

@@ -21,7 +21,7 @@ export default async function ArticlePage(props: ArticlePageProps) {
     <main className="p-8">
       <Article
         content={article.content}
-        className="prose dark:prose-invert prose-orange mx-auto"
+        className="prose prose-orange mx-auto dark:prose-invert"
       />
     </main>
   );

src/app/loading.tsx

@@ -1,10 +1,10 @@
 export default function Loading() {
   return (
-    <div className="text-muted-foreground grid animate-pulse place-items-center p-4">
+    <div className="grid animate-pulse place-items-center p-4 text-muted-foreground">
       <div role="status">
         <svg
           aria-hidden="true"
-          className="fill-muted text-muted-foreground size-8 animate-spin"
+          className="size-8 animate-spin fill-muted text-muted-foreground"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

src/components/editor/index.tsx

@@ -10,6 +10,7 @@ import Editorjs, { OutputData } from "@editorjs/editorjs";
 import DragDrop from "editorjs-drag-drop";
 // @ts-expect-error - no types
 import Undo from "editorjs-undo";
+import { useTheme } from "next-themes";
 
 export const EDITOR_ID = "@editorjs";
 
@@ -21,6 +22,7 @@ export interface EditorProps {
 }
 
 export const Editor = ({ onChange, ...editorProps }: EditorProps) => {
+  const { theme } = useTheme();
   const editor = useRef<Editorjs | null>(null);
 
   const handleOnReady = useCallback(() => {
@@ -55,6 +57,10 @@ export const Editor = ({ onChange, ...editorProps }: EditorProps) => {
   }, []);
 
   return (
-    <div id={EDITOR_ID} className="prose dark:prose-invert prose-orange" />
+    <div
+      id={EDITOR_ID}
+      className="prose prose-orange dark:prose-invert"
+      data-color-mode={theme}
+    />
   );
 };

src/components/editor/plugins/code/code-editor.tsx

@@ -58,7 +58,7 @@ export const CodeEditor = ({
         language={language}
         defaultValue={value || DEFAULT.value}
         className={cn(
-          "!bg-accent not-prose !text-foreground size-full flex-1 rounded-xl border !font-mono *:!text-base",
+          "size-full flex-1 rounded-xl border !bg-accent !font-mono *:!text-base",
           className,
         )}
         disabled={disabled}

src/components/footer.tsx

@@ -9,7 +9,7 @@ export default function Footer() {
     <div>
       <Separator />
 
-      <div className="container mx-auto py-2 mt-2">
+      <div className="container mx-auto mt-2 py-2">
         <ul className="flex gap-4">
           {MENU.map((menuItem) => (
             <li key={menuItem.text} className="font-semibold">

src/components/logo.tsx

@@ -16,7 +16,7 @@ export const Logo = ({
 }: LogoProps) => {
   return (
     <span
-      className={cn("text-primary flex items-center justify-center", className)}
+      className={cn("flex items-center justify-center text-primary", className)}
       {...props}
     >
       <Link href="/">

src/components/navbar/profile-dropdown.tsx

@@ -44,7 +44,7 @@ export const ProfileDropdown = () => {
 
         <DropdownMenuContent
           align="end"
-          className="text-muted-foreground min-w-44"
+          className="min-w-44 text-muted-foreground"
         >
           <DropdownMenuItem asChild>
             <Link href="/profile" className="flex cursor-pointer gap-x-2">
@@ -60,7 +60,7 @@ export const ProfileDropdown = () => {
           </DropdownMenuItem>
           <DropdownMenuItem
             onClick={handleSignout}
-            className="hover:!text-destructive focus:!text-destructive flex cursor-pointer gap-x-2"
+            className="flex cursor-pointer gap-x-2 hover:!text-destructive focus:!text-destructive"
           >
             <IconLogout size={16} />
             <span>Signout</span>

src/components/navbar/search-input.tsx

@@ -14,7 +14,7 @@ export const SearchInput = () => {
         <input
           type="text"
           placeholder="Search..."
-          className="bg-secondary text-muted-foreground h-10 rounded-full border-none pl-10 pr-4 text-sm focus-visible:outline-none"
+          className="h-10 rounded-full border-none bg-secondary pl-10 pr-4 text-sm text-muted-foreground focus-visible:outline-none"
         />
       </div>
     </Fragment>

src/components/renderer/blocks/code.tsx

@@ -12,7 +12,7 @@ export const CodeBlock = async (data: OutputBlockData) => {
       <div className="relative">
         <CopyButton
           value={data.data.content}
-          className="absolute top-2 right-2"
+          className="absolute right-2 top-2"
         />
       </div>
       <div dangerouslySetInnerHTML={{ __html: rendercode }} />

src/components/renderer/blocks/image.tsx

@@ -10,8 +10,8 @@ export const ImageBlock = (data: OutputBlockData) => {
       <div
         className={cn(
           "relative",
-          data.data.withBorder && "border rounded-lg p-4",
-          data.data.withBackground && "bg-secondary rounded-lg",
+          data.data.withBorder && "rounded-lg border p-4",
+          data.data.withBackground && "rounded-lg bg-secondary",
           data.data.stretched && "mx-[-15vw]",
         )}
       >
@@ -24,7 +24,7 @@ export const ImageBlock = (data: OutputBlockData) => {
           className="size-full"
         />
       </div>
-      <p className="font-extralight text-sm mb-10">{data.data.caption}</p>
+      <p className="mb-10 text-sm font-extralight">{data.data.caption}</p>
     </div>
   );
 };

src/components/renderer/blocks/index.ts

@@ -1,4 +1,3 @@
-
 import { CodeBlock } from "./code";
 import { DefaultBlock } from "./default";
 import { HeaderBlock } from "./header";
@@ -8,7 +7,6 @@ import { ParagraphBlock } from "./paragraph";
 export const BLOCKS = {
   default: DefaultBlock,
 
-
   code: CodeBlock,
   image: ImageBlock,
   header: HeaderBlock,

src/components/ui/avatar.tsx

@@ -43,7 +43,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "bg-muted flex size-full items-center justify-center rounded-full",
+      "flex size-full items-center justify-center rounded-full bg-muted",
       className,
     )}
     {...props}

src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "bg-card text-card-foreground rounded-lg border shadow-sm",
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
       className,
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ));

src/components/ui/checkbox.tsx

@@ -14,7 +14,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "peer size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className,
     )}
     {...props}

src/components/ui/command.tsx

@@ -17,7 +17,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md",
+      "flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
       className,
     )}
     {...props}
@@ -31,7 +31,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
           {children}
         </Command>
       </DialogContent>
@@ -48,7 +48,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -91,7 +91,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
       className,
     )}
     {...props}
@@ -106,7 +106,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("bg-border -mx-1 h-px", className)}
+    className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
 ));
@@ -119,7 +119,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -135,7 +135,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
       {...props}