willba-component-library 0.3.12 → 0.3.14

package/package.json

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

package/rollup.config.mjs

@@ -46,7 +46,7 @@ export default [
       resolve(),
       commonjs(),
       typescript({
-        jsx: 'react-jsx',
+        jsx: 'react',
       }),
       postcss({
         extensions: ['.css'],

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'