@4alldigital/foundation-ui--core 3.0.0

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import cx from 'classnames';
+import { Props } from './Accordion.types';
+import Icon from '../Icon';
+import Copy from '../Copy';
+import Collapsible from '../Collapsible';
+
+const AccordionItem = ({ title, content }: { title: string; content: string }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen} className="mb-2">
+      <Collapsible.Trigger
+        className={cx(
+          'accordion-trigger w-full',
+          {
+            'accordion-trigger-open': open,
+          },
+        )}>
+        <Copy className={cx('transition-all mb-0 mr-2', { 'text-white': open })}>
+          {title}
+        </Copy>
+        <div className="">
+          <Icon name={open ? 'mdi:chevron-up' : 'mdi:chevron-down'} />
+        </div>
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <div className="p-2">
+          <Copy>{content}</Copy>
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
+
+const Accordion = ({ testID, data, titleKey = 'title', contentKey = 'content' }: Props) => {
+  return (
+    <div data-testid={testID || "Accordion"}>
+      {data.map((item, index) => (
+        <AccordionItem
+          key={item[titleKey] || index}
+          title={item[titleKey]}
+          content={item[contentKey]}
+        />
+      ))}
+    </div>
+  );
+};
+
+Accordion.displayName = 'Accordion';
+
+export default Accordion;
+export type { Props };

package/src/components/Accordion/Accordion.types.ts

@@ -0,0 +1,8 @@
+export interface Props {
+  testID?: string;
+  titleKey?: string;
+  contentKey?: string;
+  data: {
+    [key: string]: string;
+  }[];
+}

package/src/components/Accordion/index.ts

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

package/src/components/AnimationCounter/AnimationCounter.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import AnimationCounter from '.';
+
+const meta: Meta<typeof AnimationCounter> = {
+  title: 'ATOMS/AnimationCounter',
+  component: AnimationCounter,
+};
+
+type Story = StoryObj<typeof AnimationCounter>;
+
+export const Default: Story = {
+  args: {
+    from: 0.0,
+    to: 5.0,
+    animationOptions: {
+      ease: 'easeInOut',
+    },
+    numDecimals: 1,
+  },
+};
+
+export default meta;

package/src/components/AnimationCounter/AnimationCounter.tsx

@@ -0,0 +1,51 @@
+import { useRef } from 'react';
+import cx from 'classnames';
+import { Props } from './AnimationCounter.types';
+import { animate, useInView, useIsomorphicLayoutEffect } from 'framer-motion';
+
+const AnimationCounter = ({
+  testID,
+  from,
+  to,
+  animationOptions,
+  className,
+  numDecimals = 0,
+}: Props) => {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true });
+
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+
+    if (!element || !inView) {
+      return;
+    }
+
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      element.textContent = to.toString();
+      return;
+    }
+
+    element.textContent = from.toString();
+
+    const controls = animate(from, to, {
+      duration: 1,
+      ease: 'easeOut',
+      ...animationOptions,
+      onUpdate: (value) => {
+        element.textContent = value.toFixed(numDecimals);
+      },
+    });
+
+    return () => {
+      controls.stop();
+    };
+  }, [ref, inView, from, to, animationOptions]);
+
+  return <span ref={ref} data-testid={testID || 'AnimationCounter'} className={cx('relative', className)} />;
+};
+
+AnimationCounter.displayName = 'AnimationCounter';
+
+export default AnimationCounter;
+export type { Props };

package/src/components/AnimationCounter/AnimationCounter.types.ts

@@ -0,0 +1,10 @@
+import { KeyframeOptions } from 'framer-motion';
+
+export interface Props {
+  testID?: string;
+  from: number;
+  to: number;
+  animationOptions?: KeyframeOptions;
+  className?: string;
+  numDecimals?: number;
+}

package/src/components/AnimationCounter/index.ts

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

package/src/components/AnimationSet1/AnimationSet1.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import AnimationSet1 from '.';
+
+const meta: Meta<typeof AnimationSet1> = {
+  title: 'ORGANISMS/AnimationSet1',
+  component: AnimationSet1,
+};
+
+type Story = StoryObj<typeof AnimationSet1>;
+
+export const Default: Story = {
+  args: {
+    testID: new Date().getTime().toString(),
+    bgAsset: {
+      src: '/assets/splash.png',
+      alt: 'splash-1',
+    },
+    focalAsset1: {
+      src: '/assets/iphone-flat-1.png',
+      alt: 'phone-2',
+    },
+    focalAsset2: {
+      src: '/assets/iphone-flat-2.png',
+      alt: 'phone-1',
+    },
+    focalAsset3: {
+      src: '/assets/brand-asset1.webp',
+      alt: 'brand-1',
+    },
+  },
+  render: (args) => {
+    return <AnimationSet1 {...args} />;
+  },
+};
+
+export default meta;

package/src/components/AnimationSet1/AnimationSet1.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import cx from 'classnames';
+import { motion } from 'framer-motion';
+import { Props } from './AnimationSet1.types';
+import Image from '../Image';
+
+const AnimationSet1 = ({ testID, bgAsset, focalAsset1, focalAsset2, focalAsset3 }: Props) => {
+  // const ref = useRef(null);
+  // const isInView = useInView(ref);
+
+  // Animation data.
+  const assetsInitial = { opacity: 0.001, rotate: 0, scale: 1, x: 200, y: 0 };
+  const assetsAnimate = {
+    opacity: 1,
+    rotate: 0,
+    rotateX: 0,
+    rotateY: 0,
+    scale: 1,
+    transition: { damping: 60, delay: 0, mass: 1.2, stiffness: 300, type: 'spring' },
+    x: 0,
+    y: 0,
+  };
+
+  return (
+    <div data-testid={testID || 'AnimationSet1'} className={cx(`relative w-full h-full`)}>
+      {bgAsset && (
+        <motion.div
+          className="absolute left-1/2 top-1/2 w-full h-full"
+          initial={{
+            opacity: 0.001,
+            rotate: 0,
+            scale: 0.5,
+            x: 0,
+            y: 0,
+            perspective: '1200px',
+            translateX: '-50%',
+            translateY: '-50%',
+          }}
+          animate={{
+            opacity: 0.5,
+            rotate: 0,
+            rotateX: 0,
+            rotateY: 0,
+            scale: 1.25,
+            transition: { damping: 60, delay: 0.7, mass: 1.2, stiffness: 300, type: 'spring' },
+            perspective: '1200px',
+            translateX: '-50%',
+            translateY: '-50%',
+            x: 0,
+            y: 0,
+          }}
+          transition={{ duration: 0.5 }}>
+          <Image src={bgAsset.src} alt={bgAsset.alt} fill />
+        </motion.div>
+      )}
+      {(focalAsset1 || focalAsset2) && (
+        <motion.div
+          className="absolute right-0 top-1/2 z-10 overflow-visible w-3/4 aspect-[0.78/1]"
+          style={{ transform: 'translateY(-50%)' }}>
+          {focalAsset1 && (
+            <motion.div
+              className="absolute aspect-[9/18] right-4 top-8 w-[170px] md:right-4 md:top-8 md:w-[130px] lg:right-0 lg:top-8 lg:w-[190px] xl:right-16 xl:top-16 xl:w-[250px] "
+              initial={assetsInitial}
+              animate={assetsAnimate}>
+              <Image src={focalAsset1.src} alt={focalAsset1.alt} fill />
+            </motion.div>
+          )}
+          {focalAsset2 && (
+            <motion.div
+              className="absolute aspect-[9/18] left-0 top-2 w-[200px] md:left-0 md:top-2 md:w-[150px] lg:left-4 lg:top-0 lg:w-[210px] xl:left-0 xl:top-0 xl:w-[300px]"
+              initial={assetsInitial}
+              animate={{
+                ...assetsAnimate,
+                transition: { ...assetsAnimate.transition, delay: 0.3 },
+              }}>
+              <Image src={focalAsset2.src} alt={focalAsset2.alt} fill />
+            </motion.div>
+          )}
+        </motion.div>
+      )}
+      {focalAsset3 && (
+        <div className="absolute aspect-[0.5/1] flex flex-col flex-nowrap p-0 z-20 items-end justify-end w-1/3 top-0 left-4 xl:w-1/4 xl:top-16 xl:left-12">
+          <motion.div
+            className="relative w-full overflow-visible aspect-[1.2/1] bg-body-bg shadow-lg rounded-lg p-0"
+            initial={{ opacity: 0.001, rotate: 0, scale: 1, x: 100, y: 0 }}
+            animate={{
+              opacity: 1,
+              rotate: 0,
+              rotateX: 0,
+              rotateY: 0,
+              scale: 1,
+              transition: { damping: 60, delay: 0.6, mass: 1.2, stiffness: 300, type: 'spring' },
+              x: 0,
+              y: 0,
+            }}>
+            <Image src={focalAsset3.src} fill alt={focalAsset3.alt} />
+          </motion.div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+AnimationSet1.displayName = 'AnimationSet1';
+
+export default AnimationSet1;
+export type { Props };

package/src/components/AnimationSet1/AnimationSet1.types.ts

@@ -0,0 +1,12 @@
+export interface Asset {
+  src: string;
+  alt: string;
+}
+
+export interface Props {
+  testID?: string;
+  bgAsset?: Asset;
+  focalAsset1?: Asset;
+  focalAsset2?: Asset;
+  focalAsset3?: Asset;
+}

package/src/components/AnimationSet1/index.ts

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

package/src/components/Authenticator/Authenticator.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Authenticator from '.';
+import Container from '../Container';
+
+const meta: Meta<typeof Authenticator> = {
+  title: 'ORGANISMS/Authenticator',
+  component: Authenticator,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+type Story = StoryObj<typeof Authenticator>;
+
+export const Default: Story = {
+  args: {
+    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,
+  },
+  render: (props) => {
+    return (
+      <Container>
+        <Authenticator {...props} />
+      </Container>
+    );
+  },
+};
+
+export default meta;

package/src/components/Authenticator/Authenticator.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { Props } from './Authenticator.types';
+import Tabs from '../Tabs';
+import LoginForm from '../../forms/LoginForm';
+import RegisterForm from '../../forms/RegisterForm';
+import ForgotPasswordForm from '../../forms/ForgotPasswordForm';
+import Button from '../Button';
+import { BTN_VARIANTS } from '../Button/Button.types';
+
+const Authenticator = ({
+  loginSubmit,
+  registerSubmit,
+  passwordForgotSubmit,
+  handleTokenCallback,
+  showSocialLogin = false,
+}: Props) => {
+  const [showForgotPassword, setShowForgotPassword] = useState(false);
+
+  return (
+    <div data-testid="Authenticator" className="w-[300px] md:w-[550px] mb-8">
+      {!showForgotPassword && (
+        <Tabs
+          data={[
+            {
+              title: 'Login',
+              content: (
+                <div className="flex flex-col gap-4 items-center">
+                  <LoginForm
+                    handleSubmit={loginSubmit}
+                    showSocialButtons={showSocialLogin}
+                    handleTokenCallback={handleTokenCallback}
+                    className="w-full"
+                  />
+                  <div className="mt-4">
+                    <Button variant={BTN_VARIANTS.LINK} onClick={() => setShowForgotPassword(!showForgotPassword)}>
+                      {showForgotPassword ? 'Back to Login' : 'Forgot Password?'}
+                    </Button>
+                  </div>
+                </div>
+              ),
+            },
+            {
+              title: 'Register',
+              content: (
+                <div className="flex flex-col gap-4 items-center">
+                  <RegisterForm
+                    handleSubmit={registerSubmit}
+                    showSocialButtons={showSocialLogin}
+                    handleTokenCallback={handleTokenCallback}
+                    className="w-full"
+                  />
+                </div>
+              ),
+            },
+          ]}
+        />
+      )}
+      {showForgotPassword && (
+        <Tabs
+          data={[
+            {
+              title: 'Forgot Password',
+              content: (
+                <div className="flex flex-col gap-4 items-center">
+                  <ForgotPasswordForm handleSubmit={passwordForgotSubmit} />
+                  <div className="mt-4">
+                    <Button variant={BTN_VARIANTS.LINK} onClick={() => setShowForgotPassword(!showForgotPassword)}>
+                      {showForgotPassword ? 'Back to Login' : 'Forgot Password?'}
+                    </Button>
+                  </div>
+                </div>
+              ),
+            },
+          ]}
+        />
+      )}
+    </div>
+  );
+};
+
+Authenticator.displayName = 'Authenticator';
+
+export default Authenticator;
+export type { Props };

package/src/components/Authenticator/Authenticator.types.ts

@@ -0,0 +1,7 @@
+export interface Props {
+  loginSubmit: (values: any) => void;
+  registerSubmit: (values: any) => void;
+  passwordForgotSubmit: (values: any) => void;
+  handleTokenCallback?: (data: any) => void;
+  showSocialLogin?: boolean;
+}

package/src/components/Authenticator/index.ts

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

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Avatar from '.';
+import Container from '../Container';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'MOLECULES/Avatar',
+  component: Avatar,
+};
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    className: 'foo-bar',
+    fileUpdateCallback: async (file) => console.log('fileUpdateCallback', file),
+  },
+  render: args => {
+    return (
+      <Container>
+        <Avatar {...args} />
+      </Container>
+    );
+  },
+};
+
+export default meta;

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import { Props } from './Avatar.types';
+import Image from '../Image';
+import Button from '../Button';
+import STRINGS from '../../translations';
+import Label from '../Label';
+import Copy from '../Copy';
+import { BTN_SIZES } from '../Button/Button.types';
+import Icon from '../Icon';
+
+const Avatar = ({
+  testID,
+  name = 'avatar',
+  isEditable = true,
+  initValue,
+  fileUpdateCallback = async () => {},
+}: Props) => {
+  const [file, setFile] = useState<string | undefined>(initValue);
+
+  useEffect(() => {
+    if (initValue) {
+      setFile(initValue);
+    }
+  }, [initValue]);
+
+  const handleFileSelect = async (data: any) => {
+    if (fileUpdateCallback && typeof fileUpdateCallback === 'function') {
+      fileUpdateCallback(data);
+    }
+  };
+
+  return (
+    <div data-testid={testID || '"Avatar"'} className="relative">
+      <div className="relative w-[200px] aspect-square rounded-full border border-solid overflow-hidden flex items-center justify-center m-4">
+        {file && (
+          <>
+            <Image src={file} alt={name} width={200} height={200} />
+            {isEditable && (
+              <div className="absolute w-full h-full flex items-end justify-center bottom-4">
+                <Button
+                  size={BTN_SIZES.SMALL}
+                  rounded
+                  onClick={() => {
+                    setFile(undefined);
+                  }}>
+                  {STRINGS.UI.REMOVE_BTN_LABEL}
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+        {!file && (
+          <>
+            {isEditable && (
+              <div className="absolute w-full h-full flex items-center justify-center">
+                <Label id={name} className="button cursor-pointer mb-0">
+                  <Copy className="mb-0">{STRINGS.UI.UPLOAD}</Copy>
+                </Label>
+              </div>
+            )}
+            {!isEditable && (
+              <Icon name="mdi:account-circle" size={200} className='opacity-30'/>
+            )}
+          </>
+        )}
+      </div>
+      <input
+        type="file"
+        id={name}
+        name={name}
+        className="hidden"
+        onChange={event => {
+          const file = event.target.files?.[0];
+          if (file) {
+            const imageURL = URL.createObjectURL(file);
+            setFile(imageURL);
+            handleFileSelect(file);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+Avatar.displayName = 'Avatar';
+
+export default Avatar;
+export type { Props };

package/src/components/Avatar/Avatar.types.ts

@@ -0,0 +1,8 @@
+export interface Props {
+  testID?: string;
+  className?: string;
+  name?: string;
+  isEditable?: boolean;
+  initValue?: string;
+  fileUpdateCallback?: (file: File) => Promise<void>;
+}

package/src/components/Avatar/index.ts

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

package/src/components/Banner/Banner.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Banner from '.';
+
+const meta: Meta<typeof Banner> = {
+  title: 'ATOMS/Banner',
+  component: Banner,
+};
+
+type Story = StoryObj<typeof Banner>;
+
+export const Default: Story = {
+  args: {
+    title: 'Important Notice',
+    text: 'This is a simple banner with a title and text content.',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    icon: 'mdi:information',
+    title: 'Information',
+    text: 'This banner includes an icon for enhanced visual communication.',
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    icon: 'mdi:lightbulb-on',
+    title: 'Featured Content',
+    text: 'Click to learn more about our featured content and offerings.',
+    href: '/featured',
+  },
+};
+
+export const SubscribeVariant: Story = {
+  args: {
+    icon: 'mdi:star',
+    title: 'Unlock Premium Content',
+    text: 'Subscribe now to access unlimited workouts, exclusive classes, and premium features.',
+    href: '/account/subscription',
+  },
+};
+
+export const UpgradeVariant: Story = {
+  args: {
+    icon: 'mdi:arrow-up-bold',
+    title: 'Upgrade to Premium+',
+    text: 'Get access to advanced features, new classes, and priority support with Premium+.',
+    href: '/account/subscription',
+  },
+};
+
+export const TextOnly: Story = {
+  args: {
+    text: 'A minimal banner with text content only, no title or icon.',
+  },
+};
+
+export default meta;