Rework Transaction Form (#26)

* Remove forwardRef wrappers as they broke typings (anyway not needed yet, just unnecessary complexity)

* Re-add ref capability to Button component using the innerRef pattern

* Fix types

* New mockup for Transaction page

* Rework transaction model

app/common/base/buttons/button.tsx

@@ -1,9 +1,8 @@
-import { forwardRef } from "react";
 import type {
-  Ref,
-  ComponentPropsWithRef,
+  ComponentPropsWithoutRef,
   ElementType,
   PropsWithChildren,
+  Ref,
 } from "react";
 import { cn } from "../classnames";
 import type { IconComponentType } from "../icons/types";
@@ -43,34 +42,32 @@ function buttonClassName(size: ButtonSize, variant: ButtonVariant) {
  *
  * For a link button use the `LinkButton` component instead.
  */
-export const Button = forwardRef(function Button<T extends ElementType>(
-  {
-    as,
-    variant = "secondary",
-    size = "default",
-    children,
-    className,
-    icon,
-    ...props
-  }: ButtonProps<T>,
-  ref: Ref<HTMLButtonElement>,
-) {
+export function Button<T extends ElementType = "button">({
+  as,
+  variant = "secondary",
+  size = "default",
+  children,
+  className,
+  icon,
+  innerRef,
+  ...props
+}: ButtonProps<T>) {
   const Component = as || "button";
   const Icon = icon;
 
   const classNames = buttonClassName(size, variant);
   return (
     <Component
       className={cn(classNames.button, className)}
+      ref={innerRef}
       {...(Component === "button" ? { type: "button" } : {})}
       {...props}
-      ref={ref}
     >
       {Icon && <Icon className={classNames.icon} />}
       {children}
     </Component>
   );
-});
+}
 
 export type ButtonProps<T extends ElementType> = PropsWithChildren<
   {
@@ -88,7 +85,8 @@ export type ButtonProps<T extends ElementType> = PropsWithChildren<
     icon?: IconComponentType;
     /** The size of the button. */
     size?: "default" | "compact";
-  } & Omit<ComponentPropsWithRef<T>, "as">
+    innerRef?: T extends "button" ? Ref<HTMLButtonElement> : never;
+  } & Omit<ComponentPropsWithoutRef<T>, "as">
 >;
 
 type ButtonVariant = "primary" | "secondary" | "negative";

app/common/base/buttons/icon-button.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ElementType } from "react";
+import type { ComponentPropsWithoutRef, ElementType } from "react";
 import { cn } from "../classnames";
 import type { IconComponentType } from "../icons/types";
 import { Link } from "@remix-run/react";
