Create separate UI package

apps/photos/package.json

@@ -8,6 +8,7 @@
         "albums": "next dev -p 3002"
     },
     "dependencies": {
+        "@/ui": "*",
         "@/utils": "*",
         "@date-io/date-fns": "^2.14.0",
         "@mui/x-date-pickers": "^5.0.0-alpha.6",

packages/build-config/README.md

@@ -0,0 +1,9 @@
+## @/build-config
+
+Build time configuration files. This can be thought of as a `devDependency` that
+exports various config files that our packages use at build time.
+
+### Packaging
+
+This is _not_ a TypeScript package, nor is it linted. It is not meant to be
+transpiled, it just exports static files that can be included verbatim.

packages/build-config/eslintrc.typescript.js

@@ -0,0 +1,15 @@
+/* eslint-env node */
+module.exports = {
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended-type-checked",
+    ],
+    plugins: ["@typescript-eslint"],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        project: true,
+        tsconfigRootDir: __dirname,
+    },
+    ignorePatterns: [".eslintrc.js"],
+    root: true,
+};

packages/build-config/package.json

@@ -0,0 +1,9 @@
+{
+    "name": "@/build-config",
+    "version": "0.0.0",
+    "private": true,
+    "files": [
+        "tsconfig.lib.js",
+        "eslintrc.js"
+    ]
+}

packages/build-config/tsconfig.transpile.json

@@ -0,0 +1,79 @@
+{
+    /* TSConfig for TypeScript projects that get transpiled by Next.js */
+
+    /* TSConfig docs: https://aka.ms/tsconfig.json */
+    "compilerOptions": {
+        /* We use TypeScript (tsc) as a type checker, not as a build tool */
+        "noEmit": true,
+
+        /*
+         * Tell TypeScript which all things it can assume that our target
+         * runtime will have.
+         *
+         * In our case, we tell it that the code will run in a modern browser,
+         * and will have access to a latest JS (esnext) and the DOM (dom). Our
+         * transpiler (Next.js) will ensure that these things hold.
+         *
+         * Unlike the other individual library components (say how "esnext"
+         * implies "esnext.*"), "dom.iterable" (the ability to iterate over DOM
+         * elements) is not a subset of "dom" and needs to be listed out
+         * explicitly.
+         *
+         * Note that we don't need to specify the `target` compilerOption, since
+         * tsc isn't actually generating (emitting) the JavaScript.
+         */
+        "lib": ["esnext", "dom", "dom.iterable"],
+
+        /*
+         * The module system to assume the generated JavaScript will use.
+         *
+         * Since we're using a bundler, we should set this to "esnext"
+         * https://www.typescriptlang.org/docs/handbook/modules/guides/choosing-compiler-options.html
+         */
+        "module": "esnext",
+
+        /*
+         * Tell TypeScript how to lookup the file for a given import
+         *
+         * From the TypeScript docs:
+         *
+         * > 'bundler' is for use with bundlers. Like node16 and nodenext, this
+         *   mode supports package.json `imports` and `exports`, but unlinke the
+         *   Node.js resolution modes, bundler never requires file extensions on
+         *   relative paths in imports.
+         *
+         * > bundler does not support resolution of `require` calls.
+         */
+        "moduleResolution": "bundler",
+
+        /* Allow use of `.tsx` files, but don't tranform them */
+        "jsx": "preserve",
+
+        /* Ask TypeScript to warn us if we use TypeScript features that cannot
+           be used by single-file transpilers */
+        "isolatedModules": true,
+        /* Enable various workarounds to play better with CJS libraries */
+        "esModuleInterop": true,
+
+        /* Speed things up by not type checking `node_modules` */
+        "skipLibCheck": true,
+        /* Require the `type` modifier when importing types */
+        "verbatimModuleSyntax": true,
+        /* Enable importing .json files */
+        "resolveJsonModule": true,
+
+        "strict": true,
+        /* Stricter than strict */
+        "noImplicitReturns": true,
+        "noUnusedParameters": true,
+        "noUnusedLocals": true,
+        "noFallthroughCasesInSwitch": true,
+        /* e.g. makes array indexing returns undefined */
+        "noUncheckedIndexedAccess": true,
+        "exactOptionalPropertyTypes": true
+    },
+    /*
+     * Typecheck all files (here or in subfolders) with the given extensions
+     */
+    "include": ["**/*.ts", "**/*.tsx"]
+}

