Fix linting in example app

examples/react-nextjs/app/components/TestCustomButton.cy.tsx

@@ -1,21 +1,20 @@
-import React from 'react';
-import TestCustomButton from './TestCustomButton';
+import TestCustomButton from './TestCustomButton'
 
 describe('<TestCustomButton />', () => {
   it('renders', () => {
-    cy.mount(<TestCustomButton />);
+    cy.mount(<TestCustomButton />)
 
-    cy.get('button').should('have.text', 'Launch with Custom Component');
+    cy.get('button').should('have.text', 'Launch with Custom Component')
 
     // Wait for script to become interactive. This is almost instananeous locally but takes time in CI.
-    cy.wait(1250);
+    cy.wait(1250)
 
     // Launch the Connector
-    cy.get('iframe#quiltt--frame').should('not.exist');
-    cy.get('button').click();
-    cy.get('iframe#quiltt--frame').should('be.visible');
+    cy.get('iframe#quiltt--frame').should('not.exist')
+    cy.get('button').click()
+    cy.get('iframe#quiltt--frame').should('be.visible')
 
     // TODO: Check that iframe is rendered. https://github.com/cypress-io/cypress/issues/136
     // cy.get('iframe#quiltt--frame').should('contains.text', 'Stitching finance together')
-  });
-});
+  })
+})

examples/react-nextjs/app/components/TestCustomButton.tsx

@@ -1,11 +1,15 @@
 'use client'
 
+import type { ButtonHTMLAttributes } from 'react'
+
 import { QuilttButton } from '@quiltt/react'
 
-const CustomButton = ({ children, ...props }: any) => {
+type CustomButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
+
+const CustomButton = ({ children, ...props }: CustomButtonProps) => {
   return (
     <button
-      className="bg-purple-500 hover:bg-purple-900 text-white py-2 px-4 rounded-md"
+      className="rounded-md bg-purple-500 px-4 py-2 text-white hover:bg-purple-900"
       {...props}
     >
       {children}

examples/react-nextjs/app/components/TestCustomContainer.cy.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { TestCustomContainer } from './TestCustomContainer'
 
 describe('<TestCustomContainer />', () => {

examples/react-nextjs/app/components/TestCustomContainer.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { QuilttContainer } from '@quiltt/react'
-import { FC } from 'react'
+import type { FC } from 'react'
 
 const CustomContainer: FC = ({ ...props }) => {
-  return <div className="border-4 border-purple-500 hover:border-blue-500 h-full" {...props}></div>
+  return <div className="h-full border-4 border-purple-500 hover:border-blue-500" {...props} />
 }
 
 export const TestCustomContainer = () => {

examples/react-nextjs/app/components/TestHTMLLauncher.cy.tsx

@@ -1,21 +1,20 @@
-import React from 'react';
-import TestHTMLLauncher from './TestHTMLLauncher';
+import TestHTMLLauncher from './TestHTMLLauncher'
 
 describe('<TestHTMLLauncher />', () => {
   it('renders', () => {
-    cy.mount(<TestHTMLLauncher />);
+    cy.mount(<TestHTMLLauncher />)
 
-    cy.get('a').should('contains.text', 'Launch with HTML');
+    cy.get('a').should('contains.text', 'Launch with HTML')
 
     // Wait for script to become interactive. This is almost instananeous locally but takes time in CI.
-    cy.wait(1250);
+    cy.wait(1250)
 
     // Launch the Connector
-    cy.get('iframe#quiltt--frame').should('not.exist');
-    cy.get('a').click();
-    cy.get('iframe#quiltt--frame').should('be.visible');
+    cy.get('iframe#quiltt--frame').should('not.exist')
+    cy.get('a').click()
+    cy.get('iframe#quiltt--frame').should('be.visible')
 
     // TODO: Check that iframe is rendered. https://github.com/cypress-io/cypress/issues/136
     // cy.get('iframe#quiltt--frame').should('contains.text', 'Stitching finance together')
-  });
-});
+  })
+})

examples/react-nextjs/app/components/TestHTMLLauncher.tsx

@@ -8,8 +8,10 @@ export const TestHTMLLauncher = () => {
 
   return (
     <a
+      // biome-ignore lint/a11y/useValidAnchor: <explanation>
+      href="#"
       quiltt-button="connector"
-      className="border-2 border-purple-500 hover:bg-purple-500 text-white py-2 px-4 rounded-full cursor-pointer"
+      className="cursor-pointer rounded-full border-2 border-purple-500 px-4 py-2 text-white hover:bg-purple-500"
     >
       Launch with HTML
     </a>

examples/react-nextjs/app/components/TestJSLauncher.cy.tsx

@@ -1,21 +1,20 @@
-import React from 'react';
-import TestJSLauncher from './TestJSLauncher';
+import TestJSLauncher from './TestJSLauncher'
 
 describe('<TestJSLauncher />', () => {
   it('renders', () => {
-    cy.mount(<TestJSLauncher />);
+    cy.mount(<TestJSLauncher />)
 
-    cy.get('button').should('contains.text', 'Launch with Javascript');
+    cy.get('button').should('contains.text', 'Launch with Javascript')
 
     // Wait for script to become interactive. This is almost instananeous locally but takes time in CI.
-    cy.wait(1250);
+    cy.wait(1250)
 
     // Launch the Connector
-    cy.get('iframe#quiltt--frame').should('not.exist');
-    cy.get('button').click();
-    cy.get('iframe#quiltt--frame').should('be.visible');
+    cy.get('iframe#quiltt--frame').should('not.exist')
+    cy.get('button').click()
+    cy.get('iframe#quiltt--frame').should('be.visible')
 
     // TODO: Check that iframe is rendered. https://github.com/cypress-io/cypress/issues/136
     // cy.get('iframe#quiltt--frame').should('contains.text', 'Stitching finance together')
-  });
-});
+  })
+})

