gladvn 0.2.16 → 0.2.18

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gladvn",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "type": "module",
   "description": "DO NOT 'npm install'. Use 'npx gladvn init' instead! A highly composable React component library built with Tailwind CSS.",
   "keywords": [
@@ -70,6 +70,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -78,6 +79,7 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^1.24.0",
     "next-themes": "^0.4.6",
+    "prettier": "^3.9.6",
     "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^4.12.1",
     "recharts": "^3.9.2",

package/scripts/format-codestrings.ts

@@ -0,0 +1,87 @@
+import { Project, SyntaxKind, JsxAttribute, StringLiteral, NoSubstitutionTemplateLiteral } from "ts-morph";
+import * as prettier from "prettier";
+import path from "path";
+import fs from "fs";
+
+async function main() {
+  const project = new Project({
+    tsConfigFilePath: "tsconfig.json",
+  });
+
+  const sourceFiles = project.getSourceFiles("src/dev/showcase/**/*.tsx");
+  console.log(`Found ${sourceFiles.length} showcase files to process.`);
+
+  let modifiedCount = 0;
+
+  for (const sourceFile of sourceFiles) {
+    let fileModified = false;
+
+    // Find all JSX attributes named 'codeString'
+    const jsxAttributes = sourceFile.getDescendantsOfKind(SyntaxKind.JsxAttribute);
+    
+    for (const attr of jsxAttributes) {
+      if (attr.asKind(SyntaxKind.JsxAttribute)?.getNameNode().getText() !== "codeString") continue;
+
+      const initializer = attr.asKind(SyntaxKind.JsxAttribute)?.getInitializer();
+      if (!initializer) continue;
+
+      let rawText = "";
+
+      // It can be a StringLiteral `<Example codeString="<div/>" />`
+      if (initializer.isKind(SyntaxKind.StringLiteral)) {
+        rawText = (initializer as StringLiteral).getLiteralText();
+      } 
+      // Or a JSX Expression with a template literal `<Example codeString={`<div/>`} />`
+      else if (initializer.isKind(SyntaxKind.JsxExpression)) {
+        const expression = initializer.getExpression();
+        if (expression && expression.isKind(SyntaxKind.NoSubstitutionTemplateLiteral)) {
+          rawText = (expression as NoSubstitutionTemplateLiteral).getLiteralText();
+        } else if (expression && expression.isKind(SyntaxKind.StringLiteral)) {
+          rawText = (expression as StringLiteral).getLiteralText();
+        }
+      }
+
+      if (!rawText) continue;
+
+      try {
+        // Wrap in fragment to allow adjacent JSX elements to be parsed by prettier
+        const wrappedText = `<>\n${rawText}\n</>`;
+
+        // Format the wrappedText as JSX/TSX
+        let formatted = await prettier.format(wrappedText, {
+          parser: "babel-ts",
+          printWidth: 60,
+          tabWidth: 2,
+          semi: false,
+          singleQuote: false,
+          trailingComma: "all"
+        });
+
+        // Remove the wrapping fragment (including any leading semicolons injected by prettier) and trim
+        formatted = formatted.replace(/^;?\s*<>\n?/, "").replace(/\n?<\/>;?\s*$/, "").trim();
+
+        if (formatted !== rawText.trim()) {
+          // Replace the initializer with the new formatted template literal
+          // Note: we use JSON.stringify or manual escaping if needed, but since it's a template literal
+          // we need to escape backticks and ${
+          const escaped = formatted.replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+          attr.setInitializer(`{\`${escaped}\`}`);
+          fileModified = true;
+        }
+      } catch (err) {
+        console.error(`Failed to format codeString in ${sourceFile.getFilePath()} at line ${attr.getStartLineNumber()}`);
+        console.error(err);
+      }
+    }
+
+    if (fileModified) {
+      sourceFile.saveSync();
+      modifiedCount++;
+      console.log(`Modified ${sourceFile.getBaseName()}`);
+    }
+  }
+
+  console.log(`Successfully formatted codeStrings in ${modifiedCount} files.`);
+}
+
+main().catch(console.error);

package/scripts/organize-imports.ts

@@ -0,0 +1,21 @@
+import { Project } from "ts-morph";
+
+const project = new Project({
+  tsConfigFilePath: "tsconfig.json",
+});
+
+const files = project.getSourceFiles("src/**/*.{ts,tsx}");
+console.log(`Found ${files.length} files. Organizing imports...`);
+
+let updatedCount = 0;
+
+for (const file of files) {
+  const originalText = file.getFullText();
+  file.organizeImports();
+  if (file.getFullText() !== originalText) {
+    updatedCount++;
+    await file.save();
+  }
+}
+
+console.log(`Done! Organized imports in ${updatedCount} files.`);

package/scripts/regex-format.cjs

@@ -0,0 +1,67 @@
+const fs = require('fs');
+const path = require('path');
+
+async function main() {
+  const showcaseDir = path.join(__dirname, '../src/dev/showcase');
+  const files = fs.readdirSync(showcaseDir).filter(f => f.endsWith('.tsx'));
+
+  let modifiedCount = 0;
+
+  for (const file of files) {
+    const filePath = path.join(showcaseDir, file);
+    let content = fs.readFileSync(filePath, 'utf8');
+    let fileModified = false;
+
+    // Regex to find codeString={`...`}
+    // Using a loop to find all matches since there could be multiple per file
+    const regex = /codeString=\{\`([\s\S]*?)\`\}/g;
+    
+    // We need to do replacement asynchronously because prettier.format is async
+    const replacements = [];
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+      const fullMatch = match[0];
+      const rawText = match[1];
+
+      try {
+        const wrappedText = `<>\n${rawText}\n</>`;
+        // Use execSync to run npx prettier
+        const tmpFile = path.join(__dirname, 'tmp.tsx');
+        fs.writeFileSync(tmpFile, wrappedText, 'utf8');
+        let formatted = require('child_process').execSync('npx prettier --parser babel-ts --print-width 60 --tab-width 2 --no-semi --trailing-comma all ' + tmpFile, { encoding: 'utf8' });
+        fs.unlinkSync(tmpFile);
+
+        // Strip leading semicolons and <> tags
+        formatted = formatted.replace(/^;?\s*<>\n?/, "").replace(/\n?<\/>;?\s*$/, "").trim();
+
+        if (formatted !== rawText.trim()) {
+          const escaped = formatted.replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+          replacements.push({
+            start: match.index,
+            end: match.index + fullMatch.length,
+            newText: `codeString={\`${escaped}\`}`
+          });
+        }
+      } catch (err) {
+        console.error(`Failed formatting in ${file}: ${err.message}`);
+      }
+    }
+
+    // Apply replacements from back to front to not mess up indices
+    for (let i = replacements.length - 1; i >= 0; i--) {
+      const { start, end, newText } = replacements[i];
+      content = content.slice(0, start) + newText + content.slice(end);
+      fileModified = true;
+    }
+
+    if (fileModified) {
+      fs.writeFileSync(filePath, content, 'utf8');
+      modifiedCount++;
+      console.log(`Modified ${file}`);
+    }
+  }
+
+  console.log(`Successfully formatted codeStrings in ${modifiedCount} files.`);
+}
+
+main().catch(console.error);

