tailwind sorting

fern-api · Dec 19, 2024 · 343b68d · 343b68d
1 parent e8bf797
commit 343b68d
Show file tree

Hide file tree

Showing 165 changed files with 524 additions and 463 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,4 +1,4 @@
 {
   "trailingComma": "es5",
-  "plugins": ["prettier-plugin-packagejson"]
+  "plugins": ["prettier-plugin-packagejson", "prettier-plugin-tailwindcss"]
 }
diff --git a/package.json b/package.json
@@ -97,6 +97,7 @@
     "organize-imports-cli": "^0.10.0",
     "playwright": "^1.47.1",
     "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "react": "^18",
     "rollup": "^4.22.4",
     "styled-jsx": "^5.1.2",

diff --git a/packages/commons/react-commons/package.json b/packages/commons/react-commons/package.json
@@ -5,7 +5,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/fern-api/fern-platform.git",
-    "directory": "packages/commons/react/react-commons"
+    "directory": "packages/commons/react-commons"
   },
   "sideEffects": false,
   "type": "module",

diff --git a/packages/fern-docs/cache/tsconfig.json b/packages/fern-docs/cache/tsconfig.json
@@ -13,7 +13,7 @@
       "path": "../../commons/core-utils"
     },
     {
-      "path": "../fern-docs-utils"
+      "path": "../utils"
     }
   ]
 }
diff --git a/packages/fern-docs/components/src/BuiltWithFern.tsx b/packages/fern-docs/components/src/BuiltWithFern.tsx
@@ -56,7 +56,7 @@ export const BuiltWithFern = forwardRef<HTMLAnchorElement, BuiltWithFernProps>(
             )}
             onMouseMove={composeEventHandlers(props.onMouseMove, onMouseMove)}
           >
-            <span className="text-xs t-muted whitespace-nowrap">
+            <span className="t-muted whitespace-nowrap text-xs">
               Built with
             </span>
             <FernLogo

