@4alldigital/foundation-ui--core 3.0.0

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './Menu.types';
+import Link from '../Link';
+import Icon from '../Icon';
+import Heading from '../Heading';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+import { twMerge } from 'tailwind-merge';
+
+const Menu = ({ testID, title, links, inline = true, separators = false, className }: Props) => {
+  return (
+    <div data-testid={testID || '"Menu"'} className={twMerge(cx('flex flex-col gap-2', className))}>
+      {title && (
+        <div>
+          <Heading tag={HEADING_TAGS.H3}>{title}</Heading>
+        </div>
+      )}
+      <div className={cx('flex gap-0 items-center md:items-start', { 'flex-col md:flex-row ': inline }, { 'flex-col ': !inline })}>
+        {links?.map((link, index) => {
+          const key = `${link.id}--${index}`;
+          return (
+            <div key={key} className='flex gap-0'>
+              <div className="relative py-2">
+                <Link href={link.url} className="flex gap-1">
+                  {link.icon && <Icon name={link.icon} />}
+                  {link.title && <div>{link.title}</div>}
+                </Link>
+              </div>
+              {separators && index + 1 < links.length && (
+                <div className="h-full hidden md:flex self-center px-2">
+                  <Icon name="mdi:dot" className="opacity-50" />
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+Menu.displayName = 'Menu';
+
+export default Menu;
+export type { Props };

package/src/components/Menu/Menu.types.ts

@@ -0,0 +1,15 @@
+export interface Link {
+  id: string;
+  title: string;
+  url: string;
+  icon?: string;
+}
+
+export interface Props {
+  testID?: string;
+  title?: string;
+  links: Link[];
+  inline?: boolean;
+  className?: string;
+  separators?: boolean;
+}

package/src/components/Menu/index.ts

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

package/src/components/Notice/Notice.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Notice from '.';
+
+const meta: Meta<typeof Notice> = {
+  title: 'ATOMS/Notice',
+  component: Notice,
+};
+
+type Story = StoryObj<typeof Notice>;
+export const Default: Story = {
+  args: {
+    icon: 'carbon:information',
+    title: 'Notice Title',
+    text: 'Notice text',
+    type: 'info',
+    onCloseCallback: () => console.log('close'),
+    onClickCallback: () => console.log('click'),
+    actionText: 'More info',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    icon: 'carbon:checkmark',
+    title: 'Success Title',
+    text: 'Success text',
+    type: 'success',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    icon: 'carbon:warning',
+    title: 'Warning Title',
+    text: 'Warning text',
+    type: 'warning',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    icon: 'carbon:error',
+    title: 'Error Title',
+    text: 'Error text',
+    type: 'error',
+  },
+};
+
+export default meta;

package/src/components/Notice/Notice.tsx

@@ -0,0 +1,63 @@
+import cx from 'classnames';
+import { Props } from './Notice.types';
+import Heading from '../Heading';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+import Copy from '../Copy';
+import Icon from '../Icon';
+import Button from '../Button';
+import { BTN_SIZES, BTN_VARIANTS } from '../Button/Button.types';
+
+const Notice = ({
+  id,
+  testID,
+  title,
+  text,
+  icon,
+  type,
+  onCloseCallback,
+  onClickCallback,
+  actionText,
+}: Props) => {
+  const classes = cx('p-4 rounded relative', {
+    'bg-info text-white': type === 'info',
+    'bg-success text-white': type === 'success',
+    'bg-warning text-black': type === 'warning',
+    'bg-error text-white': type === 'error',
+  });
+  return (
+    <div data-testid={testID || id || 'Notice'} className={classes}>
+      <div className="flex gap-2">
+        {icon && (
+          <div className="mr-2">
+            <Icon name={icon} />
+          </div>
+        )}
+        <div>
+          {title && <Heading tag={HEADING_TAGS.H3}>{title}</Heading>}
+          <Copy className="mb-0">{text}</Copy>
+        </div>
+        {onClickCallback && actionText && (
+          <div className="ml-auto flex items-end">
+            <Button
+              variant={BTN_VARIANTS.PRIMARY}
+              onClick={onClickCallback}
+              aria-label="Action"
+              size={BTN_SIZES.SMALL}>
+              {actionText}
+            </Button>
+          </div>
+        )}
+        {onCloseCallback && (
+          <div className="absolute top-2 right-4">
+            <Button variant={BTN_VARIANTS.LINK} icon="mdi:close" onClick={onCloseCallback} aria-label="Close" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Notice.displayName = 'Notice';
+
+export default Notice;
+export type { Props };

package/src/components/Notice/Notice.types.ts

@@ -0,0 +1,11 @@
+export interface Props {
+  id?: string;
+  testID?: string;
+  text: string;
+  title?: string;
+  icon?: string;
+  type?: 'info' | 'success' | 'warning' | 'error';
+  onCloseCallback?: () => void;
+  onClickCallback?: () => void;
+  actionText?: string;
+}

package/src/components/Notice/index.ts

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

package/src/components/OTPInput/OTPInput.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import OTPInput from '.';
+
+const meta: Meta<typeof OTPInput> = {
+  title: 'UI/OTPInput',
+  component: OTPInput,
+};
+
+type Story = StoryObj<typeof OTPInput>;
+
+export const Default: Story = {
+  args: {
+    inputCallback: (value: string) => console.log('value', value),
+    seperator: false,
+  },
+};
+
+export default meta;

package/src/components/OTPInput/OTPInput.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo, useState } from 'react';
+import cx from 'classnames';
+import ROtpInput from 'react-otp-input';
+import { Props } from './OTPInput.types';
+import Icon from '../Icon';
+
+const OTPInput = ({
+  testID,
+  inputCallback,
+  seperator,
+  numInputs = 4,
+  shouldAutoFocus = false,
+  size = 'medium',
+}: Props) => {
+  const [otp, setOtp] = useState('');
+
+  React.useEffect(() => {
+    if (otp && otp.length === 4 && inputCallback !== undefined && typeof inputCallback === 'function') {
+      inputCallback(otp);
+    }
+  }, [otp]);
+
+  const sizeRatio = useMemo(() => {
+    switch (size) {
+      case 'small':
+        return {
+          width: '2.5rem',
+          height: '3rem',
+        };
+      case 'medium':
+        return {
+          width: '3.5rem',
+          height: '4rem',
+        };
+      case 'large':
+        return {
+          width: '4.5rem',
+          height: '5rem',
+        };
+      default:
+        return {
+          width: '2.5rem',
+          height: '2.5rem',
+        };
+    }
+  }, [size]);
+
+  return (
+    <div data-testid={testID || '"OTPInput"'} className="foo-bar">
+      <ROtpInput
+        value={otp}
+        onChange={setOtp}
+        inputType="number"
+        numInputs={numInputs}
+        shouldAutoFocus={shouldAutoFocus}
+        renderSeparator={
+          seperator ? (
+            () => (
+              <div className="flex items-center justify-center">
+                <Icon name="mdi:dot" className="opacity-50" />
+              </div>
+            )
+          ) : (
+            <div className="flex items-center justify-center w-4" />
+          )
+        }
+        renderInput={(props) => <input {...props} className={cx('remove-arrow form-item text-input w-12')} />}
+        inputStyle={{
+          width: sizeRatio.width,
+          height: sizeRatio.height,
+        }}
+      />
+    </div>
+  );
+};
+
+OTPInput.displayName = 'OTPInput';
+
+export default OTPInput;
+export type { Props };

package/src/components/OTPInput/OTPInput.types.ts

@@ -0,0 +1,8 @@
+export interface Props {
+  testID?: string;
+  inputCallback: (value: string) => void;
+  seperator?: boolean;
+  numInputs?: number;
+  shouldAutoFocus?: boolean;
+  size?: 'small' | 'medium' | 'large';
+}

package/src/components/OTPInput/index.ts

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

package/src/components/PanelCards/PanelCards.stories.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import PanelCards from '.';
+import { CardVariant } from '../Card/Card.types';
+
+const meta: Meta<typeof PanelCards> = {
+  title: 'ORGANISMS/PanelCards',
+  component: PanelCards,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+type Story = StoryObj<typeof PanelCards>;
+
+export const Default: Story = {
+  args: {
+    title: 'Why choose us?',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus nec diam laoreet sollicitudin.',
+    cardData: [
+      {
+        variant: CardVariant.ICON,
+        data: {
+          id: '1',
+          icon: 'mdi:heart-cog',
+          title: 'Monitor your diet easily',
+          moreTitle: 'Learn more',
+          description:
+            'The goal of a "monitor your diet easily" is to simplify the process of tracking and understanding nutritional intake',
+        },
+      },
+      {
+        variant: CardVariant.ICON,
+        data: {
+          id: '2',
+          icon: 'mdi:calendar-heart-outline',
+          title: 'Give health & fitness tips',
+          moreTitle: 'Learn more',
+          description:
+            'The goal of a "monitor your diet easily" is to simplify the process of tracking and understanding nutritional intake',
+        },
+      },
+      {
+        variant: CardVariant.ICON,
+        data: {
+          id: '3',
+          icon: 'mdi:yoga',
+          title: 'All-in-one health tool',
+          moreTitle: 'Learn more',
+          description:
+            'The goal of a "monitor your diet easily" is to simplify the process of tracking and understanding nutritional intake',
+        },
+      },
+    ],
+  },
+};
+
+export const DataCards: Story = {
+  args: {
+    withSeparators: true,
+    cardData: [
+      {
+        variant: CardVariant.DATA,
+        data: {
+          id: '1',
+          data: {
+            item: '10M',
+            label: 'Community Members',
+            numberData: {
+              from: 0,
+              to: 10,
+              animationOptions: {
+                ease: 'easeInOut',
+              },
+            },
+            //animateNumber: true,
+          },
+          raised: false,
+        },
+      },
+      {
+        variant: CardVariant.DATA,
+        data: {
+          id: '2',
+          data: {
+            item: '+',
+            label: 'Total Workouts',
+            numberData: {
+              from: 0,
+              to: 450,
+              animationOptions: {
+                ease: 'easeInOut',
+              },
+            },
+            animateNumber: true,
+          },
+          raised: false,
+        },
+      },
+      {
+        variant: CardVariant.DATA,
+        data: {
+          id: '3',
+          data: {
+            item: '140+',
+            label: 'Expert Coaches',
+            numberData: {
+              from: 0,
+              to: 140,
+              animationOptions: {
+                ease: 'easeInOut',
+              },
+            },
+            // animateNumber: true,
+          },
+          raised: false,
+        },
+      },
+    ],
+  },
+  render: (args) => <PanelCards {...args} />,
+};
+
+export default meta;

package/src/components/PanelCards/PanelCards.tsx

@@ -0,0 +1,81 @@
+import React, { useRef } from 'react';
+import cx from 'classnames';
+import { useInView } from 'framer-motion';
+import { Props } from './PanelCards.types';
+import Card from '../Card';
+import DisplayHeading from '../DisplayHeading';
+import Copy from '../Copy';
+import { COPY_ALIGN } from '../Copy/Copy.types';
+import { SPACING } from '../Hero/Hero.types';
+import { twMerge } from 'tailwind-merge';
+
+const PanelCards = ({
+  testID,
+  cardData,
+  title,
+  description,
+  withSeparators,
+  spacing = SPACING.MODULE,
+}: Props) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
+  // check if cardData is an odd of even number length
+  const isEven = cardData?.length % 2 === 0;
+  // get max grid cols based on length of cardData
+  const maxGridCols = cardData?.length > 4 ? 4 : cardData?.length;
+  // creat max grid cols classes
+  const maxGridColsClasses = `lg:grid-cols-${maxGridCols}`;
+  // if even make a set of grid classes for 1, 2, 4
+  const gridClasses = isEven
+    ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+    : 'grid-cols-1 md:grid-cols-1 lg:grid-cols-3';
+
+  return (
+    <div
+      ref={ref}
+      data-testid={testID || 'PanelCards'}
+      className={cx('relative m-auto px-4 lg:px-0 w-full flex flex-col flex-none flex-nowrap', spacing)}>
+      {(title || description) && (
+        <div className="relative text-center py-8">
+          {title && <DisplayHeading text={title} />}
+          {description && (
+            <div className='mt-2'>
+              <Copy align={COPY_ALIGN.CENTER}>{description}</Copy>
+            </div>
+          )}
+        </div>
+      )}
+      <div
+        className={twMerge(
+          cx(
+            'gap-4 md:gap-4 lg:gap-8 items-center md:items-start justify-center w-full m-auto grid',
+            gridClasses,
+            maxGridColsClasses,
+          ),
+        )}>
+        {cardData?.map((card, index) => (
+          <div key={`card-${index}`} className="flex gap-8 justify-between items-center">
+            <div
+              className={cx('relative flex flex-1 items-center justify-center', { '': withSeparators })}
+              style={{
+                transform: isInView ? 'none' : 'translateY(200px)',
+                opacity: isInView ? 1 : 0,
+                transition: `all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) ${0.1 * index}s`,
+              }}>
+              <Card {...card} />
+            </div>
+            {/* {withSeparators && index < cardData.length - 1 && (
+              <div key={`separator-${index}`} className="w-1 h-10 border-0 border-r border-solid border-primary-500" />
+            )} */}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+PanelCards.displayName = 'PanelCards';
+
+export default PanelCards;
+export type { Props };

package/src/components/PanelCards/PanelCards.types.ts

@@ -0,0 +1,11 @@
+import { Props as CardProps } from '../Card/Card.types';
+import { SPACING } from '../Hero/Hero.types';
+
+export interface Props {
+  testID?: string;
+  cardData: CardProps[];
+  title?: string;
+  description?: string;
+  withSeparators?: boolean;
+  spacing?: SPACING;
+}

package/src/components/PanelCards/index.ts

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

package/src/components/PanelCustom/PanelCustom.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import PanelCustom from '.';
+
+const meta: Meta<typeof PanelCustom> = {
+  title: 'ORGANISMS/PanelCustom',
+  component: PanelCustom,
+};
+
+type Story = StoryObj<typeof PanelCustom>;
+
+export const Default: Story = {
+  args: {
+    title: 'Panel Custom',
+    children: <div>PanelCustom</div>,
+  },
+};
+
+export default meta;

package/src/components/PanelCustom/PanelCustom.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import cx from 'classnames';
+import Container from '../Container';
+import { twMerge } from 'tailwind-merge';
+import { Props } from './PanelCustom.types';
+import DisplayHeading from '../DisplayHeading';
+
+const PanelCustom = ({
+  testID,
+  withBg = true,
+  spacing,
+  className,
+  children,
+  title,
+  headingTag,
+}: Props) => {
+  return (
+    <div
+      data-testid={testID || 'PanelCustom'}
+      className={twMerge(
+        cx('relative m-auto w-full flex flex-none flex-nowrap py-16 sm:py-24 md:py-32 lg:py-40', spacing, className),
+      )}>
+      {withBg && (
+        <div className="rounded-full blur-[200px] flex flex-none aspect-square absolute w-[700px] opacity-20 bg-gradient-to-b md:bg-gradient-to-r from-primary-700 to-primary-300 z-0" />
+      )}
+      <Container>
+        <div className="relative flex flex-col gap-4 items-center justify-center">
+          <DisplayHeading text={title} tag={headingTag} />
+          {children && <div>{children}</div>}
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+PanelCustom.displayName = 'PanelCustom';
+
+export default PanelCustom;
+export type { Props };

package/src/components/PanelCustom/PanelCustom.types.ts

@@ -0,0 +1,20 @@
+import { Props as ButtonProps } from '../Button/Button.types';
+import { Props as VideoProps } from '../Video/Video.types';
+import { SPACING } from '../Hero/Hero.types';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+
+export interface Props {
+  testID?: string;
+  inversed?: boolean;
+  title: string;
+  contentComponent?: React.ReactNode;
+  description?: string;
+  buttonData?: ButtonProps;
+  image?: string;
+  video?: VideoProps;
+  withBg?: boolean;
+  spacing?: SPACING;
+  headingTag?: HEADING_TAGS;
+  className?: string;
+  children: React.ReactNode;
+}

package/src/components/PanelCustom/index.ts

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

package/src/components/PanelFeature/PanelFeature.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import PanelFeature from '.';
+import { BTN_SIZES, BTN_VARIANTS } from '../Button/Button.types';
+
+const meta: Meta<typeof PanelFeature> = {
+  title: 'ORGANISMS/PanelFeature',
+  component: PanelFeature,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+type Story = StoryObj<typeof PanelFeature>;
+
+export const Default: Story = {
+  args: {
+    title: 'Barre at home',
+    description:
+      'NRG at home is a barre platform that will help you get in shape and stay healthy. Our workouts are designed to be fun and effective.',
+    assets: {
+      bgAsset: {
+        src: '/assets/splash.png',
+        alt: 'splash-1',
+      },
+      focalAsset1: {
+        src: '/assets/iphone-example-1.png',
+        alt: 'phone-2',
+      },
+      focalAsset2: {
+        src: '/assets/iphone-example-2.png',
+        alt: 'phone-1',
+      },
+      // focalAsset3: {
+      //   src: '/assets/brand-asset1.webp',
+      //   alt: 'brand-1',
+      // },
+    },
+    buttonData: {
+      children: 'Get Started',
+      variant: BTN_VARIANTS.PRIMARY,
+      size: BTN_SIZES.LARGE,
+    },
+  },
+};
+
+export default meta;