willba-component-library 0.3.12 → 0.3.14

package/README.md

@@ -66,19 +66,13 @@ function App() {
       ]}
       tabs={[
         {
-          label: {
-            en: 'Rooms',
-            fi: 'Hilat',
-          },
+          label: 'Rooms',
           path: '/rooms',
           default: true,
           order: 2,
         },
         {
-          label: {
-            en: 'Events',
-            fi: 'Tapahtumat',
-          },
+          label: 'Events',
           path: '/events',
           default: false,
           order: 1,
@@ -90,14 +84,8 @@ function App() {
         data: [
           {
             id: 1,
-            label: [
-              { content: 'Helsinki', locale: 'en' },
-              { content: 'Helsinki', locale: 'fi' },
-            ],
-            description: [
-              { content: 'Capital of Finland', locale: 'en' },
-              { content: 'Suomen pääkaupunki', locale: 'fi' },
-            ],
+            label: 'Helsinki',
+            description: 'Capital of Finland',
             imageUrl: 'https://example.com/helsinki.jpg',
           },
         ],
@@ -182,5 +170,5 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 | mode                 | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | 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' }}]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| locations            | `{}`       | Configures location filter. Format: `{ multiSelect: boolean, disabled?: boolean, data: Location[] }` where Location = `{ id: number, label: LocaleTranslation, description?: LocaleTranslation, imageUrl?: string }` and LocaleTranslation = `Array<{ content: string, locale: string }>`. `multiSelect` enables multi-selection, `disabled` disables the filter, `description` shows under title, `imageUrl` displays location image. Example: `{ multiSelect: false, disabled: false, data: [{ id: 1, label: [{ content: 'Helsinki', locale: 'en' }, { content: 'Helsinki', locale: 'fi' }], description: [{ content: 'Capital', locale: 'en' }, { content: 'Pääkaupunki', locale: 'fi' }], imageUrl: 'https://example.com/helsinki.jpg' }] }` |
+| tabs                 | `[{}]`     | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label?: string}]`. The label should be pre-localized. For example: `[{ path: '/rooms', default: true, order: 2, label: 'Rooms' }]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| locations            | `{}`       | Configures location filter. Format: `{ multiSelect: boolean, disabled?: boolean, data: Location[] }` where Location = `{ id: number, label: string, description?: string \| null, imageUrl?: string \| null }`. The label and description should be pre-localized. `multiSelect` enables multi-selection, `disabled` disables the filter, `description` shows under title, `imageUrl` displays location image. Example: `{ multiSelect: false, disabled: false, data: [{ id: 1, label: 'Helsinki', description: 'Capital of Finland', imageUrl: 'https://example.com/helsinki.jpg' }] }`                                                                                                                                                          |

package/lib/assets/IconsSvg.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 type Icon = 'spinner' | 'warning';
 type Props = {
     fill?: string;
     size?: number;
     icon: Icon;
 };
-export declare const IconsSvg: ({ fill, size, icon }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const IconsSvg: ({ fill, size, icon }: Props) => React.JSX.Element | null;
 export {};

package/lib/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
 import './button.css';
 export interface ButtonProps {
     /**
@@ -25,5 +25,5 @@ export interface ButtonProps {
 /**
  * Primary UI component for user interaction
  */
-declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => React.JSX.Element;
 export default Button;

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

@@ -1,4 +1,5 @@
+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, locations, }: FilterBarTypes): import("react/jsx-runtime").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/components/buttons/select-button/SelectButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import './SelectButton.css';
 type Props = {
     label: string;
@@ -8,5 +9,5 @@ type Props = {
     ariaExpanded?: boolean;
     ariaControls?: string;
 };
-export declare const SelectButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SelectButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/lib/components/FilterBar/components/buttons/tab-button/TabButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import './TabButton.css';
 type Props = {
     onClick?: () => void;
@@ -5,5 +6,5 @@ type Props = {
     active?: boolean;
     mode?: string;
 };
-export declare const TabButton: ({ onClick, label, active, mode }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const TabButton: ({ onClick, label, active, mode }: Props) => React.JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import './ImageCard.css';
 type Props = {
     title?: string;
@@ -6,5 +7,5 @@ type Props = {
     isSelected: boolean;
     onClick?: () => void;
 };
-export declare const ImageCard: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ImageCard: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,7 +1,8 @@
+import React from 'react';
 import './Categories.css';
 type Props = {
     categories: any;
     setCategories: any;
 };
-export declare const Categories: ({ categories, setCategories }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Categories: ({ categories, setCategories }: Props) => React.JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import './FilterSectionHeader.css';
 type Props = {
     title: string;
     action?: ReactNode;
 };
-export declare const FilterSectionHeader: ({ title, action }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterSectionHeader: ({ title, action }: Props) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { DateRange } from 'react-day-picker';
 import { DisableCalendarDates } from '../../../../core/components/calendar/CalendarTypes';
 import './Dates.css';
@@ -13,5 +13,5 @@ type Props = {
     language?: string;
     filtersRef?: RefObject<HTMLDivElement>;
 };
-export declare const Dates: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Dates: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,2 +1,3 @@
+import React from 'react';
 import './Divider.css';
-export declare const Divider: () => import("react/jsx-runtime").JSX.Element;
+export declare const Divider: () => React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { AgeCategoryCount, AgeCategoryType } from '../../FilterBarTypes';
 import './Guests.css';
 type Props = {
@@ -7,5 +8,5 @@ type Props = {
     autoFocus?: boolean;
     onClose?: () => void;
 };
-export declare const Guests: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Guests: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import './Locations.css';
 import { Location } from '../../FilterBarTypes';
 type Props = {
@@ -9,5 +10,5 @@ type Props = {
     multiSelect?: boolean;
     onClose?: () => void;
 };
-export declare const Locations: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Locations: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,4 +1,5 @@
+import React from 'react';
 import '../../themes/Default.css';
 import { FilterCalendarTypes } from './FilterCalendarTypes';
 import './FilterCalendar.css';
-export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): import("react/jsx-runtime").JSX.Element;
+export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DateRange } from 'react-day-picker';
 import { Palette } from '../../../themes/useTheme';
 export declare const Footer: ({ calendarHasError, calendarRange, handleClearDates, language, palette, }: {
@@ -6,4 +7,4 @@ export declare const Footer: ({ calendarHasError, calendarRange, handleClearDate
     handleClearDates: () => void;
     language?: string;
     palette: Palette;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/lib/core/components/buttons/close-button/CloseButton.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import './CloseButton.css';
 interface CloseButtonPropsType {
     handleClose: () => void;
 }
-export declare const CloseButton: ({ handleClose }: CloseButtonPropsType) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseButton: ({ handleClose }: CloseButtonPropsType) => React.JSX.Element;
 export {};

package/lib/core/components/buttons/submit-button/SubmitButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ReactNode } from 'react';
 import './SubmitButton.css';
 type SubmitButtonVariant = 'text' | 'full';
@@ -9,5 +10,5 @@ type Props = {
     isLoading?: boolean;
     variant?: SubmitButtonVariant;
 };
-export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, variant, }: Props) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
+import React from 'react';
 import { CalendarTypes } from './CalendarTypes';
 import 'react-day-picker/dist/style.css';
 import './Calendar.css';
-export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarTypes & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarTypes & React.RefAttributes<HTMLDivElement>>;

package/lib/index.d.ts

@@ -1,5 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
 import { DateRange, Matcher } from 'react-day-picker';
 
 interface ButtonProps {
@@ -27,7 +26,7 @@ interface ButtonProps {
 /**
  * Primary UI component for user interaction
  */
-declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => React.JSX.Element;
 
 type Palette = {
     primary: string;
@@ -121,7 +120,7 @@ type Location = {
     imageUrl?: string | null;
 };
 
-declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): react_jsx_runtime.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;
@@ -130,6 +129,6 @@ interface FilterCalendarTypes extends Partial<CalendarTypes> {
     setToggleCalendar: (val: boolean) => void;
 }
 
-declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): react_jsx_runtime.JSX.Element;
+declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;
 
 export { Button, FilterBar, FilterBarTypes, FilterCalendar, FilterCalendarTypes };