fix: reconfigure prettier and login page styles

.eslintrc.cjs

@@ -131,4 +131,4 @@ module.exports = {
       },
     },
   ],
-};
+}

.prettierrc

@@ -6,7 +6,7 @@
     "printWidth": 100,
     "quoteProps": "consistent",
     "singleQuote": true,
-    "semi": true,
+    "semi": false,
     "tabWidth": 2,
     "trailingComma": "es5",
     "useTabs": false,

.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/react-vite';
+import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -19,6 +19,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
-};
+}
 
-export default config;
+export default config

.storybook/preview.ts

@@ -1,6 +1,6 @@
-import type { Preview } from '@storybook/react';
-import { themes } from '@storybook/theming';
-import '../app/styles.css';
+import type { Preview } from '@storybook/react'
+import { themes } from '@storybook/theming'
+import '../app/styles.css'
 
 const preview: Preview = {
   parameters: {
@@ -17,6 +17,6 @@ const preview: Preview = {
       theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? themes.dark : themes.light,
     },
   },
-};
+}
 
-export default preview;
+export default preview

app/components/Button.tsx

@@ -1,5 +1,5 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-import { tv, type VariantProps } from 'tailwind-variants';
+import { ButtonHTMLAttributes, forwardRef } from 'react'
+import { tv, type VariantProps } from 'tailwind-variants'
 
 const button = tv({
   defaultVariants: { variant: 'primary', size: 'md' },
@@ -19,21 +19,21 @@ const button = tv({
       lg: 'px-8 py-4 text-base',
     },
   },
-});
+})
 
 interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof button> {}
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const { type = 'button', variant, size, children, ...rest } = props;
+  const { type = 'button', variant, size, children, ...rest } = props
   return (
     <button ref={ref} type={type} className={button({ size, variant })} {...rest}>
       {children}
     </button>
-  );
-});
+  )
+})
 
-Button.displayName = 'Button';
+Button.displayName = 'Button'
 
-export default Button;
+export default Button

app/components/errors.tsx

@@ -1,7 +1,7 @@
-import { ErrorResponse } from '@remix-run/node';
-import { Link } from '@remix-run/react';
+import { ErrorResponse } from '@remix-run/node'
+import { Link } from '@remix-run/react'
 
-import { cn } from '@/utils/ui-helper';
+import { cn } from '@/utils/ui-helper'
 
 export function NotFound({ status, statusText }: Omit<ErrorResponse, 'data'>) {
   return (
@@ -32,7 +32,7 @@ export function NotFound({ status, statusText }: Omit<ErrorResponse, 'data'>) {
         </Link>
       </div>
     </div>
-  );
+  )
 }
 
 export function InternalError({ message }: { message: string }) {
@@ -64,5 +64,5 @@ export function InternalError({ message }: { message: string }) {
         </Link>
       </div>
     </div>
-  );
+  )
 }

app/root.tsx

@@ -1,10 +1,10 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react'
 import type {
   LinksFunction,
   LoaderFunctionArgs,
   MetaDescriptor,
   MetaFunction,
-} from '@remix-run/node';
+} from '@remix-run/node'
 import {
   isRouteErrorResponse,
   json,
@@ -14,29 +14,29 @@ import {
   Scripts,
   ScrollRestoration,
   useRouteError,
-} from '@remix-run/react';
+} from '@remix-run/react'
 
-import { InternalError, NotFound } from '@/components/errors';
-import { cn } from '@/utils/ui-helper';
+import { InternalError, NotFound } from '@/components/errors'
+import { cn } from '@/utils/ui-helper'
 
-import styles from './styles.css?url';
+import styles from './styles.css?url'
 
-export const links: LinksFunction = () => [{ rel: 'stylesheet', href: styles }];
+export const links: LinksFunction = () => [{ rel: 'stylesheet', href: styles }]
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   return json({
     // Dynamic Canonical URL: https://sergiodxa.com/tutorials/add-dynamic-canonical-url-to-remix-routes
     meta: [{ tagName: 'link', rel: 'canonical', href: request.url }] satisfies MetaDescriptor[],
-  });
-};
+  })
+}
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
     { title: 'Remix Start' },
     { name: 'description', content: 'Welcome to Remix!' },
     ...(data?.meta ?? []),
-  ];
-};
+  ]
+}
 
 export function Layout({ children }: PropsWithChildren) {
   return (
@@ -53,16 +53,16 @@ export function Layout({ children }: PropsWithChildren) {
         <Scripts />
       </body>
     </html>
-  );
+  )
 }
 
 export function ErrorBoundary() {
-  const error = useRouteError();
+  const error = useRouteError()
   const pageTitle = isRouteErrorResponse(error)
     ? `${error.status} ${error.statusText}`
     : error instanceof Error
       ? error.message
-      : 'Something wrong';
+      : 'Something wrong'
 
   return (
     <html lang='en'>
@@ -84,9 +84,9 @@ export function ErrorBoundary() {
         <Scripts />
       </body>
     </html>
-  );
+  )
 }
 
 export default function App() {
-  return <Outlet />;
+  return <Outlet />
 }

app/routes/_auth+/__social.tsx

