@crystaltech/hsms-shared-ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Crystal Tech Developers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,133 @@
+# hsms-shared-ui
+
+## HSMS-UI Documentation
+
+### Overview
+
+`@anwarhossain1/hsms-ui` is a customizable UI component library built with React and Material-UI. It provides a structured layout system with a `MainLayout` component, theme customization, and configurable navigation options for web applications.
+
+---
+
+## Installation
+
+To install the package, run:
+
+```sh
+npm install @anwarhossain1/hsms-ui@latest
+```
+
+or using Yarn:
+
+```sh
+yarn add @anwarhossain1/hsms-ui@latest
+```
+
+---
+
+## Usage
+
+### Importing Components
+
+```tsx
+import { MainLayout, ThemeCustomization } from "@anwarhossain1/hsms-ui";
+import { Box } from "@mui/material";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import { menuConfig, settingsConfig } from "./dummyData";
+
+const layoutConfig = {
+  navbar: {
+    showHamburgerInMobile: true,
+    themeToggler: false,
+  },
+  sideDrawer: {
+    menuConfig,
+    settingsConfig: settingsConfig,
+    isMinimized: false,
+    drawerWidth: 240,
+  },
+  footerText: settingsConfig.footerText,
+};
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Box
+        sx={{ minHeight: "100vh", transition: "background-color 0.3s ease" }}
+      >
+        <ThemeCustomization>
+          <MainLayout layoutConfig={layoutConfig}>
+            <Routes>{/* Your routes with components */}</Routes>
+          </MainLayout>
+        </ThemeCustomization>
+      </Box>
+    </BrowserRouter>
+  );
+}
+
+export default App;
+```
+
+---
+
+## Components
+
+### 1. `MainLayout`
+
+A flexible layout component that includes a Navbar, Sidebar, and Footer.
+
+**Props:**
+
+| Prop           | Type   | Description                             |
+| -------------- | ------ | --------------------------------------- |
+| `layoutConfig` | Object | Configures navbar, sidebar, and footer. |
+
+---
+
+### 2. `ThemeCustomization`
+
+A wrapper component that provides theme customization for Material-UI.
+
+**Usage:**
+Wrap your application inside `<ThemeCustomization>` to apply global styles.
+
+```tsx
+<ThemeCustomization>
+  <MainLayout layoutConfig={layoutConfig}>{/* Your content here */}</MainLayout>
+</ThemeCustomization>
+```
+
+---
+
+## Configuration Options
+
+The `layoutConfig` object provides the following options:
+
+```js
+const layoutConfig = {
+  navbar: {
+    showHamburgerInMobile: true,
+    themeToggler: false,
+  },
+  sideDrawer: {
+    menuConfig,
+    settingsConfig,
+    isMinimized: false,
+    drawerWidth: 240,
+  },
+  footerText: "Your Footer Text Here",
+};
+```
+
+---
+
+## License
+
+This package is licensed under the **MIT License**.
+
+---
+
+## Author
+
+Developed by **Anwar Hossain**.  
+For questions or contributions, reach out via **GitHub**.

package/dist/App.d.ts