packages/ui/.eslintrc.js

@@ -0,0 +1,15 @@
+/* eslint-env node */
+module.exports = {
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended-type-checked",
+    ],
+    plugins: ["@typescript-eslint"],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        project: true,
+        tsconfigRootDir: __dirname,
+    },
+    ignorePatterns: [".eslintrc.js"],
+    root: true,
+};

packages/ui/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+    "tabWidth": 4
+}

packages/ui/README.md

@@ -0,0 +1,8 @@
+## @/ui
+
+Like [@/utils](../utils/README.md), but for things that require React.
+
+### Packaging
+
+This (internal) package exports a vanilla TypeScript library. We rely on the
+importing project to transpile and bundle it.

packages/ui/package.json

@@ -0,0 +1,9 @@
+{
+    "name": "@/ui",
+    "version": "0.0.0",
+    "private": true,
+    "exports": {
+        "./components/*": "./src/components/*.tsx",
+        "./*": "./src/*.ts"
+    }
+}

packages/ui/src/hello.ts

@@ -0,0 +1,2 @@
+/** Howdy! */
+export const sayNamaste = () => console.log("Namaste, world");

packages/ui/tsconfig.json

@@ -0,0 +1,77 @@
+{
+    /* Docs: https://aka.ms/tsconfig.json */
+    "compilerOptions": {
+        /* We use TypeScript (tsc) as a type checker, not as a build tool */
+        "noEmit": true,
+
+        /*
+         * Tell TypeScript which all things it can assume that our target
+         * runtime will have.
+         *
+         * In our case, we tell it that the code will run in a modern browser,
+         * and will have access to a latest JS (esnext) and the DOM (dom). Our
+         * transpiler (Next.js) will ensure that these things hold.
+         *
+         * Unlike the other individual library components (say how "esnext"
+         * implies "esnext.*"), "dom.iterable" (the ability to iterate over DOM
+         * elements) is not a subset of "dom" and needs to be listed out
+         * explicitly.
+         *
+         * Note that we don't need to specify the `target` compilerOption, since
+         * tsc isn't actually generating (emitting) the JavaScript.
+         */
+        "lib": ["esnext", "dom", "dom.iterable"],
+
+        /*
+         * The module system to assume the generated JavaScript will use.
+         *
+         * Since we're using a bundler, we should set this to "esnext"
+         * https://www.typescriptlang.org/docs/handbook/modules/guides/choosing-compiler-options.html
+         */
+        "module": "esnext",
+
+        /*
+         * Tell TypeScript how to lookup the file for a given import
+         *
+         * From the TypeScript docs:
+         *
+         * > 'bundler' is for use with bundlers. Like node16 and nodenext, this
+         *   mode supports package.json `imports` and `exports`, but unlinke the
+         *   Node.js resolution modes, bundler never requires file extensions on
+         *   relative paths in imports.
+         *
+         * > bundler does not support resolution of `require` calls.
+         */
+        "moduleResolution": "bundler",
+
+        /* Allow use of `.tsx` files, but don't tranform them */
+        "jsx": "preserve",
+
+        /* Ask TypeScript to warn us if we use TypeScript features that cannot
+           be used by single-file transpilers */
+        "isolatedModules": true,
+        /* Enable various workarounds to play better with CJS libraries */
+        "esModuleInterop": true,
+
+        /* Speed things up by not type checking `node_modules` */
+        "skipLibCheck": true,
+        /* Require the `type` modifier when importing types */
+        "verbatimModuleSyntax": true,
+        /* Enable importing .json files */
+        "resolveJsonModule": true,
+
+        "strict": true,
+        /* Stricter than strict */
+        "noImplicitReturns": true,
+        "noUnusedParameters": true,
+        "noUnusedLocals": true,
+        "noFallthroughCasesInSwitch": true,
+        /* e.g. makes array indexing returns undefined */
+        "noUncheckedIndexedAccess": true,
+        "exactOptionalPropertyTypes": true
+    },
+    /*
+     * Typecheck all files (here or in subfolders) with the given extensions
+     */
+    "include": ["**/*.ts", "**/*.tsx"]
+}

packages/utils/package.json

@@ -3,10 +3,6 @@
     "version": "0.0.0",
     "private": true,
     "exports": {
-        "./components/*": "./src/components/*.tsx",
         "./*": "./src/*.ts"
-    },
-    "scripts": {
-        "lint": "eslint --debug "
     }
 }