StackTrek Components

A unified set of components used accross all StackTrek products.

Read here for documentation.

Getting started

npm i stacktrek-components

How to use StackTrekNavbar

import React, { useState } from "react";
import { StackTrekNavbar, ActiveNavMenu, NavSearchProps } from "./index";

function App() {
  type SampleSearchItemType = {
    title: string;
    description: string;
  };

  const [activeNavMenu, setActiveNavMenu] = useState<ActiveNavMenu>("none");
  const [theme, setTheme] = useState<"dark" | "light">("light");
  const [keyword, setKeyword] = useState<string>("");
  const [selectedSearch, setSelectedSearch] = useState<SampleSearchItemType | null>(null);

  const subtoolbar = (
    <div>
        <span>Top Courses<span>
        <span>Free Courses</span>
        <span>For Beginners</span>
    </div>
  );

  const demoSearchOptions = [
    {
      title: "Course 1",
      description: "Description 1",
    },
    {
      title: "Course 2",
      description: "Description 1",
    },
    {
      title: "Course 3",
      description: "Description 1",
    },
  ];

  const navSearchProps: NavSearchProps<SampleSearchItemType> = {
    searchOptions: demoSearchOptions,
    searchKeyWord: keyword,
    onClearKeyword: () => setKeyword(""),
    onSearch: (_: React.ChangeEvent<{}>, value: string) => setKeyword(value),
    isSearchLoading: false,
    searchLoadingText: <>Loading...</>,
    getOptionLabel: (s) => `${s.title}-${s.description}`,
    onSearchChange: (_: React.ChangeEvent<{}>, value: SearchItem | null) => setSelectedSearch(value),
    selectedSearch: selectedSearch,
    searchRenderOption: (renderProps, s) => {
      return (
        <span {...renderProps} >
          {/* Render your search option here */}
          {`${s.title} - ${s.description}`}
        </span>
      );
    },
  };

  return (
    <div className="App">
      <StackTrekNavbar
        theme={theme}
        activeNavMenu={activeNavMenu}
        onHomeClick={(_e) => setActiveNavMenu("marketplace")}
        onStackleagueClick={(_e) => setActiveNavMenu("stackleague")}
        onMessagesClick={(_e) => setActiveNavMenu("messages")}
        onNotificationsClick={(_e) => setActiveNavMenu("notifications")}
        onMyCoursesClick={(_e) => setActiveNavMenu("my-courses")}
        unreadMessagesCount={1}
        unreadNotificationsCount={1}
        authUser={{
          name: "Jane Doe",
          email: "[e-mail]",
          isOnline: true,
        }}
        onThemeChange={(_e, _checked) => setTheme(theme === "dark" ? "light" : "dark")}
        onLogout={(-e) => {}}
        onMyProfileClick={(_e) => {}}
        navSearchProps={navSearchProps}
        subtoolbar={subtoolbar}
        onSignInClick={() => {}}
        onSignUpClick={() => {}}
        onAdminClick={(_e)=> {}}
      />
    </div>
  );
}

export default App;

StackTrekNavbar Demo

With toolbar

When onClickNotification is not supplied, it'll use the default notification

When authUser is not supplied, it'll display the Sign In and Sign Up button

StacktrekNavbar Props

