@4alldigital/foundation-ui--core 3.0.0

package/src/components/CardGrid/CardGrid.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Props } from './CardGrid.types';
+import Card from '../Card';
+
+const CardGrid = ({ testID, data, onPressCallback }: Props) => {
+  return (
+    <div data-testid={testID || '"CardGrid"'} className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {data.map((item, index) => (
+        <Card
+          key={index}
+          variant={item.variant}
+          data={{
+            ...item.data,
+            onClick: () => onPressCallback(item.data.id),
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+CardGrid.displayName = 'CardGrid';
+
+export default CardGrid;
+export type { Props };

package/src/components/CardGrid/CardGrid.types.ts

@@ -0,0 +1,7 @@
+import { Props as CardProps } from '../Card/Card.types';
+
+export interface Props {
+  testID?: string;
+  data: CardProps[];
+  onPressCallback: (id: string) => void;
+}

package/src/components/CardGrid/index.ts

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

package/src/components/Carousel/Carousel.stories.tsx

@@ -0,0 +1,351 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Carousel from '.';
+import { CardVariant } from '../Card/Card.types';
+import Copy from '../Copy';
+import Heading from '../Heading';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+import FormField from '../FormField';
+import { FIELD_TYPES } from '../FormField/FormField.types';
+import Form from '../Form';
+import ButtonGroup from '../ButtonGroup';
+import { BTN_SIZES, BTN_VARIANTS } from '../Button/Button.types';
+
+const meta: Meta<typeof Carousel> = {
+  title: 'ORGANISMS/Carousel',
+  component: Carousel,
+};
+
+type Story = StoryObj<typeof Carousel>;
+
+export const Default: Story = {
+  args: {
+    onPressCallback: (id: string) => console.log('Card clicked', id),
+    carouselOptions: {
+      loop: false,
+      showArrows: true,
+      // New responsive API - uses Tailwind breakpoint naming
+      slidesPerView: {
+        base: 1,  // Mobile
+        sm: 2,    // 640px+
+        md: 3,    // 768px+
+        lg: 4,    // 1024px+
+        xl: 5,    // 1280px+
+      },
+    },
+    data: [
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '1',
+          title: 'Card title 1',
+          description: 'Card description',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '2',
+          title: 'Card Title 2',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '3',
+          title: 'Card Title 3',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '4',
+          title: 'Card Title 4',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '5',
+          title: 'Card Title 5',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '6',
+          title: 'Card Title 6',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '7',
+          title: 'Card Title 7',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '8',
+          title: 'Card Title 8',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '9',
+          title: 'Card Title 9',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '10',
+          title: 'Card Title 10',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          raised: true,
+        },
+      },
+    ],
+  },
+};
+
+// Example using old API (still supported for backward compatibility)
+export const LegacyResponsiveAPI: Story = {
+  args: {
+    onPressCallback: (id: string) => console.log('Card clicked', id),
+    carouselOptions: {
+      loop: false,
+      slidesToShow: 5,
+      showArrows: true,
+      responsive: [
+        {
+          breakpoint: 1324,
+          settings: {
+            slidesToShow: 4,
+          },
+        },
+        {
+          breakpoint: 1024,
+          settings: {
+            slidesToShow: 3,
+          },
+        },
+        {
+          breakpoint: 600,
+          settings: {
+            slidesToShow: 1,
+          },
+        },
+      ],
+    },
+    data: [
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '1',
+          title: 'Legacy API Card 1',
+          description: 'Using old responsive breakpoint API',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '2',
+          title: 'Legacy API Card 2',
+          description: 'Using old responsive breakpoint API',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '3',
+          title: 'Legacy API Card 3',
+          description: 'Using old responsive breakpoint API',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '4',
+          title: 'Legacy API Card 4',
+          description: 'Using old responsive breakpoint API',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '5',
+          title: 'Legacy API Card 5',
+          description: 'Using old responsive breakpoint API',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: '6',
+          title: 'Legacy API Card 6',
+          description: 'Using old responsive breakpoint API',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+        },
+      },
+    ],
+  },
+};
+
+export const CustomRender: Story = {
+  args: {
+    data: [
+      {
+        id: '1',
+        title: 'Card title 1',
+        component: () => {
+          return (
+            <div className="flex flex-1 flex-col gap-1">
+              <Heading tag={HEADING_TAGS.H1}>Heading 1</Heading>
+              <Heading tag={HEADING_TAGS.H2}>Heading 2</Heading>
+              <Heading tag={HEADING_TAGS.H3}>Heading 3</Heading>
+            </div>
+          );
+        },
+      },
+      {
+        id: '2',
+        title: 'Card Title 2',
+        component: () => {
+          return (
+            <div>
+              <Form>
+                <FormField name="email" type={FIELD_TYPES.EMAIL} label="Email" required icon="mdi:email-outline" />
+                <FormField name="phone" type={FIELD_TYPES.TEL} label="Phone" required icon="mdi:phone-outline" />
+              </Form>
+            </div>
+          );
+        },
+      },
+      {
+        id: '3',
+        title: 'Card Title 3',
+        component: () => {
+          return (
+            <div>
+              <ButtonGroup
+                buttonData={[
+                  {
+                    id: 'button1',
+                    variant: BTN_VARIANTS.SECONDARY,
+                    children: 'Button 1',
+                    size: BTN_SIZES.SMALL,
+                  },
+                  {
+                    id: 'button2',
+                    variant: BTN_VARIANTS.SECONDARY,
+                    children: 'Button 2',
+                    size: BTN_SIZES.SMALL,
+                  },
+                  {
+                    id: 'button3',
+                    variant: BTN_VARIANTS.SECONDARY,
+                    children: 'Button 3',
+                    size: BTN_SIZES.SMALL,
+                  },
+                ]}
+              />
+            </div>
+          );
+        },
+      },
+    ],
+    customRender: (item: any, index: number) => {
+      return (
+        <div key={index} className="px-2">
+          <div className="bg-white bg-opacityDark10 border border-solid border-white min-h-[200px] rounded shadow p-2 h-64 flex items-center justify-start flex-col">
+            <Copy>{item.title}</Copy>
+            {item.component && item.component()}
+          </div>
+        </div>
+      );
+    },
+  },
+};
+
+export default meta;

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Props } from './Carousel.types';
+import Card from '../Card';
+import {
+  ShadcnCarousel,
+  ShadcnCarouselContent,
+  ShadcnCarouselItem,
+  ShadcnCarouselPrevious,
+  ShadcnCarouselNext,
+} from '../ShadcnCarousel';
+// import type { CarouselApi } from '../ShadcnCarousel';
+
+/**
+ * Carousel component using Embla Carousel (shadcn)
+ *
+ * @example
+ * // New API (recommended)
+ * <Carousel
+ *   data={items}
+ *   carouselOptions={{
+ *     slidesPerView: {
+ *       base: 1,  // Mobile
+ *       md: 2,    // Tablet
+ *       lg: 4,    // Desktop
+ *     },
+ *     loop: true,
+ *     showArrows: true,
+ *   }}
+ * />
+ *
+ * @example
+ * // Legacy API (still supported)
+ * <Carousel
+ *   data={items}
+ *   carouselOptions={{
+ *     slidesToShow: 4,
+ *     responsive: [
+ *       { breakpoint: 1024, settings: { slidesToShow: 3 } },
+ *       { breakpoint: 600, settings: { slidesToShow: 1 } },
+ *     ]
+ *   }}
+ * />
+ */
+const Carousel = ({
+  testID,
+  data,
+  onPressCallback,
+  // isCentered = false,
+  carouselOptions = {
+    loop: false,
+    showArrows: true,
+    slidesPerView: {
+      base: 1,
+      md: 2,
+      lg: 3,
+    },
+  },
+  customRender,
+}: Props) => {
+  // const [api, setApi] = React.useState<CarouselApi>();
+
+  // Get slides per view configuration (with backward compatibility)
+  const slidesPerView = carouselOptions?.slidesPerView || {
+    base: carouselOptions?.slidesToShow || 1,
+  };
+
+  // Convert old responsive API to new format if needed
+  if (carouselOptions?.responsive && !carouselOptions?.slidesPerView) {
+    carouselOptions.responsive.forEach(bp => {
+      if (bp.breakpoint <= 640) slidesPerView.base = bp.settings.slidesToShow;
+      else if (bp.breakpoint <= 768) slidesPerView.sm = bp.settings.slidesToShow;
+      else if (bp.breakpoint <= 1024) slidesPerView.md = bp.settings.slidesToShow;
+      else if (bp.breakpoint <= 1280) slidesPerView.lg = bp.settings.slidesToShow;
+      else if (bp.breakpoint <= 1536) slidesPerView.xl = bp.settings.slidesToShow;
+      else slidesPerView['2xl'] = bp.settings.slidesToShow;
+    });
+  }
+
+  // Helper function to get basis class for a given count
+  const getBasisClass = (count: number, prefix = '') => {
+    const pre = prefix ? `${prefix}:` : '';
+    switch (count) {
+      case 1: return `${pre}basis-full`;
+      case 2: return `${pre}basis-1/2`;
+      case 3: return `${pre}basis-1/3`;
+      case 4: return `${pre}basis-1/4`;
+      case 5: return `${pre}basis-1/5`;
+      case 6: return `${pre}basis-1/6`;
+      default: return `${pre}basis-full`;
+    }
+  };
+
+  const maxSlides = Math.max(
+    slidesPerView.base || 1,
+    slidesPerView.sm || 0,
+    slidesPerView.md || 0,
+    slidesPerView.lg || 0,
+    slidesPerView.xl || 0,
+    slidesPerView['2xl'] || 0,
+  );
+
+  const disableFeatures = data.length <= maxSlides;
+
+  const defaultRender = (item: any, index: number) => (
+    <div key={index} className="px-2 overflow-hidden rounded-lg">
+      <Card
+        key={index}
+        variant={item.variant}
+        data={{
+          ...item.data,
+          onClick: onPressCallback
+            ? () => {
+                onPressCallback(item.data.id);
+              }
+            : undefined,
+        }}
+        className={item.className}
+      />
+    </div>
+  );
+
+  const { showArrows = true, loop = false, vertical = false } = carouselOptions;
+
+  return (
+    <div data-testid={testID || 'Carousel'} className="mb-4">
+      <ShadcnCarousel
+        // setApi={setApi}
+        opts={{
+          align: 'start',
+          loop: !disableFeatures && loop,
+          slidesToScroll: 1,
+        }}
+        orientation={vertical ? 'vertical' : 'horizontal'}
+        className="w-full">
+        <ShadcnCarouselContent className="-ml-2 md:-ml-4">
+          {data?.map((item, index) => {
+            const slideContent = customRender ? customRender(item, index) : defaultRender(item, index);
+
+            // Build basis classes - only include responsive variants that are defined
+            const basisClasses = cx(
+              'pl-2 md:pl-4',
+              // Base (mobile-first) - always include as unprefixed class
+              slidesPerView.base && getBasisClass(slidesPerView.base),
+              // Only include responsive breakpoints that are explicitly defined
+              slidesPerView.sm && getBasisClass(slidesPerView.sm, 'sm'),
+              slidesPerView.md && getBasisClass(slidesPerView.md, 'md'),
+              slidesPerView.lg && getBasisClass(slidesPerView.lg, 'lg'),
+              slidesPerView.xl && getBasisClass(slidesPerView.xl, 'xl'),
+              slidesPerView['2xl'] && getBasisClass(slidesPerView['2xl'], '2xl'),
+            );
+            
+            return (
+              <ShadcnCarouselItem key={index} className={basisClasses}>
+                {slideContent}
+              </ShadcnCarouselItem>
+            );
+          })}
+        </ShadcnCarouselContent>
+        {!disableFeatures && showArrows && (
+          <>
+            <ShadcnCarouselPrevious className="-left-2" />
+            <ShadcnCarouselNext className="-right-2" />
+          </>
+        )}
+      </ShadcnCarousel>
+    </div>
+  );
+};
+
+Carousel.displayName = 'Carousel';
+
+export default Carousel;
+export type { Props };

package/src/components/Carousel/Carousel.types.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { Props as CardProps } from '../Card/Card.types';
+
+export interface Props {
+  testID?: string;
+  data: CardProps[] | any[];
+  onPressCallback?: (arg: any) => void;
+  isCentered?: boolean;
+  carouselOptions?: {
+    loop?: boolean;
+    vertical?: boolean;
+    showArrows?: boolean;
+    // New responsive API using Tailwind breakpoint naming
+    slidesPerView?: {
+      base?: number; // Mobile first (default)
+      sm?: number;   // @media (min-width: 640px)
+      md?: number;   // @media (min-width: 768px)
+      lg?: number;   // @media (min-width: 1024px)
+      xl?: number;   // @media (min-width: 1280px)
+      '2xl'?: number; // @media (min-width: 1536px)
+    };
+    // Deprecated: kept for backward compatibility
+    slidesToShow?: number;
+    responsive?: {
+      breakpoint: number;
+      settings: {
+        slidesToShow: number;
+      };
+    }[];
+  };
+  customRender?: (item: any, index: number) => ReactElement;
+}