fix: animations and styling

mscolnick · mscolnick · commit f9c3db566b6e · 2022-09-29T11:58:15.000-04:00
diff --git a/packages/actions-app/app/components/forms/CompositeInput.tsx b/packages/actions-app/app/components/forms/CompositeInput.tsx
@@ -1,5 +1,5 @@
 import { VStack } from '@chakra-ui/react';
-import React from 'react'
+import React from 'react';
 import { IOForm } from '../../types/response';
 import { FormView } from './FormView';
 
@@ -9,10 +9,11 @@ interface Props {
 }
 
 export const CompositeFormView: React.FC<Props> = ({ name, form }) => {
-  return <VStack gap={2}>
-    {Object.entries(form).map(([key, value]) => <FormView
-      key={key}
-      name={`${name}.${key}`}
-      view={value} />)}
-  </VStack>
-}
+  return (
+    <VStack gap={2} alignItems="stretch">
+      {Object.entries(form).map(([key, value]) => (
+        <FormView key={key} name={`${name}.${key}`} view={value} />
+      ))}
+    </VStack>
+  );
+};
diff --git a/packages/actions-app/app/components/forms/TableInput.tsx b/packages/actions-app/app/components/forms/TableInput.tsx
@@ -1,31 +1,46 @@
-import { TableContainer, Table, TableCaption, Thead, Tr, Th, Tbody, Td, Checkbox, Radio, RadioGroup } from '@chakra-ui/react';
-import React from 'react'
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  Checkbox,
+  Radio,
+  RadioGroup,
+} from '@chakra-ui/react';
+import React from 'react';
 
 interface Props {
   helperText?: string;
   name: string;
   headers: string[];
   isMultiSelect: boolean;
   initialSelection?: string[];
-  rows: { key: string; cells: string[] }[]
+  rows: { key: string; cells: string[] }[];
 }
 
