Skip to content

Commit 8aac2ae

Browse files
kyleknightedkyleknighted
authored
Inbox view for call review (#61)
* Creating necessary files and base styles * InboxView layout * Transcript Item sidebar layout * transcript sidebar data * layout working & integrating * transcript and view updates * tsc * clicking button works * remove unnecessary files
1 parent e7b49e7 commit 8aac2ae

14 files changed

Lines changed: 370 additions & 9 deletions

File tree

‎.storybook/main.cjs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
const { dirname, resolve } = require('node:path');
22

3-
const getAbsolutePath = (packageName) =>
4-
dirname(require.resolve(`${packageName}/package.json`));
3+
const getAbsolutePath = (packageName) => dirname(require.resolve(`${packageName}/package.json`));
54

65
/** @type {import('@storybook/react-vite').StorybookConfig} */
76
const config = {

‎lib/atom/Avatar/Avatar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import { Avatar as RadixAvatar } from '@radix-ui/themes';
22
import type { IAvatarProps } from './types';
33
import styles from './Avatar.module.css';
44

5-
const Avatar = ({ name, pfp }: IAvatarProps) => {
5+
const Avatar = ({ name, pfp, size = '3' }: IAvatarProps) => {
66
const fallback = name ? name.charAt(0).toUpperCase() : undefined;
77

88
return (
99
<RadixAvatar
1010
radius="full"
1111
color="blue"
12-
size="3"
12+
size={size}
1313
fallback={<>{fallback}</>}
1414
src={pfp}
1515
alt={pfp ? `${name}'s Avatar` : undefined}

‎lib/atom/Avatar/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import type { AvatarProps } from '@radix-ui/themes';
2+
13
export interface IAvatarProps {
24
name: string;
35
pfp?: string;
6+
size?: AvatarProps['size'];
47
}

‎lib/atom/ContentWrapper/ContentWrapper.styles.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,7 @@
33
border-radius: var(--radius-5);
44
border: 1px solid var(--gray-6);
55
}
6+
7+
.content {
8+
height: 100%;
9+
}

‎lib/atom/ContentWrapper/ContentWrapper.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
import { Box } from '@radix-ui/themes';
2+
import cn from 'classnames';
23
import styles from './ContentWrapper.styles.module.css';
34
import type { IContentWrapperProps } from './ContentWrapper.types';
45
import Header from '../Header';
56

6-
const ContentWrapper = ({ children, title, subtitle, metaInfo, ...rest }: IContentWrapperProps) => {
7+
const ContentWrapper = ({
8+
children,
9+
title,
10+
subtitle,
11+
metaInfo,
12+
className,
13+
...rest
14+
}: IContentWrapperProps) => {
715
return (
8-
<Box className={styles.wrapper} height="100%" {...rest}>
16+
<Box className={cn(styles.wrapper, className)} height="100%" {...rest}>
917
{title && <Header title={title} subtitle={subtitle} metaInfo={metaInfo} />}
10-
<Box py="4" px="5">
18+
<Box py="4" px="5" height="100%">
1119
{children}
1220
</Box>
1321
</Box>

‎lib/atom/MenuItem/MenuItem.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
padding-left: var(--space-4);
3535

3636
&::before {
37-
content: ' ';
37+
content: '';
3838
color: #dcdfe4;
3939
margin-left: var(--space-2);
4040
background-color: var(--blue-6);
@@ -68,7 +68,7 @@
6868
position: relative;
6969

7070
&::before {
71-
content: ' ';
71+
content: '';
7272
display: block;
7373
background-color: #667085;
7474
width: 3px;

‎lib/compound/InboxView/InboxView.module.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.inboxViewWrapper,
2+
.transactionTimelineWrapper {
3+
> div {
4+
padding: 0;
5+
}
6+
}
7+
8+
.recentAlerts {
9+
box-shadow: inset -1px 0 0 0 var(--gray-a5);
10+
}
11+
12+
.alertDetails {
13+
background-color: var(--color-background);
14+
z-index: 1;
15+
}
16+
17+
.callListItem {
18+
border-radius: var(--radius-5);
19+
background-color: var(--color-background);
20+
box-shadow: inset 0 0 0 1px var(--gray-a4);
21+
height: fit-content;
22+
width: 100%;
23+
align-items: start;
24+
}
25+
26+
.callListItemHeading {
27+
color: var(--gray-12);
28+
width: 100%;
29+
}
30+
31+
.callListItemSelected {
32+
box-shadow: inset 0 0 0 1px var(--blue-9);
33+
}
34+
35+
.newMessageBadge {
36+
border-radius: var(--radius-5);
37+
background-color: var(--blue-5);
38+
width: 6px;
39+
height: 6px;
40+
}
41+
42+
.tabContentRoot {
43+
height: 100%;
44+
flex: 1;
45+
position: relative;
46+
padding-inline: var(--space-4);
47+
}

‎lib/compound/InboxView/InboxView.stories.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import type { Meta, StoryObj } from '@storybook/react-vite';
2+
import { InboxView, type IInboxViewProps } from '../..';
3+
import TranscriptItem from './parts/TranscriptItem';
4+
import { Box, Text } from '@radix-ui/themes';
5+
6+
const meta = {
7+
title: 'Compound/InboxView',
8+
component: InboxView,
9+
parameters: {
10+
layout: 'full',
11+
},
12+
tags: ['autodocs'],
13+
render: (args) => (
14+
<Box height="100vh">
15+
<InboxView {...args} />
16+
</Box>
17+
),
18+
args: {
19+
tabs: [
20+
{
21+
label: 'Transcript',
22+
value: 'transcript',
23+
content: (
24+
<>
25+
<TranscriptItem />
26+
<TranscriptItem />
27+
<TranscriptItem />
28+
<TranscriptItem />
29+
<TranscriptItem />
30+
<TranscriptItem />
31+
<TranscriptItem />
32+
<TranscriptItem />
33+
<TranscriptItem />
34+
<TranscriptItem />
35+
<TranscriptItem />
36+
<TranscriptItem />
37+
<TranscriptItem />
38+
<TranscriptItem />
39+
<TranscriptItem />
40+
<TranscriptItem />
41+
<TranscriptItem />
42+
<TranscriptItem />
43+
<TranscriptItem />
44+
<TranscriptItem />
45+
<TranscriptItem />
46+
<TranscriptItem />
47+
<TranscriptItem />
48+
</>
49+
),
50+
},
51+
{
52+
label: 'Details',
53+
value: 'details',
54+
content: (
55+
<Box>
56+
<Text size="2" color="gray">
57+
Meeting Details:
58+
</Text>
59+
<Text size="3">- Date: January 1, 2024</Text>
60+
<Text size="3">- Time: 12:00 PM</Text>
61+
<Text size="3">- Participants: Alice, Bob</Text>
62+
</Box>
63+
),
64+
},
65+
],
66+
},
67+
} satisfies Meta<IInboxViewProps>;
68+
69+
export default meta;
70+
71+
type Story = StoryObj<typeof meta>;
72+
73+
export const Default: Story = {};

‎lib/compound/InboxView/InboxView.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import type { IInboxViewProps } from './InboxView.types';
2+
import styles from './InboxView.module.css';
3+
import ContentWrapper from '../../atom/ContentWrapper/ContentWrapper';
4+
import { Box, Button, Flex, Heading, IconButton, Text } from '@radix-ui/themes';
5+
import { useState } from 'react';
6+
import CallList from './parts/CallList';
7+
import { SidebarSimpleIcon } from '@phosphor-icons/react';
8+
9+
const InboxView = ({ content, callList }: IInboxViewProps) => {
10+
const [callListCollapsed, setCallListCollapsed] = useState(false);
11+
12+
return (
13+
<ContentWrapper className={styles.inboxViewWrapper} overflow={'hidden'} height="100%">
14+
<Flex width="100%" height="100%">
15+
{!callListCollapsed && <CallList calls={callList} />}
16+
17+
<Flex
18+
pb="4"
19+
minWidth={'250px'}
20+
gap="2"
21+
direction={'column'}
22+
position={'relative'}
23+
flexGrow={'1'}
24+
overflowY="scroll"
25+
overflowX="hidden"
26+
>
27+
<Flex
28+
justify="between"
29+
position="sticky"
30+
top={'0'}
31+
pt="4"
32+
px="4"
33+
pb="2"
34+
style={{
35+
position: 'sticky',
36+
top: 0,
37+
backgroundColor: 'var(--gray-1)',
38+
zIndex: 1,
39+
paddingTop: 'var(--space-4)',
40+
paddingBottom: 'var(--space-2)',
41+
boxShadow: 'inset 0 -1px 0 0 var(--gray-a4)',
42+
paddingInline: 'var(--space-4)',
43+
marginRight: '1px',
44+
}}
45+
>
46+
<Flex gap="2">
47+
<IconButton
48+
variant="ghost"
49+
size="2"
50+
color="gray"
51+
mt="1"
52+
onClick={() => {
53+
setCallListCollapsed((prev) => !prev);
54+
}}
55+
>
56+
<SidebarSimpleIcon weight="bold" size={20} aria-label="Toggle Call List" />
57+
</IconButton>
58+
<Box>
59+
<Text size="2" color="gray">
60+
January 1, 2024 at 12:00 AM
61+
</Text>
62+
<Heading size="6" mt="1">
63+
New Year Sync
64+
</Heading>
65+
</Box>
66+
</Flex>
67+
<Box>
68+
<Button variant="outline" size="2" color="blue" mr="2">
69+
Join Meeting
70+
</Button>
71+
<Button variant="outline" size="2" color="red">
72+
Remove Agent
73+
</Button>
74+
</Box>
75+
</Flex>
76+
77+
<Box px="4">{content}</Box>
78+
</Flex>
79+
</Flex>
80+
</ContentWrapper>
81+
);
82+
};
83+
84+
export default InboxView;
85+
export type { IInboxViewProps };

‎lib/compound/InboxView/InboxView.types.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export type CallListItem = {
2+
id: string;
3+
label: React.ReactNode | string;
4+
startTime: string;
5+
severity: string;
6+
onClick: () => void;
7+
active: boolean;
8+
read: boolean;
9+
};
10+
11+
export interface IInboxViewProps {
12+
content: React.ReactNode;
13+
callList: Array<CallListItem>;
14+
}

0 commit comments

Comments
 (0)