diff --git a/apps/next/src/app/(home)/page.tsx b/apps/next/src/app/(home)/page.tsx
index 9138eac2abf071ce72c02eae4b041d17d092c033..f94edc4d52a0ffaaf1ef07b64f162fcd4b70bd55 100644
--- a/apps/next/src/app/(home)/page.tsx
+++ b/apps/next/src/app/(home)/page.tsx
@@ -24,16 +24,16 @@ import { Suspense } from "react";
export default function HomePage() {
return (
<main className="container mx-auto px-4 py-12">
- <h1 className="text-4xl md:text-6xl font-bold text-center mb-4">
+ <h1 className="mb-4 text-center text-4xl font-bold md:text-6xl">
Build context-augmented web apps using
<br /> <span className="text-blue-500">LlamaIndex.TS</span>
</h1>
- <p className="text-xl text-center text-fd-muted-foreground mb-12 ">
+ <p className="text-fd-muted-foreground mb-12 text-center text-xl">
LlamaIndex.TS is the JS/TS version of{" "}
<a href="https://llamaindex.ai">LlamaIndex</a>, the framework for
building agentic generative AI applications connected to your data.
</p>
- <div className="text-center text-lg text-fd-muted-foreground mb-12">
+ <div className="text-fd-muted-foreground mb-12 text-center text-lg">
<span>Designed for building web applications in </span>
<Supports />
</div>
@@ -149,13 +149,13 @@ await agent.chat('...');`}
>
<div className="mt-8 flex flex-col gap-8">
<div>
- <h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
+ <h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
LLMs
</h3>
<InfiniteLLMProviders />
</div>
<div>
- <h3 className="text-lg font-semibold text-fd-muted-foreground mb-2">
+ <h3 className="text-fd-muted-foreground mb-2 text-lg font-semibold">
Vector Stores
</h3>
<InfiniteVectorStoreProviders />
diff --git a/apps/next/src/app/docs/layout.tsx b/apps/next/src/app/docs/layout.tsx
index 7d2f6ae7404cc39db3843527e909c0df50d5f921..1bad047a5f45fcb475d7da90814fa18482897793 100644
--- a/apps/next/src/app/docs/layout.tsx
+++ b/apps/next/src/app/docs/layout.tsx
@@ -22,7 +22,7 @@ export default function Layout({ children }: { children: ReactNode }) {
variant: "secondary",
size: "xs",
className:
- "md:flex-1 px-2 ms-2 gap-1.5 text-fd-muted-foreground rounded-full",
+ "text-fd-muted-foreground ms-2 gap-1.5 rounded-full px-2 md:flex-1",
}),
)}
>
diff --git a/apps/next/src/app/layout.tsx b/apps/next/src/app/layout.tsx
index 4a975ed23f6f7980b2c253b0ce2f35a80c7091f5..b0add1314ffb22a15707252e14c4a2fce2cec189 100644
--- a/apps/next/src/app/layout.tsx
+++ b/apps/next/src/app/layout.tsx
@@ -32,7 +32,7 @@ export default function Layout({ children }: { children: ReactNode }) {
href="/favicon-16x16.png"
/>
</head>
- <body className="flex flex-col min-h-screen">
+ <body className="flex min-h-screen flex-col">
<TooltipProvider>
<AIProvider>
<RootProvider>{children}</RootProvider>
diff --git a/apps/next/src/components/ai-chat.tsx b/apps/next/src/components/ai-chat.tsx
index aedded68b6a3b7ccf8f7aa06b33ecc881a8540c9..b536fd0649f25c5fab24a0459acf2832129ab7ff 100644
--- a/apps/next/src/components/ai-chat.tsx
+++ b/apps/next/src/components/ai-chat.tsx
@@ -45,13 +45,13 @@ export const AITrigger = (props: AITriggerProps) => {
<Dialog>
<DialogTrigger {...props} />
<DialogPortal>
- <DialogOverlay className="fixed inset-0 z-50 bg-fd-background/50 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" />
+ <DialogOverlay className="bg-fd-background/50 data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in fixed inset-0 z-50 backdrop-blur-sm" />
<DialogContent
onOpenAutoFocus={(e) => {
document.getElementById("nd-ai-input")?.focus();
e.preventDefault();
}}
- className="fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in"
+ className="bg-fd-popover text-fd-popover-foreground data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in fixed left-1/2 z-50 my-[5vh] flex max-h-[90dvh] w-[98vw] max-w-[860px] origin-left -translate-x-1/2 flex-col rounded-lg border shadow-lg focus-visible:outline-none"
>
<DialogHeader>
<DialogTitle className="sr-only">Search AI</DialogTitle>
@@ -67,11 +67,11 @@ export const AITrigger = (props: AITriggerProps) => {
</AlertDescription>
</Alert>
</DialogHeader>
- <div className="overflow-scroll flex-grow mt-4">
+ <div className="mt-4 flex-grow overflow-scroll">
<ChatList messages={messages} />
</div>
<form
- className="px-4 py-2 space-y-4"
+ className="space-y-4 px-4 py-2"
action={async () => {
const value = inputValue.trim();
setInputValue("");
@@ -102,7 +102,7 @@ export const AITrigger = (props: AITriggerProps) => {
}
}}
>
- <div className="flex flex-row w-full items-center gap-2">
+ <div className="flex w-full flex-row items-center gap-2">
<Textarea
tabIndex={0}
placeholder="Ask AI about documentation."
diff --git a/apps/next/src/components/contribution.tsx b/apps/next/src/components/contribution.tsx
index c5a76445c7f2d27a659b17850db887a40ad8e6a4..9321397a79a139c4cc7eb8ddc024fa4dba6a0bbd 100644
--- a/apps/next/src/components/contribution.tsx
+++ b/apps/next/src/components/contribution.tsx
@@ -10,7 +10,7 @@ export function Contributing(): ReactElement {
<h2 className="mb-4 text-xl font-semibold sm:text-2xl">
Made possible by you <Heart className="inline align-middle" />
</h2>
- <p className="mb-4 text-fd-muted-foreground">
+ <p className="text-fd-muted-foreground mb-4">
LlamaIndex.TS is powered by the open source community.
</p>
<div className="mb-8 flex flex-row items-center gap-2">
diff --git a/apps/next/src/components/contributor-count.tsx b/apps/next/src/components/contributor-count.tsx
index de55f0860af0fc6286458420b417a0be2078166c..19db670454a0de9e9a8f131e48475a45616b752a 100644
--- a/apps/next/src/components/contributor-count.tsx
+++ b/apps/next/src/components/contributor-count.tsx
@@ -33,7 +33,7 @@ export default async function ContributorCounter({
href={`https://github.com/${contributor.login}`}
rel="noreferrer noopener"
target="_blank"
- className="size-10 overflow-hidden rounded-full border-4 border-fd-background bg-fd-background md:-mr-4 md:size-12"
+ className="border-fd-background bg-fd-background size-10 overflow-hidden rounded-full border-4 md:-mr-4 md:size-12"
style={{
zIndex: topContributors.length - i,
}}
@@ -48,7 +48,7 @@ export default async function ContributorCounter({
</a>
))}
{displayCount < contributors.length ? (
- <div className="size-12 content-center rounded-full bg-fd-secondary text-center">
+ <div className="bg-fd-secondary size-12 content-center rounded-full text-center">
+{contributors.length - displayCount}
</div>
) : null}
diff --git a/apps/next/src/components/create-app-animation.tsx b/apps/next/src/components/create-app-animation.tsx
index 8a13c04bd4d80c0fa513ec8fc48f4b82ba59505e..a011ec6cf2ba0fed0c0da93d4adb86538f24e4f7 100644
--- a/apps/next/src/components/create-app-animation.tsx
+++ b/apps/next/src/components/create-app-animation.tsx
@@ -83,7 +83,7 @@ export function CreateAppAnimation(): React.ReactElement {
}}
>
{tick > timeWindowOpen && (
- <LaunchAppWindow className="absolute bottom-5 right-4 z-10 animate-in fade-in slide-in-from-top-10" />
+ <LaunchAppWindow className="animate-in fade-in slide-in-from-top-10 absolute bottom-5 right-4 z-10" />
)}
<pre className="overflow-hidden rounded-xl border text-xs">
<div className="flex flex-row items-center gap-2 border-b px-4 py-2">
@@ -92,7 +92,7 @@ export function CreateAppAnimation(): React.ReactElement {
<div className="grow" />
<div className="size-2 rounded-full bg-red-400" />
</div>
- <div className="min-h-[200px] bg-gradient-to-b from-fd-secondary [mask-image:linear-gradient(to_bottom,white,transparent)]">
+ <div className="from-fd-secondary min-h-[200px] bg-gradient-to-b [mask-image:linear-gradient(to_bottom,white,transparent)]">
<code className="grid p-4">{lines}</code>
</div>
</pre>
@@ -103,7 +103,7 @@ export function CreateAppAnimation(): React.ReactElement {
function UserMessage({ children }: { children: ReactNode }) {
return (
<div className="group relative flex items-start">
- <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
+ <div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
<IconUser />
</div>
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
@@ -122,7 +122,7 @@ function BotMessage({
}) {
return (
<div className={cn("group relative flex items-start", className)}>
- <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground">
+ <div className="bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
<IconAI />
</div>
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
@@ -164,7 +164,7 @@ export function ChatExample() {
return (
<div className="max-w-64">
- <div className="flex flex-col px-4 gap-2">
+ <div className="flex flex-col gap-2 px-4">
{userMessageLength === userMessageFull.length && (
<UserMessage>
<span>{userMessageFull}</span>
@@ -204,11 +204,11 @@ function LaunchAppWindow(
<div
{...props}
className={cn(
- "overflow-hidden rounded-md border bg-fd-background shadow-xl",
+ "bg-fd-background overflow-hidden rounded-md border shadow-xl",
props.className,
)}
>
- <div className="relative flex h-6 flex-row items-center border-b bg-fd-muted px-4 text-xs text-fd-muted-foreground">
+ <div className="bg-fd-muted text-fd-muted-foreground relative flex h-6 flex-row items-center border-b px-4 text-xs">
<p className="absolute inset-x-0 text-center">localhost:8080</p>
</div>
<div className="p-4 text-sm">
diff --git a/apps/next/src/components/demo/code-node-parser.tsx b/apps/next/src/components/demo/code-node-parser.tsx
index 4f66a3ccef50d4f19d8f1b3fd8f57d53b72cf3f8..529a31aaf0b0ecfc8cafdeb259bf8b3471d32af5 100644
--- a/apps/next/src/components/demo/code-node-parser.tsx
+++ b/apps/next/src/components/demo/code-node-parser.tsx
@@ -57,7 +57,7 @@ export const IDE = () => {
const maxChars = useSlider();
const useSetMaxChars = useSetSlider();
return (
- <div className="flex flex-col p-4 border-r max-h-96 overflow-scroll">
+ <div className="flex max-h-96 flex-col overflow-scroll border-r p-4">
<div>
<Label>Max Chars {maxChars}</Label>
<Slider
@@ -113,7 +113,7 @@ const Preview = ({ text }: { text: string }) => {
},
},
});
- return <CodeBlock className="py-0 m-2">{rendered}</CodeBlock>;
+ return <CodeBlock className="m-2 py-0">{rendered}</CodeBlock>;
};
function ScrollToBottom() {
@@ -122,7 +122,7 @@ function ScrollToBottom() {
return (
!isAtBottom && (
<button
- className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
+ className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
onClick={() => scrollToBottom()}
/>
)
@@ -136,7 +136,7 @@ export const NodePreview = () => {
const textChunks = useMemo(() => parser.splitText(code), [code, maxChars]);
return (
<StickToBottom
- className="block relative max-h-96 overflow-scroll"
+ className="relative block max-h-96 overflow-scroll"
resize="smooth"
initial="smooth"
>
@@ -154,7 +154,7 @@ export const CodeNodeParserDemo = () => {
const isClient = useIsClient();
if (!isClient) {
return (
- <div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
+ <div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
<Skeleton className="h-96" />
<Skeleton className="h-96" />
</div>
@@ -165,13 +165,13 @@ export const CodeNodeParserDemo = () => {
<CodeProvider>
<Suspense
fallback={
- <div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
+ <div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
<Skeleton className="h-96" />
<Skeleton className="h-96" />
</div>
}
>
- <div className="my-2 grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-xl w-full max-h-96">
+ <div className="my-2 grid max-h-96 w-full grid-cols-1 gap-2 rounded-xl border md:grid-cols-2">
<IDE />
<NodePreview />
</div>
diff --git a/apps/next/src/components/demo/workflow-streaming-ui.tsx b/apps/next/src/components/demo/workflow-streaming-ui.tsx
index f7b02a2cef7fa5babd8617af3f875f0ddbb79b16..2cb9fe8bf2ace3f1547ebd86d8fc99193bf483ba 100644
--- a/apps/next/src/components/demo/workflow-streaming-ui.tsx
+++ b/apps/next/src/components/demo/workflow-streaming-ui.tsx
@@ -75,7 +75,7 @@ function ScrollToBottom() {
return (
!isAtBottom && (
<button
- className="absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
+ className="i-ph-arrow-circle-down-fill absolute bottom-0 left-[50%] translate-x-[-50%] rounded-lg text-4xl"
onClick={() => scrollToBottom()}
/>
)
@@ -91,9 +91,9 @@ export function WorkflowStreamingDemo() {
const [total, setTotal] = useState<number>(10);
return (
- <div className="flex flex-col items-start w-full gap-2">
- <div className="flex flex-row justify-center items-center">
- <div className="text-lg mr-2">Compute total</div>{" "}
+ <div className="flex w-full flex-col items-start gap-2">
+ <div className="flex flex-row items-center justify-center">
+ <div className="mr-2 text-lg">Compute total</div>{" "}
<FlowInput value={total} onChange={(value) => setTotal(value)} />
</div>
<Button
@@ -141,7 +141,7 @@ export function WorkflowStreamingDemo() {
>
Start Workflow
</Button>
- <StickToBottom className="w-full flex flex-col gap-2 p-2 border border-gray-200 rounded-lg max-h-96 overflow-y-auto">
+ <StickToBottom className="flex max-h-96 w-full flex-col gap-2 overflow-y-auto rounded-lg border border-gray-200 p-2">
<StickToBottom.Content className="flex flex-col gap-2">
{ui}
</StickToBottom.Content>
diff --git a/apps/next/src/components/feature.tsx b/apps/next/src/components/feature.tsx
index b2f9e7d0abe5d233758917ba655e0d26207a994a..ef0bb8ecb55f41f3f1539ed483072d429ee80a08 100644
--- a/apps/next/src/components/feature.tsx
+++ b/apps/next/src/components/feature.tsx
@@ -20,7 +20,7 @@ export function Feature({
className={cn("border-l border-t px-6 py-12 md:py-16", className)}
{...props}
>
- <div className="mb-4 inline-flex items-center gap-2 text-sm font-medium text-fd-muted-foreground">
+ <div className="text-fd-muted-foreground mb-4 inline-flex items-center gap-2 text-sm font-medium">
<Icon className="size-4" />
<p>{subheading}</p>
</div>
diff --git a/apps/next/src/components/flow-input.tsx b/apps/next/src/components/flow-input.tsx
index 6ded0a3d21c4705b68f80007bfbb256e993d9d0d..4a640a4c869d134f56e66e07495a35f0e654bf9e 100644
--- a/apps/next/src/components/flow-input.tsx
+++ b/apps/next/src/components/flow-input.tsx
@@ -60,7 +60,7 @@ export default function FlowInput({
className={clsx(
showCaret ? "caret-primary" : "caret-transparent",
"spin-hide w-[1.5em] bg-transparent py-2 text-center font-[inherit] text-transparent outline-none",
- "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+ "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
)}
// Make sure to disable kerning, to match NumberFlow:
style={{ fontKerning: "none" }}
diff --git a/apps/next/src/components/message.tsx b/apps/next/src/components/message.tsx
index 7f71ba3bab36b71fa23ba440152725c77c37ae9c..6205b228988c530b235f388ed0d42424cbc098e5 100644
--- a/apps/next/src/components/message.tsx
+++ b/apps/next/src/components/message.tsx
@@ -8,7 +8,7 @@ import { IconAI, IconUser } from "./ui/icons";
export function UserMessage({ children }: { children: ReactNode }) {
return (
<div className="group relative flex items-start">
- <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-background">
+ <div className="bg-background flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
<IconUser />
</div>
<div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
@@ -54,7 +54,7 @@ export function BotCard({
<div className="group relative flex items-start md:-ml-12">
<div
className={cn(
- "flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm bg-primary text-primary-foreground",
+ "bg-primary text-primary-foreground flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow-sm",
!showAvatar && "invisible",
)}
>
diff --git a/apps/next/src/components/npm-install.tsx b/apps/next/src/components/npm-install.tsx
index bfa0334e63003832d784e8a9bee745439132a118..5993401cfacc6b62de7f6b92d99e4e51f8f3f1a8 100644
--- a/apps/next/src/components/npm-install.tsx
+++ b/apps/next/src/components/npm-install.tsx
@@ -25,7 +25,7 @@ export const NpmInstall = () => {
className="flex flex-row items-center justify-center"
>
<code className="mr-2">$ npm i llamaindex</code>
- <div className="relative cursor-pointer bg-transparent w-4 h-4">
+ <div className="relative h-4 w-4 cursor-pointer bg-transparent">
<div
className={`absolute inset-0 transform transition-all duration-300 ${
hasCheckIcon ? "scale-0 opacity-0" : "scale-100 opacity-100"
diff --git a/apps/next/src/components/reactbits/rotating-text.tsx b/apps/next/src/components/reactbits/rotating-text.tsx
index 92144a27f9582ac37fa0ca7ed4b07d7509764766..c1f9e0d0aecd08405c4f312e0c00c4862b2dbef1 100644
--- a/apps/next/src/components/reactbits/rotating-text.tsx
+++ b/apps/next/src/components/reactbits/rotating-text.tsx
@@ -200,7 +200,7 @@ export const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
return (
<motion.span
className={cn(
- "flex flex-wrap whitespace-pre-wrap relative",
+ "relative flex flex-wrap whitespace-pre-wrap",
mainClassName,
)}
{...rest}
@@ -216,8 +216,8 @@ export const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
key={currentTextIndex}
className={cn(
splitBy === "lines"
- ? "flex flex-col w-full"
- : "flex flex-wrap whitespace-pre-wrap relative",
+ ? "flex w-full flex-col"
+ : "relative flex flex-wrap whitespace-pre-wrap",
)}
layout
aria-hidden="true"
diff --git a/apps/next/src/components/ui/dialog.tsx b/apps/next/src/components/ui/dialog.tsx
index 93542df32f48a6ad30da4917f11db7b4400d541f..cb0487c499db527ca2b82f167db72b76b448ba7c 100644
--- a/apps/next/src/components/ui/dialog.tsx
+++ b/apps/next/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
className,
)}
{...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
- "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+ "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
className,
)}
{...props}
>
{children}
- <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+ <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
- className={cn("text-sm text-muted-foreground", className)}
+ className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
));
diff --git a/apps/next/src/components/ui/input.tsx b/apps/next/src/components/ui/input.tsx
index 2fd005406540136f2ff356d0e779eda1e08c65b4..eb66005c8f74201fa71d4d9cf0044bfb3abe8192 100644
--- a/apps/next/src/components/ui/input.tsx
+++ b/apps/next/src/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
- "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+ "border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}
diff --git a/apps/next/src/components/ui/skeleton.tsx b/apps/next/src/components/ui/skeleton.tsx
index c26c4ea9f56a9cb11803999009c02158bd7be9fe..5788d67580bbd88bfe000b7417a99d74b3e4c3a3 100644
--- a/apps/next/src/components/ui/skeleton.tsx
+++ b/apps/next/src/components/ui/skeleton.tsx
@@ -6,7 +6,7 @@ function Skeleton({
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
- className={cn("animate-pulse rounded-md bg-primary/10", className)}
+ className={cn("bg-primary/10 animate-pulse rounded-md", className)}
{...props}
/>
);
diff --git a/apps/next/src/components/ui/slider.tsx b/apps/next/src/components/ui/slider.tsx
index e43e05055fc7ca79a0abe8b00156d22d53d0a333..d2be87d4abf0acd1a684bcebd93f686345a6d64a 100644
--- a/apps/next/src/components/ui/slider.tsx
+++ b/apps/next/src/components/ui/slider.tsx
@@ -17,10 +17,10 @@ const Slider = React.forwardRef<
)}
{...props}
>
- <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
- <SliderPrimitive.Range className="absolute h-full bg-primary" />
+ <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
+ <SliderPrimitive.Range className="bg-primary absolute h-full" />
</SliderPrimitive.Track>
- <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+ <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" />
</SliderPrimitive.Root>
));
Slider.displayName = SliderPrimitive.Root.displayName;
diff --git a/apps/next/src/components/ui/textarea.tsx b/apps/next/src/components/ui/textarea.tsx
index a0662826bdf2a4c908d17545fda5431964e4a431..9a71a59c57abb304def231ecf41de1e66de67785 100644
--- a/apps/next/src/components/ui/textarea.tsx
+++ b/apps/next/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return (
<textarea
className={cn(
- "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+ "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}
diff --git a/apps/next/src/components/ui/tooltip.tsx b/apps/next/src/components/ui/tooltip.tsx
index 0fb871c712be8653c53a79186f1b17a8f508b997..c7a40c2054dbcba42efc4fbf11c120ac698140ce 100644
--- a/apps/next/src/components/ui/tooltip.tsx
+++ b/apps/next/src/components/ui/tooltip.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
- "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
className,
)}
{...props}
diff --git a/e2e/examples/waku-query-engine/src/components/chat.tsx b/e2e/examples/waku-query-engine/src/components/chat.tsx
index d30d399933220a645f64d26127d79ba951769ff0..7c45c015da313447ff1470c92cdec38ff8734dac 100644
--- a/e2e/examples/waku-query-engine/src/components/chat.tsx
+++ b/e2e/examples/waku-query-engine/src/components/chat.tsx
@@ -10,10 +10,10 @@ export const Chat = (props: ChatProps) => {
const [response, setResponse] = useState<string | null>(null);
return (
- <section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
+ <section className="-mx-4 mt-4 rounded border border-dashed border-blue-400 p-4">
<h2 className="text-lg font-bold">Chat with AI</h2>
{response ? (
- <p className="text-sm text-gray-600 max-w-sm">{response}</p>
+ <p className="max-w-sm text-sm text-gray-600">{response}</p>
) : null}
<form
action={async (formData) => {
@@ -26,7 +26,7 @@ export const Chat = (props: ChatProps) => {
<input
type="text"
name="question"
- className="border border-gray-400 rounded-sm px-2 py-0.5 text-sm"
+ className="rounded-sm border border-gray-400 px-2 py-0.5 text-sm"
/>
<button className="rounded-sm bg-black px-2 py-0.5 text-sm text-white">
Ask
diff --git a/package.json b/package.json
index 7b49022d029fe4845cb9aea1a36e04723bf1e0ca..b9bf8ea3f896d5f46e18a4051d9f7de7c54ac261 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"madge": "^8.0.0",
"prettier": "^3.4.2",
"prettier-plugin-organize-imports": "^4.1.0",
+ "prettier-plugin-tailwindcss": "^0.6.11",
"turbo": "^2.4.4",
"typescript": "^5.7.3",
"typescript-eslint": "^8.18.0"
@@ -39,10 +40,12 @@
"packageManager": "pnpm@9.12.3",
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
- "prettier --check",
- "eslint"
+ "eslint --fix",
+ "prettier --write"
],
- "*.{json,md}": "prettier --check"
+ "*.{json,md,yml}": [
+ "prettier --write"
+ ]
},
"pnpm": {
"patchedDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f3918ae9114d96051a1badd66254792afde0d7f..2b309fa5b4992bef1acd086d472a59f9b48dc7e6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,6 +49,9 @@ importers:
prettier-plugin-organize-imports:
specifier: ^4.1.0
version: 4.1.0(prettier@3.5.0)(typescript@5.7.3)
+ prettier-plugin-tailwindcss:
+ specifier: ^0.6.11
+ version: 0.6.11(prettier-plugin-organize-imports@4.1.0(prettier@3.5.0)(typescript@5.7.3))(prettier@3.5.0)
turbo:
specifier: ^2.4.4
version: 2.4.4
@@ -9881,6 +9884,61 @@ packages:
vue-tsc:
optional: true
+ prettier-plugin-tailwindcss@0.6.11:
+ resolution: {integrity: sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==}
+ engines: {node: '>=14.21.3'}
+ peerDependencies:
+ '@ianvs/prettier-plugin-sort-imports': '*'
+ '@prettier/plugin-pug': '*'
+ '@shopify/prettier-plugin-liquid': '*'
+ '@trivago/prettier-plugin-sort-imports': '*'
+ '@zackad/prettier-plugin-twig': '*'
+ prettier: ^3.0
+ prettier-plugin-astro: '*'
+ prettier-plugin-css-order: '*'
+ prettier-plugin-import-sort: '*'
+ prettier-plugin-jsdoc: '*'
+ prettier-plugin-marko: '*'
+ prettier-plugin-multiline-arrays: '*'
+ prettier-plugin-organize-attributes: '*'
+ prettier-plugin-organize-imports: '*'
+ prettier-plugin-sort-imports: '*'
+ prettier-plugin-style-order: '*'
+ prettier-plugin-svelte: '*'
+ peerDependenciesMeta:
+ '@ianvs/prettier-plugin-sort-imports':
+ optional: true
+ '@prettier/plugin-pug':
+ optional: true
+ '@shopify/prettier-plugin-liquid':
+ optional: true
+ '@trivago/prettier-plugin-sort-imports':
+ optional: true
+ '@zackad/prettier-plugin-twig':
+ optional: true
+ prettier-plugin-astro:
+ optional: true
+ prettier-plugin-css-order:
+ optional: true
+ prettier-plugin-import-sort:
+ optional: true
+ prettier-plugin-jsdoc:
+ optional: true
+ prettier-plugin-marko:
+ optional: true
+ prettier-plugin-multiline-arrays:
+ optional: true
+ prettier-plugin-organize-attributes:
+ optional: true
+ prettier-plugin-organize-imports:
+ optional: true
+ prettier-plugin-sort-imports:
+ optional: true
+ prettier-plugin-style-order:
+ optional: true
+ prettier-plugin-svelte:
+ optional: true
+
prettier@2.8.8:
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
engines: {node: '>=10.13.0'}
@@ -22192,6 +22250,12 @@ snapshots:
prettier: 3.5.0
typescript: 5.7.3
+ prettier-plugin-tailwindcss@0.6.11(prettier-plugin-organize-imports@4.1.0(prettier@3.5.0)(typescript@5.7.3))(prettier@3.5.0):
+ dependencies:
+ prettier: 3.5.0
+ optionalDependencies:
+ prettier-plugin-organize-imports: 4.1.0(prettier@3.5.0)(typescript@5.7.3)
+
prettier@2.8.8: {}
prettier@3.5.0: {}
diff --git a/prettier.config.mjs b/prettier.config.mjs
index e9e308611c5b98f40bfce4cad75f37e6cd1c8af3..e2c5f11980d5cc465c6c1935097a155480dfdf83 100644
--- a/prettier.config.mjs
+++ b/prettier.config.mjs
@@ -1,3 +1,3 @@
export default {
- plugins: ["prettier-plugin-organize-imports"],
+ plugins: ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
};