# Blankbase Packages

A React component library for property search and mapping functionality.

## Installation

```bash
npm install blankbase-packages
# or
yarn add blankbase-packages
```

## Peer Dependencies

This package requires the following peer dependencies to be installed in your project:

```bash
npm install @reduxjs/toolkit react-redux react-hook-form react-i18next i18next react-select react-datepicker react-toastify axios moment zod @hookform/resolvers
# or
yarn add @reduxjs/toolkit react-redux react-hook-form react-i18next i18next react-select react-datepicker react-toastify axios moment zod @hookform/resolvers
```

## Usage

### Basic Usage

```tsx
import { SearchbarMain } from 'blankbase-packages';

function App() {
  const [view, setView] = useState("list");
  const [apiPayload, setApiPayload] = useState(null);

  return (
    <SearchbarMain
      view={view}
      setView={setView}
      propertyMeta={{
        totalCount: 0,
      }}
      setApiPayload={setApiPayload}
      isDashboard={false}
      userType={'guest'}
      currency={'USD'}
      BASE_URL={'https://your-api-url.com/api/v1/'}
    />
  );
}
```

### Redux Store Setup

This package requires a Redux store to be configured. Make sure to wrap your app with a Redux Provider:

```tsx
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import { SearchbarMain } from 'blankbase-packages';

// Create your store
const store = configureStore({
  reducer: {
    // Your reducers here
  },
});

function App() {
  return (
    <Provider store={store}>
      <SearchbarMain
        // ... props
      />
    </Provider>
  );
}
```

## Components

### SearchbarMain

The main search component that provides property search functionality.

#### Props

- `view: string` - Current view mode ('list' or 'map')
- `setView: (view: string) => void` - Function to update view mode
- `setApiPayload: (payload: any) => void` - Function to handle API payload
- `isDashboard?: boolean` - Whether the component is used in dashboard context
- `propertyMeta?: any` - Property metadata
- `userType: string` - Type of user ('guest', 'host', etc.)
- `currency: string` - Currency code ('USD', 'EUR', etc.)
- `BASE_URL: string` - Base URL for API calls
- `handleDashboardSearch?: (data: any) => void` - Optional dashboard search handler

### MapView

A map component for displaying properties.

#### Props

- `properties: any[]` - Array of properties to display
- `initialZoom?: number` - Initial zoom level
- `onPopupClick?: (data: any) => void` - Callback for popup clicks
- `width?: string` - Map width
- `height?: string` - Map height
- `isDetails?: boolean` - Whether in details mode
- `handleCurrentClick?: (location: [number, number]) => void` - Current location handler
- `isCurrentLocation?: boolean` - Whether to show current location
- `isSearchListing?: boolean` - Whether this is a search listing
- `searchState?: any` - Search state

### SearchPlaceMap

A map component specifically for search results.

#### Props

- `propertyList: any[]` - List of properties to display
- `onInfoWindowClick: (item: any) => void` - Info window click handler
- `GOOGLE_MAPS_API_KEY: string` - Google Maps API key

## Next.js Compatibility

This package is compatible with Next.js. However, make sure to:

1. Install all peer dependencies
2. Configure your Redux store properly
3. Handle any SSR-related issues by wrapping components that use browser APIs

### Example Next.js Setup

```tsx
// pages/_app.tsx
import { Provider } from 'react-redux';
import { store } from '../store';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;
```

## Styling

The package includes its own styles. Import them in your main file:

```tsx
import 'blankbase-packages/styles.css';
```

## Version

Current version: 1.0.27