@taruvi/navkit 0.0.1

package/src/components/MattermostChat/README.md

@@ -0,0 +1,227 @@
+# MattermostChat Component
+
+A React component that embeds Mattermost chat in an iframe with JWT authentication, notification tracking, and postMessage communication.
+
+## Features
+
+- 🔐 JWT token authentication via URL parameter
+- 🔔 Unread message notification badge
+- 📋 Clipboard permissions (read/write)
+- 🎯 postMessage listener for Mattermost events
+- 🔒 Origin validation for security
+- 📱 Responsive and customizable dimensions
+- ♻️ Proper cleanup of event listeners
+
+## Installation
+
+The component is already included in your project. Make sure you have the required dependencies:
+
+```bash
+npm install @mui/material @emotion/react @emotion/styled
+```
+
+## Environment Variables
+
+Create a `.env` file in your project root:
+
+```env
+VITE_MATTERMOST_URL=http://localhost:8065
+```
+
+For production, update this to your actual Mattermost server URL.
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { MattermostChat } from './components'
+
+function App() {
+  const jwtToken = 'your-jwt-token-here'
+
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <MattermostChat jwtToken={jwtToken} />
+    </div>
+  )
+}
+```
+
+### Advanced Example with Callbacks
+
+```tsx
+import { MattermostChat } from './components'
+import { useState } from 'react'
+
+function ChatPage() {
+  const [notificationCount, setNotificationCount] = useState(0)
+  const jwtToken = 'your-jwt-token-here'
+
+  const handleNotification = (count: number) => {
+    console.log(`Unread messages: ${count}`)
+    setNotificationCount(count)
+
+    // You can trigger browser notifications here
+    if (count > 0 && Notification.permission === 'granted') {
+      new Notification('New Mattermost Message', {
+        body: `You have ${count} unread message(s)`
+      })
+    }
+  }
+
+  const handleUrlClick = (url: string) => {
+    console.log(`User clicked URL in Mattermost: ${url}`)
+    // Handle navigation or custom logic
+  }
+
+  return (
+    <div style={{ width: '100%', height: 'calc(100vh - 64px)' }}>
+      <MattermostChat
+        jwtToken={jwtToken}
+        onNotification={handleNotification}
+        onUrlClick={handleUrlClick}
+        width="100%"
+        height="100%"
+      />
+    </div>
+  )
+}
+```
+
+### Custom Dimensions
+
+```tsx
+<MattermostChat
+  jwtToken={jwtToken}
+  width="800px"
+  height="600px"
+/>
+```
+
+### Integration with NavKit
+
+```tsx
+// In your App.tsx or main component
+import { useState } from 'react'
+import { MattermostChat } from './components'
+
+function NavkitApp() {
+  const [showChat, setShowChat] = useState(false)
+  const jwtToken = 'your-jwt-token'
+
+  return (
+    <>
+      {/* Your existing NavKit code */}
+      <AppBar>
+        <Toolbar>
+          <IconButton onClick={() => setShowChat(!showChat)}>
+            <ChatIcon />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+
+      {/* Mattermost Chat Modal or Sidebar */}
+      {showChat && (
+        <Box
+          sx={{
+            position: 'fixed',
+            right: 0,
+            top: 64,
+            width: 400,
+            height: 'calc(100vh - 64px)',
+            zIndex: 1200,
+            boxShadow: 3
+          }}
+        >
+          <MattermostChat jwtToken={jwtToken} />
+        </Box>
+      )}
+    </>
+  )
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `jwtToken` | `string` | Yes | - | JWT token for Mattermost authentication |
+| `onNotification` | `(count: number) => void` | No | - | Callback when notification count changes |
+| `onUrlClick` | `(url: string) => void` | No | - | Callback when user clicks a URL in Mattermost |
+| `width` | `string \| number` | No | `'100%'` | Width of the iframe container |
+| `height` | `string \| number` | No | `'100%'` | Height of the iframe container |
+
+## How It Works
+
+### Authentication
+The component constructs the iframe URL as:
+```
+${VITE_MATTERMOST_URL}/login?oxauth=${jwtToken}
+```
+
+This allows automatic authentication with your Mattermost server using the provided JWT token.
+
+### Notification Tracking
+- When the window loses focus (user switches tabs/windows), incoming Mattermost messages increment the unread counter
+- A red badge appears in the top-right corner showing the unread count
+- When the window regains focus, the counter resets to 0
+- The `onNotification` callback is triggered whenever the count changes
+
+### Security
+- Origin validation ensures only messages from your configured Mattermost server are processed
+- Messages from other origins are logged and ignored
+- Clipboard permissions are explicitly granted for proper copy/paste functionality
+
+### postMessage Communication
+The component listens for `Notify` events from the Mattermost iframe with the following structure:
+
+```typescript
+{
+  event: 'Notify',
+  data: {
+    title: 'Message title',
+    body: 'Message content',
+    channel: 'channel-id',
+    teamId: 'team-id',
+    url: 'deep-link-url'
+  }
+}
+```
+
+## Browser Compatibility
+
+- Chrome/Edge: ✅ Full support
+- Firefox: ✅ Full support
+- Safari: ✅ Full support
+- Mobile browsers: ✅ Full support (with responsive sizing)
+
+## Security Considerations
+
+1. **JWT Token Storage**: Never store JWT tokens in localStorage or sessionStorage if they contain sensitive data. Consider using httpOnly cookies or secure session management.
+
+2. **Origin Validation**: The component validates the origin of postMessage events. Ensure `VITE_MATTERMOST_URL` is set correctly in production.
+
+3. **HTTPS**: In production, always use HTTPS for both your app and Mattermost server.
+
+## Troubleshooting
+
+### Iframe not loading
+- Check that `VITE_MATTERMOST_URL` is set correctly in `.env`
+- Verify the JWT token is valid
+- Check browser console for CORS or CSP errors
+- Ensure Mattermost server allows iframe embedding
+
+### Notifications not working
+- Verify the window focus/blur events are firing
+- Check that postMessage events are being sent from Mattermost
+- Ensure origin validation is passing (check console for warnings)
+
+### Clipboard not working
+- Verify the `allow` attribute includes clipboard permissions
+- Check that the user has granted clipboard permissions in their browser
+- Some browsers require HTTPS for clipboard API access
+
+## License
+
+Part of the Taruvi NavKit project.

package/src/components/Profile/Profile.styles.ts

@@ -0,0 +1,59 @@
+import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions } from '../../styles/variables'
+
+export const profileStyles = {
+  container: {
+    position: 'relative' as const,
+  },
+  trigger: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    ml: spacing.md,
+    cursor: 'pointer',
+  },
+  avatar: {
+    width: dimensions.avatarSize,
+    height: dimensions.avatarSize,
+    bgcolor: colours.bg.avatar,
+    color: colours.text.primary,
+    fontWeight: typography.weights.semibold,
+    fontSize: typography.sizes.sm,
+  },
+  name: {
+    color: colours.text.primary,
+    fontSize: typography.sizes.sm,
+    fontWeight: typography.weights.regular,
+    letterSpacing: typography.letterSpacing.default,
+    display: { xs: 'none', md: 'block' },
+  },
+  menu: {
+    position: 'absolute' as const,
+    top: 60,
+    right: 0,
+    width: 200,
+    borderRadius: borderRadius.default,
+    boxShadow: shadows.dropdown,
+    backgroundColor: colours.bg.white,
+    zIndex: zIndex.overlay,
+    py: 1,
+  },
+  menuItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.md,
+    px: spacing.md,
+    py: spacing.sm,
+    '&:hover': {
+      backgroundColor: colours.bg.light,
+    },
+  },
+  menuItemText: {
+    color: colours.text.secondary,
+    fontSize: typography.sizes.sm,
+    fontWeight: typography.weights.regular,
+  },
+  iconStyle: {
+    fontSize: dimensions.iconSize.sm,
+    color: colours.text.secondary,
+  },
+}

