MMB-231: [Spaces Demo] Edit name

demo/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@ably-labs/react-hooks": "^3.0.0-canary.1",
-    "@ably/spaces": "^0.1.0",
+    "@ably/spaces": "^0.1.2",
     "ably": "^1.2.43",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.9",
@@ -25,7 +25,8 @@
     "react": "^18.2.0",
     "react-contenteditable": "^3.3.7",
     "react-dom": "^18.2.0",
-    "sanitize-html": "^2.11.0"
+    "sanitize-html": "^2.11.0",
+    "tailwindcss-labeled-groups": "^0.0.2"
   },
   "devDependencies": {
     "@types/lodash.assign": "^4.2.7",

demo/src/App.tsx

@@ -1,13 +1,14 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
-import { Header, SlideMenu, SpacesContext, CurrentSlide, AblySvg, slides } from './components';
+import { Header, SlideMenu, SpacesContext, CurrentSlide, AblySvg, slides, Modal, NameModalContext } from './components';
 import { getRandomName, getRandomColor } from './utils';
 import { useMembers } from './hooks';
 import { PreviewProvider } from './components/PreviewContext.tsx';
 
 const App = () => {
   const space = useContext(SpacesContext);
   const { self, others } = useMembers();
+  const [isModalVisible, setIsModalVisible] = useState(false);
 
   useEffect(() => {
     if (!space || self?.profileData.name) return;
@@ -16,38 +17,42 @@ const App = () => {
       const name = getRandomName();
       await space.enter({ name, color: getRandomColor() });
       await space.locations.set({ slide: `${0}`, element: null });
+      setIsModalVisible(true);
     };
 
     enter();
   }, [space, self?.profileData.name]);
 
   return (
-    <div className="min-w-[375px]">
-      <Header
-        self={self}
-        others={others}
-      />
-      <div className="text-ably-charcoal-grey bg-slate-500">
-        <main>
-          <section
-            id="feature-display"
-            className="absolute gap-12 bg-[#F7F6F9] w-full h-[calc(100%-80px)] -z-10 overflow-y-hidden overflow-x-hidden flex justify-between min-w-[375px] xs:flex-col md:flex-row"
+    <NameModalContext.Provider value={{ isModalVisible, setIsModalVisible }}>
+      <div className="min-w-[375px]">
+        <Header
+          self={self}
+          others={others}
+        />
+        <div className="text-ably-charcoal-grey bg-slate-500">
+          <main>
+            <section
+              id="feature-display"
+              className="absolute gap-12 bg-[#F7F6F9] w-full h-[calc(100%-80px)] -z-10 overflow-y-hidden overflow-x-hidden flex justify-between min-w-[375px] xs:flex-col md:flex-row"
+            >
+              <PreviewProvider preview>
+                <SlideMenu slides={slides} />
+              </PreviewProvider>
+              <CurrentSlide slides={slides} />
+            </section>
+          </main>
+          <a
+            className="absolute right-6 bottom-6 items-center flex flex-row rounded-md bg-ably-black h-[56px] px-[20px] py-[11px] text-white font-medium"
+            href="https://ably.com/sign-up"
           >
-            <PreviewProvider preview>
-              <SlideMenu slides={slides} />
-            </PreviewProvider>
-            <CurrentSlide slides={slides} />
-          </section>
-        </main>
-        <a
-          className="absolute right-6 bottom-6 items-center flex flex-row rounded-md bg-ably-black h-[56px] px-[20px] py-[11px] text-white font-medium"
-          href="https://ably.com/sign-up"
-        >
-          Powered by
-          <AblySvg className="ml-2" />
-        </a>
+            Powered by
+            <AblySvg className="ml-2" />
+          </a>
+        </div>
+        <Modal self={self} />
       </div>
-    </div>
+    </NameModalContext.Provider>
   );
 };
 

demo/src/components/Avatar.tsx

@@ -20,7 +20,7 @@ export const Avatar = ({
 }: AvatarProps) => {
   const initials = profileData.name
     .split(' ')
-    .map((n: string) => n[0])
+    .map((n: string) => n[0].toUpperCase())
     .join('');
 
   return (

demo/src/components/AvatarInfo.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import cn from 'classnames';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { type SpaceMember } from '@ably/spaces';
 import { type ProfileData } from '../utils/types';
+import { NameModalContext, PencilSvg } from '.';
 
 type Props = Omit<SpaceMember, 'profileData'> & {
   isSelf?: boolean;
@@ -16,6 +17,7 @@ type Props = Omit<SpaceMember, 'profileData'> & {
 dayjs.extend(relativeTime);
 
 export const AvatarInfo = ({ isSelf, isConnected, profileData, isList = false, lastEvent }: Props) => {
+  const { setIsModalVisible } = useContext(NameModalContext);
   const [currentTime, setCurrentTime] = useState(dayjs());
 
   const lastSeen = (timestamp: number) => {
@@ -45,16 +47,20 @@ export const AvatarInfo = ({ isSelf, isConnected, profileData, isList = false, l
   }, [isConnected]);
 
   return isSelf ? (
-    <div
-      data-id="avatar-hover"
-      className="bg-slate-800 rounded-lg p-2 hidden group-hover:block absolute top-full mt-2"
-    >
-      <p
-        data-id="avatar-full-name"
-        className="text-sm font-semibold text-white whitespace-nowrap"
+    <div className="pt-2 absolute top-full hidden group-hover:block">
+      <button
+        data-id="avatar-hover"
+        onClick={() => setIsModalVisible(true)}
+        className="bg-slate-800 rounded-lg p-2 flex items-center justify-center text-sm font-semibold text-white whitespace-nowrap overflow-hidden relative group-inner"
       >
         {profileData.name} (You)
-      </p>
+        <div className="absolute flex items-center justify-center right-0 bottom-0 top-0 my-auto bg-gradient-to-r from-transparent from-10% to-slate-800 w-8 h-6 to-30% opacity-0 duration-150 transition-all translate-x-2 group-inner-hover:translate-x-0 group-inner-hover:opacity-100">
+          <PencilSvg
+            width={16}
+            height={16}
+          />
+        </div>
+      </button>
     </div>
   ) : (
     <div

demo/src/components/Modal.tsx

@@ -0,0 +1,56 @@
+import { FormEvent, useContext, useRef } from 'react';
+import cn from 'classnames';
+
+import { NameModalContext, SpacesContext } from '.';
+import { Member } from '../utils/types';
+import { getRandomColor } from '../utils';
+
+interface Props {
+  self?: Member;
+}
+
+export const Modal = ({ self }: Props) => {
+  const space = useContext(SpacesContext);
+  const { isModalVisible, setIsModalVisible } = useContext(NameModalContext);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!space || !isModalVisible) return;
+
+    space.updateProfileData({ name: inputRef.current?.value, color: getRandomColor() });
+    setIsModalVisible(false);
+  };
+
+  return (
+    <div
+      onClick={() => setIsModalVisible(false)}
+      className={cn(
+        'backdrop-blur-md bg-black/30 fixed top-0 left-0 w-full h-full flex items-center justify-center transition-all duration-300',
+        {
+          'opacity-0 pointer-events-none': !isModalVisible,
+          'opacity-100': isModalVisible,
+        },
+      )}
+    >
+      <form
+        onSubmit={handleSubmit}
+        className="bg-white p-8 shadow-lg rounded-[20px]"
+      >
+        <h3 className="font-semibold text-xl text-center mb-8">Enter your name</h3>
+        <input
+          ref={inputRef}
+          className="border border-gray-300 rounded-md p-2 w-full"
+          defaultValue={self?.profileData?.name}
+        />
+        <button
+          type="submit"
+          className="bg-ably-black text-white rounded-md p-2 w-full mt-4"
+        >
+          Set name
+        </button>
+      </form>
+    </div>
+  );
+};

demo/src/components/NameModalContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export const NameModalContext = createContext({
+  isModalVisible: false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setIsModalVisible: (isVisible: boolean) => {}, // eslint-disable-line no-unused-vars
+});

demo/src/components/index.ts

@@ -5,6 +5,8 @@ export * from './CurrentSlide';
 export * from './Cursors';
 export * from './Header';
 export * from './Image';
+export * from './Modal';
+export * from './NameModalContext';
 export * from './Paragraph';
 export * from './SlideMenu';
 export * from './SlidePreview';

demo/src/components/svg/Pencil.tsx

@@ -0,0 +1,26 @@
+import { SVGProps } from 'react';
+
+export const PencilSvg = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M4.75 19.25L9 18.25L18.2929 8.95711C18.6834 8.56658 18.6834 7.93342 18.2929 7.54289L16.4571 5.70711C16.0666 5.31658 15.4334 5.31658 15.0429 5.70711L5.75 15L4.75 19.25Z"
+    ></path>
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M19.25 19.25H13.75"
+    ></path>
+  </svg>
+);

demo/src/components/svg/index.ts

@@ -6,4 +6,5 @@ export * from './ExternalLink';
 export * from './Info';
 export * from './Lightning';
 export * from './Lock';
+export * from './Pencil';
 export * from './ReplyStack';

demo/src/hooks/useMembers.ts

@@ -50,7 +50,6 @@ export const useMembers: () => Partial<{ self?: Member; others: Member[]; member
         setMembers(initMembers);
         setOthers(membersToOthers(initMembers, initSelf));
       }
-
       space.subscribe('update', handler);
     };
 

demo/tailwind.config.js

@@ -36,5 +36,5 @@ export default {
       variants: ['before'],
     },
   ],
-  plugins: [],
+  plugins: [require('tailwindcss-labeled-groups')(['inner', '1'])],
 };