@next-vibe/checker 1.0.11 → 1.0.12

package/src/app/api/[locale]/system/check/test-project/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "check-test-project",
+  "version": "1.0.0",
+  "description": "Test project for vibe check system",
+  "scripts": {
+    "check": "bun ../../unified-interface/cli/vibe-runtime.ts check"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "8.49.0",
+    "vite": "^5.0.0",
+    "zod-validation-error": "3.5.3"
+  }
+}

package/src/app/api/[locale]/system/check/test-project/src/constants.ts

@@ -0,0 +1,6 @@
+/**
+ * Project constants
+ */
+
+export const VERSION = "1.0.0";
+export const PROJECT_NAME = "builder-test-project";

package/src/app/api/[locale]/system/check/test-project/src/greet.ts

@@ -0,0 +1,18 @@
+/**
+ * Greeting module
+ */
+
+export interface GreetOptions {
+  name: string;
+  formal?: boolean;
+}
+
+export function greet(options: GreetOptions): string {
+  const { name, formal = false } = options;
+
+  if (formal) {
+    return `Good day, ${name}. How may I assist you?`;
+  }
+
+  return `Hello, ${name}!`;
+}

package/src/app/api/[locale]/system/check/test-project/src/test-issues/a11y-issues.tsx

@@ -0,0 +1,107 @@
+/**
+ * Test file for Accessibility (jsx-a11y) lint issues
+ * This file intentionally contains code that violates accessibility rules
+ */
+
+import React from "react";
+
+// jsx-a11y/alt-text - Missing alt text on image
+export function MissingAlt(): React.ReactElement {
+  return (
+    <div>
+      <img src="photo.jpg" />
+    </div>
+  );
+}
+
+// jsx-a11y/anchor-has-content - Empty anchor
+export function EmptyAnchor(): React.ReactElement {
+  return <a href="https://example.com" />;
+}
+
+// jsx-a11y/click-events-have-key-events - Click without keyboard
+export function ClickWithoutKeyboard(): React.ReactElement {
+  return <div onClick={() => alert("clicked")}>Click me</div>;
+}
+
+// jsx-a11y/heading-has-content - Empty heading
+export function EmptyHeading(): React.ReactElement {
+  return (
+    <div>
+      <h1 />
+      <h2 aria-label="Hidden heading" />
+    </div>
+  );
+}
+
+// jsx-a11y/html-has-lang - Missing lang attribute (would need full HTML)
+// This is hard to test in a component, skip
+
+// jsx-a11y/iframe-has-title - Missing iframe title
+export function IframeWithoutTitle(): React.ReactElement {
+  return <iframe src="https://example.com" />;
+}
+
+// jsx-a11y/img-redundant-alt - Redundant alt text
+export function RedundantAlt(): React.ReactElement {
+  return <img src="photo.jpg" alt="image of a cat" />;
+}
+
+// jsx-a11y/no-access-key - Using accessKey
+export function WithAccessKey(): React.ReactElement {
+  return <button accessKey="s">Save</button>;
+}
+
+// jsx-a11y/no-autofocus - Using autoFocus
+export function WithAutofocus(): React.ReactElement {
+  return <input type="text" />;
+}
+
+// jsx-a11y/no-distracting-elements - Using marquee/blink
+export function DistractingElements(): React.ReactElement {
+  return (
+    <div>
+      <marquee>Scrolling text</marquee>
+    </div>
+  );
+}
+
+// jsx-a11y/no-redundant-roles - Redundant role
+export function RedundantRole(): React.ReactElement {
+  return (
+    <div>
+      <button>Click me</button>
+      <nav>Navigation</nav>
+    </div>
+  );
+}
+
+// jsx-a11y/role-has-required-aria-props - Missing required ARIA props
+export function MissingAriaProps(): React.ReactElement {
+  return (
+    <div>
+      <div role="checkbox">Toggle</div>
+      <div role="slider">Value</div>
+    </div>
+  );
+}
+
+// jsx-a11y/tabindex-no-positive - Positive tabIndex
+export function PositiveTabIndex(): React.ReactElement {
+  return (
+    <div>
+      <button tabIndex={1}>First</button>
+      <button tabIndex={2}>Second</button>
+    </div>
+  );
+}
+
+// jsx-a11y/aria-props - Invalid aria prop
+export function InvalidAriaProp(): React.ReactElement {
+  return <div aria-invalid-prop="true">Content</div>;
+}
+
+// jsx-a11y/aria-role - Invalid role
+export function InvalidRole(): React.ReactElement {
+  return <div role="invalid-role">Content</div>;
+}

package/src/app/api/[locale]/system/check/test-project/src/test-issues/eslint-issues.tsx

@@ -0,0 +1,37 @@
+/**
+ * Test file for ESLint-specific rules
+ * These rules are handled by ESLint, not oxlint
+ */
+
+// simple-import-sort/imports - Unsorted imports
+import type { ReactElement } from "react";
+import { useEffect,useState } from "react";
+import React from "react";
+
+// simple-import-sort/exports - Unsorted exports
+export { BadImportOrder };
+export { HookIssues };
+
+// react-hooks/rules-of-hooks - Hook called conditionally
+function BadImportOrder(): ReactElement {
+  return <div>Testing import order</div>;
+}
+
+// react-hooks/exhaustive-deps - Missing dependency
+function HookIssues({ id }: { id: string }): ReactElement {
+  const [data, setData] = useState<string | null>(null);
+  const [count, setCount] = useState(0);
+
+  // react-hooks/rules-of-hooks - Hook in condition (would be caught)
+  // Commenting out as it causes runtime errors
+  // if (id) {
+  //   const [conditionalState] = useState(0);
+  // }
+
+  // react-hooks/exhaustive-deps - Missing 'id' and 'count' in deps
+  useEffect(() => {
+    setData(`Data for ${id}, count: ${count}`);
+  }, []); // Missing dependencies
+
+  return <div onClick={() => setCount(count + 1)}>{data}</div>;
+}

package/src/app/api/[locale]/system/check/test-project/src/test-issues/general-issues.ts