package/src/components/Profile/Profile.tsx

@@ -0,0 +1,36 @@
+import { Box, Avatar, Typography } from '@mui/material'
+import { profileStyles } from './Profile.styles'
+import nopfp from "../../assets/nopfp.png"
+
+interface UserData {
+    full_name?: string
+    first_name?: string
+    last_name?: string
+    pfp?: string
+    username?: string
+    email?: string
+}
+
+interface ProfileProps {
+    userData: UserData
+    onClick: () => void
+}
+
+const Profile = (props: ProfileProps) => {
+    const { userData, onClick } = props
+
+    return (
+        <Box sx={profileStyles.trigger} onClick={onClick}>
+            <Avatar
+                src={userData.pfp || nopfp}
+                sx={profileStyles.avatar}
+            >
+            </Avatar>
+            <Typography sx={profileStyles.name}>
+                {userData.first_name} {userData.last_name}
+            </Typography>
+        </Box>
+    )
+}
+
+export default Profile

package/src/components/Profile/ProfileMenu.tsx

@@ -0,0 +1,42 @@
+import { Card, MenuItem, Typography } from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { profileStyles } from './Profile.styles'
+import { useNavigation } from '../../NavkitContext'
+
+const ProfileMenu = () => {
+    const { navigateToUrl } = useNavigation()
+
+    const handlePreferences = () => {
+        navigateToUrl('preferences', true)
+    }
+
+    const handleLogout = async () => {
+        //handle logout
+    }
+
+    return (
+        <Card sx={profileStyles.menu}>
+            <MenuItem onClick={handlePreferences} sx={profileStyles.menuItem}>
+                <FontAwesomeIcon
+                    icon={["fas", "gear"]}
+                    style={profileStyles.iconStyle}
+                />
+                <Typography sx={profileStyles.menuItemText}>
+                    Preferences
+                </Typography>
+            </MenuItem>
+
+            <MenuItem onClick={handleLogout} sx={profileStyles.menuItem}>
+                <FontAwesomeIcon
+                    icon={["fas", "right-from-bracket"]}
+                    style={profileStyles.iconStyle}
+                />
+                <Typography sx={profileStyles.menuItemText}>
+                    Logout
+                </Typography>
+            </MenuItem>
+        </Card>
+    )
+}
+
+export default ProfileMenu

