@4alldigital/foundation-ui--core 3.0.0

package/src/components/PanelProduct/PanelProduct.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './PanelProduct.types';
+import Image from '../Image';
+import DisplayHeading from '../DisplayHeading';
+import Copy from '../Copy';
+import Link from '../Link';
+import Container from '../Container';
+import { SPACING } from '../Hero/Hero.types';
+
+const PanelProduct = ({
+  testID,
+  title,
+  description,
+  image1,
+  image2,
+  iosLink = '#',
+  androidLink = '#',
+  inversed = false,
+  withBg = true,
+  spacing = SPACING.MODULE,
+}: Props) => {
+  return (
+    <div
+      data-testid={testID || 'PanelFeature'}
+      className={cx('relative m-auto w-full flex flex-none flex-nowrap', spacing)}>
+      {withBg && (
+        <div className="rounded-full blur-[250px] flex flex-none aspect-square absolute -bottom-24 -right-48 w-[500px] opacity-20 bg-gradient-to-r from-primary-700 to-primary-300" />
+      )}
+      <Container>
+        <div
+          className={cx(
+            'relative flex flex-col md:flex-row flex-nowrap w-full h-full overflow-visible gap-16 border border-solid border-primary bg-tertiary-300 dark:bg-secondary rounded p-8 shadow',
+            {
+              'flex-row-reverse': inversed,
+            },
+          )}>
+          <div className="w-full md:w-1/2 top-0 relative">
+            <div className="absolute aspect-[8/17] -rotate-12 w-[135px] left-1/3 top-4 md:w-[180px] md:left-1/3 md:top-4 lg:w-[210px] lg:left-1/2 lg:top-0  xl:-top-1/4">
+              <Image src={image2} alt={title} />
+            </div>
+            <div className="relative md:absolute aspect-[8/17] -rotate-0 w-[150px] left-0 top-0 md:w-[220px] md:left-0 md:-top-6 lg:w-[250px] lg:left-1/4 lg:-top-12 xl:-top-1/3">
+              <Image src={image1} alt={title} />
+            </div>
+          </div>
+          <div className="w-full md:w-1/2">
+            <div>
+              <DisplayHeading text={title} />
+            </div>
+            <div>
+              <Copy>{description}</Copy>
+            </div>
+            <div className="flex items-center justify-start gap-4">
+              <div className="relative w-[150px] h-[50px]">
+                <Link href={iosLink} target="_blank" hideExternalIcon>
+                  <Image
+                    src="https://apple-resources.s3.amazonaws.com/media-badges/download-on-the-app-store/black/en-us.svg"
+                    alt="App Store"
+                    // fill={false}
+                    // width={150}
+                    // height={50}
+                  />
+                </Link>
+              </div>
+              <div className="relative w-[190px] h-[75px]">
+                <Link href={androidLink} target="_blank" hideExternalIcon>
+                  <Image
+                    src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
+                    alt="Google Play"
+                    // fill={false}
+                    // width={190}
+                    // height={70}
+                  />
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+PanelProduct.displayName = 'PanelProduct';
+
+export default PanelProduct;
+export type { Props };

package/src/components/PanelProduct/PanelProduct.types.ts

@@ -0,0 +1,14 @@
+import { SPACING } from "../Hero/Hero.types";
+
+export interface Props {
+  testID?: string;
+  title: string;
+  description: string;
+  image1: string;
+  image2: string;
+  iosLink: string;
+  androidLink: string;
+  inversed?: boolean;
+  withBg?: boolean;
+  spacing?: SPACING;
+}

package/src/components/PanelProduct/index.ts

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

package/src/components/PanelScroller/PanelScroller.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import PanelScroller from '.';
+
+const meta: Meta<typeof PanelScroller> = {
+  title: 'ORGANISMS/PanelScroller',
+  component: PanelScroller,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+type Story = StoryObj<typeof PanelScroller>;
+
+export const Default: Story = {
+  args: {
+    cols: [
+      {
+        images: [
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+        ],
+      },
+      {
+        images: [
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+        ],
+      },
+      {
+        images: [
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+        ],
+      },
+      {
+        images: [
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+        ],
+      },
+      {
+        images: [
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+        ],
+      },
+      {
+        images: [
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+          'https://picsum.photos/450/800',
+        ],
+      },
+    ],
+  },
+};
+
+export default meta;

package/src/components/PanelScroller/PanelScroller.tsx

@@ -0,0 +1,58 @@
+import React, { useRef } from 'react';
+import cx from 'classnames';
+import { Props } from './PanelScroller.types';
+import Carousel from '../Carousel';
+import { CardVariant } from '../Card/Card.types';
+
+const PanelScroller = ({ testID, cols }: Props) => {
+  const ref = useRef(null);
+  const aspectRatioClass = 'aspect-[9/16]';
+  return (
+    <div ref={ref} data-testid={testID || 'PanelScroller'} className="relative">
+      <div
+        className={cx(
+          'grid gap-0 grid-cols-2',
+          { 'md:grid-cols-2': cols.length === 2 },
+          { 'md:grid-cols-3': cols.length === 3 },
+          { 'md:grid-cols-4': cols.length === 4 },
+          { 'md:grid-cols-5': cols.length === 5 },
+          { 'md:grid-cols-6': cols.length === 6 },
+        )}>
+        {cols.map((col, index) => {
+          // const isOdd = index % 2 === 0;
+          return (
+            <div key={index} className="relative">
+              <Carousel
+                data={col?.images?.map((image, index) => ({
+                  variant: CardVariant.BASIC,
+                  data: {
+                    id: `image-${index}`,
+                    image: {
+                      src: image,
+                      alt: `Image ${index + 1}`,
+                      aspectRatio: aspectRatioClass,
+                    },
+                    scaleOnHover: false,
+                  },
+                  className: aspectRatioClass,
+                }))}
+                carouselOptions={{
+                  slidesPerView: { base: 1 },
+                  vertical: true,
+                  loop: true,
+                  showArrows: false,
+                  // Note: autoPlay and rtl features not yet implemented in new carousel
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+PanelScroller.displayName = 'PanelScroller';
+
+export default PanelScroller;
+export type { Props };

package/src/components/PanelScroller/PanelScroller.types.ts

@@ -0,0 +1,8 @@
+interface Col {
+  images: string[];
+}
+
+export interface Props {
+  testID?: string;
+  cols: Col[];
+}

package/src/components/PanelScroller/index.ts

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

package/src/components/PanelVideo/PanelVideo.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import PanelVideo from '.';
+import Container from '../Container';
+
+const meta: Meta<typeof PanelVideo> = {
+  title: 'ORGANISMS/PanelVideo',
+  component: PanelVideo,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+type Story = StoryObj<typeof PanelVideo>;
+
+export const Default: Story = {
+  args: {
+    title: 'Elegant workouts, real results',
+    description: 'Achieve the elegance of a ballerina and the strength of an athlete with NRG at home.',
+    videoProps: {
+      sources: [
+        {
+          src: 'https://assets.nrgbarrebody.app/2022-01/VideoPanel2%20-%20HD%201080p.mp4.mp4',
+          type: 'video/mp4',
+        },
+      ],
+      options: {
+        aspectRatio: undefined,
+      },
+      aspectRatioValue: '16/7',
+    },
+  },
+  render: (props) => {
+    return (
+      <Container isFlush>
+        <PanelVideo {...props} />
+      </Container>
+    );
+  },
+};
+
+export default meta;

package/src/components/PanelVideo/PanelVideo.tsx

@@ -0,0 +1,81 @@
+import cx from 'classnames';
+import { motion } from 'framer-motion';
+import { Props } from './PanelVideo.types';
+import Video from '../Video';
+import Copy from '../Copy';
+import { SPACING } from '../Hero/Hero.types';
+import { twMerge } from 'tailwind-merge';
+import DisplayHeading from '../DisplayHeading';
+
+const PanelVideo = ({
+  testID,
+  className,
+  title,
+  description,
+  spacing = SPACING.NONE,
+  videoProps,
+}: Props) => {
+  return (
+    <div
+      data-testid={testID || '"PanelVideo"'}
+      className={twMerge(
+        cx('relative w-full overflow-hidden', `md:aspect-[${videoProps.aspectRatioValue}]`, spacing, className),
+      )}>
+      <Video
+        rounded={false}
+        className="xl:max-h-[750px]"
+        aspectRatioValue={videoProps.aspectRatioValue}
+        options={{
+          autoplay: true,
+          muted: true,
+          controls: false,
+          loop: true,
+          playsinline: true,
+          preferFullWindow: false,
+          ...videoProps?.options,
+        }}
+        sources={videoProps?.sources}
+      />
+      <div className="absolute top-0 left-0 w-full h-full z-10">
+        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-black to-black md:from-transparent md:to-black opacity-50" />
+        <div className="absolute top-0 right-2 lg:right-4 w-full md:w-3/4 h-full flex flex-col items-end justify-center text-white pt-8 lg:pt-0 text-right">
+          {title && (
+            <motion.div
+              initial={{
+                transform: 'translateX(25px)',
+              }}
+              animate={{
+                transform: 'none',
+                transition: { damping: 60, delay: 0, mass: 1.2, stiffness: 300, type: 'spring' },
+              }}
+              transition={{ duration: 0.5 }}>
+              <div>
+                <DisplayHeading text={title} colorOverride="text-white before:bg-white border-white" />
+              </div>
+            </motion.div>
+          )}
+          {description && (
+            <motion.div
+              initial={{
+                transform: 'translateX(25px)',
+              }}
+              animate={{
+                transform: 'none',
+                transition: { damping: 60, delay: 0, mass: 1.2, stiffness: 300, type: 'spring' },
+              }}
+              transition={{ duration: 0.5 }}>
+              <div>
+                <Copy>{description}</Copy>
+              </div>
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+PanelVideo.displayName = 'PanelVideo';
+
+export default PanelVideo;
+export type { Props };

package/src/components/PanelVideo/PanelVideo.types.ts

@@ -0,0 +1,11 @@
+import { SPACING } from '../Hero/Hero.types';
+import { Props as videoProps } from '../Video/Video.types';
+
+export interface Props {
+  testID?: string;
+  className?: string;
+  title?: string;
+  description?: string;
+  spacing?: SPACING;
+  videoProps: videoProps;
+}

package/src/components/PanelVideo/index.ts

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

package/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Radio from '.';
+
+const meta: Meta<typeof Radio> = {
+  title: 'ATOMS/Radio',
+  component: Radio,
+};
+
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {};
+
+Default.args = {
+  id: 'id',
+  label: 'My Radio Label',
+  name: 'example-options',
+  options: [
+    { value: 'value-1', label: 'Option one' },
+    { value: 'value-2', label: 'Option two' },
+    { value: 'value-3', label: 'Option three' },
+  ],
+};
+
+export default meta;

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './Radio.types';
+import Icon from '../Icon';
+
+const Radio = React.forwardRef(function MyInput({ name, required, className, options, ...rest }: Props, ref: any) {
+  return (
+    <div data-testid="Radio" className={cx('flex items-center', className)}>
+      <div className={cx('flex flex-col gap-2', className)}>
+        {options?.map((option) => {
+          const value = option?.value?.toString() || undefined;
+          return (
+            <div key={value} className="flex items-center relative">
+              <div className="relative flex items-center">
+                <input
+                  ref={ref}
+                  name={name}
+                  type="radio"
+                  required={required}
+                  className="form-item radio peer appearance-none m-0 p-0 w-4 h-4"
+                  {...rest}
+                  // Prevent controller overriding radio values.
+                  id={value}
+                  value={value}
+                />
+                <div className="form-icon opacity-0 peer-checked:opacity-100 absolute w-4 h-4 flex items-center justify-center top-0 left-0 pointer-events-none">
+                  <Icon name="mdi:circle" size={12} />
+                </div>
+              </div>
+              <label className="label pl-2 leading-none" htmlFor={value}>
+                {option.label}
+              </label>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+
+Radio.displayName = 'Radio';
+
+export default Radio;
+export type { Props };

package/src/components/Radio/Radio.types.ts

@@ -0,0 +1,13 @@
+import { OptionsType } from '../FormSelect/FormSelect.types';
+
+export interface Props {
+  id: string;
+  name: string;
+  icon?: string;
+  label?: string | React.ReactNode[];
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  //options?: { value: string; label: string }[];
+  options?: Array<OptionsType>;
+}

package/src/components/Radio/index.ts

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

package/src/components/Schedule/Schedule.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Schedule from '.';
+import { ESSchedule, formatSchedule } from '@techstuff-dev/foundation-api-utils';
+
+const meta: Meta<typeof Schedule> = {
+  title: 'ORGANISMS/Schedule',
+  component: Schedule,
+};
+
+type Story = StoryObj<typeof Schedule>;
+
+const exampleData = [
+  {
+    _index: 'prod-schedule_cloud',
+    _id: 'entity:node/773:en',
+    _score: null,
+    _source: {
+      created: [1670150946],
+      friday_end: [1760681700],
+      friday_live: ['https://youtube.com/live/cEtZzyfKokk?feature=share'],
+      friday_start: [1760679900],
+      friday_title: ['Barre Floor 30min'],
+      friday_video: [
+        'https://assets.nrgbarrebody.app/2025-09/NRG%20Live%20-%20Barre%20Floor%20Express%20%5BA93Nyi7YqjM%5D.mp4',
+      ],
+      langcode: ['en'],
+      monday_end: [1760337000],
+      monday_start: [1760334300],
+      monday_title: ['3 x 15 legs / booty / arms'],
+      monday_video: ['https://assets.nrgbarrebody.app/2025-10/NRG%20Live%20-%203x15%20Legs_%20Booty%20_Arms.mp4'],
+      saturday_end: [1760197500],
+      saturday_live: ['https://www.youtube.com/live/ChezUgSC9dI'],
+      saturday_start: [1760194800],
+      saturday_title: ['No Class'],
+      saturday_video: [
+        'https://assets.nrgbarrebody.app/2025-09/NRG%20Live%20-%203%20x15%20Legs%E2%A7%B8Arms%20%E2%A7%B8Core%20%5BChezUgSC9dI%5D.mp4',
+      ],
+      sunday_end: [1760283900],
+      sunday_live: ['https://youtube.com/live/q87MFtoRJeM?feature=share'],
+      sunday_start: [1760281200],
+      sunday_title: ['No Class'],
+      sunday_video: ['https://assets.nrgbarrebody.app/2025-09/STRONG%20YOU%20-%20STRETCH%20%5Bq87MFtoRJeM%5D.mp4'],
+      thursday_end: [1760595300],
+      thursday_live: ['https://youtube.com/live/B9pbo2wY3no?feature=share'],
+      thursday_start: [1760593500],
+      thursday_title: ['Legs and Abs with the Pilates ball'],
+      thursday_video: [
+        'https://assets.nrgbarrebody.app/2025-09/NRG%20Live%20-%20Sideline%20Sculpt%20%5Bg9IKnc7CCzQ%5D.mp4',
+      ],
+      tuesday_end: [1760422500],
+      tuesday_start: [1760420700],
+      tuesday_title: ['Special hamstrings & glutes 30'],
+      tuesday_video: [
+        'https://assets.nrgbarrebody.app/2025-10/NRG%20Live%20-%20Hamstrings%20and%20Booty%2030_0.mp4',
+      ],
+      updated: [1760679615],
+      uuid: ['816ba984-e6b9-4171-84bd-f3fa7e418f26'],
+      wednesday_end: [1760509800],
+      wednesday_live: ['https://youtube.com/live/ZR1mjzHENRQ?feature=share'],
+      wednesday_start: [1760507100],
+      wednesday_title: ['Signature barre'],
+      wednesday_video: [
+        'https://assets.nrgbarrebody.app/2025-09/NRG%20Live%20-%203x15mn%20Legs%20%E2%A7%B8Arms%20%E2%A7%B8Stretch%20%5B46wjyKeG5LY%5D.mp4',
+      ],
+      search_api_id: ['entity:node/773:en'],
+      search_api_datasource: ['entity:node'],
+      search_api_language: ['en'],
+    },
+    sort: [1670150946000],
+  },
+];
+
+const formattedSchedule = formatSchedule(exampleData as ESSchedule[])[0];
+
+export const Default: Story = {
+  args: {
+    raised: false,
+    scheduleItems: formattedSchedule,
+  },
+  render: args => {
+    return <Schedule {...args} />;
+  },
+};
+
+export const HasAccess: Story = {
+  args: {
+    raised: false,
+    scheduleItems: formattedSchedule,
+    hasAccess: true,
+  },
+  render: args => {
+    return <Schedule {...args} />;
+  },
+};
+
+export default meta;