@4alldigital/foundation-ui--core 3.9.0 → 3.11.0

package/src/components/TextInput/TextInput.types.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, InputHTMLAttributes } from "react";
 
 export enum InputType {
   TEXT = 'text',
@@ -18,64 +18,13 @@ export enum InputType {
   HIDDEN = 'hidden',
 }
 
-export interface Props {
+export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> {
   /** Input type. */
   type?: InputType;
-  /** Specify if input is required. */
-  required?: boolean;
-  /** Custom style attributes. */
-  className?: string;
   /** OnChange function handler. */
   onChange?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-  /** Placeholder text. */
-  placeholder?: string;
-  /** Input name attribute. */
-  name?: string;
   /** Input icon value. */
   icon?: string;
-  /** Input status. */
-  disabled?: boolean;
-  autoComplete?:
-    | 'off'
-    | 'honorific-prefix'
-    | 'given-name'
-    | 'additional-name'
-    | 'family-name'
-    | 'honorific-suffix'
-    | 'nickname'
-    | 'email'
-    | 'username'
-    | 'new-password'
-    | 'current-password'
-    | 'one-time-code'
-    | 'organization-title'
-    | 'organization'
-    | 'street-address'
-    | 'address-line1'
-    | 'address-line2'
-    | 'address-line3'
-    | 'address-level4'
-    | 'address-level3'
-    | 'address-level2'
-    | 'address-level1'
-    | 'country'
-    | 'country-name'
-    | 'postal-code'
-    | 'cc-name'
-    | 'cc-given-name'
-    | 'cc-additional-name'
-    | 'cc-family-name'
-    | 'cc-number'
-    | 'cc-exp'
-    | 'cc-exp-month'
-    | 'cc-exp-year'
-    | 'cc-csc'
-    | 'cc-type'
-    | 'transaction-currency'
-    | 'transaction-amount'
-    | 'language'
-    | 'bday'
-    | 'bday-day'
-    | 'bday-month'
-    | 'bday-year';
+  /** Validation error message (used by AddressForm). */
+  error?: string | false;
 }

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { Toaster as SonnerToaster } from "sonner";
+import type { ToasterProps } from "./Toast.types";
+
+/**
+ * Toaster component — wraps Sonner with Foundation UI defaults.
+ * Place once in the root layout.
+ */
+export function Toaster({ position = "top-right", ...props }: ToasterProps) {
+  return <SonnerToaster richColors position={position} {...props} />;
+}

package/src/components/Toast/Toast.types.ts

@@ -0,0 +1,6 @@
+import type { ToasterProps as SonnerToasterProps } from "sonner";
+
+export interface ToasterProps extends Partial<SonnerToasterProps> {
+  /** Position of the toast container */
+  position?: SonnerToasterProps["position"];
+}

package/src/components/Toast/index.ts

@@ -0,0 +1,3 @@
+export { Toaster } from "./Toast";
+export { toast } from "sonner";
+export type { ToasterProps } from "./Toast.types";

package/src/components/VariantSelector/VariantSelector.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../utils';

package/src/components/Video/Video.tsx

@@ -1,10 +1,18 @@
+"use client";
+
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import ReactPlayer from 'react-player/youtube';
 import { isMobileOnly } from 'react-device-detect';
 import { Props } from './Video.types';
 import { twMerge } from 'tailwind-merge';
 import videojs from 'video.js';
+
+const DEFAULT_VIDEO_OPTIONS = {
+  playsinline: true,
+  preferFullWindow: true,
+} as const;
+
 export interface VideoPlayerMethods {
   play: () => void;
   pause: () => void;
@@ -18,10 +26,7 @@ const Video = forwardRef(function MyVideo(
     onReady,
     onExitFullScreenCallback,
     className,
-    options = {
-      playsinline: true,
-      preferFullWindow: true,
-    },
+    options = DEFAULT_VIDEO_OPTIONS,
     isYoutube = false,
     defaultAudioTrack = 'No Music',
     rounded = true,
@@ -168,11 +173,7 @@ const Video = forwardRef(function MyVideo(
       });
 
       player.on('fullscreenchange', function () {
-        // If player is in fullscreen mode, log state to console
-        if (player.isFullscreen()) {
-          console.log('Player is in fullscreen');
-        } else {
-          console.log('Player is not in fullscreen');
+        if (!player.isFullscreen()) {
           if (onExitFullScreenCallback && typeof onExitFullScreenCallback === 'function') {
             onExitFullScreenCallback();
           }
@@ -187,7 +188,7 @@ const Video = forwardRef(function MyVideo(
       player.autoplay(options.autoplay);
       player.src(options.sources);
     }
-  }, [options, videoRef]);
+  }, [options]);
 
   // Expose specific methods to parent
   useImperativeHandle(ref, () => ({
@@ -220,7 +221,7 @@ const Video = forwardRef(function MyVideo(
         playerRef.current = null;
       }
     };
-  }, [playerRef]);
+  }, [isYoutube]);
 
   if (isYoutube && url) {
     return (
@@ -258,7 +259,7 @@ const Video = forwardRef(function MyVideo(
         cx(
           'relative w-full overflow-hidden h-full object-cover',
           {
-            rouded: rounded,
+            rounded: rounded,
           },
           aspectRatioConfig.className,
           className,

package/src/components/VisitUs/VisitUs.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from 'react';
 import { Props } from './VisitUs.types';
 import Button from '../Button';

package/src/components/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 // ATOMS
 export { default as AnimationCounter } from './AnimationCounter';
 export { default as Blockquote } from './Blockquote';
@@ -22,6 +24,7 @@ export { default as Notice } from './Notice';
 export { default as Radio } from './Radio';
 export { default as Switch } from './Switch';
 export { default as TextInput } from './TextInput';
+export { InputType } from './TextInput/TextInput.types';
 export { default as Avatar } from './Avatar';
 export { default as Banner } from './Banner';
 
@@ -64,6 +67,9 @@ export { default as ContentRowsLayout } from './ContentRowsLayout';
 export { default as Footer } from './Footer';
 export { default as Header } from './Header';
 
+// UTILITIES
+export { default as ErrorBoundary } from './ErrorBoundary';
+
 // UI
 export { default as Loader } from './Loader';
 export { default as Video } from './Video';
@@ -72,6 +78,9 @@ export { default as FullScreenVideoModal } from './FullScreenVideoModal';
 export { default as Cart } from './Cart';
 export { default as FullContentBackgroundImage } from './FullContentBackgroundImage';
 
+// TOAST
+export { Toaster, toast } from './Toast';
+
 // SHADCN UI COMPONENTS
 export { ShadcnCarousel } from './ShadcnCarousel';
 
@@ -150,9 +159,13 @@ export type { Props as AccordionProps } from './Accordion/Accordion.types';
 export type { Props as SubscriptionManagerProps } from './SubscriptionManager/SubscriptionManager.types';
 export type { Props as FullScreenVideoModalProps } from './FullScreenVideoModal/FullScreenVideoModal.types';
 export type { Props as CartProps } from './Cart/Cart.types';
+export type { Props as ErrorBoundaryProps } from './ErrorBoundary/ErrorBoundary.types';
 export type { Props as FullContentBackgroundImageProps } from './FullContentBackgroundImage/FullContentBackgroundImage.types';
 export type { Props as HeaderProps } from './Header/Header.types';
 
+// TOAST TYPES
+export type { ToasterProps } from './Toast';
+
 // SHADCN UI TYPES
 
 // PRODUCT COMPONENT TYPES

package/src/context/Amplify/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { createContext, ReactNode, useEffect } from 'react';
 import { Amplify } from 'aws-amplify';
 
@@ -35,7 +37,6 @@ interface AmplifyProviderProps {
 }
 
 export const AmplifyProvider = ({ children, value }: AmplifyProviderProps) => {
-  console.log("value.config", value.config);
   useEffect(() => {
     if (value.config) {
       Amplify.configure({

package/src/context/App/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { createContext, useContext } from 'react';
 import { ShareProps } from '../../components/VisitUs/VisitUs.types';
 

package/src/context/Cart/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, useContext, ReactNode } from 'react';
 
 // Define the context props (you can add more properties depending on your requirements)

package/src/context/ExampleContext/index.tsx

@@ -1,10 +1,12 @@
+"use client";
+
 import React, { createContext, useContext, useState, ReactNode } from 'react';
 
 // Define the context props (you can add more properties depending on your requirements)
 interface ContextProps {
   someState: string;
   setSomeState: React.Dispatch<React.SetStateAction<string>>;
-  value: any;
+  value: unknown;
 }
 
 // Create the context with a default value

package/src/context/Theme/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // State management for theme with Context API
 // Theme provider for the application
 // keeps track of the current theme selected by user

package/src/context/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 // export { default as ThemeContext } from './Theme';
 // export { default as AppContext } from './AppContext';
 

package/src/features/Search/Search.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from 'react';
 import ElasticSearchAPIConnector from '@elastic/search-ui-elasticsearch-connector';
 import {
@@ -46,6 +48,7 @@ export default function Search({
   gridClasses,
   initialState = {},
   showTextSearch = true,
+  children,
 }: Props) {
   const T = useLanguage();
   const connector = useMemo(() => {
@@ -117,6 +120,14 @@ export default function Search({
     };
   }, [config]);
 
+  if (typeof children === 'function') {
+    return (
+      <SearchProvider config={searchConfig}>
+        {children({ searchConfig })}
+      </SearchProvider>
+    );
+  }
+
   const [showSidebar, setShowSidebar] = useState(false);
 
   const handleShowFilters = () => {

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

@@ -37,5 +37,6 @@ export interface Props {
   gridClasses?: string;
   initialState?: RequestState;
   showTextSearch?: boolean;
+  children?: (context: { searchConfig: any }) => React.ReactNode;
 }
 

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

@@ -1,3 +1,5 @@
+"use client";
+
 // import config from "../config/engine.json";
 
 /**

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { isMobileOnly } from 'react-device-detect';
 import { Props } from './Layout.types';
 // import Sidebar from "../Sidebar";

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

@@ -1,5 +1,7 @@
+"use client";
+
 import type { FieldValue } from '@elastic/search-ui';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { getFilterValueDisplay } from '../../view-helpers';
 import { Props } from './MultiCheckboxFacet.types';
 import Copy from '../../../../components/Copy';

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

@@ -1,4 +1,6 @@
-import cx from 'classnames';
+"use client";
+
+import { clsx as cx } from 'clsx';
 import RCPagination from 'rc-pagination';
 import enUsLocale from 'rc-pagination/lib/locale/en_US';
 import { Props } from './Paging.types';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './PagingInfo.types';
 
 function PagingInfo({

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

@@ -1,5 +1,5 @@
 import { Props } from './Result.types';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import he from 'he';
 import { getEscapedField } from '../../view-helpers';
 import Card from '../../../../components/Card';

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

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Results.types';
 
 function Results({ children, className, gridClasses, ...rest }: Props & React.HTMLAttributes<HTMLUListElement>) {

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

@@ -1,4 +1,6 @@
-import cx from 'classnames';
+"use client";
+
+import { clsx as cx } from 'clsx';
 import { Props } from './ResultsPerPage.types';
 import Label from '../../../../components/Label';
 import FormSelect from '../../../../components/FormSelect';

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

@@ -1,9 +1,11 @@
+"use client";
+
 import { BTN_TYPES, BTN_VARIANTS } from '../../../../components/Button/Button.types';
 import Button from '../../../../components/Button';
 import TextInput from '../../../../components/TextInput';
 import { InputType } from '../../../../components/TextInput/TextInput.types';
 import { Props } from './SearchBox.types';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 
 function SearchBox({
   className,

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

@@ -1,5 +1,7 @@
+"use client";
+
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { getFilterValueDisplay } from '../../view-helpers';
 import { Props } from './SingleLinksFacet.types';
 import type { FieldValue } from '@elastic/search-ui';

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

@@ -1,4 +1,6 @@
-import cx from 'classnames';
+"use client";
+
+import { clsx as cx } from 'clsx';
 import { Props } from './SingleSelectFacet.types';
 import FormSelect from '../../../../components/FormSelect';
 import Label from '../../../../components/Label';

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

@@ -1,4 +1,6 @@
-import cx from 'classnames';
+"use client";
+
+import { clsx as cx } from 'clsx';
 import { Props } from './Sorting.types';
 import FormSelect from '../../../../components/FormSelect';
 import { COPY_TRANSFORM } from '../../../../components/Copy/Copy.types';

package/src/features/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 // Features
 export { default as Search } from './Search';
 
@@ -6,6 +8,20 @@ export { default as SingleSelectFacet } from './Search/views/SingleSelectFacet';
 export { default as SingleLinksFacet } from './Search/views/SingleLinksFacet';
 export { default as MultiCheckboxFacet } from './Search/views/MultiCheckboxFacet';
 
+// View Helpers
+export { getEscapedField } from './Search/view-helpers';
+
+// Re-export Elastic Search UI components so consumers share the same module instance
+// (avoids React context mismatch when using the children render prop)
+export {
+  WithSearch,
+  Results,
+  Facet,
+  Paging,
+  Sorting,
+  SearchBox,
+} from '@elastic/react-search-ui';
+
 // Types
 export { ResultAsTypes } from './Search/Search.types';
 export type { Props as SearchProps } from './Search/Search.types';

package/src/forms/ForgotPasswordForm/ForgotPasswordForm.types.ts

@@ -1,3 +1,3 @@
 export interface Props {
-  handleSubmit: (values: any) => void;
+  handleSubmit: (values: Record<string, string>) => void;
 }

package/src/forms/LoginForm/LoginForm.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/nextjs';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
 import LoginForm from '.';
 
 const meta: Meta<typeof LoginForm> = {

package/src/forms/LoginForm/LoginForm.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useEffect } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './LoginForm.types';
 import { socialLoginUrlApple, socialLoginUrlGoogle } from '../constants';
 import { Auth, Hub } from 'aws-amplify';
@@ -12,7 +14,7 @@ import { FIELD_TYPES } from '../../components/FormField/FormField.types';
 import Button from '../../components/Button';
 import { BTN_VARIANTS } from '../../components/Button/Button.types';
 import Hr from '../../components/Hr';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
 import { useLanguage } from '../../hooks';
 
 const LoginForm = ({
@@ -45,9 +47,9 @@ const LoginForm = ({
       Auth.federatedSignIn({
         provider: provider,
       });
-    } catch (error: any) {
-      console.log(error);
-      toast.error(error.message || T?.ERRORS?.GENERIC_ERROR);
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : T?.ERRORS?.GENERIC_ERROR;
+      toast.error(message || T?.ERRORS?.GENERIC_ERROR);
     }
   };
 

package/src/forms/LoginForm/LoginForm.types.ts

@@ -1,7 +1,13 @@
+export interface AuthTokens {
+  accessToken?: { jwtToken?: string };
+  idToken?: { jwtToken?: string };
+  refreshToken?: { token?: string };
+}
+
 export interface Props {
   initialValues?: Record<string, string>;
   handleSubmit: (values: Record<string, string>) => void;
-  handleTokenCallback?: (tokens: any) => void;
+  handleTokenCallback?: (tokens: AuthTokens) => void;
   showSocialButtons?: boolean;
   className?: string;
 }

package/src/forms/PromoCodeForm/PromoCodeForm.types.ts

@@ -1,4 +1,4 @@
 export interface Props {
   testID?: string;
-  handleSubmit?: (values: any) => void;
+  handleSubmit?: (values: Record<string, string>) => void;
 }

package/src/forms/RegisterForm/RegisterForm.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs';
 import RegisterForm from '.';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
 
 const meta: Meta<typeof RegisterForm> = {
   title: 'FORMS/RegisterForm',

package/src/forms/RegisterForm/RegisterForm.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useEffect } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Auth, Hub } from 'aws-amplify';
 import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth';
 import Form from '../../components/Form';
@@ -13,7 +15,7 @@ import { validEmail, validPassword } from '../validations';
 import STRINGS from '../../translations';
 import { useLanguage } from '../../hooks';
 import { Props } from './RegisterForm.types';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
 
 const RegisterForm = ({
   handleSubmit,
@@ -41,14 +43,9 @@ const RegisterForm = ({
       Auth.federatedSignIn({
         provider: provider,
       });
-    } catch (error: any) {
-      console.log(error);
-      // Toast.show({
-      //   type: 'error',
-      //   text1: T.UI.ERROR,
-      //   text2: error.message || T.ERRORS.GENERIC_ERROR,
-      // });
-      toast.error(error.message || T?.ERRORS?.GENERIC_ERROR);
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : T?.ERRORS?.GENERIC_ERROR;
+      toast.error(message || T?.ERRORS?.GENERIC_ERROR);
     }
   };
 

package/src/forms/RegisterForm/RegisterForm.types.ts

@@ -1,6 +1,8 @@
+import { type AuthTokens } from '../LoginForm/LoginForm.types';
+
 export interface Props {
-  handleSubmit: (data: Record<string, any>) => void;
+  handleSubmit: (data: Record<string, string>) => void;
   showSocialButtons?: boolean;
-  handleTokenCallback?: (tokens: any) => void;
+  handleTokenCallback?: (tokens: AuthTokens) => void;
   className?: string;
 }

package/src/forms/ResetPasswordAuthForm/ResetPasswordAuthForm.types.ts

@@ -1,3 +1,3 @@
 export interface Props {
-  handleSubmit: (values: any) => void;
+  handleSubmit: (values: Record<string, string>) => void;
 }

package/src/forms/ResetPasswordForm/ResetPasswordForm.types.ts

@@ -1,3 +1,3 @@
 export interface Props {
-  handleSubmit: (values: any) => void;
+  handleSubmit: (values: Record<string, string>) => void;
 }

package/src/forms/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 export { default as LoginForm } from './LoginForm';
 export { default as RegisterForm } from './RegisterForm';
 export { default as ResetPasswordForm } from './ResetPasswordForm';

package/src/hooks/index.ts

@@ -1,2 +1,4 @@
+"use client";
+
 export { default as useLanguage } from './useLanguage';
 export { default as useTheme } from './useTheme';

package/src/hooks/useLanguage.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { STRINGS_EN } from '../translations';
 import { useContext } from 'react';
 import { AppContext } from '../context/App';

package/src/hooks/useTheme.ts

@@ -1,6 +1,8 @@
+"use client";
+
 import { useContext } from 'react';
 import { ThemeContext } from '../context/Theme';
 
-export default function useTheme(): any {
+export default function useTheme() {
   return useContext(ThemeContext);
 }

package/src/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 export * from './components';
 export * from './features';
 export * from './forms';

package/src/templates/AccountScreen/AccountScreen.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from 'react';
 import { FacebookShareButton, LinkedinShareButton, TwitterShareButton, WhatsappShareButton } from 'react-share';
 import Screen from '../../components/Screen';