package/src/components/Search/Search.styles.ts

@@ -0,0 +1,7 @@
+export const searchStyles = {
+  textField: {
+    '& .MuiOutlinedInput-root': {
+      height: '40px',
+    },
+  },
+}

package/src/components/Search/Search.tsx

@@ -0,0 +1,51 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { TextField, InputAdornment } from '@mui/material'
+import { useState } from 'react'
+import { searchStyles } from './Search.styles'
+import type { AppData } from '../../types'
+
+interface SearchProps {
+  appsList?: AppData[]
+  onSearchChange?: (filteredApps: AppData[]) => void
+}
+
+const Search = ({ appsList, onSearchChange }: SearchProps) => {
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    setSearchTerm(value)
+
+    // Filter apps based on search term
+    if (appsList) {
+      const filtered = value.trim() === ''
+        ? appsList
+        : appsList.filter(app =>
+            app.appname.toLowerCase().includes(value.toLowerCase())
+          )
+
+      // Call parent callback with filtered results
+      onSearchChange?.(filtered)
+    }
+  }
+
+  return (
+    <TextField
+      fullWidth
+      placeholder="Search for apps"
+      variant="outlined"
+      value={searchTerm}
+      onChange={handleSearchChange}
+      sx={searchStyles.textField}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <FontAwesomeIcon icon={["fas", "magnifying-glass"]} style={{ color: '#9e9e9e' }} />
+          </InputAdornment>
+        ),
+      }}
+    />
+  )
+}
+
+export default Search

