feat: set basic layout

example/src/App.tsx

@@ -1,8 +1,8 @@
-import Chatbox from '@graasp/ui';
+import Chatbox from '@graasp/chatbox';
 // import '@graasp/ui/dist/index.css'
 
 const App = () => {
-  return <Chatbox />;
+  return <Chatbox id="24" />;
 };
 
 export default App;

example/yarn.lock

@@ -1471,7 +1471,7 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@graasp/ui@link:..":
+"@graasp/chatbox@link:..":
   version "0.0.0"
   uid ""
 
@@ -2155,11 +2155,24 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
+"@types/[email protected]":
+  version "0.21.9"
+  resolved "https://registry.yarnpkg.com/@types/material-ui/-/material-ui-0.21.9.tgz#156a7e78274b8d0c55e19a6b5483b105aa53c0f3"
+  integrity sha512-YhZzW7rRqT2VpNTDYdXAB4Qgy1oBK2YDL1QSeL8t2ALmFTv141a5KW1buTobkc840QN+GGvon/u814jOxsvZLw==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-addons-linked-state-mixin" "*"
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
+"@types/minimatch@^3.0.3":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
+  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
+
 "@types/node@*":
   version "14.6.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.6.2.tgz#264b44c5a28dfa80198fc2f7b6d3c8a054b9491f"
@@ -2194,6 +2207,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-addons-linked-state-mixin@*":
+  version "0.14.22"
+  resolved "https://registry.yarnpkg.com/@types/react-addons-linked-state-mixin/-/react-addons-linked-state-mixin-0.14.22.tgz#a8fe5929bbfa10947f3bf62d4a878706ec6b7718"
+  integrity sha512-DF9utM6VjuIaY388R6XWWDs7CIDTH7on1k1yR+hqaL/T4/OqSCW5uij28APq9KI82CZf0/qtBJI+pjvXcOh0kQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@link:../node_modules/@types/react-dom":
   version "0.0.0"
   uid ""
@@ -2818,6 +2838,11 @@ arr-union@^3.1.0:
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
+array-differ@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
+  integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==
+
 [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -8009,6 +8034,11 @@ move-concurrently@^1.0.1:
     rimraf "^2.5.4"
     run-queue "^1.0.3"
 
+mri@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
+  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -8037,6 +8067,17 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
+multimatch@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-4.0.0.tgz#8c3c0f6e3e8449ada0af3dd29efb491a375191b3"
+  integrity sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==
+  dependencies:
+    "@types/minimatch" "^3.0.3"
+    array-differ "^3.0.0"
+    array-union "^2.1.0"
+    arrify "^2.0.1"
+    minimatch "^3.0.4"
+
 nan@^2.12.1:
   version "2.14.1"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
@@ -9522,6 +9563,18 @@ pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+[email protected]:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/pretty-quick/-/pretty-quick-3.1.1.tgz#93ca4e2dd38cc4e970e3f54a0ead317a25454688"
+  integrity sha512-ZYLGiMoV2jcaas3vTJrLvKAYsxDoXQBUn8OSTxkl67Fyov9lyXivJTl0+2WVh+y6EovGcw7Lm5ThYpH+Sh3XxQ==
+  dependencies:
+    chalk "^3.0.0"
+    execa "^4.0.0"
+    find-up "^4.1.0"
+    ignore "^5.1.4"
+    mri "^1.1.5"
+    multimatch "^4.0.0"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"

package.json

@@ -39,17 +39,29 @@
     "react-dom": "16.13.1"
   },
   "localDependencies": {
+    "@material-ui/core": "./example/node_modules/@material-ui/core",
+    "@material-ui/icons": "./example/node_modules/@material-ui/icons",
+    "@material-ui/lab": "./example/node_modules/@material-ui/lab",
     "react": "./example/node_modules/react",
     "react-dom": "./example/node_modules/react-dom",
     "react-scripts": "./example/node_modules/react-scripts"
   },
+  "dependencies": {
+    "@graasp/ui": "git://github.com/graasp/graasp-ui#33/loaderTs",
+    "clsx": "1.1.1",
+    "pretty-quick": "3.1.1"
+  },
   "devDependencies": {
     "@commitlint/cli": "12.1.4",
     "@commitlint/config-conventional": "12.1.4",
+    "@material-ui/core": "./example/node_modules/@material-ui/core",
+    "@material-ui/icons": "./example/node_modules/@material-ui/icons",
+    "@material-ui/lab": "./example/node_modules/@material-ui/lab",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^26.0.24",
+    "@types/material-ui": "0.21.9",
     "@types/node": "^16.3.2",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
@@ -94,8 +106,5 @@
       "^react-dom$": "<rootDir>/example/node_modules/react-dom",
       "^react-dom/(.*)": "<rootDir>/example/node_modules/react-dom/$1"
     }
-  },
-  "dependencies": {
-    "pretty-quick": "3.1.1"
   }
 }