-export const TableInput: React.FC<Props> = ({
-  name,
-  headers,
-  isMultiSelect,
-  initialSelection,
-  helperText,
-  rows,
-}) => {
+export const TableInput: React.FC<Props> = ({ name, headers, isMultiSelect, initialSelection, helperText, rows }) => {
   const renderCheckbox = (rowKey: string) => {
-    return isMultiSelect ? <Checkbox name={name} value={rowKey} defaultChecked={initialSelection?.includes(rowKey)} /> : <Radio name={name} value={rowKey} defaultChecked={initialSelection?.includes(rowKey)} />;
-  }
+    return isMultiSelect ? (
+      <Checkbox name={name} value={rowKey} defaultChecked={initialSelection?.includes(rowKey)} />
+    ) : (
+      <Radio name={name} value={rowKey} defaultChecked={initialSelection?.includes(rowKey)} />
+    );
+  };
 
   return (
     <RadioGroup name={name}>
-      <TableContainer backgroundColor="white" boxShadow='sm' border="1px solid" borderColor='gray.200' borderRadius='md'>
-        <Table variant='simple'>
+      <TableContainer
+        backgroundColor="white"
+        boxShadow="sm"
+        border="1px solid"
+        borderColor="gray.200"
+        borderRadius="md"
+      >
+        <Table variant="simple">
           <TableCaption>{helperText}</TableCaption>
           <Thead>
             <Tr>
@@ -40,9 +55,7 @@ export const TableInput: React.FC<Props> = ({
             {rows.map((row) => (
               <Tr key={row.key}>
                 {/* checkbox */}
-                <Td>
-                  {renderCheckbox(row.key)}
-                </Td>
+                <Td>{renderCheckbox(row.key)}</Td>
                 {row.cells.map((cell) => (
                   <Td key={cell}>{cell}</Td>
                 ))}
@@ -52,5 +65,5 @@ export const TableInput: React.FC<Props> = ({
         </Table>
       </TableContainer>
     </RadioGroup>
-  )
-}
+  );
+};
diff --git a/packages/actions-app/app/components/layout/Page.tsx b/packages/actions-app/app/components/layout/Page.tsx
@@ -1,15 +1,19 @@
-import { HStack, Flex, Text, } from '@chakra-ui/react';
+import { HStack, Flex, Text } from '@chakra-ui/react';
+import { useTransition } from '@remix-run/react';
+import { motion } from 'framer-motion';
 
 import React from 'react';
 
 interface Props {
   title?: string[] | string;
   links?: { link: string; label: string }[];
+  animationKey?: string;
 }
 
 const HEADER_HEIGHT = '60px';
 
-export const Page: React.FC<React.PropsWithChildren<Props>> = ({ title, children }) => {
+export const Page: React.FC<React.PropsWithChildren<Props>> = ({ title, children, animationKey }) => {
+  const transition = useTransition();
   const titles = Array.isArray(title) ? title : [title];
   return (
     <Flex flexDirection="column" height="100vh">
@@ -23,7 +27,15 @@ export const Page: React.FC<React.PropsWithChildren<Props>> = ({ title, children
         </HStack>
       </HStack>
       <Flex flex={1} backgroundColor="gray.50" p={10}>
-        {children}
+        <motion.main
+          key={animationKey}
+          initial={{ x: '-10%', opacity: 0 }}
+          animate={{ x: '0', opacity: 1 }}
+          exit={{ y: '-10%', opacity: 0 }}
+          transition={{ duration: 0.4 }}
+        >
+          {transition.state !== 'loading' && children}
+        </motion.main>
       </Flex>
     </Flex>
   );
diff --git a/packages/actions-app/app/components/main/Sidebar.tsx b/packages/actions-app/app/components/main/Sidebar.tsx
@@ -22,7 +22,7 @@ interface LinkItemProps {
   to: `/${string}`;
 }
 const LinkItems: LinkItemProps[] = [
-  { name: 'Actions', icon: 'fa:home', to: '/actions' },
+  // { name: 'Actions', icon: 'fa:home', to: '/actions' },
   // { name: "Settings", icon: "fa:cog", to: "/settings" },
 ];
 
@@ -64,10 +64,11 @@ const SidebarContent = ({ onClose, ...rest }: SidebarProps) => {
       w={{ base: 'full', md: 60 }}
       pos="fixed"
       h="full"
+      zIndex={2}
       {...rest}
     >
       <Flex h="20" alignItems="center" mx="8" justifyContent="space-between">
-        <Text fontSize="2xl" fontFamily="monospace" fontWeight="bold">
+        <Text as={RemixLink} fontSize="2xl" fontFamily="monospace" fontWeight="bold" to={getUrl('/actions')}>
           Actions
         </Text>
         <CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
diff --git a/packages/actions-app/app/root.tsx b/packages/actions-app/app/root.tsx
@@ -1,14 +1,15 @@
+import { AnimatePresence } from 'framer-motion';
 import React, { useContext, useEffect } from 'react';
 import { withEmotionCache } from '@emotion/react';
-import { ChakraProvider, GlobalStyle } from '@chakra-ui/react';
+import { ChakraProvider } from '@chakra-ui/react';
 import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useCatch, useLoaderData } from '@remix-run/react';
 import { MetaFunction, LinksFunction, json } from '@remix-run/node';
 
 import { ServerStyleContext, ClientStyleContext } from './context';
 
 export const meta: MetaFunction = () => ({
   charset: 'utf-8',
-  title: 'ActionsZ',
+  title: 'Actions',
   viewport: 'width=device-width,initial-scale=1',
 });
 
@@ -78,8 +79,9 @@ export default function App() {
   return (
     <Document>
       <ChakraProvider>
-        <GlobalStyle />
-        <Outlet />
+        <AnimatePresence exitBeforeEnter>
+          <Outlet />
+        </AnimatePresence>
       </ChakraProvider>
     </Document>
   );
diff --git a/packages/actions-app/app/routes/actions.tsx b/packages/actions-app/app/routes/actions.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from '@remix-run/react';
-import type { LoaderFunction } from '@remix-run/server-runtime';
+import type { LoaderFunction, MetaFunction } from '@remix-run/server-runtime';
 import { json } from '@remix-run/server-runtime';
 
 import { AppContainer } from '../components/main/AppContainer';
@@ -9,6 +9,12 @@ type LoaderData = {
   userId: string;
 };
 
+export const meta: MetaFunction = () => {
+  return {
+    title: 'Actions',
+  };
+};
+
 export const loader: LoaderFunction = async ({ request }) => {
   const userId = await requireUserId(request);
   return json<LoaderData>({ userId });
diff --git a/packages/actions-app/app/routes/actions/$actionId.tsx b/packages/actions-app/app/routes/actions/$actionId.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@chakra-ui/react';
-import type { LoaderFunction } from '@remix-run/node';
+import type { LoaderFunction, MetaFunction } from '@remix-run/node';
 import { json } from '@remix-run/node';
-import { Link, useLoaderData } from '@remix-run/react';
+import { Link, useLoaderData, useLocation } from '@remix-run/react';
 import invariant from 'tiny-invariant';
 
 import { Page } from '../../components/layout/Page';
@@ -15,6 +15,12 @@ type LoaderData = {
   action: Action;
 };
 
+export const meta: MetaFunction<LoaderData> = ({ data }) => {
+  return {
+    title: `${data.action.title} | Actions`,
+  };
+};
+
 export const loader: LoaderFunction = async ({ params, context = DEFAULT_CONTEXT }) => {
   context = defaultContext(context);
   invariant(params.actionId, 'actionId not found');
@@ -27,7 +33,7 @@ export default function ActionDetailsPage() {
   const { action, actionId } = useLoaderData() as LoaderData;
 
   return (
-    <Page title={['Actions', action.title]}>
+    <Page title={['Actions', action.title]} animationKey={useLocation().pathname}>
       <Button as={Link} colorScheme="blue" to={getUrl(`/actions/${actionId}/workflows/new`)}>
         New
       </Button>
diff --git a/packages/actions-app/app/routes/actions/$actionId.workflows.$workflowId.tsx b/packages/actions-app/app/routes/actions/$actionId.workflows.$workflowId.tsx
@@ -1,7 +1,21 @@
-import { Alert, AlertDescription, AlertIcon, AlertTitle, Button, HStack, SimpleGrid, Spinner, Stack, Stat, StatHelpText, StatLabel, Table, TableContainer, Tbody, Td, Text, Tr, VStack } from '@chakra-ui/react';
-import type { ActionFunction, LoaderFunction } from '@remix-run/node';
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Button,
+  SimpleGrid,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Text,
+  Tr,
+  VStack,
+} from '@chakra-ui/react';
+import type { ActionFunction, LoaderFunction, MetaFunction } from '@remix-run/node';
 import { json } from '@remix-run/node';
-import { Form, useActionData, useLoaderData, useSearchParams, useTransition } from '@remix-run/react';
+import { Form, useActionData, useLoaderData, useLocation, useSearchParams, useTransition } from '@remix-run/react';
 import invariant from 'tiny-invariant';
 
 import { FormView } from '../../components/forms/FormView';
@@ -54,6 +68,12 @@ export const action: ActionFunction = async ({ request, params, context }) => {
   return json<LoaderData>({ action, ...response });
 };
 
+export const meta: MetaFunction<LoaderData> = ({ data }) => {
+  return {
+    title: `${data.action.title} | Actions`,
+  };
+};
+
 export default function WorkflowDetailsPage() {
   const { view, workflowId, breadcrumbs, action } = useLoaderData() as LoaderData;
   const [search] = useSearchParams();
@@ -66,32 +86,34 @@ export default function WorkflowDetailsPage() {
   const loading = transition.state === 'loading' || transition.state === 'submitting';
 
   return (
-    <Page title={['Actions', action.title, `Workflow ${workflowId.slice(0, 8)}`]}>
+    <Page title={['Actions', action.title, `Workflow ${workflowId.slice(0, 8)}`]} animationKey={useLocation().key}>
       <SimpleGrid columns={2} spacing={10}>
         <Form method="post">
           <VStack alignItems="flex-start" spacing={6}>
-            {loading && <Spinner size='lg' />}
-            {!loading && <FormView name={ROOT} view={currentView} />}
-            {hasNext && !loading && (
-              <Button colorScheme="teal" variant="solid" type="submit">
+            <FormView name={ROOT} view={currentView} />
+            {hasNext && (
+              <Button isLoading={loading} colorScheme="teal" variant="solid" type="submit">
                 Submit
               </Button>
             )}
           </VStack>
         </Form>
         <VStack alignItems="flex-end" spacing={6}>
-          <TableContainer backgroundColor="white" boxShadow='sm' border="1px solid" borderColor='gray.200' borderRadius='md'>
-            <Table variant='simple'>
+          <TableContainer
+            backgroundColor="white"
+            boxShadow="sm"
+            border="1px solid"
+            borderColor="gray.200"
+            borderRadius="md"
+          >
+            <Table variant="simple">
               <Tbody>
                 {breadcrumbs.map((breadcrumb, idx) => (
                   <Tr key={`${breadcrumb.key}-${idx}`}>
-                    <Td >
-                      <Text fontWeight={600}>
-                        {breadcrumb.key}
-                      </Text>
-                    </Td>
-                    <Td>{breadcrumb.value}
+                    <Td>
+                      <Text fontWeight={600}>{breadcrumb.key}</Text>
                     </Td>
+                    <Td>{breadcrumb.value}</Td>
                   </Tr>
                 ))}
               </Tbody>
@@ -101,7 +123,9 @@ export default function WorkflowDetailsPage() {
             <Alert status="info" flexDirection="column" alignSelf="flex-start">
               <AlertIcon />
               <AlertTitle>Debug</AlertTitle>
-              <AlertDescription sx={{ whiteSpace: 'pre' }}>{JSON.stringify({ view, workflowId, breadcrumbs }, null, 2)}</AlertDescription>
+              <AlertDescription sx={{ whiteSpace: 'pre' }}>
+                {JSON.stringify({ view, workflowId, breadcrumbs }, null, 2)}
+              </AlertDescription>
             </Alert>
           )}
         </VStack>
diff --git a/packages/actions-app/app/routes/actions/index.tsx b/packages/actions-app/app/routes/actions/index.tsx
diff --git a/packages/actions-app/app/routes/login.tsx b/packages/actions-app/app/routes/login.tsx
diff --git a/packages/actions-app/package.json b/packages/actions-app/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
