📦 Update and fix prettier config (#987)

Author: lukevella

.github/ISSUE_TEMPLATE/---bug-report.md

@@ -1,17 +1,17 @@
 ---
 name: "\U0001F41E Bug report"
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/---feature-request.md

@@ -1,10 +1,9 @@
 ---
 name: "\U0001F914 Feature request"
 about: Please use discussions instead of issues for feature requests
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **DO NOT OPEN AN ISSUE FOR FEATURE REQUESTS**

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "semi": true,
   "tabWidth": 2,
   "useTabs": false,

apps/docs/contribute/documentation.mdx

@@ -7,7 +7,10 @@ description: Help us maintain and improve our documentation
 If you have a [Github](https://github.com) account, you can make changes or report issues using the links that appear at the top of each page.
 
 <Frame caption="Links to edit a page or open an issue on Github">
-  <img src="/images/contribute/edit-documentation.png" alt="Edit Documentation Links"/>
+  <img
+    src="/images/contribute/edit-documentation.png"
+    alt="Edit Documentation Links"
+  />
 </Frame>
 
 ## Submitting a Pull Request

apps/docs/contribute/translations.mdx

@@ -20,7 +20,7 @@ Once you've joined the project:
 3. Start translating!
 
 <Frame>
-  <img src="/images/contribute/crowdin-project.png" alt="Crowdin Project"/>
+  <img src="/images/contribute/crowdin-project.png" alt="Crowdin Project" />
 </Frame>
 
 ## Tips for Translators
@@ -98,7 +98,10 @@ If your language requires more than one plural form, you can add additional rule
 ```
 
 <Frame caption="Crowdin let's you preview your message to make sure it works">
-  <img src="/images/contribute/icu-message-format.png" alt="Using ICU Message Format on Corwdin"/>
+  <img
+    src="/images/contribute/icu-message-format.png"
+    alt="Using ICU Message Format on Corwdin"
+  />
 </Frame>
 
 ### Register

apps/docs/introduction.mdx

@@ -5,7 +5,7 @@ description: "Welcome to the official documentation for Rallly."
 ---
 
 <Frame>
-  <img src="/images/self-hosting/splash.png" alt="Rallly Splash Image"/>
+  <img src="/images/self-hosting/splash.png" alt="Rallly Splash Image" />
 </Frame>
 
 ## What is Rallly?

apps/docs/self-hosting/introduction.mdx

@@ -8,7 +8,7 @@ Rallly is 100% open-source and available under the [GNU Affero General Public Li
 which allows you to run your own instance of Rallly for free for both personal and commercial use.
 
 <Frame>
-  <img src="/images/self-hosting/splash.png" alt="Rallly Splash Image"/>
+  <img src="/images/self-hosting/splash.png" alt="Rallly Splash Image" />
 </Frame>
 
 ## Official Docker Image

apps/docs/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "@rallly/tsconfig/next.json",
   "include": ["**/*.ts", "**/*.tsx", "**/*.js"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }

apps/docs/workflow/finalize.mdx

@@ -27,5 +27,6 @@ description: "Pick a final date for your event"
     <Frame>
       <img src="/images/workflow/finalized.png" alt="Finalized Poll"/>
     </Frame>
+
   </Step>
 </Steps>

apps/landing/src/components/blog/markdown-styles.module.css

@@ -10,11 +10,11 @@
 }
 
 .markdown h2 {
-  @apply mt-12 mb-4 text-2xl font-semibold leading-snug;
+  @apply mb-4 mt-12 text-2xl font-semibold leading-snug;
 }
 
 .markdown h3 {
-  @apply mt-8 mb-4 text-xl font-semibold leading-snug;
+  @apply mb-4 mt-8 text-xl font-semibold leading-snug;
 }
 
 .markdown a {

apps/landing/src/pages/cookie-policy.tsx

@@ -8,7 +8,7 @@ const PrivacyPolicy = () => {
   return (
     <PageLayout>
       <NextSeo title="Cookie Policy" />
-      <div className="prose my-16 mx-auto max-w-3xl rounded-lg bg-white p-8 shadow-md">
+      <div className="prose mx-auto my-16 max-w-3xl rounded-lg bg-white p-8 shadow-md">
         <h1>Cookie Policy</h1>
         <p>Last updated: 19 April 2023</p>
         <p>

apps/landing/src/pages/privacy-policy.tsx

@@ -7,7 +7,7 @@ const PrivacyPolicy = () => {
   return (
     <PageLayout>
       <NextSeo title="Privacy Policy" />
-      <div className="prose my-16 mx-auto max-w-3xl rounded-lg bg-white p-8 shadow-md">
+      <div className="prose mx-auto my-16 max-w-3xl rounded-lg bg-white p-8 shadow-md">
         <h1>Privacy Policy</h1>
         <p>Last updated: 1 August 2023</p>
         <p>

apps/landing/src/pages/terms-of-use.tsx

@@ -7,7 +7,7 @@ const PrivacyPolicy = () => {
   return (
     <PageLayout>
       <NextSeo title="Terms of Use" />
-      <div className="prose my-16 mx-auto max-w-3xl rounded-lg bg-white p-8 shadow-md">
+      <div className="prose mx-auto my-16 max-w-3xl rounded-lg bg-white p-8 shadow-md">
         <h1>Terms of Use</h1>
         <p>Last updated: 4 July 2023</p>
         <p>

apps/landing/src/style.css

@@ -8,7 +8,9 @@
   }
   body {
     @apply text-foreground overflow-y-auto bg-gray-200/50;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
   html {
     @apply h-full font-sans text-base;

apps/landing/tsconfig.json

@@ -4,10 +4,10 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
-      "~/*": ["public/*"]
+      "~/*": ["public/*"],
     },
-    "checkJs": false
+    "checkJs": false,
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }

apps/web/src/app/[locale]/(admin)/layout.tsx

@@ -29,18 +29,18 @@ const Auth = ({ children }: { children: React.ReactNode }) => {
 
 function MobileNavigation() {
   return (
-    <div className="lg:hidden shadow-sm bg-gray-100 border-b flex items-center justify-between px-4 py-3">
+    <div className="flex items-center justify-between border-b bg-gray-100 px-4 py-3 shadow-sm lg:hidden">
       <LogoLink />
-      <div className="flex gap-x-2.5 justify-end">
+      <div className="flex justify-end gap-x-2.5">
         <Link
           href="/settings/profile"
-          className="inline-flex items-center w-7 h-9"
+          className="inline-flex h-9 w-7 items-center"
         >
           <CurrentUserAvatar size="sm" />
         </Link>
         <Button asChild variant="ghost">
           <Link href="/menu">
-            <MenuIcon className="h-4 w-4 text-muted-foreground" />
+            <MenuIcon className="text-muted-foreground h-4 w-4" />
           </Link>
         </Button>
       </div>
@@ -59,15 +59,15 @@ export default async function Layout({
         <MobileNavigation />
         <div
           className={cn(
-            "hidden lg:flex z-50 inset-y-0 lg:fixed lg:w-72 bg-gray-100 shrink-0 flex-col gap-y-5 overflow-y-auto border-r lg:px-6 lg:py-4 px-5 py-4",
+            "inset-y-0 z-50 hidden shrink-0 flex-col gap-y-5 overflow-y-auto border-r bg-gray-100 px-5 py-4 lg:fixed lg:flex lg:w-72 lg:px-6 lg:py-4",
           )}
         >
           <div>
             <LogoLink />
           </div>
           <Sidebar />
         </div>
-        <div className={cn("grow min-h-screen lg:pl-72 bg-gray-50")}>
+        <div className={cn("min-h-screen grow bg-gray-50 lg:pl-72")}>
           {children}
         </div>
       </div>

apps/web/src/app/[locale]/(admin)/menu-item.tsx

@@ -23,8 +23,8 @@ export function MenuItem({
       className={cn(
         isCurrent
           ? "bg-gray-200 text-indigo-600"
-          : "text-gray-700 hover:text-primary",
-        "group flex  items-center gap-x-3 rounded-md py-2 px-3 text-sm leading-6 font-semibold",
+          : "hover:text-primary text-gray-700",
+        "group flex  items-center gap-x-3 rounded-md px-3 py-2 text-sm font-semibold leading-6",
       )}
     >
       <Icon

apps/web/src/app/[locale]/(admin)/new/page.tsx

@@ -16,7 +16,7 @@ export default async function Page({ params }: { params: { locale: string } }) {
   return (
     <PageContainer>
       <PageHeader>
-        <div className="flex justify-between items-center gap-x-4">
+        <div className="flex items-center justify-between gap-x-4">
           <PageTitle>
             <Trans t={t} i18nKey="polls" />
           </PageTitle>

apps/web/src/app/[locale]/(admin)/polls/layout.tsx

@@ -22,13 +22,13 @@ export default async function Layout({
   return (
     <PageContainer>
       <PageHeader>
-        <div className="flex justify-between items-center gap-x-4">
+        <div className="flex items-center justify-between gap-x-4">
           <PageTitle>
             <Trans t={t} i18nKey="polls" />
           </PageTitle>
           <Button asChild>
             <Link href="/new">
-              <PenBoxIcon className="w-4 text-muted-foreground h-4" />
+              <PenBoxIcon className="text-muted-foreground h-4 w-4" />
               <span className="hidden sm:inline">
                 <Trans t={t} i18nKey="newPoll" />
               </span>

apps/web/src/app/[locale]/(admin)/polls/loading.tsx

@@ -2,19 +2,19 @@ import { Skeleton } from "@/components/skeleton";
 
 function Row() {
   return (
-    <div className="flex first:pt-0 py-4 items-center gap-x-4">
+    <div className="flex items-center gap-x-4 py-4 first:pt-0">
       <div className="grow">
-        <Skeleton className="w-48 h-5 mb-2" />
-        <Skeleton className="w-24 h-4" />
+        <Skeleton className="mb-2 h-5 w-48" />
+        <Skeleton className="h-4 w-24" />
       </div>
       <div className="pr-8">
-        <Skeleton className="w-24 h-4" />
+        <Skeleton className="h-4 w-24" />
       </div>
       <div className="pr-8">
-        <Skeleton className="w-24 h-4" />
+        <Skeleton className="h-4 w-24" />
       </div>
       <div className="pr-8">
-        <Skeleton className="w-12 h-4" />
+        <Skeleton className="h-4 w-12" />
       </div>
     </div>
   );

apps/web/src/app/[locale]/(admin)/polls/polls-folders.tsx

@@ -27,7 +27,7 @@ function PollFolder({
       className={cn(
         isActive
           ? "bg-gray-100"
-          : "shadow-sm text-muted-foreground hover:bg-gray-100 active:bg-gray-200",
+          : "text-muted-foreground shadow-sm hover:bg-gray-100 active:bg-gray-200",
       )}
     >
       <Link href={href}>{children}</Link>

apps/web/src/app/[locale]/(admin)/polls/polls-list.tsx

@@ -20,7 +20,7 @@ import Loader from "./loading";
 const EmptyState = () => {
   return (
     <div className="py-24">
-      <div className="mx-auto max-w-md rounded-md border-2 w-full border-dashed border-gray-300 p-8 text-center">
+      <div className="mx-auto w-full max-w-md rounded-md border-2 border-dashed border-gray-300 p-8 text-center">
         <div className="mb-4">
           <InboxIcon className="inline-block h-10 w-10 text-gray-400" />
         </div>
@@ -84,14 +84,14 @@ export function PollsList() {
         cell: ({ row }) => {
           return (
             <Link className="group block" href={`/poll/${row.original.id}`}>
-              <div className="flex items-center gap-x-2 mb-1 min-w-0">
-                <h3 className="font-semibold truncate text-gray-600 group-hover:text-gray-900">
+              <div className="mb-1 flex min-w-0 items-center gap-x-2">
+                <h3 className="truncate font-semibold text-gray-600 group-hover:text-gray-900">
                   {row.original.title}
                 </h3>
-                <ArrowRightIcon className="h-4 w-4 opacity-0 transition-all group-focus:translate-x-2 group-hover:opacity-100" />
+                <ArrowRightIcon className="h-4 w-4 opacity-0 transition-all group-hover:opacity-100 group-focus:translate-x-2" />
               </div>
               {row.original.event ? (
-                <p className="text-sm text-muted-foreground">
+                <p className="text-muted-foreground text-sm">
                   {row.original.event.duration === 0
                     ? adjustTimeZone(
                         row.original.event.start,
@@ -134,7 +134,7 @@ export function PollsList() {
         cell: ({ row }) => {
           const { createdAt } = row.original;
           return (
-            <p className="text-sm whitespace-nowrap text-muted-foreground">
+            <p className="text-muted-foreground whitespace-nowrap text-sm">
               <time dateTime={createdAt.toDateString()}>
                 <Trans
                   i18nKey="createdTime"
@@ -150,7 +150,7 @@ export function PollsList() {
         cell: ({ row }) => {
           return (
             <Tooltip delayDuration={100}>
-              <TooltipTrigger className="flex items-center text-muted-foreground gap-x-2">
+              <TooltipTrigger className="text-muted-foreground flex items-center gap-x-2">
                 <UsersIcon className="h-4 w-4" />
                 <span className="text-sm">
                   {row.original.participants.length}

apps/web/src/app/[locale]/(admin)/settings/menu-item.tsx

@@ -20,7 +20,7 @@ export function MenuItem(props: { href: string; children: React.ReactNode }) {
   return (
     <Link
       className={clsx(
-        "flex min-w-0 items-center rounded-none gap-x-2 px-3 py-2 text-sm font-medium",
+        "flex min-w-0 items-center gap-x-2 rounded-none px-3 py-2 text-sm font-medium",
         pathname === props.href
           ? "bg-white"
           : "text-gray-500 hover:bg-gray-100 focus:bg-gray-200",
@@ -66,7 +66,7 @@ export function SettingsMenu() {
 
   return (
     <>
-      <div className="hidden overflow-hidden shadow-sm divide-x lg:inline-flex mb-4 border rounded-md bg-gray-50">
+      <div className="mb-4 hidden divide-x overflow-hidden rounded-md border bg-gray-50 shadow-sm lg:inline-flex">
         {menuItems.map((item, i) => (
           <MenuItem key={i} href={item.href}>
             <item.icon className="h-4 w-4" />
@@ -90,7 +90,7 @@ export function SettingsMenu() {
           {menuItems.map((item, i) => (
             <SelectItem key={i} value={item.title}>
               <div className="flex items-center gap-x-2.5">
-                <item.icon className="h-4 w-4 text-muted-foreground" />
+                <item.icon className="text-muted-foreground h-4 w-4" />
                 <span className="font-medium">{item.title}</span>
               </div>
             </SelectItem>