@4alldigital/foundation-ui--core 3.0.0

package/src/components/index.ts

@@ -0,0 +1,143 @@
+// ATOMS
+export { default as AnimationCounter } from './AnimationCounter';
+export { default as Blockquote } from './Blockquote';
+export { default as Button } from './Button';
+export { default as Checkbox } from './Checkbox';
+export { default as Chip } from './Chip';
+export { default as Calendar } from './Calendar';
+export { default as Collapsible } from './Collapsible';
+export { default as Copy } from './Copy';
+export { default as FileUpload } from './FileUpload';
+export { default as Heading } from './Heading';
+export { default as Hr } from './Hr';
+export { default as Icon } from './Icon';
+export { default as Image } from './Image';
+export { default as Label } from './Label';
+export { default as Link } from './Link';
+export { default as List } from './List';
+export { default as Logo } from './Logo';
+export { default as ListItem } from './ListItem';
+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 { default as Avatar } from './Avatar';
+export { default as Banner } from './Banner';
+
+// MOLECULES
+export { default as ButtonGroup } from './ButtonGroup';
+export { default as Card } from './Card';
+export { default as DisplayHeading } from './DisplayHeading';
+export { default as Form } from './Form';
+export { default as FormField } from './FormField';
+export { default as FormSelect } from './FormSelect';
+export { default as Share } from './Share';
+export { default as Tabs } from './Tabs';
+export { default as VisitUs } from './VisitUs';
+export { default as Menu } from './Menu';
+export { default as Hero } from './Hero';
+export { default as HtmlContent } from './HtmlContent';
+
+// ORGANISMS
+export { default as AnimationSet1 } from './AnimationSet1';
+export { default as Authenticator } from './Authenticator';
+export { default as Carousel } from './Carousel';
+export { default as PanelCards } from './PanelCards';
+export { default as PanelFeature } from './PanelFeature';
+export { default as PanelHero } from './PanelHero';
+export { default as PanelProduct } from './PanelProduct';
+export { default as PanelVideo } from './PanelVideo';
+export { default as PanelIntro } from './PanelIntro';
+export { default as PanelCustom } from './PanelCustom';
+export { default as PanelScroller } from './PanelScroller';
+export { default as CardGrid } from './CardGrid';
+export { default as Screen } from './Screen';
+export { default as Accordion } from './Accordion';
+export { default as SubscriptionManager } from './SubscriptionManager';
+
+// LAYOUTS
+export { default as Container } from './Container';
+export { default as ContentPageLayout } from './ContentPageLayout';
+export { default as ContentRowsLayout } from './ContentRowsLayout';
+export { default as Footer } from './Footer';
+export { default as Header } from './Header';
+
+// UI
+export { default as Loader } from './Loader';
+export { default as Video } from './Video';
+export { default as OTPInput } from './OTPInput';
+export { default as FullScreenVideoModal } from './FullScreenVideoModal';
+export { default as Cart } from './Cart';
+export { default as FullContentBackgroundImage } from './FullContentBackgroundImage';
+
+// TYPES
+export type { Props as BlockquoteProps } from './Blockquote/Blockquote.types';
+export type { Props as ButtonProps } from './Button/Button.types';
+export { BTN_TYPES, BTN_VARIANTS, BTN_SIZES } from './Button/Button.types';
+export type { Props as CopyProps } from './Copy/Copy.types';
+export { COPY_ALIGN, COPY_TRANSFORM, COPY_CONTEXTUAL, COPY_SIZE, COPY_TAG } from './Copy/Copy.types';
+export type { Props as HeadingProps } from './Heading/Heading.types';
+export { HEADING_TAGS, HEADING_ALIGN, HEADING_TRANSFORM } from './Heading/Heading.types';
+export type { Props as IconProps } from './Icon/Icon.types';
+export type { Props as ImageProps } from './Image/Image.types';
+export type { Props as LinkProps } from './Link/Link.types';
+export type { Props as ListProps, VariantsTypes } from './List/List.types';
+export { Variants, ListTag } from './List/List.types';
+export type { Props as ListItemProps } from './ListItem/ListItem.types';
+export type { Props as NoticeProps } from './Notice/Notice.types';
+export type { Props as LoaderProps } from './Loader/Loader.types';
+export type { Props as ContainerProps } from './Container/Container.types';
+export type { Props as ContentPageLayoutProps } from './ContentPageLayout/ContentPageLayout.types';
+export { CPL_SPACING } from './ContentPageLayout/ContentPageLayout.types';
+export type { Props as ContentRowsLayoutProps } from './ContentRowsLayout/ContentRowsLayout.types';
+export { CRL_SIZE } from './ContentRowsLayout/ContentRowsLayout.types';
+export type { Props as FormProps } from './Form/Form.types';
+export type { Props as FormFieldProps } from './FormField/FormField.types';
+export { FIELD_TYPES } from './FormField/FormField.types';
+export type { Props as CardProps } from './Card/Card.types';
+export { CardVariant } from './Card/Card.types';
+export type { Props as PanelCardsProps } from './PanelCards/PanelCards.types';
+export type { Props as PanelFeatureProps } from './PanelFeature/PanelFeature.types';
+export type { Props as PanelHeroProps } from './PanelHero/PanelHero.types';
+export type { Props as PanelProductProps } from './PanelProduct/PanelProduct.types';
+export type { Props as PanelVideoProps } from './PanelVideo/PanelVideo.types';
+export type { Props as PanelIntroProps } from './PanelIntro/PanelIntro.types';
+export type { Props as PanelCustomProps } from './PanelCustom/PanelCustom.types';
+export type { Props as PanelScrollerProps } from './PanelScroller/PanelScroller.types';
+export type { Props as ShareProps } from './Share/Share.types';
+export type { Props as TabsProps } from './Tabs/Tabs.types';
+export type { Props as VisitUsProps } from './VisitUs/VisitUs.types';
+export type { Props as MenuProps } from './Menu/Menu.types';
+export type { Props as CheckboxProps } from './Checkbox/Checkbox.types';
+export type { Props as RadioProps } from './Radio/Radio.types';
+export type { Props as SwitchProps } from './Switch/Switch.types';
+export type { Props as TextInputProps } from './TextInput/TextInput.types';
+export type { Props as AnimationCounterProps } from './AnimationCounter/AnimationCounter.types';
+export type { Props as ButtonGroupProps } from './ButtonGroup/ButtonGroup.types';
+export type { Props as LogoProps } from './Logo/Logo.types';
+export type { Props as FormSelectProps } from './FormSelect/FormSelect.types';
+export type { Props as AuthenticatorProps } from './Authenticator/Authenticator.types';
+export type { Props as DisplayHeadingProps } from './DisplayHeading/DisplayHeading.types';
+export type { Props as AnimationSet1Props } from './AnimationSet1/AnimationSet1.types';
+export type { Props as FileUploadProps } from './FileUpload/FileUpload.types';
+export type { Props as HrProps } from './Hr/Hr.types';
+export type { Props as FooterProps } from './Footer/Footer.types';
+export type { Props as VideoProps } from './Video/Video.types';
+export type { Props as ChipProps } from './Chip/Chip.types';
+export type { CalendarProps } from './Calendar/Calendar.types';
+export type { CollapsibleRootProps, CollapsibleTriggerProps, CollapsibleContentProps } from './Collapsible/Collapsible.types';
+export type { Props as AvatarProps } from './Avatar/Avatar.types';
+export type { Props as BannerProps } from './Banner/Banner.types';
+export type { Props as OTPInputProps } from './OTPInput/OTPInput.types';
+export type { Props as HeroProps } from './Hero/Hero.types';
+export { SPACING } from './Hero/Hero.types';
+export type { Props as HtmlContentProps } from './HtmlContent/HtmlContent.types';
+export type { Props as CardGridProps } from './CardGrid/CardGrid.types';
+export type { Props as ScreenProps } from './Screen/Screen.types';
+export type { Props as CarouselProps } from './Carousel/Carousel.types';
+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 FullContentBackgroundImageProps } from './FullContentBackgroundImage/FullContentBackgroundImage.types';
+export type { Props as HeaderProps } from './Header/Header.types';

