@4alldigital/foundation-ui--core 3.0.0

package/src/forms/SubscriptionForm/SubscriptionForm.types.ts

@@ -0,0 +1,6 @@
+export interface Props {
+  testID?: string;
+  initialValues?: Record<string, string>;
+  handleSubmit: (values: Record<string, string>) => void;
+  isDisabled?: boolean;
+}

package/src/forms/SubscriptionForm/index.ts

@@ -0,0 +1 @@
+export { default } from './SubscriptionForm';

package/src/forms/constants/index.ts

@@ -0,0 +1,13 @@
+const COGNITO_USERPOOL_DOMAIN =
+  process.env.AWS_COGNITO_USERPOOL_DOMAIN || process.env.NEXT_PUBLIC_AWS_COGNITO_USERPOOL_DOMAIN;
+const COGNITO_CLIENT_ID = process.env.AWS_COGNITO_CLIENT_ID || process.env.NEXT_PUBLIC_AWS_COGNITO_CLIENT_ID;
+const COGNITO_REDIRECT_URI = process.env.AWS_COGNITO_REDIRECT_URI || process.env.NEXT_PUBLIC_AWS_COGNITO_REDIRECT_URI;
+
+export const socialLoginUrlGoogle =
+  COGNITO_USERPOOL_DOMAIN && COGNITO_CLIENT_ID && COGNITO_REDIRECT_URI
+    ? `https://${COGNITO_USERPOOL_DOMAIN}/oauth2/authorize?client_id=${COGNITO_CLIENT_ID}&response_type=code&scope=aws.cognito.signin.user.admin+email+openid+profile&identity_provider=Google&redirect_uri=${COGNITO_REDIRECT_URI}`
+    : undefined;
+export const socialLoginUrlApple =
+  COGNITO_USERPOOL_DOMAIN && COGNITO_CLIENT_ID && COGNITO_REDIRECT_URI
+    ? `https://${COGNITO_USERPOOL_DOMAIN}/oauth2/authorize?client_id=${COGNITO_CLIENT_ID}&response_type=CODE&scope=aws.cognito.signin.user.admin+email+openid+profile&identity_provider=SignInWithApple&redirect_uri=${COGNITO_REDIRECT_URI}`
+    : undefined;

package/src/forms/index.ts

@@ -0,0 +1,17 @@
+export { default as LoginForm } from './LoginForm';
+export { default as RegisterForm } from './RegisterForm';
+export { default as ResetPasswordForm } from './ResetPasswordForm';
+export { default as ResetPasswordAuthForm } from './ResetPasswordAuthForm';
+export { default as ForgotPasswordForm } from './ForgotPasswordForm';
+export { default as ProfileForm } from './ProfileForm';
+export { default as PromoCodeForm } from './PromoCodeForm';
+
+export type { Props as LoginFormProps } from './LoginForm/LoginForm.types';
+export type { Props as RegisterFormProps } from './RegisterForm/RegisterForm.types';
+export type { Props as ResetPasswordFormProps } from './ResetPasswordForm/ResetPasswordForm.types';
+export type { Props as ResetPasswordAuthFormProps } from './ResetPasswordAuthForm/ResetPasswordAuthForm.types';
+export type { Props as ForgotPasswordFormProps } from './ForgotPasswordForm/ForgotPasswordForm.types';
+export type { Props as ProfileFormProps } from './ProfileForm/ProfileForm.types';
+export type { Props as PromoCodeFormProps } from './PromoCodeForm/PromoCodeForm.types';
+
+export * from "./validations"; 

package/src/forms/validations/index.ts

@@ -0,0 +1,39 @@
+import { isPossiblePhoneNumber, isValidPhoneNumber, validatePhoneNumberLength } from 'libphonenumber-js';
+
+export const validEmail = {
+  required: 'Email required',
+  pattern: {
+    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+    message: 'Invalid email address',
+  },
+};
+
+export const validPassword = {
+  required: 'You must specify a password',
+  minLength: {
+    value: 8,
+    message: 'Password must have at least 8 characters',
+  },
+  pattern: {
+    value: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/,
+    message:
+      'Password must contain contain at least one number, one uppercase letter, one lowercase letter, and one special character.',
+  },
+};
+
+export const validatePhoneNumber = (value: string) => {
+  try {
+    const phoneNumber = value;
+    const isPossiblePhoneNumberResult = isPossiblePhoneNumber(phoneNumber);
+    const isValidPhoneNumberResult = isValidPhoneNumber(phoneNumber);
+    const isValidPhoneNumberLength = validatePhoneNumberLength(phoneNumber);
+    if (isPossiblePhoneNumberResult && isValidPhoneNumberResult && isValidPhoneNumberLength) {
+      return undefined; // Phone number is valid.
+    } else {
+      return 'Not a valid phone number'; // Phone number is not valid.
+    }
+  } catch {
+    // Handle parsing errors, such as an invalid phone number.
+    return 'Not a valid phone number';
+  }
+};

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useLanguage } from './useLanguage';
+export { default as useTheme } from './useTheme';

