Merge branch 'main' of github.com:pheralb/toast

Author: pheralb

library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pheralb/toast",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "author": "@pheralb_",
   "keywords": [
     "react",

library/src/components/toast-functions.ts

@@ -1,20 +1,33 @@
-import { ToastPropsWithVariant } from '../types/toast.types';
+import type { ToastPropsWithVariant } from '../types/toast.types';
 import { openToast } from './toaster';
 
-export const toast = {
+interface ToastFunctions {
+  default: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
+  success: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
+  error: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
+  warning: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
+  info: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
+}
+
+export const toast: ToastFunctions = {
   default: (data: ToastPropsWithVariant) => {
     openToast({ ...data });
+    return data;
   },
   success: (data: ToastPropsWithVariant) => {
     openToast({ ...data, variant: 'success' });
+    return data;
   },
   error: (data: ToastPropsWithVariant) => {
     openToast({ ...data, variant: 'error' });
+    return data;
   },
   warning: (data: ToastPropsWithVariant) => {
     openToast({ ...data, variant: 'warning' });
+    return data;
   },
   info: (data: ToastPropsWithVariant) => {
     openToast({ ...data, variant: 'info' });
+    return data;
   },
 };

library/src/components/toaster.tsx

@@ -86,4 +86,6 @@ export const Toaster = ({
   );
 };
 
-export const openToast = (data: ToastPropsWithVariant) => openToastGlobal(data);
+export const openToast = (data: ToastPropsWithVariant): void => {
+  openToastGlobal(data);
+};

pnpm-lock.yaml

@@ -14,7 +14,7 @@ const SidebarFooter = ({ npmVersion }: iSidebar) => {
     <div className="w-full border-b-2 border-dashed border-neutral-200 py-2 text-sm dark:border-neutral-800">
       <div className="font-medium">
         <a
-          href={`https://github.com/pheralb/toast/releases/tag/${npmVersion}`}
+          href={`https://github.com/pheralb/toast/releases/tag/v${npmVersion}`}
           target="_blank"
           rel="noreferrer"
           className="group flex items-center py-1 text-neutral-600 transition-colors duration-100 hover:text-black dark:text-neutral-400 dark:decoration-neutral-700 dark:hover:text-white"

website/app/components/sidebar/sidebarFooter.tsx

@@ -1,19 +1,17 @@
-import type {
-  LinksFunction,
-  LoaderFunctionArgs,
-  MetaFunction,
+import {
+  type LinksFunction,
+  type LoaderFunctionArgs,
+  type MetaFunction,
 } from '@vercel/remix';
+import type { ReactNode } from 'react';
 
 import {
-  isRouteErrorResponse,
-  Link,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
   useLoaderData,
-  useRouteError,
 } from '@remix-run/react';
 import { getLatestVersion } from 'fast-npm-meta';
 import { eslogan, siteTitle, siteUrl, siteUrlImages } from './globals';
@@ -31,21 +29,18 @@ import { proseClasses } from './ui/prose';
 import { Toaster } from '@pheralb/toast';
 import {
   PreventFlashOnWrongTheme,
+  Theme,
   ThemeProvider,
   useTheme,
 } from 'remix-themes';
-import { themeSessionResolver } from './sessions.server';
 
 // MDX Components:
 import { MDXProvider } from '@mdx-js/react';
 import { mdxComponents } from './components/mdx';
 
 // Stores:
 import { useDocsStore } from './store';
-
-// Other:
-import { Logo } from './components/icons';
-import { buttonVariants } from './ui/button';
+import { themeSessionResolver } from './sessions.server';
 
 // Links:
 export const links: LinksFunction = () => [
@@ -97,6 +92,7 @@ export const meta: MetaFunction = ({ matches }) => {
   ];
 };
 
+// Get theme from loader:
 export async function loader({ request }: LoaderFunctionArgs) {
   const { getTheme } = await themeSessionResolver(request);
   const metadata = await getLatestVersion('@pheralb/toast');
@@ -106,21 +102,18 @@ export async function loader({ request }: LoaderFunctionArgs) {
   };
 }
 
-export default function AppWithProviders() {
-  const data = useLoaderData<typeof loader>();
-  return (
-    <ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme">
-      <App />
-    </ThemeProvider>
-  );
-}
-
-function App() {
+// App global layout:
+function Layout({ children }: { children: ReactNode }) {
   const data = useLoaderData<typeof loader>();
   const [theme] = useTheme();
   const { toastPosition, toastTheme } = useDocsStore();
   return (
-    <html lang="en" className={cn(theme, 'scroll-smooth focus:scroll-auto')}>
+    <html
+      lang="en"
+      data-theme={theme}
+      className={cn(theme ?? '', 'scroll-smooth focus:scroll-auto')}
+      style={{ colorScheme: theme ?? '' }}
+    >
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -149,10 +142,11 @@ function App() {
         <meta name="twitter:title" content={siteTitle} />
         {/* App Meta Function */}
         <Meta />
-        <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
+        <PreventFlashOnWrongTheme ssrTheme={Boolean(data?.theme)} />
         <Links />
       </head>
       <body
+        suppressHydrationWarning
         className={cn(
           'font-sans antialiased',
           'bg-neutral-50 dark:bg-neutral-900',
@@ -171,7 +165,7 @@ function App() {
                 proseClasses,
               )}
             >
-              <Outlet />
+              {children}
             </article>
           </MDXProvider>
         </main>
@@ -187,35 +181,39 @@ function App() {
   );
 }
 
+// App with providers:
+function AppWithProviders({ children }: { children: ReactNode }) {
+  const data = useLoaderData<typeof loader>();
+  return (
+    <ThemeProvider
+      specifiedTheme={data?.theme as Theme}
+      themeAction="/action/set-theme"
+    >
+      <Layout>{children}</Layout>
+    </ThemeProvider>
+  );
+}
+
+export default function App() {
+  return (
+    <AppWithProviders>
+      <Outlet />
+    </AppWithProviders>
+  );
+}
+
 export function ErrorBoundary() {
-  const error = useRouteError();
   return (
-    <html lang="en" className="dark">
-      <head>
-        <title>Oops! - @pheralb/toast</title>
-        <Meta />
-        <Links />
-      </head>
-      <body className="flex h-screen flex-col items-center justify-center space-y-4 bg-neutral-900 font-sans text-white">
-        <Logo className="h-12 w-12" />
-        <h1 className="text-2xl font-medium tracking-tight">
-          {isRouteErrorResponse(error)
-            ? `${error.status} ${error.statusText}`
-            : error instanceof Error
-              ? error.message
-              : 'Unknown Error'}
-        </h1>
-        <Link
-          to="/"
-          className={buttonVariants({
-            variant: 'outline',
-          })}
-        >
-          Go back home
-        </Link>
-        <p className="font-mono text-sm">@pheralb/toast</p>
-        <Scripts />
-      </body>
-    </html>
+    <AppWithProviders>
+      <h2>Error</h2>
+    </AppWithProviders>
+  );
+}
+
+export function HydrateFallback() {
+  return (
+    <AppWithProviders>
+      <h1>Loading...</h1>
+    </AppWithProviders>
   );
 }

website/app/root.tsx

@@ -1,4 +1,5 @@
+import { unstable_defineAction as defineAction } from '@vercel/remix';
 import { createThemeAction } from 'remix-themes';
 import { themeSessionResolver } from '@/sessions.server';
 
-export const action = createThemeAction(themeSessionResolver);
+export const action = defineAction(createThemeAction(themeSessionResolver));