@whdigitalbuild/react-base-wh

A comprehensive React UI component library and template designed for Woh Hup applications. This package provides a standardized layout structure and a collection of reusable components built on top of Ant Design.

Installation

Install the package using npm:

npm install @whdigitalbuild/react-base-wh

Peer Dependencies

Ensure you have the following peer dependencies installed in your project:

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "antd": "^5.4.6",
  "moment": "^2.29.4",
  "@ant-design/icons": "^5.0.1"
}

Usage

Main Template (MainWH)

MainWH is the primary layout component that provides the standard structure for applications, including a top bar and a collapsable left sidebar.

import React from 'react';
import { MainWH } from '@whdigitalbuild/react-base-wh';

const App = () => {
  const routes = [
    {
      path: '/home',
      name: 'Home',
      icon: <HomeOutlined />, // from @ant-design/icons
      component: HomePage
    },
    // ... define other routes
  ];

  const projects = [
    { id: 1, name: 'Project A' },
    { id: 2, name: 'Project B' }
  ];

  return (
    <MainWH
      routes={routes}
      projects={projects}
      slidesToShow={5}
      showSearch={true}
      onSearchChange={(e) => console.log(e.target.value)}
      onChangeNavigate={(route) => console.log('Navigate to:', route)}
      onChangeProjectSelected={(project) => console.log('Selected:', project)}
    >
      <div>
        {/* Your Page Content Goes Here */}
        <h1>Welcome to the Application</h1>
      </div>
    </MainWH>
  );
};

export default App;

MainWH Props

| Prop | Type | Description | |------|------|-------------| | children | ReactNode | The main content to be rendered within the layout body. | | routes | any[] | Array of route objects for the sidebar navigation. | | projects | any[] | List of projects to display in the project selector. | | disableProjects | any | Props to disable project selection if needed. | | searchText | any | Value for the top bar search input. | | searchOptions | any[] | Options for the search input if using a select/autocomplete style. | | leftComponent | ReactNode | Custom component to render on the left side of the top bar. | | rightComponent | ReactNode | Custom component to render on the right side of the top bar. | | slidesToShow | number | Number of items to show in carousel-like project lists (if applicable). | | showSearch | boolean | Whether to show the search bar in the layout. | | onChangeNavigate | (props: any) => any | Callback when a navigation item is clicked. | | onChangeProjectSelected | (props: any) => any | Callback when a project is selected. | | onSearchChange | (props: any) => any | Callback when search input changes. | | onClickSearch | (props: any) => any | Callback when the search button is clicked. | | onClickSave | (props: any) => any | Callback when the save button in the top bar is clicked. | | styleForTopBar | CSSProperties | Custom styles for the top bar. | | styleForLeftSideBar | CSSProperties | Custom styles for the left sidebar. | | styleForBody | CSSProperties | Custom styles for the body container. |

TopBar Components

The package exports specialized components for the top bar actions and filters.

import { 
  SearchInputWH, 
  SearchSelectOption, 
  DateRangePickerWH, 
  StatusFilterWH 
} from '@whdigitalbuild/react-base-wh';

// Example: Using the Search Input
<SearchInputWH 
  placeholder="Search..." 
  onSearch={(value) => console.log(value)} 
/>

// Example: Using the Date Range Picker
<DateRangePickerWH 
  onChange={(dates) => console.log(dates)} 
/>

Available TopBar Components

• Inputs & Filters:

  • SearchInputWH: A styled search input field.
  • SearchSelectOption: A search component with dropdown options.
  • DateRangePickerWH: A date range picker based on Ant Design.
  • StatusFilterWH: A dropdown or filter component for status selection.

• Icons:

  • AddIconWH
  • SaveIconWH
  • UploadIconWH
  • FileExcelIconWH
  • HighlightIconWH
  • GroupExpandedIconWH
  • HansonTableIConWH

License

MIT © wohhupwebdeveloper