conf: introduced configs for sorting tw classes (prettier), prettier-…

…plugin-tailwindcss installed in design-system and root
kalkulacka-one · Dec 2, 2024 · c152083 · c152083
1 parent c0e465f
commit c152083
Show file tree

Hide file tree

Showing 29 changed files with 61 additions and 55 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/apps/web/app/[lang]/layout.tsx b/apps/web/app/[lang]/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
         />
       </head>
       <body>
-        <main className="p-4 grid gap-8">
+        <main className="grid gap-8 p-4">
           <header className="grid gap-2">
             <Link href="/cs">
               <h1 className="text-5xl font-semibold">Kalkulacka.1</h1>

diff --git a/apps/web/app/[lang]/page.tsx b/apps/web/app/[lang]/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 
 export default function Page(): JSX.Element {
   return (
-    <section className="max-w-2xl grid gap-8">
+    <section className="grid max-w-2xl gap-8">
       <section className="grid gap-2">
         <h2 className="text-2xl font-medium">
           Tvoříme <span className="font-bold">Volební kalkulačku</span>, která

diff --git a/apps/web/app/[lang]/podporte-kalkulacku/page.tsx b/apps/web/app/[lang]/podporte-kalkulacku/page.tsx
@@ -16,7 +16,7 @@ export default function Page(): JSX.Element {
   }, []);
 
   return (
-    <section className="max-w-2xl grid gap-8">
+    <section className="grid max-w-2xl gap-8">
       <section className="grid gap-2">
         <h2 className="text-3xl font-bold">
           Podpořte Volební kalkulačku a&nbsp;demokracii
@@ -71,7 +71,7 @@ export default function Page(): JSX.Element {
         </ul>
         <div className="flex gap-2">
           <a
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
             href="https://herohero.co/volebnikalkulacka"
           >
             Přidat se na Herohero

diff --git a/apps/web/app/[lang]/test/page.tsx b/apps/web/app/[lang]/test/page.tsx
@@ -15,7 +15,7 @@ export default function Page() {
   console.info(test);
 
   return (
-    <div className="w-full min-h-80 flex flex-col p-10 justify-center items-center gap-4">
+    <div className="flex min-h-80 w-full flex-col items-center justify-center gap-4 p-10">
       <InputField label="Full Name" icon={BadgeStarIcon} />
       <InputField label="Full Name" icon={BadgeStarIcon} error="Test error" />
       <InputField

diff --git a/apps/web/app/[lang]/testpage/page.tsx b/apps/web/app/[lang]/testpage/page.tsx
@@ -29,12 +29,12 @@ export default function Page() {
           Přeskočit
         </Button>
       </div>
-      <div className="min-[701px]:grid sm:grid xs:flex xs:flex-col xs:gap-2 min-[701px]:grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:gap-8">
+      <div className="xs:flex xs:flex-col xs:gap-2 sm:grid sm:grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:gap-8 min-[701px]:grid min-[701px]:grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr]">
         {/* desktop grid content */}
         {/* Place button end with flex ok? */}
-        <div className="min-[701px]:flex justify-end items-center xs:hidden">
+        <div className="xs:hidden items-center justify-end min-[701px]:flex">
           {/* button wrapper */}
-          <div className="hidden min-[701px]:hidden sm:block">
+          <div className="hidden sm:block min-[701px]:hidden">
             <Button
               hasIcon
               fitContent
@@ -51,9 +51,9 @@ export default function Page() {
         <div>
           <Question />
         </div>
-        <div className="content-center hidden xs:block">
+        <div className="xs:block hidden content-center">
           {/* button wrapper */}
-          <div className="hidden min-[701px]:hidden sm:block">
+          <div className="hidden sm:block min-[701px]:hidden">
             <Button
               hasIcon
               fitContent

diff --git a/apps/web/app/[lang]/vlastni-kalkulacka/page.tsx b/apps/web/app/[lang]/vlastni-kalkulacka/page.tsx
@@ -1,6 +1,6 @@
 export default function Page(): JSX.Element {
   return (
-    <section className="max-w-2xl grid gap-4">
+    <section className="grid max-w-2xl gap-4">
       <section className="grid gap-2">
         <h2 className="text-3xl font-bold">
           Získejte vlastní Volební kalkulačku

diff --git a/apps/web/app/[lang]/zapojte-se/page.tsx b/apps/web/app/[lang]/zapojte-se/page.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function Page(): JSX.Element {
   return (
-    <section className="max-w-2xl grid gap-8">
+    <section className="grid max-w-2xl gap-8">
       <section className="grid gap-2">
         <h2 className="text-3xl font-bold">
           Přidejte se k našemu týmu dobrovolníků a&nbsp;podpořte demokracii
@@ -58,7 +58,7 @@ export default function Page(): JSX.Element {
           nadcházející volby: krajské a senátní v Česku na podzim. A čeká nás i
           spousta technických výzev. Jak se můžete zapojit?
         </p>
-        <ul className="list-disc pl-6 grid gap-4">
+        <ul className="grid list-disc gap-4 pl-6">
           <li>
             <section className="grid gap-1">
               <h4 className="text-lg font-bold">Projektové řízení</h4>

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/design-system/.prettierrc.json b/packages/design-system/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -50,7 +50,7 @@
     "eslint": "^8.57.0",
     "postcss": "^8.4.38",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "react": "^18.2.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.3.3"

diff --git a/packages/design-system/src/badge.tsx b/packages/design-system/src/badge.tsx
@@ -31,7 +31,7 @@ function Badge({ icon = false, color, children }: BadgeProps) {
         color: neutralVariant ? "neutral" : "secondary",
       })}
     >
-      {icon && <BadgeStarIcon className="k1-w-[18px] k1-h-[18px]" />}
+      {icon && <BadgeStarIcon className="k1-h-[18px] k1-w-[18px]" />}
       <div className="k1-whitespace-nowrap">{children}</div>
     </div>
   );

diff --git a/packages/design-system/src/demo.tsx b/packages/design-system/src/demo.tsx
@@ -1,17 +1,17 @@
 export function Demo() {
   return (
     <div className="k1-flex k1-flex-col k1-gap-4">
-      <div className="k1-px-4 k1-py-2 k1-bg-neutral k1-border k1-border-neutral hover:k1-cursor-pointer hover:k1-border-neutral-hover">
+      <div className="k1-border k1-border-neutral k1-bg-neutral k1-px-4 k1-py-2 hover:k1-cursor-pointer hover:k1-border-neutral-hover">
         <h1 className="k1-text-neutral hover:k1-text-neutral-hover">
           Hello from design-system
         </h1>
       </div>
-      <div className="k1-px-4 k1-py-2 k1-bg-primary k1-border k1-border-primary hover:k1-cursor-pointer">
+      <div className="k1-border k1-border-primary k1-bg-primary k1-px-4 k1-py-2 hover:k1-cursor-pointer">
         <h1 className="k1-text-primary hover:k1-text-primary-hover">
           Hello from design-system
         </h1>
       </div>
-      <div className="k1-px-4 k1-py-2 k1-bg-secondary k1-border k1-border-secondary hover:k1-cursor-pointer">
+      <div className="k1-border k1-border-secondary k1-bg-secondary k1-px-4 k1-py-2 hover:k1-cursor-pointer">
         <h1 className="k1-text-secondary hover:k1-text-secondary-hover">
           Hello from design-system
         </h1>

diff --git a/packages/design-system/src/heading.tsx b/packages/design-system/src/heading.tsx
@@ -5,7 +5,7 @@ type Props = {
 };
 
 const Heading = ({ children }: Props): JSX.Element => {
-  return <h1 className="k1-text-primary k1-px-md k1-h-xl">{children}</h1>;
+  return <h1 className="k1-h-xl k1-px-md k1-text-primary">{children}</h1>;
 };
 
 export { Heading };
diff --git a/packages/design-system/src/ui/button/button.tsx b/packages/design-system/src/ui/button/button.tsx
@@ -155,7 +155,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
         }
         {...props}
       >
-        {hasIcon ? <Icon className="k1-w-6 k1-h-6" /> : null}
+        {hasIcon ? <Icon className="k1-h-6 k1-w-6" /> : null}
         <div className={compactable ? "k1-hidden md:k1-block" : "k1-block"}>
           {children}
         </div>

diff --git a/packages/design-system/src/ui/input/checkbox.tsx b/packages/design-system/src/ui/input/checkbox.tsx
@@ -35,13 +35,13 @@ const Checkbox = React.forwardRef<
       data-checked={checkboxState === "checked" ? true : undefined}
     >
       {checkboxState === "unchecked" && (
-        <EmptyCheckBoxIcon className="k1-w-6 k1-h-6 k1-min-w-6" />
+        <EmptyCheckBoxIcon className="k1-h-6 k1-w-6 k1-min-w-6" />
       )}
       {checkboxState === "checked" && (
-        <CheckedIcon className="k1-w-6 k1-h-6 k1-min-w-6" />
+        <CheckedIcon className="k1-h-6 k1-w-6 k1-min-w-6" />
       )}
       {checkboxState === "delete" && (
-        <InterdermineIcon className="k1-w-6 k1-h-6 k1-min-w-6" />
+        <InterdermineIcon className="k1-h-6 k1-w-6 k1-min-w-6" />
       )}
     </CheckboxPrimitive>
   );

diff --git a/packages/design-system/src/ui/input/clearButton.tsx b/packages/design-system/src/ui/input/clearButton.tsx
@@ -10,7 +10,7 @@ function ClearButton({ onClose }: Props) {
     <button
       onClick={onClose}
       className={twMerge(
-        "k1-flex k1-justify-center k1-items-center k1-w-4 k1-h-4 k1-min-w-4 -m-4",
+        "-m-4 k1-flex k1-h-4 k1-w-4 k1-min-w-4 k1-items-center k1-justify-center",
         "k1-invisible peer-valid:k1-visible",
       )}
     >

diff --git a/packages/design-system/src/ui/input/combobox/checkboxSelect/checkboxField.tsx b/packages/design-system/src/ui/input/combobox/checkboxSelect/checkboxField.tsx
@@ -47,9 +47,9 @@ const CheckboxSelectField = forwardRef<React.ElementRef<typeof Input>, Props>(
 
     return (
       <Field state={hasError ? "error" : "default"}>
-        {hasIcon && <Icon className={twMerge("k1-w-6 k1-h-6 k1-min-w-6")} />}
+        {hasIcon && <Icon className={twMerge("k1-h-6 k1-w-6 k1-min-w-6")} />}
         <Combobox
-          className="k1-relative k1-w-full k1-bg-transparent k1-outline-none k1-flex"
+          className="k1-relative k1-flex k1-w-full k1-bg-transparent k1-outline-none"
           ref={ref}
           showClearButton={showClearButton}
           options={options}

diff --git a/packages/design-system/src/ui/input/combobox/checkboxSelect/combobox.tsx b/packages/design-system/src/ui/input/combobox/checkboxSelect/combobox.tsx
@@ -109,10 +109,10 @@ const Combobox = forwardRef<
         value={selectedValues}
         {...props}
       >
-        <div className="k1-flex k1-items-center k1-w-full">
+        <div className="k1-flex k1-w-full k1-items-center">
           <Input
             onChange={handleInputChange}
-            className="k1-flex-grow k1-peer"
+            className="k1-peer k1-flex-grow"
             value={
               selectedValues.length > 0 ? selectedValues.join(", ") : query
             }
@@ -123,7 +123,7 @@ const Combobox = forwardRef<
             }}
           />
           {children}
-          <Button className="k1-flex-shrink-0 k1-h-full k1-flex k1-items-center">
+          <Button className="k1-flex k1-h-full k1-flex-shrink-0 k1-items-center">
             <ChevronDownIcon className="k1-h-6 k1-w-6" />
           </Button>
           {showClearButton && <ClearButton onClose={handleClear} />}

diff --git a/packages/design-system/src/ui/input/combobox/components/comboboxButton.tsx b/packages/design-system/src/ui/input/combobox/components/comboboxButton.tsx
@@ -10,7 +10,7 @@ const Button = forwardRef<
   <ButtonPrimitive
     ref={ref}
     className={twMerge(
-      "k1-h-full k1-flex k1-items-center k1-justify-center",
+      "k1-flex k1-h-full k1-items-center k1-justify-center",
       className,
     )}
     {...props}

diff --git a/packages/design-system/src/ui/input/combobox/components/option.tsx b/packages/design-system/src/ui/input/combobox/components/option.tsx
@@ -9,7 +9,7 @@ const Option = forwardRef<
   <OptionPrimitive
     ref={ref}
     className={twMerge(
-      "k1-px-4 k1-py-3 k1-border-b k1-border-neutral k1-justify-start k1-items-start k1-inline-flex hover:k1-bg-neutral-backdrop-hover data-[focus]:k1-bg-neutral-backdrop-active k1-text-neutral-fg k1-text-base k1-w-full disabled:k1-bg-muted disabled:k1-text-muted disabled:cursor-not-allowed",
+      "k1-text-neutral-fg disabled:k1-bg-muted disabled:k1-text-muted disabled:cursor-not-allowed k1-inline-flex k1-w-full k1-items-start k1-justify-start k1-border-b k1-border-neutral k1-px-4 k1-py-3 k1-text-base hover:k1-bg-neutral-backdrop-hover data-[focus]:k1-bg-neutral-backdrop-active",
       className,
     )}
     {...props}

diff --git a/packages/design-system/src/ui/input/combobox/components/options.tsx b/packages/design-system/src/ui/input/combobox/components/options.tsx
@@ -9,7 +9,7 @@ const Options = forwardRef<
   <OptionsPrimitive
     ref={ref}
     className={twMerge(
-      "k1-w-[var(--input-width)] k1-bg-white k1-rounded-tl-lg k1-border k1-border-neutral k1-flex-col k1-justify-start k1-items-start k1-inline-flex ",
+      "k1-inline-flex k1-w-[var(--input-width)] k1-flex-col k1-items-start k1-justify-start k1-rounded-tl-lg k1-border k1-border-neutral k1-bg-white",
       className,
     )}
     {...props}

diff --git a/packages/design-system/src/ui/input/combobox/multipleSelect/combobox.tsx b/packages/design-system/src/ui/input/combobox/multipleSelect/combobox.tsx
@@ -156,11 +156,11 @@ const Combobox = forwardRef<
         value={selectedValues}
         {...props}
       >
-        <div className="k1-flex k1-items-center k1-w-full">
+        <div className="k1-flex k1-w-full k1-items-center">
           <Input
             onChange={handleInputChange}
             value={formatSelectedValues()}
-            className="k1-flex-grow k1-container k1-peer"
+            className="k1-peer k1-container k1-flex-grow"
             data-focus={query ? "true" : undefined}
           />
           {children}

diff --git a/packages/design-system/src/ui/input/combobox/multipleSelect/multipleSelectField.tsx b/packages/design-system/src/ui/input/combobox/multipleSelect/multipleSelectField.tsx
@@ -47,9 +47,9 @@ const MultipleSelectField = forwardRef<React.ElementRef<typeof Input>, Props>(
 
     return (
       <Field state={hasError ? "error" : "default"}>
-        {hasIcon && <Icon className={twMerge("k1-w-6 k1-h-6 k1-min-w-6")} />}
+        {hasIcon && <Icon className={twMerge("k1-h-6 k1-w-6 k1-min-w-6")} />}
         <Combobox
-          className="k1-relative k1-w-full k1-bg-transparent k1-outline-none k1-flex"
+          className="k1-relative k1-flex k1-w-full k1-bg-transparent k1-outline-none"
           ref={ref}
           showClearButton={showClearButton}
           options={options}

diff --git a/packages/design-system/src/ui/input/combobox/singleSelect/combobox.tsx b/packages/design-system/src/ui/input/combobox/singleSelect/combobox.tsx
@@ -102,10 +102,10 @@ const Combobox = forwardRef<
         value={selectedValue}
         {...props}
       >
-        <div className="k1-flex k1-items-center k1-w-full">
+        <div className="k1-flex k1-w-full k1-items-center">
           <Input
             onChange={handleInputChange}
-            className="k1-flex-grow k1-container k1-peer"
+            className="k1-peer k1-container k1-flex-grow"
             value={query}
             data-focus={query ? "true" : undefined}
             displayValue={(value: string) => {
@@ -114,14 +114,14 @@ const Combobox = forwardRef<
             }}
           />
           {children}
-          <Button className="k1-flex-shrink-0 k1-h-full k1-flex k1-items-center k1-pr-2 k1-text-center">
+          <Button className="k1-flex k1-h-full k1-flex-shrink-0 k1-items-center k1-pr-2 k1-text-center">
             <ChevronDownIcon className="k1-h-6 k1-w-6" />
           </Button>
           {showClearButton && <ClearButton onClose={handleClear} />}
         </div>
         <Options
           anchor="bottom start"
-          className="k1-flex k1-w-full k1-absolute"
+          className="k1-absolute k1-flex k1-w-full"
         >
           {filteredOptions.length === 0 ? (
             <div className="k1-px-4 k1-py-2">Žadné vysledky</div>

diff --git a/packages/design-system/src/ui/input/combobox/singleSelect/singleSelectField.tsx b/packages/design-system/src/ui/input/combobox/singleSelect/singleSelectField.tsx
@@ -47,9 +47,9 @@ const SingleSelectField = forwardRef<React.ElementRef<typeof Input>, Props>(
 
     return (
       <Field state={hasError ? "error" : "default"}>
-        {hasIcon && <Icon className={twMerge("k1-w-6 k1-h-6 k1-min-w-6")} />}
+        {hasIcon && <Icon className={twMerge("k1-h-6 k1-w-6 k1-min-w-6")} />}
         <Combobox
-          className="k1-relative k1-w-full k1-bg-transparent k1-outline-none k1-flex"
+          className="k1-relative k1-flex k1-w-full k1-bg-transparent k1-outline-none"
           ref={ref}
           showClearButton={showClearButton}
           options={options}

diff --git a/packages/design-system/src/ui/input/inputField.tsx b/packages/design-system/src/ui/input/inputField.tsx
@@ -42,7 +42,7 @@ const InputField = forwardRef<React.ElementRef<typeof Input>, Props>(
 
     return (
       <Field state={hasError ? "error" : "default"}>
-        {hasIcon && <Icon className={twMerge("k1-w-6 k1-h-6 k1-min-w-6")} />}
+        {hasIcon && <Icon className={twMerge("k1-h-6 k1-w-6 k1-min-w-6")} />}
         <Input
           {...props}
           ref={ref}

diff --git a/packages/design-system/src/ui/progress/progressBar.tsx b/packages/design-system/src/ui/progress/progressBar.tsx
@@ -23,7 +23,7 @@ const ProgressBar = ({ progress, color }: Props): JSX.Element => {
 
   return (
     <div
-      className="k1-bg-neutral k1-h-0.5 lg:k1-h-1.5 k1-w-full k1-overflow-hidden k1-rounded-full"
+      className="k1-h-0.5 k1-w-full k1-overflow-hidden k1-rounded-full k1-bg-neutral lg:k1-h-1.5"
       role="progressbar"
       aria-valuenow={width}
       aria-valuemin={0}