MMB-231: [Spaces Demo] Edit name

demo/package.json

@@ -22,7 +22,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/react": "^18.2.15",

demo/src/App.tsx

@@ -1,14 +1,14 @@
 import { useContext, useEffect, useState } from 'react';
 
-import { Header, SlideMenu, SpacesContext, CurrentSlide, AblySvg, slides, Modal } 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, setModalIsVisible] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
 
   useEffect(() => {
     if (!space || self?.profileData.name) return;
@@ -17,44 +17,42 @@ const App = () => {
       const name = getRandomName();
       await space.enter({ name, color: getRandomColor() });
       await space.locations.set({ slide: `${0}`, element: null });
-      setModalIsVisible(true);
+      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>
-      <Modal
-        self={self}
-        isVisible={isModalVisible}
-        setIsVisible={setModalIsVisible}
-      />
-    </div>
+    </NameModalContext.Provider>
   );
 };
 

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

@@ -1,41 +1,42 @@
 import { FormEvent, useContext, useRef } from 'react';
 import cn from 'classnames';
 
-import { SpacesContext } from '.';
+import { NameModalContext, SpacesContext } from '.';
 import { Member } from '../utils/types';
+import { getRandomColor } from '../utils';
 
 interface Props {
   self?: Member;
-  isVisible?: boolean;
-  setIsVisible?: (isVisible: boolean) => void;
 }
 
-export const Modal = ({ isVisible = false, setIsVisible, self }: Props) => {
+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 || !setIsVisible) return;
+    if (!space || !isModalVisible) return;
 
-    space.updateProfileData((profileData) => ({ ...profileData, name: inputRef.current?.value }));
-    setIsVisible(false);
+    space.updateProfileData({ name: inputRef.current?.value, color: getRandomColor() });
+    setIsModalVisible(false);
   };
 
   return (
     <div
-      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': !isVisible,
-          'opacity-100': isVisible,
-        },
-      )}
+      className={cn('fixed top-0 left-0 w-full h-full transition-all duration-300 flex items-center justify-center', {
+        'opacity-0 pointer-events-none': !isModalVisible,
+        'opacity-100': isModalVisible,
+      })}
     >
+      <div
+        onClick={() => setIsModalVisible(false)}
+        className={cn('backdrop-blur-md bg-black/30 fixed top-0 left-0 w-full h-full')}
+      ></div>
       <form
         onSubmit={handleSubmit}
-        className="bg-white p-8 shadow-lg rounded-[20px]"
+        className="bg-white p-8 shadow-lg rounded-[20px] fixed m-auto"
       >
         <h3 className="font-semibold text-xl text-center mb-8">Enter your name</h3>
         <input

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

@@ -6,6 +6,7 @@ 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"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="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"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="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/tailwind.config.js

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

yarn-error.log

@@ -0,0 +1,98 @@
+Arguments: 
+  /Users/n.kakuev/.nvm/versions/node/v16.18.1/bin/node /Users/n.kakuev/.nvm/versions/node/v16.18.1/bin/yarn lint:fix
+
+PATH: 
+  /Users/n.kakuev/Library/pnpm:/Users/n.kakuev/.nvm/versions/node/v16.18.1/bin:/Users/n.kakuev/go:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/n.kakuev/.cargo/bin:/usr/local/mysql/bin/
+
+Yarn version: 
+  1.22.19
+
+Node version: 
+  16.18.1
+
+Platform: 
+  darwin arm64
+
+Trace: 
+  Error: Failed to replace env in config: ${NPM_TOKEN}
+      at /Users/n.kakuev/.nvm/versions/node/v16.18.1/lib/node_modules/yarn/lib/cli.js:94933:13
+      at String.replace (<anonymous>)
+      at envReplace (/Users/n.kakuev/.nvm/versions/node/v16.18.1/lib/node_modules/yarn/lib/cli.js:94928:16)
+      at Function.normalizeConfig (/Users/n.kakuev/.nvm/versions/node/v16.18.1/lib/node_modules/yarn/lib/cli.js:31938:69)
+      at NpmRegistry.<anonymous> (/Users/n.kakuev/.nvm/versions/node/v16.18.1/lib/node_modules/yarn/lib/cli.js:31968:34)
+      at Generator.next (<anonymous>)
+      at step (/Users/n.kakuev/.nvm/versions/node/v16.18.1/lib/node_modules/yarn/lib/cli.js:310:30)
+      at /Users/n.kakuev/.nvm/versions/node/v16.18.1/lib/node_modules/yarn/lib/cli.js:321:13
+
+npm manifest: 
+  {
+    "name": "@ably/spaces",
+    "version": "0.1.3",
+    "description": "",
+    "main": "dist/cjs/index.js",
+    "module": "dist/mjs/index.js",
+    "types": "dist/mjs/index.d.ts",
+    "unpkg": "dist/iife/index.bundle.js",
+    "scripts": {
+      "lint": "eslint .",
+      "lint:fix": "eslint --fix .",
+      "format": "prettier --write --ignore-path .gitignore src demo",
+      "format:check": "prettier --check --ignore-path .gitignore src demo",
+      "test": "vitest run",
+      "test:watch": "vitest watch",
+      "coverage": "vitest run --coverage",
+      "build": "npm run build:mjs && npm run build:cjs && npm run build:iife",
+      "build:mjs": "npx tsc --project tsconfig.mjs.json && cp res/package.mjs.json dist/mjs/package.json",
+      "build:cjs": "npx tsc --project tsconfig.cjs.json && cp res/package.cjs.json dist/cjs/package.json",
+      "build:iife": "rm -rf dist/iife && npx tsc --project tsconfig.iife.json && rollup -c",
+      "prepare": "husky install",
+      "examples:locks": "ts-node ./examples/locks.ts"
+    },
+    "exports": {
+      "import": "./dist/mjs/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/ably/spaces.git"
+    },
+    "author": "",
+    "license": "ISC",
+    "bugs": {
+      "url": ""
+    },
+    "homepage": "https://github.com/ably/spaces",
+    "publishConfig": {
+      "access": "public"
+    },
+    "keywords": [],
+    "devDependencies": {
+      "@rollup/plugin-node-resolve": "^15.2.1",
+      "@rollup/plugin-terser": "^0.4.3",
+      "@typescript-eslint/eslint-plugin": "^5.51.0",
+      "@typescript-eslint/parser": "^5.51.0",
+      "@vitest/coverage-c8": "^0.33.0",
+      "eslint": "^8.33.0",
+      "eslint-plugin-import": "^2.27.5",
+      "eslint-plugin-jsdoc": "^46.7.0",
+      "eslint-plugin-security": "^1.7.1",
+      "husky": "^8.0.0",
+      "prettier": "^2.8.3",
+      "rollup": "^3.28.0",
+      "ts-node": "^10.9.1",
+      "typescript": "^4.9.5",
+      "vitest": "^0.34.3"
+    },
+    "dependencies": {
+      "nanoid": "^4.0.2"
+    },
+    "peerDependencies": {
+      "ably": "^1.2.43"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile