kupos-ui-components-lib 1.0.0

package/README copy.md

@@ -0,0 +1,125 @@
+# Service Item Package
+
+A reusable React component for displaying service items in transportation and
+booking applications.
+
+## Installation
+
+```bash
+npm install service-item-package
+# or
+yarn add service-item-package
+```
+
+## Usage
+
+### Using the KuposUIComponent
+
+The `KuposUIComponent` is a versatile component that can render different UI components based on the `typeOfComponent` prop:
+
+```jsx
+import { KuposUIComponent } from "service-item-package";
+import "service-item-package/dist/styles.css"; // If you add CSS in the future
+
+// Sample data
+const serviceItem = {
+  id: "12345",
+  operator_details: [
+    "https://example.com/logo.png", // logo URL
+    "4.5", // rating
+    "Operator Name", // operator name
+  ],
+  travel_date: "2025-08-01T09:00:00Z",
+  arrival_date: "2025-08-01T12:00:00Z",
+  dep_time: "09:00",
+  arr_time: "12:00",
+  available_seats: 5,
+  seat_types: [
+    { label: "Salon Cama", fare: 50 },
+    { label: "Premium", fare: 75 },
+    { label: "Economy", fare: 40 },
+  ],
+  offer_text: "Limited time offer: 20% off!",
+  is_direct_trip: true,
+};
+
+function App() {
+  return (
+    <div>
+      {/* Render Service Item */}
+      <KuposUIComponent
+        typeOfComponent="serviceitem"
+        variant="desktop"
+        serviceItem={serviceItem}
+        onBookButtonPress={() => console.log("Book pressed!")}
+      />
+      
+      {/* Render Payment Sidebar */}
+      <KuposUIComponent
+        typeOfComponent="paymentsidebar"
+        variant="desktop"
+        // Add payment sidebar specific props here
+      />
+      
+      {/* Render Service List */}
+      <KuposUIComponent
+        typeOfComponent="servicelist"
+        variant="mobile"
+        // Add service list specific props here
+      />
+    </div>
+  );
+}
+```
+
+### Using Individual Components
+
+You can also use the individual components directly:
+
+```jsx
+import { ServiceItemPB } from "service-item-package";
+
+function App() {
+  return (
+    <div>
+      <ServiceItemPB
+        serviceItem={serviceItem}
+        onBookButtonPress={() => console.log("Book pressed!")}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+### KuposUIComponent Props
+
+| Prop            | Type     | Description                                                |
+| --------------- | -------- | ---------------------------------------------------------- |
+| typeOfComponent | string   | Type of component to render: "serviceitem", "paymentsidebar", or "servicelist" |
+| variant         | string   | "mobile" or "desktop" to specify the variant               |
+| ...other props  | various  | All props required by the specific component type          |
+
+### ServiceItem Props
+
+| Prop                  | Type     | Description                                  |
+| --------------------- | -------- | -------------------------------------------- |
+| serviceItem           | Object   | The service item data object                 |
+| onBookButtonPress     | Function | Callback for when the book button is pressed |
+| serviceDetailsLoading | boolean  | Whether service details are loading          |
+| t                     | Function | Optional translation function                |
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build package
+npm run build
+```
+
+## License
+
+MIT

package/README.md

