SmartHR UI

smarthr-ui-charts is a collection of chart components built for React, specifically designed for the SmartHR UI design system. It integrates seamlessly with the main smarthr-ui library by utilizing the same color palettes, theme systems, and design principles.

Currently, the package is in the planning and early development stages, and chart components will be added incrementally.

The navigations prop controls the navigation bar displayed below the header.

Important Behavior:

• The hamburger menu on mobile is only displayed when the navigations prop is provided. If you are currently using a custom hamburger menu implementation, you should migrate to using the navigations prop.
• The navigations data structure is similar to the buttons prop in the AppNavi component, but adds support for grouping navigation items within dropdowns.
• For examples of dropdown grouping, refer to the "VRT Navigation Dropdown Group" in Storybook.

The tenants prop controls tenant selection UI:

• Desktop: Behaves like the standard Header component.
• Mobile: If a hamburger menu is present, the tenant selection appears inside the menu. Otherwise, it appears next to the logo.

Hiding tenant selection on mobile: If you have a custom hamburger menu that already includes tenant selection and you want to prevent the AppHeader from showing its own tenant UI on mobile, pass undefined to the tenants prop when the window width is 751px or less.

Install smarthr-ui using your preferred package manager. Note that smarthr-ui has react, react-dom, and styled-components as peerDependencies, so you must ensure these are installed in your project.

// with npm
npm install smarthr-ui

// with yarn
yarn add smarthr-ui

// with pnpm
pnpm add smarthr-ui

// Ensure peer dependencies are installed
npm install react react-dom styled-components

To use the chart components, install the smarthr-ui-charts package.

Note: This package is currently under development.

In addition to the main package, you must install the following peer dependencies to ensure compatibility with the SmartHR UI design system:

• smarthr-ui
• react
• react-dom
• styled-components

# Install the chart library
npm install smarthr-ui-charts

# Install required peer dependencies
npm install smarthr-ui react react-dom styled-components

To start the development server for this sandbox project, use one of the following package manager commands. Once running, you can view the application at http://localhost:3000.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

The AppHeader component allows you to construct a standardized header and navigation UI by providing specific props. To use it, you should populate the HeaderProps type defined in types.ts. It is recommended to fill in as many props as possible, excluding those suffixed with AdditionalContent unless specifically needed for custom UI injections.

export type HeaderProps = ComponentProps<typeof Header> & {
  locale?: LocaleProps | null
  enableNew?: boolean
  appName?: ReactNode
  schoolUrl?: string | null
  helpPageUrl?: string | null
  userInfo?: UserInfoProps | null
  desktopAdditionalContent?: ReactNode
  navigations?: Navigation[] | null
  desktopNavigationAdditionalContent?: ReactNode
  releaseNote?: ReleaseNoteProps | null
  features?: Array<Launcher['feature']>
  mobileAdditionalContent?: ReactNode
}

Depending on your application's localization strategy, follow one of these two patterns:

1. Using WOVN

If your app uses WOVN for translation:

• Do not use the locale prop.
• For any text passed as a prop (which are ReactNode types), wrap the text in a span with the woven-enabled="true" attribute to ensure WOVN can translate it.

2. Using Application Dictionaries

If your app manages its own translation dictionaries:

• Populate the locale prop. The component uses this to translate its internal text.
• For any text passed from the application to the component, ensure you pass the already-translated string from your application's dictionary.

// Example for WOVN
<AppHeader 
  appName={<span woven-enabled="true">My App Name</span>} 
/>