package/src/components/Shortucts/Shortcuts.styles.ts

@@ -0,0 +1,29 @@
+import { colours, spacing, dimensions } from '../../styles/variables'
+
+export const shortcutsStyles = {
+  desktopContainer: {
+    display: { xs: 'none', md: 'flex' },
+    alignItems: 'center',
+    gap: 3,
+    ml: spacing.md,
+  },
+  mobileTrigger: {
+    display: { xs: 'flex', md: 'none' },
+    ml: spacing.sm,
+  },
+  shortcut: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    color: colours.text.secondary,
+    '&:hover': {
+      opacity: 0.7,
+    },
+  },
+  iconStyle: {
+    fontSize: dimensions.iconSize.lg,
+    color: colours.text.secondary,
+  },
+}

package/src/components/Shortucts/Shortcuts.tsx

@@ -0,0 +1,72 @@
+import type { AppData } from '../../types'
+import { Box, Link, IconButton } from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { shortcutsStyles } from './Shortcuts.styles'
+import { useNavigation } from '../../NavkitContext'
+
+interface ShortcutsProps {
+    showChat?: (showChat: boolean) => void
+    onMenuToggle?: () => void
+    triggerRef?: React.RefObject<HTMLButtonElement | null>
+}
+
+const Shortcuts = (props: ShortcutsProps) => {
+
+    const { showChat, onMenuToggle, triggerRef } = props
+    const { navigateToUrl, siteSettings, isUserAuthenticated } = useNavigation()
+    const shortcuts = siteSettings.shortcuts
+
+    const handleShortcutClick = (shortcut: AppData) => {
+        if (shortcut.url) {
+            navigateToUrl(shortcut.url, false)
+        }
+    }
+    if ((!shortcuts || shortcuts.length === 0) && !siteSettings.showChat) {
+        return null
+    }
+
+    return (
+        <>
+            {/* Desktop view - inline shortcuts */}
+            <Box sx={shortcutsStyles.desktopContainer}>
+                {shortcuts?.map((shortcut) => (
+                    <Link
+                        key={shortcut.id}
+                        onClick={() => handleShortcutClick(shortcut)}
+                        sx={shortcutsStyles.shortcut}
+                    >
+                        <FontAwesomeIcon
+                            icon={["far", shortcut.icon] as any}
+                            style={shortcutsStyles.iconStyle}
+                        />
+                    </Link>
+                ))}
+                {siteSettings.showChat && isUserAuthenticated && <Link
+                    key={"chat"}
+                    onClick={() => showChat?.(true)}
+                    sx={shortcutsStyles.shortcut}
+                >
+                    <FontAwesomeIcon
+                        icon={["far", "comment"] as any}
+                        style={shortcutsStyles.iconStyle}
+                    />
+                </Link>
+                }
+            </Box>
+
+            {/* Mobile view - trigger button */}
+            <IconButton
+                ref={triggerRef}
+                onClick={onMenuToggle}
+                sx={shortcutsStyles.mobileTrigger}
+            >
+                <FontAwesomeIcon
+                    icon={["fas", "ellipsis-v"]}
+                    style={shortcutsStyles.iconStyle}
+                />
+            </IconButton>
+        </>
+    )
+}
+
+export default Shortcuts

package/src/components/Shortucts/ShortcutsMenu.styles.ts

@@ -0,0 +1,34 @@
+import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions } from '../../styles/variables'
+
+export const shortcutsMenuStyles = {
+  menu: {
+    position: 'absolute' as const,
+    top: 60,
+    right: 0,
+    width: 200,
+    borderRadius: borderRadius.default,
+    boxShadow: shadows.dropdown,
+    backgroundColor: colours.bg.white,
+    zIndex: zIndex.overlay,
+    py: 1,
+  },
+  menuItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.md,
+    px: spacing.md,
+    py: spacing.sm,
+    '&:hover': {
+      backgroundColor: colours.bg.light,
+    },
+  },
+  menuItemText: {
+    color: colours.text.secondary,
+    fontSize: typography.sizes.sm,
+    fontWeight: typography.weights.regular,
+  },
+  iconStyle: {
+    fontSize: dimensions.iconSize.sm,
+    color: colours.text.secondary,
+  },
+}

