Update all dependencies to latest (#10)

Author: chaance

.env.example

@@ -1,5 +1,7 @@
+# openssl rand -base64 32
+WORKOS_COOKIE_PASSWORD="your-secure-cookie-password"
+
 # Available in your WorkOS dashboard
-WORKOS_CLIENT_ID=
-WORKOS_API_KEY=
-WORKOS_REDIRECT_URI=
-WORKOS_COOKIE_PASSWORD=
+WORKOS_CLIENT_ID="..."
+WORKOS_API_KEY="..."
+WORKOS_REDIRECT_URI="http://localhost:5173/callback"

.eslintrc.cjs

@@ -5,3 +5,4 @@ node_modules
 /public/build
 .env
 .react-router/
+.DS_Store

.gitignore

@@ -0,0 +1,9 @@
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+
+node_modules
+/.cache
+/build
+/public/build
+.react-router/

.prettierignore

@@ -19,7 +19,7 @@ Rename the `.env.example` file to `.env` and supply your Client ID and API key a
 ```sh
 WORKOS_CLIENT_ID=client_... # retrieved from the WorkOS dashboard
 WORKOS_API_KEY=sk_test_... # retrieved from the WorkOS dashboard
-WORKOS_REDIRECT_URI=http://localhost:3000/callback # configured in the WorkOS dashboard
+WORKOS_REDIRECT_URI=http://localhost:5173/callback # configured in the WorkOS dashboard
 WORKOS_COOKIE_PASSWORD=<your password> # generate a secure password here
 ```
 
@@ -35,7 +35,7 @@ Install the dependencies
 npm install
 ```
 
-Run the following command and navigate to [http://localhost:3000](http://localhost:3000).
+Run the following command and navigate to [http://localhost:5173](http://localhost:5173).
 
 ```bash
 npm run dev

README.md

@@ -1,24 +1,23 @@
 // Import the base CSS styles for the radix-ui components.
 import '@radix-ui/themes/styles.css';
 import { Theme, Card, Container, Flex, Button, Box } from '@radix-ui/themes';
-
-import type { ActionFunctionArgs, LinksFunction, LoaderFunctionArgs } from 'react-router';
 import { Links, Link, Meta, Outlet, Scripts, ScrollRestoration, useRouteLoaderData } from 'react-router';
 
 import Footer from './components/footer';
 import SignInButton from './components/sign-in-button';
 
 import { signOut, authkitLoader } from '@workos-inc/authkit-react-router';
+import type { Route } from './+types/root';
 
-export const links: LinksFunction = () => [];
+export const links: Route.LinksFunction = () => [];
 
-export const loader = (args: LoaderFunctionArgs) => authkitLoader(args, { debug: true });
+export const loader = (args: Route.LoaderArgs) => authkitLoader(args, { debug: true });
 
 export function useRootLoaderData() {
   return useRouteLoaderData<typeof loader>('root');
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
   // Called when the form in SignInButton is submitted
   return await signOut(request);
 }

app/root.tsx

@@ -1,11 +1,11 @@
-import type { ActionFunctionArgs, MetaFunction } from 'react-router';
 import { Button, Flex, Heading, Text } from '@radix-ui/themes';
 import { Link } from 'react-router';
 import SignInButton from '~/components/sign-in-button';
 import { useRootLoaderData } from '~/root';
 import { signOut } from '@workos-inc/authkit-react-router';
+import type { Route } from './+types/_index';
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
   return [
     { title: 'Example AuthKit Authenticated App' },
     {
@@ -15,7 +15,7 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
   // Called when the form in SignInButton is submitted
   return await signOut(request);
 }

app/routes/_index.tsx

@@ -2,9 +2,9 @@ import { Text, Heading, TextField, Flex, Box } from '@radix-ui/themes';
 
 import { useLoaderData } from 'react-router';
 import { authkitLoader } from '@workos-inc/authkit-react-router';
-import type { LoaderFunctionArgs } from 'react-router';
+import type { Route } from './+types/account';
 
-export const loader = (args: LoaderFunctionArgs) => authkitLoader(args, { ensureSignedIn: true });
+export const loader = (args: Route.LoaderArgs) => authkitLoader(args, { ensureSignedIn: true });
 
 export default function AccountPage() {
   const { user, role } = useLoaderData<typeof loader>();

app/routes/account.tsx

@@ -0,0 +1,35 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+// @ts-check
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{js,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      'jsx-a11y': jsxA11y,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      // TODO: Recommended for Vite apps. Enable and fix surfaced issues.
+      //   'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    },
+  },
+);