goobs-frontend 0.122.0 → 0.122.2

package/README.md

@@ -53,6 +53,7 @@ goobs-frontend provides 100+ fully-featured React components organized into logi
 ## Core Component Categories
 
 ### 🎨 Layout & Structure
+
 - **Grid** - Responsive grid system with flexible row/column configurations
 - **Container** - Responsive content containers with consistent spacing
 - **Stack** - One-dimensional layout component for arranging items
@@ -60,19 +61,23 @@ goobs-frontend provides 100+ fully-featured React components organized into logi
 - **Divider** - Visual separators for content organization
 
 ### 📝 Form Components
+
 **Text Inputs**
+
 - **TextField** - Versatile text input with advanced styling and label positioning
 - **PasswordField** - Secure password input with show/hide toggle functionality
 - **SearchField** - Search input with integrated search icons and styling
 - **ComplexTextEditor** - Multi-mode editor (simple, markdown, rich text) with integrated toolbar
 
 **Specialized Inputs**
+
 - **PhoneNumberField** - Auto-formatting phone number input (+1-xxx-xxx-xxxx)
 - **USDField** - Currency input with dollar formatting and validation
 - **PercentageField** - Percentage input with % symbol and range validation
 - **ConfirmationCodeInput** - OTP-style multi-digit input with auto-focus progression
 
 **Number Inputs**
+
 - **IncrementNumberField** - Number input with built-in increment/decrement controls
 - **AccountNumberField** - Bank account number input with validation
 - **RoutingNumberField** - Bank routing number input with format validation
@@ -80,11 +85,13 @@ goobs-frontend provides 100+ fully-featured React components organized into logi
 - **CVVField** - Secure CVV input for payment forms
 
 **Date & Time**
+
 - **DateField** - Date picker with calendar popup and keyboard navigation
 - **DateRangeField** - Start/end date selection with range validation
 - **TimeRangeField** - Time range selector with 12/24 hour support
 
 **Selection Components**
+
 - **Dropdown** - Customizable select component with advanced styling
 - **MultiSelectChip** - Multi-selection dropdown with chip display
 - **SearchableDropdown** - Real-time filtering dropdown with autocomplete
@@ -93,6 +100,7 @@ goobs-frontend provides 100+ fully-featured React components organized into logi
 - **Switch** - Toggle switch with smooth animations
 
 **IPAM & Network Fields**
+
 - **IPAddressField** - IP address input with validation
 - **CIDRField** - CIDR notation input with subnet validation
 - **SubnetField** - Subnet configuration input
@@ -100,6 +108,7 @@ goobs-frontend provides 100+ fully-featured React components organized into logi
 - **MACAddressField** - MAC address input with auto-formatting
 
 ### 🗂️ Data Display
+
 - **DataGrid** - Advanced data table with sorting, filtering, pagination, and row management
 - **Table** - Lightweight table component for simple data display
 - **Card** - Versatile card container with multiple variants (product, pricing, task, inventory)
@@ -108,6 +117,7 @@ goobs-frontend provides 100+ fully-featured React components organized into logi
 - **ProjectBoard** - Kanban-style board with drag-and-drop task management
 
 ### 🧭 Navigation
+
 - **Tabs** - Horizontal tab navigation with route integration
 - **Breadcrumb** - Breadcrumb navigation with custom separators
 - **Stepper** - Step-by-step process indicator with customizable states
@@ -115,11 +125,13 @@ goobs-frontend provides 100+ fully-featured React components organized into logi
 - **Pagination** - Page navigation with customizable page size options
 
 ### 🎯 Action Components
+
 - **Button** - Highly customizable button with icon support and flexible positioning
 - **IconButton** - Icon-only buttons with hover states and accessibility
 - **ToggleButton** - Toggle button with active/inactive states
 
 ### 💬 Feedback & Overlays
+
 - **Alert** - Contextual alerts with multiple severity levels
 - **Dialog** - Modal dialogs for complex interactions
 - **Snackbar** - Toast notifications with action buttons
@@ -127,6 +139,7 @@ goobs-frontend provides 100+ fully-featured React components organized into logi
 - **Popover** - Positioned popup containers
 
 ### 🔧 Utility Components
+
 - **Accordion** - Collapsible content sections with smooth animations
 - **Badge** - Notification badges with custom positioning
 - **Chip** - Compact information chips with delete functionality
