Merge pull request #257 from waku-org/feat/setup-tailwind

feat(web-chat): setup tailwind & remove @livechat/ui-kit

examples/web-chat/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "homepage": "/web-chat",
   "dependencies": {
-    "@livechat/ui-kit": "^0.5.0-24",
     "@multiformats/multiaddr": "11.0.7",
     "@waku/dns-discovery": "^0.0.15",
     "@waku/interfaces": "^0.0.16",
@@ -30,6 +29,7 @@
     "prettier": "^2.7.1",
     "protons": "^5.1.0",
     "react-scripts": "5.0.1",
+    "tailwindcss": "^3.3.3",
     "typescript": "^4.9.3",
     "url": "^0.11.0"
   },

examples/web-chat/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

examples/web-chat/src/App.tsx

@@ -1,4 +1,3 @@
-import "./App.css";
 import handleCommand from "./command";
 import Room from "./Room";
 import { Message } from "./Message";

examples/web-chat/src/ChatList.tsx

@@ -1,9 +1,4 @@
 import { useEffect, useRef } from "react";
-import {
-  Message as LiveMessage,
-  MessageText,
-  MessageList,
-} from "@livechat/ui-kit";
 import { Message } from "./Message";
 
 interface Props {
@@ -12,25 +7,28 @@ interface Props {
 
 export default function ChatList(props: Props) {
   const renderedMessages = props.messages.map((message) => (
-    <LiveMessage
+    <div
       key={
         message.nick +
         message.payloadAsUtf8 +
         message.timestamp.valueOf() +
         message.sentTimestamp?.valueOf()
       }
-      authorName={message.nick}
-      date={formatDisplayDate(message)}
+      className="flex flex-col p-2 border-b border-gray-200"
     >
-      <MessageText>{message.payloadAsUtf8}</MessageText>
-    </LiveMessage>
+      <span className="text-sm text-gray-500">{message.nick}</span>
+      <span className="text-sm text-gray-500">
+        {formatDisplayDate(message)}
+      </span>
+      <p className="text-gray-700">{message.payloadAsUtf8}</p>
+    </div>
   ));
 
   return (
-    <MessageList active containScrollInSubtree>
+    <div className="overflow-y-auto h-full">
       {renderedMessages}
       <AlwaysScrollToBottom messages={props.messages} />
-    </MessageList>
+    </div>
   );
 }
 
@@ -45,13 +43,13 @@ function formatDisplayDate(message: Message): string {
 }
 
 const AlwaysScrollToBottom = (props: { messages: Message[] }) => {
-  const elementRef = useRef<HTMLDivElement>();
+  const elementRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    // @ts-ignore
+    if (elementRef.current) {
       elementRef.current.scrollIntoView();
+    }
   }, [props.messages]);
 
-  // @ts-ignore
   return <div ref={elementRef} />;
 };

examples/web-chat/src/MessageInput.tsx

@@ -1,14 +1,6 @@
 import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
 import { useWaku } from "@waku/react";
 import { LightNode } from "@waku/interfaces";
-import {
-  TextInput,
-  TextComposer,
-  Row,
-  Fill,
-  Fit,
-  SendButton,
-} from "@livechat/ui-kit";
 
 interface Props {
   hasLightPushPeers: boolean;
@@ -60,20 +52,24 @@ export default function MessageInput(props: Props) {
   }, [node, inputText, hasLightPushPeers]);
 
   return (
-    <TextComposer
-      onKeyDown={onKeyDown}
+    <div className="flex p-2">
+      <input
+        type="text"
+        value={inputText}
         onChange={onChange}
-      active={isActive}
-      onButtonClick={onMessage}
+        onKeyDown={onKeyDown}
+        className="flex-grow p-2 border border-gray-300 rounded-l-md"
+        placeholder="Type your message..."
+      />
+      <button
+        onClick={onMessage}
+        className={`flex-none px-4 py-2 text-white ${
+          isActive ? "bg-blue-500" : "bg-blue-300 cursor-not-allowed"
+        } rounded-r-md`}
+        disabled={!isActive}
       >
-      <Row align="center">
-        <Fill>
-          <TextInput />
-        </Fill>
-        <Fit>
-          <SendButton />
-        </Fit>
-      </Row>
-    </TextComposer>
+        Send
+      </button>
+    </div>
   );
 }

