Merge pull request #240 from tchryssos/tc-sotww-updates

Sotww updates

package.json

@@ -23,6 +23,7 @@
     "@auth0/nextjs-auth0": "^1.9.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@floating-ui/react": "^0.26.23",
     "@mui/base": "5.0.0-beta.4",
     "@playwright/test": "^1.35.0",
     "@prisma/client": "^4.15.0",

src/components/Tooltip.tsx

@@ -0,0 +1,88 @@
+import styled from '@emotion/styled';
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import { PropsWithChildren, useState } from 'react';
+
+import { pxToRem } from '~/logic/utils/styles/pxToRem';
+
+import { Box } from './box/Box';
+
+interface TooltipProps {
+  id: string;
+  tipText: string;
+  isLabeled: boolean;
+}
+
+const Target = styled.div``;
+
+const Tip = styled.span`
+  background: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  width: ${pxToRem(200)};
+  padding: ${({ theme }) => theme.spacing[8]};
+  border: 1px solid ${({ theme }) => theme.colors.text};
+`;
+
+export function Tooltip({
+  id,
+  children,
+  tipText,
+  isLabeled,
+}: PropsWithChildren<TooltipProps>) {
+  const [show, setShow] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: show,
+    whileElementsMounted: autoUpdate,
+    onOpenChange: setShow,
+    middleware: [offset(10), flip(), shift()],
+  });
+
+  const hover = useHover(context, { move: false });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, {
+    role: isLabeled ? 'tooltip' : 'label',
+  });
+
+  // Merge all the interactions into prop getters
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+    focus,
+    dismiss,
+    role,
+  ]);
+
+  return (
+    <Box position="relative">
+      {show && (
+        <Tip
+          id={id}
+          ref={refs.setFloating}
+          role="tooltip"
+          style={floatingStyles}
+          {...getFloatingProps()}
+        >
+          {tipText}
+        </Tip>
+      )}
+      <Target
+        aria-describedby={id}
+        ref={refs.setReference}
+        tabIndex={0}
+        {...getReferenceProps()}
+      >
+        {children}
+      </Target>
+    </Box>
+  );
+}

src/components/divider/Divider.tsx

@@ -0,0 +1,37 @@
+import { pxToRem } from '~/logic/utils/styles/pxToRem';
+
+import { Box } from '../box/Box';
+import { DividerWrapper, Label, Segment } from './components';
+import { DividerProps } from './types';
+
+export function Divider({
+  color = 'text',
+  vertical,
+  className,
+  label,
+}: DividerProps) {
+  if (vertical) {
+    return (
+      <Box
+        backgroundColor={color}
+        className={className}
+        height="100%"
+        width={pxToRem(1)}
+      />
+    );
+  }
+
+  return (
+    <DividerWrapper center className={className}>
+      {label && (
+        <>
+          <Segment color={color} />
+          <Label as="p" variant="body">
+            {label}
+          </Label>
+        </>
+      )}
+      <Segment color={color} />
+    </DividerWrapper>
+  );
+}

src/components/divider/components.tsx

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+
+import { FlexBox } from '../box/FlexBox';
+import { Text } from '../Text';
+import { DividerProps } from './types';
+
+export const DividerWrapper = styled(FlexBox)`
+  min-height: ${({ theme }) => theme.borderWidth[1]};
+  width: 100%;
+`;
+
+export const Segment = styled.div<Pick<DividerProps, 'color'>>`
+  width: 100%;
+  height: ${({ theme }) => theme.borderWidth[1]};
+  background-color: ${({ theme, color }) => theme.colors[color || 'text']};
+`;
+
+export const Label = styled(Text)`
+  padding: 0 ${({ theme }) => theme.spacing[16]};
+`;

src/components/divider/types.ts

@@ -0,0 +1,16 @@
+import { Color } from '~/typings/theme';
+
+type HorizDividerProps = {
+  label?: string;
+  vertical?: never | false;
+};
+
+type VerticalDividerProps = {
+  label?: never;
+  vertical: true;
+};
+
+export type DividerProps = {
+  color?: Color;
+  className?: string;
+} & (HorizDividerProps | VerticalDividerProps);

src/components/dropdowns/DropdownMenu.tsx

@@ -5,7 +5,7 @@ import { MouseEventHandler, useState } from 'react';
 
 import { FlexBox } from '../box/FlexBox';
 import { TextButton } from '../buttons/TextButton';
-import { Divider } from '../Divider';
+import { Divider } from '../divider/Divider';
 import { Link } from '../Link';
 import { Pane } from '../Pane';
 import { Text } from '../Text';

