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: "[email protected]",
          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: "[email protected]",
          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" />;
  )
}