@rayhanalmim/component-library v1.0.0

Anthill Component Library

Overview

The Anthill Component Library is a reusable component library designed for the Antopolis Admin Application. It provides a structured, modular approach to UI development, ensuring consistency and maintainability across projects.

Installation

To install the component library, run the following command:

npm install @antopolis/antopolis-adminapp-component-library

Usage

To use a component from the library, import it as shown below:

import { CLRouterProvider } from "@antopolis/antopolis-adminapp-component-library/utils";

Folder Structure

The library follows a structured folder hierarchy to maintain modularity:

📁src
 ├── 📁Components
 │   ├── 📁Elements
 │   ├── 📁Layouts
 │   ├── 📁Sections
 │   ├── 📁ui
 │
 ├── 📁Contexts
 ├── 📁Screens
 ├── 📁utils
 ├── App.jsx
 ├── main.jsx

Main Entry Points

ESLint Configuration

To avoid ESLint errors while working with the component library, update your .eslintrc.js with the following settings:

settings: {
  react: { version: "detect" },
  "import/resolver": {
    node: {
      extensions: [".js", ".jsx", ".ts", ".tsx"],
      moduleDirectory: ["node_modules", "src"],
      paths: ["src"]
    },
    alias: {
      map: [["antopolis-adminapp-component-library", "./node_modules/antopolis-adminapp-component-library"]],
      extensions: [".js", ".jsx", ".ts", ".tsx", ".json"]
    }
  }
}

Exported Modules

The library is exported as CommonJS format (cjs). The following modules can be imported directly:

"exports": {
  ".": "./dist/index.js",
  "./elements": "./dist/elements.js",
  "./utils": "./dist/utils.js",
  "./screen": "./dist/screens.js",
  "./section": "./dist/section.js",
  "./contexts": "./dist/contexts.js",
  "./layout": "./dist/layout.js",
  "./ui": "./dist/ui.js"
}

Import Formats

You can import components as follows:

Elements

import { Buttons } from "@antopolis/antopolis-adminapp-component-library/elements";

UI Components

import { Button, Card } from "@antopolis/antopolis-adminapp-component-library/ui";

Layouts

import { CLTable, Form } from "@antopolis/antopolis-adminapp-component-library/layout";

Screens

import { AuthScreen } from "@antopolis/antopolis-adminapp-component-library/screen";

Contexts

import { AuthContext } from "@antopolis/antopolis-adminapp-component-library/contexts";

Utilities

import { useToast } from "@antopolis/antopolis-adminapp-component-library/utils";

Project Components

This project structure contains a variety of UI components, layouts, contexts, screens, and utilities used for building the application.

📁 Components

• Elements: Contains reusable elements like buttons, search inputs, form controls, headers, and modals.
• Layouts: Includes layout components like tables, forms, cards, and pagination.
• Sections: Contains section-based components like sidebars and profile-related elements.
• UI: Contains basic UI elements like buttons, cards, checkboxes, calendars, inputs, and more.

📁 Elements

Contains individual UI components, each in its own folder with related sub-components and utilities:

• ArchiveItem:

  • ArchiveItem.jsx: Component to display an archived item.

• Buttons:

  • BackButton:
    • BackButton.jsx: A back navigation button.
  • Buttons.jsx: Parent component for all button types.
  • CrudActionButtons:
    • CrudActionButtons.jsx: Buttons for CRUD operations.
    • CrudButtons:
      • EditActionButton.jsx: Edit action button.
      • ExtraActionButton.jsx: Extra action button.
      • ToggleArchiveButton.jsx: Button to toggle archive state.
      • ViewDetailsButton.jsx: Button to view details.

• CLSearch:

  • CLSearch.jsx: Search component.
  • CLSearches.js: A file for handling search logic.
  • ResponsiveSearchInput.jsx: Search input component with responsiveness.
  • utils:
    • useDebounce.js: Hook to debounce search input.

• CLTabs:

  • CLTabs.jsx: Tabs component.
  • CLTabsExport.jsx: Component for exporting tabs.
  • ResponsiveFilterTabs.jsx: Filter tabs with responsiveness.

• Confirmation:

  • Confirmation.jsx: Confirmation modal component.

• DataTableRowActions:

  • DataTableRowActions.jsx: Actions for data table rows.

• Header:

  • Components:
    • DesktopLayout.jsx: Desktop layout component.
    • Heading.jsx: Heading component.
    • MobileActionButtons.jsx: Mobile action buttons.
  • Header.jsx: Main header component.

• IconWithToolTip:

  • IconWithTooltip.jsx: Icon component with a tooltip.

• ImageTextAvatar:

  • ImageTextAvatar.jsx: Avatar component with text.

• Inputs: Contains various input components like text, color, number, date, etc.

  • ColorInput: ColorInput.jsx: Input for color selection.
  • CurrencyInput: CurrencyInput.jsx: Input for currency amounts.
    • utils:
      • handleChange.js: Utility to handle changes in currency input.
  • DateInput: DateInput.jsx: Input for date selection.
  • DatePicker: DatePicker.jsx: Date picker component.
    • utils:
      • datePickerUtils.js: Utilities for date picker.
  • EmailInput: EmailInput.jsx: Input for email addresses.
  • ImageInput:
    • ImageCropper: ImageCropper.jsx: Image cropping component.
      • utils:
        • cropImage.js: Image crop utility.
    • ImageInput.jsx: Main image input component.
    • Utils:
      • imageUtils.js: Image-related utilities.
    • ImageUploadField: ImageUploadField.jsx: Field for image upload.
      • Utils:
        • ImageUploadUtils.js: Utilities for image upload.
  • InputBoilerPlate:
    • InputBoilerPlate.jsx: Boilerplate input component.
    • InputLabel.jsx: Label for input components.