src/components/formNav/SaveButton.tsx

@@ -28,14 +28,14 @@ export function SaveButton({
   characterId = NEW_ID,
   rulebookName,
 }: SaveButtonProps) {
-  const [isSaving, setisSaving] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
   const { addNotifications } = useContext(NotificationsContext);
   const { getValues } = useFormContext();
 
   const { push } = useRouter();
 
   const onSave = async () => {
-    setisSaving(true);
+    setIsSaving(true);
     try {
       const resp = await saveCharacter({
         id: characterId as number | typeof NEW_ID,
@@ -66,7 +66,7 @@ export function SaveButton({
         ),
       ]);
     }
-    setisSaving(false);
+    setIsSaving(false);
   };
 
   return (

src/components/nav/NavBar.tsx

@@ -3,7 +3,10 @@ import styled from '@emotion/styled';
 
 import { HOME_ROUTE } from '~/constants/routing/client';
 import { createUsersRoute } from '~/constants/routing/shared';
-import { useBreakpointsLessThan } from '~/logic/hooks/useBreakpoints';
+import {
+  useBreakpointsAtLeast,
+  useBreakpointsLessThan,
+} from '~/logic/hooks/useBreakpoints';
 import { pxToRem } from '~/logic/utils/styles/pxToRem';
 import { getIconFromUser, getNameFromUser } from '~/logic/utils/user';
 import { Spacing } from '~/typings/theme';
@@ -13,6 +16,7 @@ import { LogoAscii } from '../ascii/LogoAscii';
 import { Box } from '../box/Box';
 import { FlexBox } from '../box/FlexBox';
 import { GridBox } from '../box/GridBox';
+import { Divider } from '../divider/Divider';
 import { DropdownMenuProps } from '../dropdowns/DropdownMenu';
 import { ProfileDropdown } from '../dropdowns/ProfileDropdown';
 import { RpgIcon } from '../icons/RpgIcon';
@@ -74,6 +78,11 @@ const UserName = styled(Text)`
   white-space: nowrap;
 `;
 
+const VertDivider = styled(Divider)`
+  align-self: stretch;
+  height: unset;
+`;
+
 interface NavBarProps {
   title: string;
   setIconPortalNode: (node: HTMLDivElement) => void;
@@ -88,6 +97,7 @@ export function NavBar({
   dropdownMenuItems,
 }: NavBarProps) {
   const isXxs = useBreakpointsLessThan('xs');
+  const atLeastMd = useBreakpointsAtLeast('md');
   const flexGap = isXxs ? 8 : 16;
   const { user } = useUser();
   const userName = getNameFromUser(user as StrictSessionUser);
@@ -110,27 +120,30 @@ export function NavBar({
           </LogoTitleBox>
           <FlexBox alignItems="center" gap={flexGap}>
             <Portal flexGap={flexGap} ref={setIconPortalNode} />
-            {userName && !isXxs && (
-              <Link
-                href={createUsersRoute((user as StrictSessionUser).id)}
-                isInternal
-              >
-                <GridBox
-                  alignItems="center"
-                  gap={8}
-                  gridTemplateColumns="auto 1fr"
-                  maxWidth={pxToRem(200)}
+            {userName && atLeastMd && (
+              <>
+                <VertDivider color="accentLight" vertical />
+                <Link
+                  href={createUsersRoute((user as StrictSessionUser).id)}
+                  isInternal
                 >
-                  <Box height={pxToRem(18)} width={pxToRem(18)}>
-                    <RpgIcon
-                      iconIndex={getIconFromUser(user as StrictSessionUser)}
-                    />
-                  </Box>
-                  <UserName as="p" overflow="hidden" textOverflow="ellipsis">
-                    {userName}
-                  </UserName>
-                </GridBox>
-              </Link>
+                  <GridBox
+                    alignItems="center"
+                    gap={8}
+                    gridTemplateColumns="auto 1fr"
+                    maxWidth={pxToRem(200)}
+                  >
+                    <Box height={pxToRem(18)} width={pxToRem(18)}>
+                      <RpgIcon
+                        iconIndex={getIconFromUser(user as StrictSessionUser)}
+                      />
+                    </Box>
+                    <UserName as="p" overflow="hidden" textOverflow="ellipsis">
+                      {userName}
+                    </UserName>
+                  </GridBox>
+                </Link>
+              </>
             )}
             <ProfileDropdown dropdownMenuItems={dropdownMenuItems} />
           </FlexBox>