@crestbase/web-shared-ui 1.0.1 → 1.0.3

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,17 @@
+import React from "react";
+interface CalendarProps {
+    selectedDates: Date[];
+    onDateSelect: (date: Date) => void;
+    bookedDates?: Date[];
+    maxSelections?: number;
+    /** Enable time selection after clicking a date */
+    enableTimeSelection?: boolean;
+    /** Allow selecting past dates (default false) */
+    allowPastDates?: boolean;
+    /** Minute step for available times, default 30 */
+    timeStepMinutes?: number;
+    /** Display format for time options */
+    timeFormat?: "12h" | "24h";
+}
+declare const _default: (props: CalendarProps) => React.JSX.Element;
+export default _default;