examples/react-nextjs/app/components/TestJSLauncher.tsx

@@ -10,8 +10,9 @@ export const TestJSLauncher = () => {
 
   return (
     <button
+      type="button"
       onClick={open}
-      className="border-2 border-purple-500 hover:bg-purple-500 text-white py-2 px-4 rounded-full cursor-pointer"
+      className="cursor-pointer rounded-full border-2 border-purple-500 px-4 py-2 text-white hover:bg-purple-500"
     >
       Launch with Javascript
     </button>

examples/react-nextjs/app/components/TestQuilttButton.cy.tsx

@@ -1,21 +1,20 @@
-import React from 'react';
-import TestQuilttButton from './TestQuilttButton';
+import TestQuilttButton from './TestQuilttButton'
 
 describe('<TestQuilttButton />', () => {
   it('renders', () => {
-    cy.mount(<TestQuilttButton />);
+    cy.mount(<TestQuilttButton />)
 
-    cy.get('button').should('have.text', 'Launch with Component');
+    cy.get('button').should('have.text', 'Launch with Component')
 
     // Wait for script to become interactive. This is almost instananeous locally but takes time in CI.
-    cy.wait(1250);
+    cy.wait(1250)
 
     // Launch the Connector
-    cy.get('iframe#quiltt--frame').should('not.exist');
-    cy.get('button').click();
-    cy.get('iframe#quiltt--frame').should('be.visible');
+    cy.get('iframe#quiltt--frame').should('not.exist')
+    cy.get('button').click()
+    cy.get('iframe#quiltt--frame').should('be.visible')
 
     // TODO: Check that iframe is rendered. https://github.com/cypress-io/cypress/issues/136
     // cy.get('iframe#quiltt--frame').should('contains.text', 'Stitching finance together')
-  });
-});
+  })
+})

examples/react-nextjs/app/components/TestQuilttButton.tsx

@@ -6,7 +6,7 @@ export const TestQuilttButton = () => {
   return (
     <QuilttButton
       connectorId="connector"
-      className="bg-purple-500 hover:bg-purple-900 text-white py-2 px-4 rounded-md"
+      className="rounded-md bg-purple-500 px-4 py-2 text-white hover:bg-purple-900"
     >
       Launch with Component
     </QuilttButton>

examples/react-nextjs/app/components/TestQuilttContainer.cy.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { TestQuilttContainer } from './TestQuilttContainer'
 
 describe('<TestQuilttContainer />', () => {

examples/react-nextjs/app/components/TestQuilttContainer.tsx

@@ -6,7 +6,7 @@ export const TestQuilttContainer = () => {
   return (
     <QuilttContainer
       connectorId="connector"
-      className="border-4 border-purple-500 hover:border-blue-500 h-full"
+      className="h-full border-4 border-purple-500 hover:border-blue-500"
     />
   )
 }

examples/react-nextjs/app/page.tsx

@@ -11,16 +11,16 @@ import {
 
 export default function Home() {
   return (
-    <main className="flex h-screen justify-center items-center space-x-48">
+    <main className="flex h-screen items-center justify-center space-x-48">
       <div className="flex flex-col space-y-5">
-        <h1 className="text-2xl text-center py-6">Modal launchers</h1>
+        <h1 className="py-6 text-center text-2xl">Modal launchers</h1>
         <TestHTMLLauncher />
         <TestJSLauncher />
         <TestQuilttButton />
         <TestCustomButton />
       </div>
-      <div className="flex flex-col h-3/4 w-1/5">
-        <h1 className="text-2xl text-center py-6">Container</h1>
+      <div className="flex h-3/4 w-1/5 flex-col">
+        <h1 className="py-6 text-center text-2xl">Container</h1>
         <TestQuilttContainer />
         <TestCustomContainer />
       </div>

examples/react-nextjs/package.json

@@ -12,7 +12,7 @@
     "cypress:install": "cypress install",
     "cypress:open": "cypress open",
     "dev": "next dev",
-    "lint": "TIMING=1 biome check src/ --fix",
+    "lint": "TIMING=1 biome check app/ --fix",
     "start": "next start",
     "test": "pnpm run cypress:component",
     "typecheck": "tsc --project tsconfig.json --noEmit"