willba-component-library 0.3.11 → 0.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "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: 'react-jsx',
       }),
       postcss({
         extensions: ['.css'],

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

@@ -1,34 +1,34 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import Button from "./Button";
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Button from './Button'
 
 // Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
 const meta: Meta<typeof Button> = {
-  title: "Components/Button",
+  title: 'Components/Button',
   component: Button,
   argTypes: {
-    textColor: { control: "color" },
-    onClick: { action: "clicked" },
+    textColor: { control: 'color' },
+    onClick: { action: 'clicked' },
   },
-};
+}
 
-export default meta;
+export default meta
 
 // The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
-type Story = StoryObj<typeof Button>;
+type Story = StoryObj<typeof Button>
 
 export const Primary: Story = {
   args: {
-    label: "Primary 😃",
-    size: "large",
-    type: "primary",
+    label: 'Primary 😃',
+    size: 'large',
+    type: 'primary',
   },
-};
+}
 
 export const Secondary: Story = {
   args: {
     ...Primary.args,
-    type: "secondary",
-    label: "Secondary 😇",
+    type: 'secondary',
+    label: 'Secondary 😇',
   },
-};
+}

package/src/components/Button/Button.tsx

@@ -1,47 +1,47 @@
-import React, { useState } from "react";
-import classNames from "classnames";
-import "./button.css";
+import React, { useState, MouseEvent } from 'react'
+import classNames from 'classnames'
+import './button.css'
 
 export interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
-  type?: "primary" | "secondary";
+  type?: 'primary' | 'secondary'
   /**
    * What background color to use
    */
-  textColor?: string;
+  textColor?: 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?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
 }
 
 /**
  * Primary UI component for user interaction
  */
 const Button = ({
-  type = "primary",
+  type = 'primary',
   textColor,
-  size = "medium",
+  size = 'medium',
   onClick,
   label,
 }: ButtonProps) => {
-  const [theState, setTheState] = useState(4);
+  const [theState, setTheState] = useState(4)
 
   return (
     <button
       type="button"
       className={classNames(
-        "storybook-button",
+        'storybook-button',
         `storybook-button--${size}`,
         `storybook-button--${type}`
       )}
@@ -50,7 +50,7 @@ const Button = ({
     >
       {`${label} ${theState}`}
     </button>
-  );
-};
+  )
+}
 
-export default Button;
+export default Button

package/src/components/FilterBar/FilterBar.tsx

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

package/src/components/FilterBar/FilterBarTypes.ts

@@ -66,6 +66,6 @@ export type Locations = {
 export type Location = {
   id: number
   label: string
-  description?: string
+  description?: string | null
   imageUrl?: string | null
 }

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

@@ -13,7 +13,18 @@ type Props = {
 }
 
 export const SelectButton = forwardRef<HTMLButtonElement, Props>(
-  ({ active, label, onClick, description, disabled, ariaExpanded, ariaControls }, ref) => {
+  (
+    {
+      active,
+      label,
+      onClick,
+      description,
+      disabled,
+      ariaExpanded,
+      ariaControls,
+    },
+    ref
+  ) => {
     return (
       <button
         ref={ref}

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

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

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

@@ -1,16 +1,15 @@
-import React from 'react'
+import React, { RefObject, forwardRef } from 'react'
 
 import { DateRange } from 'react-day-picker'
 import { Calendar } from '../../../../core/components'
 import { DisableCalendarDates } from '../../../../core/components/calendar/CalendarTypes'
 import { CloseButton } from '../buttons'
 import { FilterSectionHeader } from '../common/FilterSectionHeader'
-import { forwardRef } from 'react'
 
 import './Dates.css'
 
 type Props = {
-  ref: React.RefObject<HTMLDivElement>
+  ref: RefObject<HTMLDivElement>
   onClose?: () => void
   autoFocus?: boolean
   calendarRange: DateRange | undefined
@@ -18,7 +17,7 @@ type Props = {
   disableCalendarDates?: DisableCalendarDates
   selectedPath?: string
   language?: string
-  filtersRef?: React.RefObject<HTMLDivElement>
+  filtersRef?: RefObject<HTMLDivElement>
 }
 
 export const Dates = forwardRef<HTMLDivElement, Props>(

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

@@ -18,7 +18,16 @@ type Props = {
 }
 
 export const Guests = forwardRef<HTMLDivElement, Props>(
-  ({ ageCategories, updateGuestsCount, ageCategoryCounts, autoFocus, onClose }: Props, ref) => {
+  (
+    {
+      ageCategories,
+      updateGuestsCount,
+      ageCategoryCounts,
+      autoFocus,
+      onClose,
+    }: Props,
+    ref
+  ) => {
     const { t } = useTranslation('filterBar')
     const containerRef = useAutoFocus<HTMLDivElement>(autoFocus)
 

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.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/core/components/buttons/submit-button/SubmitButton.tsx

@@ -1,5 +1,6 @@
+import React from 'react'
 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

@@ -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,28 @@
-import React from 'react';
-import './button.css';
+import React from 'react'
+
+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 +35,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,33 @@
-import React from 'react';
-
-import { Button } from './Button';
-import './header.css';
+import React from 'react'
+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 +56,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 React, { 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>
-  );
-};
+  )
+}