refactor: update apps

abelflopes · Jun 23, 2024 · 155887e · 155887e
1 parent 720c93e
commit 155887e
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 87 deletions.
diff --git a/packages/apps/common/package.json b/packages/apps/common/package.json
@@ -7,6 +7,7 @@
     "@drvida/fe-api": "file:./../../../../dr-vida/packages/api/fe-api",
     "react": "^18.2.0",
     "react-ck": "*",
+    "@react-ck/icon": "*",
     "react-router": "^6.23.1",
     "react-router-dom": "^6.23.1"
   },

diff --git a/packages/apps/common/src/components/DefaultLayout/index.module.scss b/packages/apps/common/src/components/DefaultLayout/index.module.scss
@@ -3,6 +3,10 @@
 .root {
   display: flex;
   height: 100%;
+  gap: get-spacing(2);
+  padding: get-spacing(4);
+  box-sizing: border-box;
+  align-items: baseline;
 }
 
 .container {

diff --git a/packages/apps/common/src/components/DefaultLayout/index.tsx b/packages/apps/common/src/components/DefaultLayout/index.tsx
@@ -1,7 +1,11 @@
 import styles from "./index.module.scss";
 import React from "react";
-import { Container } from "react-ck";
+import { Container, Dock, Icon } from "react-ck";
 import { NavMenu } from "../NavMenu";
+import { IconCog } from "@react-ck/icon/icons/IconCog";
+import { IconUserCircle } from "@react-ck/icon/icons/IconUserCircle";
+import { Chat } from "@react-ck/icon/icons/Chat";
+import { Notification } from "@react-ck/icon/icons/Notification";
 
 export interface DefaultLayoutProps {
   children: React.ReactNode;
@@ -10,6 +14,51 @@ export interface DefaultLayoutProps {
 export const DefaultLayout = ({ children }: Readonly<DefaultLayoutProps>): React.ReactElement => (
   <div className={styles.root}>
     <NavMenu />
+    <Dock
+      skin="shadowed"
+      header={
+        <Dock.MainItem
+          label="Fairstone"
+          image="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.fairstone.co.uk%2Fwp-content%2Fuploads%2F2021%2F08%2FFairstone-profile.jpg&f=1&nofb=1&ipt=cc31aeed757287dd5a68d4ac490884451baf29e47b97657ec95461d512bc2e67&ipo=images"
+        />
+      }>
+      <Dock.Item
+        active={true}
+        label="Chat"
+        icon={
+          <Icon>
+            <Chat />
+          </Icon>
+        }
+      />
+      <Dock.Item
+        active={false}
+        label="Notification"
+        icon={
+          <Icon>
+            <Notification />
+          </Icon>
+        }
+      />
+      <Dock.Item
+        active={false}
+        label="User"
+        icon={
+          <Icon>
+            <IconUserCircle />
+          </Icon>
+        }
+      />
+      <Dock.Item
+        active={false}
+        label="Settings"
+        icon={
+          <Icon>
+            <IconCog />
+          </Icon>
+        }
+      />
+    </Dock>
     <Container className={styles.container}>{children}</Container>
   </div>
 );
diff --git a/packages/apps/common/src/index.scss b/packages/apps/common/src/index.scss
@@ -1,3 +1,6 @@
+// https://fonts.google.com/specimen/Inter
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
+
 html,
 body,
 #root,
@@ -7,4 +10,6 @@ body,
 
 body {
   margin: 0;
+  // Suggested from google fonts
+  font-optical-sizing: auto;
 }
diff --git a/packages/apps/common/src/index.tsx b/packages/apps/common/src/index.tsx
@@ -1,17 +1,34 @@
 import "./index.scss";
 import React from "react";
-import { Manager } from "react-ck";
+import { Manager, type ManagerProps, defaultTheme } from "react-ck";
 import { DefaultRouter } from "./routes/Default";
 import { type AppContextProps, AppContextProvider } from "./context/app";
 
+const theme: NonNullable<NonNullable<ManagerProps["theme"]>["theme"]> = {
+  ...defaultTheme,
+  color: {
+    ...defaultTheme.color,
+    "highlight-primary": "#6565EC",
+    "highlight-primary-light": "#F5F5FF",
+    "highlight-primary-dark": "#5656b3",
+  },
+  font: {
+    ...defaultTheme.font,
+    family: "Inter, sans-serif",
+  },
+};
+
 const el = document.querySelector("#root");
 
 if (!el) throw new Error("Missing root element");
 
 export type CommonAppProps = AppContextProps;
 
 export const CommonApp = (props: Readonly<CommonAppProps>): React.ReactElement => (
-  <Manager>
+  <Manager
+    theme={{
+      theme,
+    }}>
     <AppContextProvider value={props}>
       <DefaultRouter />
     </AppContextProvider>

diff --git a/packages/apps/common/src/pages/Chat.tsx b/packages/apps/common/src/pages/Chat.tsx
diff --git a/packages/apps/common/src/pages/Chat/index.module.scss b/packages/apps/common/src/pages/Chat/index.module.scss
@@ -0,0 +1,7 @@
+.job_menu {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
diff --git a/packages/apps/common/src/pages/Chat/index.tsx b/packages/apps/common/src/pages/Chat/index.tsx
@@ -0,0 +1,103 @@
+import styles from "./index.module.scss";
+import React, { useState } from "react";
+import { Card, Grid, Text, Chat } from "react-ck";
+import { DefaultLayout } from "../../components/DefaultLayout";
+
+export const ChatPage = (): React.ReactElement => {
+  const [messages, setMessages] = useState<string[]>([]);
+
+  return (
+    <DefaultLayout>
+      <Chat
+        status={{
+          type: "loading",
+          description: "Status",
+        }}
+        placeholder="Ask me anything..."
+        onSend={(message) => {
+          console.log("send", message);
+          setMessages((v) => [...v, message]);
+        }}>
+        <div className={styles.job_menu}>
+          <Text variation="small" skin="highlight-primary">
+            Jobs Suggestions
+          </Text>
+
+          <Grid>
+            <Grid.Column size={4}>
+              <Card interaction="click">
+                <Text margin="bottom" skin="highlight-primary" variation="extra-small">
+                  Synthex AI
+                </Text>
+                <Text margin="none">Migrate client data</Text>
+              </Card>
+            </Grid.Column>
+            <Grid.Column size={4}>
+              <Card interaction="click">
+                <Text margin="bottom" skin="highlight-primary" variation="extra-small">
+                  Bank X
+                </Text>
+                <Text margin="none">Migrate client data</Text>
+              </Card>
+            </Grid.Column>
+            <Grid.Column size={4}>
+              <Card interaction="click">
+                <Text margin="bottom" skin="highlight-primary" variation="extra-small">
+                  Fairstone
+                </Text>
+                <Text margin="none">Compare multiple spreadsheets</Text>
+              </Card>
+            </Grid.Column>
+          </Grid>
+
+          <Text variation="small" skin="highlight-primary">
+            Saved Jobs
+          </Text>
+
+          <Grid>
+            <Grid.Column size={4}>
+              <Card interaction="click">
+                <Text margin="bottom" skin="highlight-primary" variation="extra-small">
+                  Synthex AI
+                </Text>
+                <Text margin="none">Migrate client data</Text>
+              </Card>
+            </Grid.Column>
+            <Grid.Column size={4}>
+              <Card interaction="click">
+                <Text margin="bottom" skin="highlight-primary" variation="extra-small">
+                  Bank X
+                </Text>
+                <Text margin="none">Migrate client data</Text>
+              </Card>
+            </Grid.Column>
+            <Grid.Column size={4}>
+              <Card interaction="click">
+                <Text margin="bottom" skin="highlight-primary" variation="extra-small">
+                  Fairstone
+                </Text>
+                <Text margin="none">Compare multiple spreadsheets</Text>
+              </Card>
+            </Grid.Column>
+          </Grid>
+        </div>
+
+        <Chat.Message senderName="Abel" type="sent">
+          Hello
+        </Chat.Message>
+        <Chat.Message senderName="Abel" type="sent">
+          How are you?
+        </Chat.Message>
+        <Chat.Message senderName="Joana" type="received">
+          Hello
+        </Chat.Message>
+        {messages.map((i, k) => (
+          // eslint-disable-next-line react/no-array-index-key -- needed
+          <Chat.Message key={`${i}${k}`} senderName="Abel" type="sent">
+            {i}
+          </Chat.Message>
+        ))}
+      </Chat>
+    </DefaultLayout>
+  );
+};