add example

Author: kentcdodds

examples/typed-sql/.env

@@ -0,0 +1,3 @@
+SESSION_SECRET="super-duper-secret"
+HONEYPOT_SECRET="very-secret"
+DATABASE_URL="file:./data.db"

examples/typed-sql/.eslintrc.cjs

@@ -0,0 +1,75 @@
+const vitestFiles = ['app/**/__tests__/**/*', 'app/**/*.{spec,test}.*']
+const testFiles = ['**/tests/**', ...vitestFiles]
+const appFiles = ['app/**']
+
+/** @type {import('@types/eslint').Linter.BaseConfig} */
+module.exports = {
+	extends: [
+		'@remix-run/eslint-config',
+		'@remix-run/eslint-config/node',
+		'prettier',
+	],
+	rules: {
+		// playwright requires destructuring in fixtures even if you don't use anything 🤷‍♂️
+		'no-empty-pattern': 'off',
+		'@typescript-eslint/consistent-type-imports': [
+			'warn',
+			{
+				prefer: 'type-imports',
+				disallowTypeAnnotations: true,
+				fixStyle: 'inline-type-imports',
+			},
+		],
+		'import/no-duplicates': ['warn', { 'prefer-inline': true }],
+		'import/consistent-type-specifier-style': ['warn', 'prefer-inline'],
+		'import/order': [
+			'warn',
+			{
+				alphabetize: { order: 'asc', caseInsensitive: true },
+				groups: [
+					'builtin',
+					'external',
+					'internal',
+					'parent',
+					'sibling',
+					'index',
+				],
+			},
+		],
+	},
+	overrides: [
+		{
+			files: appFiles,
+			excludedFiles: testFiles,
+			rules: {
+				'no-restricted-imports': [
+					'error',
+					{
+						patterns: [
+							{
+								group: testFiles,
+								message: 'Do not import test files in app files',
+							},
+						],
+					},
+				],
+			},
+		},
+		{
+			extends: ['@remix-run/eslint-config/jest-testing-library'],
+			files: vitestFiles,
+			rules: {
+				'testing-library/no-await-sync-events': 'off',
+				'jest-dom/prefer-in-document': 'off',
+			},
+			// we're using vitest which has a very similar API to jest
+			// (so the linting plugins work nicely), but it means we have to explicitly
+			// set the jest version.
+			settings: {
+				jest: {
+					version: 28,
+				},
+			},
+		},
+	],
+}

examples/typed-sql/.gitignore

@@ -0,0 +1,33 @@
+node_modules
+.DS_store
+
+/build
+/public/build
+/server-build
+# Normally you'd ignore this file, but for the workshop we'll commit it
+# .env
+tsconfig.tsbuildinfo
+*.ignored.*
+
+# normally you don't commit your database, but we're doing it here for the workshop
+# /prisma/data.db
+/prisma/data.db-journal
+/tests/prisma
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/tests/fixtures/email/
+/coverage
+
+/other/cache.db
+
+# Easy way to create temporary files/folders that won't accidentally be added to git
+*.local.*
+
+# generated files
+# Normally these are ignored, but we're committing it so they don't have to be
+# generated on the fly for the workshop
+# We're not changing these duing the workshop anyway
+# /app/components/ui/icon.svg
+# /app/components/ui/icon.tsx

examples/typed-sql/.prettierignore

@@ -0,0 +1,16 @@
+node_modules
+
+/build
+/public/build
+/server-build
+.env
+tsconfig.tsbuildinfo
+*.ignored.*
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/tests/fixtures/email/*.json
+/coverage
+
+package-lock.json

examples/typed-sql/.prettierrc.cjs

@@ -0,0 +1,35 @@
+module.exports = {
+	arrowParens: 'avoid',
+	bracketSameLine: false,
+	bracketSpacing: true,
+	embeddedLanguageFormatting: 'auto',
+	endOfLine: 'lf',
+	htmlWhitespaceSensitivity: 'css',
+	insertPragma: false,
+	jsxSingleQuote: false,
+	printWidth: 80,
+	proseWrap: 'always',
+	quoteProps: 'as-needed',
+	requirePragma: false,
+	semi: false,
+	singleAttributePerLine: false,
+	singleQuote: true,
+	tabWidth: 2,
+	trailingComma: 'all',
+	useTabs: true,
+	overrides: [
+		{
+			files: ['**/*.json'],
+			options: {
+				useTabs: false,
+			},
+		},
+		{
+			files: ['**/*.mdx'],
+			options: {
+				proseWrap: 'preserve',
+				htmlWhitespaceSensitivity: 'ignore',
+			},
+		},
+	],
+}

examples/typed-sql/README.mdx

@@ -0,0 +1,4 @@
+# Typed SQL
+
+This is an example of using Prisma Client's 5.19.0 `prisma.$queryRawTyped` for
+our search page instead of using zod for type safety.

examples/typed-sql/app/assets/favicon.svg

@@ -0,0 +1,44 @@
+import {
+	isRouteErrorResponse,
+	useParams,
+	useRouteError,
+} from '@remix-run/react'
+import { type ErrorResponse } from '@remix-run/router'
+import { getErrorMessage } from '#app/utils/misc.tsx'
+
+type StatusHandler = (info: {
+	error: ErrorResponse
+	params: Record<string, string | undefined>
+}) => JSX.Element | null
+
+export function GeneralErrorBoundary({
+	defaultStatusHandler = ({ error }) => (
+		<p>
+			{error.status} {error.data}
+		</p>
+	),
+	statusHandlers,
+	unexpectedErrorHandler = error => <p>{getErrorMessage(error)}</p>,
+}: {
+	defaultStatusHandler?: StatusHandler
+	statusHandlers?: Record<number, StatusHandler>
+	unexpectedErrorHandler?: (error: unknown) => JSX.Element | null
+}) {
+	const error = useRouteError()
+	const params = useParams()
+
+	if (typeof document !== 'undefined') {
+		console.error(error)
+	}
+
+	return (
+		<div className="container mx-auto flex h-full w-full items-center justify-center bg-destructive p-20 text-h2 text-destructive-foreground">
+			{isRouteErrorResponse(error)
+				? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
+						error,
+						params,
+					})
+				: unexpectedErrorHandler(error)}
+		</div>
+	)
+}

examples/typed-sql/app/assets/user.png

@@ -0,0 +1,2 @@
+export const floatingToolbarClassName =
+	'absolute bottom-3 left-3 right-3 flex items-center gap-2 rounded-lg bg-muted/80 p-4 pl-5 shadow-xl shadow-accent backdrop-blur-sm md:gap-4 md:pl-7 justify-end'