esewa-ui-library 1.0.3 → 1.0.4

package/README.md

@@ -108,15 +108,25 @@ export default App;
 
 The `ESewaAlertCard` component is customizable app bar for your eSewa Mini App with support for back, title, and action icons, making navigation and interactions seamless.
 
+Use useESewaDataProvider to set title for appbar. 
+
 ### Usage:
 
 ```tsx
-import { ESewaAppBar } from 'esewa-ui-library';
+import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';
 
 const App = () => {
+  const { updateData } = useESewaDataProvider();
+
+  useEffect(() => {
+      updateData({
+        title: "Merchant Product Form",
+      });
+    }, []);
+
   return (
     <ESewaAppBar 
-      title="App Bar Title" 
+      icon="icon-es-arrow-left"
       titleposition="left"
       onBackIconClick={() => console.log('Back icon clicked')}
       onTitleClick={() => console.log('Title clicked')}
@@ -582,17 +592,19 @@ const App = () => {
     <div>
       <button onClick={openDialog}>Open Dialog</button>
 
-      <ESewaDialog
-        isOpen={isOpen}
-        title="Sample Dialog"
-        okText="Confirm"
-        cancelText="Cancel"
-        onOk={handleOk}
-        onCancel={closeDialog}
-        position="center"
-      >
-        <p>Dialog content goes here.</p>
-      </ESewaDialog>
+      {
+        isOpen && (<ESewaDialog
+          isOpen={isOpen}
+          title="Sample Dialog"
+          okText="Confirm"
+          cancelText="Cancel"
+          onOk={handleOk}
+          onCancel={closeDialog}
+          position="center"
+        >
+          <p>Dialog content goes here.</p>
+        </ESewaDialog>)
+      }
     </div>
   );
 };
@@ -1487,7 +1499,110 @@ export default TooltipExample
 ### Providers
 
 - **ThemeProvider**: `ThemeProvider`
+
+Wrap your component with this provider to apply theme.
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ESewaThemeProvider } from 'esewa-ui-library'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ESewaThemeProvider>
+        <App />
+    </ESewaThemeProvider>
+  </StrictMode>,
+)
+
+```
+
+In your page
+
+```tsx
+import { useEffect, useState } from "react";
+import {
+  MoonIcon,
+  SunIcon,
+} from "@heroicons/react/24/outline";
+
+const [darkMode, setDarkMode] = useState<boolean>(
+  window.matchMedia('(prefers-color-scheme: dark)').matches
+);
+
+const handleThemeToggle = () => {
+  setDarkMode((prevMode) => !prevMode);
+};
+
+useEffect(() => {
+  const theme = darkMode ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-theme', theme);
+}, [darkMode]);
+
+<button
+  onClick={handleThemeToggle}
+>
+  {darkMode ? (
+    <SunIcon className="h-6 w-6" />
+  ) : (
+    <MoonIcon className="h-6 w-6" />
+  )}
+</button>
+
+```
+
 - **ESewaProvider**: `ESewaProvider`