package/scripts/tmp.tsx

@@ -0,0 +1,25 @@
+<>
+<AccordionPreset
+  className="w-full"
+  multiple
+  defaultValue={["item-1", "item-2"]}
+  items={[
+              {
+                value: "item-1",
+                title: "Is it accessible?",
+                content: "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
+              },
+              {
+                value: "item-2",
+                title: "Is it styled?",
+                content: "Yes. It comes with default styles that match the other components' aesthetic.",
+              },
+              {
+                value: "item-3",
+                title: "Is it animated?",
+                content: "Yes. It's animated by default with smooth transitions.",
+              },
+            ]}
+/>
+
+</>

package/src/components/macro/accordion-preset.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { AccordionPreset } from "./accordion-preset";
 
 const items = [

package/src/components/macro/accordion-preset.tsx

@@ -1,10 +1,11 @@
+import * as React from "react";
+
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "../../components/micro/accordion";
-import * as React from "react";
 
 export interface AccordionPresetItem {
   value: string;

package/src/components/macro/alert-dialog-preset.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import * as React from "react";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -9,14 +11,13 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogMedia,
+  AlertDialogPortal,
   AlertDialogTitle,
   AlertDialogTrigger,
-  AlertDialogPortal,
 } from "../../components/micro/alert-dialog";
 import { ThemeWrapper } from "../../components/micro/theme-provider";
 import { type Color, type Size, type Variant } from "../../lib/types";
 import { cn } from "../../lib/utils";
-import * as React from "react";
 
 type AlertDialogPresetProps = Omit<
   React.ComponentProps<typeof AlertDialog>,
@@ -62,48 +63,48 @@ function AlertDialogPreset({
         <ThemeWrapper>
           <AlertDialogContent size={size}>
             <div
-          className={cn("flex flex-col gap-1.5", {
-            "sm:flex-row sm:gap-4": !!icon,
-          })}
-        >
-          {icon && (
-            <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
-              {icon}
-            </AlertDialogMedia>
-          )}
-          <AlertDialogHeader>
-            {title && <AlertDialogTitle>{title}</AlertDialogTitle>}
-            {description && (
-              <AlertDialogDescription>{description}</AlertDialogDescription>
-            )}
-            {children}
-          </AlertDialogHeader>
-        </div>
-        {(cancelLabel || actionLabel) && (
-          <AlertDialogFooter className="group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 group-data-[size=sm]/alert-dialog-content:sm:flex group-data-[size=sm]/alert-dialog-content:sm:justify-end">
-            {cancelLabel && (
-              <AlertDialogCancel
-                size={size}
-                color={cancelColor}
-                variant={cancelVariant}
-                onClick={onCancel}
-              >
-                {cancelLabel}
-              </AlertDialogCancel>
-            )}
-            {actionLabel && (
-              <AlertDialogAction
-                size={size}
-                color={actionColor}
-                variant={actionVariant}
-                onClick={onAction}
-              >
-                {actionLabel}
-              </AlertDialogAction>
+              className={cn("flex flex-col gap-1.5", {
+                "sm:flex-row sm:gap-4": !!icon,
+              })}
+            >
+              {icon && (
+                <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
+                  {icon}
+                </AlertDialogMedia>
+              )}
+              <AlertDialogHeader>
+                {title && <AlertDialogTitle>{title}</AlertDialogTitle>}
+                {description && (
+                  <AlertDialogDescription>{description}</AlertDialogDescription>
+                )}
+                {children}
+              </AlertDialogHeader>
+            </div>
+            {(cancelLabel || actionLabel) && (
+              <AlertDialogFooter className="group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 group-data-[size=sm]/alert-dialog-content:sm:flex group-data-[size=sm]/alert-dialog-content:sm:justify-end">
+                {cancelLabel && (
+                  <AlertDialogCancel
+                    size={size}
+                    color={cancelColor}
+                    variant={cancelVariant}
+                    onClick={onCancel}
+                  >
+                    {cancelLabel}
+                  </AlertDialogCancel>
+                )}
+                {actionLabel && (
+                  <AlertDialogAction
+                    size={size}
+                    color={actionColor}
+                    variant={actionVariant}
+                    onClick={onAction}
+                  >
+                    {actionLabel}
+                  </AlertDialogAction>
+                )}
+              </AlertDialogFooter>
             )}
-          </AlertDialogFooter>
-          )}
-        </AlertDialogContent>
+          </AlertDialogContent>
         </ThemeWrapper>
       </AlertDialogPortal>
     </AlertDialog>

package/src/components/macro/alert-preset.tsx

@@ -1,15 +1,19 @@
+"use client";
+
+import * as React from "react";
+
+import { XIcon } from "lucide-react";
+
 import {
   Alert,
   AlertAction,
   AlertDescription,
   AlertIcon,
-  AlertTitle,
   type AlertProps,
+  AlertTitle,
 } from "../../components/micro/alert";
 import { Button } from "../../components/micro/button";
 import { cn } from "../../lib/utils";
-import { XIcon } from "lucide-react";
-import * as React from "react";
 
 export type AlertPresetProps = AlertProps & {
   title?: React.ReactNode;

package/src/components/macro/avatar-preset.tsx

@@ -1,10 +1,11 @@
+import * as React from "react";
+
 import {
   Avatar,
   AvatarBadge,
   AvatarFallback,
   AvatarImage,
 } from "../../components/micro/avatar";
-import * as React from "react";
 
 export type AvatarPresetProps = React.ComponentProps<typeof Avatar> & {
   src?: string;

package/src/components/macro/breadcrumb-preset.tsx

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -6,7 +8,6 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "../../components/micro/breadcrumb";
-import * as React from "react";
 
 export interface BreadcrumbPresetItem {
   label: React.ReactNode;

package/src/components/macro/card-preset.tsx

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 import {
   Card,
   CardContent,
@@ -6,7 +8,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../../components/micro/card";
-import * as React from "react";
 
 export type CardPresetProps = Omit<
   React.ComponentProps<typeof Card>,

package/src/components/macro/carousel-preset.tsx

@@ -1,14 +1,17 @@
+"use client";
+
+import * as React from "react";
+
 import {
   Carousel,
+  type CarouselApi,
   CarouselContent,
   CarouselDots,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-  type CarouselApi,
 } from "../../components/micro/carousel";
 import { cn } from "../../lib/utils";
-import * as React from "react";
 
 export type CarouselPresetProps = Omit<
   React.ComponentProps<typeof Carousel>,

package/src/components/macro/checkbox-preset.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { CheckboxPreset } from "./checkbox-preset";
 
 describe("CheckboxPreset", () => {

package/src/components/macro/checkbox-preset.tsx

@@ -1,3 +1,9 @@
+"use client";
+
+import * as React from "react";
+
+import { CheckIcon } from "lucide-react";
+
 import { Checkbox, CheckboxIndicator } from "../../components/micro/checkbox";
 import {
   Field,
@@ -7,8 +13,6 @@ import {
 } from "../../components/micro/field";
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
-import { CheckIcon } from "lucide-react";
-import * as React from "react";
 
 export type CheckboxPresetProps = Omit<
   React.ComponentProps<typeof Checkbox>,

package/src/components/macro/combobox-preset.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import * as React from "react";
+
 import {
   Combobox,
   ComboboxClear,
@@ -7,18 +11,17 @@ import {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
+  ComboboxPortal,
   ComboboxTrigger,
   useComboboxContext,
-  ComboboxPortal,
 } from "../../components/micro/combobox";
-import { ThemeWrapper } from "../../components/micro/theme-provider";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupInput,
 } from "../../components/micro/input-group";
+import { ThemeWrapper } from "../../components/micro/theme-provider";
 import { type Size } from "../../lib/types";
-import * as React from "react";
 import { FieldPreset } from "./field-preset";
 
 export interface ComboboxOption {

package/src/components/macro/command-preset.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import * as React from "react";
+
 import {
   Command,
   CommandEmpty,
@@ -20,9 +22,11 @@ import {
 } from "../../components/micro/dialog";
 import { ThemeWrapper } from "../../components/micro/theme-provider";
 import { cn } from "../../lib/utils";
-import * as React from "react";
 
-type CommandDialogProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+type CommandDialogProps = Omit<
+  React.ComponentProps<typeof Dialog>,
+  "children"
+> & {
   title?: string;
   description?: string;
   className?: string;
@@ -60,9 +64,9 @@ function CommandDialog({
 CommandDialog.displayName = "CommandDialog";
 
 export {
-  CommandDialog,
   // Re-export primitives for convenience
   Command,
+  CommandDialog,
   CommandEmpty,
   CommandGroup,
   CommandInput,