Initial commit from create-remix

.eslintrc.cjs

@@ -0,0 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ["!**/.server", "!**/.client"],
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+.env

README.md

@@ -0,0 +1,38 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+From your terminal:
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `remix build`
+
+- `build/server`
+- `build/client`

app/data.ts

@@ -0,0 +1,316 @@
+////////////////////////////////////////////////////////////////////////////////
+// 🛑 Nothing in here has anything to do with Remix, it's just a fake database
+////////////////////////////////////////////////////////////////////////////////
+
+import { matchSorter } from "match-sorter";
+// @ts-expect-error - no types, but it's a tiny function
+import sortBy from "sort-by";
+import invariant from "tiny-invariant";
+
+type ContactMutation = {
+  id?: string;
+  first?: string;
+  last?: string;
+  avatar?: string;
+  twitter?: string;
+  notes?: string;
+  favorite?: boolean;
+};
+
+export type ContactRecord = ContactMutation & {
+  id: string;
+  createdAt: string;
+};
+
+////////////////////////////////////////////////////////////////////////////////
+// This is just a fake DB table. In a real app you'd be talking to a real db or
+// fetching from an existing API.
+const fakeContacts = {
+  records: {} as Record<string, ContactRecord>,
+
+  async getAll(): Promise<ContactRecord[]> {
+    return Object.keys(fakeContacts.records)
+      .map((key) => fakeContacts.records[key])
+      .sort(sortBy("-createdAt", "last"));
+  },
+
+  async get(id: string): Promise<ContactRecord | null> {
+    return fakeContacts.records[id] || null;
+  },
+
+  async create(values: ContactMutation): Promise<ContactRecord> {
+    const id = values.id || Math.random().toString(36).substring(2, 9);
+    const createdAt = new Date().toISOString();
+    const newContact = { id, createdAt, ...values };
+    fakeContacts.records[id] = newContact;
+    return newContact;
+  },
+
+  async set(id: string, values: ContactMutation): Promise<ContactRecord> {
+    const contact = await fakeContacts.get(id);
+    invariant(contact, `No contact found for ${id}`);
+    const updatedContact = { ...contact, ...values };
+    fakeContacts.records[id] = updatedContact;
+    return updatedContact;
+  },
+
+  destroy(id: string): null {
+    delete fakeContacts.records[id];
+    return null;
+  },
+};
+
+////////////////////////////////////////////////////////////////////////////////
+// Handful of helper functions to be called from route loaders and actions
+export async function getContacts(query?: string | null) {
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  let contacts = await fakeContacts.getAll();
+  if (query) {
+    contacts = matchSorter(contacts, query, {
+      keys: ["first", "last"],
+    });
+  }
+  return contacts.sort(sortBy("last", "createdAt"));
+}
+
+export async function createEmptyContact() {
+  const contact = await fakeContacts.create({});
+  return contact;
+}
+
+export async function getContact(id: string) {
+  return fakeContacts.get(id);
+}
+
+export async function updateContact(id: string, updates: ContactMutation) {
+  const contact = await fakeContacts.get(id);
+  if (!contact) {
+    throw new Error(`No contact found for ${id}`);
+  }
+  await fakeContacts.set(id, { ...contact, ...updates });
+  return contact;
+}
+
+export async function deleteContact(id: string) {
+  fakeContacts.destroy(id);
+}
+
+[
+  {
+    avatar:
+      "https://sessionize.com/image/124e-400o400o2-wHVdAuNaxi8KJrgtN3ZKci.jpg",
+    first: "Shruti",
+    last: "Kapoor",
+    twitter: "@shrutikapoor08",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/1940-400o400o2-Enh9dnYmrLYhJSTTPSw3MH.jpg",
+    first: "Glenn",
+    last: "Reyes",
+    twitter: "@glnnrys",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/9273-400o400o2-3tyrUE3HjsCHJLU5aUJCja.jpg",
+    first: "Ryan",
+    last: "Florence",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/d14d-400o400o2-pyB229HyFPCnUcZhHf3kWS.png",
+    first: "Oscar",
+    last: "Newman",
+    twitter: "@__oscarnewman",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/fd45-400o400o2-fw91uCdGU9hFP334dnyVCr.jpg",
+    first: "Michael",
+    last: "Jackson",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/b07e-400o400o2-KgNRF3S9sD5ZR4UsG7hG4g.jpg",
+    first: "Christopher",
+    last: "Chedeau",
+    twitter: "@Vjeux",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/262f-400o400o2-UBPQueK3fayaCmsyUc1Ljf.jpg",
+    first: "Cameron",
+    last: "Matheson",
+    twitter: "@cmatheson",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/820b-400o400o2-Ja1KDrBAu5NzYTPLSC3GW8.jpg",
+    first: "Brooks",
+    last: "Lybrand",
+    twitter: "@BrooksLybrand",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/df38-400o400o2-JwbChVUj6V7DwZMc9vJEHc.jpg",
+    first: "Alex",
+    last: "Anderson",
+    twitter: "@ralex1993",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/5578-400o400o2-BMT43t5kd2U1XstaNnM6Ax.jpg",
+    first: "Kent C.",
+    last: "Dodds",
+    twitter: "@kentcdodds",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c9d5-400o400o2-Sri5qnQmscaJXVB8m3VBgf.jpg",
+    first: "Nevi",
+    last: "Shah",
+    twitter: "@nevikashah",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/2694-400o400o2-MYYTsnszbLKTzyqJV17w2q.png",
+    first: "Andrew",
+    last: "Petersen",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/907a-400o400o2-9TM2CCmvrw6ttmJiTw4Lz8.jpg",
+    first: "Scott",
+    last: "Smerchek",
+    twitter: "@smerchek",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/08be-400o400o2-WtYGFFR1ZUJHL9tKyVBNPV.jpg",
+    first: "Giovanni",
+    last: "Benussi",
+    twitter: "@giovannibenussi",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/f814-400o400o2-n2ua5nM9qwZA2hiGdr1T7N.jpg",
+    first: "Igor",
+    last: "Minar",
+    twitter: "@IgorMinar",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/fb82-400o400o2-LbvwhTVMrYLDdN3z4iEFMp.jpeg",
+    first: "Brandon",
+    last: "Kish",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/fcda-400o400o2-XiYRtKK5Dvng5AeyC8PiUA.png",
+    first: "Arisa",
+    last: "Fukuzaki",
+    twitter: "@arisa_dev",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c8c3-400o400o2-PR5UsgApAVEADZRixV4H8e.jpeg",
+    first: "Alexandra",
+    last: "Spalato",
+    twitter: "@alexadark",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/7594-400o400o2-hWtdCjbdFdLgE2vEXBJtyo.jpg",
+    first: "Cat",
+    last: "Johnson",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/5636-400o400o2-TWgi8vELMFoB3hB9uPw62d.jpg",
+    first: "Ashley",
+    last: "Narcisse",
+    twitter: "@_darkfadr",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/6aeb-400o400o2-Q5tAiuzKGgzSje9ZsK3Yu5.JPG",
+    first: "Edmund",
+    last: "Hung",
+    twitter: "@_edmundhung",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/30f1-400o400o2-wJBdJ6sFayjKmJycYKoHSe.jpg",
+    first: "Clifford",
+    last: "Fajardo",
+    twitter: "@cliffordfajard0",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/6faa-400o400o2-amseBRDkdg7wSK5tjsFDiG.jpg",
+    first: "Erick",
+    last: "Tamayo",
+    twitter: "@ericktamayo",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/feba-400o400o2-R4GE7eqegJNFf3cQ567obs.jpg",
+    first: "Paul",
+    last: "Bratslavsky",
+    twitter: "@codingthirty",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c315-400o400o2-spjM5A6VVfVNnQsuwvX3DY.jpg",
+    first: "Pedro",
+    last: "Cattori",
+    twitter: "@pcattori",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/eec1-400o400o2-HkvWKLFqecmFxLwqR9KMRw.jpg",
+    first: "Andre",
+    last: "Landgraf",
+    twitter: "@AndreLandgraf94",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c73a-400o400o2-4MTaTq6ftC15hqwtqUJmTC.jpg",
+    first: "Monica",
+    last: "Powell",
+    twitter: "@indigitalcolor",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/cef7-400o400o2-KBZUydbjfkfGACQmjbHEvX.jpeg",
+    first: "Brian",
+    last: "Lee",
+    twitter: "@brian_dlee",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/f83b-400o400o2-Pyw3chmeHMxGsNoj3nQmWU.jpg",
+    first: "Sean",
+    last: "McQuaid",
+    twitter: "@SeanMcQuaidCode",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/a9fc-400o400o2-JHBnWZRoxp7QX74Hdac7AZ.jpg",
+    first: "Shane",
+    last: "Walker",
+    twitter: "@swalker326",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/6644-400o400o2-aHnGHb5Pdu3D32MbfrnQbj.jpg",
+    first: "Jon",
+    last: "Jensen",
+    twitter: "@jenseng",
+  },
+].forEach((contact) => {
+  fakeContacts.create({
+    ...contact,
+    id: `${contact.first.toLowerCase()}-${contact.last.toLocaleLowerCase()}`,
+  });
+});

app/root.tsx

@@ -0,0 +1,53 @@
+import {
+  Form,
+  Links,
+  Meta,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <div id="sidebar">
+          <h1>Remix Contacts</h1>
+          <div>
+            <Form id="search-form" role="search">
+              <input
+                id="q"
+                aria-label="Search contacts"
+                placeholder="Search"
+                type="search"
+                name="q"
+              />
+              <div id="search-spinner" aria-hidden hidden={true} />
+            </Form>
+            <Form method="post">
+              <button type="submit">New</button>
+            </Form>
+          </div>
+          <nav>
+            <ul>
+              <li>
+                <a href={`/contacts/1`}>Your Name</a>
+              </li>
+              <li>
+                <a href={`/contacts/2`}>Your Friend</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "remix vite:build",
+    "dev": "remix vite:dev",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "start": "remix-serve build/server/index.js",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/node": "^2.16.8",
+    "@remix-run/react": "^2.16.8",
+    "@remix-run/serve": "^2.16.8",
+    "isbot": "^4.1.0",
+    "match-sorter": "^6.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sort-by": "^1.2.0",
+    "tiny-invariant": "^1.3.1"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^2.16.8",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.13.0",
+    "@typescript-eslint/parser": "^6.13.0",
+    "eslint": "^8.47.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "typescript": "^5.1.6",
+    "vite": "^6.0.0",
+    "vite-tsconfig-paths": "^4.3.1"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["@remix-run/node", "vite/client"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}

vite.config.ts

@@ -0,0 +1,12 @@
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [
+    remix({
+      ignoredRouteFiles: ["**/*.css"],
+    }),
+    tsconfigPaths(),
+  ],
+});