Prop	Type	Default Value	Description
theme	'light' / 'dark'	'light'	determines the theme type
hasProgressBar	boolean	false	if true adjusts nav height to allocate specified progress bar height
progressBarHeight	number	0	determines the height of progress bar that nav has to allocate for
leftAction	JSX.Element	undefined	optional nav menu on the left most part of nav
onLogoClick	(e: React.MouseEvent<HTMLImageElement, MouseEvent>) => void	undefined	optional function triggered when logo is clicked
activeNavMenu	'marketplace' | 'stackleague' | 'messages' | 'notifications' | 'my-courses' | 'none'	'none'	determines which nav menu is active
onHomeClick	(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void	undefined	function triggered when Home menu is clicked; if not specified, Home icon is not rendered
onStackleagueClick	(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void	undefined	function triggered when Stackleague menu is clicked; if not specified, Stackleague button is not rendered
onMessagesClick	(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void	undefined	function triggered when Messages menu is clicked; if not specified, Message icon is not rendered
onNotificationsClick	(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void	undefined	function triggered when Notifications menu is clicked, if not specified, notifications icon is not rendered but when NotificationProvider is a parent component, it'll show with built in notification functionality
onMyCoursesClick	(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void	undefined	function triggered when My Courses menu is clicked; if not specified, My Courses button is not rendered
unreadMessagesCount	number	0	displayed on Message menu's badge, indicating unread messages
unreadNotificationsCount	number	0	displayed on Notification menu's badge, indicating unread notifications
authUser	AuthUser	undefined	contains details displayed in nav's avatar menu, if not specified, no avatar menu is rendered
onLogout	(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void	undefined	function triggered when logout button is clicked in avatar menu
onThemeChange	(e: React.ChangeEvent, checked: boolean) => void	undefined	function triggered when switch is toggled in avatar menu's darkmode option; if not specified, darkmode switch is not rendered
onMyProfileClick	(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	undefined	function triggered when "My Profile" button is clicked in nav avatar menu, if not specified, button is not rendered
navSearchProps	NavSearchProps<T>	undefined	utilized by the nav's search bar, if not provided, search bar is not rendered
searchBarWidth	number	335	defines the width of the nav search bar
subtoolbar	JSX.Element	undefined	optional bottom toolbar on nav
onSeeAllNotificationsNotifications	() => void	undefined	function triggered when see all is clicked inside notification pop up menu
onTrainingSessionsClick	(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void	undefined	function triggered when Training Sessions is clicked
onSignInClick	(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void	undefined	function triggered when Sign In button menu is clicked
onSignUpClick	(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void	undefined	function triggered when Sign Up button menu is clicked
onAdminClick	(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void	undefined	function triggered when Admin button is clicked in avatar menu

AuthUser

Key	Type	Default Value	Description
name	string	required	user's name
email	string	required	user's email
photoUrl	string	undefined	path to user's avatar photo, if not specified, user's initial is displayed instead
isOnline	boolean	false	indicates if user is active or not

NavSearchProps<T = any>

T depends on what is specified, if not specified, type is any

Prop	Type	Default Value	Description
searchOptions	T	required	the search options rendered upon inputting keyword on searchbar
getOptionLabel	(option: T) => string	required	defines how the search option label is rendered
searchKeyWord	string	required	search from the search bar
onClearKeyword	() => void	required	function triggered when clearing input from searchbar
isSearchLoading	boolean	false	determine if searchbar is loading, renders a loading component if true
searchLoadingText	JSX.Element	undefined	component rendered when searchbar is loading
searchRenderOption	(props: React.HTMLAttributes, option: Type) => JSX.Element	required	used to customize how the search option is rendered
selectedSearch	T / null	required	the search item selected from the search results
onSearchChange	(_: React.ChangeEvent<{}>, value: T / null) => void	required	function triggered when user selects an item from the search results
searchFilterOptions	(options: T[], state: FilterOptionsState<T>) => T[]	undefined	used to override built-in filter function that determines eligible options

How to use StackTrekMobileNavbar

import React, { useState } from "react";
import { StackTrekMobileNavbar } from "./index";

function App() {
  return (
    <div className="App">
      <StackTrekMobileNavbar
        theme={"light"}
        onLogoClick={(_e) => {}}
        rightAction={<button>Search</button>}
        leftAction={<button>Menu</button>}
      />
    </div>
  );
}

export default App;

StackTrekMobileNavbar Demo

StackTrekNavbar Props

Prop	Type	Default Value	Description
theme	'light' / 'dark'	'light	determines the theme
onLogoClick	(e: React.MouseEvent<HTMLImageElement, MouseEvent>) => void	undefined	optional function triggered when logo is clicked
rightAction	JSX.Element	undefined	optional nav menu on the right most part of
leftAction	JSX.Element	undefined	optional nav menu on the left most part of
hideLogo	boolean	false	if true, logo will not be displayed

How to use StackTrekMobileMenuContainer

import { useState } from "react";
import { StackTrekMobileMenuContainer } from "./index";

function App() {
  const [theme, setTheme] = useState<"dark" | "light">("light");
  return (
    <div className="App">
      <StackTrekMobileMenuContainer
        theme={theme}
        onHomeClick={() => {}}
        onStackleagueClick={() => {}}
        onMessagesClick={() => {}}
        onThemeChange={(_e, _checked) =>
          setTheme(theme === "dark" ? "light" : "dark")
        }
        onMyCoursesClick={() => {}}
        onLogout={() => {}}
        topContent={<Typography>SAMPLE CONTENT</Typography>}
        bottomContent={<Typography>SAMPLE CONTENT</Typography>}
        onMyProfileClick={() => {}}
        enableNavBarSpacing={true}
        unreadMessagesCount={0}
        authUser={{
          name: "Jane Doe",
          email: "[e-mail]",
          isOnline: true,
        }}
      />
    </div>
  );
}

export default App;

StackTrekMobileMenuContainer Props

Prop	Type	Default Value	Description
theme	'light' / 'dark'	'light'	determines the theme type
onHomeClick	(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void	undefined	function triggered when Home menu is clicked; if not specified, Home menu is not rendered
onStackleagueClick	(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void	undefined	function triggered when Stackleague menu is clicked; if not specified, Stackleague menu is not rendered
onMessagesClick	(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void	undefined	function triggered when Messages menu is clicked; if not specified, Message menu is not rendered
onMyCoursesClick	(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void	undefined	function triggered when My Courses menu is clicked; if not specified, My Courses menu is not rendered
authUser	AuthUser	undefined	contains details displayed in the "My Profile" menu, if not specified, no "My Profile" menu is rendered
onMyProfileClick	(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void	undefined	function trigered when "My Profile" menu is clicked; if not specified, My Profile menu is not rendered
onLogout	(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void	undefined	function triggered when logout menu is clicked in the collapsible profile menu
onThemeChange	(e: React.ChangeEvent, checked: boolean) => void	undefined	function triggered when switch is toggled in the collapsible profile menu; if not specified, darkmode switch is not rendered
topContent	ReactElement	undefined	component to render in the top of the menu
bottomContent	ReactElement	undefined	component to render in the bottom of the menu
enableNavBarSpacing	boolean	true	adjusts the spacing of the container (padding top, height) relative to the navbar; recommended to true if you have a navbar
disableBottomContentPadding	boolean	false	disables the bottom content padding
unreadMessagesCount	number	0	displays the counter for unread messages

StackTrekMobileMenuContainer Sample

StackTrekNotificationContainer

Prop	Type	Default Value	Description
theme	'light' | 'dark'	'light'	determines the theme type
onBackPress	() => void	undefined	optional function triggered when arrow back icon is pressed

const Page = () => {
  const theme: "light" | "dark" = "light";

  return (
    <StackTrekNotificationContainer
      theme={theme}
      onBackPress={() => {
        // handle
      }}
    />;
  )
}

StackTrekFooter

Prop	Type	Default Value	Description
orientation	'landscape' | 'portrait'	'landscape'	For displaying on mobile and desktop screen

Landscape

Portrait

Examples

import { StackTrekFooter } from "./index";

const Page = () => {
  return (
    <StackTrekFooter orientation="portrait" />;
  )
}