@crystaltech/hsms-shared-ui 0.0.1-ssmch

package/README.md

@@ -0,0 +1,946 @@
+# hsms-shared-ui
+
+## HSMS-UI Documentation
+
+### Overview
+
+`@crystaltech/hsms-shared-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
+pnpm install @crystaltech/hsms-shared-ui@latest
+```
+
+or using Yarn:
+
+```sh
+yarn add @crystaltech/hsms-shared-ui@latest
+```
+
+---
+
+## Usage
+
+### Must Follow
+
+Create a `types` folder inside the `src` directory and add the following file:
+
+```
+/src/types/hsms-shared-ui.d.ts
+```
+
+**Note:** Make sure to add the following content to the `hsms-shared-ui.d.ts` file:
+
+```ts
+declare module "@crystaltech/hsms-shared-ui";
+```
+
+### Theme Component Setup
+
+Wrap your root component with the Theme Customization component and pass theme object as a prop to the component. The prop name is defaultTheme, like this,
+
+```ts
+import { ThemeCustomization } from "@anwarhossain1/hsms-ui";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import "./index.css";
+import reportWebVitals from "./reportWebVitals";
+const defaultTheme = {
+  palette: {
+    mode: "light",
+    navbar: {
+      background: "#000000",
+      foreground: "#000000",
+    },
+    sidebar: {
+      background: "#000000",
+      foreground: "#000000",
+    },
+    primary: {
+      main: "#ef5350", // You can change this color
+    },
+    secondary: {
+      main: "#f8fafc",
+    },
+    background: {
+      default: "#f8fafc",
+      paper: "#ffffff",
+    },
+    text: {
+      primary: "#1e293b",
+      secondary: "#64748b",
+    },
+    neutral: {
+      100: "#f6f9fc",
+      200: "#e9ecef",
+      300: "#dee2e6",
+      400: "#ced4da",
+      500: "#adb5bd",
+      600: "#868e96",
+      700: "#495057",
+      800: "#343a40",
+      900: "#212529",
+    },
+  },
+  typography: {
+    fontFamily: "Roboto",
+    h1: {
+      fontSize: "2.5rem",
+      fontWeight: 700,
+      lineHeight: "3rem",
+    },
+    h2: {
+      fontSize: "2rem",
+      fontWeight: 700,
+      lineHeight: "2.5rem",
+    },
+    h3: {
+      fontSize: "1.75rem",
+      fontWeight: 600,
+      lineHeight: "2.25rem",
+    },
+    h4: {
+      fontSize: "1.5rem",
+      fontWeight: 600,
+      lineHeight: "2rem",
+    },
+    h5: {
+      fontSize: "1.25rem",
+      fontWeight: 500,
+      lineHeight: "1.75rem",
+    },
+    h6: {
+      fontSize: "1rem",
+      fontWeight: 500,
+      lineHeight: "1.5rem",
+    },
+    subtitle1: {
+      fontSize: "1.125rem",
+      fontWeight: 400,
+      lineHeight: "1.5rem",
+    },
+    subtitle2: {
+      fontSize: "1rem",
+      fontWeight: 400,
+      lineHeight: "1.25rem",
+    },
+    body1: {
+      fontSize: "1rem",
+      fontWeight: 400,
+      lineHeight: "1.5rem",
+    },
+    body2: {
+      fontSize: "0.875rem",
+      fontWeight: 400,
+      lineHeight: "1.25rem",
+    },
+    button: {
+      fontSize: "0.875rem",
+      fontWeight: 500,
+      lineHeight: "1.25rem",
+      textTransform: "uppercase",
+    },
+    caption: {
+      fontSize: "0.75rem",
+      fontWeight: 400,
+      lineHeight: "1rem",
+    },
+    overline: {
+      fontSize: "0.75rem",
+      fontWeight: 400,
+      lineHeight: "1rem",
+      textTransform: "uppercase",
+    },
+  },
+};
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <ThemeCustomization defaultTheme={defaultTheme}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </ThemeCustomization>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
+```
+
+The whole project will contain properties of the theme object. This object will laterly come from API.
+
+### Importing Components
+
+```tsx
+import { MainLayout } from "@crystaltech/hsms-shared-ui";
+import { 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 (
+    <MainLayout layoutConfig={layoutConfig}>
+      <Routes>{/* Your routes with components */}</Routes>
+    </MainLayout>
+  );
+}
+
+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 defaultTheme={}>
+  {" "}
+  // pass the DefaultTheme object either manually or from api
+  <MainLayout layoutConfig={layoutConfig}>{/* Your content here */}</MainLayout>
+</ThemeCustomization>
+```
+
+as we don't have api right now for ThemeCustomization component, we can use the given variable and pass it as a props
+
+```ts
+const defaultTheme = {
+  palette: {
+    mode: "light",
+    navbar: {
+      background: "#000000",
+      foreground: "#000000",
+    },
+    sidebar: {
+      background: "#000000",
+      foreground: "#000000",
+    },
+    primary: {
+      main: "#ef5350", // You can change this color
+    },
+    secondary: {
+      main: "#f8fafc",
+    },
+    background: {
+      default: "#f8fafc",
+      paper: "#ffffff",
+    },
+    text: {
+      primary: "#1e293b",
+      secondary: "#64748b",
+    },
+    neutral: {
+      100: "#f6f9fc",
+      200: "#e9ecef",
+      300: "#dee2e6",
+      400: "#ced4da",
+      500: "#adb5bd",
+      600: "#868e96",
+      700: "#495057",
+      800: "#343a40",
+      900: "#212529",
+    },
+  },
+  typography: {
+    fontFamily: "Roboto",
+    h1: {
+      fontSize: "2.5rem",
+      fontWeight: 700,
+      lineHeight: "3rem",
+    },
+    h2: {
+      fontSize: "2rem",
+      fontWeight: 700,
+      lineHeight: "2.5rem",
+    },
+    h3: {
+      fontSize: "1.75rem",
+      fontWeight: 600,
+      lineHeight: "2.25rem",
+    },
+    h4: {
+      fontSize: "1.5rem",
+      fontWeight: 600,
+      lineHeight: "2rem",
+    },
+    h5: {
+      fontSize: "1.25rem",
+      fontWeight: 500,
+      lineHeight: "1.75rem",
+    },
+    h6: {
+      fontSize: "1rem",
+      fontWeight: 500,
+      lineHeight: "1.5rem",
+    },
+    subtitle1: {
+      fontSize: "1.125rem",
+      fontWeight: 400,
+      lineHeight: "1.5rem",
+    },
+    subtitle2: {
+      fontSize: "1rem",
+      fontWeight: 400,
+      lineHeight: "1.25rem",
+    },
+    body1: {
+      fontSize: "1rem",
+      fontWeight: 400,
+      lineHeight: "1.5rem",
+    },
+    body2: {
+      fontSize: "0.875rem",
+      fontWeight: 400,
+      lineHeight: "1.25rem",
+    },
+    button: {
+      fontSize: "0.875rem",
+      fontWeight: 500,
+      lineHeight: "1.25rem",
+      textTransform: "uppercase",
+    },
+    caption: {
+      fontSize: "0.75rem",
+      fontWeight: 400,
+      lineHeight: "1rem",
+    },
+    overline: {
+      fontSize: "0.75rem",
+      fontWeight: 400,
+      lineHeight: "1rem",
+      textTransform: "uppercase",
+    },
+  },
+};
+```
+
+---
+
+## 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",
+};
+```
+
+---
+
+### 3. `CustomButton`
+
+CustomButton import examples
+
+```ts
+<CustomButton variant="outlined">Hello</CustomButton>
+<CustomButton variant="text">Hello</CustomButton>
+<CustomButton variant="outlined" startIcon={<DeleteIcon />}>
+  Hello
+</CustomButton>
+<CustomButton endIcon={<SendIcon />}>Hello</CustomButton>
+<CustomButton endIcon={<SendIcon />} loading>
+  Hello
+</CustomButton>
+
+```
+
+Button Props Inside CustomButton
+
+```ts
+interface CustomButtonProps extends ButtonProps {
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  loading?: boolean;
+}
+
+const CustomButton: React.FC<CustomButtonProps> = ({
+  variant = "contained",
+  startIcon,
+  endIcon,
+  loading = false,
+  disabled = false,
+  children,
+  onClick,
+  ...props
+}) => {
+  return (
+    <Button
+      variant={variant}
+      startIcon={!loading ? startIcon : null}
+      endIcon={!loading ? endIcon : null}
+      disabled={disabled || loading}
+      onClick={onClick}
+      {...props}
+    >
+      {loading ? <CircularProgress size={24} color="inherit" /> : children}
+    </Button>
+  );
+};
+```
+
+### 4. `CustomIconButton`
+
+`Example`
+
+```ts
+<CustomIconButton aria-label="delete">
+  <DeleteIcon />
+</CustomIconButton>
+<CustomIconButton aria-label="delete" color="primary">
+  <AlarmIcon />
+</CustomIconButton>
+<CustomIconButton aria-label="delete" color="secondary">
+  <AlarmIcon />
+</CustomIconButton>
+```
+
+`Props`
+
+```ts
+import { IconButton, IconButtonProps } from "@mui/material";
+
+interface CustomIconButtonProps extends IconButtonProps {
+  children: React.ReactNode;
+}
+
+const CustomIconButton: React.FC<CustomIconButtonProps> = ({
+  children,
+  ...props
+}) => {
+  return <IconButton {...props}>{children}</IconButton>;
+};
+
+export default CustomIconButton;
+```
+
+### 5. `CustomTabs`
+
+`USAGE`
+
+```ts
+const tabsData = [
+  { label: "Tab One", value: "one" },
+  { label: "Tab Two", value: "two" },
+  { label: "Tab Three", value: "three" },
+];
+
+const [selectedTab, setSelectedTab] = useState(tabsData[0].value);
+
+const handleTabsChange = (event: React.SyntheticEvent, value: string) => {
+  setSelectedTab(value);
+};
+
+<CustomTabs
+  tabs={tabsData}
+  value={selectedTab}
+  onChange={handleTabsChange}
+  variant="scrollable" //tabs others props can be passed
+/>;
+```
+
+### 6. `CustomTextField`
+
+you can pass existing Mui Textfield's pass into it too
+
+```ts
+<CustomTextField
+  value={name}
+  onChange={(value) => setName(value)}
+  label="Name"
+/>
+```
+
+### 7. `CustomAutoComplete`
+
+```ts
+const moviesData = [
+  { title: "The Shawshank Redemption", year: 1994 },
+  { title: "The Godfather", year: 1972 },
+];
+
+<CustomAutoComplete
+  label="Select multiple movies"
+  options={moviesData}
+  getOptionLabel={(option) => option.title}
+  onChange={(value) => console.log(value)}
+  multiple
+/>;
+
+if you want to see multiple section pass multiple as a prop otherwise no need to pass multiple
+```
+
+### 8. `AsyncAutoComplete`
+
+for passing data at the time of user interaction (api fetch) use this component
+
+```ts
+<AsyncAutocomplete
+  label="Select a Movie"
+  fetchOptions={fetchMovies}
+  getOptionLabel={(option) => option.title}
+  isOptionEqualToValue={(option, value) => option.title === value.title}
+  onChange={(selectedMovie) => console.log("Selected movie:", selectedMovie)}
+  multiple
+/>
+```
+
+### 9. `CustomSelect (DropDown)`
+
+```ts
+const ageOptions = [
+  { value: 10, label: "Ten" },
+  { value: 20, label: "Twenty" },
+  { value: 30, label: "Thirty" },
+];
+
+const [age, setAge] = useState("");
+
+const handleAgeChange = (event: SelectChangeEvent) => {
+  setAge(event.target.value as string);
+};
+
+<CustomSelect
+  label="Age"
+  value={age}
+  options={ageOptions}
+  onChange={handleAgeChange}
+/>;
+```
+
+### 10. `CustomCheckbox & CustomRadioGroup`
+
+```ts
+const radioOptions = [
+  { label: "Female", value: "female" },
+  { label: "Male", value: "male" },
+  { label: "Other", value: "other" },
+];
+
+const [checked, setChecked] = useState<boolean>(false);
+const [selectedValue, setSelectedValue] = useState(radioOptions[0].value);
+
+<CustomCheckbox checked={checked} label="CheckBox" onChange={setChecked} />
+
+<CustomRadioGroup
+  label="Gender"
+  options={radioOptions}
+  value={selectedValue}
+  onChange={(value) => setSelectedValue(value)}
+/>
+
+```
+
+### 11. `Selectable List`
+
+```ts
+const items = [
+  { label: "Inbox", icon: <InboxIcon /> },
+  { label: "Drafts", icon: <DraftsIcon /> },
+  { label: "Trash" }, // No icon
+  { label: "Spam" }, // No icon
+];
+
+<CustomSelectableList items={items} onSelect={(index) => console.log(index)} />;
+```
+
+### 12. `MultiDynamicTable`
+
+#### Data props data structure
+
+```ts
+const data: DataStructure = [
+  //Each Array represents as a row
+  [
+    //each object represents a coumn data
+    {
+      id: 0,
+      fieldName: "Title",
+      fieldType: "text",
+      fieldContent: "ajgobi",
+      isDefault: true,
+      isVisible: true,
+    },
+    {
+      id: 1,
+      fieldName: "B",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: true,
+      isVisible: true,
+    },
+    {
+      id: 2,
+      fieldName: "Date",
+      fieldType: "date",
+      fieldContent: "Feb 20, 2025",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 3,
+      fieldName: "D",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 4,
+      fieldName: "Actions",
+      fieldType: "actions",
+      fieldContent: [
+        {
+          label: "Edit",
+          onClick: (data) => {
+            console.log(data);
+          },
+          icon: <EditLocationAlt />,
+          variant: "contained",
+        },
+        {
+          label: "Delete",
+          onClick: (data) => {
+            console.log(data);
+          },
+          icon: <DeleteOutlineSharp />,
+          variant: "outlined",
+        },
+      ],
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 5,
+      fieldName: "Actions",
+      fieldType: "actions",
+      fieldContent: [
+        {
+          label: "Update",
+          onClick: (data) => {
+            console.log(data);
+          },
+          icon: <EditLocationAlt />,
+          variant: "contained",
+        },
+      ],
+
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 6,
+      fieldName: "G",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 7,
+      fieldName: "H",
+      fieldType: "link",
+      fieldContent:
+        "Click me fjaf afjasfjasfj aksfjdajfajsfkjakfjaksfjaksfjkasfjaskfjk sdgs sgfsdg asfjaskfjaskjfaksjfaksfjaskfjaksjfkasfjaskfjaksdfjaskfjaskfjaskfjasfjaskfjaskfjaksjfaskjfkasfjj",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 8,
+      fieldName: "Date Picker",
+      fieldType: "date-picker",
+      fieldContent: {
+        date: "12-12-2022",
+        onChange: (parentItem: FieldItem, timeValue: Date) => {
+          console.log(parentItem, timeValue);
+        },
+      },
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 9,
+      fieldName: "J",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+  ],
+  [
+    {
+      id: 0,
+      fieldName: "A",
+      fieldType: "link",
+      fieldContent: "hello",
+      isDefault: true,
+      isVisible: true,
+    },
+    {
+      id: 1,
+      fieldName: "B",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: true,
+      isVisible: true,
+    },
+    {
+      id: 2,
+      fieldName: "C",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 3,
+      fieldName: "D",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 4,
+      fieldName: "E",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 5,
+      fieldName: "F",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 6,
+      fieldName: "G",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 7,
+      fieldName: "H",
+      fieldType: "link",
+      fieldContent:
+        "Click me fjaf afjasfjasfj aksfjdajfajsfkjakfjaksfjaksfjkasfjaskfjk sdgs sgfsdg asfjaskfjaskjfaksjfaksfjaskfjaksjfkasfjaskfjaksdfjaskfjaskfjaskfjasfjaskfjaskfjaksjfaskjfkasfjj",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 8,
+      fieldName: "I",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 9,
+      fieldName: "J",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+  ],
+  [
+    {
+      id: 0,
+      fieldName: "A",
+      fieldType: "link",
+      fieldContent: "gkkk",
+      isDefault: true,
+      isVisible: true,
+      to: "/habi-jabi",
+    },
+    {
+      id: 1,
+      fieldName: "B",
+      fieldType: "label",
+      fieldContent: "jam me",
+      isDefault: true,
+      isVisible: true,
+    },
+    {
+      id: 2,
+      fieldName: "C",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 3,
+      fieldName: "D",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 4,
+      fieldName: "E",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 5,
+      fieldName: "F",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 6,
+      fieldName: "G",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 7,
+      fieldName: "H",
+      fieldType: "link",
+      fieldContent:
+        "Click me fjaf afjasfjasfj aksfjdajfajsfkjakfjaksfjaksfjkasfjaskfjk sdgs sgfsdg asfjaskfjaskjfaksjfaksfjaskfjaksjfkasfjaskfjaksdfjaskfjaskfjaskfjasfjaskfjaskfjaksjfaskjfkasfjj",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 8,
+      fieldName: "I",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+    {
+      id: 9,
+      fieldName: "J",
+      fieldType: "link",
+      fieldContent: "Click me",
+      isDefault: false,
+      isVisible: false,
+    },
+  ],
+];
+```
+usage of the MultiDynamicTable
+
+```ts
+import { useState } from "react";
+import MultiDynamicTable from "./MultiDynamicTable/MultiDynamicTable";
+import { dynamicTableData } from "./MultiDynamicTable/dynamicTableData";
+
+const Tables = () => {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const handleChangePage = (_event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  return (
+    <>
+      <MultiDynamicTable
+        tableData={dynamicTableData}
+        page={page}
+        rowsPerPage={rowsPerPage}
+        handleChangePage={handleChangePage}
+        handleChangeRowsPerPage={handleChangeRowsPerPage}
+      />
+    </>
+  );
+};
+
+export default Tables;
+```
+### 13. `CustomTabs`
+
+### 14. `CustomTabs`
+
+### 15. `CustomTabs`
+
+### 16. `CustomTabs`
+
+### 17. `CustomTabs`
+
+### 18. `CustomTabs`
+
+## License
+
+This package is licensed under the **MIT License**.
+
+---
+
+## Author
+
+Developed by **Anwar Hossain**.  
+For questions or contributions, reach out via **GitHub**.