@@ -0,0 +1,125 @@
+# Service Item Package
+
+A reusable React component for displaying service items in transportation and
+booking applications.
+
+## Installation
+
+```bash
+npm install service-item-package
+# or
+yarn add service-item-package
+```
+
+## Usage
+
+### Using the KuposUIComponent
+
+The `KuposUIComponent` is a versatile component that can render different UI components based on the `typeOfComponent` prop:
+
+```jsx
+import { KuposUIComponent } from "service-item-package";
+import "service-item-package/dist/styles.css"; // If you add CSS in the future
+
+// Sample data
+const serviceItem = {
+  id: "12345",
+  operator_details: [
+    "https://example.com/logo.png", // logo URL
+    "4.5", // rating
+    "Operator Name", // operator name
+  ],
+  travel_date: "2025-08-01T09:00:00Z",
+  arrival_date: "2025-08-01T12:00:00Z",
+  dep_time: "09:00",
+  arr_time: "12:00",
+  available_seats: 5,
+  seat_types: [
+    { label: "Salon Cama", fare: 50 },
+    { label: "Premium", fare: 75 },
+    { label: "Economy", fare: 40 },
+  ],
+  offer_text: "Limited time offer: 20% off!",
+  is_direct_trip: true,
+};
+
+function App() {
+  return (
+    <div>
+      {/* Render Service Item */}
+      <KuposUIComponent
+        typeOfComponent="serviceitem"
+        variant="desktop"
+        serviceItem={serviceItem}
+        onBookButtonPress={() => console.log("Book pressed!")}
+      />
+      
+      {/* Render Payment Sidebar */}
+      <KuposUIComponent
+        typeOfComponent="paymentsidebar"
+        variant="desktop"
+        // Add payment sidebar specific props here
+      />
+      
+      {/* Render Service List */}
+      <KuposUIComponent
+        typeOfComponent="servicelist"
+        variant="mobile"
+        // Add service list specific props here
+      />
+    </div>
+  );
+}
+```
+
+### Using Individual Components
+
+You can also use the individual components directly:
+
+```jsx
+import { ServiceItemPB } from "service-item-package";
+
+function App() {
+  return (
+    <div>
+      <ServiceItemPB
+        serviceItem={serviceItem}
+        onBookButtonPress={() => console.log("Book pressed!")}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+### KuposUIComponent Props
+
+| Prop            | Type     | Description                                                |
+| --------------- | -------- | ---------------------------------------------------------- |
+| typeOfComponent | string   | Type of component to render: "serviceitem", "paymentsidebar", or "servicelist" |
+| variant         | string   | "mobile" or "desktop" to specify the variant               |
+| ...other props  | various  | All props required by the specific component type          |
+
+### ServiceItem Props
+
+| Prop                  | Type     | Description                                  |
+| --------------------- | -------- | -------------------------------------------- |
+| serviceItem           | Object   | The service item data object                 |
+| onBookButtonPress     | Function | Callback for when the book button is pressed |
+| serviceDetailsLoading | boolean  | Whether service details are loading          |
+| t                     | Function | Optional translation function                |
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build package
+npm run build
+```
+
+## License
+
+MIT

package/build-css.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const path = require("path");
+const postcss = require("postcss");
+const tailwindcssPlugin = require("@tailwindcss/postcss");
+const autoprefixer = require("autoprefixer");
+
+// Read the CSS file with Tailwind directives
+const css = fs.readFileSync(
+  path.resolve(__dirname, "./src/styles.css"),
+  "utf8",
+);
+
+// Process the CSS with Tailwind and autoprefixer
+postcss([tailwindcssPlugin("./tailwind.config.js"), autoprefixer])
+  .process(css, { from: "./src/styles.css", to: "./dist/styles.css" })
+  .then(result => {
+    // Create the dist directory if it doesn't exist
+    if (!fs.existsSync("./dist")) {
+      fs.mkdirSync("./dist");
+    }
+
+    // Write the processed CSS to the output file
+    fs.writeFileSync("./dist/styles.css", result.css);
+    console.log("CSS built successfully!");
+  })
+  .catch(error => {
+    console.error("Error building CSS:", error);
+  });

package/copy-assets.js

@@ -0,0 +1,45 @@
+const fs = require('fs');
+const path = require('path');
+
+// Create dist/assets directory if it doesn't exist
+const assetsDir = path.join(__dirname, 'dist', 'assets');
+if (!fs.existsSync(assetsDir)) {
+  fs.mkdirSync(assetsDir, { recursive: true });
+}
+
+// Copy assets from src/assets to dist/assets
+const srcAssetsDir = path.join(__dirname, 'src', 'assets');
+if (fs.existsSync(srcAssetsDir)) {
+  copyFolderRecursiveSync(srcAssetsDir, path.join(__dirname, 'dist'));
+}
+
+console.log('Assets copied successfully!');
+
+// Function to copy folder recursively
+function copyFolderRecursiveSync(source, target) {
+  const targetFolder = path.join(target, path.basename(source));
+  
+  // Create target folder if it doesn't exist
+  if (!fs.existsSync(targetFolder)) {
+    fs.mkdirSync(targetFolder, { recursive: true });
+  }
+
+  // Copy files
+  if (fs.lstatSync(source).isDirectory()) {
+    const files = fs.readdirSync(source);
+    files.forEach(function(file) {
+      const curSource = path.join(source, file);
+      if (fs.lstatSync(curSource).isDirectory()) {
+        copyFolderRecursiveSync(curSource, targetFolder);
+      } else {
+        copyFileSync(curSource, targetFolder);
+      }
+    });
+  }
+}
+
+// Function to copy file
+function copyFileSync(source, target) {
+  const targetFile = path.join(target, path.basename(source));
+  fs.copyFileSync(source, targetFile);
+}

