nirvlife structure round 2

.eslintrc.js → .eslintrc.cjs

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
   parserOptions: {
@@ -10,12 +10,10 @@ export default {
   },
   ignorePatterns: ["**/lib", "**/dist", "**/*.json"],
   extends: [
-    "react-app",
+    "react-app", // provides @typescript-eslint DO NOT added it twice
     "react-app/jest",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "plugin:@typescript-eslint/strict",
     "plugin:@tanstack/eslint-plugin-query/recommended",
+    "plugin:jsx-a11y/recommended",
     "prettier",
   ],
   // @see https://eslint.org/docs/latest/user-guide/configuring/rules

apps/nirvlife/.eslintrc.js → apps/nirvlife/.eslintrc.cjs

@@ -1,3 +1,3 @@
-export default {
+module.exports = {
   extends: "../../.eslintrc.cjs",
 };

apps/nirvlife/.gitignore

@@ -32,3 +32,4 @@ yarn-debug.log*
 yarn-error.log*
 
 build/**/*
+tsconfig.tsbuildinfo

apps/nirvlife/devbuilder.ts

@@ -0,0 +1,21 @@
+import * as path from "path";
+import { rm } from "node:fs/promises";
+
+const PROJECT_ROOT = import.meta.dir;
+const BUILD_DIR = path.resolve(PROJECT_ROOT, "build");
+
+// fake watching
+import("./src/main.tsx").catch((e) => e);
+
+export const buildApp = async () =>
+  rm(BUILD_DIR, { force: true, recursive: true }).then(() =>
+    Bun.build({
+      entrypoints: ["./src/main.tsx"],
+      target: "browser",
+      outdir: BUILD_DIR,
+    })
+      .then((output) => output)
+      .catch((e) => {
+        console.info("\n\n error in build", e);
+      })
+  );

apps/nirvlife/dev.tsx → apps/nirvlife/devserver.ts

@@ -1,25 +1,17 @@
 import * as path from "path";
 import type { ServeOptions } from "bun";
-import { rm, stat } from "node:fs/promises";
+import { stat } from "node:fs/promises";
+import { buildApp } from "./devbuilder";
 
 const PROJECT_ROOT = import.meta.dir;
 const PUBLIC_DIR = path.resolve(PROJECT_ROOT, "public");
 const BUILD_DIR = path.resolve(PROJECT_ROOT, "build");
 
-// TODO(noah): see if theres a `bun` way to do this
-// ^ i think bun accepts all the esbuild options so there should be
-await rm(BUILD_DIR, { force: true, recursive: true }).then(() =>
-  Bun.build({
-    entrypoints: ["./src/main.tsx"],
-    outdir: BUILD_DIR,
-  })
-    .then((output) => {
-      console.info("\n\n built output", output);
-    })
-    .catch((e) => {
-      console.info("\n\n error in build", e);
-    })
-);
+// @see https://bun.sh/docs/bundler#outputs
+const { outputs, success, logs, ...buildData } = await buildApp();
+
+console.info(`built success ${success}: total files`, outputs.length);
+// generally we want to figure out how to serve assets
 
 async function serveFromDir(config: {
   directory: string;
@@ -42,7 +34,24 @@ async function serveFromDir(config: {
 }
 
 export default {
+  development: true,
+  error(e: Error) {
+    // for server side errors
+    return new Response(`<pre>${e}\n${e.stack}</pre>`, {
+      headers: {
+        "Content-Type": "text/html",
+      },
+    });
+  },
   async fetch(request) {
+    if (!success) {
+      for (const message of logs) {
+        // Bun will pretty print the message object
+        console.error(message);
+      }
+      throw new Error(`build failed`);
+    }
+
     let reqPath = new URL(request.url).pathname;
     console.log(request.method, reqPath);
     if (reqPath === "/") reqPath = "/index.html";

apps/nirvlife/package.json

@@ -5,62 +5,66 @@
   "type": "module",
   "version": "0.0.1",
   "dependencies": {
+    "@axe-core/react": "4.7.2",
     "@emotion/react": "11.11.0",
     "@emotion/styled": "11.11.0",
-    "@fontsource/baloo-2": "5.0.1",
-    "@fontsource/inconsolata": "5.0.1",
-    "@fontsource/indie-flower": "5.0.1",
-    "@fontsource/kelly-slab": "5.0.1",
-    "@fontsource/permanent-marker": "5.0.1",
-    "@fontsource/rubik": "5.0.1",
-    "@fontsource/shadows-into-light-two": "5.0.1",
-    "@hapi/bourne": "^3.0.0",
-    "@lukemorales/query-key-factory": "^1.2.0",
+    "@fontsource/baloo-2": "5.0.2",
+    "@fontsource/inconsolata": "5.0.2",
+    "@fontsource/indie-flower": "5.0.2",
+    "@fontsource/kelly-slab": "5.0.2",
+    "@fontsource/permanent-marker": "5.0.2",
+    "@fontsource/rubik": "5.0.2",
+    "@fontsource/shadows-into-light-two": "5.0.2",
+    "@hapi/bourne": "3.0.0",
+    "@lukemorales/query-key-factory": "1.2.0",
     "@mui/icons-material": "5.11.16",
-    "@mui/lab": "5.0.0-alpha.131",
-    "@mui/material": "5.13.2",
+    "@mui/lab": "5.0.0-alpha.132",
+    "@mui/material": "5.13.3",
     "@mui/system": "5.13.2",
     "@tanstack/query-core": "4.29.11",
     "@tanstack/query-sync-storage-persister": "4.29.11",
-    "@tanstack/react-query": "4.29.11",
-    "@tanstack/react-query-devtools": "4.29.11",
-    "@tanstack/react-query-persist-client": "4.29.11",
+    "@tanstack/react-query": "4.29.12",
+    "@tanstack/react-query-devtools": "4.29.12",
+    "@tanstack/react-query-persist-client": "4.29.12",
     "@tanstack/react-table": "8.9.1",
-    "classnames": "^2.3.2",
-    "framer-motion": "^10.12.16",
+    "classnames": "2.3.2",
+    "eslint": "8.42.0",
+    "framer-motion": "10.12.16",
     "ky": "0.33.3",
     "react": "18.2.0",
-    "react-aria": "^3.25.0",
+    "react-aria": "3.25.0",
     "react-dom": "18.2.0",
-    "react-fullerpage": "git@github.com:noahehall/react-fullerpage.git#b51c0c0",
-    "react-ideal-image": "git@github.com:noahehall/react-ideal-image.git#72d7328",
-    "react-query-kit": "^1.4.5",
+    "react-fullerpage": "github:noahehall/react-fullerpage",
+    "react-idealer-image": "github:noahehall/react-idealer-image#ec2b732",
+    "react-query-kit": "1.4.5",
     "react-router-dom": "6.11.2",
-    "react-scripts": "5.0.1",
-    "react-waypoint": "^10.3.0",
+    "react-waypoint": "10.3.0",
     "validator": "13.9.0",
-    "web-vitals": "3.3.1"
+    "web-vitals": "3.3.2"
   },
   "devDependencies": {
-    "@axe-core/react": "^4.7.1",
-    "@types/react": "18.2.7",
+    "@tanstack/eslint-plugin-query": "4.29.9",
+    "@types/react": "18.2.8",
     "@types/react-dom": "18.2.4",
     "@types/react-router-dom": "5.3.3",
     "barrelsby": "2.8.0",
     "bun-types": "canary",
-    "npm-check-updates": "^16.10.12",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-config-react-app": "7.0.1",
+    "husky": "8.0.3",
+    "npm-check-updates": "16.10.12",
     "postcss": "8.4.24",
     "postcss-flexbugs-fixes": "5.0.2",
-    "prettier": "^2.8.8",
+    "prettier": "2.8.8",
     "react-refresh": "0.14.0",
-    "turbo": "^1.9.9",
-    "type-fest": "^3.11.0",
+    "type-fest": "3.11.1",
     "typescript": "beta"
   },
   "scripts": {
-    "barrels": "barrelsby --config ./barrels.json",
-    "dev": "rm -rf build/* && bun run --watch dev.tsx",
-    "postdev": "bun --hot src/main.tsx",
+    "barrels": "bunx barrelsby --config ./barrels.json",
+    "dev": "bun --watch run devserver.ts",
+    "lint": "bunx eslint src --fix --resolve-plugins-relative-to .",
+    "pretty": "bunx prettier --write 'src/**/*.(ts|tsx)'",
     "rm:cache": "bun pm cache rm",
     "test:types": "bunx tsc",
     "upgrade:bun": "bun upgrade --canary",

apps/nirvlife/prettier.config.mjs

@@ -0,0 +1,21 @@
+// @see https://github.com/kentcdodds/kcd-scripts/blob/main/src/config/prettierrc.js
+export default {
+  arrowParens: "avoid",
+  bracketSameLine: false,
+  bracketSpacing: false,
+  embeddedLanguageFormatting: "auto",
+  endOfLine: "lf",
+  htmlWhitespaceSensitivity: "css",
+  insertPragma: false,
+  jsxSingleQuote: false,
+  printWidth: 80,
+  proseWrap: "always",
+  quoteProps: "as-needed",
+  requirePragma: false,
+  semi: true,
+  singleAttributePerLine: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: "all",
+  useTabs: false,
+};

apps/nirvlife/src/Components/App/AppLandingScreen.tsx

@@ -2,17 +2,22 @@ import { useTheme } from "@mui/material";
 
 import { Img, TextCopy } from "Library";
 import { ctaStacks, nirvaiRef, taglineRef } from "data";
-import { ReactFP, FPContainer, FPItem } from "react-fullerpage";
-// <img src={"/img/logo_main.png"} className="img" alt="nirvai" />
+// import { ReactFP, FPContainer, FPItem } from "react-fullerpage";
+import {
+  ReactFP,
+  FPContainer,
+  FPItem,
+} from "../../../node_modules/react-fullerpage/src";
+import girljumping from "./imgs/girljumping.jpg";
 
 const screenId = "app-landing-screen";
 export const AppLandingScreen = () => {
   const theme = useTheme();
 
-  // {/* <Img key="img" uris={["/img/girljumping.jpg"]} width={500} height={500} /> */}
   return (
     <ReactFP style={{}}>
-      <FPContainer style={{}} transitionTiming={700}>
+      <div>hello</div>
+      <FPContainer>
         <FPItem
           style={{
             backgroundColor: "lime",
@@ -22,6 +27,8 @@ export const AppLandingScreen = () => {
         >
           <article>
             <TextCopy data={ctaStacks[0][0]} />
+            {/* <Img key="img" uris={["/img/girljumping.jpg"]} width={300} /> */}
+            <Img key="img" uris={[girljumping]} width={300} />
           </article>
         </FPItem>
 

apps/nirvlife/src/Library/Img/Img.tsx

@@ -1,6 +1,8 @@
 import type { FC } from "react";
 
-import IdealImage from "react-ideal-image";
+import { IdealImage } from "react-idealer-image";
+// import { IdealImage } from "../../../node_modules/react-ideal-image/src";
+
 import { useMemo, useEffect, useState } from "react";
 
 export interface ImgInterface {
@@ -28,13 +30,7 @@ export const Img: FC<ImgInterface> = ({
 
   return (
     <section {...props}>
-      <IdealImage
-        placeholder={{ color: "black" }}
-        alt={alt}
-        srcSet={srcSet}
-        height={height}
-        width={width}
-      />
+      <IdealImage alt={alt} srcSet={srcSet} height={height} width={width} />
     </section>
   );
 };

apps/nirvlife/src/images.d.ts

@@ -1,4 +1,14 @@
-declare module "*.(svg|jpg|png)" {
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}
+
+declare module "*.jpg" {
+  const content: any;
+  export default content;
+}
+
+declare module "*.png" {
   const content: any;
   export default content;
 }

apps/nirvlife/src/main.tsx

@@ -1,7 +1,7 @@
 import { reportWebVitals } from "reportWebVitals";
 import React, { StrictMode } from "react";
 import ReactDOM, { createRoot } from "react-dom/client";
-
+console.info("lol");
 import { QueryProvider } from "./Api";
 import { Router } from "Router";
 
@@ -19,7 +19,5 @@ root.render(
   </StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals(console.log);

package.json

@@ -1,29 +1,12 @@
 {
   "name": "nirvai-fullstackjs",
   "private": true,
+  "type": "module",
   "workspaces": [
     "packages/*",
     "apps/*"
   ],
-  "scripts": {
-    "pkgfix": "manypkg fix"
-  },
-  "dependencies": {
-    "@babel/core": "7.20.5",
-    "@babel/plugin-syntax-flow": "7.18.6",
-    "@babel/plugin-transform-react-jsx": "7.19.0",
-    "@lukemorales/query-key-factory": "^1.2.0",
-    "@manypkg/cli": "0.19.2",
-    "@tanstack/eslint-plugin-query": "4.29.4",
-    "@typescript-eslint/eslint-plugin": "5.46.1",
-    "@typescript-eslint/parser": "5.46.1",
-    "bun-types": "canary",
-    "eslint": "8.29.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-config-react-app": "7.0.1",
-    "husky": "8.0.2",
-    "turbo": "^1.9.8",
-    "typescript": "beta"
-  },
-  "type": "module"
+  "devDependencies": {
+    "bun-types": "canary"
+  }
 }