willba-component-library 0.3.10 → 0.3.12

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

@@ -0,0 +1,106 @@
+import { CSSProperties, RefObject } from 'react'
+import { FilterSections } from '../FilterBarTypes'
+
+type CalculateDropdownPositionParams = {
+  filterSection: FilterSections
+  headerRef: RefObject<HTMLDivElement>
+  locationsButtonRef: RefObject<HTMLButtonElement>
+  datesButtonRef: RefObject<HTMLButtonElement>
+  guestsButtonRef: RefObject<HTMLButtonElement>
+  isMobile: boolean
+}
+
+export const calculateDropdownPosition = ({
+  filterSection,
+  headerRef,
+  locationsButtonRef,
+  datesButtonRef,
+  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 {}
+  }
+
+  if (!headerRef.current) return {}
+
+  const containerRect = headerRef.current.getBoundingClientRect()
+  const containerLeft = 0
+
+  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
+        return {
+          left: relativeLeft,
+          right: 'auto',
+          width: 'auto',
+        }
+      }
+      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
+        const availableWidth = containerRect.width - relativeLeft
+        const calendarMinWidth = 650
+
+        if (availableWidth < calendarMinWidth) {
+          // Not enough space, align to the right edge
+          return {
+            left: 'auto',
+            right: containerLeft,
+            width: 'auto',
+            maxWidth: `${containerRect.width}px`,
+          }
+        } else {
+          // Enough space, start from dates button
+          return {
+            left: relativeLeft,
+            right: 'auto',
+            width: 'auto',
+          }
+        }
+      }
+      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
+        const availableWidth = containerRect.width - relativeLeft
+        const dropdownMinWidth = 350
+
+        if (availableWidth < dropdownMinWidth) {
+          // Not enough space, align to the right
+          return {
+            left: 'auto',
+            right: containerLeft,
+            width: 'auto',
+            maxWidth: `${containerRect.width}px`,
+          }
+        } else {
+          // Enough space, start from button
+          return {
+            left: relativeLeft,
+            right: 'auto',
+            width: 'auto',
+          }
+        }
+      }
+      break
+
+    default:
+      return {}
+  }
+
+  return {}
+}

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

@@ -1,3 +1,3 @@
 export { parseGuests } from './parseGuests'
 export { parseLocations } from './parseLocations'
-export { getLocalizedContent } from './getLocalizedContent'
+export { calculateDropdownPosition } from './calculateDropdownPosition'

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

@@ -1,16 +1,14 @@
 import { Location } from '../FilterBarTypes'
