@taruvi/navkit 0.0.43 → 0.0.44

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.43",
-  "main": "src/App.tsx",
+  "version": "0.0.44",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.styles.ts

@@ -77,10 +77,11 @@ export const getAppStyles = (mode: ThemeMode) => {
       overflow: 'hidden',
     },
     toolbar: {
-      backgroundColor: '#2B97FF',
+      backgroundColor: '#004369',
       boxShadow: ' 0px 0px 10px 2px rgba(0, 0, 0, 0.3)',
       justifyContent: 'space-between',
-      minHeight: dimensions.navHeight,
+      minHeight: `${dimensions.navHeight} !important`,
+      height: dimensions.navHeight,
     },
     leftSection: {
       display: 'flex',

package/src/App.tsx

@@ -13,7 +13,7 @@ import taruviLogoWhite from "./assets/taruvi-logo-white.png";
 import type { Client } from "@taruvi/sdk"
 
 const NavkitContent = () => {
-  const { isUserAuthenticated, siteSettings, appSettings, appSettingsLoaded, appName, userData, jwtToken, themeMode } = useNavigation();
+  const { isUserAuthenticated, siteSettings, appSettings, appSettingsLoaded, appName, userData, jwtToken, themeMode, navbarColor, iconColor } = useNavigation();
   const resolvedAppName = appName || appSettings?.displayName
   const showTaruviLogo = appSettingsLoaded && !resolvedAppName && !appSettings?.icon
   const styles = getAppStyles(themeMode)
@@ -36,7 +36,7 @@ const NavkitContent = () => {
         />
       )}
       <AppBar position="static" sx={styles.appBar}>
-        <Toolbar sx={styles.toolbar}>
+        <Toolbar sx={{ ...styles.toolbar, ...(navbarColor && { backgroundColor: navbarColor }) }}>
           <Box component={"a"} href="/" sx={styles.leftSection}>
             {showTaruviLogo ? (
               <Box component="img" src={taruviLogoWhite} sx={styles.taruviSpaceLogo} />
@@ -52,7 +52,7 @@ const NavkitContent = () => {
             ) : null}
           </Box>
           <Box component={"div"} sx={styles.rightSection}>
-            <Shortcuts showChat={setShowChat} onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} />
+            <Shortcuts showChat={setShowChat} onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} iconColor={iconColor} />
             <Box
                 onClick={() => {
                   if (isUserAuthenticated) {
@@ -79,7 +79,7 @@ const NavkitContent = () => {
                 <Box component="img" src={taruviLogo} sx={styles.appLauncherLogo} />
               )}
             </Box>
-            {isUserAuthenticated && userData && <Profile userData={userData} onClick={() => setShowProfileMenu(!showProfileMenu)} />}
+            {isUserAuthenticated && userData && <Profile userData={userData} onClick={() => setShowProfileMenu(!showProfileMenu)} iconColor={iconColor} />}
           </Box>
         </Toolbar>
       </AppBar>
@@ -121,11 +121,13 @@ interface NavkitProps {
   client: Client
   appName?: string
   getTheme?: (theme: 'light' | 'dark') => void
+  navbarColor?: string
+  iconColor?: string
 }
 
-const Navkit = ({ client, getTheme, appName }: NavkitProps) => {
+const Navkit = ({ client, getTheme, appName, navbarColor, iconColor }: NavkitProps) => {
   return (
-    <NavkitProvider client={client} onThemeChange={getTheme} appName={appName}>
+    <NavkitProvider client={client} onThemeChange={getTheme} appName={appName} navbarColor={navbarColor} iconColor={iconColor}>
       <NavkitContent />
     </NavkitProvider>
   )

package/src/NavkitContext.tsx

@@ -19,7 +19,7 @@ const getInitialTheme = (): ThemeMode => {
 
 export const NavigationContext = createContext<NavigationContextType | undefined>(undefined)
 
-export const NavkitProvider = ({ children, client, onThemeChange, appName }: NavkitProviderProps) => {
+export const NavkitProvider = ({ children, client, onThemeChange, appName, navbarColor, iconColor }: NavkitProviderProps) => {
   const auth = new Auth(client)
 
   const user = useRef<any>(null)
@@ -176,7 +176,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
   }, [themeMode, onThemeChange])
 
   return (
-    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings: siteSettings.current, appSettings, appSettingsLoaded, appName, jwtToken, isUserAuthenticated, client, auth, themeMode, toggleTheme }}>
+    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings: siteSettings.current, appSettings, appSettingsLoaded, appName, jwtToken, isUserAuthenticated, client, auth, themeMode, toggleTheme, navbarColor, iconColor }}>
       {children}
     </NavigationContext.Provider>
   )

package/src/components/Profile/Profile.tsx

@@ -4,9 +4,9 @@ import { useNavigation } from '../../NavkitContext'
 
 const ProfileIcon = ({ color }: { color?: string }) => (
     <SvgIcon viewBox="0 0 22 22" sx={{ fontSize: 23, display: 'block' }}>
-        <path d="M10.9921 20.9849C16.511 20.9849 20.9849 16.511 20.9849 10.9921C20.9849 5.4732 16.511 0.999268 10.9921 0.999268C5.47322 0.999268 0.999283 5.4732 0.999283 10.9921C0.999283 16.511 5.47322 20.9849 10.9921 20.9849Z" stroke={color || "#ffffff"} fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
-        <path d="M10.9921 11.9914C12.6478 11.9914 13.9899 10.6492 13.9899 8.99357C13.9899 7.33791 12.6478 5.99573 10.9921 5.99573C9.33644 5.99573 7.99426 7.33791 7.99426 8.99357C7.99426 10.6492 9.33644 11.9914 10.9921 11.9914Z" stroke={color || "#ffffff"} fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
-        <path d="M5.99569 19.6479V17.9871C5.99569 17.457 6.20625 16.9487 6.58106 16.5739C6.95586 16.1991 7.4642 15.9885 7.99425 15.9885H13.9899C14.52 15.9885 15.0283 16.1991 15.4031 16.5739C15.7779 16.9487 15.9885 17.457 15.9885 17.9871V19.6479" stroke={color || "#ffffff"} fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M10.9921 20.9849C16.511 20.9849 20.9849 16.511 20.9849 10.9921C20.9849 5.4732 16.511 0.999268 10.9921 0.999268C5.47322 0.999268 0.999283 5.4732 0.999283 10.9921C0.999283 16.511 5.47322 20.9849 10.9921 20.9849Z" stroke={color || "#9DE5FD"} fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M10.9921 11.9914C12.6478 11.9914 13.9899 10.6492 13.9899 8.99357C13.9899 7.33791 12.6478 5.99573 10.9921 5.99573C9.33644 5.99573 7.99426 7.33791 7.99426 8.99357C7.99426 10.6492 9.33644 11.9914 10.9921 11.9914Z" stroke={color || "#9DE5FD"} fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M5.99569 19.6479V17.9871C5.99569 17.457 6.20625 16.9487 6.58106 16.5739C6.95586 16.1991 7.4642 15.9885 7.99425 15.9885H13.9899C14.52 15.9885 15.0283 16.1991 15.4031 16.5739C15.7779 16.9487 15.9885 17.457 15.9885 17.9871V19.6479" stroke={color || "#9DE5FD"} fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
     </SvgIcon>
 )
 

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

@@ -10,7 +10,7 @@ export const shortcutsStyles = {
   mobileTrigger: {
     display: { xs: 'flex', md: 'none' },
     ml: spacing.sm,
-    color: '#ffffff',
+    color: '#9DE5FD',
   },
   shortcut: {
     display: 'flex',
@@ -25,6 +25,6 @@ export const shortcutsStyles = {
   },
   iconStyle: {
     fontSize: '23px',
-    color: '#ffffff',
+    color: colours.text.secondary,
   },
 }

package/src/components/Shortucts/Shortcuts.tsx

@@ -6,7 +6,7 @@ import { useNavigation } from '../../NavkitContext'
 
 const ChatIcon = ({ color }: { color?: string }) => (
     <SvgIcon viewBox="-2 -2 24 24" sx={{ fontSize: 23, display: 'block', position: 'relative', top: 2 }}>
-        <path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0Z" fill={color || "#ffffff"}/>
+        <path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0Z" fill={color || "#9DE5FD"}/>
     </SvgIcon>
 )
 
@@ -65,7 +65,7 @@ const Shortcuts = (props: ShortcutsProps) => {
                 >
                     <FontAwesomeIcon
                         icon={["fas", "ellipsis-v"]}
-                        style={{ ...shortcutsStyles.iconStyle, color: iconColor || '#ffffff' }}
+                        style={{ ...shortcutsStyles.iconStyle, color: iconColor || '#9DE5FD' }}
                     />
                 </IconButton>
             )}

package/src/types.ts

@@ -42,6 +42,8 @@ export interface NavigationContextType {
   auth: Auth
   themeMode: ThemeMode
   toggleTheme: () => void
+  navbarColor?: string
+  iconColor?: string
 }
 
 export interface NavkitProviderProps {
@@ -49,4 +51,6 @@ export interface NavkitProviderProps {
   client: Client
   onThemeChange?: (theme: ThemeMode) => void
   appName?: string
+  navbarColor?: string
+  iconColor?: string
 }

package/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -10,4 +11,26 @@ export default defineConfig({
       },
     }),
   ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/App.tsx'),
+      formats: ['es'],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        '@mui/material',
+        '@mui/icons-material',
+        '@emotion/react',
+        '@emotion/styled',
+        '@fortawesome/fontawesome-svg-core',
+        '@fortawesome/free-solid-svg-icons',
+        '@fortawesome/free-regular-svg-icons',
+        '@fortawesome/react-fontawesome',
+      ],
+    },
+  },
 })