willba-component-library 0.2.102 → 0.3.0

package/.nvmrc

@@ -1 +1 @@
-18.17.0
+24.13.0

package/.storybook/main.ts

@@ -2,18 +2,16 @@ import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.tsx"],
+
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    "@storybook/addon-docs"
   ],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
+  }
 };
 export default config;

package/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-vite";
 
 const preview: Preview = {
   parameters: {

package/README.md

@@ -84,6 +84,16 @@ function App() {
           order: 1,
         },
       ]}
+      locations={{
+        multiSelect: false,
+        data: [
+          {
+            id: '1',
+            label: { en: 'Helsinki', fi: 'Helsinki' },
+            imageUrl: 'https://example.com/helsinki.jpg',
+          },
+        ],
+      }}
     />
   )
 }
@@ -171,6 +181,16 @@ ReactDOM.render(<App />, document.querySelector('#app'))
           order: 1,
         },
       ],
+      locations: {
+        multiSelect: false,
+        data: [
+          {
+            id: '1',
+            label: { en: 'Helsinki', fi: 'Helsinki' },
+            imageUrl: 'https://example.com/helsinki.jpg',
+          },
+        ],
+      },
     })
   )
 </script>
@@ -188,4 +208,4 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 | ageCategories        | `[{}]`     | The ageCategories prop will determine the types of guests that can be selected. Specify the age categories for guests using the following format: `[{ id: string, name: string, minVal: number, sortOrder: number }]`. For example: `[{ id: '1', name: 'Aikuiset', minVal: 1, sortOrder: 1 }]` |
 | fullWidth            | `true`     | Specify whether the filter bar width should be dynamic or fixed.                                                                                                                                                                                                                               |
 | tabs                 | `[{}]`     | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label: { en: string, fi: string }}]`. For example: `[{ path: '/rooms', default: true, order: 2, label: { en: 'Rooms', fi: 'Hilat' }}]`                                                |
-| locationIds          | `string[]` | Specifies an array of location identifiers to be included as query parameters in the redirect URL after filter submission. Each ID will be appended as a separate `locationId` parameter. Default is `undefined`. For example: `['1', '2']` results in `?locationId=1&locationId=2`                     |
+| locations            | `{}`       | Configures location filter. Format: `{ multiSelect: boolean, data: Location[] }` where Location = `{ id: string, label: { en: string, fi: string }, description?: { en: string, fi: string }, imageUrl?: string }`. `multiSelect` enables multi-selection, `description` shows under title, `imageUrl` displays location image. Example: `{ multiSelect: false, data: [{ id: '1', label: { en: 'Helsinki', fi: 'Helsinki' }, description: { en: 'Capital', fi: 'Pääkaupunki' }, imageUrl: 'https://example.com/helsinki.jpg' }] }` |

package/lib/components/FilterBar/FilterBar.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import '../../themes/Default.css';
 import { FilterBarTypes } from './FilterBarTypes';
 import './FilterBar.css';
-export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locationIds, }: FilterBarTypes): React.JSX.Element;
+export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): React.JSX.Element;

package/lib/components/FilterBar/FilterBarTypes.d.ts

@@ -11,7 +11,10 @@ export type FilterBarTypes = {
     mode?: string;
     tabs?: Tab[];
     outerLoading?: boolean;
-    locationIds?: string[];
+    locations?: {
+        multiSelect: boolean;
+        data: Location[];
+    };
 };
 export type AgeCategoryCount = {
     [categoryId: string]: number;
@@ -33,7 +36,8 @@ export type GuestsCountPropsType = {
 export declare enum FilterSections {
     CALENDAR = "calendar",
     GUESTS = "guests",
-    CATEGORIES = "categories"
+    CATEGORIES = "categories",
+    LOCATIONS = "locations"
 }
 export type Filters = {
     [key: string]: string;
@@ -54,4 +58,10 @@ export type Tab = {
     order: number;
     label?: Translations;
 };
+export type Location = {
+    id: string;
+    label: Translations;
+    description?: Translations;
+    imageUrl?: string;
+};
 export {};

package/lib/components/FilterBar/components/buttons/select-button/SelectButton.d.ts

@@ -5,6 +5,8 @@ type Props = {
     onClick: () => void;
     description: string;
     active?: boolean;
+    ariaExpanded?: boolean;
+    ariaControls?: string;
 };
-export declare const SelectButton: ({ active, label, onClick, description, }: Props) => React.JSX.Element;
+export declare const SelectButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/lib/components/FilterBar/components/cards/image-card/ImageCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './ImageCard.css';
+type Props = {
+    title?: string;
+    description?: string;
+    imageUrl?: string;
+    isSelected: boolean;
+    onClick?: () => void;
+};
+export declare const ImageCard: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/FilterBar/components/cards/index.d.ts

@@ -0,0 +1 @@
+export { ImageCard } from './image-card/ImageCard';

package/lib/components/FilterBar/components/guests/GuestCount/GuestCount.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { GuestsCountPropsType } from '../../../FilterBarTypes';
 import './GuestCount.css';
-export default function GuestCount({ label, sortOrder, id, updateGuestsCount, count, minVal, }: GuestsCountPropsType): React.JSX.Element;
+export declare const GuestCount: FC<GuestsCountPropsType>;

package/lib/components/FilterBar/components/guests/Guests.d.ts

@@ -5,6 +5,7 @@ type Props = {
     ageCategories: AgeCategoryType[];
     updateGuestsCount: (arg1: string, arg2: number) => void;
     ageCategoryCounts: AgeCategoryCount;
+    autoFocus?: boolean;
 };
 export declare const Guests: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/FilterBar/components/index.d.ts

@@ -2,3 +2,4 @@ export { CloseButton, SelectButton, SubmitButton, TabButton } from './buttons';
 export { Guests } from './guests/Guests';
 export { Divider } from './divider/Divider';
 export { Categories } from './categories/Categories';
+export { Locations } from './locations/Locations';

package/lib/components/FilterBar/components/locations/Locations.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './Locations.css';
+import { Location } from '../../FilterBarTypes';
+type Props = {
+    locations?: Location[];
+    language?: string;
+    selectedLocations: Location[];
+    setSelectedLocations: (locations: Location[]) => void;
+    autoFocus?: boolean;
+    multiSelect?: boolean;
+    onClose?: () => void;
+};
+export declare const Locations: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/FilterBar/hooks/useFilterBar.d.ts

@@ -1,20 +1,24 @@
-/// <reference types="react" />
 import { DateRange } from 'react-day-picker';
-import { AgeCategoryCount, AgeCategoryType, Filters, Tab } from '../FilterBarTypes';
+import { AgeCategoryCount, AgeCategoryType, Filters, Tab, Location } from '../FilterBarTypes';
 type Props = {
     redirectUrl?: string;
     ageCategories?: AgeCategoryType[];
     onSubmit?: ((val: Filters) => void) | null;
     tabs?: Tab[];
-    locationIds?: string[];
+    locations?: {
+        multiSelect: boolean;
+        data: Location[];
+    };
 };
-export declare const useFilterBar: ({ redirectUrl, ageCategories, onSubmit, tabs, locationIds, }: Props) => {
+export declare const useFilterBar: ({ redirectUrl, ageCategories, onSubmit, tabs, locations, }: Props) => {
     selectedFilter: string | boolean;
     ageCategoryCounts: AgeCategoryCount;
     categories: number;
     calendarRange: DateRange | undefined;
     selectedPath: string;
     innerLoading: boolean;
+    selectedLocations: Location[];
+    setSelectedLocations: import("react").Dispatch<import("react").SetStateAction<Location[]>>;
     setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
     setSelectedFilter: import("react").Dispatch<import("react").SetStateAction<string | boolean>>;
     setAgeCategoryCounts: import("react").Dispatch<import("react").SetStateAction<AgeCategoryCount>>;

package/lib/components/FilterBar/hooks/useScrollInToView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     selectedFilter: string | boolean;
 };

package/lib/components/FilterBar/utils/index.d.ts

@@ -1 +1,2 @@
 export { parseGuests } from './parseGuests';
+export { parseLocations } from './parseLocations';

package/lib/components/FilterBar/utils/parseLocations.d.ts

@@ -0,0 +1,9 @@
+import { Location } from '../FilterBarTypes';
+type Props = {
+    selectedLocations: Location[];
+    language: string;
+    locationsPlaceholder: string;
+    locationsSelectedLabel?: string;
+};
+export declare const parseLocations: ({ selectedLocations, language, locationsPlaceholder, locationsSelectedLabel, }: Props) => string;
+export {};

package/lib/components/FilterCalendar/components/Footer.d.ts

@@ -3,8 +3,8 @@ import { DateRange } from 'react-day-picker';
 import { Palette } from '../../../themes/useTheme';
 export declare const Footer: ({ calendarHasError, calendarRange, handleClearDates, language, palette, }: {
     calendarHasError: boolean;
-    calendarRange?: DateRange | undefined;
+    calendarRange?: DateRange;
     handleClearDates: () => void;
-    language?: string | undefined;
+    language?: string;
     palette: Palette;
 }) => React.JSX.Element;

package/lib/components/FilterCalendar/hooks/useFilterCalendar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DateRange, Matcher } from 'react-day-picker';
 import { DisableCalendarDates, RangeContext } from 'src/core/components/calendar/CalendarTypes';
 type Props = {

package/lib/core/components/calendar/CalendarTypes.d.ts

@@ -43,4 +43,5 @@ export type CalendarTypes = {
     setUpdatedForSubmit?: (arg: boolean) => void;
     rangeContext?: RangeContext;
     calendarHasError?: boolean;
+    autoFocus?: boolean;
 };

package/lib/core/components/calendar/utils/disabledDatesByPage.d.ts

@@ -1,7 +1,7 @@
 import { DisableCalendarDates } from '../CalendarTypes';
 export declare const disabledDatesByPage: ({ newDisableCalendarDates, selectedPath, today, }: {
-    newDisableCalendarDates?: DisableCalendarDates | undefined;
-    selectedPath?: string | undefined;
+    newDisableCalendarDates?: DisableCalendarDates;
+    selectedPath?: string;
     today: Date;
 }) => {
     from: Date;

package/lib/core/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useAwaitRender } from './useAwaitRender';
 export { useUpdateTranslations } from './useUpdateTranslations';
 export { useCloseFilterSection } from './useCloseFilterSection';
+export { useAutoFocus } from './useAutoFocus';

package/lib/core/hooks/useAutoFocus.d.ts

@@ -0,0 +1 @@
+export declare const useAutoFocus: <T extends HTMLElement>(autoFocus?: boolean) => import("react").RefObject<T>;

package/lib/core/hooks/useCloseFilterSection.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     handleSelectedFilter: (arg: boolean) => void;
 };

package/lib/index.d.ts

@@ -77,6 +77,7 @@ type CalendarTypes = {
     setUpdatedForSubmit?: (arg: boolean) => void;
     rangeContext?: RangeContext;
     calendarHasError?: boolean;
+    autoFocus?: boolean;
 };
 
 type FilterBarTypes = {
@@ -90,7 +91,10 @@ type FilterBarTypes = {
     mode?: string;
     tabs?: Tab[];
     outerLoading?: boolean;
-    locationIds?: string[];
+    locations?: {
+        multiSelect: boolean;
+        data: Location[];
+    };
 };
 type AgeCategoryType = {
     id: string;
@@ -112,8 +116,14 @@ type Tab = {
     order: number;
     label?: Translations;
 };
+type Location = {
+    id: string;
+    label: Translations;
+    description?: Translations;
+    imageUrl?: string;
+};
 
-declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locationIds, }: FilterBarTypes): React.JSX.Element;
+declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): React.JSX.Element;
 
 interface FilterCalendarTypes extends Partial<CalendarTypes> {
     palette: Palette;