willba-component-library 0.3.12 → 0.3.13

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "A custom UI component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/assets/IconsSvg.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 type Icon = 'spinner' | 'warning'
 
 type Props = {

package/src/components/Button/Button.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import Button from './Button'
 

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { useState, MouseEvent } from 'react'
+import React, { useState, MouseEvent } from 'react'
 import classNames from 'classnames'
 import './button.css'
 

package/src/components/FilterBar/FilterBar.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 
 import FilterBar from './FilterBar'

package/src/components/FilterBar/FilterBar.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   CSSProperties,
   MutableRefObject,
   useEffect,

package/src/components/FilterBar/components/buttons/select-button/SelectButton.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 import './SelectButton.css'
 

package/src/components/FilterBar/components/buttons/tab-button/TabButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import './TabButton.css'
 
 type Props = {

package/src/components/FilterBar/components/cards/image-card/ImageCard.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 import './ImageCard.css'
 

package/src/components/FilterBar/components/categories/Categories.tsx

@@ -1,5 +1,4 @@
-import { useState } from 'react'
-
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import './Categories.css'

package/src/components/FilterBar/components/common/FilterSectionHeader.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 
 import './FilterSectionHeader.css'
 

package/src/components/FilterBar/components/dates/Dates.tsx

@@ -1,4 +1,4 @@
-import { RefObject, forwardRef } from 'react'
+import React, { RefObject, forwardRef } from 'react'
 
 import { DateRange } from 'react-day-picker'
 import { Calendar } from '../../../../core/components'

package/src/components/FilterBar/components/divider/Divider.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import './Divider.css'
 
 export const Divider = () => {

package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react'
+import React, { FC, useEffect } from 'react'
 
 import { GuestsCountPropsType } from '../../../FilterBarTypes'
 

package/src/components/FilterBar/components/guests/Guests.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useAutoFocus } from '../../../../core/hooks'

package/src/components/FilterBar/components/locations/Locations.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import './Locations.css'

package/src/components/FilterBar/utils/calculateDropdownPosition.tsx

@@ -18,8 +18,6 @@ export const calculateDropdownPosition = ({
   guestsButtonRef,
   isMobile,
 }: CalculateDropdownPositionParams): CSSProperties => {
-  // On mobile, don't apply any positioning - let CSS handle it naturally
-  // Dropdowns will start from leftmost point with position: relative
   if (isMobile) {
     return {}
   }
@@ -31,7 +29,6 @@ export const calculateDropdownPosition = ({
 
   switch (filterSection) {
     case FilterSections.LOCATIONS:
-      // Locations: Start from beginning, hug content
       if (locationsButtonRef.current) {
         const buttonRect = locationsButtonRef.current.getBoundingClientRect()
         const relativeLeft = buttonRect.left - containerRect.left
@@ -44,8 +41,6 @@ export const calculateDropdownPosition = ({
       break
 
     case FilterSections.CALENDAR:
-      // Calendar: Two months side-by-side, needs ~650-700px
-      // Start from dates button, but push left if not enough space
       if (datesButtonRef.current) {
         const buttonRect = datesButtonRef.current.getBoundingClientRect()
         const relativeLeft = buttonRect.left - containerRect.left
@@ -53,7 +48,6 @@ export const calculateDropdownPosition = ({
         const calendarMinWidth = 650
 
         if (availableWidth < calendarMinWidth) {
-          // Not enough space, align to the right edge
           return {
             left: 'auto',
             right: containerLeft,
@@ -61,7 +55,6 @@ export const calculateDropdownPosition = ({
             maxWidth: `${containerRect.width}px`,
           }
         } else {
-          // Enough space, start from dates button
           return {
             left: relativeLeft,
             right: 'auto',
@@ -72,7 +65,6 @@ export const calculateDropdownPosition = ({
       break
 
     case FilterSections.GUESTS:
-      // Guests: Start from guests button, push left if not enough space
       if (guestsButtonRef.current) {
         const buttonRect = guestsButtonRef.current.getBoundingClientRect()
         const relativeLeft = buttonRect.left - containerRect.left
@@ -80,7 +72,6 @@ export const calculateDropdownPosition = ({
         const dropdownMinWidth = 350
 
         if (availableWidth < dropdownMinWidth) {
-          // Not enough space, align to the right
           return {
             left: 'auto',
             right: containerLeft,
@@ -88,7 +79,6 @@ export const calculateDropdownPosition = ({
             maxWidth: `${containerRect.width}px`,
           }
         } else {
-          // Enough space, start from button
           return {
             left: relativeLeft,
             right: 'auto',

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import useTheme from '../../themes/useTheme'

package/src/components/FilterCalendar/components/Footer.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useMediaQuery } from 'react-responsive'
 import { DateRange } from 'react-day-picker'

package/src/core/components/buttons/close-button/CloseButton.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { IoIosCloseCircleOutline } from 'react-icons/io'
 
 import './CloseButton.css'

package/src/core/components/buttons/submit-button/SubmitButton.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { FaSpinner } from 'react-icons/fa'
 import { ReactNode } from 'react'
 

package/src/core/components/calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import { addDays, startOfDay } from 'date-fns'
 import { fi, enUS } from 'date-fns/locale'
 import { useTranslation } from 'react-i18next'

package/stories/Button.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import './button.css'
 
 interface ButtonProps {

package/stories/Header.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { Button } from './Button'
 import './header.css'
 

package/stories/Page.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import React, { FC, useState } from 'react'
 
 import { Header } from './Header'
 import './page.css'