package/src/hooks/useLanguage.ts

@@ -0,0 +1,18 @@
+import { STRINGS_EN } from '../translations';
+import { useContext } from 'react';
+import { AppContext } from '../context/App';
+
+export default function useLanguage(): typeof STRINGS_EN {
+  const context = useContext(AppContext);
+
+  function selectLang(lang?: string) {
+    switch (lang) {
+      case 'en':
+        return STRINGS_EN;
+      default:
+        return STRINGS_EN;
+    }
+  }
+
+  return selectLang(context.locale?.lang);
+}

package/src/hooks/useTheme.ts

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

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './components';
+export * from './features';
+export * from './forms';
+export * from './context';
+export * from './translations';
+export * from './hooks';
+export * from './templates';
+export * from './utils';

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/src/templates/AccountScreen/AccountScreen.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import AccountScreen from '.';
+
+const meta: Meta<typeof AccountScreen> = {
+  title: 'TEMPLATES/AccountScreen',
+  component: AccountScreen,
+};
+
+type Story = StoryObj<typeof AccountScreen>;
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Account',
+    testID: 'account',
+    image: 'https://picsum.photos/600/400',
+    user: {
+      profile: {
+        firstName: 'Joe',
+        lastName: 'Bloggs',
+        email: 'joe.bloggs@example.com',
+        // picture: 'https://dpyu2eix72mhm.cloudfront.net/1723117330741-CB12A65C-FBBD-4F91-89F4-1AE8BB9AC72F.jpg',
+        dateOfBirth: '1980-01-01',
+      },
+      subscription: {
+        status: 'Active',
+        price: '$9.99',
+        nextBillingDate: '2024-12-31',
+        cardType: 'Visa',
+        cardNumber: '**** **** **** 1234',
+        cardExpiry: '12/24',
+      },
+    },
+    logoutCallback: () => console.log('logoutCallback'),
+    resetPasswordCallback: () => console.log('resetPasswordCallback'),
+    menu: [
+      {
+        title: 'Profile',
+        route: 'Profile',
+        icon: 'account',
+        onClick: () => console.log('Profile'),
+      },
+      {
+        title: 'Subscription',
+        route: 'Subscription',
+        icon: 'credit-card',
+        onClick: () => console.log('Subscription'),
+      },
+      {
+        title: 'Settings',
+        route: 'Settings',
+        icon: 'cog',
+        onClick: () => console.log('Settings'),
+      },
+      {
+        title: 'Help',
+        route: 'Help',
+        icon: 'help-circle',
+        onClick: () => console.log('Help'),
+      },
+    ],
+  },
+};
+
+export default meta;