@@ -0,0 +1,65 @@
+export interface ITheme {
+    palette: {
+        mode: string;
+        navbar: {
+            background: string;
+            foreground: string;
+        };
+        sidebar: {
+            background: string;
+            foreground: string;
+        };
+        primary: {
+            main: string;
+        };
+        secondary: {
+            main: string;
+        };
+        background: {
+            default: string;
+            paper: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+        };
+        neutral: {
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    typography: {
+        fontFamily: string;
+        h1: TypographyStyle;
+        h2: TypographyStyle;
+        h3: TypographyStyle;
+        h4: TypographyStyle;
+        h5: TypographyStyle;
+        h6: TypographyStyle;
+        subtitle1: TypographyStyle;
+        subtitle2: TypographyStyle;
+        body1: TypographyStyle;
+        body2: TypographyStyle;
+        button: TypographyStyle & {
+            textTransform: "uppercase" | "none";
+        };
+        caption: TypographyStyle;
+        overline: TypographyStyle & {
+            textTransform: "uppercase" | "none";
+        };
+    };
+}
+interface TypographyStyle {
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: string;
+}
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/components/Cards.d.ts

@@ -0,0 +1,2 @@
+declare const Cards: () => import("react/jsx-runtime").JSX.Element;
+export default Cards;

package/dist/components/ColorPickerManageWithLabel.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { CustomColorPickerProps } from './ui/CustomColorPicker';
+interface ColorPickerManageWithLabelProps extends CustomColorPickerProps {
+    label: string;
+}
+declare const ColorPickerManageWithLabel: React.FC<ColorPickerManageWithLabelProps>;
+export default ColorPickerManageWithLabel;

package/dist/components/ColorSettings.d.ts

@@ -0,0 +1,2 @@
+declare const ColorSettings: () => import("react/jsx-runtime").JSX.Element;
+export default ColorSettings;

package/dist/components/CustomAutoComplete.d.ts

@@ -0,0 +1,11 @@
+interface CustomAutoCompleteProps<T> {
+    options: T[];
+    defaultValue?: T[];
+    label: string;
+    placeholder?: string;
+    multiple?: boolean;
+    getOptionLabel: (option: T) => string;
+    onChange: (value: T[] | T | null) => void;
+}
+declare const CustomAutoComplete: <T>({ options, defaultValue, label, placeholder, multiple, getOptionLabel, onChange, }: CustomAutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default CustomAutoComplete;

package/dist/components/CustomFilter.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface CustomFilterProps {
+    menuItems: {
+        label: string;
+        value: string;
+    }[];
+}
+declare const CustomFilter: React.FC<CustomFilterProps>;
+export default CustomFilter;

package/dist/components/DataTable.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'react';
+interface FilterOptionsProps {
+    label: string;
+    value: string;
+}
+export interface TableConfig<T = Record<string, string | number | boolean>> {
+    tableName: string;
+    headers: string[];
+    isSearchable: boolean;
+    showFilter: boolean;
+    filterOptions: FilterOptionsProps[];
+    searchBy?: string;
+    actions?: {
+        label: string;
+        onClick: (row: T) => void;
+        icon: JSX.Element;
+    }[];
+}
+export default function DynamicTable({ config, data, }: {
+    config: TableConfig;
+    data: Array<Record<string, string | number | boolean>>;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DynamicTable.d.ts

@@ -0,0 +1,10 @@
+export default function DynamicTable({ onSave, }: {
+    onSave: (config: {
+        tableName: string;
+        headers: string[];
+        isSearchable: boolean;
+        showFilter: boolean;
+        searchBy: string;
+        filterOptions: string[];
+    }) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Lists.d.ts

@@ -0,0 +1,2 @@
+declare const Lists: () => import("react/jsx-runtime").JSX.Element;
+export default Lists;

package/dist/components/Logo.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface LogoProps {
+    logoSrc: string;
+    altText?: string;
+    redirectUrl?: string;
+}
+declare const Logo: React.FC<LogoProps>;
+export default Logo;

package/dist/components/ManageCheckbox.d.ts

@@ -0,0 +1,2 @@
+declare const ManageCheckbox: () => import("react/jsx-runtime").JSX.Element;
+export default ManageCheckbox;

package/dist/components/MultiDynamicTable/AddNewField.d.ts

@@ -0,0 +1,10 @@
+interface FieldData {
+    fieldName: string;
+    fieldContent: string;
+}
+interface AddNewFieldProps {
+    onCancel: () => void;
+    onSubmit: (addNewContentObj: FieldData) => void;
+}
+declare const AddNewField: React.FC<AddNewFieldProps>;
+export default AddNewField;

package/dist/components/MultiDynamicTable/ColumnVisibilityManage.d.ts

@@ -0,0 +1,7 @@
+import { DataStructure } from '../Tables';
+interface ColumnVisibilityManageProps {
+    data: DataStructure;
+    handleColumnVisibility: (columnVisibilityData: DataStructure) => void;
+}
+declare const ColumnVisibilityManage: React.FC<ColumnVisibilityManageProps>;
+export default ColumnVisibilityManage;

package/dist/components/MultiDynamicTable/FieldContent.d.ts

@@ -0,0 +1,7 @@
+import { FieldItem } from '../Tables';
+declare const FieldContent: ({ item, itemIndex, rowIndex, }: {
+    item: FieldItem;
+    itemIndex: number;
+    rowIndex: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FieldContent;

package/dist/components/MultiDynamicTable/MultiDynamicTable.d.ts

@@ -0,0 +1,5 @@
+import { DataStructure } from '../Tables';
+declare const MultiDynamicTable: ({ tableData }: {
+    tableData: DataStructure;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiDynamicTable;

package/dist/components/ProfilePage.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+interface ProfileData {
+    imageUrl: string;
+    name: string;
+    bio: string;
+    email: string;
+    location: string;
+    phoneNumber: string;
+}
+interface ProfileProps {
+    profileData: ProfileData;
+    onEditClick?: () => void;
+}
+declare const ProfilePage: React.FC<ProfileProps>;
+export default ProfilePage;

package/dist/components/ProfilePages.d.ts

@@ -0,0 +1,2 @@
+declare const ProfilePages: () => import("react/jsx-runtime").JSX.Element;
+export default ProfilePages;

package/dist/components/TableSetting.d.ts

@@ -0,0 +1,2 @@
+declare const TableSetting: () => import("react/jsx-runtime").JSX.Element;
+export default TableSetting;

package/dist/components/Tables.d.ts

@@ -0,0 +1,23 @@
+export interface DatePickerProps {
+    date: string;
+    onChange: (parentItem: FieldItem, timeValue: Date) => void;
+}
+export interface FieldContentActionsProps {
+    label: string;
+    onClick: (data: FieldItem) => void;
+    icon: React.ReactNode;
+    variant: "contained" | "outlined";
+}
+export interface FieldItem {
+    id: number;
+    fieldName: string;
+    fieldType: string;
+    fieldContent: string | FieldContentActionsProps[] | DatePickerProps;
+    isDefault: boolean;
+    isVisible: boolean;
+    to?: string;
+}
+export type FieldItemArray = FieldItem[];
+export type DataStructure = FieldItemArray[];
+declare const Tables: () => import("react/jsx-runtime").JSX.Element;
+export default Tables;

package/dist/components/ThemeSetting.d.ts

@@ -0,0 +1,2 @@
+declare const ThemeSetting: () => import("react/jsx-runtime").JSX.Element;
+export default ThemeSetting;

package/dist/components/ThemeToggler.d.ts

@@ -0,0 +1,2 @@
+declare const ThemeToogler: () => import("react/jsx-runtime").JSX.Element | null;
+export default ThemeToogler;

package/dist/components/TypographySettings.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const TypographySettings: React.FC;
+export default TypographySettings;

package/dist/components/UiFiles.d.ts

@@ -0,0 +1,2 @@
+declare const UiFiles: () => import("react/jsx-runtime").JSX.Element;
+export default UiFiles;

package/dist/components/layout/Customization/ThemeColorSet.d.ts

@@ -0,0 +1,2 @@
+declare const ThemeColorSet: () => import("react/jsx-runtime").JSX.Element | null;
+export default ThemeColorSet;

package/dist/components/layout/Customization/index.d.ts

@@ -0,0 +1,2 @@
+declare const Customization: () => import("react/jsx-runtime").JSX.Element;
+export default Customization;

package/dist/components/layout/MainLayout/index.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { IMenuConfig, ISettingsConfig } from '../dummyData';
+interface LayoutConfig {
+    navbar: {
+        showHamburgerInMobile: boolean;
+        themeToggler: boolean;
+    };
+    sideDrawer: {
+        menuConfig: IMenuConfig[];
+        settingsConfig: ISettingsConfig;
+        isMinimized: boolean;
+        drawerWidth: number;
+    };
+    footerText: string;
+}
+export interface IMainLayout {
+    children: React.ReactNode;
+    layoutConfig: LayoutConfig;
+}
+declare const MainLayout: React.FC<IMainLayout>;
+export default MainLayout;

package/dist/components/layout/MainlayoutWithWrapper.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IMainLayout } from './MainLayout';
+declare const MainlayoutWithWrapper: React.FC<IMainLayout>;
+export default MainlayoutWithWrapper;

package/dist/components/layout/dummyData.d.ts

@@ -0,0 +1,15 @@
+import { SvgIconProps } from '@mui/material';
+export interface MenuItem {
+    label: string;
+    icon: React.ReactElement<SvgIconProps>;
+    link: string;
+}
+export interface IMenuConfig {
+    items: MenuItem[];
+}
+export interface ISettingsConfig {
+    logo: string;
+    footerText: string;
+}
+export declare const menuConfig: IMenuConfig[];
+export declare const settingsConfig: ISettingsConfig;

package/dist/components/styled-components/index.d.ts

@@ -0,0 +1,3 @@
+import { ContainerProps } from '@mui/material/Container';
+declare const StyledComponent: React.ComponentType<ContainerProps>;
+export default StyledComponent;

package/dist/components/ui/AsyncAutocomplete.d.ts

@@ -0,0 +1,10 @@
+interface AutocompleteProps<T> {
+    label: string;
+    multiple?: boolean;
+    fetchOptions: () => Promise<T[]>;
+    getOptionLabel: (option: T) => string;
+    isOptionEqualToValue: (option: T, value: T) => boolean;
+    onChange?: (selectedOption: T | T[] | null) => void;
+}
+declare function AsyncAutocomplete<T>({ label, multiple, fetchOptions, getOptionLabel, isOptionEqualToValue, onChange, }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+export default AsyncAutocomplete;

package/dist/components/ui/CheckboxListWithAvatar.d.ts

@@ -0,0 +1,11 @@
+interface CheckboxListWithAvatarProps {
+    items: {
+        id: number;
+        label: string;
+        avatarSrc?: string;
+    }[];
+    checkedItems?: number[];
+    onChange: (checked: number[]) => void;
+}
+declare const CheckboxListWithAvatar: ({ items, checkedItems, onChange, }: CheckboxListWithAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default CheckboxListWithAvatar;

package/dist/components/ui/ControlledDatePicker.d.ts

@@ -0,0 +1,9 @@
+import { Dayjs } from 'dayjs';
+import * as React from "react";
+type ControlledDatePickerProps = {
+    label?: string;
+    initialValue?: string;
+    onChange?: (date: Dayjs | null) => void;
+};
+declare const ControlledDatePicker: React.FC<ControlledDatePickerProps>;
+export default ControlledDatePicker;

package/dist/components/ui/CustomButton.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from '@mui/material/Button';
+import * as React from "react";
+interface CustomButtonProps extends ButtonProps {
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    loading?: boolean;
+}
+declare const CustomButton: React.FC<CustomButtonProps>;
+export default CustomButton;

package/dist/components/ui/CustomCheckbox.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface CustomCheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+}
+declare const CustomCheckbox: React.FC<CustomCheckboxProps>;
+export default CustomCheckbox;

package/dist/components/ui/CustomColorPicker.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface CustomColorPickerProps {
+    initialColor?: string;
+    onChange: (color: string) => void;
+}
+declare const CustomColorPicker: React.FC<CustomColorPickerProps>;
+export default CustomColorPicker;

package/dist/components/ui/CustomDatePicker.d.ts

@@ -0,0 +1,9 @@
+import { Dayjs } from 'dayjs';
+import * as React from "react";
+interface CustomDatePickerProps {
+    label: string;
+    value: Dayjs | null;
+    onChange: (date: Dayjs | null | undefined) => void;
+}
+declare const CustomDatePicker: React.FC<CustomDatePickerProps>;
+export default CustomDatePicker;

package/dist/components/ui/CustomIconButton.d.ts

@@ -0,0 +1,6 @@
+import { IconButtonProps } from '@mui/material';
+interface CustomIconButtonProps extends IconButtonProps {
+    children: React.ReactNode;
+}
+declare const CustomIconButton: React.FC<CustomIconButtonProps>;
+export default CustomIconButton;

package/dist/components/ui/CustomInput.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface CustomInputProps {
+    startIcon?: React.ReactNode;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    count?: number;
+    onClear?: () => void;
+}
+declare const CustomInput: React.FC<CustomInputProps>;
+export default CustomInput;

package/dist/components/ui/CustomRadioGroup.d.ts

@@ -0,0 +1,12 @@
+interface RadioOption {
+    label: string;
+    value: string;
+}
+interface CustomRadioGroupProps {
+    label: string;
+    options: RadioOption[];
+    value: string;
+    onChange: (value: string) => void;
+}
+declare function CustomRadioGroup({ label, options, value, onChange, }: CustomRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export default CustomRadioGroup;

package/dist/components/ui/CustomScrollbar.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface CustomScrollbarProps {
+    children: React.ReactNode;
+    maxWidth?: string;
+    maxHeight?: string;
+}
+declare const CustomScrollbar: React.FC<CustomScrollbarProps>;
+export default CustomScrollbar;

package/dist/components/ui/CustomSelect.d.ts

@@ -0,0 +1,13 @@
+import { SelectChangeEvent } from '@mui/material/Select';
+import * as React from "react";
+interface CustomSelectProps {
+    label: string;
+    value: string;
+    options: {
+        value: string | number;
+        label: string;
+    }[];
+    onChange: (event: SelectChangeEvent) => void;
+}
+declare const CustomSelect: React.FC<CustomSelectProps>;
+export default CustomSelect;

package/dist/components/ui/CustomSelectableList.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+interface ListItem {
+    label: string;
+    icon?: React.ReactNode;
+}
+interface CustomSelectableListProps {
+    items: ListItem[];
+    onSelect?: (index: number) => void;
+}
+declare const CustomSelectableList: React.FC<CustomSelectableListProps>;
+export default CustomSelectableList;

package/dist/components/ui/CustomSwitch.d.ts

@@ -0,0 +1,6 @@
+interface CustomSwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+declare function CustomSwitch({ checked, onChange }: CustomSwitchProps): import("react/jsx-runtime").JSX.Element;
+export default CustomSwitch;

package/dist/components/ui/CustomTabs.d.ts

@@ -0,0 +1,12 @@
+import { TabsProps } from '@mui/material/Tabs';
+import * as React from "react";
+interface CustomTabsProps extends TabsProps {
+    tabs: {
+        label: string;
+        value: string;
+    }[];
+    value: string;
+    onChange: (event: React.SyntheticEvent, value: string) => void;
+}
+declare const CustomTabs: React.FC<CustomTabsProps>;
+export default CustomTabs;

package/dist/components/ui/CustomTextfield.d.ts

@@ -0,0 +1,8 @@
+import { TextFieldProps } from '@mui/material/TextField';
+type CustomTextFieldProps = Omit<TextFieldProps, "onChange" | "value"> & {
+    value: string;
+    onChange: (value: string) => void;
+    label?: string;
+};
+declare function CustomTextField({ value, onChange, label, ...props }: CustomTextFieldProps): import("react/jsx-runtime").JSX.Element;
+export default CustomTextField;