move layout components to @app/client

@app/components/src/OrganizationSettingsLayout.tsx → @app/client/src/layouts/OrganizationSettingsLayout.tsx

@@ -1,10 +1,10 @@
+import { StandardWidth } from "@app/components";
 import { type OrganizationPage_OrganizationFragment } from "@app/graphql";
 import { Layout, Menu, Typography } from "antd";
 import Link from "next/link";
 import React, { useMemo } from "react";
 
 import { contentMinHeight } from "./SharedLayout";
-import { StandardWidth } from "./StandardWidth";
 
 type TextProps = React.ComponentProps<typeof Typography.Text>;
 const { Text } = Typography;

@app/components/src/Redirect.tsx → @app/client/src/layouts/Redirect.tsx

@@ -1,11 +1,10 @@
 import { NetworkStatus, useApolloClient } from "@apollo/client";
+import { H3, StandardWidth } from "@app/components";
 import { Skeleton } from "antd";
 import Router from "next/router";
 import React, { useEffect } from "react";
 
 import { SharedLayout } from "./SharedLayout";
-import { StandardWidth } from "./StandardWidth";
-import { H3 } from "./Text";
 
 export interface RedirectProps {
   href: string;

@app/components/src/SettingsLayout.tsx → @app/client/src/layouts/SettingsLayout.tsx

@@ -1,3 +1,4 @@
+import { StandardWidth, Warn } from "@app/components";
 import { Layout, Menu, Typography } from "antd";
 import Link from "next/link";
 import { type NextRouter, useRouter } from "next/router";
@@ -12,8 +13,6 @@ import {
   type SharedLayoutChildProps,
   type SharedLayoutProps,
 } from "./SharedLayout";
-import { StandardWidth } from "./StandardWidth";
-import { Warn } from "./Warn";
 
 type TextProps = React.ComponentProps<typeof Typography.Text>;
 const { Text } = Typography;

@app/components/src/SharedLayout.tsx → @app/client/src/layouts/SharedLayout.tsx

@@ -4,6 +4,7 @@ import {
   type QueryResult,
   useApolloClient,
 } from "@apollo/client";
+import { ErrorAlert, H3, StandardWidth, Warn } from "@app/components";
 import { companyName, projectName } from "@app/config";
 import {
   type SharedLayout_QueryFragment,
@@ -18,22 +19,10 @@ import Router, { useRouter } from "next/router";
 import * as React from "react";
 import { useCallback } from "react";
 
-import { ErrorAlert, H3, StandardWidth, Warn } from ".";
 import { Redirect } from "./Redirect";
 
 const { Header, Content, Footer } = Layout;
 const { Text } = Typography;
-/*
- * For some reason, possibly related to the interaction between
- * `babel-plugin-import` and https://github.com/babel/babel/pull/9766, we can't
- * directly export these values, but if we reference them and re-export then we
- * can.
- *
- * TODO: change back to `export { Row, Col, Link }` when this issue is fixed.
- */
-const _babelHackRow = Row;
-const _babelHackCol = Col;
-export { _babelHackCol as Col, Link, _babelHackRow as Row };
 
 export const contentMinHeight = "calc(100vh - 64px - 70px)";
 

@app/client/src/pages/_error.tsx

@@ -1,16 +1,12 @@
-import {
-  ErrorOccurred,
-  FourOhFour,
-  H2,
-  P,
-  SharedLayout,
-} from "@app/components";
+import { ErrorOccurred, FourOhFour, H2, P } from "@app/components";
 import { useSharedQuery } from "@app/graphql";
 import { Alert, Col, Row } from "antd";
 import { type NextPage } from "next";
 import Link from "next/link";
 import * as React from "react";
 
+import { SharedLayout } from "../layouts/SharedLayout";
+
 const isDev = process.env.NODE_ENV !== "production";
 
 interface SocialAuthErrorProps {

@app/client/src/pages/create-organization/index.tsx

@@ -1,6 +1,5 @@
 import { PageHeader } from "@ant-design/pro-layout";
 import { type ApolloError } from "@apollo/client";
-import { AuthRestrict, Redirect, SharedLayout } from "@app/components";
 import {
   type CreatedOrganizationFragment,
   useCreateOrganizationMutation,
@@ -20,6 +19,9 @@ import { type Store } from "rc-field-form/lib/interface";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import slugify from "slugify";
 
+import { Redirect } from "../../layouts/Redirect";
+import { AuthRestrict, SharedLayout } from "../../layouts/SharedLayout";
+
 const { useForm } = Form;
 const { Text } = Typography;
 

@app/client/src/pages/forgot.tsx

@@ -1,6 +1,5 @@
 import { UserOutlined } from "@ant-design/icons";
 import { type ApolloError } from "@apollo/client";
-import { AuthRestrict, SharedLayout } from "@app/components";
 import { useForgotPasswordMutation, useSharedQuery } from "@app/graphql";
 import { extractError, getCodeFromError } from "@app/lib";
 import { Alert, Button, Form, Input, type InputRef } from "antd";
@@ -9,6 +8,8 @@ import Link from "next/link";
 import { type Store } from "rc-field-form/lib/interface";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
+import { AuthRestrict, SharedLayout } from "../layouts/SharedLayout";
+
 const { useForm } = Form;
 
 const ForgotPassword: NextPage = () => {

@app/client/src/pages/index.tsx

@@ -1,10 +1,11 @@
 import { Button, Col, Divider, Row, Typography } from "antd";
 import * as React from "react";
 const { Text, Title, Paragraph } = Typography;
-import { SharedLayout } from "@app/components";
 import { useSharedQuery } from "@app/graphql";
 import { type NextPage } from "next";
 
+import { SharedLayout } from "../layouts/SharedLayout";
+
 // Convenience helper
 const Li = ({ children, ...props }: any) => (
   <li {...props}>

@app/client/src/pages/invitations/accept.tsx

@@ -1,12 +1,5 @@
 import { type QueryResult } from "@apollo/client";
-import {
-  AuthRestrict,
-  ButtonLink,
-  ErrorAlert,
-  Redirect,
-  SharedLayout,
-  SpinPadded,
-} from "@app/components";
+import { ButtonLink, ErrorAlert, SpinPadded } from "@app/components";
 import {
   type InvitationDetailQuery,
   type InvitationDetailQueryVariables,
@@ -21,6 +14,9 @@ import Router, { type NextRouter, useRouter } from "next/router";
 import * as qs from "querystring";
 import React, { type FC } from "react";
 
+import { Redirect } from "../../layouts/Redirect";
+import { AuthRestrict, SharedLayout } from "../../layouts/SharedLayout";
+
 interface IProps {
   id: string | null;
   code: string | null;

@app/client/src/pages/login.tsx

@@ -1,15 +1,6 @@
 import { LockOutlined, UserAddOutlined, UserOutlined } from "@ant-design/icons";
 import { type ApolloError, useApolloClient } from "@apollo/client";
-import {
-  AuthRestrict,
-  ButtonLink,
-  Col,
-  Redirect,
-  Row,
-  SharedLayout,
-  type SharedLayoutChildProps,
-  SocialLoginOptions,
-} from "@app/components";
+import { ButtonLink, Col, Row, SocialLoginOptions } from "@app/components";
 import { useLoginMutation, useSharedQuery } from "@app/graphql";
 import {
   extractError,
@@ -23,6 +14,13 @@ import Router from "next/router";
 import { type Store } from "rc-field-form/lib/interface";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
+import { Redirect } from "../layouts/Redirect";
+import {
+  AuthRestrict,
+  SharedLayout,
+  type SharedLayoutChildProps,
+} from "../layouts/SharedLayout";
+
 interface LoginProps {
   next: string | null;
 }

@app/client/src/pages/o/[slug]/index.tsx

@@ -1,7 +1,6 @@
 import { PageHeader } from "@ant-design/pro-layout";
 import {
   ButtonLink,
-  SharedLayout,
   useOrganizationLoading,
   useOrganizationSlug,
 } from "@app/components";
@@ -13,6 +12,8 @@ import { Col, Empty, Row } from "antd";
 import { type NextPage } from "next";
 import React, { type FC } from "react";
 
+import { SharedLayout } from "../../../layouts/SharedLayout";
+
 const OrganizationPage: NextPage = () => {
   const slug = useOrganizationSlug();
   const query = useOrganizationPageQuery({ variables: { slug } });

@app/client/src/pages/o/[slug]/settings/delete.tsx

@@ -1,11 +1,8 @@
 import { PageHeader } from "@ant-design/pro-layout";
 import { type ApolloError } from "@apollo/client";
 import {
-  AuthRestrict,
   ErrorAlert,
-  OrganizationSettingsLayout,
   P,
-  SharedLayout,
   useOrganizationLoading,
   useOrganizationSlug,
 } from "@app/components";
@@ -20,6 +17,9 @@ import { type NextPage } from "next";
 import { useRouter } from "next/router";
 import React, { type FC, useCallback, useState } from "react";
 
+import { OrganizationSettingsLayout } from "../../../../layouts/OrganizationSettingsLayout";
+import { AuthRestrict, SharedLayout } from "../../../../layouts/SharedLayout";
+
 const OrganizationSettingsPage: NextPage = () => {
   const slug = useOrganizationSlug();
   const query = useOrganizationPageQuery({ variables: { slug } });

@app/client/src/pages/o/[slug]/settings/index.tsx

@@ -1,12 +1,5 @@
 import { PageHeader } from "@ant-design/pro-layout";
-import {
-  AuthRestrict,
-  OrganizationSettingsLayout,
-  Redirect,
-  SharedLayout,
-  useOrganizationLoading,
-  useOrganizationSlug,
-} from "@app/components";
+import { useOrganizationLoading, useOrganizationSlug } from "@app/components";
 import {
   type OrganizationPage_OrganizationFragment,
   useOrganizationPageQuery,
@@ -19,6 +12,10 @@ import Router, { useRouter } from "next/router";
 import { type Store } from "rc-field-form/lib/interface";
 import React, { type FC, useCallback, useState } from "react";
 
+import { OrganizationSettingsLayout } from "../../../../layouts/OrganizationSettingsLayout";
+import { Redirect } from "../../../../layouts/Redirect";
+import { AuthRestrict, SharedLayout } from "../../../../layouts/SharedLayout";
+
 const { useForm } = Form;
 
 const OrganizationSettingsPage: NextPage = () => {

@app/client/src/pages/o/[slug]/settings/members.tsx

@@ -1,12 +1,5 @@
 import { PageHeader } from "@ant-design/pro-layout";
-import {
-  AuthRestrict,
-  OrganizationSettingsLayout,
-  Redirect,
-  SharedLayout,
-  useOrganizationLoading,
-  useOrganizationSlug,
-} from "@app/components";
+import { useOrganizationLoading, useOrganizationSlug } from "@app/components";
 import {
   type OrganizationMembers_MembershipFragment,
   type OrganizationMembers_OrganizationFragment,
@@ -34,6 +27,10 @@ import { useRouter } from "next/router";
 import { type Store } from "rc-field-form/lib/interface";
 import React, { type FC, useCallback, useState } from "react";
 
+import { OrganizationSettingsLayout } from "../../../../layouts/OrganizationSettingsLayout";
+import { Redirect } from "../../../../layouts/Redirect";
+import { AuthRestrict, SharedLayout } from "../../../../layouts/SharedLayout";
+
 const { useForm } = Form;
 
 const OrganizationSettingsPage: NextPage = () => {

@app/client/src/pages/register.tsx

@@ -1,11 +1,6 @@
 import { QuestionCircleOutlined } from "@ant-design/icons";
 import { type ApolloError, useApolloClient } from "@apollo/client";
-import {
-  AuthRestrict,
-  PasswordStrength,
-  Redirect,
-  SharedLayout,
-} from "@app/components";
+import { PasswordStrength } from "@app/components";
 import { useRegisterMutation, useSharedQuery } from "@app/graphql";
 import {
   extractError,
@@ -28,6 +23,8 @@ import React, {
   useState,
 } from "react";
 
+import { Redirect } from "../layouts/Redirect";
+import { AuthRestrict, SharedLayout } from "../layouts/SharedLayout";
 import { isSafe } from "./login";
 
 const { useForm } = Form;

@app/client/src/pages/reset.tsx

@@ -1,10 +1,4 @@
-import {
-  AuthRestrict,
-  Col,
-  PasswordStrength,
-  Row,
-  SharedLayout,
-} from "@app/components";
+import { Col, PasswordStrength, Row } from "@app/components";
 import { useResetPasswordMutation, useSharedQuery } from "@app/graphql";
 import { formItemLayout, setPasswordInfo, tailFormItemLayout } from "@app/lib";
 import { Alert, Button, Form, Input } from "antd";
@@ -13,6 +7,8 @@ import { type NextPage } from "next";
 import { type Store } from "rc-field-form/lib/interface";
 import React, { type FocusEvent, useCallback, useState } from "react";
 
+import { AuthRestrict, SharedLayout } from "../layouts/SharedLayout";
+
 const { useForm } = Form;
 
 interface IProps {

@app/client/src/pages/settings/accounts.tsx

@@ -2,7 +2,6 @@ import { GithubFilled } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-layout";
 import {
   ErrorAlert,
-  SettingsLayout,
   SocialLoginOptions,
   SpinPadded,
   Strong,
@@ -17,6 +16,8 @@ import { Avatar, Card, List, Modal, Spin } from "antd";
 import { type NextPage } from "next";
 import React, { useCallback, useState } from "react";
 
+import { SettingsLayout } from "../../layouts/SettingsLayout";
+
 const AUTH_NAME_LOOKUP: Record<string, string | undefined> = {
   github: "GitHub",
   facebook: "Facebook",

@app/client/src/pages/settings/delete.tsx

@@ -1,6 +1,6 @@
 import { PageHeader } from "@ant-design/pro-layout";
 import { type ApolloError } from "@apollo/client";
-import { ErrorAlert, P, SettingsLayout } from "@app/components";
+import { ErrorAlert, P } from "@app/components";
 import {
   useConfirmAccountDeletionMutation,
   useRequestAccountDeletionMutation,
@@ -12,6 +12,8 @@ import { type NextPage } from "next";
 import { useRouter } from "next/router";
 import React, { useCallback, useState } from "react";
 
+import { SettingsLayout } from "../../layouts/SettingsLayout";
+
 const { Text } = Typography;
 
 const Settings_Accounts: NextPage = () => {

@app/client/src/pages/settings/emails.tsx

@@ -1,12 +1,6 @@
 import { PageHeader } from "@ant-design/pro-layout";
 import { type ApolloError } from "@apollo/client";
-import {
-  ErrorAlert,
-  P,
-  Redirect,
-  SettingsLayout,
-  Strong,
-} from "@app/components";
+import { ErrorAlert, P, Strong } from "@app/components";
 import {
   type EmailsForm_UserEmailFragment,
   useAddEmailMutation,
@@ -26,6 +20,9 @@ import { type NextPage } from "next";
 import { type Store } from "rc-field-form/lib/interface";
 import React, { useCallback, useState } from "react";
 
+import { Redirect } from "../../layouts/Redirect";
+import { SettingsLayout } from "../../layouts/SettingsLayout";
+
 const { useForm } = Form;
 
 function Email({

@app/client/src/pages/settings/index.tsx

@@ -1,6 +1,6 @@
 import { PageHeader } from "@ant-design/pro-layout";
 import { type ApolloError } from "@apollo/client";
-import { ErrorAlert, Redirect, SettingsLayout } from "@app/components";
+import { ErrorAlert } from "@app/components";
 import {
   type ProfileSettingsForm_UserFragment,
   useSettingsProfileQuery,
@@ -17,6 +17,9 @@ import { type NextPage } from "next";
 import { type Store } from "rc-field-form/lib/interface";
 import React, { useCallback, useState } from "react";
 
+import { Redirect } from "../../layouts/Redirect";
+import { SettingsLayout } from "../../layouts/SettingsLayout";
+
 const { useForm } = Form;
 
 const Settings_Profile: NextPage = () => {