hanbiro-react18-sdk

A comprehensive collection of shared React components and utilities for Hanbiro applications, built with React, Material UI, and Vite.

🚀 Installation

Install the package via npm or yarn:

npm install hanbiro-react18-sdk
# or
yarn add hanbiro-react18-sdk

📦 Usage

Initialization & Setup

[!IMPORTANT] You must import the SDK's CSS file at your project's root and call initHanbiroReactSDK before rendering your application. Wrap your root component with <ThemeCustomization> for correct styling.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

// 1. Import the SDK CSS
import "hanbiro-react18-sdk/style.css";

import { ThemeCustomization } from "hanbiro-react18-sdk/components";
import { initHanbiroReactSDK } from "hanbiro-react18-sdk/utils";

// 2. Initialize the SDK with your base URL
initHanbiroReactSDK({ baseUrl: "https://your-server.com/ngw" });

// 3. Render the application
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ThemeCustomization>
      <App />
    </ThemeCustomization>
  </React.StrictMode>,
);

Importing Components

import { SplitView, NumberInput } from "hanbiro-react18-sdk/components";

Importing Utilities

import {
  getBaseUrl,
  getGroupwareUrl,
  isDevelopment,
} from "hanbiro-react18-sdk/utils";

console.log("API Base URL:", getBaseUrl());
console.log("Groupware URL:", getGroupwareUrl());

🛠 Features

Utilities (hanbiro-react18-sdk/utils)

| Export | Description | | --------------------- | -------------------------------------------------------- | | initHanbiroReactSDK | Initializes the SDK with your server's baseUrl | | isDevelopment | Function returning true if running in dev environment | | getBaseUrl | Returns the base server URL based on current environment | | getGroupwareUrl | Returns the full Groupware URL for the current host |

Components (hanbiro-react18-sdk/components)

| Component | Description | | --------------------------- | ---------------------------------------------- | | CircularProgressWithLabel | Progress indicator with percentage label | | Counter | Simple numeric counter component | | FullscreenBtn | Button component to toggle fullscreen mode | | LinearLoading | Fixed top-of-page linear progress bar | | LoadingContainer | Full-container loading state | | NumberInput | Numeric input with increment/decrement buttons | | OutlinedSelect | Select input component with an outlined style | | SelectBox | Custom dropdown selection component | | SplitView | Resizable split-pane layout | | SwiperModal | Modal component with swipe support | | ThemeCustomization | Global theme provider for Hanbiro styling | | ToolltipOverflowText | Text component with tooltip on overflow |

📋 Requirements

• React: >=18.0.0
• React DOM: >=18.0.0
• Material UI: ^5.0.0
• Emotion: ^11.0.0

🛠 Development Workflow

Follow these steps when updating the library:

1. Finish coding: Make your changes in the src directory.
2. Publish: Run the publish script which will automatically run typecheck, build, commit, bump version, and publish to npm.

   python3 publish.py

📄 License

MIT © Hanbiro Inc.