@4alldigital/foundation-ui--core 3.0.0

package/src/components/Schedule/Schedule.tsx

@@ -0,0 +1,118 @@
+import { useMemo, useState, useCallback } from 'react';
+import { Props } from './Schedule.types';
+import { useLanguage } from '../../hooks';
+import Heading from '../Heading';
+import { HEADING_TAGS, HEADING_TRANSFORM } from '../Heading/Heading.types';
+import ScheduleItemComponent from '../ScheduleItem';
+import Copy from '../Copy';
+import Calendar from '../Calendar';
+import { startOfDay } from 'date-fns';
+
+/**
+ * Converts schedule data from weekday-based format to date-based format
+ * Maps Unix timestamps to actual Date objects for calendar display
+ */
+const buildDateToClassMap = (scheduleItems: any) => {
+  const dateMap = new Map<string, any>();
+
+  if (!scheduleItems?.days) {
+    return dateMap;
+  }
+
+  scheduleItems.days.forEach((dayObj: any) => {
+    Object.entries(dayObj).forEach(([weekday, classes]: [string, any]) => {
+      if (classes && classes[0]) {
+        const classData = classes[0];
+        // Use the start timestamp to determine the actual date
+        if (classData.start) {
+          const date = new Date(classData.start * 1000);
+          // Normalize to start of day in local timezone
+          const normalized = startOfDay(date);
+          // Create a simple date key (YYYY-MM-DD) to avoid timezone issues
+          const dateKey = `${normalized.getFullYear()}-${String(normalized.getMonth() + 1).padStart(2, '0')}-${String(normalized.getDate()).padStart(2, '0')}`;
+          dateMap.set(dateKey, { ...classData, weekday });
+        } else {
+          console.log(`    ✗ No start timestamp for ${weekday}`);
+        }
+      }
+    });
+  });
+
+  return dateMap;
+};
+
+const Schedule = ({ testID, scheduleItems, hasAccess }: Props) => {
+  const T = useLanguage();
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
+
+  // Build date-to-class mapping for calendar mode
+  const dateToClassMap = useMemo(() => buildDateToClassMap(scheduleItems), [scheduleItems]);
+
+  // Get all dates that have classes for highlighting in calendar
+  const datesWithClasses = useMemo(() => {
+    const dates = Array.from(dateToClassMap.keys()).map(dateStr => new Date(dateStr));
+    return dates;
+  }, [dateToClassMap]);
+
+  // Get class data for a specific date
+  const getClassForDate = useCallback(
+    (date: Date | undefined) => {
+      if (!date) {
+        return null;
+      }
+      const normalized = startOfDay(date);
+      const dateKey = `${normalized.getFullYear()}-${String(normalized.getMonth() + 1).padStart(2, '0')}-${String(normalized.getDate()).padStart(2, '0')}`;
+      const result = dateToClassMap.get(dateKey);
+      return result || null;
+    },
+    [dateToClassMap],
+  );
+
+  // Selected class for calendar mode
+  const selectedClass = useMemo(() => {
+    const result = getClassForDate(selectedDate);
+    return result;
+  }, [selectedDate, getClassForDate]);
+
+  return (
+    <div data-testid={testID || 'Schedule'} className="grid grid-cols-1 md:grid-cols-[320px_1fr] gap-8">
+      {/* Left column - Calendar (sticky on desktop) */}
+      <div className="md:sticky md:top-4 md:self-start">
+        <Heading tag={HEADING_TAGS.H5} transform={HEADING_TRANSFORM.UPPERCASE} className="mb-4">
+          Select a Date
+        </Heading>
+        <Calendar selected={selectedDate} onSelect={setSelectedDate} datesWithContent={datesWithClasses} />
+      </div>
+
+      {/* Right column - Selected day content */}
+      <div>
+        {!hasAccess && (
+          <div>
+            <Heading tag={HEADING_TAGS.H2}>{T?.UI?.ACCESS_RESTRICTED}</Heading>
+            <Copy>{T?.UI?.UPGRADE_TO_PREMIUM_PLUS_ACCESS_LIVE}</Copy>
+          </div>
+        )}
+        {hasAccess && selectedClass && (
+          <ScheduleItemComponent
+            title={selectedClass.title}
+            live={selectedClass.live}
+            start={selectedClass.start}
+            end={selectedClass.end}
+            video={selectedClass.video}
+          />
+        )}
+        {hasAccess && !selectedClass && selectedDate && (
+          <div>
+            <Heading tag={HEADING_TAGS.H4}>{T?.UI?.NO_CLASS}</Heading>
+            <Copy>No class scheduled for this date.</Copy>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Schedule.displayName = 'Schedule';
+
+export default Schedule;
+export type { Props };

package/src/components/Schedule/Schedule.types.ts

@@ -0,0 +1,64 @@
+interface Schedule {
+    uuid: string;
+    created: string;
+    langcode: string;
+    updated: string;
+    days: {
+      monday?: {
+        title: string;
+        start: string;
+        end: string;
+        video: string;
+        live: string;
+      }[];
+      tuesday?: {
+        title: string;
+        start: string;
+        end: string;
+        video: string;
+        live: string;
+      }[];
+      wednesday?: {
+        title: string;
+        start: string;
+        end: string;
+        video: string;
+        live: string;
+      }[];
+      thursday?: {
+        title: string;
+        start: string;
+        end: string;
+        video: string;
+        live: string;
+      }[];
+      friday?: {
+        title: string;
+        start: string;
+        end: string;
+        video: string;
+        live: string;
+      }[];
+      saturday?: {
+        title: string;
+        start: string;
+        end: string;
+        video: string;
+        live: string;
+      }[];
+      sunday?: {
+        title: string;
+        start: string;
+        end: string;
+        video: string;
+        live: string;
+      }[];
+    }[];
+  }
+  
+  export interface Props {
+    testID?: string;
+    scheduleItems?: Schedule;
+    hasAccess?: boolean;
+  }
+  

package/src/components/Schedule/index.ts

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

package/src/components/ScheduleItem/ScheduleItem.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ScheduleItem from '.';
+
+const meta: Meta<typeof ScheduleItem> = {
+  title: 'MOLECULES/ScheduleItem',
+  component: ScheduleItem,
+};
+
+type Story = StoryObj<typeof ScheduleItem>;
+
+export const Default: Story = {
+  args: {
+    testID: 'schedule-item',
+    end: 1633840800,
+    live: 'https://www.youtube.com/watch?v=JrmyIp8RcZQ&t=2s',
+    start: 1633837200,
+    title: 'Title',
+  },
+};
+
+export default meta;

package/src/components/ScheduleItem/ScheduleItem.tsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import { format } from 'date-fns';
+import { Props } from './ScheduleItem.types';
+import Heading from '../Heading';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+import Label from '../Label';
+import Video from '../Video';
+import { DATE_FORMAT, TIME_FORMAT } from '../../constants';
+import Button from '../Button';
+import FullScreenVideoModal from '../FullScreenVideoModal';
+import { useLanguage } from '../../hooks';
+import Copy from '../Copy';
+
+const ScheduleItem = ({ testID, end, live, start, title, video }: Props) => {
+  const T = useLanguage();
+  const formattedDate = useMemo(() => {
+    if (start) {
+      return format(new Date(start * 1000), DATE_FORMAT);
+    }
+  }, [start]);
+  const formattedStart = useMemo(() => {
+    if (start) {
+      return format(new Date(start * 1000), TIME_FORMAT);
+    }
+  }, [start]);
+  const formattedEnd = useMemo(() => {
+    if (end) {
+      return format(new Date(end * 1000), TIME_FORMAT);
+    }
+  }, [end]);
+  const [launchVideoModal, setLaunchVideo] = React.useState<boolean>(false);
+
+  return (
+    <div data-testid={testID || '"ScheduleItem"'} className="flex flex-col md:flex-col gap-4">
+        <Heading tag={HEADING_TAGS.H4}>{title}</Heading>
+        {live && !launchVideoModal && (
+          <div className="flex-1">
+            <Video url={live} isYoutube />
+          </div>
+        )}
+        {formattedDate && formattedStart && formattedEnd && (
+          <div>
+            <Copy className="mb-0">{T?.UI?.TODAYS_ITEMS}</Copy>
+            <Label>
+              {formattedDate}: {formattedStart} - {formattedEnd}
+            </Label>
+          </div>
+        )}
+        {video && (
+          <div className="relative my-4">
+            <Button onClick={() => setLaunchVideo(true)} icon="mdi:video">
+              {T?.UI?.LAUNCH_PLAYBACK}
+            </Button>
+          </div>
+        )}
+        {launchVideoModal && video && (
+          <FullScreenVideoModal
+            modalOpen={launchVideoModal}
+            onCloseCallback={() => setLaunchVideo(false)}
+            videoProps={{
+              sources: [
+                {
+                  src: video,
+                },
+              ],
+              isModal: true,
+            }}
+          />
+        )}
+    </div>
+  );
+};
+
+ScheduleItem.displayName = 'ScheduleItem';
+
+export default ScheduleItem;
+export type { Props };

package/src/components/ScheduleItem/ScheduleItem.types.ts

@@ -0,0 +1,8 @@
+export interface Props {
+  testID?: string;
+  end: number;
+  live: string;
+  start: number;
+  title: string;
+  video?: string;
+}

package/src/components/ScheduleItem/index.ts

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

package/src/components/Screen/Screen.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Screen from '.';
+
+const meta: Meta<typeof Screen> = {
+  title: 'LAYOUTS/Screen',
+  component: Screen,
+};
+
+type Story = StoryObj<typeof Screen>;
+
+export const Default: Story = {
+  args: {
+    headerProps: {
+      loginCallback: () => console.log('loginCallback'),
+      logoutCallback: () => console.log('logoutCallback'),
+      isAuthenticated: false,
+      hideMenu: false,
+      className: '',
+    },
+    children: 'Screen content goes here',
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;

package/src/components/Screen/Screen.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './Screen.types';
+import Header from '../Header';
+import Footer from '../Footer';
+import Image from '../Image';
+import Container from '../Container';
+
+const Screen = ({
+  testID,
+  children,
+  showHeader = true,
+  showFooter = true,
+  image,
+  showOverlay = true,
+  isFlush,
+  fixedHeader,
+}: Props) => {
+  return (
+    <div data-testid={testID || '"Screen"'} className="h-full flex flex-1 flex-col min-h-full overflow-x-hidden">
+      {showHeader && (
+        <Header
+          className={cx({
+            'absolute top-0 left-0 right-0 bg-opacity-0 dark:bg-opacity-0 md:bg-opacity-20 md:dark:bg-opacity-20 z-50':
+              fixedHeader,
+          })}
+        />
+      )}
+      <main
+        className={cx(
+          'relative z-0 flex flex-1',
+          { 'pt-24 md:pt-32 lg:pt-40': image },
+          { 'pt-8 md:pt-12 lg:pt-12': !image && !isFlush },
+        )}>
+        {image && (
+          <div className="absolute w-full aspect-[16/5] opacity-50 z-0 top-0 left-0 right-0">
+            <Image
+              src={image}
+              alt="background"
+              priority
+              sizes="100vw"
+              style={{
+                objectFit: 'cover',
+              }}
+            />
+            {showOverlay && (
+              <div className="absolute w-full h-full bg-gradient-to-b from-transparent to-body-bg dark:to-body-bg-dark" />
+            )}
+          </div>
+        )}
+        <Container padded={!isFlush} isFlush={isFlush}>
+          <div className="flex flex-col gap-8 h-full w-full">{children}</div>
+        </Container>
+      </main>
+      {showFooter && <Footer />}
+    </div>
+  );
+};
+
+Screen.displayName = 'Screen';
+
+export default Screen;
+export type { Props };

package/src/components/Screen/Screen.types.ts

@@ -0,0 +1,16 @@
+import { Props as HeaderProps } from '../Header/Header.types';
+import { Props as FooterProps } from '../Footer/Footer.types';
+import { ReactNode } from 'react';
+
+export interface Props {
+  testID?: string;
+  children: ReactNode;
+  showHeader?: boolean;
+  showFooter?: boolean;
+  headerProps?: HeaderProps;
+  footerProps?: FooterProps;
+  image?: string;
+  showOverlay?: boolean;
+  isFlush?: boolean;
+  fixedHeader?: boolean;
+}

package/src/components/Screen/index.ts

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

package/src/components/ShadcnButton/ShadcnButton.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-white/20 text-primary-foreground shadow hover:bg-primary/90 border-2 border-red",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:bg-primary",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-transparent hover:bg-transparent",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ShadcnButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const ShadcnButton = React.forwardRef<HTMLButtonElement, ShadcnButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+ShadcnButton.displayName = "ShadcnButton"
+
+export { ShadcnButton, buttonVariants }

package/src/components/ShadcnButton/index.ts

@@ -0,0 +1,2 @@
+export { ShadcnButton, buttonVariants } from './ShadcnButton';
+export type { ShadcnButtonProps } from './ShadcnButton';