package/dist/KuposUIComponent.d.ts

@@ -0,0 +1,84 @@
+import React from "react";
+interface KuposUIComponentProps {
+    typeOfComponent: "serviceitem" | "paymentsidebar" | "servicelist";
+    variant?: "mobile" | "desktop";
+    serviceItem?: any;
+    onBookButtonPress?: () => void;
+    colors?: any;
+    metaData?: any;
+    children?: React.ReactNode;
+    busStage?: any;
+    serviceDetailsLoading?: boolean;
+    cityOrigin?: any;
+    cityDestination?: any;
+    translation?: any;
+    orignLabel?: string;
+    destinationLabel?: string;
+    t?: (key: string) => string;
+    id?: string;
+    name?: string;
+    description?: string;
+    price?: number;
+    currency?: string;
+    imageUrl?: string;
+    rating?: number;
+    available?: boolean;
+    featured?: boolean;
+    duration?: string;
+    location?: string;
+    provider?: {
+        name: string;
+        imageUrl?: string;
+        rating?: number;
+    };
+    onViewDetails?: () => void;
+    orderSummary?: {
+        subtotal: number;
+        taxes: number;
+        discount: number;
+        total: number;
+    };
+    paymentMethods?: Array<{
+        id: string;
+        name: string;
+        icon: string;
+    }>;
+    customerDetails?: {
+        name: string;
+        email: string;
+        phone: string;
+    };
+    orderDetails?: Array<{
+        name: string;
+        price: number;
+        quantity: number;
+    }>;
+    onPaymentMethodSelect?: (id: string) => void;
+    onPayButtonClick?: () => void;
+    services?: Array<{
+        id: string;
+        name: string;
+        description?: string;
+        price?: number;
+        currency?: string;
+        imageUrl?: string;
+        rating?: number;
+        available?: boolean;
+        featured?: boolean;
+    }>;
+    onServiceSelect?: (serviceId: string) => void;
+    onServiceView?: (serviceId: string) => void;
+    showFilters?: boolean;
+    filters?: {
+        categories?: string[];
+        priceRange?: {
+            min: number;
+            max: number;
+        };
+        sortBy?: "price" | "rating" | "name";
+        sortOrder?: "asc" | "desc";
+    };
+    onFilterChange?: (filters: any) => void;
+}
+export default function KuposUIComponent(props: KuposUIComponentProps): React.ReactElement;
+export {};

package/dist/KuposUIComponent.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import ResponsiveServiceItem from "./components/ServiceItem/ResponsiveServiceItem";
+import { ResponsivePaymentSideBar } from "./components/PaymentSideBar";
+import { ResponsiveServiceList } from "./components/ServiceList";
+// Using imported ResponsivePaymentSideBar component instead
+export default function KuposUIComponent(props) {
+    var _a, _b, _c, _d;
+    const { typeOfComponent } = props, restProps = __rest(props, ["typeOfComponent"]);
+    switch (typeOfComponent.toLowerCase()) {
+        case "serviceitem":
+            return (React.createElement(ResponsiveServiceItem, Object.assign({}, restProps)));
+        case "paymentsidebar": {
+            const { orderDetails } = restProps, otherProps = __rest(restProps, ["orderDetails"]);
+            // Create a properly formatted PaymentSideBarProps object
+            const paymentProps = Object.assign(Object.assign({}, otherProps), (orderDetails && {
+                orderDetails: {
+                    items: orderDetails.map((item) => ({
+                        name: item.name,
+                        quantity: item.quantity,
+                        price: item.price,
+                    })),
+                    subtotal: ((_a = restProps.orderSummary) === null || _a === void 0 ? void 0 : _a.subtotal) || 0,
+                    tax: ((_b = restProps.orderSummary) === null || _b === void 0 ? void 0 : _b.taxes) || 0,
+                    discount: ((_c = restProps.orderSummary) === null || _c === void 0 ? void 0 : _c.discount) || 0,
+                    total: ((_d = restProps.orderSummary) === null || _d === void 0 ? void 0 : _d.total) || 0,
+                },
+            }));
+            return React.createElement(ResponsivePaymentSideBar, Object.assign({}, paymentProps));
+        }
+        case "servicelist":
+            return (React.createElement(ResponsiveServiceList, Object.assign({}, restProps)));
+        default:
+            return (React.createElement("div", { className: "error-message" },
+                "Invalid component type: ",
+                typeOfComponent,
+                ". Please use one of: \"serviceitem\", \"paymentsidebar\", or \"servicelist\"."));
+    }
+}

