lint: format & fix style issues in project

.github/workflows/node.js.yml

@@ -27,5 +27,6 @@ jobs:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - run: npm ci
+    - run: npm run lint
     - run: npm run build --if-present
     - run: npm test --workspaces --if-present

.vscode/extensions.json

@@ -1,5 +1,3 @@
 {
-  "recommendations": [
-    "graphql.vscode-graphql"
-  ]
+  "recommendations": ["graphql.vscode-graphql"]
 }

biome.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "formatter": {
+    "enabled": true,
+    "indentWidth": 2,
+    "indentStyle": "space"
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}

extensions/checkout-ui-2/babel.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
-    ['@babel/preset-react', { runtime: 'automatic' }],
-    '@babel/preset-typescript',
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    ["@babel/preset-react", { runtime: "automatic" }],
+    "@babel/preset-typescript",
   ],
 };

extensions/checkout-ui-2/src/Checkout.test.tsx

@@ -1,28 +1,31 @@
-import { mount } from '@remote-ui/testing'
-import { createRoot } from '@remote-ui/react'
-import { Extension } from './Checkout'
-import * as Shopify from '@shopify/ui-extensions-react/checkout';
-import '@remote-ui/testing/matchers';
+import { createRoot } from "@remote-ui/react";
+import { mount } from "@remote-ui/testing";
+import * as Shopify from "@shopify/ui-extensions-react/checkout";
+import { Extension } from "./Checkout";
+import "@remote-ui/testing/matchers";
 
-jest.mock('@shopify/ui-extensions-react/checkout', () => {
-	return {
-		__esModule: true,
-		...jest.requireActual('@shopify/ui-extensions-react/checkout'),
-	};
+jest.mock("@shopify/ui-extensions-react/checkout", () => {
+  return {
+    __esModule: true,
+    ...jest.requireActual("@shopify/ui-extensions-react/checkout"),
+  };
 });
 
 jest
-	.spyOn(Shopify, 'useTranslate')
-	.mockImplementation(() => (translationKey: string) => translationKey as any);
+  .spyOn(Shopify, "useTranslate")
+  // biome-ignore lint/suspicious/noExplicitAny: can't mock an i18n function
+  .mockImplementation(() => (translationKey: string) => translationKey as any);
 
-jest.spyOn(Shopify, 'useApi').mockImplementation(() => ({ extension: { target: 'purchase.checkout.block.render' } }));
+jest.spyOn(Shopify, "useApi").mockImplementation(() => ({
+  extension: { target: "purchase.checkout.block.render" },
+}));
 
-describe('Header', () => {
-	it('renders the header', () => {
-		const app = mount((root) => {
-			createRoot(root).render(<Extension />)
-		})
+describe("Extension", () => {
+  it("renders the welcome text", () => {
+    const app = mount((root) => {
+      createRoot(root).render(<Extension />);
+    });
 
-		expect(app).toContainRemoteText('welcome');
-	})
-})
+    expect(app).toContainRemoteText("welcome");
+  });
+});

extensions/checkout-ui-2/src/Checkout.tsx

@@ -1,8 +1,8 @@
 import {
-  reactExtension,
   Banner,
   BlockStack,
   Text,
+  reactExtension,
   useApi,
   useTranslate,
 } from "@shopify/ui-extensions-react/checkout";
@@ -24,4 +24,4 @@ export function Extension() {
       </Banner>
     </BlockStack>
   );
-}
+}

extensions/checkout-ui/babel.config.js

@@ -1,7 +1,7 @@
 module.exports = {
-    presets: [
-      '@babel/preset-env',
-      ['@babel/preset-react', {runtime: 'automatic'}],
-      "@babel/preset-typescript",
-    ],
-  };
+  presets: [
+    "@babel/preset-env",
+    ["@babel/preset-react", { runtime: "automatic" }],
+    "@babel/preset-typescript",
+  ],
+};

extensions/checkout-ui/src/Checkout.jsx

@@ -1,8 +1,8 @@
 import {
-  reactExtension,
   Banner,
   BlockStack,
   Text,
+  reactExtension,
   useApi,
   useTranslate,
 } from "@shopify/ui-extensions-react/checkout";
@@ -15,7 +15,6 @@ export function Extension() {
   const translate = useTranslate();
   const { extension } = useApi();
 
-  // 3. Render a UI
   return (
     <BlockStack border={"dotted"} padding={"tight"}>
       <Banner title="checkout-ui">
@@ -25,4 +24,4 @@ export function Extension() {
       </Banner>
     </BlockStack>
   );
-}
+}

extensions/checkout-ui/src/Checkout.test.jsx

@@ -1,28 +1,30 @@
-import { mount } from '@remote-ui/testing'
-import { createRoot } from '@remote-ui/react'
-import { Extension } from './Checkout'
-import * as Shopify from '@shopify/ui-extensions-react/checkout';
-import '@remote-ui/testing/matchers';
+import { createRoot } from "@remote-ui/react";
+import { mount } from "@remote-ui/testing";
+import * as Shopify from "@shopify/ui-extensions-react/checkout";
+import { Extension } from "./Checkout";
+import "@remote-ui/testing/matchers";
 
-jest.mock('@shopify/ui-extensions-react/checkout', () => {
-	return {
-		__esModule: true,
-		...jest.requireActual('@shopify/ui-extensions-react/checkout'),
-	};
+jest.mock("@shopify/ui-extensions-react/checkout", () => {
+  return {
+    __esModule: true,
+    ...jest.requireActual("@shopify/ui-extensions-react/checkout"),
+  };
 });
 
 jest
-	.spyOn(Shopify, 'useTranslate')
-	.mockImplementation(() => (translationKey) => translationKey);
+  .spyOn(Shopify, "useTranslate")
+  .mockImplementation(() => (translationKey) => translationKey);
 
-jest.spyOn(Shopify, 'useApi').mockImplementation(() => ({ extension: { target: 'purchase.checkout.block.render' } }));
+jest.spyOn(Shopify, "useApi").mockImplementation(() => ({
+  extension: { target: "purchase.checkout.block.render" },
+}));
 
-describe('Header', () => {
-	it('renders the header', () => {
-		const app = mount((root) => {
-			createRoot(root).render(<Extension />)
-		})
+describe("Extension", () => {
+  it("renders the welcome text", () => {
+    const app = mount((root) => {
+      createRoot(root).render(<Extension />);
+    });
 
-		expect(app).toContainRemoteText('welcome');
-	})
-})
+    expect(app).toContainRemoteText("welcome");
+  });
+});