@@ -53,5 +53,5 @@ export function SocialLogin({ label }: { label: string }) {
         </button>
       </div>
     </>
-  );
+  )
 }

app/routes/_auth+/_layout.tsx

@@ -1,9 +1,9 @@
-import { Outlet } from '@remix-run/react';
+import { Outlet } from '@remix-run/react'
 
 export default function AuthLayout() {
   return (
     <div className='flex h-full min-h-screen items-center bg-gray-50 dark:bg-gray-950'>
       <Outlet />
     </div>
-  );
+  )
 }

app/routes/_auth+/login.tsx

@@ -1,13 +1,15 @@
-import type { MetaFunction } from '@remix-run/node';
-import { Link } from '@remix-run/react';
+import type { MetaFunction } from '@remix-run/node'
+import { Link } from '@remix-run/react'
+import { AlertCircle } from 'lucide-react'
 
-import Button from '@/components/Button';
+import Button from '@/components/Button'
+import { cn } from '@/utils/ui-helper'
 
-import { SocialLogin } from './__social';
+import { SocialLogin } from './__social'
 
 export const meta: MetaFunction = () => {
-  return [{ title: 'Sign in - Remix Start' }];
-};
+  return [{ title: 'Sign in - Remix Start' }]
+}
 
 export default function SignInPage() {
   return (
@@ -19,8 +21,8 @@ export default function SignInPage() {
             <p className='mt-3 text-sm text-gray-600 dark:text-gray-300'>
               Don&apos;t have an account yet?{' '}
               <Link
-                to='#'
-                className='font-medium text-primary-600 decoration-2 hover:underline dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600'
+                to='/register'
+                className='font-medium text-primary-600 hover:underline focus:outline-none dark:text-primary-500'
               >
                 Sign up here
               </Link>
@@ -47,16 +49,7 @@ export default function SignInPage() {
                         required
                       />
                       <div className='pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3'>
-                        <svg
-                          className='size-5 text-red-500'
-                          width={16}
-                          height={16}
-                          fill='currentColor'
-                          viewBox='0 0 16 16'
-                          aria-hidden='true'
-                        >
-                          <path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z' />
-                        </svg>
+                        <AlertCircle className={cn('hidden', 'size-5 text-red-500')} />
                       </div>
                     </div>
                   </div>
@@ -79,16 +72,7 @@ export default function SignInPage() {
                         required
                       />
                       <div className='pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3'>
-                        <svg
-                          className='size-5 text-red-500'
-                          width={16}
-                          height={16}
-                          fill='currentColor'
-                          viewBox='0 0 16 16'
-                          aria-hidden='true'
-                        >
-                          <path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z' />
-                        </svg>
+                        <AlertCircle className={cn('hidden', 'size-5 text-red-500')} />
                       </div>
                     </div>
                   </div>
@@ -138,6 +122,11 @@ export default function SignInPage() {
           </div>
         </div>
       </div>
+      <div className='mt-6 text-center'>
+        <Link to='/' className='text-sm hover:underline dark:text-white'>
+          Back to homepage
+        </Link>
+      </div>
     </main>
-  );
+  )
 }

app/routes/_index.tsx

@@ -1,11 +1,11 @@
-import type { MetaFunction } from '@remix-run/node';
-import { Link } from '@remix-run/react';
+import type { MetaFunction } from '@remix-run/node'
+import { Link } from '@remix-run/react'
 
-import Button from '@/components/Button';
+import Button from '@/components/Button'
 
 export const meta: MetaFunction = () => {
-  return [{ title: 'Remix Start' }, { name: 'description', content: 'Welcome to Remix!' }];
-};
+  return [{ title: 'Remix Start' }, { name: 'description', content: 'Welcome to Remix!' }]
+}
 
 export default function IndexPage() {
   return (
@@ -34,5 +34,5 @@ export default function IndexPage() {
         </Button>
       </div>
     </div>
-  );
+  )
 }

app/routes/health.tsx

@@ -1,21 +1,21 @@
-import type { LoaderFunctionArgs } from '@remix-run/node';
+import type { LoaderFunctionArgs } from '@remix-run/node'
 
 export async function loader({ request }: LoaderFunctionArgs) {
-  const host = request.headers.get('X-Forwarded-Host') ?? request.headers.get('host');
+  const host = request.headers.get('X-Forwarded-Host') ?? request.headers.get('host')
 
   try {
-    const url = new URL('/', `http://${host}`);
+    const url = new URL('/', `http://${host}`)
     // if we can connect to the database and make a simple query
     // and make a HEAD request to ourselves, then we're good.
     await Promise.all([
       // TODO: add database check here
       fetch(url.toString(), { method: 'HEAD' }).then((r) => {
-        if (!r.ok) return Promise.reject(r);
+        if (!r.ok) return Promise.reject(r)
       }),
-    ]);
-    return new Response('OK');
+    ])
+    return new Response('OK')
   } catch (error: unknown) {
-    console.error('healthcheck ❌', { error });
-    return new Response('ERROR', { status: 500 });
+    console.error('healthcheck ❌', { error })
+    return new Response('ERROR', { status: 500 })
   }
 }

app/utils/ui-helper.ts

@@ -1,6 +1,6 @@
-import { ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }