container props

.eslintrc.cjs

@@ -4,15 +4,15 @@ const path = require("path");
 /** @type {import("eslint").Linter.Config} */
 const config = {
   overrides: [
-    {
-      extends: [
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
-      ],
-      files: ["*.ts", "*.tsx"],
-      parserOptions: {
-        project: path.join(__dirname, "tsconfig.json"),
-      },
-    },
+    // {
+    //   extends: [
+    //     "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    //   ],
+    //   files: ["*.ts", "*.tsx"],
+    //   parserOptions: {
+    //     project: path.join(__dirname, "tsconfig.json"),
+    //   },
+    // },
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {

package.json

@@ -10,7 +10,8 @@
     "start": "next start",
     "db:migrate": "prisma migrate dev",
     "db:migrate:prod": "prisma migrate prod",
-    "fmt": "eslint src/**/*.{ts,tsx} --fix"
+    "fmt": "eslint src/**/*.{ts,tsx} --fix",
+    "gen": "plop --plopfile=scripts/codegen.mjs"
   },
   "dependencies": {
     "@discordjs/core": "^0.6.0",
@@ -33,9 +34,11 @@
     "node-cache": "^5.1.2",
     "pdf-lib": "^1.17.1",
     "react": "18.2.0",
+    "react-aria": "^3.25.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.9.0",
     "react-signature-canvas": "^1.0.6",
+    "react-stately": "^3.23.0",
     "simplex-noise": "^4.0.1",
     "superjson": "1.12.2",
     "three": "^0.153.0",
@@ -56,15 +59,20 @@
     "eslint": "^8.40.0",
     "eslint-config-ccs": "^1.3.0",
     "eslint-config-next": "^13.4.2",
+    "plop": "^3.1.2",
     "postcss": "^8.4.21",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.2.8",
     "prisma": "^4.15.0",
     "tailwind-heropatterns": "^0.0.8",
     "tailwindcss": "^3.3.0",
     "tailwindcss-accent": "^2.1.2",
+    "ts-node": "^10.9.1",
     "typescript": "^5.0.4"
   },
+  "prisma": {
+    "seed": "ts-node prisma/seed"
+  },
   "ct3aMetadata": {
     "initVersion": "7.13.1"
   }

prisma/seed/seed.ts → prisma/seed/index.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { PrismaClient } = require("@prisma/client");
 
 const prisma = new PrismaClient();

src/atoms/Container.tsx

@@ -1,61 +1,42 @@
-import type { ContainerFooterProps } from "./ContainerFooter";
-import ContainerFooter from "./ContainerFooter";
-import type { ContainerHeaderProps } from "./ContainerHeader";
-import ContainerHeader from "./ContainerHeader";
+import { renderGeneric } from "@/utils/render";
+import type { Renderable } from "@/utils/render";
+
+import type { ContainerBoundaryProps } from "./ContainerBoundary";
+import ContainerBoundary from "./ContainerBoundary";
 
 interface ContainerProps {
   header?: string | true | JSX.Element;
-  headerProps?: ContainerHeaderProps;
+  headerProps?: ContainerBoundaryProps;
   externalHeader?: true;
   footer?: string | true | JSX.Element;
-  footerProps?: ContainerFooterProps;
+  footerProps?: ContainerBoundaryProps;
   externalFooter?: true;
   loading?: boolean;
-  skeleton?: JSX.Element;
+  loadingSkeleton?: JSX.Element | React.FC | React.ReactNode;
 }
 
+const renderContainerBoundary = (
+  boundary: Renderable,
+  boundaryProps: ContainerBoundaryProps
+) =>
+  renderGeneric(
+    boundary,
+    <ContainerBoundary {...boundaryProps}>
+      {boundaryProps.title ?? boundary}
+    </ContainerBoundary>,
+    boundaryProps
+  );
+
 const Container: React.FC<React.PropsWithChildren<ContainerProps>> = ({
   children,
-  header,
+  header = null,
   headerProps = {},
-  footer,
+  footer = null,
   footerProps = {},
 }) => {
-  const renderHeader = () => {
-    if (header) {
-      if (typeof header === "boolean" || typeof header === "string") {
-        return (
-          <ContainerHeader {...headerProps}>
-            {headerProps.title ?? header}
-          </ContainerHeader>
-        );
-      }
-
-      if (typeof header === "object") {
-        return header;
-      }
-    }
-
-    return null;
-  };
-
-  const renderFooter = () => {
-    if (footer) {
-      if (typeof footer === "boolean" || typeof footer === "string") {
-        return (
-          <ContainerFooter {...footerProps}>
-            {footerProps.title ?? footer}
-          </ContainerFooter>
-        );
-      }
-
-      if (typeof footer === "object") {
-        return footer;
-      }
-    }
+  const renderHeader = () => renderContainerBoundary(header, headerProps);
+  const renderFooter = () => renderContainerBoundary(footer, footerProps);
 
-    return null;
-  };
   return (
     <div>
       {renderHeader()}

src/atoms/ContainerFooter.tsx → src/atoms/ContainerBoundary.tsx

@@ -1,12 +1,27 @@
-export interface ContainerFooterProps {
+export interface ContainerBoundaryProps {
+  /**
+   *
+   */
   title?: string;
+
+  /**
+   *
+   */
   left?: string | JSX.Element;
+
+  /**
+   *
+   */
   center?: string | JSX.Element;
+
+  /**
+   *
+   */
   right?: string | JSX.Element;
 }
 
-const ContainerFooter: React.FC<
-  React.PropsWithChildren<ContainerFooterProps>
+const ContainerBoundary: React.FC<
+  React.PropsWithChildren<ContainerBoundaryProps>
 > = ({ title, left, center, right, children }) => {
   return (
     <>
@@ -16,4 +31,4 @@ const ContainerFooter: React.FC<
   );
 };
 
-export default ContainerFooter;
+export default ContainerBoundary;

src/utils/render.tsx

@@ -0,0 +1,32 @@
+// TODO: these types honestly make very little sense. "true" is not renderable, but is a value that can be passed in. "RenderableWithFunc" is just... bad nomenclature. this can and should be cleaned up whenever it might matter
+// a true "Renderable" type would really be JSX.Element | React.ReactNode | string
+type JSXEl = JSX.Element | React.ReactNode;
+export type Renderable = true | string | JSXEl;
+export type RenderableWithFunc = React.FC | Renderable;
+
+/**
+ *
+ * @param renderable some truthy value that either represents a render function, JSX, or other auto-renderable value
+ * @param renderItem a specific end-renderable item (render func, string, or JSX element)
+ * @param renderFunctionProps props for a renderable/ renderItem that is a render function
+ * @returns
+ */
+export const renderGeneric = (
+  renderable: RenderableWithFunc,
+  renderItem?: Exclude<RenderableWithFunc, true>,
+  renderFunctionProps = {}
+): string | JSXEl => {
+  if (renderable === "true" && renderItem) {
+    return renderGeneric(renderItem, undefined, renderFunctionProps);
+  }
+
+  if (typeof renderable === "string" || typeof renderable === "object")
+    return renderable;
+
+  if (typeof renderable === "function") {
+    const RenderFunction = renderable;
+    return <RenderFunction {...renderFunctionProps} />;
+  }
+
+  return null;
+};

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "checkJs": true,
     "skipLibCheck": true,
@@ -22,12 +18,8 @@
     "noUncheckedIndexedAccess": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ],
-      "~db": [
-        "./src/server/db"
-      ]
+      "@/*": ["./src/*"],
+      "~db": ["./src/server/db"]
     },
     "plugins": [
       {
@@ -44,7 +36,5 @@
     "**/*.mjs",
     ".next/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }