@4alldigital/foundation-ui--core 3.12.1 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.12.1",
+  "version": "3.13.0",
   "description": "Foundation UI Core Component Library (source distribution)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -35,5 +35,8 @@
   },
   "author": "Joe Mewes",
   "license": "MIT",
-  "gitHead": "1a55ba11e1e4cb144af180cf1a48d44fd9f0c719"
+  "devDependencies": {
+    "@types/he": "^1.2.3"
+  },
+  "gitHead": "2394d061bf5fa814a00ffb74c334a001dbbc9bf4"
 }

package/src/components/AddressForm/AddressForm.tsx

@@ -124,6 +124,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Full Name */}
         <TextInput
           id="shipping-name"
+          name="name"
+          autoComplete="shipping name"
           placeholder="Full Name"
           value={address.name || ''}
           onChange={(e) => handleChange('name', e.target.value)}
@@ -136,6 +138,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Address Line 1 */}
         <TextInput
           id="shipping-line1"
+          name="address-line1"
+          autoComplete="shipping address-line1"
           placeholder="Street Address"
           value={address.line1 || ''}
           onChange={(e) => handleChange('line1', e.target.value)}
@@ -148,6 +152,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Address Line 2 */}
         <TextInput
           id="shipping-line2"
+          name="address-line2"
+          autoComplete="shipping address-line2"
           placeholder="Apartment, suite, etc. (optional)"
           value={address.line2 || ''}
           onChange={(e) => handleChange('line2', e.target.value)}
@@ -158,6 +164,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         <div className="grid gap-4 sm:grid-cols-2">
           <TextInput
             id="shipping-city"
+            name="address-level2"
+            autoComplete="shipping address-level2"
             placeholder="City"
             value={address.city || ''}
             onChange={(e) => handleChange('city', e.target.value)}
@@ -169,6 +177,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
 
           <TextInput
             id="shipping-state"
+            name="address-level1"
+            autoComplete="shipping address-level1"
             placeholder="State / County / Province"
             value={address.state || ''}
             onChange={(e) => handleChange('state', e.target.value)}
@@ -183,6 +193,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         <div className="grid gap-4 sm:grid-cols-2">
           <TextInput
             id="shipping-postal-code"
+            name="postal-code"
+            autoComplete="shipping postal-code"
             placeholder="Postal / ZIP Code"
             value={address.postal_code || ''}
             onChange={(e) => handleChange('postal_code', e.target.value)}
@@ -194,6 +206,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
 
           <FormSelect
             id="shipping-country"
+            name="country"
+            autoComplete="shipping country"
             placeholder="Country"
             value={address.country || ''}
             onChange={(e) => handleChange('country', e.target.value)}
@@ -208,7 +222,9 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Phone */}
         <TextInput
           id="shipping-phone"
+          name="phone"
           type={InputType.TEL}
+          autoComplete="shipping tel"
           placeholder="Phone Number (optional)"
           value={address.phone || ''}
           onChange={(e) => handleChange('phone', e.target.value)}

package/src/components/AnimationSet1/AnimationSet1.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client";
 
 import React from 'react';

package/src/components/Button/Button.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { type VariantProps } from 'class-variance-authority';
 import { buttonVariants } from './Button';
 import { MouseEventHandler, ReactNode } from 'react';
