Skip to content

Commit 15a9bf4

Browse files
pheralbpheralb
authored
Merge pull request #3 from pheralb/next
✨ Refactor layout for Remix docs
2 parents 5810685 + 767102d commit 15a9bf4

File tree

6 files changed

+73
-69
lines changed

6 files changed

+73
-69
lines changed

‎library/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@pheralb/toast",
3-
"version": "0.2.0",
3+
"version": "0.2.2",
44
"author": "@pheralb_",
55
"keywords": [
66
"react",

‎library/src/components/toast-functions.ts

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
1-
import { ToastPropsWithVariant } from '../types/toast.types';
1+
import type { ToastPropsWithVariant } from '../types/toast.types';
22
import { openToast } from './toaster';
33

4-
export const toast = {
4+
interface ToastFunctions {
5+
default: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
6+
success: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
7+
error: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
8+
warning: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
9+
info: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
10+
}
11+
12+
export const toast: ToastFunctions = {
513
default: (data: ToastPropsWithVariant) => {
614
openToast({ ...data });
15+
return data;
716
},
817
success: (data: ToastPropsWithVariant) => {
918
openToast({ ...data, variant: 'success' });
19+
return data;
1020
},
1121
error: (data: ToastPropsWithVariant) => {
1222
openToast({ ...data, variant: 'error' });
23+
return data;
1324
},
1425
warning: (data: ToastPropsWithVariant) => {
1526
openToast({ ...data, variant: 'warning' });
27+
return data;
1628
},
1729
info: (data: ToastPropsWithVariant) => {
1830
openToast({ ...data, variant: 'info' });
31+
return data;
1932
},
2033
};

‎library/src/components/toaster.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,6 @@ export const Toaster = ({
8686
);
8787
};
8888

89-
export const openToast = (data: ToastPropsWithVariant) => openToastGlobal(data);
89+
export const openToast = (data: ToastPropsWithVariant): void => {
90+
openToastGlobal(data);
91+
};

‎pnpm-lock.yaml

+1-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/app/root.tsx

+51-53
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
import type {
2-
LinksFunction,
3-
LoaderFunctionArgs,
4-
MetaFunction,
1+
import {
2+
type LinksFunction,
3+
type LoaderFunctionArgs,
4+
type MetaFunction,
55
} from '@vercel/remix';
6+
import type { ReactNode } from 'react';
67

78
import {
8-
isRouteErrorResponse,
9-
Link,
109
Links,
1110
Meta,
1211
Outlet,
1312
Scripts,
1413
ScrollRestoration,
1514
useLoaderData,
16-
useRouteError,
1715
} from '@remix-run/react';
1816
import { getLatestVersion } from 'fast-npm-meta';
1917
import { eslogan, siteTitle, siteUrl, siteUrlImages } from './globals';
@@ -31,21 +29,18 @@ import { proseClasses } from './ui/prose';
3129
import { Toaster } from '@pheralb/toast';
3230
import {
3331
PreventFlashOnWrongTheme,
32+
Theme,
3433
ThemeProvider,
3534
useTheme,
3635
} from 'remix-themes';
37-
import { themeSessionResolver } from './sessions.server';
3836

3937
// MDX Components:
4038
import { MDXProvider } from '@mdx-js/react';
4139
import { mdxComponents } from './components/mdx';
4240

4341
// Stores:
4442
import { useDocsStore } from './store';
45-
46-
// Other:
47-
import { Logo } from './components/icons';
48-
import { buttonVariants } from './ui/button';
43+
import { themeSessionResolver } from './sessions.server';
4944

5045
// Links:
5146
export const links: LinksFunction = () => [
@@ -97,6 +92,7 @@ export const meta: MetaFunction = ({ matches }) => {
9792
];
9893
};
9994

95+
// Get theme from loader:
10096
export async function loader({ request }: LoaderFunctionArgs) {
10197
const { getTheme } = await themeSessionResolver(request);
10298
const metadata = await getLatestVersion('@pheralb/toast');
@@ -106,21 +102,18 @@ export async function loader({ request }: LoaderFunctionArgs) {
106102
};
107103
}
108104

109-
export default function AppWithProviders() {
110-
const data = useLoaderData<typeof loader>();
111-
return (
112-
<ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme">
113-
<App />
114-
</ThemeProvider>
115-
);
116-
}
117-
118-
function App() {
105+
// App global layout:
106+
function Layout({ children }: { children: ReactNode }) {
119107
const data = useLoaderData<typeof loader>();
120108
const [theme] = useTheme();
121109
const { toastPosition, toastTheme } = useDocsStore();
122110
return (
123-
<html lang="en" className={cn(theme, 'scroll-smooth focus:scroll-auto')}>
111+
<html
112+
lang="en"
113+
data-theme={theme}
114+
className={cn(theme ?? '', 'scroll-smooth focus:scroll-auto')}
115+
style={{ colorScheme: theme ?? '' }}
116+
>
124117
<head>
125118
<meta charSet="utf-8" />
126119
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -149,10 +142,11 @@ function App() {
149142
<meta name="twitter:title" content={siteTitle} />
150143
{/* App Meta Function */}
151144
<Meta />
152-
<PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
145+
<PreventFlashOnWrongTheme ssrTheme={Boolean(data?.theme)} />
153146
<Links />
154147
</head>
155148
<body
149+
suppressHydrationWarning
156150
className={cn(
157151
'font-sans antialiased',
158152
'bg-neutral-50 dark:bg-neutral-900',
@@ -171,7 +165,7 @@ function App() {
171165
proseClasses,
172166
)}
173167
>
174-
<Outlet />
168+
{children}
175169
</article>
176170
</MDXProvider>
177171
</main>
@@ -187,35 +181,39 @@ function App() {
187181
);
188182
}
189183

184+
// App with providers:
185+
function AppWithProviders({ children }: { children: ReactNode }) {
186+
const data = useLoaderData<typeof loader>();
187+
return (
188+
<ThemeProvider
189+
specifiedTheme={data?.theme as Theme}
190+
themeAction="/action/set-theme"
191+
>
192+
<Layout>{children}</Layout>
193+
</ThemeProvider>
194+
);
195+
}
196+
197+
export default function App() {
198+
return (
199+
<AppWithProviders>
200+
<Outlet />
201+
</AppWithProviders>
202+
);
203+
}
204+
190205
export function ErrorBoundary() {
191-
const error = useRouteError();
192206
return (
193-
<html lang="en" className="dark">
194-
<head>
195-
<title>Oops! - @pheralb/toast</title>
196-
<Meta />
197-
<Links />
198-
</head>
199-
<body className="flex h-screen flex-col items-center justify-center space-y-4 bg-neutral-900 font-sans text-white">
200-
<Logo className="h-12 w-12" />
201-
<h1 className="text-2xl font-medium tracking-tight">
202-
{isRouteErrorResponse(error)
203-
? `${error.status} ${error.statusText}`
204-
: error instanceof Error
205-
? error.message
206-
: 'Unknown Error'}
207-
</h1>
208-
<Link
209-
to="/"
210-
className={buttonVariants({
211-
variant: 'outline',
212-
})}
213-
>
214-
Go back home
215-
</Link>
216-
<p className="font-mono text-sm">@pheralb/toast</p>
217-
<Scripts />
218-
</body>
219-
</html>
207+
<AppWithProviders>
208+
<h2>Error</h2>
209+
</AppWithProviders>
210+
);
211+
}
212+
213+
export function HydrateFallback() {
214+
return (
215+
<AppWithProviders>
216+
<h1>Loading...</h1>
217+
</AppWithProviders>
220218
);
221219
}

‎website/app/routes/action.set-theme.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1+
import { unstable_defineAction as defineAction } from '@vercel/remix';
12
import { createThemeAction } from 'remix-themes';
23
import { themeSessionResolver } from '@/sessions.server';
34

4-
export const action = createThemeAction(themeSessionResolver);
5+
export const action = defineAction(createThemeAction(themeSessionResolver));

0 commit comments

Comments
 (0)