diff --git a/packages/fern-docs/components/src/CopyToClipboardButton.tsx b/packages/fern-docs/components/src/CopyToClipboardButton.tsx
@@ -40,7 +40,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButton.Props> = ({
           copyToClipboard?.();
         }) ?? (
           <FernButton
-            className={cn("group fern-copy-button", className)}
+            className={cn("fern-copy-button group", className)}
             disabled={copyToClipboard == null}
             onClickCapture={(e) => {
               onClick?.(e);

diff --git a/packages/fern-docs/components/src/Empty.tsx b/packages/fern-docs/components/src/Empty.tsx
@@ -7,7 +7,7 @@ type EmptyProps = {
 
 export const Empty = ({ name, description }: EmptyProps): ReactElement => {
   return (
-    <div className="flex flex-col items-center ">
+    <div className="flex flex-col items-center">
       <div className="t-accent"> {name} </div>
       <div className="t-muted"> {description} </div>
     </div>

diff --git a/packages/fern-docs/components/src/FernButton.scss b/packages/fern-docs/components/src/FernButton.scss
@@ -2,7 +2,7 @@
   .fern-button {
     @apply transition-colors hover:transition-none;
     @apply inline-flex items-center justify-center;
-    @apply rounded-lg px-3 py-1 text-sm h-10 sm:h-8;
+    @apply h-10 rounded-lg px-3 py-1 text-sm sm:h-8;
     @apply cursor-pointer;
 
     &.multiline,
@@ -25,16 +25,16 @@
     }
 
     > .fern-button-content {
-      @apply items-center inline-flex shrink min-w-0;
-      @apply gap-1.5 h-6;
+      @apply inline-flex min-w-0 shrink items-center;
+      @apply h-6 gap-1.5;
 
       > .fa-icon,
       > svg {
         @apply size-icon-md shrink-0;
       }
 
       .fern-button-text {
-        @apply shrink min-w-0;
+        @apply min-w-0 shrink;
       }
     }
 
@@ -45,11 +45,11 @@
     }
 
     &:not(.text-left, .text-right) > .fern-button-content {
-      @apply text-center justify-center;
+      @apply justify-center text-center;
     }
 
     &.text-left > .fern-button-content {
-      @apply justify-start flex-1;
+      @apply flex-1 justify-start;
 
       .fern-button-text {
         @apply flex-1;
@@ -65,7 +65,7 @@
     }
 
     &.small {
-      @apply px-2 py-1 text-xs h-7 sm:h-6;
+      @apply h-7 px-2 py-1 text-xs sm:h-6;
 
       &:not(.square):has(> .fern-button-content > .fa-icon:first-child),
       &:not(.square):has(> .fern-button-content > svg:first-child) {
@@ -78,7 +78,7 @@
       }
 
       > .fern-button-content {
-        @apply gap-1.5 h-4;
+        @apply h-4 gap-1.5;
 
         > .fa-icon,
         > svg {
@@ -96,7 +96,7 @@
     }
 
     &.large {
-      @apply px-3 lg:px-4 py-2 text-base h-11 sm:h-10;
+      @apply h-11 px-3 py-2 text-base sm:h-10 lg:px-4;
 
       &:not(.square):has(> .fern-button-content > .fa-icon:first-child),
       &:not(.square):has(> .fern-button-content > svg:first-child) {
@@ -109,7 +109,7 @@
       }
 
       > .fern-button-content {
-        @apply gap-2 h-6;
+        @apply h-6 gap-2;
 
         > .fa-icon,
         > svg {
@@ -133,14 +133,14 @@
 
     &:not([disabled]) {
       &.minimal {
-        @apply bg-transparent t-muted;
+        @apply t-muted bg-transparent;
 
         &:hover {
           @apply t-default;
         }
 
         // @apply t-muted hover:t-default;
-        @apply hover:bg-tag-default data-[state=on]:bg-tag-default data-[state=checked]:bg-tag-default data-[state=open]:bg-tag-default data-[state=opening]:bg-tag-default  data-[selected=true]:bg-tag-default;
+        @apply hover:bg-tag-default data-[selected=true]:bg-tag-default data-[state=checked]:bg-tag-default data-[state=on]:bg-tag-default data-[state=open]:bg-tag-default data-[state=opening]:bg-tag-default;
 
         .fa-icon {
           @apply bg-text-default/60;
@@ -162,7 +162,7 @@
 
         &.primary {
           @apply t-accent hover:t-accent;
-          @apply hover:bg-tag-primary data-[state=on]:bg-tag-primary data-[state=checked]:bg-tag-primary data-[state=open]:bg-tag-primary data-[state=opening]:bg-tag-primary  data-[selected=true]:bg-tag-primary;
+          @apply hover:bg-tag-primary data-[selected=true]:bg-tag-primary data-[state=checked]:bg-tag-primary data-[state=on]:bg-tag-primary data-[state=open]:bg-tag-primary data-[state=opening]:bg-tag-primary;
 
           .fa-icon {
             @apply bg-accent-aa;
@@ -175,7 +175,7 @@
 
         &.success {
           @apply t-success hover:t-success;
-          @apply hover:bg-tag-success data-[state=on]:bg-tag-success data-[state=checked]:bg-tag-success data-[state=open]:bg-tag-success data-[state=opening]:bg-tag-success  data-[selected=true]:bg-tag-success;
+          @apply hover:bg-tag-success data-[selected=true]:bg-tag-success data-[state=checked]:bg-tag-success data-[state=on]:bg-tag-success data-[state=open]:bg-tag-success data-[state=opening]:bg-tag-success;
 
           .fa-icon {
             @apply bg-intent-success;
@@ -188,7 +188,7 @@
 
         &.warning {
           @apply t-warning hover:t-warning;
-          @apply hover:bg-tag-warning data-[state=on]:bg-tag-warning data-[state=checked]:bg-tag-warning data-[state=open]:bg-tag-warning data-[state=opening]:bg-tag-warning  data-[selected=true]:bg-tag-warning;
+          @apply hover:bg-tag-warning data-[selected=true]:bg-tag-warning data-[state=checked]:bg-tag-warning data-[state=on]:bg-tag-warning data-[state=open]:bg-tag-warning data-[state=opening]:bg-tag-warning;
 
           .fa-icon {
             @apply bg-intent-warning;
@@ -201,7 +201,7 @@
 
         &.danger {
           @apply t-danger hover:t-danger;
-          @apply hover:bg-tag-danger data-[state=on]:bg-tag-danger data-[state=checked]:bg-tag-danger data-[state=open]:bg-tag-danger data-[state=opening]:bg-tag-danger  data-[selected=true]:bg-tag-danger;
+          @apply hover:bg-tag-danger data-[selected=true]:bg-tag-danger data-[state=checked]:bg-tag-danger data-[state=on]:bg-tag-danger data-[state=open]:bg-tag-danger data-[state=opening]:bg-tag-danger;
 
           .fa-icon {
             @apply bg-intent-danger;
@@ -214,33 +214,33 @@
       }
 
       &.filled {
-        @apply bg-text-default/60 t-default;
+        @apply t-default bg-text-default/60;
 
         &:hover,
         &[data-state="on"],
         &[data-state="checked"],
         &[data-state="open"],
         &[data-state="opening"] {
-          @apply bg-text-default/60 t-default;
+          @apply t-default bg-text-default/60;
         }
 
         .fa-icon {
-          @apply bg-text-default/60 t-default;
+          @apply t-default bg-text-default/60;
         }
 
         svg {
           @apply text-text-default/60;
         }
 
         &.primary {
-          @apply bg-accent hover:bg-accent t-accent-contrast;
+          @apply t-accent-contrast bg-accent hover:bg-accent;
 
           &:hover,
           &[data-state="on"],
           &[data-state="checked"],
           &[data-state="open"],
           &[data-state="opening"] {
-            @apply bg-accent-tinted t-accent-contrast;
+            @apply t-accent-contrast bg-accent-tinted;
           }
 
           .fa-icon {
@@ -302,15 +302,15 @@
       }
 
       &.outlined {
-        @apply ring-1 transition-[box-shadow,background] hover:transition-none ring-inset;
-        @apply ring-default t-default;
+        @apply ring-1 ring-inset transition-[box-shadow,background] hover:transition-none;
+        @apply t-default ring-default;
 
         &:hover,
         &[data-state="on"],
         &[data-state="checked"],
         &[data-state="open"],
         &[data-state="opening"] {
-          @apply bg-tag-default t-default;
+          @apply t-default bg-tag-default;
         }
 
         .fa-icon {
@@ -322,7 +322,7 @@
         }
 
         &.primary {
-          @apply ring-border-primary t-accent;
+          @apply t-accent ring-border-primary;
 
           .fa-icon {
             @apply bg-accent-aa;
@@ -337,7 +337,7 @@
           &[data-state="checked"],
           &[data-state="open"],
           &[data-state="opening"] {
-            @apply bg-tag-primary t-accent-aaa;
+            @apply t-accent-aaa bg-tag-primary;
 
             .fa-icon {
               @apply bg-accent-aaa;
@@ -350,7 +350,7 @@
         }
 
         &.success {
-          @apply ring-border-success text-intent-success;
+          @apply text-intent-success ring-border-success;
 
           &:hover,
           &[data-state="on"],
@@ -370,7 +370,7 @@
         }
 
         &.warning {
-          @apply ring-border-warning text-intent-warning;
+          @apply text-intent-warning ring-border-warning;
 
           &:hover,
           &[data-state="on"],
@@ -390,7 +390,7 @@
         }
 
         &.danger {
-          @apply ring-border-danger text-intent-danger;
+          @apply text-intent-danger ring-border-danger;
 
           &:hover,
           &[data-state="on"],

diff --git a/packages/fern-docs/components/src/FernCard.scss b/packages/fern-docs/components/src/FernCard.scss
@@ -1,19 +1,19 @@
 @layer components {
   .fern-card {
-    @apply border-card-border t-default hover:t-default border bg-card transition-all hover:transition-none;
+    @apply t-default bg-card border border-card-border transition-all hover:t-default hover:transition-none;
 
     &.interactive {
-      @apply cursor-pointer shadow-card;
+      @apply shadow-card cursor-pointer;
       @apply hover:shadow-card-elevated hover:border-accent;
-      @apply active:shadow-card-elevated active:border-primary;
+      @apply active:border-primary active:shadow-card-elevated;
 
       &.active {
-        @apply shadow-card-elevated border-primary;
+        @apply border-primary shadow-card-elevated;
       }
     }
 
     &.elevated {
-      @apply shadow-card-elevated border-primary;
+      @apply border-primary shadow-card-elevated;
     }
 
     li {

diff --git a/packages/fern-docs/components/src/FernCheckbox.scss b/packages/fern-docs/components/src/FernCheckbox.scss
@@ -4,7 +4,7 @@
   }
 
   .fern-checkbox-item {
-    @apply ring-default relative mt-0.5 inline-block size-4 ring-1 rounded-sm ring-inset;
+    @apply ring-default relative mt-0.5 inline-block size-4 rounded-sm ring-1 ring-inset;
   }
 
   .fern-checkbox-item:hover {
@@ -16,6 +16,6 @@
   }
 
   .fern-checkbox-indicator {
-    @apply size-4 bg-accent flex items-center justify-center text-accent-contrast rounded-sm;
+    @apply flex size-4 items-center justify-center rounded-sm bg-accent text-accent-contrast;
   }
 }
diff --git a/packages/fern-docs/components/src/FernChip.tsx b/packages/fern-docs/components/src/FernChip.tsx
@@ -45,10 +45,10 @@ export const FernChip = forwardRef<HTMLButtonElement, FernChipProps>(
       <button
         ref={ref}
         className={clsx(
-          "font-mono inline-flex justify-center items-center leading-none cursor-default",
+          "inline-flex cursor-default items-center justify-center font-mono leading-none",
           {
-            "h-[18px] min-w-[18px] text-[10px] px-1.5": size === "sm",
-            "py-1 px-2 h-6 min-w-6 text-xs": size === "lg",
+            "h-[18px] min-w-[18px] px-1.5 text-[10px]": size === "sm",
+            "h-6 min-w-6 px-2 py-1 text-xs": size === "lg",
             "rounded-md": size === "sm" && !rounded,
             "rounded-lg": size === "lg" && !rounded,
             "rounded-full": rounded,
@@ -75,7 +75,7 @@ export const FernChip = forwardRef<HTMLButtonElement, FernChipProps>(
             // Amber
             "bg-amber-a3 text-amber-a11 hover:bg-amber-a4":
               colorScheme === "amber" && variant === "subtle",
-            "bg-amber-a10 text-amber-1 dark:text-amber-12 hover:bg-amber-a11":
+            "bg-amber-a10 text-amber-1 hover:bg-amber-a11 dark:text-amber-12":
               colorScheme === "amber" && variant === "solid",
 
             // Red
@@ -87,7 +87,7 @@ export const FernChip = forwardRef<HTMLButtonElement, FernChipProps>(
             // Accent
             "bg-accent/20 text-accent-aaa hover:bg-accent/25":
               colorScheme === "accent" && variant === "subtle",
-            "bg-accent t-accent-contrast hover:bg-accent-tinted":
+            "t-accent-contrast bg-accent hover:bg-accent-tinted":
               colorScheme === "accent" && variant === "solid",
           },
           className

diff --git a/packages/fern-docs/components/src/FernDropdown.scss b/packages/fern-docs/components/src/FernDropdown.scss
@@ -3,15 +3,15 @@
     @apply relative z-50;
     @apply animate-popover;
     @apply min-w-[var(--radix-dropdown-menu-trigger-width)];
-    @apply border-default flex max-h-[300px] flex-col rounded-lg border bg-background-translucent backdrop-blur will-change-[opacity,transform];
+    @apply bg-background-translucent border-default flex max-h-[300px] flex-col rounded-lg border backdrop-blur will-change-[opacity,transform];
     @apply shadow-xl;
 
     .fern-dropdown-item {
-      @apply flex justify-start py-1 px-2 rounded text-sm w-full cursor-default items-center text-left;
-      @apply data-[highlighted]:bg-accent data-[highlighted]:t-accent-contrast will-change-[background-color,color];
+      @apply flex w-full cursor-default items-center justify-start rounded px-2 py-1 text-left text-sm;
+      @apply will-change-[background-color,color] data-[highlighted]:t-accent-contrast data-[highlighted]:bg-accent;
 
       .fern-dropdown-item-indicator {
-        @apply flex-none w-4 h-full flex items-center justify-center mr-1;
+        @apply mr-1 flex h-full w-4 flex-none items-center justify-center;
       }
     }
   }

diff --git a/packages/fern-docs/components/src/FernDropdown.tsx b/packages/fern-docs/components/src/FernDropdown.tsx
@@ -209,7 +209,7 @@ function FernDropdownItemValue({
 
         {option.helperText != null && (
           <div
-            className="mt-0.5 ml-5 text-xs opacity-60 text-start leading-snug"
+            className="ml-5 mt-0.5 text-start text-xs leading-snug opacity-60"
             ref={helperTextRef}
           >
             {option.helperText}