package/src/constants/index.ts

@@ -0,0 +1,6 @@
+// Date only
+export const DATE_FORMAT = 'MMMM dd, yyyy';
+// date with time
+export const DATE_TIME_FORMAT = 'MMMM dd, yyyy HH:mm';
+// TIme only
+export const TIME_FORMAT = 'HH:mm';

package/src/context/Amplify/index.tsx

@@ -0,0 +1,65 @@
+import React, { createContext, ReactNode, useEffect } from 'react';
+import { Amplify } from 'aws-amplify';
+
+interface AmplifyContextProps {
+  config: {
+    region?: string;
+    userPoolId?: string;
+    userPoolWebClientId?: string;
+    signUpVerificationMethod?: string;
+    oauth: {
+      domain?: string;
+      scope?: string[];
+      redirectSignIn?: string;
+      redirectSignOut?: string;
+      responseType?: string;
+    };
+    cookieStorage: {
+      domain?: string;
+      secure?: boolean;
+    };
+  };
+}
+
+export const AmplifyContext = createContext<AmplifyContextProps>({
+  config: {
+    region: 'eu-west-1',
+    oauth: {},
+    cookieStorage: {},
+  },
+});
+
+interface AmplifyProviderProps {
+  children: ReactNode;
+  value: AmplifyContextProps;
+}
+
+export const AmplifyProvider = ({ children, value }: AmplifyProviderProps) => {
+  useEffect(() => {
+    if (value.config) {
+      Amplify.configure({
+        Auth: {
+          region: value?.config?.region,
+          userPoolId: value?.config?.userPoolId,
+          userPoolWebClientId: value?.config?.userPoolWebClientId,
+          signUpVerificationMethod: value?.config?.signUpVerificationMethod || 'code', // 'code' | 'link'
+          oauth: {
+            domain: value?.config?.oauth?.domain,
+            scope: value?.config?.oauth?.scope || ['email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
+            redirectSignIn: value?.config?.oauth?.redirectSignIn,
+            redirectSignOut: value?.config?.oauth?.redirectSignOut,
+            responseType: value?.config?.oauth?.responseType || 'code', // or 'token', note that REFRESH token will only be generated when the responseType is code
+          },
+          cookieStorage: {
+            domain: value?.config?.cookieStorage?.domain,
+            secure: process.env.NODE_ENV === 'production' ? true : value?.config?.cookieStorage?.secure,
+          },
+        },
+      });
+    }
+  }, [value.config]);
+
+  return <AmplifyContext.Provider value={value}>{children}</AmplifyContext.Provider>;
+};
+
+export default AmplifyProvider;

package/src/context/App/index.tsx

@@ -0,0 +1,93 @@
+import React, { createContext, useContext } from 'react';
+import { ShareProps } from '../../components/VisitUs/VisitUs.types';
+
+interface AppContextProps {
+  brand?: {
+    logo: string;
+    logoAspectRatio: string;
+    name: string;
+    tagline?: string;
+    logoOnly?: boolean;
+  };
+  header?: {
+    authNav?: {
+      id: string;
+      title: string;
+      url: string;
+    }[];
+    anonNav?: {
+      id: string;
+      title: string;
+      url: string;
+    }[];
+    profile?: {
+      id: string;
+      title: string;
+      url: string;
+    }[];
+  };
+  footer?: {
+    about?: string;
+    visitUs?: {
+      facebook?: ShareProps;
+      instagram?: ShareProps;
+      linkedin?: ShareProps;
+      twitter?: ShareProps;
+      youtube?: ShareProps;
+    };
+    menus?: {
+      title: string;
+      links: {
+        id: string;
+        title: string;
+        url: string;
+        icon?: string;
+      }[];
+    }[];
+    custom: React.ReactNode;
+  };
+  locale?: {
+    lang?: string;
+    currency?: string;
+    country?: string;
+  };
+  images?: {
+    banner: string[];
+    placeholder: string;
+  };
+  app?: {
+    loginCallback?: () => void;
+    logoutCallback?: () => void;
+    isAuthenticated?: boolean;
+    showCart?: boolean;
+  };
+}
+
+export const AppContext = createContext<AppContextProps>({
+  brand: undefined,
+  header: undefined,
+  footer: undefined,
+  locale: undefined,
+  app: undefined,
+  images: undefined,
+});
+
+interface AppProviderProps {
+  children: React.ReactNode;
+  value: AppContextProps;
+}
+
+export const AppProvider = ({ children, value }: AppProviderProps) => {
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+};
+
+// Custom hook for easier access to the context
+export const useAppContext = (): AppContextProps => {
+  const context = useContext(AppContext);
+  if (context === undefined) {
+    throw new Error('useAppContext must be used within a AppProvider');
+  }
+  return context;
+};
+
+export default AppProvider;

package/src/context/Cart/index.tsx

@@ -0,0 +1,64 @@
+import { createContext, useContext, ReactNode } from 'react';
+
+// Define the context props (you can add more properties depending on your requirements)
+interface ContextProps {
+  value: {
+    items?: {
+      uuid: string;
+      title: string;
+      image: string;
+      options?: {
+        usage?: string | null;
+        selectedPrice?: number | null;
+        selectedLicense?: string | null;
+      };
+    }[];
+    taxRate?: {
+      country: string;
+      percentage: number;
+    };
+    taxAmount?: number;
+    promoCode?: {
+      code: string;
+      name: string;
+      discount: string;
+      discountedAmount: number;
+    };
+    currency?: {
+      symbol: string;
+      code: string;
+      showCode?: boolean;
+    };
+    cartTotal?: string;
+  };
+  handleRemoveFromCart?: (uuid: string) => void;
+  handleAddPromoCode?: (code: string) => void;
+  handleRemovePromoCode?: (code: string) => void;
+  handleCheckout?: () => void;
+  handleItemClick?: (uuid: string) => void;
+}
+
+// Create the context with a default value
+const CartContext = createContext<ContextProps | undefined>(undefined);
+
+// Provider component that will wrap your app or specific part of it
+interface CartProviderProps {
+  children: ReactNode;
+  data: ContextProps;
+}
+
+// SImple Provider context from app for component data UI render.
+export const CartProvider = ({ children, data }: CartProviderProps) => {
+  return <CartContext.Provider value={data}>{children}</CartContext.Provider>;
+};
+
+// Custom hook for easier access to the context
+export const useCartContext = (): ContextProps => {
+  const context = useContext(CartContext);
+  if (context === undefined) {
+    throw new Error('useCartContext must be used within a CartProvider');
+  }
+  return context;
+};
+
+export default CartProvider;

package/src/context/ExampleContext/index.tsx

@@ -0,0 +1,34 @@
+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;
+}
+
+// Create the context with a default value
+const ExampleContext = createContext<ContextProps | undefined>(undefined);
+
+// Provider component that will wrap your app or specific part of it
+interface ExampleProviderProps {
+  children: ReactNode;
+  value: ContextProps;
+}
+
+export const ExampleProvider = ({ children, value }: ExampleProviderProps) => {
+  // Define your state here
+  const [someState, setSomeState] = useState<string>('default value');
+
+  // Pass the state and setter through the context provider
+  return <ExampleContext.Provider value={{ someState, setSomeState, value }}>{children}</ExampleContext.Provider>;
+};
+
+// Custom hook for easier access to the context
+export const useMyContext = (): ContextProps => {
+  const context = useContext(ExampleContext);
+  if (context === undefined) {
+    throw new Error('useMyContext must be used within a ExampleProvider');
+  }
+  return context;
+};

package/src/context/Theme/index.tsx

@@ -0,0 +1,37 @@
+// State management for theme with Context API
+// Theme provider for the application
+// keeps track of the current theme selected by user
+import React, { useContext } from 'react';
+interface ThemeContextProps {
+  isDarkTheme: boolean;
+  toggleTheme: () => void;
+  theme?: any;
+}
+
+export const defaultTheme: ThemeContextProps = {
+  isDarkTheme: false,
+  toggleTheme: () => {},
+  theme: undefined,
+};
+
+export const ThemeContext = React.createContext<ThemeContextProps>(defaultTheme);
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  theme: ThemeContextProps;
+}
+
+export const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+};
+
+// Custom hook for easier access to the context
+export const useThemeContext = (): ThemeContextProps => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useThemeContext must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+export default ThemeProvider;

package/src/context/index.ts

@@ -0,0 +1,18 @@
+// export { default as ThemeContext } from './Theme';
+// export { default as AppContext } from './AppContext';
+
+// Theme
+export * from './Theme';
+export { default as ThemeProvider } from './Theme';
+
+// App
+export * from './App';
+export { default as AppProvider } from './App';
+
+// Amplify
+export * from './Amplify';
+export { default as AmplifyProvider } from './Amplify';
+
+// Cart
+export * from './Cart';
+export { default as CartProvider } from './Cart';