• LazyLoad:

  • LazyLoad.jsx: Lazy loading component.

• Loading:

  • ButtonLoader.jsx: Loading indicator for buttons.
  • DataLoader.jsx: General data loader component.
  • Loading.css: CSS file for loading animations.
  • Loading.jsx: Main loading component.

• LogoTittle:

  • LogoTitle.jsx: Logo and title component.

• Modal:

  • Modal.jsx: Modal component for displaying content.

• MonthSelector:

  • MonthSelector.jsx: Component for selecting a month.

• SelectFiltering:

  • SelectFiltering.jsx: Filterable select input component.

• ViewDetailsModal:

  • Components:
    • Components:
      • FieldDisplay.jsx: Displays fields in the modal.
    • ViewDetails.jsx: Main component for view details modal.
  • ViewDetailsModal.jsx: Modal for displaying details.

• YearSelector:

  • YearSelector.jsx: Component for selecting a year.

📁 Layouts

Contains layout components used for structuring the page:

• CardLayout:

  • CardLayout.jsx: Layout for displaying content in card format.

• CLTable:

  • CLTable.jsx: Main table component.
  • CLTables.jsx: Wrapper for multiple tables.
  • Components:
    • CLTableActionButtons:
      • CLTableActionButton.jsx: Action button for the table.
      • CLTableActionButtons.jsx: Wrapper for table action buttons.
    • CLTableBody:
      • CLTableBody.jsx: Table body component.
    • CLTableCells:
      • CLTableCell.jsx: Table cell component.
      • CLTableDate.jsx: Date cell for the table.
      • CLTableDateTimeCell.jsx: Date-time cell.
      • CLTableImageCell.jsx: Image cell.
      • CLTableTime.jsx: Time cell.
    • CLTableFooter:
      • CLTableFooter.jsx: Table footer component.
    • CLTableHeader:
      • CLTableHead.jsx: Table header.
      • CLTableHeader.jsx: Main header for the table.
    • CLTableRow:
      • CLTableRow.jsx: Table row component.
    • Pagination:
      • CLPagination.jsx: Pagination component.
      • utils:
        • getPaginationItems.jsx: Utility for pagination.
        • pagination.js: JavaScript file for pagination logic.

• Form:

  • Form.jsx: Form component.
  • FormWrapper.jsx: Wrapper component for forms.

• LazyLoad:

  • LazyLoad.jsx: Component for lazy loading content.

📁 Sections

Contains sections for page layout:

• Sidebar:
  • components:
    • DesktopSideBar:
      • components:
        • SidebarCollapser.jsx: Collapsing sidebar component.
      • DesktopSideBar.jsx: Sidebar for desktop view.
    • MobileNavbar: MobileNavbar.jsx: Navbar for mobile view.
    • Shared:
      • ProfileSidebar.jsx: Profile sidebar component.
      • SidebarItem.jsx: Sidebar item.
      • SidebarLogo.jsx: Sidebar logo.
  • Sidebar.jsx: Main sidebar component.
  • utils:
    • useSidebar.jsx: Sidebar hook.
    • useSidebarLocalStorage.js: Local storage utilities for sidebar.
    • useSidebarResize.js: Hook for sidebar resize logic.

📁 Contexts

Contains the context providers for global state management:

• AuthContext:

  • AuthContext.jsx: Auth context provider.
  • hooks:
    • useAuth.jsx: Hook for auth-related operations.
  • utils:
    • getStoredMember.js: Utility for fetching stored user data.
    • handleAuthError.js: Error handling for auth.
    • handleRegister.js: Registration handler.
    • login.js: Login logic.
    • logout.js: Logout logic.

• ThemeContext:

  • ThemeContext.jsx: Theme context provider.

📁 Screens

Contains screen components used for different views and authentication screens:

• AuthScreen:
  • AuthScreen.jsx: Auth screen component.
  • AuthScreens.jsx: Wrapper for all auth screens.
  • ForgotPassword:
    • ForgotPassForm.jsx: Form for forgot password.
    • ForgotPassword.jsx: Forgot password page component.
    • utils:
      • handleForgotPassword.js: Forgot password logic.
  • Login:
    • Login.jsx: Login page component.
    • LoginForm.jsx: Login form.
    • utils:
      • handleLogin.js: Login logic.
  • RecoverPassword:
    • RecoverPassForm.jsx: Recovery password form.
    • RecoverPassword.jsx: Recover password page component.
    • utils:
      • handleRecoveryPassword.js: Password recovery logic.
  • Register:
    • SignUpHeader.jsx: Header for signup.
    • SignUpForm.jsx: Sign-up form.
    • utils:
      • handleRegister.js: Registration logic.

Utility Files

• capitalize.js: A utility function to capitalize the first letter of a string.
• createFormData.js: A utility function to create FormData objects, usually for file uploads or form submissions.
• getPermissionBasedLinks.js: A function to generate permission-based links based on user roles and permissions.
• handleFormDataSubmission.js: A function to handle form data submission, including validation and sending data to the server.
• permissionMap.js: A mapping of user permissions to corresponding actions or access.
• utils.js: A general utilities file that contains various helper functions used across the project.