-import { getLocalizedContent } from './getLocalizedContent'
 
 type Props = {
   selectedLocations: Location[]
-  language: string
   locationsPlaceholder: string
   locationsSelectedLabel?: string
 }
 
 export const parseLocations = ({
   selectedLocations,
-  language,
+
   locationsPlaceholder,
   locationsSelectedLabel = 'locations',
 }: Props) => {
@@ -19,10 +17,8 @@ export const parseLocations = ({
   }
 
   if (selectedLocations.length === 1) {
-    const translation = getLocalizedContent({
-      contents: selectedLocations[0].label,
-      locale: language,
-    })
+    const translation = selectedLocations[0].label
+
     if (!translation) {
       return locationsPlaceholder
     }

package/src/components/FilterCalendar/FilterCalendar.stories.tsx

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

package/src/components/FilterCalendar/FilterCalendar.tsx

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

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

@@ -1,4 +1,3 @@
-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,4 +1,3 @@
-import React from 'react'
 import { IoIosCloseCircleOutline } from 'react-icons/io'
 
 import './CloseButton.css'

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

@@ -1,5 +1,5 @@
 import { FaSpinner } from 'react-icons/fa'
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 
 import './SubmitButton.css'
 

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 import { addDays, startOfDay } from 'date-fns'
 import { fi, enUS } from 'date-fns/locale'
 import { useTranslation } from 'react-i18next'
@@ -147,8 +147,8 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
     const base = disabledDatesByPage.length
       ? disabledDatesByPage
       : disabledDates?.length
-      ? disabledDates
-      : newDisableCalendarDates?.disabledDates || []
+        ? disabledDates
+        : newDisableCalendarDates?.disabledDates || []
 
     const disabled = disabledDatesByPage.length
       ? base
@@ -162,7 +162,10 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
 
     return (
       <div className="will-filter-bar-calendar" ref={ref}>
-        <div className="will-calendar-filter-container" ref={calendarContainerRef}>
+        <div
+          className="will-calendar-filter-container"
+          ref={calendarContainerRef}
+        >
           <DayPicker
             key={updateCalendarDefaultMonth}
             id="will-calendar"

package/stories/Button.tsx

@@ -1,27 +1,26 @@
-import React from 'react';
-import './button.css';
+import './button.css'
 
 interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
-  primary?: boolean;
+  primary?: boolean
   /**
    * What background color to use
    */
-  backgroundColor?: string;
+  backgroundColor?: string
   /**
    * How large should the button be?
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large'
   /**
    * Button contents
    */
-  label: string;
+  label: string
   /**
    * Optional click handler
    */
-  onClick?: () => void;
+  onClick?: () => void
 }
 
 /**
@@ -34,15 +33,19 @@ export const Button = ({
   label,
   ...props
 }: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary'
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={['storybook-button', `storybook-button--${size}`, mode].join(
+        ' '
+      )}
       style={{ backgroundColor }}
       {...props}
     >
       {label}
     </button>
-  );
-};
+  )
+}

package/stories/Header.tsx

@@ -1,24 +1,32 @@
-import React from 'react';
-
-import { Button } from './Button';
-import './header.css';
+import { Button } from './Button'
+import './header.css'
 
 type User = {
-  name: string;
-};
+  name: string
+}
 
 interface HeaderProps {
-  user?: User;
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
+  user?: User
+  onLogin: () => void
+  onLogout: () => void
+  onCreateAccount: () => void
 }
 
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+export const Header = ({
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: HeaderProps) => (
   <header>
     <div className="storybook-header">
       <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <g fill="none" fillRule="evenodd">
             <path
               d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
@@ -47,10 +55,15 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
         ) : (
           <>
             <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+            <Button
+              primary
+              size="small"
+              onClick={onCreateAccount}
+              label="Sign up"
+            />
           </>
         )}
       </div>
     </div>
   </header>
-);
+)

package/stories/Page.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import { FC, useState } from 'react'
 
-import { Header } from './Header';
-import './page.css';
+import { Header } from './Header'
+import './page.css'
 
 type User = {
-  name: string;
-};
+  name: string
+}
 
-export const Page: React.FC = () => {
-  const [user, setUser] = React.useState<User>();
+export const Page: FC = () => {
+  const [user, setUser] = useState<User>()
 
   return (
     <article>
@@ -23,40 +23,58 @@ export const Page: React.FC = () => {
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://componentdriven.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <strong>component-driven</strong>
           </a>{' '}
           process starting with atomic components and ending with pages.
         </p>
         <p>
-          Render pages with mock data. This makes it easy to build and review page states without
-          needing to navigate to them in your app. Here are some handy patterns for managing page
-          data in Storybook:
+          Render pages with mock data. This makes it easy to build and review
+          page states without needing to navigate to them in your app. Here are
+          some handy patterns for managing page data in Storybook:
         </p>
         <ul>
           <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the
-            "args" of child component stories
+            Use a higher-level connected component. Storybook helps you compose
+            such data from the "args" of child component stories
           </li>
           <li>
-            Assemble data in the page component from your services. You can mock these services out
-            using Storybook.
+            Assemble data in the page component from your services. You can mock
+            these services out using Storybook.
           </li>
         </ul>
         <p>
           Get a guided tutorial on component-driven development at{' '}
-          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://storybook.js.org/tutorials/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             Storybook tutorials
           </a>
           . Read more in the{' '}
-          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://storybook.js.org/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             docs
           </a>
           .
         </p>
         <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+          <span className="tip">Tip</span> Adjust the width of the canvas with
+          the{' '}
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 12 12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <g fill="none" fillRule="evenodd">
               <path
                 d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
@@ -69,5 +87,5 @@ export const Page: React.FC = () => {
         </div>
       </section>
     </article>
-  );
-};
+  )
+}

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

@@ -1,21 +0,0 @@
-import { LocaleTranslation } from '../FilterBarTypes'
-
-type Props = {
-  contents: LocaleTranslation
-  locale: string
-  fallbackLocale?: string
-}
-
-export const getLocalizedContent = ({
-  contents,
-  locale,
-  fallbackLocale = 'en',
-}: Props): string | undefined => {
-  const preferred = contents.find((content) => content.locale === locale)
-  if (preferred) return preferred.content
-
-  const fallback = contents.find((content) => content.locale === fallbackLocale)
-  if (fallback) return fallback.content
-
-  return contents[0]?.content
-}