package/src/templates/AccountScreen/AccountScreen.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { FacebookShareButton, LinkedinShareButton, TwitterShareButton, WhatsappShareButton } from 'react-share';
+import Screen from '../../components/Screen';
+import { Props } from './AccountScreen.types';
+import { Avatar, Button, DisplayHeading, Heading, HEADING_TAGS, Icon, List, ListItem } from '../../components';
+import { useLanguage } from '../../hooks';
+
+const AccountScreen = ({
+  testID,
+  title,
+  image,
+  user,
+  logoutCallback,
+  resetPasswordCallback,
+  menu,
+  shareURL,
+}: Props) => {
+  const T = useLanguage();
+  return (
+    <Screen data-testid={testID || 'AccountScreen'} image={image}>
+      {title && <DisplayHeading text={title} />}
+      <div>
+        <div className="flex items-center justify-center">
+          <Avatar initValue={user?.profile?.picture} isEditable={false} />
+        </div>
+        {menu && (
+          <div>
+            <List className="flex items-center flex-col justify-center gap-2">
+              {menu?.map((item, index) => (
+                <ListItem key={index} as="div" title={item.title} icon={item.icon} onClick={item.onClick} />
+              ))}
+            </List>
+          </div>
+        )}
+        <div className="my-4 flex flex-col gap-8 justify-center items-center">
+          {shareURL && (
+            <div className="flex items-center flex-col justify-center gap-1">
+              <Heading tag={HEADING_TAGS.H5} flush>
+                {T.UI.SHARE}
+              </Heading>
+              <div className="flex gap-2">
+                <FacebookShareButton url={shareURL}>
+                  <Icon name="mdi:facebook" />
+                </FacebookShareButton>
+                <TwitterShareButton url={shareURL}>
+                  <Icon name="mdi:twitter" />
+                </TwitterShareButton>
+                <LinkedinShareButton url={shareURL}>
+                  <Icon name="mdi:linkedin" />
+                </LinkedinShareButton>
+                <WhatsappShareButton url={shareURL}>
+                  <Icon name="mdi:whatsapp" />
+                </WhatsappShareButton>
+              </div>
+            </div>
+          )}
+          <div className="flex flex-col gap-2">
+            {resetPasswordCallback && (
+              <Button onClick={resetPasswordCallback} icon="mdi:lock-reset">
+                {T?.UI.RESET_PASSWORD}
+              </Button>
+            )}
+            {logoutCallback && (
+              <Button onClick={logoutCallback} icon="mdi:logout">
+                {T?.UI.LOGOUT}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </Screen>
+  );
+};
+
+AccountScreen.displayName = 'AccountScreen';
+
+export default AccountScreen;
+export type { Props };

package/src/templates/AccountScreen/AccountScreen.types.ts

@@ -0,0 +1,31 @@
+export interface Props {
+  testID: string;
+  title?: string;
+  image?: string;
+  shareURL?: string;
+  user?: {
+    profile?: {
+      picture?: string;
+      firstName?: string;
+      lastName?: string;
+      dateOfBirth?: string;
+      email: string;
+    };
+    subscription?: {
+      status?: string;
+      price?: string;
+      nextBillingDate?: string;
+      cardType?: string;
+      cardNumber?: string;
+      cardExpiry?: string;
+    };
+  };
+  logoutCallback: () => void;
+  resetPasswordCallback?: () => void;
+  menu: {
+    title: string;
+    route: string;
+    icon?: string;
+    onClick: () => void;
+  }[];
+}

package/src/templates/AccountScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './AccountScreen';

package/src/templates/AuthScreen/AuthScreen.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import AuthScreen from '.';
+
+const meta: Meta<typeof AuthScreen> = {
+  title: 'TEMPLATES/AuthScreen',
+  component: AuthScreen,
+};
+
+type Story = StoryObj<typeof AuthScreen>;
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    // title: 'Auth Screen',
+    image: 'https://picsum.photos/1600/900',
+    formProps: {
+      loginSubmit: async (values: any) => {
+        console.log('Login values', values);
+      },
+      registerSubmit: async (values: any) => {
+        console.log('Register values', values);
+      },
+      passwordForgotSubmit: async (values: any) => {
+        console.log('Forgot Password values', values);
+      },
+      showSocialLogin: true,
+    },
+  },
+};
+
+export default meta;

package/src/templates/AuthScreen/AuthScreen.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import { Props } from './AuthScreen.types';
+import Authenticator from '../../components/Authenticator';
+import DisplayHeading from '../../components/DisplayHeading';
+
+const AuthScreen = ({ testID, title, image, formProps }: Props) => {
+  return (
+    <Screen data-testid={testID || 'AuthScreen'} image={image}>
+      {title && <DisplayHeading text={title} />}
+      <div className='flex justify-center'>
+        <Authenticator {...formProps} />
+      </div>
+    </Screen>
+  );
+};
+
+AuthScreen.displayName = 'AuthScreen';
+
+export default AuthScreen;
+export type { Props };

package/src/templates/AuthScreen/AuthScreen.types.ts

@@ -0,0 +1,8 @@
+import { Props as AuthProps } from '../../components/Authenticator/Authenticator.types';
+export interface Props {
+  testID?: string;
+  title?: string;
+  isLoading?: boolean;
+  image?: string;
+  formProps: AuthProps;
+}

package/src/templates/AuthScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './AuthScreen';

