feat: add tailwind ordering

Pettor · Mar 5, 2024 · aea27d8 · aea27d8
1 parent 34bf4be
commit aea27d8
Show file tree

Hide file tree

Showing 15 changed files with 99 additions and 43 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"],
   "printWidth": 120,
   "singleQuote": false,
   "tabWidth": 2,

diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "jotai-effect": "0.5.0",
     "pixi-viewport": "5.0.2",
     "pixi.js": "7.4.0",
+    "prettier-plugin-tailwindcss": "0.5.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/layout/BasicLayout.tsx b/src/components/layout/BasicLayout.tsx
@@ -31,7 +31,7 @@ export function BasicLayout({
         </main>
       </div>
       {footer && (
-        <footer className="footer footer-center gap-y-2 bg-base-300 lg:p-4 text-base-content py-2">
+        <footer className="footer footer-center gap-y-2 bg-base-300 py-2 text-base-content lg:p-4">
           <aside className="lg:mt-2">
             <p className="text-base font-bold">Made with ☕ by Petter Hancock</p>
             <p>Copyright © 2024 - All right reserved</p>

diff --git a/src/components/library/dropzone/Dropzone.tsx b/src/components/library/dropzone/Dropzone.tsx
@@ -16,7 +16,7 @@ export function Dropzone({ onDrop }: DropzoneProps): ReactElement {
         <label
           htmlFor="dropzone-file"
           className={clsx(
-            "glass flex h-32 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-neutral transition-all hover:bg-base-300 md:h-48 dark:bg-none",
+            "glass flex h-32 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-neutral transition-all hover:bg-base-300 dark:bg-none md:h-48",
             getBackgroundClass()
           )}
         >

diff --git a/src/components/library/editor/drawer/AppDrawer.tsx b/src/components/library/editor/drawer/AppDrawer.tsx
@@ -24,10 +24,10 @@ export function AppDrawer({ open, themeSwitchProps, onClose, onNewImage, onSaveI
         <label htmlFor="app-drawer" aria-label="close sidebar" className="drawer-overlay" />
         <ul
           ref={menuRef}
-          className="menu shadow-xl min-h-full w-60 bg-base-100 p-4 text-base text-base-content md:w-80"
+          className="menu min-h-full w-60 bg-base-100 p-4 text-base text-base-content shadow-xl md:w-80"
         >
           <div className="flex items-center">
-            <img className="w-10 h-10" src={LogoImageSrc} alt="Pixi Image Editor Logo" />
+            <img className="h-10 w-10" src={LogoImageSrc} alt="Pixi Image Editor Logo" />
             <span className="flex flex-1 p-4 text-xl font-bold">Pixi Image Editor</span>
           </div>
           <li className="mt-4" onClick={onNewImage}>
@@ -43,7 +43,7 @@ export function AppDrawer({ open, themeSwitchProps, onClose, onNewImage, onSaveI
             </a>
           </li>
           <div className="flex flex-1" />
-          <div className="flex items-center flex-row justify-end">
+          <div className="flex flex-row items-center justify-end">
             <ThemeSwitch {...themeSwitchProps} />
           </div>
         </ul>

diff --git a/src/components/library/editor/drawer/FilterDrawer.tsx b/src/components/library/editor/drawer/FilterDrawer.tsx
@@ -43,18 +43,18 @@ export function FilterDrawer({
       <input id="app-drawer" readOnly type="checkbox" checked={open} className="drawer-toggle" />
       <div className="drawer-side overflow-hidden">
         <label htmlFor="app-drawer" aria-label="close sidebar" />
-        <ul className="menu flex flex-col flex-wrap bg-neutral-content dark:bg-neutral shadow-xl min-h-full w-60 p-4 text-base text-base-content md:w-96">
+        <ul className="menu flex min-h-full w-60 flex-col flex-wrap bg-neutral-content p-4 text-base text-base-content shadow-xl dark:bg-neutral md:w-96">
           <div className="flex flex-row">
             <span className="flex flex-1 p-4 text-2xl font-bold">Filters</span>
-            <div className="flex items-center flex-row">
-              <button className="btn btn-circle btn-sm btn-ghost" onClick={onClose}>
+            <div className="flex flex-row items-center">
+              <button className="btn btn-circle btn-ghost btn-sm" onClick={onClose}>
                 <XMarkIcon />
               </button>
             </div>
           </div>
           <div className="divider divider-vertical h-1/2" />
           <li className="flex gap-2">
-            <button className="text-base font-bold my-2" onClick={() => onFilterChange({ brightness: 1 })}>
+            <button className="my-2 text-base font-bold" onClick={() => onFilterChange({ brightness: 1 })}>
               <SunHighIcon />
               Brightness
             </button>
@@ -94,7 +94,7 @@ export function FilterDrawer({
               className="range range-accent"
             />
           </li>
-          <li className="divider divider-vertical h-1/2 mt-8" />
+          <li className="divider divider-vertical mt-8 h-1/2" />
           <li className="flex gap-4">
             <button className="text-base font-bold" onClick={() => onFilterChange({ red: 1, green: 1, blue: 1 })}>
               RGB
@@ -127,7 +127,7 @@ export function FilterDrawer({
               className="range range-info"
             />
           </li>
-          <li className="divider divider-vertical h-1/2 mt-8" />
+          <li className="divider divider-vertical mt-8 h-1/2" />
           <li className="flex gap-2">
             <button className="text-base font-bold" onClick={() => onFilterChange({ blur: 0 })}>
               <BlurIcon />

diff --git a/src/components/library/editor/toolbar/ToolbarMenu.tsx b/src/components/library/editor/toolbar/ToolbarMenu.tsx
@@ -6,8 +6,8 @@ export function ToolbarMenu(): ReactElement {
   const { toggleDrawer } = useToolbarMenu();
 
   return (
-    <div className="absolute max-md:top-0 max-md:left-0 md:top-0 md:left-0 z-20 flex justify-center p-4">
-      <div className="glass navbar flex h-10 min-h-0 rounded-box bg-base-300 bg-opacity-80 shadow-xl md:h-12 dark:bg-opacity-80 dark:bg-none">
+    <div className="absolute z-20 flex justify-center p-4 max-md:left-0 max-md:top-0 md:left-0 md:top-0">
+      <div className="glass navbar flex h-10 min-h-0 rounded-box bg-base-300 bg-opacity-80 shadow-xl dark:bg-opacity-80 dark:bg-none md:h-12">
         <button className="btn btn-square btn-ghost btn-sm" onClick={toggleDrawer}>
           <Bars3Icon className="h-4 w-4 md:h-6 md:w-6" />
         </button>

diff --git a/src/components/library/editor/toolbar/ToolbarTools.tsx b/src/components/library/editor/toolbar/ToolbarTools.tsx
@@ -16,46 +16,46 @@ export function ToolbarTools(): ReactElement {
   const { adjustZoom, showFitScreen } = useToolbarAdjustZoom();
 
   return (
-    <div className="absolute max-md:bottom-0 max-md:left-0 md:top-0 z-10 mr-2 flex w-full justify-center p-4 md:mr-0">
-      <div className="glass gap-1 md:gap-2 navbar h-10 min-h-0 w-auto rounded-box border border-neutral bg-base-300 bg-opacity-80 shadow-xl md:h-12 dark:bg-opacity-80 dark:bg-none">
+    <div className="absolute z-10 mr-2 flex w-full justify-center p-4 max-md:bottom-0 max-md:left-0 md:top-0 md:mr-0">
+      <div className="glass navbar h-10 min-h-0 w-auto gap-1 rounded-box border border-neutral bg-base-300 bg-opacity-80 shadow-xl dark:bg-opacity-80 dark:bg-none md:h-12 md:gap-2">
         <div className="md:tooltip md:tooltip-bottom" data-tip={lock ? undefined : "Lock image to center"}>
           <button className={clsx("btn btn-square btn-ghost swap btn-sm", lock && "btn-active")} onClick={swapLock}>
             <input type="checkbox" checked={lock} onChange={swapLock} />
             <LockClosedIcon className="swap-on h-6 w-6" />
             <LockOpenIcon className="swap-off h-6 w-6" />
           </button>
         </div>
-        <div className="divider divider-horizontal w-0 mx-0" />
-        <div className="md:tooltip md:tooltip-bottom mt-1" data-tip={showFitScreen ? "Actual size" : "Fit to window"}>
+        <div className="divider divider-horizontal mx-0 w-0" />
+        <div className="mt-1 md:tooltip md:tooltip-bottom" data-tip={showFitScreen ? "Actual size" : "Fit to window"}>
           <button className="btn btn-square btn-ghost swap btn-sm" onClick={adjustZoom}>
             {showFitScreen ? <FullscreenIcon /> : <FitViewIcon />}
           </button>
         </div>
-        <div className="divider divider-horizontal w-0 mx-0" />
+        <div className="divider divider-horizontal mx-0 w-0" />
         <div className="flex gap-1">
-          <div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Rotate 90° left">
+          <div className="mt-1 md:tooltip md:tooltip-bottom" data-tip="Rotate 90° left">
             <button className="btn btn-square btn-ghost swap btn-sm" onClick={() => rotate("rotate-left")}>
               <RotateCcwIcon />
             </button>
           </div>
-          <div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Rotate 90° right">
+          <div className="mt-1 md:tooltip md:tooltip-bottom" data-tip="Rotate 90° right">
             <button className="btn btn-square btn-ghost swap btn-sm" onClick={() => rotate("rotate-right")}>
               <RotateCwIcon />
             </button>
           </div>
-          <div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Flip vertical">
+          <div className="mt-1 md:tooltip md:tooltip-bottom" data-tip="Flip vertical">
             <button className="btn btn-square btn-ghost swap btn-sm" onClick={() => flip("flip-vertical")}>
               <FlipVerticalIcon />
             </button>
           </div>
-          <div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Flip horizontal">
+          <div className="mt-1 md:tooltip md:tooltip-bottom" data-tip="Flip horizontal">
             <button className="btn btn-square btn-ghost swap btn-sm" onClick={() => flip("flip-horizontal")}>
               <FlipHorizontalIcon />
             </button>
           </div>
         </div>
         <div className="divider divider-horizontal mx-0 w-0" />
-        <button className="btn btn-ghost max-sm:btn-square btn-sm" onClick={toggleFilterMenu}>
+        <button className="btn btn-ghost btn-sm max-sm:btn-square" onClick={toggleFilterMenu}>
           <SparklesIcon />
           <span className="hidden sm:block">Filters</span>
         </button>

diff --git a/src/components/library/editor/toolbar/ToolbarZoom.tsx b/src/components/library/editor/toolbar/ToolbarZoom.tsx
@@ -6,8 +6,8 @@ export function ToolbarZoom(): ReactElement {
   const { zoom, zoomIn, zoomOut, resetZoom } = useToolbarZoom();
 
   return (
-    <div className="absolute max-md:top-0 max-md:right-0 md:bottom-0 md:left-0 z-10 flex justify-center p-4">
-      <div className="glass navbar h-10 min-h-0 w-auto gap-1 md:gap-4 rounded-box border border-neutral-content bg-base-100 bg-opacity-60 shadow-xl md:h-12 dark:bg-neutral dark:bg-opacity-80 dark:bg-none">
+    <div className="absolute z-10 flex justify-center p-4 max-md:right-0 max-md:top-0 md:bottom-0 md:left-0">
+      <div className="glass navbar h-10 min-h-0 w-auto gap-1 rounded-box border border-neutral-content bg-base-100 bg-opacity-60 shadow-xl dark:bg-neutral dark:bg-opacity-80 dark:bg-none md:h-12 md:gap-4">
         <button className="btn btn-square btn-ghost btn-xs md:btn-sm" onClick={zoomIn}>
           <PlusIcon />
         </button>

diff --git a/src/components/library/pwa/update-dialog/PwaUpdateDialog.tsx b/src/components/library/pwa/update-dialog/PwaUpdateDialog.tsx
@@ -9,10 +9,10 @@ export function PwaUpdateDialog({ open, onUpdate }: PwaUpdateDialogProps): React
   return (
     <>
       {open && (
-        <div className="toast toast-bottom toast-center">
+        <div className="toast toast-center toast-bottom">
           <div className="alert alert-info">
             <div className="flex rounded-md">
-              <div className="flex flex-1 flex-row gap-4 items-center">
+              <div className="flex flex-1 flex-row items-center gap-4">
                 <div>A new version is available</div>
                 <button className="btn btn-accent" onClick={onUpdate}>
                   Update

diff --git a/src/components/library/theme/ThemeSwitch.tsx b/src/components/library/theme/ThemeSwitch.tsx
@@ -8,16 +8,16 @@ export interface ThemeSwitchProps {
 
 export function ThemeSwitch({ mode, onSwitch }: ThemeSwitchProps): ReactElement {
   return (
-    <label className="cursor-pointer grid place-items-center">
+    <label className="grid cursor-pointer place-items-center">
       <input
         type="checkbox"
         checked={mode === "dark"}
         value={mode}
         onChange={onSwitch}
-        className="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"
+        className="theme-controller toggle col-span-2 col-start-1 row-start-1 bg-base-content"
       />
       <svg
-        className="col-start-1 row-start-1 stroke-base-100 fill-base-100"
+        className="col-start-1 row-start-1 fill-base-100 stroke-base-100"
         xmlns="http://www.w3.org/2000/svg"
         width="14"
         height="14"
@@ -32,7 +32,7 @@ export function ThemeSwitch({ mode, onSwitch }: ThemeSwitchProps): ReactElement
         <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
       </svg>
       <svg
-        className="col-start-2 row-start-1 stroke-base-100 fill-base-100"
+        className="col-start-2 row-start-1 fill-base-100 stroke-base-100"
         xmlns="http://www.w3.org/2000/svg"
         width="14"
         height="14"

diff --git a/src/components/views/home/HomeView.tsx b/src/components/views/home/HomeView.tsx
@@ -19,24 +19,24 @@ export function HomeView({ themeSwitchProps, socialLinkProps = {}, onDrop }: Hom
 
   return (
     <BasicLayout container footer {...socialLinkProps}>
-      <div className="w-full flex items-center justify-center h-20 mt-2 px-4 lg:px-0 lg:mt-8">
+      <div className="mt-2 flex h-20 w-full items-center justify-center px-4 lg:mt-8 lg:px-0">
         <div className="flex flex-1">
-          <img className="w-10 h-10 lg:w-16 lg:h-16" src={LogoImageSrc} alt="Pixi Image Editor Logo" />
+          <img className="h-10 w-10 lg:h-16 lg:w-16" src={LogoImageSrc} alt="Pixi Image Editor Logo" />
         </div>
-        <div className="flex flex-row items-center h-8">
+        <div className="flex h-8 flex-row items-center">
           <div className="z-20">
             <ThemeSwitch {...themeSwitchProps} />
           </div>
           <div className="divider divider-horizontal w-0" />
           <div className="flex gap-2">
             <button
-              className="btn btn-square btn-ghost p-2 fill-neutral dark:fill-neutral-content"
+              className="btn btn-square btn-ghost fill-neutral p-2 dark:fill-neutral-content"
               onClick={onGithubClick}
             >
               <GithubIcon />
             </button>
             <button
-              className="btn btn-square btn-ghost p-2 fill-neutral dark:fill-neutral-content"
+              className="btn btn-square btn-ghost fill-neutral p-2 dark:fill-neutral-content"
               onClick={onLinkedInClick}
             >
               <LinkedInIcon />
@@ -47,12 +47,12 @@ export function HomeView({ themeSwitchProps, socialLinkProps = {}, onDrop }: Hom
       <div className="flex flex-1">
         <div className="hero-content text-center">
           <div className="max-w-xl">
-            <div className="flex flex-1 flex-row justify-center items-center">
-              <h1 className="inline-block bg-gradient-to-r from-primary to-secondary bg-clip-text lg:p-2 text-4xl font-bold text-transparent md:text-5xl lg:text-7xl">
+            <div className="flex flex-1 flex-row items-center justify-center">
+              <h1 className="inline-block bg-gradient-to-r from-primary to-secondary bg-clip-text text-4xl font-bold text-transparent md:text-5xl lg:p-2 lg:text-7xl">
                 Pixi Image Editor
               </h1>
             </div>
-            <p className="py-4 lg:py-6 text-lg lg:text-xl">
+            <p className="py-4 text-lg lg:py-6 lg:text-xl">
               This is a image editor built using <b className="text-secondary">PixiJS</b> and React. You can upload an
               image to get started.
             </p>

diff --git a/src/components/views/not-found/NotFoundView.tsx b/src/components/views/not-found/NotFoundView.tsx
@@ -8,8 +8,8 @@ export interface NotFoundViewProps {
 export function NotFoundView({ onBack }: NotFoundViewProps): ReactElement {
   return (
     <BasicLayout container>
-      <div className="flex flex-col gap-4 items-center">
-        <article className="prose lg:prose-xl p-4 text-pretty max-w-64 lg:max-w-full">
+      <div className="flex flex-col items-center gap-4">
+        <article className="prose max-w-64 text-pretty p-4 lg:prose-xl lg:max-w-full">
           <strong>{"Could not find the page you were looking for! 🕵️"}</strong>
         </article>
         <button className="btn btn-primary mt-4 w-48" onClick={onBack}>

diff --git a/src/stories/decorators/MockPhoneDecorator.tsx b/src/stories/decorators/MockPhoneDecorator.tsx
@@ -4,7 +4,7 @@ import type { StoryFn } from "@storybook/react";
 export function MockPhoneDecorator(Story: StoryFn): ReactElement {
   return (
     <div className="flex flex-1 justify-center">
-      <div className="m-8 item">
+      <div className="item m-8">
         <div className="mockup-phone">
           <div className="camera"></div>
           <div className="display">