+
+Wrap your component with this provider.
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ESewaProvider } from 'esewa-ui-library'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ESewaProvider>
+        <App />
+    </ESewaProvider>
+  </StrictMode>,
+)
+
+```
+
+then you can use useESewaDataProvider
+
+```tsx
+import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';
+
+const App = () => {
+  const { updateData } = useESewaDataProvider();
+
+  useEffect(() => {
+      updateData({
+        title: "Merchant Product Form",
+      });
+    }, []);
+
+  return (
+    <ESewaAppBar 
+      icon="icon-es-arrow-left"
+      titleposition="left"
+      onBackIconClick={() => console.log('Back icon clicked')}
+      onTitleClick={() => console.log('Title clicked')}
+      onActionIconClick={() => console.log('Action icon clicked')}
+      actionIcon="icon-settings"
+    />
+  );
+};
+
+export default App;
+
+```
+
+
 - **ESewaPaymentProvider**: `ESewaPaymentProvider`
 
 # Services

package/dist/@types/index.d.ts

@@ -46,16 +46,19 @@ declare global {
             VALIDATE_TRANSACTION_CALLBACK?: Callback | null;
         };
         webkit: {
-            requestApp: (data: any) => void;
-            receiveFromApp: (data: any) => void;
             messageHandlers: {
                 iOSNative: {
-                    requestApp: (data: any) => void;
+                    postMessage: (data: any) => void;
+                    INIT_APP_CALLBACK?: Callback | null;
+                    REQUEST_PAYMENT_CALLBACK?: Callback | null;
+                    USER_DETAIL_ACCESS_CALLBACK?: Callback | null;
+                    MEDIA_ACCESS_CALLBACK?: Callback | null;
+                    LOCATION_ACCESS_CALLBACK?: Callback | null;
+                    VALIDATE_TRANSACTION_CALLBACK?: Callback | null;
                 };
             };
-            receiveDataFromWeb: (data: any) => void;
-            receiveDataFromApp: (data: any) => void;
         };
     }
     function getDataFromMiniApp(e: any): void;
 }
+export declare type CallbackKey = keyof Window['Android'] | 'INIT_APP_CALLBACK' | 'REQUEST_PAYMENT_CALLBACK' | 'USER_DETAIL_ACCESS_CALLBACK' | 'MEDIA_ACCESS_CALLBACK' | 'LOCATION_ACCESS_CALLBACK' | 'VALIDATE_TRANSACTION_CALLBACK';

package/dist/index.js

@@ -186,7 +186,7 @@ var StyledAppBar = styled__default.header.attrs(function (_ref) {
   return {
     titleposition: titleposition
   };
-})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  .e-app-bar {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    background-color: var(--appbar-bg-top);\n    padding: 7px 12px;\n    position: fixed;\n    height: 42px;\n    left: 0;\n    right: 0;\n    gap: var(--values-value-8);\n\n    &--nav-icon, &--close-icon {\n      padding: 7px;\n      color: var(--white);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Title section */\n    &--title-wrapper {\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      width: 100%;  // Ensures the title section takes full width to apply the alignment\n    }\n\n    &--title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      overflow: hidden;\n      // display: -webkit-box;\n      // -webkit-line-clamp: 1;\n      // line-clamp: 1;\n      // -webkit-box-orient: vertical;\n    }\n\n    &--title-image img {\n      width: 32px;\n      object-fit: cover;\n      // margin-left: -32px;\n      background: var(--white);\n      border: 1px solid var(--border);\n      border-radius: var(--grid-borderradius-border-radius-xs);\n    }\n\n    &--title-label {\n      color: var(--white);\n      letter-spacing: 0.4px;\n      font-size: var(--values-value-16);\n      font-weight: 500;\n    }\n  }\n"])), function (props) {
+})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  .e-app-bar {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    background-color: var(--appbar-bg-top);\n    padding: 7px 12px;\n    position: relative;\n    height: 42px;\n    // left: 0;\n    // right: 0;\n    gap: var(--values-value-8);\n\n    &--nav-icon, &--close-icon {\n      padding: 7px;\n      color: var(--white);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Title section */\n    &--title-wrapper {\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      width: 100%;  // Ensures the title section takes full width to apply the alignment\n    }\n\n    &--title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      overflow: hidden;\n      // display: -webkit-box;\n      // -webkit-line-clamp: 1;\n      // line-clamp: 1;\n      // -webkit-box-orient: vertical;\n    }\n\n    &--title-image img {\n      width: 32px;\n      object-fit: cover;\n      // margin-left: -32px;\n      background: var(--white);\n      border: 1px solid var(--border);\n      border-radius: var(--grid-borderradius-border-radius-xs);\n    }\n\n    &--title-label {\n      color: var(--white);\n      letter-spacing: 0.4px;\n      font-size: var(--values-value-16);\n      font-weight: 500;\n    }\n  }\n"])), function (props) {
   return props.titleposition === 'left' ? 'flex-start' : props.titleposition === 'right' ? 'flex-end' : 'center';
 });
 var ESewaAppBar = function ESewaAppBar(_ref2) {
@@ -7683,7 +7683,7 @@ var CONNECT_APP = function CONNECT_APP(data) {
   if (isiOS) {
     var _window$webkit;
     if ((_window$webkit = window.webkit) !== null && _window$webkit !== void 0 && _window$webkit.messageHandlers.iOSNative) {
-      window.webkit.messageHandlers.iOSNative.requestApp(data);
+      window.webkit.messageHandlers.iOSNative.postMessage(data);
     } else {
       console.warn('iOS interface not available');
     }
@@ -7691,11 +7691,10 @@ var CONNECT_APP = function CONNECT_APP(data) {
 };
 var requestFromMiniApp = function requestFromMiniApp(data, callbackKey, callback) {
   var _window$webkit2, _window$webkit2$messa;
-  if (window.Android) {
+  if (window.Android && callbackKey in window.Android) {
     window.Android[callbackKey] = callback;
-  } else if ((_window$webkit2 = window.webkit) !== null && _window$webkit2 !== void 0 && (_window$webkit2$messa = _window$webkit2.messageHandlers) !== null && _window$webkit2$messa !== void 0 && _window$webkit2$messa.iOSNative) {
-    window.miniAppResponse = window.miniAppResponse || {};
-    window.miniAppResponse[callbackKey] = callback;
+  } else if ((_window$webkit2 = window.webkit) !== null && _window$webkit2 !== void 0 && (_window$webkit2$messa = _window$webkit2.messageHandlers) !== null && _window$webkit2$messa !== void 0 && _window$webkit2$messa.iOSNative && callbackKey in window.webkit.messageHandlers.iOSNative) {
+    window.webkit.messageHandlers.iOSNative[callbackKey] = callback;
   }
   CONNECT_APP(JSON.stringify(data));
 };