feat: add prettier-plugin-tailwindcss and reformat every component

ToxicToast · Jun 18, 2024 · 646d66a · 646d66a
1 parent 2909f50
commit 646d66a
Show file tree

Hide file tree

Showing 13 changed files with 113 additions and 33 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,6 @@
 {
     "singleQuote": true,
-    "tabWidth": 4
+    "tabWidth": 4,
+    "plugins": ["prettier-plugin-tailwindcss"],
+    "tailwindConfig": "./apps/azkaban-admin-ui/tailwind.config.js"
 }
diff --git a/apps/azkaban-admin-ui/src/features/auth/login/components/header.component.tsx b/apps/azkaban-admin-ui/src/features/auth/login/components/header.component.tsx
@@ -1,6 +1,6 @@
 export function AuthLoginHeader() {
     return (
-        <h1 className="text-3xl text-slate-800 dark:text-slate-100 font-bold mb-6">
+        <h1 className="mb-6 text-3xl font-bold text-slate-800 dark:text-slate-100">
             Welcome Back{' '}
             <span role="img" aria-labelledby="Star">
                 ✨

diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/auth.layout.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/auth.layout.tsx
@@ -6,13 +6,13 @@ function AuthLayout() {
     const { toasts } = useToasts();
 
     return (
-        <div className="font-exo antialiased bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400">
+        <div className="bg-slate-100 font-exo text-slate-600 antialiased dark:bg-slate-900 dark:text-slate-400">
             <main className="bg-slate-100 dark:bg-slate-900">
                 <div className="relative flex">
                     <div className="w-full md:w-1/2">
-                        <div className="min-h-screen h-full flex flex-col after:flex-1">
+                        <div className="flex h-full min-h-screen flex-col after:flex-1">
                             <div className="flex-1">
-                                <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
+                                <div className="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
                                     <button className="block">
                                         <svg
                                             width="32"
@@ -78,25 +78,25 @@ function AuthLayout() {
                                 </div>
                             </div>
 
-                            <div className="w-full max-w-sm mx-auto px-4 py-8">
+                            <div className="mx-auto w-full max-w-sm px-4 py-8">
                                 <Outlet />
                             </div>
                         </div>
                     </div>
 
                     <div
-                        className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2"
+                        className="absolute bottom-0 right-0 top-0 hidden md:block md:w-1/2"
                         aria-hidden="true"
                     >
                         <img
-                            className="object-cover object-center w-full h-full"
+                            className="h-full w-full object-cover object-center"
                             src="/assets/auth-image.jpg"
                             width="760"
                             height="1024"
                             alt="Authentication"
                         />
                         <img
-                            className="absolute top-1/4 left-0 -translate-x-1/2 ml-8 hidden lg:block"
+                            className="absolute left-0 top-1/4 ml-8 hidden -translate-x-1/2 lg:block"
                             src="/assets/auth-decoration.png"
                             width="218"
                             height="224"

diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard.layout.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard.layout.tsx
@@ -29,7 +29,7 @@ function DashboardLayout() {
                     toggleSidebar={() => onToggleSidebar()}
                     version={version}
                 />
-                <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+                <div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
                     <Header
                         sidebarOpen={sidebarOpen}
                         onSidebarChange={(value: boolean) =>

diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-left-side.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-left-side.tsx
@@ -3,10 +3,10 @@ import { Button } from '../../ui/button';
 export function HeaderLeftSide() {
     return (
         <div className="flex">
-            <Button className="lg:hidden bg-indigo-500 hover:bg-indigo-600">
+            <Button className="bg-indigo-500 hover:bg-indigo-600 lg:hidden">
                 <span className="sr-only">Open sidebar</span>
                 <svg
-                    className="w-6 h-6 fill-current"
+                    className="h-6 w-6 fill-current"
                     viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg"
                 >

diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-right-side.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header-right-side.tsx
@@ -12,14 +12,14 @@ export function HeaderRightSide(props: PropsWithChildren<Props>) {
         <div className="flex items-center space-x-3">
             <div>
                 <button
-                    className={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full ml-3 ${
+                    className={`ml-3 flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 ${
                         searchModalOpen && 'bg-slate-200'
                     }`}
                     onClick={() => onSearchModalChange()}
                 >
                     <span className="sr-only">Search</span>
                     <svg
-                        className="w-4 h-4"
+                        className="h-4 w-4"
                         viewBox="0 0 16 16"
                         xmlns="http://www.w3.org/2000/svg"
                     >

diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/header.tsx
@@ -29,9 +29,9 @@ export function Header(props: Props) {
     } = props;
 
     return (
-        <header className="sticky top-0 bg-white dark:bg-[#182235] border-b border-slate-200 dark:border-slate-700 z-30">
+        <header className="sticky top-0 z-30 border-b border-slate-200 bg-white dark:border-slate-700 dark:bg-[#182235]">
             <div className="px-4 sm:px-6 lg:px-8">
-                <div className="flex items-center justify-between h-16 -mb-px">
+                <div className="-mb-px flex h-16 items-center justify-between">
                     <HeaderLeftSide />
                     <HeaderRightSide
                         searchModalOpen={searchModalOpen}
@@ -51,7 +51,7 @@ export function Header(props: Props) {
                             }
                         />
                         <ThemeToggle />
-                        <hr className="w-px h-6 bg-slate-200 dark:bg-slate-700 border-none" />
+                        <hr className="h-6 w-px border-none bg-slate-200 dark:bg-slate-700" />
                         UserMenu
                     </HeaderRightSide>
                 </div>

diff --git a/...ui/src/features/shared/components/layout/dashboard/notifications/notification-trigger.tsx b/...ui/src/features/shared/components/layout/dashboard/notifications/notification-trigger.tsx
@@ -7,13 +7,13 @@ export function NotificationTriggerPartial(props: Props) {
 
     return (
         <div
-            className={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full ${
+            className={`flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 ${
                 dropdownOpen && 'bg-slate-200'
             }`}
         >
             <span className="sr-only">Notifications</span>
             <svg
-                className="w-4 h-4"
+                className="h-4 w-4"
                 viewBox="0 0 16 16"
                 xmlns="http://www.w3.org/2000/svg"
             >

diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/sidebar.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/sidebar.tsx
@@ -10,26 +10,26 @@ export function Sidebar(props: Props) {
     return (
         <div>
             <div
-                className={`fixed inset-0 dark:bg-slate-900 dark:bg-opacity-30 bg-slate-300 bg-opacity-60 z-40 lg:hidden lg:z-auto transition-opacity duration-200 ${
+                className={`fixed inset-0 z-40 bg-slate-300 bg-opacity-60 transition-opacity duration-200 dark:bg-slate-900 dark:bg-opacity-30 lg:z-auto lg:hidden ${
                     sidebarOpen
                         ? 'opacity-100'
-                        : 'opacity-0 pointer-events-none'
+                        : 'pointer-events-none opacity-0'
                 }`}
             />
             <div
                 id="sidebar"
-                className={`border-r border-slate-200 dark:border-slate-700 flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 dark:bg-slate-800 bg-white p-4 transition-all duration-200 ease-in-out ${
+                className={`no-scrollbar lg:sidebar-expanded:!w-64 absolute left-0 top-0 z-40 flex h-screen w-64 shrink-0 flex-col overflow-y-scroll border-r border-slate-200 bg-white p-4 transition-all duration-200 ease-in-out dark:border-slate-700 dark:bg-slate-800 lg:static lg:left-auto lg:top-auto lg:w-20 lg:translate-x-0 lg:overflow-y-auto 2xl:!w-64 ${
                     sidebarOpen ? 'translate-x-0' : '-translate-x-64'
                 }`}
             >
-                <div className="flex justify-between mb-10 pr-3 sm:px-2">
+                <div className="mb-10 flex justify-between pr-3 sm:px-2">
                     <button
-                        className="lg:hidden text-slate-500 hover:text-slate-400"
+                        className="text-slate-500 hover:text-slate-400 lg:hidden"
                         onClick={() => toggleSidebar()}
                     >
                         <span className="sr-only">Toggle sidebar</span>
                         <svg
-                            className="w-6 h-6 fill-current"
+                            className="h-6 w-6 fill-current"
                             viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg"
                         >
@@ -93,28 +93,28 @@ export function Sidebar(props: Props) {
 
                 <div className="space-y-8">
                     <div>
-                        <h3 className="text-xs uppercase text-slate-500 font-semibold pl-3">
+                        <h3 className="pl-3 text-xs font-semibold uppercase text-slate-500">
                             <span
-                                className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6"
+                                className="lg:sidebar-expanded:hidden hidden w-6 text-center lg:block 2xl:hidden"
                                 aria-hidden="true"
                             >
                                 •••
                             </span>
-                            <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">
+                            <span className="lg:sidebar-expanded:block lg:hidden 2xl:block">
                                 Azkaban Admin
                             </span>
                         </h3>
 
-                        <ul className="mt-3 mb-3">LINKS</ul>
+                        <ul className="mb-3 mt-3">LINKS</ul>
 
-                        <h3 className="text-xs uppercase text-slate-500 font-semibold pl-3">
+                        <h3 className="pl-3 text-xs font-semibold uppercase text-slate-500">
                             <span
-                                className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6"
+                                className="lg:sidebar-expanded:hidden hidden w-6 text-center lg:block 2xl:hidden"
                                 aria-hidden="true"
                             >
                                 •••
                             </span>
-                            <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">
+                            <span className="lg:sidebar-expanded:block lg:hidden 2xl:block">
                                 Version: {version}
                             </span>
                         </h3>

diff --git a/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/theme-toggle.tsx b/apps/azkaban-admin-ui/src/features/shared/components/layout/dashboard/theme-toggle.tsx
@@ -21,7 +21,7 @@ export function ThemeToggle() {
                 onChange={() => switchTheme()}
             />
             <label
-                className="flex items-center justify-center cursor-pointer w-8 h-8 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80 rounded-full"
+                className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600/80"
                 htmlFor="light-switch"
             >
                 <ThemeToggleIcon theme={theme} />

diff --git a/apps/azkaban-admin-ui/src/features/shared/components/ui/index.ts b/apps/azkaban-admin-ui/src/features/shared/components/ui/index.ts
@@ -1,3 +1,5 @@
 export * from './button';
 export * from './input';
 export * from './label';
+export * from './popover';
+export * from './toast';
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,6 +85,7 @@
         "nx": "19.1.2",
         "postcss": "8.4.21",
         "prettier": "^3.2.5",
+        "prettier-plugin-tailwindcss": "^0.6.5",
         "tailwindcss": "3.4.3",
         "ts-jest": "^29.1.3",
         "ts-node": "10.9.2",