@hustle-together/api-dev-tools 3.10.1 → 3.12.1

package/templates/component/Component.test.tsx

@@ -1,164 +1,178 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { __COMPONENT_NAME__ } from './__COMPONENT_NAME__';
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { __COMPONENT_NAME__ } from "./__COMPONENT_NAME__";
 
-describe('__COMPONENT_NAME__', () => {
-  describe('Rendering', () => {
-    it('renders children correctly', () => {
+describe("__COMPONENT_NAME__", () => {
+  describe("Rendering", () => {
+    it("renders children correctly", () => {
       render(<__COMPONENT_NAME__>Test Content</__COMPONENT_NAME__>);
-      expect(screen.getByText('Test Content')).toBeInTheDocument();
+      expect(screen.getByText("Test Content")).toBeInTheDocument();
     });
 
-    it('renders as a button element', () => {
+    it("renders as a button element", () => {
       render(<__COMPONENT_NAME__>Click me</__COMPONENT_NAME__>);
-      expect(screen.getByRole('button')).toBeInTheDocument();
+      expect(screen.getByRole("button")).toBeInTheDocument();
     });
 
-    it('forwards ref correctly', () => {
+    it("forwards ref correctly", () => {
       const ref = vi.fn();
       render(<__COMPONENT_NAME__ ref={ref}>Test</__COMPONENT_NAME__>);
       expect(ref).toHaveBeenCalled();
     });
   });
 
-  describe('Variants', () => {
-    it('applies primary variant by default', () => {
-      const { container } = render(<__COMPONENT_NAME__>Primary</__COMPONENT_NAME__>);
-      expect(container.firstChild).toHaveClass('bg-primary');
+  describe("Variants", () => {
+    it("applies primary variant by default", () => {
+      const { container } = render(
+        <__COMPONENT_NAME__>Primary</__COMPONENT_NAME__>,
+      );
+      expect(container.firstChild).toHaveClass("bg-primary");
     });
 
-    it('applies secondary variant', () => {
+    it("applies secondary variant", () => {
       const { container } = render(
-        <__COMPONENT_NAME__ variant="secondary">Secondary</__COMPONENT_NAME__>
+        <__COMPONENT_NAME__ variant="secondary">Secondary</__COMPONENT_NAME__>,
       );
-      expect(container.firstChild).toHaveClass('bg-secondary');
+      expect(container.firstChild).toHaveClass("bg-secondary");
     });
 
-    it('applies destructive variant', () => {
+    it("applies destructive variant", () => {
       const { container } = render(
-        <__COMPONENT_NAME__ variant="destructive">Delete</__COMPONENT_NAME__>
+        <__COMPONENT_NAME__ variant="destructive">Delete</__COMPONENT_NAME__>,
       );
-      expect(container.firstChild).toHaveClass('bg-destructive');
+      expect(container.firstChild).toHaveClass("bg-destructive");
     });
 
-    it('applies outline variant', () => {
+    it("applies outline variant", () => {
       const { container } = render(
-        <__COMPONENT_NAME__ variant="outline">Outline</__COMPONENT_NAME__>
+        <__COMPONENT_NAME__ variant="outline">Outline</__COMPONENT_NAME__>,
       );
-      expect(container.firstChild).toHaveClass('border');
+      expect(container.firstChild).toHaveClass("border");
     });
 
-    it('applies ghost variant', () => {
+    it("applies ghost variant", () => {
       const { container } = render(
-        <__COMPONENT_NAME__ variant="ghost">Ghost</__COMPONENT_NAME__>
+        <__COMPONENT_NAME__ variant="ghost">Ghost</__COMPONENT_NAME__>,
       );
-      expect(container.firstChild).toHaveClass('hover:bg-accent');
+      expect(container.firstChild).toHaveClass("hover:bg-accent");
     });
   });
 
-  describe('Sizes', () => {
-    it('applies medium size by default', () => {
-      const { container } = render(<__COMPONENT_NAME__>Medium</__COMPONENT_NAME__>);
-      expect(container.firstChild).toHaveClass('h-10');
+  describe("Sizes", () => {
+    it("applies medium size by default", () => {
+      const { container } = render(
+        <__COMPONENT_NAME__>Medium</__COMPONENT_NAME__>,
+      );
+      expect(container.firstChild).toHaveClass("h-10");
     });
 
-    it('applies small size', () => {
-      const { container } = render(<__COMPONENT_NAME__ size="sm">Small</__COMPONENT_NAME__>);
-      expect(container.firstChild).toHaveClass('h-8');
+    it("applies small size", () => {
+      const { container } = render(
+        <__COMPONENT_NAME__ size="sm">Small</__COMPONENT_NAME__>,
+      );
+      expect(container.firstChild).toHaveClass("h-8");
     });
 
-    it('applies large size', () => {
-      const { container } = render(<__COMPONENT_NAME__ size="lg">Large</__COMPONENT_NAME__>);
-      expect(container.firstChild).toHaveClass('h-12');
+    it("applies large size", () => {
+      const { container } = render(
+        <__COMPONENT_NAME__ size="lg">Large</__COMPONENT_NAME__>,
+      );
+      expect(container.firstChild).toHaveClass("h-12");
     });
   });
 
-  describe('States', () => {
-    it('handles disabled state', () => {
+  describe("States", () => {
+    it("handles disabled state", () => {
       render(<__COMPONENT_NAME__ disabled>Disabled</__COMPONENT_NAME__>);
-      expect(screen.getByRole('button')).toBeDisabled();
+      expect(screen.getByRole("button")).toBeDisabled();
     });
 
-    it('handles loading state', () => {
+    it("handles loading state", () => {
       render(<__COMPONENT_NAME__ loading>Loading</__COMPONENT_NAME__>);
-      const button = screen.getByRole('button');
+      const button = screen.getByRole("button");
       expect(button).toBeDisabled();
-      expect(button).toHaveAttribute('aria-busy', 'true');
+      expect(button).toHaveAttribute("aria-busy", "true");
     });
 
-    it('shows loading spinner when loading', () => {
-      const { container } = render(<__COMPONENT_NAME__ loading>Loading</__COMPONENT_NAME__>);
-      expect(container.querySelector('svg.animate-spin')).toBeInTheDocument();
+    it("shows loading spinner when loading", () => {
+      const { container } = render(
+        <__COMPONENT_NAME__ loading>Loading</__COMPONENT_NAME__>,
+      );
+      expect(container.querySelector("svg.animate-spin")).toBeInTheDocument();
     });
   });
 
-  describe('Interaction', () => {
-    it('calls onClick when clicked', () => {
+  describe("Interaction", () => {
+    it("calls onClick when clicked", () => {
       const handleClick = vi.fn();
-      render(<__COMPONENT_NAME__ onClick={handleClick}>Click</__COMPONENT_NAME__>);
-      fireEvent.click(screen.getByRole('button'));
+      render(
+        <__COMPONENT_NAME__ onClick={handleClick}>Click</__COMPONENT_NAME__>,
+      );
+      fireEvent.click(screen.getByRole("button"));
       expect(handleClick).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClick when disabled', () => {
+    it("does not call onClick when disabled", () => {
       const handleClick = vi.fn();
       render(
         <__COMPONENT_NAME__ disabled onClick={handleClick}>
           Disabled
-        </__COMPONENT_NAME__>
+        </__COMPONENT_NAME__>,
       );
-      fireEvent.click(screen.getByRole('button'));
+      fireEvent.click(screen.getByRole("button"));
       expect(handleClick).not.toHaveBeenCalled();
     });
 
-    it('does not call onClick when loading', () => {
+    it("does not call onClick when loading", () => {
       const handleClick = vi.fn();
       render(
         <__COMPONENT_NAME__ loading onClick={handleClick}>
           Loading
-        </__COMPONENT_NAME__>
+        </__COMPONENT_NAME__>,
       );
-      fireEvent.click(screen.getByRole('button'));
+      fireEvent.click(screen.getByRole("button"));
       expect(handleClick).not.toHaveBeenCalled();
     });
   });
 
-  describe('Accessibility', () => {
-    it('is focusable', () => {
+  describe("Accessibility", () => {
+    it("is focusable", () => {
       render(<__COMPONENT_NAME__>Focus me</__COMPONENT_NAME__>);
-      const button = screen.getByRole('button');
+      const button = screen.getByRole("button");
       button.focus();
       expect(button).toHaveFocus();
     });
 
-    it('is not focusable when disabled', () => {
+    it("is not focusable when disabled", () => {
       render(<__COMPONENT_NAME__ disabled>Disabled</__COMPONENT_NAME__>);
-      const button = screen.getByRole('button');
-      expect(button).toHaveAttribute('disabled');
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("disabled");
     });
 
-    it('has aria-busy when loading', () => {
+    it("has aria-busy when loading", () => {
       render(<__COMPONENT_NAME__ loading>Loading</__COMPONENT_NAME__>);
-      expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'true');
+      expect(screen.getByRole("button")).toHaveAttribute("aria-busy", "true");
     });
   });
 
-  describe('Custom className', () => {
-    it('accepts custom className', () => {
+  describe("Custom className", () => {
+    it("accepts custom className", () => {
       const { container } = render(
-        <__COMPONENT_NAME__ className="custom-class">Custom</__COMPONENT_NAME__>
+        <__COMPONENT_NAME__ className="custom-class">
+          Custom
+        </__COMPONENT_NAME__>,
       );
-      expect(container.firstChild).toHaveClass('custom-class');
+      expect(container.firstChild).toHaveClass("custom-class");
     });
 
-    it('merges custom className with variant classes', () => {
+    it("merges custom className with variant classes", () => {
       const { container } = render(
         <__COMPONENT_NAME__ variant="primary" className="custom-class">
           Merged
-        </__COMPONENT_NAME__>
+        </__COMPONENT_NAME__>,
       );
-      expect(container.firstChild).toHaveClass('bg-primary');
-      expect(container.firstChild).toHaveClass('custom-class');
+      expect(container.firstChild).toHaveClass("bg-primary");
+      expect(container.firstChild).toHaveClass("custom-class");
     });
   });
 
@@ -168,8 +182,8 @@ describe('__COMPONENT_NAME__', () => {
   // Tests FAIL if exceeded, triggering TDD loop-back
   // ===================================
 
-  describe('Performance', () => {
-    it('should not re-render excessively on mount', () => {
+  describe("Performance", () => {
+    it("should not re-render excessively on mount", () => {
       let renderCount = 0;
 
       const TestWrapper = () => {
@@ -184,10 +198,14 @@ describe('__COMPONENT_NAME__', () => {
       expect(renderCount).toBeLessThanOrEqual(1);
     });
 
-    it('should not re-render excessively on prop change', () => {
+    it("should not re-render excessively on prop change", () => {
       let renderCount = 0;
 
-      const TestWrapper = ({ variant }: { variant: 'primary' | 'secondary' }) => {
+      const TestWrapper = ({
+        variant,
+      }: {
+        variant: "primary" | "secondary";
+      }) => {
         renderCount++;
         return <__COMPONENT_NAME__ variant={variant}>Test</__COMPONENT_NAME__>;
       };
@@ -202,10 +220,10 @@ describe('__COMPONENT_NAME__', () => {
       expect(renderCount).toBeLessThanOrEqual(1);
     });
 
-    it('should not cause unnecessary re-renders with same props', () => {
+    it("should not cause unnecessary re-renders with same props", () => {
       let renderCount = 0;
 
-      const TestWrapper = ({ variant }: { variant: 'primary' }) => {
+      const TestWrapper = ({ variant }: { variant: "primary" }) => {
         renderCount++;
         return <__COMPONENT_NAME__ variant={variant}>Test</__COMPONENT_NAME__>;
       };
@@ -222,7 +240,7 @@ describe('__COMPONENT_NAME__', () => {
       expect(renderCount).toBeLessThanOrEqual(1);
     });
 
-    it('should render within time budget', () => {
+    it("should render within time budget", () => {
       const startTime = performance.now();
 
       render(<__COMPONENT_NAME__>Performance Test</__COMPONENT_NAME__>);

package/templates/component/Component.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-import type { __COMPONENT_NAME__Props } from './__COMPONENT_NAME__.types';
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import type { __COMPONENT_NAME__Props } from "./__COMPONENT_NAME__.types";
 
 /**
  * __COMPONENT_NAME__ variants using class-variance-authority
@@ -9,27 +9,30 @@ import type { __COMPONENT_NAME__Props } from './__COMPONENT_NAME__.types';
  */
 const __COMPONENT_NAME_LOWER__Variants = cva(
   // Base styles - apply brand guide values
-  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        sm: 'h-8 px-3 text-sm',
-        md: 'h-10 px-4 text-base',
-        lg: 'h-12 px-6 text-lg',
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-6 text-lg",
       },
     },
     defaultVariants: {
-      variant: 'primary',
-      size: 'md',
+      variant: "primary",
+      size: "md",
     },
-  }
+  },
 );
 
 /**
@@ -47,40 +50,48 @@ const __COMPONENT_NAME_LOWER__Variants = cva(
 export const __COMPONENT_NAME__ = React.forwardRef<
   HTMLButtonElement,
   __COMPONENT_NAME__Props
->(({ variant, size, loading, disabled, className, children, ...props }, ref) => {
-  return (
-    <button
-      ref={ref}
-      className={cn(__COMPONENT_NAME_LOWER__Variants({ variant, size }), className)}
-      disabled={disabled || loading}
-      aria-busy={loading || undefined}
-      {...props}
-    >
-      {loading && (
-        <svg
-          className="mr-2 h-4 w-4 animate-spin"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
-      )}
-      {children}
-    </button>
-  );
-});
+>(
+  (
+    { variant, size, loading, disabled, className, children, ...props },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          __COMPONENT_NAME_LOWER__Variants({ variant, size }),
+          className,
+        )}
+        disabled={disabled || loading}
+        aria-busy={loading || undefined}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="mr-2 h-4 w-4 animate-spin"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {children}
+      </button>
+    );
+  },
+);
 
-__COMPONENT_NAME__.displayName = '__COMPONENT_NAME__';
+__COMPONENT_NAME__.displayName = "__COMPONENT_NAME__";

package/templates/component/Component.types.ts

@@ -1,16 +1,21 @@
-import type { VariantProps } from 'class-variance-authority';
-import type { ComponentPropsWithoutRef } from 'react';
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithoutRef } from "react";
 
 /**
  * __COMPONENT_NAME__ variant configuration
  * Generated from interview decisions
  */
-export type __COMPONENT_NAME__Variant = 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost';
+export type __COMPONENT_NAME__Variant =
+  | "primary"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "ghost";
 
 /**
  * __COMPONENT_NAME__ size configuration
  */
-export type __COMPONENT_NAME__Size = 'sm' | 'md' | 'lg';
+export type __COMPONENT_NAME__Size = "sm" | "md" | "lg";
 
 /**
  * Props for the __COMPONENT_NAME__ component
@@ -22,8 +27,7 @@ export type __COMPONENT_NAME__Size = 'sm' | 'md' | 'lg';
  * @property className - Additional CSS classes
  * @property children - Content to render inside the component
  */
-export interface __COMPONENT_NAME__Props
-  extends ComponentPropsWithoutRef<'button'> {
+export interface __COMPONENT_NAME__Props extends ComponentPropsWithoutRef<"button"> {
   /**
    * Visual style variant
    * @default 'primary'

package/templates/component/Component.visual.spec.ts

@@ -0,0 +1,170 @@
+import { test, expect } from "@playwright/test";
+
+/**
+ * Visual Regression Tests for __COMPONENT_NAME__
+ *
+ * Created with Hustle UI Create workflow (v3.9.0)
+ *
+ * These tests capture screenshots of component variants in Storybook
+ * and compare them against baseline images.
+ *
+ * Run with: pnpm playwright test __COMPONENT_NAME__.visual.spec.ts
+ *
+ * Update baselines: pnpm playwright test --update-snapshots
+ */
+
+const STORYBOOK_URL = process.env.STORYBOOK_URL || "http://localhost:6006";
+
+test.describe("__COMPONENT_NAME__ Visual Regression", () => {
+  // ===================================
+  // Variant Screenshots
+  // ===================================
+
+  test("Primary variant matches baseline", async ({ page }) => {
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--primary&viewMode=story`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-primary.png",
+    );
+  });
+
+  test("Secondary variant matches baseline", async ({ page }) => {
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--secondary&viewMode=story`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-secondary.png",
+    );
+  });
+
+  test("Disabled state matches baseline", async ({ page }) => {
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--disabled&viewMode=story`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-disabled.png",
+    );
+  });
+
+  test("Loading state matches baseline", async ({ page }) => {
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--loading&viewMode=story`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-loading.png",
+    );
+  });
+
+  // ===================================
+  // Size Variants (if applicable)
+  // ===================================
+
+  test("Small size matches baseline", async ({ page }) => {
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--small&viewMode=story`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-small.png",
+    );
+  });
+
+  test("Large size matches baseline", async ({ page }) => {
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--large&viewMode=story`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-large.png",
+    );
+  });
+
+  // ===================================
+  // Responsive Viewport Tests
+  // ===================================
+
+  test("renders correctly on mobile viewport", async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--primary&viewMode=story`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-mobile.png",
+    );
+  });
+
+  test("renders correctly on tablet viewport", async ({ page }) => {
+    await page.setViewportSize({ width: 768, height: 1024 });
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--primary&viewMode=story`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-tablet.png",
+    );
+  });
+
+  // ===================================
+  // Interaction State Tests
+  // ===================================
+
+  test("hover state matches baseline", async ({ page }) => {
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--primary&viewMode=story`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    // Hover over the component
+    await page.locator("#storybook-root > *").first().hover();
+
+    // Wait for any hover transitions
+    await page.waitForTimeout(300);
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-hover.png",
+    );
+  });
+
+  test("focus state matches baseline", async ({ page }) => {
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--primary&viewMode=story`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    // Focus the component via keyboard
+    await page.keyboard.press("Tab");
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-focus.png",
+    );
+  });
+
+  // ===================================
+  // Dark Mode Tests (if supported)
+  // ===================================
+
+  test("dark mode matches baseline", async ({ page }) => {
+    await page.goto(
+      `${STORYBOOK_URL}/iframe.html?id=components-__component_name__--primary&viewMode=story&globals=theme:dark`,
+    );
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.locator("#storybook-root")).toHaveScreenshot(
+      "__COMPONENT_NAME__-dark.png",
+    );
+  });
+});

package/templates/component/index.ts

@@ -7,9 +7,9 @@
  * Created with Hustle UI Create workflow (v3.9.0)
  */
 
-export { __COMPONENT_NAME__ } from './__COMPONENT_NAME__';
+export { __COMPONENT_NAME__ } from "./__COMPONENT_NAME__";
 export type {
   __COMPONENT_NAME__Props,
   __COMPONENT_NAME__Variant,
   __COMPONENT_NAME__Size,
-} from './__COMPONENT_NAME__.types';
+} from "./__COMPONENT_NAME__.types";