@@ -137,19 +150,24 @@ goobs-frontend provides 100+ fully-featured React components organized into logi
 - **TransferList** - Dual-list component for moving items between collections
 
 ### 🎨 Design & Animation
+
 - **Typography** - Text component with multiple font families (Arapey, Inter, Merriweather)
 - **Fade**, **Slide**, **Zoom** - Smooth transition components for enhanced UX
 
 ### 🏗️ Advanced Components
+
 - **Toolbar** - Flexible toolbar with multiple sections and responsive behavior
 - **Content** - Dynamic content renderer supporting multiple content types
 - **FormDataGrid** - Data grid with integrated form validation
 
 ### 📱 Mobile-First Design
+
 All components are built with mobile-first responsive design principles, ensuring optimal performance across desktop, tablet, and mobile devices.
 
 ### 🎨 Comprehensive Icon Library
+
 200+ carefully crafted icons covering:
+
 - Navigation (arrows, chevrons, menu controls)
 - Actions (add, delete, edit, save, settings)
 - Communication (email, phone, notifications)
@@ -160,26 +178,30 @@ All components are built with mobile-first responsive design principles, ensurin
 ## Key Features
 
 ### 🔧 Customization
+
 - **Advanced Theming** - Override colors, fonts, spacing, and component behavior
 - **Flexible Styling** - Custom CSS-in-JS with theme-aware styling system
 - **Component Variants** - Multiple pre-built variants for common use cases
 
 ### 📋 Developer Experience
+
 - **Full TypeScript Support** - Complete type definitions with IntelliSense
 - **Comprehensive Documentation** - Interactive Storybook with live examples
 - **Consistent API** - Predictable prop patterns across all components
 
 ### ♿ Accessibility & Performance
+
 - **ARIA Compliance** - Full accessibility support with proper ARIA labels
 - **Keyboard Navigation** - Complete keyboard support for all interactive components
 - **Performance Optimized** - Lazy loading, code splitting, and optimized bundle sizes
 
 ### 🚀 Modern React Patterns
+
 - **Hooks-Based** - Built with modern React hooks and functional components
 - **State Management** - Integrated Jotai support for complex state scenarios
 - **Form Integration** - Seamless integration with popular form libraries
 