examples/web-chat/src/Room.tsx

@@ -2,7 +2,6 @@ import type { LightNode } from "@waku/interfaces";
 import ChatList from "./ChatList";
 import MessageInput from "./MessageInput";
 import { useWaku, useContentPair, useLightPush } from "@waku/react";
-import { TitleBar } from "@livechat/ui-kit";
 import { Message } from "./Message";
 import { ChatMessage } from "./chat_message";
 import { useNodePeers, usePeers } from "./hooks";
@@ -49,15 +48,11 @@ export default function Room(props: Props) {
   const bootstrapPeersMessage = `Bootstrap (DNS Discovery): ${bootstrapPeers.size}, Peer exchange: ${peerExchangePeers.size}. `;
 
   return (
-    <div
-      className="chat-container"
-      style={{ height: "98vh", display: "flex", flexDirection: "column" }}
-    >
-      <TitleBar
-        leftIcons={[peersMessage]}
-        rightIcons={[bootstrapPeersMessage, "View console for more details."]}
-        title="Waku v2 chat app"
-      />
+    <div className="h-screen flex flex-col">
+      <div className="flex justify-between items-center bg-gray-800 text-white p-4">
+        <div>{peersMessage}</div>
+        <div>{bootstrapPeersMessage} View console for more details.</div>
+      </div>
       <ChatList messages={props.messages} />
       <MessageInput hasLightPushPeers={!!lightPushPeers} sendMessage={onSend} />
     </div>

examples/web-chat/src/index.css

@@ -1,30 +1,3 @@
-@import-normalize; /* bring in normalize.css styles */
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-.room-row {
-  text-align: left;
-  margin-left: 20px;
-}
-
-.room-row:after {
-  clear: both;
-  content: "";
-  display: table;
-}
-
-.chat-room {
-  margin: 2px;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/web-chat/src/index.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { ThemeProvider } from "@livechat/ui-kit";
 import { LightNodeProvider, ContentPairProvider } from "@waku/react";
 import { wakuDnsDiscovery, enrTree } from "@waku/dns-discovery";
 import { wakuPeerExchangeDiscovery } from "@waku/peer-exchange";
-
 import "./index.css";
+
 import App from "./App";
 import { CONTENT_TOPIC, PROTOCOLS } from "./config";
 
@@ -22,44 +21,13 @@ const NODE_OPTIONS = {
   },
 };
 
-const THEMES = {
-  AuthorName: {
-    css: {
-      fontSize: "1.1em",
-    },
-  },
-  Message: {
-    css: {
-      margin: "0em",
-      padding: "0em",
-      fontSize: "0.83em",
-    },
-  },
-  MessageText: {
-    css: {
-      margin: "0em",
-      padding: "0.1em",
-      paddingLeft: "1em",
-      fontSize: "1.1em",
-    },
-  },
-  MessageGroup: {
-    css: {
-      margin: "0em",
-      padding: "0.2em",
-    },
-  },
-};
-
 ReactDOM.render(
   <React.StrictMode>
-    <ThemeProvider theme={THEMES}>
     <LightNodeProvider options={NODE_OPTIONS} protocols={PROTOCOLS}>
       <ContentPairProvider contentTopic={CONTENT_TOPIC}>
         <App />
       </ContentPairProvider>
     </LightNodeProvider>
-    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById("root")
 );

examples/web-chat/src/types/types.d.ts

@@ -1 +0,0 @@
-declare module "@livechat/ui-kit";

examples/web-chat/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};