@4alldigital/foundation-ui--core 3.0.0

package/src/forms/LoginForm/LoginForm.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect } from 'react';
+import cx from 'classnames';
+import { Props } from './LoginForm.types';
+import { socialLoginUrlApple, socialLoginUrlGoogle } from '../constants';
+import { Auth, Hub } from 'aws-amplify';
+import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth';
+import { validEmail } from '../validations';
+import STRINGS from '../../translations';
+import Form from '../../components/Form';
+import FormField from '../../components/FormField';
+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 { useLanguage } from '../../hooks';
+
+const LoginForm = ({
+  handleSubmit,
+  initialValues,
+  handleTokenCallback,
+  showSocialButtons = false,
+  className,
+}: Props) => {
+  const T = useLanguage();
+
+  useEffect(() => {
+    const unsubscribe = Hub.listen('auth', ({ payload: { event, data } }) => {
+      switch (event) {
+        case 'signIn':
+          if (handleTokenCallback && typeof handleTokenCallback === 'function') {
+            handleTokenCallback(data.signInUserSession);
+          }
+          break;
+        case 'signOut':
+          toast.success('You have been signed out');
+          break;
+      }
+    });
+    return unsubscribe;
+  }, []);
+
+  const authWithSocial = async (provider: CognitoHostedUIIdentityProvider) => {
+    try {
+      Auth.federatedSignIn({
+        provider: provider,
+      });
+    } catch (error: any) {
+      console.log(error);
+      toast.error(error.message || T?.ERRORS?.GENERIC_ERROR);
+    }
+  };
+
+  return (
+    <div data-testid="LoginForm" className={cx("form-wrapper", className)}>
+      <Form
+        onSubmit={handleSubmit}
+        submit={STRINGS.FORMS.LOGIN_FORM.SUBMIT}
+        initialValues={initialValues}>
+        <FormField
+          name="email"
+          type={FIELD_TYPES.EMAIL}
+          label={STRINGS.FORMS.LOGIN_FORM.EMAIL}
+          required
+          validations={validEmail}
+          autoComplete="email"
+        />
+        <FormField
+          name="password"
+          type={FIELD_TYPES.PASSWORD}
+          label={STRINGS.FORMS.LOGIN_FORM.PASSWORD}
+          required
+          autoComplete="current-password"
+        />
+      </Form>
+      {showSocialButtons && (
+        <>
+          <Hr />
+          <div className="flex flex-col gap-4 items-center">
+            <div className="flex flex-col gap-4 max-w-[250px]">
+              {socialLoginUrlGoogle && (
+                <Button
+                  // onClick={() => window.location.assign(socialLoginUrlGoogle)}
+                  onClick={() => authWithSocial(CognitoHostedUIIdentityProvider.Google)}
+                  variant={BTN_VARIANTS.PRIMARY}
+                  iconFirst
+                  icon="mdi:google">
+                  {STRINGS.UI.LOGIN_WITH_GOOGLE}
+                </Button>
+              )}
+              {socialLoginUrlApple && (
+                <Button
+                  // onClick={() => window.location.assign(socialLoginUrlApple)}
+                  onClick={() => authWithSocial(CognitoHostedUIIdentityProvider.Apple)}
+                  variant={BTN_VARIANTS.PRIMARY}
+                  iconFirst
+                  icon="mdi:apple">
+                  {STRINGS.UI.LOGIN_WITH_APPLE}
+                </Button>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+LoginForm.displayName = 'LoginForm';
+
+export default LoginForm;
+export type { Props };

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

@@ -0,0 +1,7 @@
+export interface Props {
+  initialValues?: Record<string, string>;
+  handleSubmit: (values: Record<string, string>) => void;
+  handleTokenCallback?: (tokens: any) => void;
+  showSocialButtons?: boolean;
+  className?: string;
+}

package/src/forms/LoginForm/index.ts

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

package/src/forms/ProfileForm/ProfileForm.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ProfileForm from '.';
+
+const meta: Meta<typeof ProfileForm> = {
+  title: 'FORMS/ProfileForm',
+  component: ProfileForm,
+};
+
+type Story = StoryObj<typeof ProfileForm>;
+
+export const Default: Story = {
+  args: {
+    handleSubmit: (values) => console.log('values', values),
+    initialValues: {
+      firstName: 'Joe',
+      lastName: 'Bloggs',
+      email: 'joe@bloggs.com',
+      picture: 'http://via.placeholder.com/450x400',
+    },
+  },
+};
+
+export default meta;

package/src/forms/ProfileForm/ProfileForm.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Props } from './ProfileForm.types';
+import { FIELD_TYPES } from '../../components/FormField/FormField.types';
+import Form from '../../components/Form';
+import FormField from '../../components/FormField';
+import { validEmail } from '../validations';
+import Avatar from '../../components/Avatar';
+import { useLanguage } from '../../hooks';
+
+const ProfileForm = ({ testID, initialValues, handleSubmit, avatarUpdateCallback }: Props) => {
+  const T = useLanguage();
+
+  return (
+    <div data-testid={testID || '"ProfileForm"'} className="form-wrapper">
+      <Form
+        onSubmit={handleSubmit}
+        submit={T.FORMS.PROFILE_FORM.SUBMIT}
+        initialValues={initialValues}>
+        <div className="mb-4 items-center justify-center flex">
+          <Avatar name="avatar" initValue={initialValues?.picture} fileUpdateCallback={avatarUpdateCallback} />
+        </div>
+        <FormField name="picture" type={FIELD_TYPES.HIDDEN} />
+        <FormField name="firstName" type={FIELD_TYPES.TEXT} label={T.FORMS.PROFILE_FORM.FIRST_NAME} required />
+        <FormField name="lastName" type={FIELD_TYPES.TEXT} label={T.FORMS.PROFILE_FORM.LAST_NAME} required />
+        <FormField
+          name="email"
+          type={FIELD_TYPES.EMAIL}
+          label={T.FORMS.PROFILE_FORM.EMAIL}
+          required
+          validations={validEmail}
+        />
+      </Form>
+    </div>
+  );
+};
+
+ProfileForm.displayName = 'ProfileForm';
+
+export default ProfileForm;
+export type { Props };

package/src/forms/ProfileForm/ProfileForm.types.ts

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

package/src/forms/ProfileForm/index.ts

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

package/src/forms/PromoCodeForm/PromoCodeForm.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import PromoCodeForm from '.';
+
+const meta: Meta<typeof PromoCodeForm> = {
+  title: 'FORMS/PromoCodeForm',
+  component: PromoCodeForm,
+};
+
+type Story = StoryObj<typeof PromoCodeForm>;
+
+export const Default: Story = {
+  args: {
+    handleSubmit: async (values: any) => {
+      console.log('Promocode values', values);
+    },
+  },
+};
+
+export default meta;

package/src/forms/PromoCodeForm/PromoCodeForm.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Props } from './PromoCodeForm.types';
+import { useLanguage } from '../../hooks';
+import Form from '../../components/Form';
+import FormField from '../../components/FormField';
+import { FIELD_TYPES } from '../../components/FormField/FormField.types';
+
+const PromoCodeForm = ({ handleSubmit = () => {} }: Props) => {
+  const T = useLanguage();
+  return (
+    <div data-testid="PromoCodeForm" className="form-wrapper">
+      <Form onSubmit={handleSubmit} submit={T?.FORMS?.PROMO_CODE_FORM?.SUBMIT}>
+        <FormField name="promoCode" type={FIELD_TYPES.TEXT} label={T?.FORMS?.PROMO_CODE_FORM?.PROMO_CODE} />
+      </Form>
+    </div>
+  );
+};
+
+PromoCodeForm.displayName = 'PromoCodeForm';
+
+export default PromoCodeForm;
+export type { Props };

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

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

package/src/forms/PromoCodeForm/index.ts

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

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

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import RegisterForm from '.';
+import { toast } from 'react-toastify';
+
+const meta: Meta<typeof RegisterForm> = {
+  title: 'FORMS/RegisterForm',
+  component: RegisterForm,
+};
+
+type Story = StoryObj<typeof RegisterForm>;
+
+export const Default: Story = {
+  args: {
+    handleSubmit: async (values: any) => {
+      console.log('Register values', values);
+      try {
+        console.log('Login values', values);
+        const response = await fetch('http://localhost:9003/1.0/user/login', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(values),
+        });
+        const json = await response.json();
+        if (response.ok) {
+          console.log('Login json', json);
+          toast.info(json?.message);
+        }
+        throw new Error(json?.message);
+      } catch (err: any) {
+        console.log(err);
+        toast.error(err.message);
+      }
+    },
+    showSocialButtons: false,
+  },
+  render: (args) => {
+    // const [accessToken, setAccessToken] = useState<string | null>(null);
+
+    // const handleTokenCallback = (tokens: any) => {
+    //   console.log('handleTokenCallback', tokens);
+    //   setAccessToken(tokens.accessToken);
+    // };
+
+    // const handleSubmit = async (values: any) => {
+    //   try {
+    //     console.log('Login values', values);
+    //     const response = await fetch('http://localhost:9003/1.0/user/login', {
+    //       method: 'POST',
+    //       headers: {
+    //         'Content-Type': 'application/json',
+    //       },
+    //       body: JSON.stringify(values),
+    //     });
+    //     const json = await response.json();
+    //     if (response.ok) {
+    //       console.log('Login json', json);
+    //       toast.info(json?.message);
+    //     }
+    //     throw new Error(json?.message);
+    //   } catch (err: any) {
+    //     console.log(err);
+    //     toast.error(err.message);
+    //   }
+    // };
+
+    // const now = new Date().getTime();
+    // const initialValues = {
+    //   email: `joe+${now}@4alldigital.com`,
+    //   password: 'Password123!',
+    // };
+
+    return (
+      <RegisterForm
+        {...args}
+        // handleSubmit={handleSubmit}
+        // initialValues={initialValues}
+        // showSocialButtons={false}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/forms/RegisterForm/RegisterForm.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect } from 'react';
+import cx from 'classnames';
+import { Auth, Hub } from 'aws-amplify';
+import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth';
+import Form from '../../components/Form';
+import FormField from '../../components/FormField';
+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 { socialLoginUrlApple, socialLoginUrlGoogle } from '../constants';
+import { validEmail, validPassword } from '../validations';
+import STRINGS from '../../translations';
+import { useLanguage } from '../../hooks';
+import { Props } from './RegisterForm.types';
+import { toast } from 'react-toastify';
+
+const RegisterForm = ({
+  handleSubmit,
+  handleTokenCallback,
+  showSocialButtons = false,
+  className,
+}: Props) => {
+  const T = useLanguage();
+
+  useEffect(() => {
+    const unsubscribe = Hub.listen('auth', ({ payload: { event, data } }) => {
+      switch (event) {
+        case 'signUp':
+          if (handleTokenCallback && typeof handleTokenCallback === 'function') {
+            handleTokenCallback(data.signInUserSession);
+          }
+          break;
+      }
+    });
+    return unsubscribe;
+  }, []);
+
+  const authWithSocial = async (provider: CognitoHostedUIIdentityProvider) => {
+    try {
+      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);
+    }
+  };
+
+  return (
+    <div data-testid="RegisterForm" className={cx('form-wrapper', className)}>
+      <Form onSubmit={handleSubmit} submit={STRINGS.FORMS.REGISTER_FORM.SUBMIT}>
+        <FormField
+          name="email"
+          type={FIELD_TYPES.EMAIL}
+          label={STRINGS.FORMS.REGISTER_FORM.EMAIL}
+          required
+          validations={validEmail}
+          autoComplete="email"
+        />
+        <FormField
+          name="password"
+          type={FIELD_TYPES.PASSWORD}
+          label={STRINGS.FORMS.REGISTER_FORM.PASSWORD}
+          required
+          description={STRINGS.FORMS.REGISTER_FORM.PASSWORD_DESCRIPTION}
+          validations={validPassword}
+          autoComplete="new-password"
+        />
+      </Form>
+      {showSocialButtons && (
+        <>
+          <Hr />
+          <div className="flex flex-col gap-4 items-center">
+            <div className="flex flex-col gap-4 max-w-[250px]">
+              <Button
+                // onClick={() => window.location.assign(socialLoginUrlGoogle)}
+                onClick={() => authWithSocial(CognitoHostedUIIdentityProvider.Google)}
+                variant={BTN_VARIANTS.PRIMARY}
+                iconFirst
+                icon="mdi:google">
+                {STRINGS.UI.SIGNUP_WITH_GOOGLE}
+              </Button>
+              <Button
+                // onClick={() => window.location.assign(socialLoginUrlApple)}
+                onClick={() => authWithSocial(CognitoHostedUIIdentityProvider.Apple)}
+                variant={BTN_VARIANTS.PRIMARY}
+                iconFirst
+                icon="mdi:apple">
+                {STRINGS.UI.SIGNUP_WITH_APPLE}
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+RegisterForm.displayName = 'RegisterForm';
+
+export default RegisterForm;
+export type { Props };

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

@@ -0,0 +1,6 @@
+export interface Props {
+  handleSubmit: (data: Record<string, any>) => void;
+  showSocialButtons?: boolean;
+  handleTokenCallback?: (tokens: any) => void;
+  className?: string;
+}

package/src/forms/RegisterForm/index.ts

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

package/src/forms/ResetPasswordAuthForm/ResetPasswordAuthForm.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ResetPasswordAuthForm from '.';
+
+const meta: Meta<typeof ResetPasswordAuthForm> = {
+  title: 'FORMS/ResetPasswordAuthForm',
+  component: ResetPasswordAuthForm,
+};
+
+type Story = StoryObj<typeof ResetPasswordAuthForm>;
+
+export const Default: Story = {
+  args: {
+    handleSubmit: async (values: any) => {
+      console.log('ResetPassword values', values);
+      const randomIntBetweenOneAndTwenty = Math.floor(Math.random() * 20) + 1;
+      const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${randomIntBetweenOneAndTwenty}`);
+      const json = await response.json();
+      console.log('ResetPassword json', json);
+    },
+  },
+};
+
+export default meta;

package/src/forms/ResetPasswordAuthForm/ResetPasswordAuthForm.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Props } from './ResetPasswordAuthForm.types';
+import { useLanguage } from '../../hooks';
+import Form from '../../components/Form/Form';
+import FormField from '../../components/FormField';
+import { FIELD_TYPES } from '../../components/FormField/FormField.types';
+import { validPassword } from '../validations';
+
+const ResetPasswordAuthForm = ({ handleSubmit }: Props) => {
+  const T = useLanguage();
+  return (
+    <div data-testid="ResetPasswordAuthForm" className="form-wrapper">
+      <Form onSubmit={handleSubmit} submit={T.FORMS.RESET_PASSWORD_FORM.SUBMIT}>
+        <FormField
+          name="current-password"
+          autoComplete="current-password"
+          type={FIELD_TYPES.PASSWORD}
+          label={T.FORMS.RESET_PASSWORD_FORM_AUTH.CURRENT_PASSWORD}
+          required
+          validations={validPassword}
+        />
+        <FormField
+          name="new-password"
+          autoComplete="new-password"
+          type={FIELD_TYPES.PASSWORD}
+          label={T.FORMS.RESET_PASSWORD_FORM_AUTH.NEW_PASSWORD}
+          required
+          validations={validPassword}
+        />
+      </Form>
+    </div>
+  );
+};
+
+ResetPasswordAuthForm.displayName = 'ResetPasswordAuthForm';
+
+export default ResetPasswordAuthForm;
+export type { Props };
+

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

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

package/src/forms/ResetPasswordAuthForm/index.ts

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

package/src/forms/ResetPasswordForm/ResetPasswordForm.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ResetPasswordForm from '.';
+
+const meta: Meta<typeof ResetPasswordForm> = {
+  title: 'FORMS/ResetPasswordForm',
+  component: ResetPasswordForm,
+};
+
+type Story = StoryObj<typeof ResetPasswordForm>;
+
+export const Default: Story = {
+  args: {
+    handleSubmit: async (values: any) => {
+      console.log('ResetPassword values', values);
+      const randomIntBetweenOneAndTwenty = Math.floor(Math.random() * 20) + 1;
+      const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${randomIntBetweenOneAndTwenty}`);
+      const json = await response.json();
+      console.log('ResetPassword json', json);
+    },
+  },
+};
+
+export default meta;

package/src/forms/ResetPasswordForm/ResetPasswordForm.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Props } from './ResetPasswordForm.types';
+import Form from '../../components/Form/Form';
+import FormField from '../../components/FormField';
+import { FIELD_TYPES } from '../../components/FormField/FormField.types';
+import { validPassword } from '../validations';
+import { useLanguage } from '../../hooks';
+
+const ResetPasswordForm = ({ handleSubmit }: Props) => {
+  const T = useLanguage();  
+  return (
+    <div data-testid="ResetPasswordForm" className="form-wrapper">
+      <Form onSubmit={handleSubmit} submit={T.FORMS.RESET_PASSWORD_FORM.SUBMIT}>
+        <FormField
+          name="password"
+          autoComplete='new-password'
+          type={FIELD_TYPES.PASSWORD}
+          label={T.FORMS.RESET_PASSWORD_FORM.PASSWORD}
+          required
+          validations={validPassword}
+        />
+      </Form>
+    </div>
+  );
+};
+
+ResetPasswordForm.displayName = 'ResetPasswordForm';
+
+export default ResetPasswordForm;
+export type { Props };

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

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

package/src/forms/ResetPasswordForm/index.ts

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

package/src/forms/SubscriptionForm/SubscriptionForm.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import SubscriptionForm from '.';
+import { Container } from '../../components';
+
+const meta: Meta<typeof SubscriptionForm> = {
+  title: 'FORMS/SubscriptionForm',
+  component: SubscriptionForm,
+};
+
+type Story = StoryObj<typeof SubscriptionForm>;
+
+export const Default: Story = {
+  args: {
+    handleSubmit: values => console.log('values', values),
+    initialValues: {
+      subscriptionStatus: 'Active',
+      plan: 'Premium',
+      price: '$9.99',
+      billingDate: '2024-12-31',
+    },
+  },
+  render: props => {
+    return (
+      <Container>
+        <SubscriptionForm {...props} />
+      </Container>
+    );
+  },
+};
+
+export default meta;

package/src/forms/SubscriptionForm/SubscriptionForm.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Props } from './SubscriptionForm.types';
+import Form from '../../components/Form/Form';
+import FormField from '../../components/FormField';
+import { FIELD_TYPES } from '../../components/FormField/FormField.types';
+import { useLanguage } from '../../hooks';
+
+const SubscriptionForm = ({ testID, initialValues, handleSubmit, isDisabled = true }: Props) => {
+  const T = useLanguage();
+  return (
+    <div data-testid={testID || '"SubscriptionForm"'} className="form-wrapper">
+      <Form onSubmit={handleSubmit} isDisabled={isDisabled} initialValues={initialValues}>
+        <FormField
+          name="status"
+          type={FIELD_TYPES.TEXT}
+          label={T.FORMS.ACCOUNT.SUBSCRIPTION_STATUS_LABEL}
+          disabled={isDisabled}
+        />
+        <FormField
+          name="plan"
+          type={FIELD_TYPES.TEXT}
+          label={T.FORMS.ACCOUNT.SUBSCRIPTION_PLAN_LABEL}
+          disabled={isDisabled}
+        />
+        <FormField
+          name="price"
+          type={FIELD_TYPES.TEXT}
+          label={T.FORMS.ACCOUNT.SUBSCRIPTION_PRICE_LABEL}
+          disabled={isDisabled}
+        />
+        <FormField
+          name="billingDate"
+          type={FIELD_TYPES.TEXT}
+          label={T.FORMS.ACCOUNT.SUBSCRIPTION_BILLING_DATE_LABEL}
+          required
+          disabled={isDisabled}
+        />
+      </Form>
+    </div>
+  );
+};
+
+SubscriptionForm.displayName = 'SubscriptionForm';
+
+export default SubscriptionForm;
+export type { Props };