-*For complete component documentation, interactive examples, and implementation guides, visit the [Storybook documentation](https://storybook.technologiesunlimited.net/).*
+_For complete component documentation, interactive examples, and implementation guides, visit the [Storybook documentation](https://storybook.technologiesunlimited.net/)._
 
 ### Feedback and Contributions
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.122.0",
+  "version": "0.122.2",
   "type": "module",
   "description": "A comprehensive React-based libary for building modern web applications",
   "license": "MIT",
@@ -30,6 +30,7 @@
   "dependencies": {
     "@storybook/addon-links": "^9",
     "@types/lodash": "^4",
+    "date-fns": "^4.1.0",
     "formik": "^2",
     "highlight.js": "^11",
     "jotai": "^2",
@@ -70,11 +71,12 @@
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.5.1",
     "eslint-plugin-storybook": "^9.0.15",
+    "eslint-plugin-tsc": "^2.0.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "prettier": "^3.6.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5"
   },
   "files": [
     "src"

package/src/components/Accordion/accordion.stories.tsx

@@ -220,7 +220,7 @@ export const Nested: Story = {
 // --------------------------------------------------------------------------
 
 const ControlledAccordionExample = () => {
-  const [expanded, setExpanded] = React.useState<boolean | undefined>(undefined)
+  const [expanded, setExpanded] = React.useState<boolean>(false)
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
       <button

package/src/components/Accordion/index.tsx

@@ -4,17 +4,12 @@
  * Also supports menu items for navigation.
  */
 'use client'
-import React, {
-  useState,
-  useEffect,
-  FC,
-  ReactNode,
-  useMemo,
-  useCallback,
-} from 'react'
+import React, { useState, useEffect, useMemo, useCallback } from 'react'
+import type { FC, ReactNode } from 'react'
 import Link from 'next/link'
 import ExpandMoreIcon from '../Icons/ExpandMore'
-import { AccordionStyles, getAccordionStyles, SACRED_GLYPHS } from '../../theme'
+import { getAccordionStyles, SACRED_GLYPHS } from '../../theme'
+import type { AccordionStyles } from '../../theme'
 
 // --------------------------------------------------------------------------
 // PROPS INTERFACE
@@ -49,15 +44,21 @@ export interface AccordionProps {
 // HELPER HOOK for state management
 // --------------------------------------------------------------------------
 
+type UseAccordionStateArgs = {
+  expanded?: boolean | undefined
+  defaultExpanded?: boolean | undefined
+  onChange?:
+    | ((event: React.SyntheticEvent, expanded: boolean) => void)
+    | undefined
+  styles?: AccordionStyles | undefined
+}
+
 const useAccordionState = ({
   expanded: controlledExpanded,
   defaultExpanded = false,
   onChange,
   styles,
-}: Pick<
-  AccordionProps,
-  'expanded' | 'defaultExpanded' | 'onChange' | 'styles'
->) => {
+}: UseAccordionStateArgs) => {
   const { current: isControlled } = React.useRef(
     controlledExpanded !== undefined
   )
@@ -334,7 +335,7 @@ const Accordion: FC<AccordionProps> = props => {
             position: 'absolute',
             left: '8px',
             top: '50%',
-            transform: 'translateY(-50%)',
+            transform: `translateY(-50%) ${computedStyles.icon.transform || ''}`,
             zIndex: 1,
           }}
         />

package/src/components/Alert/index.tsx

@@ -9,7 +9,8 @@ import InfoIcon from '../Icons/Info'
 import CheckCircleIcon from '../Icons/CheckCircle'
 import ErrorIcon from '../Icons/Error'
 import WarningIcon from '../Icons/Warning'
-import { AlertStyles, getAlertStyles, SACRED_GLYPHS } from '../../theme'
+import { getAlertStyles, SACRED_GLYPHS } from '../../theme'
+import type { AlertStyles } from '../../theme'
 
 // --------------------------------------------------------------------------
 // PROPS INTERFACE

package/src/components/AppBar/index.tsx

@@ -4,15 +4,10 @@
  */
 'use client'
 
-import React, {
-  useState,
-  useEffect,
-  FC,
-  ReactNode,
-  useMemo,
-  useCallback,
-} from 'react'
-import { AppBarStyles, getAppBarStyles, SACRED_GLYPHS } from '../../theme'
+import React, { useState, useEffect, useMemo, useCallback } from 'react'
+import type { FC, ReactNode } from 'react'
+import { getAppBarStyles, SACRED_GLYPHS } from '../../theme'
+import type { AppBarStyles } from '../../theme'
 
 // --------------------------------------------------------------------------
 // PROPS INTERFACE

package/src/components/Avatar/index.tsx

@@ -5,7 +5,8 @@
 'use client'
 
 import React, { useMemo, forwardRef } from 'react'
-import { AvatarStyles, getAvatarStyles } from '../../theme'
+import { getAvatarStyles } from '../../theme'
+import type { AvatarStyles } from '../../theme'
 
 // --------------------------------------------------------------------------
 // PROPS INTERFACE

package/src/components/BigCalendar/CalendarFilters.tsx

@@ -0,0 +1,350 @@
+'use client'
+
+import React, { useState, useCallback, useMemo } from 'react'
+import Accordion from '../Accordion'
+import SearchableSimple, {
+  type DropdownOption,
+} from '../Field/Dropdown/SearchableSimple'
+import Chip from '../Chip'
+import Typography from '../Typography'
+import DateRange from '../Field/Date/DateRange'
+import * as Icons from '../Icons'
+import { FormFieldStyles } from '../../theme'
+
+const { FilterListIcon, ClearIcon } = Icons
+
+export interface CalendarFilterOptions {
+  searchText?: string
+  eventTypes?: string[]
+  dateRange?: {
+    start?: Date | null
+    end?: Date | null
+  }
+  resources?: string[]
+  tags?: string[]
+  status?: string[]
+  customFilters?: Record<string, any>
+}
+
+interface CalendarFiltersProps {
+  filters: CalendarFilterOptions
+  onFiltersChange: (filters: CalendarFilterOptions) => void
+  availableResources?: { id: string; title: string }[]
+  cities?: string[]
+  propertyTypes?: string[]
+  bedroomOptions?: Array<string | number>
+  priceRanges?: string[]
+  // Remove external custom components; inline standardized dropdowns instead
+  expanded?: boolean
+  styles?: FormFieldStyles
+}
+
+export const CalendarFilters: React.FC<CalendarFiltersProps> = ({
+  filters,
+  onFiltersChange,
+  availableResources = [],
+  cities = [],
+  propertyTypes = [],
+  bedroomOptions = [],
+  priceRanges = [],
+  expanded = true,
+  styles,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(expanded)
+  const theme = styles?.theme ?? 'sacred'
+
+  // search removed
+
+  const handleDateRangeChange = useCallback(
+    (range: { start: Date | null; end: Date | null }) => {
+      onFiltersChange({
+        ...filters,
+        dateRange: {
+          start: range.start ?? null,
+          end: range.end ?? null,
+        },
+      })
+    },
+    [filters, onFiltersChange]
+  )
+
+  // tag toggle replaced by dropdown
+
+  const clearAllFilters = useCallback(() => {
+    onFiltersChange({})
+  }, [onFiltersChange])
+
+  const activeFilterCount = useMemo(() => {
+    let count = 0
+    if (filters.searchText) count++
+    // Removed event types filter
+    if (filters.dateRange?.start || filters.dateRange?.end) count++
+    if (filters.resources?.length) count++
+    if (filters.tags?.length) count++
+    if (filters.customFilters && Object.keys(filters.customFilters).length)
+      count++
+    return count
+  }, [filters])
+
+  const accordionSummary = useMemo(
+    () => (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+          width: '100%',
+        }}
+      >
+        <FilterListIcon styles={{ theme: styles?.theme ?? 'sacred' }} />
+        <Typography
+          styles={{
+            theme,
+            fontSize: '1rem',
+            fontWeight: 600,
+            ...(theme === 'sacred'
+              ? {
+                  variant: 'cinzelh5',
+                  color: '#FFD700',
+                  textShadow: '0 0 6px rgba(255, 215, 0, 0.5)',
+                }
+              : {}),
+          }}
+        >
+          Filters
+        </Typography>
+        {activeFilterCount > 0 && (
+          <Chip
+            label={`${activeFilterCount} active`}
+            styles={{
+              theme: styles?.theme || 'sacred',
+              color: styles?.theme === 'sacred' ? '#FFD700' : '#3b82f6',
+            }}
+          />
+        )}
+        <div style={{ flexGrow: 1 }} />
+        {activeFilterCount > 0 && (
+          <div
+            onClick={e => {
+              e.stopPropagation()
+              clearAllFilters()
+            }}
+            style={{
+              cursor: 'pointer',
+              padding: '4px',
+              borderRadius: '4px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'background-color 0.2s',
+            }}
+            onMouseEnter={e => {
+              e.currentTarget.style.backgroundColor =
+                styles?.theme === 'sacred'
+                  ? 'rgba(255, 215, 0, 0.1)'
+                  : 'rgba(0, 0, 0, 0.04)'
+            }}
+            onMouseLeave={e => {
+              e.currentTarget.style.backgroundColor = 'transparent'
+            }}
+          >
+            <ClearIcon
+              styles={{ theme: styles?.theme ?? 'sacred', size: 16 }}
+            />
+          </div>
+        )}
+      </div>
+    ),
+    [activeFilterCount, styles, theme, clearAllFilters]
+  )
+
+  const containerStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+    padding: '16px',
+  }
+
+  const sectionStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  }
+
+  // removed chip container
+
+  return (
+    <Accordion
+      summary={accordionSummary}
+      expanded={isExpanded}
+      onChange={(_, expanded) => {
+        console.log('Accordion onChange called, expanded:', expanded)
+        setIsExpanded(expanded)
+      }}
+      styles={{
+        theme,
+        marginBottom: '16px',
+        ...(theme === 'sacred'
+          ? {
+              summaryColor: '#FFD700',
+              summaryTextShadow: '0 0 8px rgba(255, 215, 0, 0.6)',
+            }
+          : {}),
+      }}
+      details={
+        <div style={containerStyle}>
+          {/* Removed global search */}
+
+          {/* Date Range */}
+          <DateRange
+            value={{
+              start: filters.dateRange?.start || null,
+              end: filters.dateRange?.end || null,
+            }}
+            onChange={handleDateRangeChange}
+            startLabel="Start Date"
+            endLabel="End Date"
+            disableFutureDateValidation
+            {...(styles ? { styles } : {})}
+          />
+
+          {/* Two-row grid of dropdowns */}
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr',
+              gap: '16px',
+            }}
+          >
+            {(cities.length > 0 || availableResources.length > 0) && (
+              <div style={sectionStyle}>
+                <SearchableSimple
+                  label="City"
+                  options={
+                    cities.length > 0
+                      ? cities.map<DropdownOption>(c => ({ value: c }))
+                      : availableResources.map<DropdownOption>(r => ({
+                          value: r.title,
+                          _id: r.id,
+                        }))
+                  }
+                  {...(() => {
+                    const defCity = filters.customFilters?.city as
+                      | string
+                      | undefined
+                    if (defCity) return { defaultValue: defCity }
+                    const resId = (filters.resources || [])[0]
+                    const found = availableResources.find(r => r.id === resId)
+                    return found?.title ? { defaultValue: found.title } : {}
+                  })()}
+                  onChange={opt => {
+                    if (cities.length > 0) {
+                      onFiltersChange({
+                        ...filters,
+                        customFilters: {
+                          ...filters.customFilters,
+                          city: opt?.value || '',
+                        },
+                      })
+                    } else {
+                      onFiltersChange({
+                        ...filters,
+                        resources: opt?.value ? [opt._id || opt.value] : [],
+                      })
+                    }
+                  }}
+                  styles={{ theme: styles?.theme ?? 'sacred' }}
+                />
+              </div>
+            )}
+            {/* Status removed */}
+            {propertyTypes.length > 0 && (
+              <div style={sectionStyle}>
+                <SearchableSimple
+                  label="Property Type"
+                  options={propertyTypes.map<DropdownOption>(t => ({
+                    value: t,
+                  }))}
+                  {...(() => {
+                    const def = filters.customFilters?.propertyType as
+                      | string
+                      | undefined
+                    return def ? { defaultValue: def } : {}
+                  })()}
+                  onChange={opt =>
+                    onFiltersChange({
+                      ...filters,
+                      customFilters: {
+                        ...filters.customFilters,
+                        propertyType: opt?.value || '',
+                      },
+                    })
+                  }
+                  styles={{ theme: styles?.theme ?? 'sacred' }}
+                />
+              </div>
+            )}
+            {bedroomOptions.length > 0 && (
+              <div style={sectionStyle}>
+                <SearchableSimple
+                  label="Bedrooms"
+                  options={bedroomOptions.map<DropdownOption>(b => ({
+                    value: String(b),
+                  }))}
+                  {...(() => {
+                    const def = filters.customFilters?.bedrooms as
+                      | string
+                      | undefined
+                    return def ? { defaultValue: def } : {}
+                  })()}
+                  onChange={opt =>
+                    onFiltersChange({
+                      ...filters,
+                      customFilters: {
+                        ...filters.customFilters,
+                        bedrooms: opt?.value || '',
+                      },
+                    })
+                  }
+                  styles={{ theme: styles?.theme ?? 'sacred' }}
+                />
+              </div>
+            )}
+            {priceRanges.length > 0 && (
+              <div style={sectionStyle}>
+                <SearchableSimple
+                  label="Price Range"
+                  options={priceRanges.map<DropdownOption>(p => ({ value: p }))}
+                  {...(() => {
+                    const def = filters.customFilters?.priceRange as
+                      | string
+                      | undefined
+                    return def ? { defaultValue: def } : {}
+                  })()}
+                  onChange={opt =>
+                    onFiltersChange({
+                      ...filters,
+                      customFilters: {
+                        ...filters.customFilters,
+                        priceRange: opt?.value || '',
+                      },
+                    })
+                  }
+                  styles={{ theme: styles?.theme ?? 'sacred' }}
+                />
+              </div>
+            )}
+            {/* Fourth slot reserved for future standardized dropdown */}
+            <div />
+          </div>
+
+          {/* Tags handled above */}
+
+          {/* Status handled above */}
+
+          {/* External custom components removed in favor of standardized inline dropdowns */}
+        </div>
+      }
+    />
+  )
+}