feature/replace (#635)

* chore: add biome * chore: biome init * chore: format * chore: update fmt script * chore: remove eslint * chore: pnpm i * chore: set name * chore: vcs integration * chore: add editorconfig * chore: remove tailwind * chore: pnpm i * chore: remove tailwind * chore: setup panda-css * feat: configure entry css * feat: replace
anoriqq · Oct 15, 2024 · 75ef66b · 75ef66b
1 parent ffb092c
commit 75ef66b
Show file tree

Hide file tree

Showing 19 changed files with 1,377 additions and 2,428 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,4 @@
+root = true
+
+[*]
+indent_style = tab
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,7 @@ node_modules
 /build
 /public/build
 .env
+
+## Panda
+styled-system
+styled-system-studio
diff --git a/app/components/body.tsx b/app/components/body.tsx
@@ -0,0 +1,16 @@
+import { css } from "styled-system/css";
+
+export const Body: React.FC<React.PropsWithChildren> = ({ children }) => {
+	const className = css({
+		height: "full",
+		width: "full",
+		margin: "0",
+		lineHeight: "md",
+		color: "text",
+		backgroundColor: "background",
+		fontFamily: "sansserif",
+		fontSmoothing: "antialiased",
+	});
+
+	return <body className={className}>{children}</body>;
+};
diff --git a/app/components/html.tsx b/app/components/html.tsx
@@ -0,0 +1,17 @@
+import { css } from "styled-system/css";
+
+export const Html: React.FC<React.PropsWithChildren> = ({ children }) => {
+	const className = css({
+		height: "full",
+		width: "full",
+		margin: "0",
+		boxSizing: "border-box",
+		lineHeight: "md",
+	});
+
+	return (
+		<html lang="en" className={className}>
+			{children}
+		</html>
+	);
+};
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -1,18 +1,12 @@
-/**
- * By default, Remix will handle hydrating your app on the client for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.client
- */
-
 import { RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
 startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>
-  );
+	hydrateRoot(
+		document,
+		<StrictMode>
+			<RemixBrowser />
+		</StrictMode>,
+	);
 });
diff --git a/app/root.css b/app/root.css
@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,49 +1,60 @@
+import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
+	Links,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
 } from "@remix-run/react";
-import type { LinksFunction } from "@remix-run/node";
+import type { FC, PropsWithChildren } from "react";
+
+import styles from "./root.css?url"
+
+import { Body } from "./components/body";
+import { Html } from "./components/html";
+
+export const meta: MetaFunction = () => [
+	{ title: "Remix" },
+];
 
-import "./tailwind.css";
 
 export const links: LinksFunction = () => [
-  { rel: "preconnect", href: "https://fonts.googleapis.com" },
-  {
-    rel: "preconnect",
-    href: "https://fonts.gstatic.com",
-    crossOrigin: "anonymous",
-  },
-  {
-    rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
-  },
+	{ rel: "preconnect", href: "https://fonts.googleapis.com" },
+	{
+		rel: "preconnect",
+		href: "https://fonts.gstatic.com",
+		crossOrigin: "anonymous",
+	},
+	{
+		rel: "stylesheet",
+		href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+	},
+	{ rel: "stylesheet", href: styles },
 ];
 
-export function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        {children}
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  );
-}
+export const Layout: FC<PropsWithChildren> = ({ children }) => {
+	return (
+		<Html>
+			<head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<Meta />
+				<Links />
+			</head>
+			<Body>
+				{children}
+				<ScrollRestoration />
+				<Scripts />
+			</Body>
+		</Html>
+	);
+};
 
-export default function App() {
-  return <Outlet />;
-}
+const App: FC = () => {
+	return <Outlet />;
+};
+export default App;
 
 export function HydrateFallback() {
-  return <p>Loading...</p>;
+	return <p>Loading...</p>;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@layer reset, base, tokens, recipes, utilities;