@asdp/ferryui 0.1.5 → 0.1.6

package/dist/index.d.mts

@@ -644,4 +644,91 @@ interface ModalSelectDateProps {
  */
 declare const ModalSelectDate: React.FC<ModalSelectDateProps>;
 
-export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, type RadioOption, type SelectOption, type ServiceMenuItem, type TabType, getModalPreset };
+/**
+ * Service item structure
+ */
+interface ServiceItem {
+    /**
+     * Unique identifier for the service
+     */
+    id: number;
+    /**
+     * Display name of the service type
+     */
+    serviceTypeName: string;
+    /**
+     * Code identifier for the service type
+     */
+    serviceTypeCode: string;
+    /**
+     * Detailed description of the service
+     */
+    serviceDescription: string;
+}
+/**
+ * Props for ModalService component
+ */
+interface ModalServiceProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     * @default "Pilih Kelas Layanan"
+     */
+    title?: string;
+    /**
+     * Array of available services
+     */
+    services: ServiceItem[];
+    /**
+     * Array of currently selected service IDs
+     */
+    selectedServiceIds: number[];
+    /**
+     * Callback when save button is clicked
+     * @param services - Array of selected service items
+     */
+    onSave: (services: ServiceItem[]) => void;
+    /**
+     * Loading state for services data
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Error state for services data
+     * @default false
+     */
+    isError?: boolean;
+}
+/**
+ * ModalService - A reusable modal component for selecting service classes
+ *
+ * This component provides a service selection modal with features like:
+ * - Multiple service selection with checkboxes
+ * - Select all/deselect all functionality
+ * - Service details display (name, code, description)
+ * - Save validation (requires at least one selection)
+ *
+ * @example
+ * ```tsx
+ * <ModalService
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Pilih Kelas Layanan"
+ *   services={servicesList}
+ *   selectedServiceIds={selectedIds}
+ *   onSave={handleSave}
+ *   isLoading={isLoading}
+ *   isError={isError}
+ * />
+ * ```
+ */
+declare const ModalService: React.FC<ModalServiceProps>;
+
+export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, type RadioOption, type SelectOption, type ServiceItem, type ServiceMenuItem, type TabType, getModalPreset };

package/dist/index.d.ts

@@ -644,4 +644,91 @@ interface ModalSelectDateProps {
  */
 declare const ModalSelectDate: React.FC<ModalSelectDateProps>;
 
-export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, type RadioOption, type SelectOption, type ServiceMenuItem, type TabType, getModalPreset };
+/**
+ * Service item structure
+ */
+interface ServiceItem {
+    /**
+     * Unique identifier for the service
+     */
+    id: number;
+    /**
+     * Display name of the service type
+     */
+    serviceTypeName: string;
+    /**
+     * Code identifier for the service type
+     */
+    serviceTypeCode: string;
+    /**
+     * Detailed description of the service
+     */
+    serviceDescription: string;
+}
+/**
+ * Props for ModalService component
+ */
+interface ModalServiceProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     * @default "Pilih Kelas Layanan"
+     */
+    title?: string;
+    /**
+     * Array of available services
+     */
+    services: ServiceItem[];
+    /**
+     * Array of currently selected service IDs
+     */
+    selectedServiceIds: number[];
+    /**
+     * Callback when save button is clicked
+     * @param services - Array of selected service items
+     */
+    onSave: (services: ServiceItem[]) => void;
+    /**
+     * Loading state for services data
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Error state for services data
+     * @default false
+     */
+    isError?: boolean;
+}
+/**
+ * ModalService - A reusable modal component for selecting service classes
+ *
+ * This component provides a service selection modal with features like:
+ * - Multiple service selection with checkboxes
+ * - Select all/deselect all functionality
+ * - Service details display (name, code, description)
+ * - Save validation (requires at least one selection)
+ *
+ * @example
+ * ```tsx
+ * <ModalService
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Pilih Kelas Layanan"
+ *   services={servicesList}
+ *   selectedServiceIds={selectedIds}
+ *   onSave={handleSave}
+ *   isLoading={isLoading}
+ *   isError={isError}
+ * />
+ * ```
+ */
+declare const ModalService: React.FC<ModalServiceProps>;
+
+export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, type RadioOption, type SelectOption, type ServiceItem, type ServiceMenuItem, type TabType, getModalPreset };

package/dist/index.js

@@ -3370,6 +3370,197 @@ var ModalSelectDate = ({
     }
   );
 };
+var useStyles10 = reactComponents.makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    paddingTop: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  headerRow: {
+    display: "flex",
+    justifyContent: "end",
+    alignItems: "center",
+    borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`
+  },
+  serviceList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    maxHeight: "400px",
+    overflowY: "auto",
+    paddingLeft: "20px"
+  },
+  serviceItem: {
+    padding: "16px 0px",
+    borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "12px",
+    cursor: "pointer",
+    transition: "background-color 0.2s ease",
+    ":hover": {
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
+    }
+  },
+  serviceContent: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  serviceName: {
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    fontWeight: reactComponents.tokens.fontWeightSemibold,
+    color: reactComponents.tokens.colorNeutralForeground1
+  },
+  serviceType: {
+    fontSize: reactComponents.tokens.fontSizeBase200,
+    fontWeight: reactComponents.tokens.fontWeightRegular,
+    color: reactComponents.tokens.colorNeutralForeground2
+  },
+  serviceDescription: {
+    fontSize: reactComponents.tokens.fontSizeBase200,
+    color: reactComponents.tokens.colorNeutralForeground3,
+    lineHeight: "1.4"
+  },
+  footer: {
+    padding: "16px 20px",
+    borderTop: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`
+  },
+  saveButton: {
+    width: "100%",
+    borderRadius: reactComponents.tokens.borderRadiusCircular
+  }
+});
+var ModalService = ({
+  open,
+  onClose,
+  title = "Pilih Kelas Layanan",
+  services,
+  selectedServiceIds,
+  onSave,
+  isLoading = false,
+  isError = false
+}) => {
+  const styles = useStyles10();
+  const [selectedServices, setSelectedServices] = React2.useState(selectedServiceIds);
+  React2.useEffect(() => {
+    if (open) {
+      if (selectedServiceIds && selectedServiceIds.length > 0) {
+        const validIds = services.filter((s) => selectedServiceIds.includes(s.id)).map((s) => s.id);
+        setSelectedServices(validIds);
+      } else {
+        setSelectedServices(services.map((s) => s.id));
+      }
+    }
+  }, [open, services, selectedServiceIds]);
+  const handleClose = () => {
+    onClose();
+  };
+  const handleToggleService = (serviceId) => {
+    setSelectedServices((prev) => {
+      if (prev.includes(serviceId)) {
+        return prev.filter((id) => id !== serviceId);
+      } else {
+        return [...prev, serviceId];
+      }
+    });
+  };
+  const handleToggleAll = () => {
+    if (selectedServices.length === services.length) {
+      setSelectedServices([]);
+    } else {
+      setSelectedServices(services.map((s) => s.id));
+    }
+  };
+  const handleSave = () => {
+    const selectedServiceItems = services.filter((s) => selectedServices.includes(s.id));
+    onSave(selectedServiceItems);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => !data.open && onClose(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.DialogTitle,
+          {
+            action: /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
+                onClick: handleClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: "Loading..." }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: "Error loading services" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceList, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: "Pilih Semua" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.Checkbox,
+                {
+                  checked: selectedServices.length === services.length,
+                  onChange: handleToggleAll
+                }
+              )
+            ] }),
+            services.map((service) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: styles.serviceItem,
+                onClick: () => handleToggleService(service.id),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceContent, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.serviceName, children: service.serviceTypeName }),
+                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.serviceType, children: service.serviceTypeCode }),
+                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.serviceDescription, children: service.serviceDescription })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Checkbox,
+                    {
+                      checked: selectedServices.includes(service.id),
+                      onChange: () => handleToggleService(service.id)
+                    }
+                  )
+                ]
+              },
+              service.id
+            ))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              appearance: "primary",
+              size: "medium",
+              className: styles.saveButton,
+              onClick: handleSave,
+              disabled: selectedServices.length === 0,
+              children: "Simpan"
+            }
+          ) })
+        ] }) })
+      ] }) })
+    }
+  );
+};
 
 exports.BackgroundTicketCard = BackgroundTicketCard_default;
 exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
@@ -3384,6 +3575,7 @@ exports.MODAL_PRESETS = MODAL_PRESETS;
 exports.ModalIllustration = ModalIllustration;
 exports.ModalSearchHarbor = ModalSearchHarbor;
 exports.ModalSelectDate = ModalSelectDate;
+exports.ModalService = ModalService;
 exports.getModalPreset = getModalPreset;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map