@@ -0,0 +1,137 @@
+/**
+ * Test file for general JavaScript/TypeScript lint issues
+ * This file intentionally contains code that violates general rules
+ */
+
+// no-debugger - Debugger statement
+export function withDebugger(): void {
+  console.log("debugging");
+}
+
+// no-console - Console statements
+export function withConsole(): void {
+  console.log("info");
+  console.warn("warning");
+  console.error("error");
+  console.debug("debug");
+}
+
+// curly - Missing curly braces
+export function noCurly(x: number): number {
+  if (x > 0) {
+    return x;
+  } else {
+    return -x;
+  }
+}
+
+// eqeqeq - Using == instead of ===
+export function looseEquality(a: unknown, b: unknown): boolean {
+  if (a == b) {
+    return true;
+  }
+  if (a != b) {
+    return false;
+  }
+  return a == null;
+}
+
+// no-template-curly-in-string - Template literal syntax in regular string
+export function templateInString(): string {
+  const name = "World";
+  return "Hello ${name}!";
+}
+
+// no-unsafe-optional-chaining - Unsafe optional chaining
+export function unsafeOptionalChaining(
+  obj: { a?: { b: number } } | null,
+): number {
+  return 1 + obj?.a?.b;
+}
+
+// array-callback-return - Missing return in array callback
+export function noArrayReturn(arr: number[]): number[] {
+  return arr.map((x) => {
+    const result = x * 2;
+  });
+}
+
+// no-constructor-return - Returning from constructor
+export class ConstructorReturn {
+  value: number;
+
+  constructor() {
+    this.value = 1;
+    return { value: 2 };
+  }
+}
+
+// no-self-compare - Comparing variable to itself
+export function selfCompare(x: number): boolean {
+  return x === x;
+}
+
+// no-unreachable-loop - Loop that only runs once
+export function unreachableLoop(arr: number[]): number | undefined {
+  for (const item of arr) {
+    return item;
+  }
+  return undefined;
+}
+
+// no-unused-private-class-members - Unused private member
+export class UnusedPrivate {
+  #unusedField = 42;
+  usedField = 1;
+
+  getUsed(): number {
+    return this.usedField;
+  }
+}
+
+// prefer-template - String concatenation instead of template
+export function stringConcat(a: string, b: string): string {
+  return a + " " + b;
+}
+
+// camelcase - Non-camelCase variable names
+export function bad_naming(): void {
+  const my_variable = 1;
+  const another_one = 2;
+  console.log(my_variable, another_one);
+}
+
+// oxc/missing-throw - Forgotten throw
+export function missingThrow(): void {
+  new Error("This error is never thrown");
+}
+
+// oxc/bad-comparison-sequence - Bad comparison
+export function badComparison(a: number, b: number, c: number): boolean {
+  return a < b < c;
+}
+
+// oxc/double-comparisons - Redundant comparison
+export function doubleComparison(x: number): boolean {
+  return x >= 0 && x >= 0;
+}
+
+// unicorn/no-new-array - new Array usage
+export function newArrayUsage(): number[] {
+  return new Array(5);
+}
+
+// unicorn/prefer-array-flat - Manual array flattening
+export function manualFlatten(arr: number[][]): number[] {
+  return [].concat(...arr);
+}
+
+// unicorn/prefer-includes - indexOf instead of includes
+export function useIndexOf(arr: string[], item: string): boolean {
+  return arr.indexOf(item) !== -1;
+}
+
+// unicorn/prefer-string-starts-ends-with - Manual string check
+export function manualStartsWith(str: string, prefix: string): boolean {
+  return str.slice(0, prefix.length) === prefix;
+}

package/src/app/api/[locale]/system/check/test-project/src/test-issues/i18n-issues.tsx

@@ -0,0 +1,129 @@
+/**
+ * Test file for i18n literal string issues
+ * This file intentionally contains hardcoded strings that should be translated
+ */
+
+import React from "react";
+
+// Literal strings in JSX text content
+export function HardcodedStrings(): React.ReactElement {
+  return (
+    <div>
+      <h1>Welcome to our application</h1>
+      <p>This is a paragraph with hardcoded text that should be translated.</p>
+      <button>Click here to continue</button>
+      <span>Error: Something went wrong</span>
+      <label>Enter your email address</label>
+    </div>
+  );
+}
+
+// Literal strings in JSX attributes (non-excluded)
+export function HardcodedAttributes(): React.ReactElement {
+  return (
+    <div>
+      <button aria-label="Close modal">X</button>
+      <input placeholder="Enter your name" />
+      <img src="/logo.png" alt="Company logo" title="Our awesome logo" />
+    </div>
+  );
+}
+
+// Literal strings in component props
+export function HardcodedProps(): React.ReactElement {
+  return (
+    <div>
+      <CustomButton label="Submit form" />
+      <CustomInput errorMessage="This field is required" />
+      <Notification message="Your changes have been saved" />
+    </div>
+  );
+}
+
+// Literal strings in variables used in JSX
+export function HardcodedVariables(): React.ReactElement {
+  const title = "Dashboard";
+  const subtitle = "View your analytics";
+  const errorMsg = "Failed to load data";
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <h2>{subtitle}</h2>
+      <p>{errorMsg}</p>
+    </div>
+  );
+}
+
+// Literal strings in conditional rendering
+export function ConditionalStrings({
+  isError,
+}: {
+  isError: boolean;
+}): React.ReactElement {
+  return (
+    <div>
+      {isError ? (
+        <span>An error occurred</span>
+      ) : (
+        <span>Operation successful</span>
+      )}
+    </div>
+  );
+}
+
+// Literal strings in array rendering
+export function ArrayStrings(): React.ReactElement {
+  const menuItems = ["Home", "About", "Contact", "Settings"];
+
+  return (
+    <nav>
+      {menuItems.map((item, index) => (
+        <a key={index} href="#">
+          {item}
+        </a>
+      ))}
+    </nav>
+  );
+}
+
+// Literal strings in object properties used for display
+export function ObjectStrings(): React.ReactElement {
+  const config = {
+    title: "Application Settings",
+    description: "Manage your preferences here",
+    saveButton: "Save Changes",
+    cancelButton: "Discard",
+  };
+
+  return (
+    <div>
+      <h2>{config.title}</h2>
+      <p>{config.description}</p>
+      <button>{config.saveButton}</button>
+      <button>{config.cancelButton}</button>
+    </div>
+  );
+}
+
+// Mock components for props testing
+function CustomButton({ label }: { label: string }): React.ReactElement {
+  return <button>{label}</button>;
+}
+
+function CustomInput({
+  errorMessage,
+}: {
+  errorMessage: string;
+}): React.ReactElement {
+  return (
+    <div>
+      <input />
+      <span>{errorMessage}</span>
+    </div>
+  );
+}
+
+function Notification({ message }: { message: string }): React.ReactElement {
+  return <div className="notification">{message}</div>;
+}