@@ -8,7 +8,7 @@ export type IconButtonProps<T extends ElementType> = {
   altText: string;
   icon: IconComponentType;
   size?: "default" | "large";
-} & Omit<ComponentPropsWithRef<T>, "as">;
+} & Omit<ComponentPropsWithoutRef<T>, "as">;
 
 export function IconButton<T extends ElementType>({
   as,

app/common/base/buttons/link-button.tsx

@@ -1,22 +1,18 @@
 import { Link } from "@remix-run/react";
 import type { ButtonProps } from "./button";
 import { Button } from "./button";
-import { forwardRef } from "react";
-import type { Ref, ComponentPropsWithRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 
 export type LinkButtonProps = {
   /** The link target. See the Remix `Link` component for details. */
-  to: ComponentPropsWithRef<typeof Link>["to"];
+  to: ComponentPropsWithoutRef<typeof Link>["to"];
 } & Omit<ButtonProps<typeof Link>, "as" | "to">;
 
 /**
  * Renders a Remix `Link` component styled as a button. Any additional props are
  * forwarded to the `Link` component. Use the `to` prop to specify the link
  * target.
  */
-export const LinkButton = forwardRef(function LinkButton(
-  props: LinkButtonProps,
-  ref: Ref<HTMLButtonElement>,
-) {
-  return <Button {...props} as={Link} ref={ref} />;
-});
+export const LinkButton = function LinkButton(props: LinkButtonProps) {
+  return <Button {...props} as={Link} />;
+};

app/common/base/forms/radio-group.stories.tsx

@@ -50,9 +50,10 @@ export const ManyOptions: Story = {
     name: "my-radio-group",
     defaultValue: "1",
     options: [
-      { value: "1", label: "Transfer" },
-      { value: "2", label: "Balance Change" },
-      { value: "3", label: "Value Change" },
+      { value: "1", label: "Charge" },
+      { value: "2", label: "Deposit" },
+      { value: "3", label: "Income" },
+      { value: "4", label: "Expense" },
     ],
   },
 };
@@ -63,9 +64,10 @@ export const Compact: Story = {
     name: "my-radio-group",
     defaultValue: "1",
     options: [
-      { value: "1", label: "Transfer" },
-      { value: "2", label: "Balance Change" },
-      { value: "3", label: "Value Change" },
+      { value: "1", label: "Charge" },
+      { value: "2", label: "Deposit" },
+      { value: "3", label: "Income" },
+      { value: "4", label: "Expense" },
     ],
   },
 };

app/common/base/modal.tsx

@@ -95,7 +95,7 @@ export default function Modal({
                     variant="secondary"
                     type="button"
                     onClick={() => onDismiss()}
-                    ref={cancelButtonRef}
+                    innerRef={cancelButtonRef}
                     disabled={isDisabled}
                   >
                     Cancel

app/common/main-menu.tsx

@@ -1,6 +1,5 @@
 import { Disclosure } from "@headlessui/react";
-import type { PropsWithChildren, Ref } from "react";
-import { forwardRef } from "react";
+import type { PropsWithChildren } from "react";
 import type { NavLinkProps as RemixNavLinkProps } from "@remix-run/react";
 import { NavLink as RemixNavLink } from "@remix-run/react";
 import { cn } from "./base/classnames";
@@ -22,8 +21,8 @@ export function MainMenu({ user }: MainMenuProps) {
         <MainMenuNavLink to=".">Home</MainMenuNavLink>
         <MainMenuNavLink to="accounts">Accounts</MainMenuNavLink>
         <MainMenuNavLink to="asset-classes">Asset Classes</MainMenuNavLink>
-        <MainMenuNavLink to="balance-change-categories">
-          Balance Change Categories
+        <MainMenuNavLink to="income-categories">
+          Income Categories
         </MainMenuNavLink>
       </div>
       <div className="border-t border-gray-200 pb-3 pt-4">
@@ -74,10 +73,7 @@ function MainMenuNavLink({ to, children }: MainMenuNavLinkProps) {
 
 type NavLinkProps = Omit<RemixNavLinkProps, "className">;
 
-const NavLink = forwardRef(function NavLink(
-  props: NavLinkProps,
-  ref: Ref<HTMLAnchorElement>,
-) {
+function NavLink(props: NavLinkProps) {
   return (
     <RemixNavLink
       {...props}
@@ -89,7 +85,6 @@ const NavLink = forwardRef(function NavLink(
           "block border-l-4 py-2 pl-3 pr-4 text-base font-medium",
         )
       }
-      ref={ref}
     />
   );
-});
+}

app/income-categories/builders.ts

@@ -0,0 +1,18 @@
+import { createId } from "@paralleldrive/cuid2";
+import type { IncomeCategoryDto } from "./types";
+
+export function buildIncomeCategoryDto(
+  values: Partial<IncomeCategoryDto> = {},
+) {
+  return {
+    id: createId(),
+    name: "Salary",
+
+    createdAt: new Date(2021, 3, 7).toJSON(),
+    updatedAt: new Date(2021, 3, 7).toJSON(),
+
+    userId: createId(),
+
+    ...values,
+  } as IncomeCategoryDto;
+}

app/income-categories/functions.server.ts

@@ -0,0 +1,22 @@
+import type { IncomeCategory } from "@prisma/client";
+import { prisma } from "~/common/prisma.server";
+
+export async function getIncomeCategories(userId: IncomeCategory["userId"]) {
+  return await prisma.incomeCategory.findMany({
+    where: { userId },
+  });
+}
+
+export async function createIncomeCategory(
+  userId: IncomeCategory["userId"],
+  { name }: Pick<IncomeCategory, "name">,
+) {
+  name = name.trim();
+
+  return await prisma.incomeCategory.create({
+    data: {
+      name,
+      userId,
+    },
+  });
+}

app/income-categories/types.ts

@@ -0,0 +1,4 @@
+import type { IncomeCategory } from "@prisma/client";
+import type { SerializeFrom } from "@remix-run/node";
+
+export type IncomeCategoryDto = SerializeFrom<IncomeCategory>;

app/ledgers-lines/builders.ts

@@ -42,7 +42,7 @@ export function buildLedgerDateGroupDto(
 export function buildLedgerLineDto(values: Partial<LedgerLineDto> = {}) {
   return {
     id: createId(),
-    type: BookingType.ACCOUNT_CHANGE,
+    type: BookingType.CHARGE,
     transaction: buildLedgerLineTransactionDto(),
     amount: "1000",
     amountFormatted: "1,000.00",

app/ledgers-lines/functions.server.ts

@@ -47,11 +47,11 @@ export async function getReverseLedgerDateGroups({
   const groupByDate = new Map<number, LedgerDateGroup>();
 
   for (const line of pagedLedgerLines) {
-    const dateKey = line.transaction.date.valueOf();
+    const dateKey = line.date.valueOf();
 
     if (!groupByDate.has(dateKey)) {
       groupByDate.set(dateKey, {
-        date: line.transaction.date,
+        date: line.date,
         lines: [line],
         balance: line.balance,
       });
@@ -133,24 +133,25 @@ async function getBookings({
 }) {
   return await prisma.booking.findMany({
     where: {
-      type: BookingType.ACCOUNT_CHANGE,
+      type: { in: [BookingType.DEPOSIT, BookingType.CHARGE] },
       accountId,
       userId,
     },
     select: {
       id: true,
+      date: true,
       type: true,
       transaction: {
         select: {
           id: true,
-          date: true,
           note: true,
           bookings: {
             select: {
               id: true,
               type: true,
               account: { select: { id: true, name: true, slug: true } },
-              balanceChangeCategory: { select: { id: true, name: true } },
+              incomeCategory: { select: { id: true, name: true } },
+              expenseCategory: { select: { id: true, name: true } },
               note: true,
             },
           },
@@ -159,9 +160,6 @@ async function getBookings({
       note: true,
       amount: true,
     },
-    orderBy: [
-      { transaction: { date: "asc" } },
-      { transaction: { createdAt: "asc" } },
-    ],
+    orderBy: [{ date: "asc" }, { transaction: { createdAt: "asc" } }],
   });
 }