@crestbase/web-shared-ui 1.0.1 → 1.0.2

package/README.md

@@ -1,13 +1,126 @@
+````markdown
 # @crestbase/web-shared-ui
 
-Shared UI components for web app and admin.
+A shared UI component library for the Crestbase web app and admin dashboard. Built with React, TypeScript, and Next.js in mind, this package provides reusable, accessible components like buttons, modals, headers, and more. It's designed for consistency across projects while keeping bundles light (peer deps for React).
 
-## Install
+## Installation
 
+Add the package via Yarn (recommended) or NPM:
+
+```bash
 yarn add @crestbase/web-shared-ui
+# or
+npm install @crestbase/web-shared-ui
+```
+````
+
+### Peer Dependencies
+
+Ensure React 18+ is installed (handled by Next.js):
+
+```json
+{
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}
+```
 
 ## Usage
 
-import { Button } from '@crestbase/web-shared-ui';
+Import components directly:
+
+```tsx
+import { Button, Modal } from "@crestbase/web-shared-ui";
+
+export default function MyPage() {
+  return (
+    <div>
+      <Button
+        title="Click Me"
+        variant="primary"
+        onPress={() => console.log("Clicked!")}
+      />
+      <Modal visible={true} title="Hello" onClose={() => {}}>
+        Content here
+      </Modal>
+    </div>
+  );
+}
+```
+
+### Available Components
+
+- `Button` - Customizable buttons with variants.
+- `Modal` - Accessible modals with animations.
+- `Header` - Navigation headers.
+- [Add more as you build—export via `src/index.ts`]
+
+See [Storybook docs](https://your-storybook-url) for interactive examples (deploy separately if needed).
+
+## Development
+
+### Local Setup
+
+1. Clone: `git clone https://github.com/mycrestbase/web-shared-ui.git && cd web-shared-ui`.
+2. Install: `yarn install`.
+3. Dev build: `yarn dev` (watches TS changes).
+
+### Adding Components
+
+1. Create in `src/components/NewComponent/NewComponent.tsx`.
+2. Export in `src/components/NewComponent/index.ts`: `export { default } from './NewComponent';`.
+3. Barrel export in `src/components/index.ts`: `export { default as NewComponent } from './NewComponent';`.
+4. Main export in `src/index.ts`: `export * from './components';`.
+5. Build: `yarn build` (generates `dist/`).
+
+### Versioning & Publishing
+
+We use semantic versioning (SemVer): `MAJOR.MINOR.PATCH`.
+
+#### Bumping Versions
+
+- **Patch** (bug fixes): `yarn version patch` → e.g., 1.0.0 → 1.0.1.
+- **Minor** (new features): `yarn version minor` → 1.0.1 → 1.1.0.
+- **Major** (breaking changes): `yarn version major` → 1.1.0 → 2.0.0.
+
+This auto-updates `package.json` and commits.
+
+#### Tagging & Publishing
+
+1. Bump: `yarn version patch`.
+2. Tag: `git tag v1.0.1` (matches version, with "v").
+3. Push: `git push origin main && git push origin v1.0.1`.
+   - Triggers GitHub Actions: Builds, verifies, publishes to NPM (public), creates release.
+
+#### Auto-Publish Workflow
+
+- Located in `.github/workflows/publish.yml`.
+- Runs on tag push: Builds → Verifies version → Publishes → GitHub release.
+- View runs: Repo > Actions tab.
+
+In consumer apps: `yarn upgrade @crestbase/web-shared-ui` to pull updates.
+
+## Styles Setup
+
+Add one import in your app entry (for Next.js, `app/layout.tsx`):
+
+```ts
+import "@crestbase/web-shared-ui/dist/styles.css";
+```
+
+This imports precompiled, scoped Tailwind-based styles so visuals render consistently without extra Tailwind configuration in consuming apps.
+
+## Contributing
+
+- Fork, branch (e.g., `feat/new-button`), PR to `main`.
+- Build: `yarn build` (check `dist/`).
+
+## License
+
+MIT - see [LICENSE](LICENSE) for details.
+
+---
 
-<Button title="Click" />
+Built with ❤️ for Crestbase. Questions? [Open an issue](https://github.com/mycrestbase/web-shared-ui/issues).

package/dist/components/button/CircleBtn.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+interface CircleBtnProps {
+    title?: string;
+    icon?: ReactNode;
+    isDisabled?: boolean;
+    onBtnPress?: () => void;
+}
+declare const _default: (props: CircleBtnProps) => React.JSX.Element;
+export default _default;

package/dist/components/button/CircleBtn.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CircleBtn = ({ title, icon, onBtnPress, isDisabled = false }) => {
+    return (_jsxs("button", { onClick: onBtnPress, disabled: isDisabled || !onBtnPress, "aria-disabled": isDisabled || !onBtnPress, className: "outline-none bg-white shadow-md h-6 w-6 flex items-center justify-center gap-x-2 rounded-full overflow-hidden cursor-pointer", children: [icon && icon, title && _jsx("p", { className: "font-normal text-sm text-[#011B33]", children: title })] }));
+};
+export default CircleBtn;

package/dist/components/button/ShadowButton.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ShadowButtonProps {
+    children: React.ReactNode;
+    className?: string;
+    onClick?: () => void;
+}
+declare const _default: (props: ShadowButtonProps) => React.JSX.Element;
+export default _default;

package/dist/components/button/ShadowButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ShadowButton = ({ children, className = "", onClick }) => {
+    return (_jsxs("button", { className: `border border-black px-3 bg-[#F1A5C2] text-blue-500 font-semibold py-1 rounded-lg relative z-30 cursor-pointer ${className}`, onClick: onClick, children: [children, _jsx("div", { className: `absolute w-full h-full rounded-lg bg-white -top-0.5 left-0.5 border border-black flex justify-center items-center ${className}`, children: children })] }));
+};
+export default ShadowButton;

package/dist/components/button/index.d.ts

@@ -1,3 +1,12 @@
-declare const Button: () => import("react/jsx-runtime").JSX.Element;
-export default Button;
-//# sourceMappingURL=index.d.ts.map
+import React from "react";
+export interface ButtonProps {
+    children: React.ReactNode;
+    type?: "submit" | "button";
+    onClick?: () => void;
+    className?: string;
+    disabled?: boolean;
+}
+declare const _default: (props: ButtonProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;
+export default _default;

package/dist/components/button/index.js

@@ -1,6 +1,20 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Button = () => {
-    return _jsx("div", { children: "Button" });
+const Button = ({ children, type = "submit", onClick, className = "", disabled = false, }) => {
+    const finalClasses = [
+        // Base styles (from former cb-btn)
+        "w-full p-3.5 px-6 h-13.5 sm:h-auto border border-gray-200 rounded-xl",
+        "text-white text-[13px] outline-none",
+        "bg-primaryblue hover:bg-primaryblue/70 focus:border-primaryblue",
+        // Interaction states
+        disabled ? "bg-gray-400 cursor-not-allowed" : "cursor-pointer",
+        // Consumer-provided classes
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("button", { className: finalClasses, type: type, onClick: onClick, disabled: disabled, children: _jsx("span", { children: children }) }));
 };
+// Cast to a function component type to satisfy Next 15 + React 19 JSX typing
+// while preserving the underlying React.FC behavior at runtime.
 export default Button;
-//# sourceMappingURL=index.js.map

package/dist/components/core/Accordion.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface AccordionProps {
+    title: React.ReactNode;
+    isOpen: boolean;
+    onToggle: () => void;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+declare const _default: (props: AccordionProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/Accordion.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlusIcon } from "lucide-react";
+export const Accordion = ({ title, isOpen, onToggle, children, className = "" }) => {
+    return (_jsxs("div", { className: `border border-gray-200 rounded-2xl overflow-hidden text-sm sm:text-base ${className}`, children: [_jsxs("button", { onClick: onToggle, className: `w-full flex gap-2 items-center justify-between sm:px-4 p-4 sm:py-6 text-left ${isOpen ? "bg-gray-50" : ""} hover:bg-gray-50 cursor-pointer transition-colors`, "aria-expanded": isOpen, children: [_jsx("h3", { className: "text-black font-medium flex-1", children: title }), _jsx(PlusIcon, { className: `w-4.5 h-4.5 text-black transition-transform ${isOpen ? "rotate-45" : ""}` })] }), isOpen && _jsx("div", { className: "p-4", children: children })] }));
+};
+export default Accordion;

package/dist/components/core/AddressInput.d.ts

@@ -0,0 +1,34 @@
+interface AutocompleteOptions {
+    types?: string[];
+    componentRestrictions?: {
+        country: string | string[];
+    };
+    bounds?: {
+        north: number;
+        south: number;
+        east: number;
+        west: number;
+    };
+    fields?: string[];
+    strictBounds?: boolean;
+}
+export interface AddressInputProps {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    onChange: (value: string) => void;
+    error?: string;
+    className?: string;
+    hideLabel?: boolean;
+    disabled?: boolean;
+    onLocationSelect?: (location: {
+        address: string;
+        latitude: number;
+        longitude: number;
+    }) => void;
+    autocompleteOptions?: AutocompleteOptions;
+    dropdownClassName?: string;
+}
+declare function AddressInput({ name, label, placeholder, value, onChange, error, className, hideLabel, disabled, onLocationSelect, autocompleteOptions, dropdownClassName, }: Readonly<AddressInputProps>): import("react/jsx-runtime").JSX.Element;
+export default AddressInput;

package/dist/components/core/AddressInput.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { useGoogleMaps } from "../../utils/googleMapsLoader";
+const parseAddressData = (addressData) => {
+    if (!addressData)
+        return { address: "" };
+    try {
+        const parsed = JSON.parse(addressData);
+        if (typeof parsed === "object" && parsed.address) {
+            return {
+                address: parsed.address,
+                latitude: parsed.latitude,
+                longitude: parsed.longitude,
+            };
+        }
+    }
+    catch { }
+    return { address: addressData };
+};
+function AddressInput({ name, label, placeholder = "Enter property address", value = "", onChange, error, className = "", hideLabel = false, disabled = false, onLocationSelect, autocompleteOptions, dropdownClassName, }) {
+    const inputRef = useRef(null);
+    const autocompleteRef = useRef(null);
+    const focusHandlerRef = useRef(null);
+    const { isLoaded } = useGoogleMaps();
+    const handlePlaceChanged = useCallback(() => {
+        const place = autocompleteRef.current?.getPlace();
+        if (place?.geometry?.location) {
+            const location = {
+                address: place.formatted_address || place.name || "",
+                latitude: place.geometry.location.lat(),
+                longitude: place.geometry.location.lng(),
+            };
+            onLocationSelect?.(location);
+        }
+    }, [onLocationSelect]);
+    const handleInputChange = useCallback((event) => {
+        onChange(event.target.value);
+    }, [onChange]);
+    const addCustomStyling = useCallback(() => {
+        if (!dropdownClassName)
+            return;
+        const dropdowns = document.querySelectorAll(".pac-container");
+        for (const dropdown of dropdowns) {
+            if (!dropdown.classList.contains(dropdownClassName)) {
+                dropdown.classList.add(dropdownClassName);
+            }
+        }
+    }, [dropdownClassName]);
+    useEffect(() => {
+        if (!isLoaded || !inputRef.current || autocompleteRef.current)
+            return;
+        const options = {
+            types: ["address"],
+            componentRestrictions: { country: "ng" },
+            fields: ["formatted_address", "geometry", "name"],
+            ...autocompleteOptions,
+        };
+        if (window.google?.maps?.places?.Autocomplete) {
+            autocompleteRef.current = new window.google.maps.places.Autocomplete(inputRef.current, options);
+            autocompleteRef.current.addListener("place_changed", handlePlaceChanged);
+        }
+        if (dropdownClassName && inputRef.current) {
+            const timeoutId = setTimeout(addCustomStyling, 100);
+            focusHandlerRef.current = () => {
+                setTimeout(addCustomStyling, 100);
+            };
+            inputRef.current.addEventListener("focus", focusHandlerRef.current);
+            return () => {
+                clearTimeout(timeoutId);
+                if (inputRef.current && focusHandlerRef.current) {
+                    inputRef.current.removeEventListener("focus", focusHandlerRef.current);
+                }
+            };
+        }
+    }, [
+        isLoaded,
+        autocompleteOptions,
+        dropdownClassName,
+        handlePlaceChanged,
+        addCustomStyling,
+    ]);
+    const errorMessage = error;
+    return (_jsxs("div", { className: `w-full text-sm ${className}`, children: [label && !hideLabel && (_jsx("label", { htmlFor: name, className: "block mb-2 text-xs text-gray-500", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", { ref: (e) => {
+                            inputRef.current = e;
+                        }, id: name, type: "text", placeholder: placeholder, value: parseAddressData(value || "").address, onChange: handleInputChange, name: name, disabled: disabled, className: `w-full text-base sm:text-xs h-13.5 sm:h-auto p-0 px-3 sm:px-4 sm:p-4 border border-gray-200 rounded-xl bg-gray-50 focus:border-gray-300 focus:bg-white outline-none placeholder-gray-300 ${errorMessage ? "border-red-500" : "border-gray-200"} ${isLoaded ? "" : "pr-12"}`, autoComplete: "off" }), !isLoaded && (_jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: _jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400" }) }))] }), errorMessage && (_jsx("p", { className: "mt-1 text-xs text-red-500", children: errorMessage })), !isLoaded && (_jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Loading address suggestions..." }))] }));
+}
+export default AddressInput;

package/dist/components/core/BottomSheet.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface BottomSheetProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    className?: string;
+    renderTopBg?: () => React.ReactNode;
+}
+declare const _default: (props: BottomSheetProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/BottomSheet.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+const BottomSheet = ({ isOpen, onClose, children, className = "", renderTopBg }) => {
+    useEffect(() => {
+        document.body.style.overflow = isOpen ? "hidden" : "unset";
+        return () => {
+            document.body.style.overflow = "unset";
+        };
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex flex-col items-center justify-end", children: [_jsx("button", { className: "absolute inset-0 bg-black/40 bg-opacity-50 transition-opacity", onClick: onClose }), renderTopBg?.(), _jsx("div", { className: `relative z-12 w-full max-w-md bg-white rounded-t-3xl shadow-xl transform transition-transform duration-300 ease-out animate-in slide-in-from-bottom max-h-[80vh] overflow-hidden overflow-y-auto text-black ${className}`, children: children })] }));
+};
+export default BottomSheet;

package/dist/components/core/Calendar.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface CalendarProps {
+    selectedDates: Date[];
+    onDateSelect: (date: Date) => void;
+    bookedDates?: Date[];
+    maxSelections?: number;
+}
+declare const _default: (props: CalendarProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/Calendar.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const Calendar = ({ selectedDates, onDateSelect, bookedDates = [], maxSelections, }) => {
+    const [currentMonth, setCurrentMonth] = useState(new Date());
+    const today = new Date();
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    // Get first day of month and number of days
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const daysInMonth = lastDay.getDate();
+    const startingDayOfWeek = firstDay.getDay();
+    // Month names
+    const monthNames = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+    ];
+    const handleDateClick = (day) => {
+        const clickedDate = new Date(year, month, day);
+        // Don't allow past dates or booked dates
+        if (clickedDate < today || isDateBooked(day))
+            return;
+        // Check if we've reached max selections and this date isn't already selected
+        if (maxSelections &&
+            selectedDates.length >= maxSelections &&
+            !isDateSelected(day)) {
+            return;
+        }
+        onDateSelect(clickedDate);
+    };
+    const handlePrevMonth = () => {
+        setCurrentMonth(new Date(year, month - 1, 1));
+    };
+    const handleNextMonth = () => {
+        setCurrentMonth(new Date(year, month + 1, 1));
+    };
+    const isDateSelected = (day) => {
+        const date = new Date(year, month, day);
+        return selectedDates.some((selectedDate) => selectedDate.getTime() === date.getTime());
+    };
+    const isDateBooked = (day) => {
+        const date = new Date(year, month, day);
+        return bookedDates.some((bookedDate) => {
+            const bookedDateOnly = new Date(bookedDate.getFullYear(), bookedDate.getMonth(), bookedDate.getDate());
+            const currentDateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+            return bookedDateOnly.getTime() === currentDateOnly.getTime();
+        });
+    };
+    const isDateDisabled = (day) => {
+        const date = new Date(year, month, day);
+        return date < today || isDateBooked(day);
+    };
+    // Generate calendar days
+    const calendarDays = [];
+    // Add empty cells for days before the first day of the month
+    for (let i = 0; i < startingDayOfWeek; i++) {
+        calendarDays.push(_jsx("div", { className: "h-10" }, `empty-${i}`));
+    }
+    // Add days of the month
+    for (let day = 1; day <= daysInMonth; day++) {
+        const isDisabled = isDateDisabled(day);
+        const isSelected = isDateSelected(day);
+        const isBooked = isDateBooked(day);
+        const isPast = new Date(year, month, day) < today;
+        let buttonClass = "h-8 w-8 rounded-full flex items-center justify-center text-[11px] transition-all duration-200 ";
+        if (isDisabled) {
+            if (isBooked) {
+                buttonClass +=
+                    "bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200";
+            }
+            else if (isPast) {
+                buttonClass += "text-gray-300 cursor-not-allowed";
+            }
+        }
+        else if (isSelected) {
+            buttonClass +=
+                "bg-blue-500 text-white shadow-md transform scale-105 cursor-pointer";
+        }
+        else {
+            buttonClass +=
+                "text-gray-700 hover:bg-blue-50 hover:text-blue-600 cursor-pointer";
+        }
+        calendarDays.push(_jsx("button", { onClick: () => handleDateClick(day), disabled: isDisabled, className: buttonClass, title: isBooked ? "This date is already booked" : isPast ? "Past date" : "", children: day }, day));
+    }
+    return (_jsxs("div", { className: "calendar ", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("button", { onClick: handlePrevMonth, className: "p-2 rounded-full hover:bg-gray-100 transition-colors cursor-pointer", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsxs("h3", { className: "text-sm font-medium text-gray-800", children: [monthNames[month], " ", year] }), _jsx("button", { onClick: handleNextMonth, className: "p-2 rounded-full hover:bg-gray-100 transition-colors cursor-pointer", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (_jsx("div", { className: "h-8 flex items-center justify-center text-xs font-medium text-gray-500", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: calendarDays }), _jsx("div", { className: "mt-3", children: _jsxs("div", { className: "flex justify-center gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-blue-500 rounded-full" }), _jsx("span", { className: "text-gray-600", children: "Selected" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-gray-100 border border-gray-200 rounded-full" }), _jsx("span", { className: "text-gray-600", children: "Booked" })] })] }) })] }));
+};
+export default Calendar;

package/dist/components/core/CalendarExtended.d.ts

@@ -0,0 +1,27 @@
+export type MonthSelection = {
+    year: number;
+    month: number;
+};
+export interface CalendarExtendedProps {
+    selectionGranularity?: "day" | "month";
+    allowRange?: boolean;
+    startYear?: number;
+    endYear?: number;
+    selectedMonths?: MonthSelection[];
+    onMonthSelectionChange?: (months: MonthSelection[]) => void;
+    onMonthRangeChange?: (range: {
+        start: MonthSelection;
+        end: MonthSelection;
+    }) => void;
+    minSelectableMonth?: MonthSelection;
+    maxSelectableMonth?: MonthSelection;
+    /** Convenience flag: when true, disallow selecting months beyond the current month */
+    disableFutureMonths?: boolean;
+    containerHeight?: number;
+    enableYearTransition?: boolean;
+    selectedDates?: Date[];
+    onDateSelect?: (date: Date) => void;
+    bookedDates?: Date[];
+    maxSelections?: number;
+}
+export default function CalendarExtended({ selectionGranularity, allowRange, startYear, endYear, selectedMonths, onMonthSelectionChange, onMonthRangeChange, minSelectableMonth, maxSelectableMonth, disableFutureMonths, containerHeight, enableYearTransition: _enableYearTransition, selectedDates, onDateSelect, bookedDates, maxSelections, }: Readonly<CalendarExtendedProps>): import("react/jsx-runtime").JSX.Element;