package/src/app/api/[locale]/system/check/test-project/src/test-issues/jsx-capitalization-issues.tsx

@@ -0,0 +1,131 @@
+/**
+ * Test file for jsx-capitalization plugin issues
+ * This file intentionally contains lowercase HTML elements that should use components
+ */
+
+import React from "react";
+
+// ============================================================
+// Rule: Lowercase 'div' element
+// Expected error: "Use platform-independent <Div> component..."
+// ============================================================
+export function ComponentWithDiv(): React.ReactElement {
+  return <div className="container">Content in div</div>;
+}
+
+// ============================================================
+// Rule: Typography element 'p'
+// Expected error: "Use typography component <P> instead of <p>..."
+// ============================================================
+export function ComponentWithP(): React.ReactElement {
+  return <p className="paragraph">Paragraph content</p>;
+}
+
+// ============================================================
+// Rule: Typography element 'h1'
+// Expected error: "Use typography component <H1> instead of <h1>..."
+// ============================================================
+export function ComponentWithH1(): React.ReactElement {
+  return <h1 className="title">Heading content</h1>;
+}
+
+// ============================================================
+// Rule: Anchor element should use Link
+// Expected error: "Use platform-independent <Link> component instead of <a>..."
+// ============================================================
+export function ComponentWithAnchor(): React.ReactElement {
+  return <a href="/test">Link text</a>;
+}
+
+// ============================================================
+// Rule: Standalone element 'span'
+// Expected error: "Use platform-independent <Span> component..."
+// ============================================================
+export function ComponentWithSpan(): React.ReactElement {
+  return <span className="highlight">Highlighted text</span>;
+}
+
+// ============================================================
+// Rule: Common UI element 'button'
+// Expected error: "Use platform-independent <Button> component..."
+// ============================================================
+export function ComponentWithButton(): React.ReactElement {
+  return <button type="button">Click me</button>;
+}
+
+// ============================================================
+// Rule: Common UI element 'input'
+// Expected error: "Use platform-independent <Input> component..."
+// ============================================================
+export function ComponentWithInput(): React.ReactElement {
+  return <input type="text" placeholder="Enter text" />;
+}
+
+// ============================================================
+// Rule: Image element
+// Expected error: "Use platform-independent <Image> component..."
+// ============================================================
+export function ComponentWithImg(): React.ReactElement {
+  return <img src="/test.png" alt="Test" />;
+}
+
+// ============================================================
+// Rule: SVG elements
+// Expected error: "SVG element <svg> detected. For icons, use components from next-vibe-ui/ui/icons..."
+// ============================================================
+export function ComponentWithSvg(): React.ReactElement {
+  return (
+    <svg viewBox="0 0 100 100">
+      <circle cx="50" cy="50" r="40" />
+    </svg>
+  );
+}
+
+// ============================================================
+// Rule: Common UI element 'ul/li'
+// Expected errors for ul and li
+// ============================================================
+export function ComponentWithList(): React.ReactElement {
+  return (
+    <ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+    </ul>
+  );
+}
+
+// ============================================================
+// Rule: Common UI element 'form'
+// Expected error: "Use platform-independent <Form> component..."
+// ============================================================
+export function ComponentWithForm(): React.ReactElement {
+  return (
+    <form>
+      <label htmlFor="name">Name</label>
+      <input id="name" type="text" />
+    </form>
+  );
+}
+
+// ============================================================
+// Rule: Common UI element 'section'
+// Expected error: "Use platform-independent <Section> component..."
+// ============================================================
+export function ComponentWithSection(): React.ReactElement {
+  return <section className="hero">Hero section</section>;
+}
+
+// ============================================================
+// Valid: Capitalized component (should NOT trigger error)
+// ============================================================
+export function ValidComponentUsage(): React.ReactElement {
+  return <ValidComponent>This is valid</ValidComponent>;
+}
+
+function ValidComponent({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement {
+  return <>{children}</>;
+}

package/src/app/api/[locale]/system/check/test-project/src/test-issues/nextjs-issues.tsx

@@ -0,0 +1,95 @@
+/**
+ * Test file for Next.js-specific lint issues
+ * This file intentionally contains code that violates Next.js best practices
+ */
+
+import React from "react";
+
+// nextjs/no-img-element - Using <img> instead of next/image
+export function ImgElement(): React.ReactElement {
+  return (
+    <div>
+      <img src="/photo.jpg" alt="Photo" width={300} height={200} />
+    </div>
+  );
+}
+
+// nextjs/no-html-link-for-pages - Using <a> for internal navigation
+export function HtmlLink(): React.ReactElement {
+  return (
+    <nav>
+      <a href="/about">About</a>
+      <a href="/contact">Contact</a>
+      <a href="/dashboard/settings">Settings</a>
+    </nav>
+  );
+}
+
+// nextjs/no-head-element - Using <head> instead of next/head
+export function HeadElement(): React.ReactElement {
+  return (
+    <html>
+      <head>
+        <title>My Page</title>
+        <meta name="description" content="My page description" />
+      </head>
+      <body>
+        <div>Content</div>
+      </body>
+    </html>
+  );
+}
+
+// nextjs/no-sync-scripts - Synchronous script loading
+export function SyncScript(): React.ReactElement {
+  return (
+    <div>
+      <script src="https://example.com/script.js" />
+    </div>
+  );
+}
+
+// nextjs/no-css-tags - Using <link> for CSS
+export function CssLink(): React.ReactElement {
+  return (
+    <>
+      <link rel="stylesheet" href="/styles.css" />
+      <div>Styled content</div>
+    </>
+  );
+}
+
+// Google Fonts issues
+export function GoogleFonts(): React.ReactElement {
+  return (
+    <>
+      {/* nextjs/google-font-display - Missing font-display */}
+      <link
+        href="https://fonts.googleapis.com/css2?family=Roboto"
+        rel="stylesheet"
+      />
+      {/* nextjs/google-font-preconnect - Missing preconnect */}
+      <link
+        href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
+        rel="stylesheet"
+      />
+      <div>Text with Google Font</div>
+    </>
+  );
+}
+
+// Document-specific issues (these would normally be in _document)
+export function DocumentIssues(): React.ReactElement {
+  return (
+    <html>
+      {/* Missing lang attribute - jsx-a11y/html-has-lang */}
+      <head>
+        {/* nextjs/no-title-in-document-head - Title in document */}
+        <title>Document Title</title>
+      </head>
+      <body>
+        <div>Page content</div>
+      </body>
+    </html>
+  );
+}