Merge pull request #3183 from quantified-uncertainty/prettier-plugin-…

…tailwindcss Added prettier-plugin-tailwindcss
quantified-uncertainty · Apr 16, 2024 · 1bd4f46 · 1bd4f46
2 parents 3a75eee + 4e90643
commit 1bd4f46
Show file tree

Hide file tree

Showing 129 changed files with 350 additions and 290 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "turbo": "^1.13.0",
     "turbo-ignore": "^1.13.0"
   },

diff --git a/packages/components/src/components/CodeEditor/focusGutterExtension.tsx b/packages/components/src/components/CodeEditor/focusGutterExtension.tsx
@@ -115,7 +115,7 @@ class FocusableMarker extends GutterMarker {
   override toDOM() {
     return reactAsDom(
       <div
-        className="pr-1 pl-0.5 cursor-pointer group/marker"
+        className="group/marker cursor-pointer pl-0.5 pr-1"
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -128,7 +128,7 @@ class FocusableMarker extends GutterMarker {
             "bg-violet-50 [.cm-activeLineGutter_&]:bg-white",
             // highlight all markers on gutter hover; highlight the hovered markers even more
             "group-hover/gutter:bg-violet-200 group-hover/marker:!bg-violet-400",
-            "rounded-sm w-[3px] h-4 br-1 mt-[1px]",
+            "br-1 mt-[1px] h-4 w-[3px] rounded-sm",
             "transition duration-75"
           )}
         />

diff --git a/packages/components/src/components/CodeEditor/useTooltipsExtension.tsx b/packages/components/src/components/CodeEditor/useTooltipsExtension.tsx
@@ -28,7 +28,7 @@ const TooltipBox: FC<PropsWithChildren<{ view: EditorView }>> = ({
   });
 
   return (
-    <div className="border rounded-sm shadow-lg h-full overflow-y-auto">
+    <div className="h-full overflow-y-auto rounded-sm border shadow-lg">
       {children}
     </div>
   );

diff --git a/packages/components/src/components/PlaygroundSettings.tsx b/packages/components/src/components/PlaygroundSettings.tsx
@@ -269,7 +269,7 @@ export const PlaygroundSettingsForm: React.FC<{
   metaSettings,
 }) => {
   return (
-    <div className="divide-y divide-gray-200 max-w-2xl">
+    <div className="max-w-2xl divide-y divide-gray-200">
       {withGlobalSettings && (
         <>
           <div className="mb-6">
@@ -278,7 +278,7 @@ export const PlaygroundSettingsForm: React.FC<{
             </FormSection>
           </div>
 
-          <div className="pt-6 mb-6">
+          <div className="mb-6 pt-6">
             <FormSection title="General Display Settings">
               <NumberFormField<PlaygroundSettings>
                 name="chartHeight"
@@ -289,18 +289,18 @@ export const PlaygroundSettingsForm: React.FC<{
         </>
       )}
 
-      <div className="pt-6 mb-6">
+      <div className="mb-6 pt-6">
         <DistributionSettingsForm metaSettings={metaSettings} />
       </div>
 
       {withFunctionSettings ? (
-        <div className="pt-6 mb-6">
+        <div className="mb-6 pt-6">
           <FunctionSettingsForm />
         </div>
       ) : null}
 
       {withGlobalSettings ? (
-        <div className="pt-6 mb-6">
+        <div className="mb-6 pt-6">
           <EditorSettingsForm />
         </div>
       ) : null}

diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
@@ -56,7 +56,7 @@ export const SquiggleEditor: FC<SquiggleEditorProps> = ({
   return (
     <div>
       <div
-        className="border border-slate-300 bg-slate-50 rounded-sm p-2"
+        className="rounded-sm border border-slate-300 bg-slate-50 p-2"
         data-testid="squiggle-editor"
       >
         <CodeEditor

diff --git a/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx b/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx
@@ -91,12 +91,12 @@ export const ResizableTwoPanelLayout: FC<Props> = ({
         >
           <div
             ref={handleRef}
-            className="absolute top-0 h-full border-l border-slate-300 hover:border-blue-500 transition cursor-ew-resize"
+            className="absolute top-0 h-full cursor-ew-resize border-l border-slate-300 transition hover:border-blue-500"
             style={{ width: 5, right: -5 }}
           />
         </DraggableCore>
       </div>
-      <div className="flex-1 flex flex-col overflow-y-auto">
+      <div className="flex flex-1 flex-col overflow-y-auto">
         {renderRight()}
       </div>
     </div>

diff --git a/packages/components/src/components/SquigglePlayground/index.tsx b/packages/components/src/components/SquigglePlayground/index.tsx
@@ -188,13 +188,13 @@ export const SquigglePlayground: React.FC<SquigglePlaygroundProps> = (
       );
     } else if (defaultAutorunMode === false) {
       return (
-        <div className="grid place-items-center h-full">
-          <div className="text-gray-500 text-sm">{`Press the "Run" button (top left) to simulate`}</div>
+        <div className="grid h-full place-items-center">
+          <div className="text-sm text-gray-500">{`Press the "Run" button (top left) to simulate`}</div>
         </div>
       );
     } else {
       return (
-        <div className="grid place-items-center h-full">
+        <div className="grid h-full place-items-center">
           <RefreshIcon className="animate-spin text-slate-400" size={24} />
         </div>
       );

diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx
@@ -100,7 +100,7 @@ export const Title: FC<TitleProps> = (props) => {
   return (
     <div
       className={clsx(
-        "leading-3 flex flex-row items-center",
+        "flex flex-row items-center leading-3",
         showColon && "mr-3"
       )}
     >
@@ -116,7 +116,7 @@ export const Title: FC<TitleProps> = (props) => {
       >
         {title}
       </div>
-      {showColon && <div className="text-gray-400 font-mono">:</div>}
+      {showColon && <div className="font-mono text-gray-400">:</div>}
     </div>
   );
 };
diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx
@@ -137,7 +137,7 @@ export const ValueWithContextViewer: FC<Props> = ({
       return (
         <div
           className={clsx(
-            "w-4 mr-1.5 flex justify-center cursor-pointer hover:!text-stone-600",
+            "mr-1.5 flex w-4 cursor-pointer justify-center hover:!text-stone-600",
             isOpen ? "text-stone-600 opacity-40" : "text-stone-800 opacity-40"
           )}
           onClick={handle.toggleCollapsed}
@@ -146,7 +146,7 @@ export const ValueWithContextViewer: FC<Props> = ({
         </div>
       );
     } else {
-      return <div className="w-4 mr-1.5" />;
+      return <div className="mr-1.5 w-4" />;
     }
   };
 
@@ -155,7 +155,7 @@ export const ValueWithContextViewer: FC<Props> = ({
     if (isDictOrList) {
       return (
         <div
-          className="group w-4 shrink-0 flex justify-center cursor-pointer"
+          className="group flex w-4 shrink-0 cursor-pointer justify-center"
           onClick={handle.toggleCollapsed}
         >
           <div className="w-px bg-stone-100 group-hover:bg-stone-400" />
@@ -178,9 +178,9 @@ export const ValueWithContextViewer: FC<Props> = ({
             }}
             tabIndex={viewerType === "tooltip" ? undefined : 0}
             className={clsx(
-              "flex justify-between group pr-0.5 hover:bg-stone-100 rounded-sm focus-visible:outline-none",
+              "group flex justify-between rounded-sm pr-0.5 hover:bg-stone-100 focus-visible:outline-none",
               isZoomedIn
-                ? "focus:bg-indigo-50 mb-2 px-0.5 py-1"
+                ? "mb-2 px-0.5 py-1 focus:bg-indigo-50"
                 : "focus:bg-indigo-100"
             )}
             onFocus={(_) => {
@@ -207,13 +207,13 @@ export const ValueWithContextViewer: FC<Props> = ({
               />
 
               {!isOpen && (
-                <div className="text-sm text-blue-800 ml-2">
+                <div className="ml-2 text-sm text-blue-800">
                   <SquiggleValuePreview value={value} />
                 </div>
               )}
               {!isOpen && <CommentIconForValue value={value} />}
             </div>
-            <div className="inline-flex space-x-2 items-center">
+            <div className="inline-flex items-center space-x-2">
               <SpecificationDropdown value={value} />
               {enableDropdownMenu && <SquiggleValueMenu value={value} />}
               {exportData && exportData.path.length < 2 && onOpenExport && (
@@ -237,7 +237,7 @@ export const ValueWithContextViewer: FC<Props> = ({
                         )
                       }
                       className={clsx(
-                        "transition cursor-pointer",
+                        "cursor-pointer transition",
                         isRootImport
                           ? "text-violet-400 hover:!text-violet-900 group-hover:text-violet-500 group-focus:text-violet-600"
                           : "text-slate-200 hover:!text-slate-900 group-hover:text-slate-400 group-focus:text-slate-400"

diff --git a/packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx b/packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx
@@ -12,7 +12,7 @@ export const ZoomedInNavigationItem: FC<{
   <div className="flex items-center">
     <span
       onClick={onClick}
-      className="text-sm text-stone-500 hover:text-stone-900 hover:underline font-mono cursor-pointer"
+      className="cursor-pointer font-mono text-sm text-stone-500 hover:text-stone-900 hover:underline"
     >
       {text}
     </span>

diff --git a/packages/components/src/components/ViewerWithMenuBar/Layout.tsx b/packages/components/src/components/ViewerWithMenuBar/Layout.tsx
@@ -13,7 +13,7 @@ export const Layout: FC<{
     <div className="flex flex-col overflow-y-auto">
       <div
         className={clsx(
-          `flex justify-between items-center h-8 mb-1`,
+          `mb-1 flex h-8 items-center justify-between`,
           `px-${xPadding}`
         )}
       >

diff --git a/packages/components/src/components/ViewerWithMenuBar/RandomizeSeedButton.tsx b/packages/components/src/components/ViewerWithMenuBar/RandomizeSeedButton.tsx
@@ -61,7 +61,7 @@ export const RandomizeSeedButton: FC<{
       placement="bottom"
       offset={5}
     >
-      <div className="ml-1 px-1 cursor-pointer group" onClick={randomizeSeed}>
+      <div className="group ml-1 cursor-pointer px-1" onClick={randomizeSeed}>
         <DiceIcon
           side={stringToRandomNumber(seed)}
           isSimulating={isSimulating}

diff --git a/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx b/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx
@@ -16,7 +16,7 @@ export const SimulatingIndicator: FC<{
   return (
     <div
       className={clsx(
-        "text-sm whitespace-nowrap",
+        "whitespace-nowrap text-sm",
         _isSimulating ? "text-zinc-200" : "text-zinc-400"
       )}
     >

diff --git a/packages/components/src/components/ViewerWithMenuBar/ViewerBody.tsx b/packages/components/src/components/ViewerWithMenuBar/ViewerBody.tsx
@@ -52,7 +52,7 @@ export const ViewerBody = forwardRef<SquiggleViewerHandle, Props>(
       return (
         <div className="relative">
           {isSimulating && (
-            <div className="absolute z-10 inset-0 bg-white opacity-50" />
+            <div className="absolute inset-0 z-10 bg-white opacity-50" />
           )}
           {
             <SquiggleViewerWithoutProvider

diff --git a/packages/components/src/components/ui/Alert.tsx b/packages/components/src/components/ui/Alert.tsx
@@ -30,7 +30,7 @@ export const Alert: React.FC<{
     >
       <div className="flex">
         <Icon
-          className={clsx("h-4 w-4 flex-shrink-0 mt-1 ml-1", iconColor)}
+          className={clsx("ml-1 mt-1 h-4 w-4 flex-shrink-0", iconColor)}
           aria-hidden="true"
         />
         <div className="ml-3 grow">

diff --git a/packages/components/src/components/ui/ErrorBoundary.tsx b/packages/components/src/components/ui/ErrorBoundary.tsx
@@ -18,11 +18,11 @@ export class ErrorBoundary extends Component<PropsWithChildren, State> {
   public override render() {
     if (this.state.error) {
       return (
-        <div className="m-2 p-4 bg-red-300 rounded">
+        <div className="m-2 rounded bg-red-300 p-4">
           <header className="mb-2 font-semibold">Fatal Error</header>
           <div className="mb-2">{this.state.error.message}</div>
           <div className="mb-2">Try reloading the browser.</div>
-          <pre className="text-xs overflow-auto">{this.state.error.stack}</pre>
+          <pre className="overflow-auto text-xs">{this.state.error.stack}</pre>
         </div>
       );
     }

diff --git a/packages/components/src/components/ui/FnDocumentation.tsx b/packages/components/src/components/ui/FnDocumentation.tsx
@@ -88,7 +88,7 @@ export const FnDocumentation: FC<{
               target="_blank"
               rel="noreferrer"
               className={clsx(
-                "text-blue-500 hover:underline leading-none",
+                "leading-none text-blue-500 hover:underline",
                 size === "small" ? "text-sm" : "text-md"
               )}
             >
@@ -117,7 +117,7 @@ export const FnDocumentation: FC<{
             {shorthand && (
               <div className={clsx("bg-orange-100 text-gray-500", tagCss)}>
                 {`${shorthand.type}:  `}
-                <span className="font-mono ml-2 text-orange-800">
+                <span className="ml-2 font-mono text-orange-800">
                   {shorthand.symbol}
                 </span>
               </div>
@@ -152,12 +152,12 @@ export const FnDocumentation: FC<{
       ) : null}
       {definitions ? (
         <Section>
-          <header className={clsx("text-slate-600 font-medium mb-2", textSize)}>
+          <header className={clsx("mb-2 font-medium text-slate-600", textSize)}>
             Signatures
           </header>
           <div
             className={clsx(
-              "text-slate-600 font-mono p-2 bg-slate-100 rounded-md space-y-2",
+              "space-y-2 rounded-md bg-slate-100 p-2 font-mono text-slate-600",
               textSize
             )}
           >
@@ -171,14 +171,14 @@ export const FnDocumentation: FC<{
       ) : null}
       {examples?.length ? (
         <Section>
-          <header className={clsx("text-slate-600 font-medium mb-2", textSize)}>
+          <header className={clsx("mb-2 font-medium text-slate-600", textSize)}>
             Examples
           </header>
 
           {examples &&
             examples.map(({ text, isInteractive }, i) =>
               isInteractive ? (
-                <div className="pt-2 pb-4" key={i}>
+                <div className="pb-4 pt-2" key={i}>
                   <SquiggleEditor
                     defaultCode={text}
                     editorFontSize={size === "small" ? 12 : 13}

diff --git a/packages/components/src/components/ui/FormSection.tsx b/packages/components/src/components/ui/FormSection.tsx
@@ -5,7 +5,7 @@ export const FormSection: React.FC<{
   children: React.ReactNode;
 }> = ({ title, children }) => (
   <div>
-    <header className="text-md leading-4 font-medium text-slate-600">
+    <header className="text-md font-medium leading-4 text-slate-600">
       {title}
     </header>
     <div className="mt-4">{children}</div>

diff --git a/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx b/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx
@@ -31,7 +31,7 @@ export const ToolbarItem: FC<Props> = ({
   const main = (
     <div
       className={clsx(
-        "flex items-center text-slate-600 space-x-1 text-sm px-4 h-full cursor-pointer hover:bg-slate-200 select-none whitespace-nowrap transition ",
+        "flex h-full cursor-pointer select-none items-center space-x-1 whitespace-nowrap px-4 text-sm text-slate-600 transition hover:bg-slate-200 ",
         className
       )}
       onClick={onClick}

diff --git a/packages/components/src/components/ui/PanelWithToolbar/index.tsx b/packages/components/src/components/ui/PanelWithToolbar/index.tsx
@@ -36,32 +36,32 @@ export function PanelWithToolbar<const ModalNames extends string[]>({
 
   //We want to center the title, so need similarly-widthed items on either side
   const modalHeader = modal && (
-    <div className="h-full flex gap-2">
+    <div className="flex h-full gap-2">
       <ToolbarItem
-        className="flex-grow-0 flex-shrink-0 w-20"
+        className="w-20 flex-shrink-0 flex-grow-0"
         onClick={closeModal}
       >
         &larr; Back
       </ToolbarItem>
-      <div className="flex-grow flex-shrink text-center self-center text-sm text-slate-600 font-semibold">
+      <div className="flex-shrink flex-grow self-center text-center text-sm font-semibold text-slate-600">
         {modal.title}
       </div>
-      <div className="flex-grow-0 flex-shrink-0 w-20 invisible"></div>
+      <div className="invisible w-20 flex-shrink-0 flex-grow-0"></div>
     </div>
   );
 
   return (
-    <div className="h-full flex flex-col">
-      <div className="h-8 bg-slate-50 border-b border-slate-200 overflow-hidden mb-1 px-4">
+    <div className="flex h-full flex-col">
+      <div className="mb-1 h-8 overflow-hidden border-b border-slate-200 bg-slate-50 px-4">
         {modal ? (
           modalHeader
         ) : (
-          <div className="h-full grid place-items-stretch">
+          <div className="grid h-full place-items-stretch">
             {renderToolbar({ openModal })}
           </div>
         )}
       </div>
-      <div className="flex-1 grid place-items-stretch overflow-auto">
+      <div className="grid flex-1 place-items-stretch overflow-auto">
         {modal ? <div className="px-4 py-4"> {modal.body} </div> : renderBody()}
       </div>
     </div>