package/src/components/Shortucts/ShortcutsMenu.tsx

@@ -0,0 +1,62 @@
+import { Card, MenuItem, Typography } from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import type { AppData } from '../../types'
+import { shortcutsMenuStyles } from './ShortcutsMenu.styles'
+import { useNavigation } from '../../NavkitContext'
+
+interface ShortcutsMenuProps {
+    showChat: (showChat: boolean) => void
+}
+
+const ShortcutsMenu = (props: ShortcutsMenuProps) => {
+    const { showChat } = props
+    const { navigateToUrl, siteSettings, isUserAuthenticated } = useNavigation()
+    const shortcuts = siteSettings.shortcuts
+
+    const handleShortcutClick = (shortcut: AppData) => {
+        if (shortcut.url) {
+            navigateToUrl(shortcut.url, false)
+        }
+    }
+
+    if ((!shortcuts || shortcuts.length === 0) && !siteSettings.showChat) {
+        return null
+    }
+
+    return (
+        <Card sx={shortcutsMenuStyles.menu}>
+            {siteSettings.showChat && isUserAuthenticated && (
+                <MenuItem
+                    key="chat"
+                    onClick={() => showChat(true)}
+                    sx={shortcutsMenuStyles.menuItem}
+                >
+                    <FontAwesomeIcon
+                        icon={["far", "comment"] as any}
+                        style={shortcutsMenuStyles.iconStyle}
+                    />
+                    <Typography sx={shortcutsMenuStyles.menuItemText}>
+                        Chat
+                    </Typography>
+                </MenuItem>
+            )}
+            {shortcuts?.map((shortcut) => (
+                <MenuItem
+                    key={shortcut.id}
+                    onClick={() => handleShortcutClick(shortcut)}
+                    sx={shortcutsMenuStyles.menuItem}
+                >
+                    <FontAwesomeIcon
+                        icon={["far", shortcut.icon] as any}
+                        style={shortcutsMenuStyles.iconStyle}
+                    />
+                    <Typography sx={shortcutsMenuStyles.menuItemText}>
+                        {shortcut.appname}
+                    </Typography>
+                </MenuItem>
+            ))}
+        </Card>
+    )
+}
+
+export default ShortcutsMenu

package/src/components/index.ts

@@ -0,0 +1,8 @@
+import AppLauncher from './AppLauncher/AppLauncher'
+import Shortcuts from './Shortucts/Shortcuts'
+import ShortcutsMenu from './Shortucts/ShortcutsMenu'
+import Profile from './Profile/Profile'
+import ProfileMenu from './Profile/ProfileMenu'
+import MattermostChat from './MattermostChat/MattermostChat'
+
+export { AppLauncher, Shortcuts, ShortcutsMenu, Profile, ProfileMenu, MattermostChat }

package/src/styles/commonStyles.ts

@@ -0,0 +1,42 @@
+// Common Style Patterns - Reusable style objects
+
+export const flexCenter = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
+export const flexRow = {
+  display: 'flex',
+  alignItems: 'center',
+}
+
+export const flexColumn = {
+  display: 'flex',
+  flexDirection: 'column' as const,
+  alignItems: 'center',
+}
+
+export const hoverFade = {
+  '&:hover': {
+    opacity: 0.7,
+  },
+}
+
+export const hoverBgLight = {
+  '&:hover': {
+    backgroundColor: '#f5f5f5',
+  },
+}
+
+export const cursorPointer = {
+  cursor: 'pointer',
+}
+
+export const absolutePositioned = {
+  position: 'absolute' as const,
+}
+
+export const relativePositioned = {
+  position: 'relative' as const,
+}