package/dist/ResponsiveServiceItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { MobileServiceItemProps } from "./mobileTypes";
+export default function ResponsiveServiceItem(props: MobileServiceItemProps): React.JSX.Element;

package/dist/ResponsiveServiceItem.js

@@ -0,0 +1,10 @@
+import React from "react";
+import ServiceItemDesktop from "./ServiceItemDesktop";
+import ServiceItemMobile from "./ServiceItemMobile";
+export default function ResponsiveServiceItem(props) {
+    const { variant } = props;
+    if (variant === "mobile") {
+        return React.createElement(ServiceItemMobile, Object.assign({}, props));
+    }
+    return React.createElement(ServiceItemDesktop, Object.assign({}, props));
+}

package/dist/ServiceItemDesktop.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ServiceItemProps } from "./types";
+export default function ServiceItemDesktop(props: ServiceItemProps): React.JSX.Element;

package/dist/ServiceItemDesktop.js

@@ -0,0 +1,6 @@
+import React from "react";
+import ServiceItemPB from "./ServiceItemPb";
+// Desktop variant simply uses the current implementation
+export default function ServiceItemDesktop(props) {
+    return React.createElement(ServiceItemPB, Object.assign({}, props));
+}

package/dist/ServiceItemMobile.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { MobileServiceItemProps } from "./mobileTypes";
+export default function ServiceItemMobile(props: MobileServiceItemProps): React.JSX.Element;

package/dist/ServiceItemMobile.js

@@ -0,0 +1,5 @@
+import React from "react";
+import ServiceItemPBMobile from "./ServivceItemPbMobile";
+export default function ServiceItemMobile(props) {
+    return React.createElement(ServiceItemPBMobile, Object.assign({}, props));
+}

package/dist/ServiceItemMobileView.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ServiceItemMobileProps } from "./types";
+declare const ServiceItemMobileView: React.FC<ServiceItemMobileProps>;
+export default ServiceItemMobileView;

package/dist/ServiceItemMobileView.js

@@ -0,0 +1,33 @@
+import React from "react";
+// Mobile-only view. Implement your mobile UI here.
+// You will receive the same props as the desktop variant plus optional mobile overrides:
+// - mobileServiceItem, mobileColors, mobileTranslation
+// You can choose which data to render (e.g., prefer mobile* overrides when present).
+const ServiceItemMobileView = props => {
+    const { mobileServiceItem, mobileColors, mobileTranslation, } = props;
+    // Choose the data source for mobile (override if provided)
+    const data = mobileServiceItem;
+    const palette = mobileColors;
+    const i18n = mobileTranslation;
+    return (React.createElement("div", { className: "bg-white rounded-[16px] p-4 shadow-service" },
+        React.createElement("div", { className: "text-[#464647] text-[14px]" },
+            React.createElement("div", { className: "font-semibold mb-2" }, "Mobile Service Item"),
+            React.createElement("div", { className: "mb-1" },
+                "Operator: ", data === null || data === void 0 ? void 0 :
+                data.operator_service_name),
+            React.createElement("div", { className: "mb-1" },
+                "Departure: ", data === null || data === void 0 ? void 0 :
+                data.dep_time),
+            React.createElement("div", { className: "mb-1" },
+                "Arrival: ", data === null || data === void 0 ? void 0 :
+                data.arr_time),
+            typeof (data === null || data === void 0 ? void 0 : data.available_seats) === "number" && (React.createElement("div", { className: "mb-1" },
+                "Available seats: ",
+                data.available_seats)),
+            (i18n === null || i18n === void 0 ? void 0 : i18n.hours) && (React.createElement("div", { className: "text-[12px] text-[#888]" }, data === null || data === void 0 ? void 0 :
+                data.duration,
+                " ",
+                i18n.hours))),
+        (palette === null || palette === void 0 ? void 0 : palette.buttonColor) && (React.createElement("div", { className: "mt-3 text-[12px]", style: { color: palette.buttonColor } }, "Colors and other theming can go here"))));
+};
+export default ServiceItemMobileView;

package/dist/ServiceItemPb.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ServiceItemProps } from "./types";
+declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, t, }: ServiceItemProps): React.ReactElement;
+export default ServiceItemPB;