@@ -33,7 +34,7 @@ export enum BTN_SIZES {
 // New CVA-based button props
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+    Omit<VariantProps<typeof buttonVariants>, 'variant' | 'size'> {
   // Radix UI Slot support
   asChild?: boolean;
   

package/src/components/Header/Header.tsx

@@ -4,17 +4,16 @@ import { useCallback, useEffect, useState } from 'react';
 import { clsx as cx } from 'clsx';
 import { Props } from './Header.types';
 import { useAppContext } from '../../context/App';
+import { useThemeContext } from '../../context/Theme';
 import Logo from '../Logo';
 import Button from '../Button';
 import Menu from '../Menu';
 import { BTN_VARIANTS } from '../Button/Button.types';
-// import Copy from '../Copy';
 import Link from '../Link';
 import { useLanguage } from '../../hooks';
 import Container from '../Container';
 import { twMerge } from 'tailwind-merge';
 import Cart from '../Cart';
-// import Avatar from '../Avatar';
 
 const Header = ({
   testID,
@@ -28,6 +27,7 @@ const Header = ({
 }: Props) => {
   const context = useAppContext();
   const T = useLanguage();
+  const theme = useThemeContext();
 
   const [mobileMenuClass, mobileMenuIcon] = useState('hidden');
   const [showDropdown, setShowDropdown] = useState(false);
@@ -94,6 +94,13 @@ const Header = ({
           </div>
           {/* <!-- tablet/desktop --> */}
           <div className="hidden md:flex items-center justify-center gap-2">
+            {theme?.toggleTheme && (
+              <Button
+                onClick={theme.toggleTheme}
+                icon={theme.isDarkTheme ? 'mdi:weather-sunny' : 'mdi:weather-night'}
+                ariaLabel={theme.isDarkTheme ? 'Switch to light mode' : 'Switch to dark mode'}
+              />
+            )}
             {!context?.app?.isAuthenticated && context?.app?.loginCallback && (
               <div className="w-32 flex justify-end">
                 <Button rounded onClick={context?.app?.loginCallback}>{T.UI.LOGIN}</Button>
@@ -158,6 +165,15 @@ const Header = ({
                   <Menu links={context.header.profile} separators />
                 )}
               </div>
+              {theme?.toggleTheme && (
+                <div className="md:hidden flex justify-center">
+                  <Button
+                    onClick={theme.toggleTheme}
+                    icon={theme.isDarkTheme ? 'mdi:weather-sunny' : 'mdi:weather-night'}
+                    ariaLabel={theme.isDarkTheme ? 'Switch to light mode' : 'Switch to dark mode'}
+                  />
+                </div>
+              )}
               {context?.app?.isAuthenticated && (
                 <div className="md:hidden flex justify-center">
                   <Button rounded onClick={context?.app?.logoutCallback}>{T.UI.LOGOUT}</Button>

package/src/components/Link/Link.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { History } from 'history';
 
 export interface Props {

package/src/components/Menu/Menu.tsx

@@ -7,7 +7,20 @@ import Heading from '../Heading';
 import { HEADING_TAGS } from '../Heading/Heading.types';
 import { twMerge } from 'tailwind-merge';
 
+function useCurrentPathname(): string | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { usePathname } = require('next/navigation');
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return usePathname();
+  } catch {
+    return null;
+  }
+}
+
 const Menu = ({ testID, title, links, inline = true, separators = false, className }: Props) => {
+  const pathname = useCurrentPathname();
+
   return (
     <div data-testid={testID || '"Menu"'} className={twMerge(cx('flex flex-col gap-2', className))}>
       {title && (
@@ -18,13 +31,17 @@ const Menu = ({ testID, title, links, inline = true, separators = false, classNa
       <div className={cx('flex gap-0 items-center md:items-start', { 'flex-col md:flex-row ': inline }, { 'flex-col ': !inline })}>
         {links?.map((link, index) => {
           const key = `${link.id}--${index}`;
+          const isActive = pathname ? pathname === link.url || (link.url !== '/' && pathname.startsWith(link.url)) : false;
           return (
             <div key={key} className='flex gap-0'>
               <div className="relative py-2">
-                <Link href={link.url} className="flex gap-1 transition-opacity hover:opacity-70">
+                <Link href={link.url} className={cx("flex gap-1 transition-opacity hover:opacity-70", isActive && "opacity-100 font-bold")}>
                   {link.icon && <Icon name={link.icon} />}
                   {link.title && <div>{link.title}</div>}
                 </Link>
+                {isActive && (
+                  <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-current rounded-full" />
+                )}
               </div>
               {separators && index + 1 < links.length && (
                 <div className="h-full hidden md:flex self-center px-2">

package/src/components/ProductCard/ProductCard.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client";
 
 import * as React from 'react';

package/src/components/Schedule/Schedule.stories.tsx

@@ -70,11 +70,10 @@ const exampleData = [
   },
 ];
 
-const formattedSchedule = formatSchedule(exampleData as ESSchedule[])[0];
+const formattedSchedule = formatSchedule(exampleData as unknown as ESSchedule[])[0];
 
 export const Default: Story = {
   args: {
-    raised: false,
     scheduleItems: formattedSchedule,
   },
   render: args => {
@@ -84,7 +83,6 @@ export const Default: Story = {
 
 export const HasAccess: Story = {
   args: {
-    raised: false,
     scheduleItems: formattedSchedule,
     hasAccess: true,
   },

package/src/components/SubscriptionManager/SubscriptionManager.stories.tsx

@@ -50,7 +50,6 @@ export const Default: Story = {
     pauseSubscriptionCallback: () => console.log('Pause Subscription'),
     changeSubscriptionCallback: (id: string) => console.log('Change Subscription to: ', id),
     updatePaymentMethodCallback: () => console.log('Update Payment Method'),
-    contactSupportCallback: () => console.log('Contact Support'),
     selectedPlanCallback: (planId: string) => console.log('Selected Plan: ', planId),
     isLoading: false,
   },

package/src/context/Theme/index.tsx

@@ -4,7 +4,7 @@
 // Theme provider for the application
 // keeps track of the current theme selected by user
 import React, { useContext } from 'react';
-interface ThemeContextProps {
+export interface ThemeContextProps {
   isDarkTheme: boolean;
   toggleTheme: () => void;
 }

package/src/features/Search/Search.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client";
 
 import React, { useMemo, useState } from 'react';

package/src/features/Search/config/config-helper.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client";
 
 // import config from "../config/engine.json";

package/src/features/Search/views/Paging/Paging.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client";
 
 import { clsx as cx } from 'clsx';

package/src/features/Search/views/Paging/Paging.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Rename } from '@elastic/react-search-ui-views';
 import { BaseContainerProps } from '@elastic/react-search-ui/lib/esm/types';
 import { SearchContextState } from '@elastic/search-ui';

package/src/features/Search/views/PagingInfo/PagingInfo.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import { clsx as cx } from 'clsx';
 import { Props } from './PagingInfo.types';

package/src/features/Search/views/PagingInfo/PagingInfo.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Rename } from '@elastic/react-search-ui-views';
 import { BaseContainerProps } from '@elastic/react-search-ui/lib/esm/types';
 import { SearchContextState } from '@elastic/search-ui';

package/src/features/Search/views/Result/Result.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Props } from './Result.types';
 import { clsx as cx } from 'clsx';
 import he from 'he';

package/src/features/Search/views/Result/Result.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { BaseContainerProps } from '@elastic/react-search-ui/lib/esm/types';
 import { SearchContextState } from '@elastic/search-ui';
 import { ResultAsTypes } from '../../Search.types';

package/src/features/Search/views/Results/Results.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { ResultViewProps } from "@elastic/react-search-ui-views";
 import { BaseContainerProps } from "@elastic/react-search-ui/lib/esm/types";
 import { SearchContextState } from "@elastic/search-ui";

package/src/features/Search/views/ResultsPerPage/ResultsPerPage.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client";
 
 import { clsx as cx } from 'clsx';

package/src/features/Search/views/ResultsPerPage/ResultsPerPage.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Rename } from '@elastic/react-search-ui-views';
 import { BaseContainerProps } from '@elastic/react-search-ui/lib/esm/types';
 import { SearchContextState } from '@elastic/search-ui';

package/src/features/Search/views/SearchBox/SearchBox.tsx

@@ -17,7 +17,7 @@ function SearchBox({
   resetTrigger = () => {},
 }: Props) {
   return (
-    <div className={cx('m-0 md:px-48', className)}>
+    <div className={cx('m-0 w-full', className)}>
       <form onSubmit={e => onSubmit(e)} className="flex items-center">
         <div className="flex-1 bg-body-bg/80 dark:bg-body-bg-dark/80 rounded">
           <TextInput

package/src/features/Search/views/SearchBox/SearchBox.types.ts

@@ -7,4 +7,5 @@ export interface Props {
   placeholder?: string;
   allowReset?: boolean;
   resetTrigger?: (data?: any, options?: any) => void;
+  shouldClearFilters?: boolean;
 }

package/src/features/Search/views/Sorting/Sorting.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client";
 
 import { clsx as cx } from 'clsx';

package/src/features/Search/views/Sorting/Sorting.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { BaseContainerProps } from '@elastic/react-search-ui/lib/esm/types';
 import { SearchContextState } from '@elastic/search-ui';
 

package/src/templates/ChallengeScreen/ChallengeScreen.stories.tsx

@@ -26,36 +26,43 @@ export const Default: Story = {
       {
         title: 'Day 1: Root Chakra',
         image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        video: '',
         id: 'day-1',
       },
       {
         title: 'Day 2: Sacral Chakra',
         image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        video: '',
         id: 'day-2',
       },
       {
         title: 'Day 3: Solar Plexus Chakra',
         image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        video: '',
         id: 'day-3',
       },
       {
         title: 'Day 4: Heart Chakra',
         image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        video: '',
         id: 'day-4',
       },
       {
         title: 'Day 5: Throat Chakra',
         image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        video: '',
         id: 'day-5',
       },
       {
         title: 'Day 6: Third Eye Chakra',
         image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        video: '',
         id: 'day-6',
       },
       {
         title: 'Day 7: Crown Chakra',
         image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        video: '',
         id: 'day-7',
       },
     ],

package/src/templates/ContentScreen/ContentScreen.stories.tsx

@@ -28,7 +28,7 @@ const ESPage = {
   },
 };
 
-const formattedPage = formatPages([ESPage])[0];
+const formattedPage = formatPages([ESPage] as unknown as Parameters<typeof formatPages>[0])[0];
 
 export const Default: Story = {
   parameters: {

package/src/templates/DashboardScreen/DashboardScreen.stories.tsx

@@ -39,7 +39,7 @@ const ESPromos = [
     sort: [1719844354],
   },
 ];
-const formattedPromos = formatPromos(ESPromos);
+const formattedPromos = formatPromos(ESPromos as unknown as Parameters<typeof formatPromos>[0]);
 
 const ESPromoNews = [
   {
@@ -250,7 +250,7 @@ const ESPromoNews = [
   },
 ];
 
-const formattedPromoNews = formatPromos(ESPromoNews);
+const formattedPromoNews = formatPromos(ESPromoNews as unknown as Parameters<typeof formatPromos>[0]);
 
 export const Default: Story = {
   parameters: {
@@ -437,9 +437,9 @@ export const Default: Story = {
       },
     ],
     promo: {
-      title: formattedPromos[0].title,
-      description: formattedPromos[0].description,
-      image: formattedPromos[0].image,
+      title: formattedPromos[0].title ?? '',
+      description: formattedPromos[0].description ?? '',
+      image: formattedPromos[0].image ?? '',
       buttonData: {
         variant: BTN_VARIANTS.PRIMARY,
         size: BTN_SIZES.MEDIUM,
@@ -450,11 +450,11 @@ export const Default: Story = {
     news: formattedPromoNews.map(promo => ({
       variant: CardVariant.MEDIA,
       data: {
-        id: promo.uuid,
-        title: promo.title,
-        description: promo.description,
+        id: promo.uuid ?? '',
+        title: promo.title ?? '',
+        description: promo.description ?? '',
         image: {
-          src: promo.image,
+          src: promo.image ?? '',
           alt: 'Placeholder image',
         },
         htmlDetails: true,

package/src/templates/FAQScreen/FAQScreen.stories.tsx

@@ -262,7 +262,7 @@ const ESFAQS = [
   },
 ];
 
-const formattedFAQS = formatFaqs(ESFAQS);
+const formattedFAQS = formatFaqs(ESFAQS as unknown as Parameters<typeof formatFaqs>[0]);
 
 export const Default: Story = {
   parameters: {

package/src/templates/PasswordResetScreen/PasswordResetScreen.stories.tsx

@@ -15,7 +15,7 @@ export const Default: Story = {
   args: {
     title: 'Password Reset',
     image: 'https://picsum.photos/1600/900',
-    handleSubmitCallback: (data: { password: string }) => console.log(data),
+    handleSubmitCallback: (data: Record<string, string>) => console.log(data),
   },
 };
 

package/src/templates/ScheduleScreen/ScheduleScreen.stories.tsx

@@ -54,7 +54,7 @@ const exampleData = [
   },
 ];
 
-const formattedSchedule = formatSchedule(exampleData)?.[0];
+const formattedSchedule = formatSchedule(exampleData as unknown as Parameters<typeof formatSchedule>[0])?.[0];
 
 // October 2025 example data for calendar view
 const october2025Data = [
@@ -107,7 +107,7 @@ const october2025Data = [
   },
 ];
 
-const formattedOctober2025Schedule = formatSchedule(october2025Data)?.[0];
+const formattedOctober2025Schedule = formatSchedule(october2025Data as unknown as Parameters<typeof formatSchedule>[0])?.[0];
 
 export const Default: Story = {
   parameters: {
@@ -118,7 +118,6 @@ export const Default: Story = {
     title: 'Schedule',
     image: 'https://picsum.photos/1600/900',
     scheduleData: {
-      raised: false,
       scheduleItems: formattedSchedule,
       hasAccess: true,
     },
@@ -134,7 +133,6 @@ export const AccessRestricted: Story = {
     title: 'Schedule',
     image: 'https://picsum.photos/1600/900',
     scheduleData: {
-      raised: false,
       scheduleItems: formattedSchedule,
       hasAccess: false,
     },