Merge pull request #416 from rguarascia/add/remix-example

remix example added
nextui-org · Apr 24, 2022 · 8951eee · 8951eee · github-actions · Apr 24, 2022
2 parents 7d60611 + ef6e0cc
commit 8951eee
Show file tree

Hide file tree

Showing 14 changed files with 251 additions and 0 deletions.
diff --git a/examples/create-remix-app/.gitignore b/examples/create-remix-app/.gitignore
@@ -0,0 +1,12 @@
+node_modules
+
+.cache
+.env
+.vercel
+.output
+
+/build/
+/public/build
+/api/index.js
+
+package-lock.json
diff --git a/examples/create-remix-app/README.md b/examples/create-remix-app/README.md
@@ -0,0 +1,34 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Deployment
+
+After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
+
+If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
+
+```sh
+npm i -g vercel
+vercel
+```
+
+It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
+
+## Development
+
+To run your Remix app locally, make sure your project's local dependencies are installed:
+
+```sh
+npm install
+```
+
+Afterwards, start the Remix development server like so:
+
+```sh
+npm run dev
+```
+
+Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
+
+If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.
diff --git a/examples/create-remix-app/api/index.js.map b/examples/create-remix-app/api/index.js.map
diff --git a/examples/create-remix-app/app/entry.client.tsx b/examples/create-remix-app/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { RemixBrowser } from "@remix-run/react";
+import { hydrate } from "react-dom";
+
+hydrate(<RemixBrowser />, document);
diff --git a/examples/create-remix-app/app/entry.server.tsx b/examples/create-remix-app/app/entry.server.tsx
@@ -0,0 +1,26 @@
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+import { CssBaseline } from "@nextui-org/react";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const styles = CssBaseline.flush();
+  let html = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  ).replace(
+    /<\/head>/,
+    `<style id="stitches">${styles.props.dangerouslySetInnerHTML.__html}</style></head>`
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + html, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}
diff --git a/examples/create-remix-app/app/root.tsx b/examples/create-remix-app/app/root.tsx
@@ -0,0 +1,48 @@
+import type { MetaFunction } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+import { createTheme, NextUIProvider } from "@nextui-org/react";
+import useDarkMode from "use-dark-mode";
+
+const lightTheme = createTheme({
+  type: "light",
+  theme: {},
+});
+
+const darkTheme = createTheme({
+  type: "dark",
+  theme: {},
+});
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "Remix with NextUI",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+export default function App() {
+  const darkMode = useDarkMode(false);
+
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <NextUIProvider theme={darkMode.value ? darkTheme : lightTheme}>
+          <Outlet />
+          <ScrollRestoration />
+          <Scripts />
+          <LiveReload />
+        </NextUIProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/examples/create-remix-app/app/routes/index.tsx b/examples/create-remix-app/app/routes/index.tsx
@@ -0,0 +1,37 @@
+import {
+  Container,
+  Grid,
+  Switch,
+  Text,
+  useTheme,
+  Link,
+} from "@nextui-org/react";
+import useDarkMode from "use-dark-mode";
+
+export default function Index() {
+  const darkMode = useDarkMode(false);
+  const { isDark } = useTheme();
+  return (
+    <Container>
+      <Text h1 margin={"0 0 $4 0"} css={{ ta: "center" }}>
+        Welcome to <Link href="https://remix.run/">Remix</Link> with{" "}
+        <Link color={"secondary"} href="https://nextui.org/">
+          NextUI
+        </Link>
+      </Text>
+      <Grid.Container
+        justify="center"
+        alignContent="center"
+        css={{ gap: "$8", mb: "$8" }}
+      >
+        <Text>Enable {isDark ? "light" : "dark"} mode</Text>
+        <Switch
+          shadow
+          color="primary"
+          checked={isDark}
+          onChange={() => darkMode.toggle()}
+        />
+      </Grid.Container>
+    </Container>
+  );
+}
diff --git a/examples/create-remix-app/package.json b/examples/create-remix-app/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "remix-template-vercel",
+  "private": true,
+  "description": "",
+  "license": "",
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev"
+  },
+  "dependencies": {
+    "@nextui-org/react": "^1.0.8-beta.5",
+    "@remix-run/node": "^1.4.0",
+    "@remix-run/react": "^1.4.0",
+    "@remix-run/vercel": "^1.4.0",
+    "@vercel/node": "^1.14.0",
+    "add": "^2.0.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "use-dark-mode": "^2.3.1",
+    "yarn": "^1.22.18"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^1.4.0",
+    "@remix-run/eslint-config": "^1.4.0",
+    "@remix-run/serve": "^1.4.0",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
+    "eslint": "^8.11.0",
+    "typescript": "^4.5.5"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}
diff --git a/examples/create-remix-app/public/favicon.ico b/examples/create-remix-app/public/favicon.ico
diff --git a/examples/create-remix-app/remix.config.js b/examples/create-remix-app/remix.config.js
@@ -0,0 +1,15 @@
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
+module.exports = {
+  serverBuildTarget: "vercel",
+  // When running locally in development mode, we use the built in remix
+  // server. This does not understand the vercel lambda module format,
+  // so we default back to the standard build output.
+  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
+  ignoredRouteFiles: [".*"],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "api/index.js",
+  // publicPath: "/build/",
+};
diff --git a/examples/create-remix-app/remix.env.d.ts b/examples/create-remix-app/remix.env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node/globals" />
diff --git a/examples/create-remix-app/server.js b/examples/create-remix-app/server.js
@@ -0,0 +1,4 @@
+import { createRequestHandler } from "@remix-run/vercel";
+import * as build from "@remix-run/dev/server-build";
+
+export default createRequestHandler({ build, mode: process.env.NODE_ENV });
diff --git a/examples/create-remix-app/tsconfig.json b/examples/create-remix-app/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}
diff --git a/examples/create-remix-app/vercel.json b/examples/create-remix-app/vercel.json
@@ -0,0 +1,7 @@
+{
+  "build": {
+    "env": {
+      "ENABLE_FILE_SYSTEM_API": "1"
+    }
+  }
+}