src/components/Chatbox.tsx

@@ -1,12 +1,59 @@
-import React, { FunctionComponent } from 'react';
+import React, { FC, Fragment } from 'react';
+import Container from '@material-ui/core/Container';
+import { Loader } from '@graasp/ui';
+import Messages from './Messages';
+import { makeStyles } from '@material-ui/core/styles';
+import Input from './Input';
+import Header from './Header';
+import { DEFAULT_CHATBOX_HEIGHT } from '../constants';
 
 type Props = {
   id: string;
+  height?: number;
 };
 
-const Chatbox: FunctionComponent<Props> = () => {
-  console.log('use chatbox');
-  return <div>some content</div>;
+const Chatbox: FC<Props> = ({ height }) => {
+  const useStyles = makeStyles(() => ({
+    container: {
+      height: height || DEFAULT_CHATBOX_HEIGHT,
+    },
+  }));
+  const classes = useStyles();
+
+  // todo: get data from call
+  const { data: messages, isLoading } = {
+    data: [
+      { id: '1', userId: 'me', text: 'a message' },
+      { id: '2', userId: 'me', text: 'a message' },
+      { id: '3', userId: 'another me', text: 'a message' },
+      { id: '4', userId: 'me', text: 'a message' },
+      { id: '5', userId: 'me', text: 'a message' },
+      { id: '6', userId: 'anotmer', text: 'a message for you to be aware' },
+      { id: '7', userId: 'me', text: 'a message' },
+      { id: '11', userId: 'me', text: 'a message' },
+      { id: '21', userId: 'me', text: 'a message' },
+      { id: '31', userId: 'another me', text: 'a message' },
+      { id: '41', userId: 'me', text: 'a message' },
+      { id: '51', userId: 'me', text: 'a message' },
+      { id: '61', userId: 'anotmer', text: 'a message for you to be aware' },
+      { id: '71', userId: 'me', text: 'a message' },
+    ],
+    isLoading: false,
+  };
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <Fragment>
+      <Header />
+      <Container maxWidth="md" className={classes.container}>
+        <Messages messages={messages} />
+        <Input />
+      </Container>
+    </Fragment>
+  );
 };
 
 export default Chatbox;

src/components/Header.tsx

@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import ChatIcon from '@material-ui/icons/Chat';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  title: {
+    flexGrow: 1,
+  },
+  icon: {
+    marginRight: theme.spacing(2),
+  },
+}));
+
+type Props = {
+  title?: string;
+};
+
+const Header: FC<Props> = ({ title }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <AppBar position="fixed">
+        <Toolbar>
+          <ChatIcon className={classes.icon} />
+          <Typography variant="h6" className={classes.title}>
+            {title || 'Chatbox'}
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+};
+
+export default Header;

src/components/Input.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import TextField from '@material-ui/core/TextField';
+import Grid from '@material-ui/core/Grid';
+import SendIcon from '@material-ui/icons/Send';
+import { makeStyles } from '@material-ui/core/styles';
+
+type Props = {
+  id?: string;
+  placeholder?: string;
+};
+
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    width: '100%',
+    margin: theme.spacing(1, 'auto'),
+  },
+}));
+
+const Input: FC<Props> = ({ placeholder }) => {
+  const classes = useStyles();
+
+  return (
+    <Grid
+      container
+      className={classes.wrapper}
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Grid item xs={11}>
+        <TextField
+          id="outlined-basic"
+          variant="outlined"
+          fullWidth
+          placeholder={placeholder || 'Type something...'}
+        />
+      </Grid>
+      <Grid item>
+        <IconButton>
+          <SendIcon />
+        </IconButton>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Input;

src/components/Message.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from 'react';
+import Box from '@material-ui/core/Box';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import grey from '@material-ui/core/colors/grey';
+import clsx from 'clsx';
+import type { MessageType } from '../types';
+
+const useStyles = makeStyles((theme) => ({
+  message: {
+    background: grey[100],
+    borderRadius: '5px',
+    margin: theme.spacing(1),
+    padding: theme.spacing(0.5, 1, 1),
+    maxWidth: '80%',
+    width: 'fit-content',
+  },
+  own: {
+    background: grey[300],
+  },
+}));
+
+type Props = {
+  message: MessageType;
+};
+
+const Message: FC<Props> = ({ message }) => {
+  const { userId, text } = message;
+  const classes = useStyles();
+
+  const isOwnMessage = userId === 'me';
+  const align = isOwnMessage ? 'flex-end' : null;
+
+  return (
+    <Box
+      p={1}
+      className={clsx(classes.message, { [classes.own]: isOwnMessage })}
+      alignSelf={align}
+    >
+      {!isOwnMessage && <Typography variant="caption">{userId}</Typography>}
+      <Typography variant="body2">{text}</Typography>
+    </Box>
+  );
+};
+
+export default Message;