package/src/templates/CardGridScreen/CardGridScreen.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import CardGridScreen from '.';
+import { CardVariant } from '../../components';
+
+const meta: Meta<typeof CardGridScreen> = {
+  title: 'TEMPLATES/CardGridScreen',
+  component: CardGridScreen,
+};
+
+type Story = StoryObj<typeof CardGridScreen>;
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Card Grid Screen',
+    image: 'https://picsum.photos/800/350',
+    data: [
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-uiop',
+          title: 'Banking improves',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Banking improves',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-uiop',
+          title: 'Banking improves',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Banking improves',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-uiop',
+          title: 'Finance news',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Finance news',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-uiop',
+          title: 'Oil gains',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Oil gains',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-uiop',
+          title: 'Oil gains',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Oil gains',
+          },
+          raised: true,
+        },
+      },
+    ],
+  },
+};
+
+export const NoCardData: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Card Grid Screen',
+    image: 'https://picsum.photos/800/350',
+    noDataMessage: 'No data available',
+  },
+};
+
+export default meta;

package/src/templates/CardGridScreen/CardGridScreen.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import { Props } from './CardGridScreen.types';
+import DisplayHeading from '../../components/DisplayHeading';
+import Loader from '../../components/Loader';
+import CardGrid from '../../components/CardGrid';
+import Copy from '../../components/Copy';
+import { useLanguage } from '../../hooks';
+
+const CardGridScreen = ({
+  testID,
+  title,
+  image,
+  data,
+  onPressCallback,
+  isLoading,
+  noDataMessage,
+}: Props) => {
+  const T = useLanguage();
+  return (
+    <Screen data-testid={testID || 'CardGridScreen'} image={image}>
+      {title && <DisplayHeading text={title} />}
+      <div>
+        {isLoading && (
+          <div className="flex flex-1 min-h-[125px] items-center justify-center">
+            <Loader />
+          </div>
+        )}
+        {data && <CardGrid data={data} onPressCallback={onPressCallback} />}
+        {!data && !isLoading && (
+          <div>
+            <Copy>{noDataMessage || T?.UI?.NO_DATA}</Copy>
+          </div>
+        )}
+      </div>
+    </Screen>
+  );
+};
+
+CardGridScreen.displayName = 'CardGridScreen';
+
+export default CardGridScreen;
+export type { Props };

package/src/templates/CardGridScreen/CardGridScreen.types.ts

@@ -0,0 +1,11 @@
+import { Props as CardProps } from '../../components/Card/Card.types';
+
+export interface Props {
+  testID?: string;
+  title: string;
+  image?: string;
+  data?: CardProps[];
+  onPressCallback: (id: string) => void;
+  isLoading?: boolean;
+  noDataMessage?: string;
+}

package/src/templates/CardGridScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './CardGridScreen';

package/src/templates/CatalogueScreen/CatalogueScreen.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import CatalogueScreen from '.';
+import CONFIG from '../../__mocks__/_examples/nrg';
+import { ResultAsTypes } from '../../features';
+
+const meta: Meta<typeof CatalogueScreen> = {
+  title: 'TEMPLATES/CatalogueScreen',
+  component: CatalogueScreen,
+};
+
+type Story = StoryObj<typeof CatalogueScreen>;
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    testID: 'CatalogueScreen',
+    searchProps: {
+      showOptions: [16, 24, 32],
+      config: CONFIG.config,
+      ResultFieldMap: CONFIG.fieldMap,
+      facetDisplay: CONFIG.facets,
+      resultAs: ResultAsTypes.cardMedia,
+      showPagingInfo: true,
+      showTextSearch: true,
+    },
+  },
+};
+
+export default meta;

package/src/templates/CatalogueScreen/CatalogueScreen.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import { Props } from './CatalogueScreen.types';
+import DisplayHeading from '../../components/DisplayHeading';
+import { Search } from '../../features';
+
+const CatalogueScreen = ({ testID, title, image, searchProps }: Props) => {
+  return (
+    <Screen data-testid={testID || 'CatalogueScreen'} image={image}>
+      {title && <DisplayHeading text={title} />}
+      <div>
+        <Search {...searchProps} />
+      </div>
+    </Screen>
+  );
+};
+
+CatalogueScreen.displayName = 'CatalogueScreen';
+
+export default CatalogueScreen;
+export type { Props };

package/src/templates/CatalogueScreen/CatalogueScreen.types.ts

@@ -0,0 +1,8 @@
+import { Props as SearchProps } from '../../features/Search/Search.types';
+
+export interface Props {
+  testID?: string;
+  title: string;
+  image?: string;
+  searchProps: SearchProps;
+}

package/src/templates/CatalogueScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './CatalogueScreen';