Migrate to Next.js and MUI (#228)

* feat: use tsconfig.base.json

* feat: refactor minimal template so be more minimal and add basic ui template

* feat: add crud postgres template

* chore: update cdk-nextjs-standalone version

* chore(ui): deprecate Amplify UI related exports

.changeset/green-shoes-do.md

@@ -0,0 +1,5 @@
+---
+"gboost-ui": minor
+---
+
+Deprecate all exports related to Amplify UI to support miration to MUI

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 .envrc
 lib
-.env
+.env
+*.tsbuildinfo

packages/gboost-common/tsconfig.json

@@ -1,13 +1,12 @@
 {
-  "extends": ["@tsconfig/strictest", "@tsconfig/esm", "@tsconfig/node18"],
+  "extends": ["../../tsconfig.base.json", "@tsconfig/node18"],
   "compilerOptions": {
     "declaration": true,
     "declarationMap": true,
     "exactOptionalPropertyTypes": false,
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "outDir": "lib",
-    "skipLibCheck": true,
   },
   "exclude": ["lib"]
 }

packages/gboost-infra/tsconfig.json

@@ -1,13 +1,12 @@
 {
-  "extends": ["@tsconfig/strictest", "@tsconfig/esm", "@tsconfig/node18"],
+  "extends": ["../../tsconfig.base.json", "@tsconfig/node18"],
   "compilerOptions": {
     "declaration": true,
     "declarationMap": true,
     "exactOptionalPropertyTypes": false,
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "outDir": "lib",
-    "skipLibCheck": true,
   },
   "exclude": ["lib"],
 }

packages/gboost-node/tsconfig.json

@@ -1,13 +1,12 @@
 {
-  "extends": ["@tsconfig/strictest", "@tsconfig/esm", "@tsconfig/node18"],
+  "extends": ["../../tsconfig.base.json", "@tsconfig/node18"],
   "compilerOptions": {
     "declaration": true,
     "declarationMap": true,
     "exactOptionalPropertyTypes": false,
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "outDir": "lib",
-    "skipLibCheck": true,
   },
   "include": ["src/**/*.ts"],
 }

packages/gboost-ui/src/Authenticator.tsx

@@ -24,6 +24,7 @@ const StyledHeading = styled(Heading, { fontSize: "$8 !important" });
 /**
  * Wrapper around @aws-amplify/ui-react Authenticator that adds header
  * @link https://ui.docs.amplify.aws/components/authenticator?platform=react
+ * @deprecated
  */
 export function Authenticator(props: AuthenticatorProps): ReactElement {
   const {

packages/gboost-ui/src/ErrorBoundary.tsx

@@ -25,7 +25,9 @@ interface Props {
   ErrorComponent?: ReactElement;
   children: ReactElement;
 }
-
+/**
+ * @deprecated
+ */
 export class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props);

packages/gboost-ui/src/FileUpload/ActionButtons.tsx

@@ -11,6 +11,9 @@ export interface ActionButtonProps {
 
 const StyledButton = styled(Button);
 
+/**
+ * @deprecated
+ */
 export function ActionButtons(props: ActionButtonProps): ReactElement {
   const { handleClick, handleClear, isClearDisabled, isUploadDisabled } = props;
 

packages/gboost-ui/src/FileUpload/CustomActionButtons.tsx

@@ -1,5 +1,7 @@
 import { type MouseEvent } from "react";
-
+/**
+ * @deprecated
+ */
 export interface CustomActionButtonProps {
   handleUpload: (event: MouseEvent) => void;
   handleClear: (event: MouseEvent) => void;

packages/gboost-ui/src/FileUpload/DropOutline.tsx

@@ -48,7 +48,9 @@ const DropOutlineBox = styled("div", {
   color: theme.colors.blackA9,
   backgroundColor: theme.colors.gray3,
 });
-
+/**
+ * @deprecated
+ */
 export function DropOutline(props: DropOutlineProps): ReactElement {
   const handleDrag = useCallback((e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();

packages/gboost-ui/src/FileUpload/FileList.tsx

@@ -15,7 +15,9 @@ interface FileListProps {
   removeFile: (fileName: string, event: React.MouseEvent) => void;
   changeFileName: (oldFileName: string, newFileName: string) => boolean;
 }
-
+/**
+ * @deprecated
+ */
 export function FileList(props: FileListProps): ReactElement {
   const { filesData, setPendingFilesData, removeFile, changeFileName } = props;
   return (

packages/gboost-ui/src/FileUpload/FileName.tsx

@@ -22,7 +22,9 @@ const StyledTextField = styled(TextField, {
     backgroundColor: "$gray1",
   },
 });
-
+/**
+ * @deprecated
+ */
 export function FileName(props: FileNameProps): ReactElement {
   const { fileName, isDisabled, changeFileName } = props;
   const [inputText, setInputText] = useState(fileName);

packages/gboost-ui/src/FileUpload/FileUpload.tsx

@@ -75,7 +75,9 @@ interface FileUploadProps {
     };
   };
 }
-
+/**
+ * @deprecated
+ */
 export interface FileData {
   file: File;
   setPercent: React.Dispatch<React.SetStateAction<number>> | undefined;
@@ -87,6 +89,7 @@ export interface FileData {
 /**
  *
  * Component used for handling multi-file uploads to S3 buckets
+ * @deprecated
  */
 export function FileUpload(props: FileUploadProps): ReactElement {
   const {

packages/gboost-ui/src/FileUpload/FileUploadFunctions.ts

@@ -9,7 +9,9 @@ import { GraphQLError } from "graphql";
 import { type CompletedPart } from "@aws-sdk/client-s3";
 import { type ContextNotification, gQuery } from "../index.js";
 import { type FileData } from "./index.js";
-
+/**
+ * @deprecated
+ */
 export interface HandleUploadProps {
   file: File;
   setPercent: React.Dispatch<React.SetStateAction<number>>;

packages/gboost-ui/src/FileUpload/FileViewer.tsx

@@ -12,7 +12,9 @@ interface FileViewerProps {
   removeFile: (fileName: string, event: React.MouseEvent) => void;
   changeFileName: (oldFileName: string, newFileName: string) => boolean;
 }
-
+/**
+ * @deprecated
+ */
 export function FileViewer(props: FileViewerProps): ReactElement {
   const { fileData, setPendingFilesData, removeFile, changeFileName } = props;
   const [percent, setPercent] = useState(0);

packages/gboost-ui/src/FileUpload/HandleClick.ts

@@ -1,6 +1,8 @@
 import { type FileData } from "./FileUpload.js";
 import { type HandleClickParams } from "./HandleClickParams.js";
-
+/**
+ * @deprecated
+ */
 export function handleClick(params: HandleClickParams) {
   const {
     maxFiles,

packages/gboost-ui/src/FileUpload/HandleClickParams.ts

@@ -4,7 +4,9 @@ import {
   type UploadProps,
 } from "./FileUploadFunctions.js";
 import { type FileData } from "./index.js";
-
+/**
+ * @deprecated
+ */
 export interface HandleClickParams {
   maxFiles: number;
   pendingFilesData: FileData[];

packages/gboost-ui/src/FileUpload/ProgressBar.tsx

@@ -8,7 +8,9 @@ interface ProgressBarProps {
   columnStart?: number;
   columnEnd?: number;
 }
-
+/**
+ * @deprecated
+ */
 export function ProgressBar(props: ProgressBarProps) {
   const { barColor = theme.colors.primary5, progress } = props;
   return (

packages/gboost-ui/src/FileUpload/RemoveFile.tsx

@@ -5,7 +5,9 @@ interface RemoveFileProps {
   onClick: (fileName: string, event: MouseEvent) => void;
   fileName: string;
 }
-
+/**
+ * @deprecated
+ */
 export function RemoveFile(props: RemoveFileProps): ReactElement {
   const { onClick, fileName } = props;
   return (

packages/gboost-ui/src/Layout/Header/AccountMenu.tsx

@@ -17,7 +17,9 @@ interface AccountMenuProps {
   signOut: () => unknown;
   username: string;
 }
-
+/**
+ * @deprecated
+ */
 export function AccountMenu(props: AccountMenuProps): ReactElement {
   const { email, fullName, signOut, username } = props;
   const theme = useTheme();

packages/gboost-ui/src/Layout/Header/AccountSidebar.tsx

@@ -9,7 +9,9 @@ interface AccountSidebarProps {
   fullName: string;
   signOut: () => unknown;
 }
-
+/**
+ * @deprecated
+ */
 export function AccountSidebar(props: AccountSidebarProps): ReactElement {
   const { fullName, email, signOut } = props;
   return (

packages/gboost-ui/src/Layout/Header/Header.tsx

@@ -32,7 +32,9 @@ interface HeaderProps {
   setOpen: Dispatch<SetStateAction<boolean>>;
   HeaderTitle?: ReactElement;
 }
-
+/**
+ * @deprecated
+ */
 export function Header(props: HeaderProps): ReactElement {
   const { setOpen, open, AccountMenu, AccountSidebar, HeaderTitle } = props;
   const [leftOpen, setLeftOpen] = useState(false);

packages/gboost-ui/src/Layout/RightAside.tsx

@@ -14,7 +14,9 @@ interface RightAsideProps {
   children: ReactElement;
   css?: CSS;
 }
-
+/**
+ * @deprecated
+ */
 export function RightAside(props: RightAsideProps): ReactElement {
   const { css, children } = props;
   return <Container css={css}>{children}</Container>;

packages/gboost-ui/src/NotFound.tsx

@@ -1,5 +1,7 @@
 import { type ReactElement } from "react";
-
+/**
+ * @deprecated
+ */
 export function NotFound(): ReactElement {
   return <div>Not Found</div>;
 }

packages/gboost-ui/src/Notifications/Notification.tsx

@@ -47,7 +47,9 @@ const StyledAlert = styled(Alert, {
     },
   },
 });
-
+/**
+ * @deprecated
+ */
 export interface NotificationProps {
   body: string;
   /**
@@ -66,7 +68,9 @@ export interface NotificationProps {
   variation?: "info" | "error" | "warning" | "success";
   removeNotification: () => void;
 }
-
+/**
+ * @deprecated
+ */
 export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
   (props: NotificationProps, ref) => {
     const {

packages/gboost-ui/src/Notifications/NotificationContainer.tsx

@@ -41,7 +41,9 @@ interface NotificationContainerProps {
   onExited?: () => void;
   removeNotification: (id: string) => void;
 }
-
+/**
+ * @deprecated
+ */
 export function NotificationContainer(
   props: NotificationContainerProps
 ): ReactElement {

packages/gboost-ui/src/Notifications/Notifications.tsx

@@ -9,7 +9,9 @@ interface NotificationsProps {
   notifications: QueueNotification[];
   removeNotification: (id: string) => void;
 }
-
+/**
+ * @deprecated
+ */
 export function Notifications(props: NotificationsProps): ReactElement {
   const { notifications, removeNotification } = props;
   return (

packages/gboost-ui/src/OldQueryTable/QueryTable.tsx

@@ -349,7 +349,7 @@ const defaultErrorMessage = "Something went wrong";
  * side pagination. First class token pagination support with page number
  * pagination also supported. Features filtering, sorting, and custom column
  * widths through columns prop.
- * @deprecated
+ * @deprecatedd
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function QueryTable<T extends Record<string, any>>(

packages/gboost-ui/src/QueryTable/QueryTable.tsx

@@ -34,7 +34,7 @@ const densityToPadding: Record<Density, string> = {
  * selected as this state is always required for making data queries to your
  * API. However, these props are not required as leaving them `undefined` will
  * simply remove their functionality from the component.
- *
+ * @deprecated
  */
 export function QueryTable<T extends Row>(
   props: QueryTableProps<T>

packages/gboost-ui/src/QueryTable/SelectionCell.tsx

@@ -25,7 +25,9 @@ interface SelectionCellProps<T extends Row> {
   row: T;
   selected: boolean;
 }
-
+/**
+ * @deprecated
+ */
 export function SelectionCell<T extends Row>(
   props: SelectionCellProps<T>
 ): ReactElement {

packages/gboost-ui/src/QueryTable/types/column.ts

@@ -2,7 +2,9 @@ import { type ReactElement } from "react";
 import { type StringWithAutocomplete } from "../../types/string-with-autocomplete.js";
 import { type FilterOptions } from "./filter.js";
 import { type Row } from "./row.js";
-
+/**
+ * @deprecated
+ */
 export interface Column<T extends Row> {
   /**
    * Must be unique for all columns. Will be used to access your row's object's

packages/gboost-ui/src/QueryTable/types/filter.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated
+ */
 export interface Filter {
   columnId: any; // allows literal string typing by tRPC schema
   comparator: any; // allows literal string typing by tRPC schema

packages/gboost-ui/src/QueryTable/types/pagination.ts

@@ -2,6 +2,7 @@
  * Pagination state for `QueryTable`
  *
  * @link https://ui.docs.amplify.aws/react/components/pagination
+ * @deprecated
  */
 export interface Pagination {
   /**

packages/gboost-ui/src/QueryTable/types/props.ts

@@ -8,7 +8,9 @@ import { type Sort } from "./sort.js";
 import { type OnChangeSelectedParams } from "./selected.js";
 import { ActionBar } from "../ActionBar/ActionBar.js";
 import { type Row } from "./row.js";
-
+/**
+ * @deprecated
+ */
 export interface QueryTableProps<T extends Row> {
   /**
    * Background loading. Shows `Loader` below table header when true

packages/gboost-ui/src/QueryTable/types/selected.ts

@@ -1,5 +1,8 @@
 import { type Row } from "./row.js";
 
+/**
+ * @deprecated
+ */
 export interface OnChangeSelectedParams<T extends Row> {
   action: "select" | "unselect";
   actionRows: T[];

packages/gboost-ui/src/QueryTable/types/sort.ts

@@ -1,5 +1,8 @@
 export type SortDirection = "asc" | "desc";
 
+/**
+ * @deprecated
+ */
 export interface Sort {
   columnId: any; // allows literal string typing by tRPC schema
   direction: SortDirection;