feat: configured eslint and package clean-up (Shopify#14)

## Context Added default eslint for linting the code and cleaned up the package.json ## Changes Added .eslintrc with the correct config and removed unused packages ## Paperwork [SCH-10](https://codeinternetapplications.atlassian.net/jira/software/c/projects/SCH/boards/644?selectedIssue=SCH-10) ## Checklist - [x] My code follows the style guidelines of this project - [x] I've performed a self-review of my own code - [x] I've added a changeset if this PR contains user-facing or noteworthy changes - [x] I've commented my code, particularly in hard-to-understand areas - [x] I've made corresponding changes to the documentation - [x] I've tested my code for breaking changes and added the corresponding footer in this PR if needed
remcolakens · Jun 6, 2023 · 7362686 · 7362686
1 parent c5cc132
commit 7362686
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 399 deletions.
diff --git a/apps/cbt-hydrogen/.eslintrc b/apps/cbt-hydrogen/.eslintrc
@@ -0,0 +1,3 @@
+{
+	"extends": ["@code-internet-applications/eslint-config-code"]
+}
diff --git a/apps/cbt-hydrogen/.eslintrc.js b/apps/cbt-hydrogen/.eslintrc.js
diff --git a/apps/cbt-hydrogen/README.md b/apps/cbt-hydrogen/README.md
@@ -1,6 +1,9 @@
 # Hydrogen template: Hello World
 
-Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework. This template contains a **minimal setup** of components, queries and tooling to get started with Hydrogen.
+Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to
+dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework.
+This template contains a **minimal setup** of components, queries and tooling to
+get started with Hydrogen.
 
 [Check out Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)
 [Get familiar with Remix](https://remix.run/docs/en/v1)

diff --git a/apps/cbt-hydrogen/app/entry.client.tsx b/apps/cbt-hydrogen/app/entry.client.tsx
@@ -1,6 +1,6 @@
-import {RemixBrowser} from '@remix-run/react';
-import {startTransition, StrictMode} from 'react';
-import {hydrateRoot} from 'react-dom/client';
+import { RemixBrowser } from '@remix-run/react';
+import { startTransition, StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
 
 startTransition(() => {
 	hydrateRoot(

diff --git a/apps/cbt-hydrogen/app/entry.server.tsx b/apps/cbt-hydrogen/app/entry.server.tsx
@@ -1,7 +1,7 @@
-import type {EntryContext} from '@shopify/remix-oxygen';
-import {RemixServer} from '@remix-run/react';
+import type { EntryContext } from '@shopify/remix-oxygen';
+import { RemixServer } from '@remix-run/react';
 import isbot from 'isbot';
-import {renderToReadableStream} from 'react-dom/server';
+import { renderToReadableStream } from 'react-dom/server';
 
 export default async function handleRequest(
 	request: Request,

diff --git a/apps/cbt-hydrogen/app/lib/session.server.ts b/apps/cbt-hydrogen/app/lib/session.server.ts
@@ -39,15 +39,15 @@ export class HydrogenSession {
 		return this.sessionStorage.destroySession(this.session);
 	}
 
-	flash(key: string, value: any) {
+	flash(key: string, value: unknown) {
 		this.session.flash(key, value);
 	}
 
 	unset(key: string) {
 		this.session.unset(key);
 	}
 
-	set(key: string, value: any) {
+	set(key: string, value: unknown) {
 		this.session.set(key, value);
 	}
 

diff --git a/apps/cbt-hydrogen/app/root.tsx b/apps/cbt-hydrogen/app/root.tsx
@@ -6,14 +6,14 @@ import {
 	ScrollRestoration,
 	useLoaderData,
 } from '@remix-run/react';
-import type {Shop} from '@shopify/hydrogen/storefront-api-types';
-import {type LinksFunction, type LoaderArgs} from '@shopify/remix-oxygen';
+import type { Shop } from '@shopify/hydrogen/storefront-api-types';
+import { type LinksFunction, type LoaderArgs } from '@shopify/remix-oxygen';
 import favicon from '../public/favicon.svg';
 import styles from './styles/tailwind.css';
 
 export const links: LinksFunction = () => {
 	return [
-		{rel: 'stylesheet', href: styles},
+		{ rel: 'stylesheet', href: styles },
 		{
 			rel: 'preconnect',
 			href: 'https://cdn.shopify.com',
@@ -22,19 +22,21 @@ export const links: LinksFunction = () => {
 			rel: 'preconnect',
 			href: 'https://shop.app',
 		},
-		{rel: 'icon', type: 'image/svg+xml', href: favicon},
+		{ rel: 'icon', type: 'image/svg+xml', href: favicon },
 	];
 };
 
-export async function loader({context}: LoaderArgs) {
-	const layout = await context.storefront.query<{shop: Shop}>(LAYOUT_QUERY);
-	return {layout};
+export async function loader({ context }: LoaderArgs) {
+	const layout = await context.storefront.query<{ shop: Shop }>(LAYOUT_QUERY);
+	return { layout };
 }
 
 export default function App() {
 	const data = useLoaderData<typeof loader>();
 
-	const {name} = data.layout.shop;
+	const { name } = data.layout.shop;
+
+	console.log(name);
 
 	return (
 		<html lang="en">

diff --git a/apps/cbt-hydrogen/package.json b/apps/cbt-hydrogen/package.json
@@ -7,11 +7,10 @@
 		"dev": "shopify hydrogen dev",
 		"build": "shopify hydrogen build",
 		"preview": "npm run build && shopify hydrogen preview",
-		"clean": "rimraf dist .turbo node_modules",
+		"clean": "rimraf dist .turbo node_modules .cache",
 		"typecheck": "tsc --noEmit",
-		"lint": "eslint \"app/**/*.ts*\""
+		"lint": "eslint ."
 	},
-	"prettier": "@shopify/prettier-config",
 	"dependencies": {
 		"@code-internet-applications/react": "workspace:*",
 		"@remix-run/react": "1.15.0",
@@ -24,15 +23,10 @@
 		"isbot": "^3.6.10"
 	},
 	"devDependencies": {
+		"@code-internet-applications/eslint-config-code": "workspace:^",
 		"@code-internet-applications/tsconfig": "workspace:*",
 		"@remix-run/dev": "1.15.0",
-		"@shopify/oxygen-workers-types": "^3.17.2",
-		"@shopify/prettier-config": "^1.1.2",
-		"@types/eslint": "^8.40.0",
-		"@types/react": "^18.2.8",
-		"@types/react-dom": "^18.2.4",
-		"eslint": "^8.42.0",
-		"eslint-plugin-hydrogen": "0.12.2"
+		"@shopify/oxygen-workers-types": "^3.17.2"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",

diff --git a/apps/cbt-hydrogen/remix.env.d.ts b/apps/cbt-hydrogen/remix.env.d.ts
@@ -2,14 +2,14 @@
 /// <reference types="@shopify/remix-oxygen" />
 /// <reference types="@shopify/oxygen-workers-types" />
 
-import type {Storefront} from '@shopify/hydrogen';
-import type {HydrogenSession} from '../server';
+import type { Storefront } from '@shopify/hydrogen';
+import type { HydrogenSession } from '../server';
 
 declare global {
 	/**
 	 * A global `process` object is only available during build to access NODE_ENV.
 	 */
-	const process: {env: {NODE_ENV: 'production' | 'development'} & Env};
+	const process: { env: { NODE_ENV: 'production' | 'development' } & Env };
 
 	/**
 	 * Declare expected Env parameter in fetch handler.

diff --git a/apps/cbt-hydrogen/server-dev.ts b/apps/cbt-hydrogen/server-dev.ts
@@ -1,11 +1,11 @@
 // Virtual entry point for the app
 import * as remixBuild from '@remix-run/dev/server-build';
-import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen';
+import { createStorefrontClient, storefrontRedirect } from '@shopify/hydrogen';
 import {
 	createRequestHandler,
 	getStorefrontHeaders,
 } from '@shopify/remix-oxygen';
-import {HydrogenSession} from '~/lib/session.server';
+import { HydrogenSession } from '~/lib/session.server';
 
 /**
  * Export a fetch handler in module format.
@@ -24,7 +24,7 @@ export default {
 				throw new Error('SESSION_SECRET environment variable is not set');
 			}
 
-			const waitUntil = (p: Promise<any>) => executionContext.waitUntil(p);
+			const waitUntil = (p: Promise<unknown>) => executionContext.waitUntil(p);
 			const [cache, session] = await Promise.all([
 				caches.open('hydrogen'),
 				HydrogenSession.init(request, [env.SESSION_SECRET]),
@@ -33,10 +33,10 @@ export default {
 			/**
 			 * Create Hydrogen's Storefront client.
 			 */
-			const {storefront} = createStorefrontClient({
+			const { storefront } = createStorefrontClient({
 				cache,
 				waitUntil,
-				i18n: {language: 'EN', country: 'US'},
+				i18n: { language: 'EN', country: 'US' },
 				publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
 				privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
 				storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
@@ -52,7 +52,7 @@ export default {
 			const handleRequest = createRequestHandler({
 				build: remixBuild,
 				mode: process.env.NODE_ENV,
-				getLoadContext: () => ({session, storefront, env}),
+				getLoadContext: () => ({ session, storefront, env }),
 			});
 
 			const response = await handleRequest(request);
@@ -63,14 +63,14 @@ export default {
 				 * If the redirect doesn't exist, then `storefrontRedirect`
 				 * will pass through the 404 response.
 				 */
-				return storefrontRedirect({request, response, storefront});
+				return storefrontRedirect({ request, response, storefront });
 			}
 
 			return response;
 		} catch (error) {
 			// eslint-disable-next-line no-console
 			console.error(error);
-			return new Response('An unexpected error occurred', {status: 500});
+			return new Response('An unexpected error occurred', { status: 500 });
 		}
 	},
 };
diff --git a/apps/cbt-hydrogen/server.ts b/apps/cbt-hydrogen/server.ts
@@ -1,9 +1,9 @@
 // Virtual entry point for the app
 import * as remixBuild from '@remix-run/dev/server-build';
-import {createRequestHandler} from '@remix-run/server-runtime';
-import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen';
-import {getStorefrontHeaders} from '@shopify/remix-oxygen';
-import {HydrogenSession} from '~/lib/session.server';
+import { createRequestHandler } from '@remix-run/server-runtime';
+import { createStorefrontClient, storefrontRedirect } from '@shopify/hydrogen';
+import { ServerBuild, getStorefrontHeaders } from '@shopify/remix-oxygen';
+import { HydrogenSession } from '~/lib/session.server';
 
 /**
  * Export a fetch handler in module format.
@@ -46,9 +46,9 @@ export default async function (request: Request): Promise<Response> {
 		/**
 		 * Create Hydrogen's Storefront client.
 		 */
-		const {storefront} = createStorefrontClient({
+		const { storefront } = createStorefrontClient({
 			buyerIp: request.headers.get('x-forwarded-for') ?? undefined,
-			i18n: {language: 'EN', country: 'US'},
+			i18n: { language: 'EN', country: 'US' },
 			publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
 			privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
 			storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
@@ -58,7 +58,7 @@ export default async function (request: Request): Promise<Response> {
 		});
 
 		const handleRequest = createRequestHandler(
-			remixBuild as any,
+			remixBuild as ServerBuild,
 			process.env.NODE_ENV,
 		);
 
@@ -75,13 +75,13 @@ export default async function (request: Request): Promise<Response> {
 			 * If the redirect doesn't exist, then `storefrontRedirect`
 			 * will pass through the 404 response.
 			 */
-			return storefrontRedirect({request, response, storefront});
+			return storefrontRedirect({ request, response, storefront });
 		}
 
 		return response;
 	} catch (error) {
 		// eslint-disable-next-line no-console
 		console.error(error);
-		return new Response('An unexpected error occurred', {status: 500});
+		return new Response('An unexpected error occurred', { status: 500 });
 	}
 }
diff --git a/apps/cbt-hydrogen/tailwind.config.ts b/apps/cbt-hydrogen/tailwind.config.ts
@@ -1,5 +1,5 @@
-import type {Config} from 'tailwindcss';
-import {tailwindConfig} from '../../packages/config/tailwind-config/tailwind.config';
+import type { Config } from 'tailwindcss';
+import { tailwindConfig } from '../../packages/config/tailwind-config/tailwind.config';
 
 export default {
 	presets: [tailwindConfig],