@4alldigital/foundation-ui--core 3.0.0

package/src/components/Carousel/MIGRATION.md

@@ -0,0 +1,156 @@
+# Carousel Component Migration Guide
+
+## Overview
+The Carousel component has been updated to use **shadcn's Embla Carousel** instead of react-slick. This fixes the responsive breakpoint issues on initial page load and provides a more modern, accessible carousel implementation.
+
+## What Changed?
+
+### New Implementation
+- ✅ **Embla Carousel** (via shadcn) - Modern, lightweight carousel
+- ✅ **Fixed responsive issues** - Breakpoints work correctly on initial load
+- ✅ **Better accessibility** - Keyboard navigation and ARIA attributes
+- ✅ **Tailwind-first** - Uses responsive Tailwind classes
+
+### Removed
+- ❌ **react-slick** - No longer used
+- ❌ **slick-carousel** styles - No longer needed
+
+## New API (Recommended)
+
+The new API uses Tailwind's breakpoint naming convention for better integration:
+
+```tsx
+<Carousel 
+  data={items}
+  carouselOptions={{
+    slidesPerView: {
+      base: 1,    // Mobile (default)
+      sm: 2,      // 640px+
+      md: 3,      // 768px+
+      lg: 4,      // 1024px+
+      xl: 5,      // 1280px+
+      '2xl': 6,   // 1536px+
+    },
+    loop: true,
+    showArrows: true,
+  }}
+/>
+```
+
+### Breakpoint Reference
+| Breakpoint | Min Width | CSS Media Query |
+|------------|-----------|-----------------|
+| `base`     | 0px       | Default (mobile-first) |
+| `sm`       | 640px     | `@media (min-width: 640px)` |
+| `md`       | 768px     | `@media (min-width: 768px)` |
+| `lg`       | 1024px    | `@media (min-width: 1024px)` |
+| `xl`       | 1280px    | `@media (min-width: 1280px)` |
+| `2xl`      | 1536px    | `@media (min-width: 1536px)` |
+
+## Legacy API (Still Supported)
+
+For backward compatibility, the old API still works:
+
+```tsx
+<Carousel
+  data={items}
+  carouselOptions={{
+    slidesToShow: 4,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1,
+        },
+      },
+    ],
+    loop: true,
+    showArrows: true,
+  }}
+/>
+```
+
+## Migration Examples
+
+### Before (react-slick)
+```tsx
+const carouselOptions = {
+  loop: false,
+  slidesToShow: 5,
+  scrollAnimationDuration: 350,
+  showDots: false,
+  showArrows: true,
+  responsive: [
+    {
+      breakpoint: 1324,
+      settings: { slidesToShow: 4 },
+    },
+    {
+      breakpoint: 1024,
+      settings: { slidesToShow: 3 },
+    },
+    {
+      breakpoint: 600,
+      settings: { slidesToShow: 1 },
+    },
+  ],
+};
+```
+
+### After (shadcn/Embla)
+```tsx
+const carouselOptions = {
+  loop: false,
+  showArrows: true,
+  slidesPerView: {
+    base: 1,  // < 640px
+    sm: 1,    // 640px - 767px  
+    md: 3,    // 768px - 1023px
+    lg: 4,    // 1024px - 1279px
+    xl: 5,    // 1280px+
+  },
+};
+```
+
+## Removed Options
+
+The following options are no longer supported:
+
+- `scrollAnimationDuration` - Handled by Embla's default animation
+- `showDots` - Not implemented (can be added if needed)
+- `autoPlay` - Not implemented (can be added if needed)
+- `autoplaySpeed` - Not implemented (can be added if needed)
+- `easing` - Handled by Embla's default easing
+- `rtl` - Not implemented (can be added if needed)
+- `onSnapToItem` - Use Embla's API directly if needed
+- `shouldScrollOnClick` - Not applicable
+
+## Benefits of New Implementation
+
+1. **Fixed Initial Load Issue** ✅
+   - Responsive breakpoints now work correctly on page load
+   - No need for window resize or device rotation
+
+2. **Better Performance** ⚡
+   - Lighter bundle size (Embla vs react-slick)
+   - Native browser features where possible
+
+3. **Improved Accessibility** ♿
+   - Better keyboard navigation
+   - Proper ARIA attributes
+   - Screen reader support
+
+4. **Modern Stack** 🔧
+   - Tailwind CSS integration
+   - TypeScript first
+   - React 19 compatible
+
+## Need Help?
+
+If you encounter any issues during migration or need additional features from the old API, please reach out to the team or create an issue in the repository.

package/src/components/Carousel/index.ts

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

package/src/components/Cart/Cart.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Cart from '.';
+import { CartProvider } from '../../context';
+
+const meta: Meta<typeof Cart> = {
+  title: 'UI/Cart',
+  component: Cart,
+};
+
+type Story = StoryObj<typeof Cart>;
+
+export const Default: Story = {
+  args: {
+    isCheckout: true,
+  },
+  render: props => {
+    const exampleAppData = {
+      value: {
+        items: [
+          {
+            uuid: '123',
+            title: 'Inside Alef, the company trying to build a car you can both drive and fly',
+            image: 'https://picsum.photos/600/400',
+            options: {
+              usage: 'Personal',
+              selectedPrice: 10,
+              selectedLicense: 'Standard',
+            },
+          },
+          {
+            uuid: '456',
+            title: 'Item 2',
+            image: 'https://picsum.photos/650/300',
+            options: {
+              usage: 'Commercial',
+              selectedPrice: 20,
+              selectedLicense: 'Extended',
+            },
+          },
+        ],
+        taxRate: {
+          country: 'US',
+          percentage: 10,
+        },
+        taxAmount: 3,
+        promoCode: {
+          code: 'ABC123',
+          name: 'Summer Sale',
+          discount: '10%',
+          discountedAmount: 3,
+        },
+        currency: {
+          symbol: '$',
+          code: 'USD',
+          showCode: true,
+        },
+        cartTotal: new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD',
+          currencyDisplay: 'symbol',
+        }).format(30),
+      },
+      handleRemoveFromCart: (uuid: string) => {
+        console.log('Removing item from cart', uuid);
+      },
+      handleRemovePromoCode: (uuid: string) => {
+        console.log('Removing promo code from cart', uuid);
+      },
+      handleCheckout: () => {
+        console.log('Checking out');
+      },
+      handleItemClick: (uuid: string) => {
+        console.log('Item clicked', uuid);
+      },
+    };
+
+    /* TODO review: 
+    new Intl.NumberFormat("en-GB", {
+              style: "currency",
+              currency: "GBP",
+            })
+              */
+
+    return (
+      <CartProvider data={exampleAppData}>
+        <Cart {...props} />
+      </CartProvider>
+    );
+  },
+};
+
+export default meta;

package/src/components/Cart/Cart.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import { Props } from './Cart.types';
+import { useCartContext } from '../../context';
+import DisplayHeading from '../DisplayHeading';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+import Heading from '../Heading';
+import List from '../List';
+import { ListTag } from '../List/List.types';
+import Copy from '../Copy';
+import Button from '../Button';
+import { BTN_SIZES, BTN_TYPES, BTN_VARIANTS } from '../Button/Button.types';
+import { useLanguage } from '../../hooks';
+import ListItem from '../ListItem';
+import Image from '../Image';
+import PromoCodeForm from '../../forms/PromoCodeForm';
+
+const Cart = ({ testID, isCheckout }: Props) => {
+  const context = useCartContext();
+  const T = useLanguage();
+
+  const [showCart, setShowCart] = useState(false);
+  const popupRef = useRef<HTMLDivElement>(null); // To reference the popup box
+  const promoCode = context?.value?.promoCode?.code;
+
+  // Function to handle clicks outside the popup
+  const handleClickOutside = (event: MouseEvent) => {
+    if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
+      setShowCart(false); // Close popup if clicked outside
+    }
+  };
+
+  useEffect(() => {
+    // Attach the event listener when the component mounts
+    document.addEventListener('mousedown', handleClickOutside);
+
+    // Cleanup the event listener when the component unmounts
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div data-testid={testID || '"Cart"'} className="relative">
+      <div className="relative">
+        {!isCheckout && (
+          <>
+            <Button
+              rounded
+              icon="mdi:cart"
+              onClick={event => {
+                event.stopPropagation();
+                setShowCart(!showCart);
+              }}
+            />
+            {context?.value?.items && context.value.items.length > 0 && (
+              <div className="absolute rounded-full bg-accent p-2 w-6 h-6 -top-2 -left-2 flex items-center justify-center">
+                <Copy className="mb-0 text-white text-sm">{String(context?.value?.items.length)}</Copy>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      {(showCart || isCheckout) && (
+        <div
+          ref={popupRef}
+          className={cx(
+            'min-w-128  text-body-text dark:text-body-text-dark  bg-body-bg dark:bg-body-bg-dark',
+            { 'rounded shadow absolute top-12 p-4 right-0': !isCheckout },
+          )}>
+          {!isCheckout && <DisplayHeading tag={HEADING_TAGS.H3} text="Cart" />}
+          {context?.value?.items && context?.value?.items.length > 0 && (
+            <div>
+              <List as={ListTag.UL} className="">
+                {context?.value?.items.map((item: any) => {
+                  const itemTitle = item.title || item.generatedTitle || item.uuid;
+                  return (
+                    <ListItem key={item.uuid} as="li">
+                      <div className="flex flex-row gap-4 p-2 border border-solid border-grey-100 rounded mb-2">
+                        <Button
+                          variant={BTN_VARIANTS.LINK}
+                          className="w-full p-0"
+                          onClick={() => context?.handleItemClick?.(item.uuid)}>
+                          <div className="flex gap-2 w-full">
+                            <div className="relative max-w-32 flex flex-1 overflow-hidden rounded h-20">
+                              <Image
+                                src={item.image}
+                                alt="item image"
+                                className="aspect-[2/1] w-auto h-auto object-cover"
+                              />
+                            </div>
+                            <div className="max-w-64 flex-1 text-left">
+                              <Copy className="mb-0 line-clamp-2">{itemTitle}</Copy>
+                              <Copy className="mb-0">${item?.options?.selectedPrice} USD</Copy>
+                            </div>
+                          </div>
+                        </Button>
+                        <div className="flex items-center justify-center">
+                          <Button
+                            id="remove-cart-btn"
+                            rounded
+                            variant={BTN_VARIANTS.SECONDARY}
+                            type={BTN_TYPES.BUTTON}
+                            onClick={() => {
+                              context?.handleRemoveFromCart?.(item.uuid);
+                              if (context?.value?.items && context.value.items.length === 1) {
+                                setTimeout(() => {
+                                  setShowCart(false);
+                                }, 2000);
+                              }
+                            }}
+                            icon="mdi:delete"
+                          />
+                        </div>
+                      </div>
+                    </ListItem>
+                  );
+                })}
+              </List>
+              <div className="mt-4" />
+              {isCheckout && (
+                <>
+                  <div className="flex items-start justify-start">
+                    <PromoCodeForm handleSubmit={(value: string) => context?.handleAddPromoCode?.(value)} />
+                  </div>
+                  <Copy>
+                    {T?.UI?.TAX}: {context?.value?.taxRate?.percentage}%
+                  </Copy>
+                  <Copy>
+                    {T?.UI?.TAX_DUE}: {context?.value?.currency?.symbol}
+                    {context?.value?.taxAmount} {context?.value?.currency?.code}
+                  </Copy>
+                  {promoCode && (
+                    <div className="flex gap-4 items-center justify-between">
+                      <Copy>
+                        {T?.UI?.PROMO_CODE}: {promoCode}
+                      </Copy>
+                      <div>
+                        <Button
+                          rounded
+                          id="remove-promo-btn"
+                          variant={BTN_VARIANTS.SECONDARY}
+                          outline
+                          type={BTN_TYPES.BUTTON}
+                          onClick={() => context?.handleRemovePromoCode?.(promoCode)}
+                          className=""
+                          icon="mdi:window-close"
+                        />
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+              <Copy>
+                {T?.UI?.TOTAL}: {context?.value?.cartTotal}{' '}
+                {context?.value?.currency?.showCode && context?.value?.currency?.code}
+              </Copy>
+              {!isCheckout && (
+                <div className="flex items-center justify-between gap-4">
+                  <div className="">
+                    <Button size={BTN_SIZES.SMALL} variant={BTN_VARIANTS.SECONDARY} onClick={() => setShowCart(false)}>
+                      {T?.UI?.CONTINUE_BROWSING}
+                    </Button>
+                  </div>
+                  <div className="">
+                    <Button
+                      size={BTN_SIZES.SMALL}
+                      variant={BTN_VARIANTS.PRIMARY}
+                      onClick={() => {
+                        setShowCart(false);
+                        context?.handleCheckout?.();
+                      }}>
+                      {T?.UI?.CHECKOUT}
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          {(!context?.value?.items || context?.value?.items?.length === 0) && (
+            <div>
+              <Heading tag={HEADING_TAGS.H5}>{T?.UI?.EMPTY}</Heading>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Cart.displayName = 'Cart';
+
+export default Cart;
+export type { Props };

package/src/components/Cart/Cart.types.ts

@@ -0,0 +1,4 @@
+export interface Props {
+  testID?: string;
+  isCheckout?: boolean;
+}

package/src/components/Cart/index.ts

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

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Checkbox from '.';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'ATOMS/Checkbox',
+  component: Checkbox,
+};
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {};
+
+Default.args = {
+  id: 'id',
+  label: 'My Checkbox Label',
+};
+
+export default meta;

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react';
+import cx from 'classnames';
+import { Props } from './Checkbox.types';
+import Icon from '../Icon';
+
+const Checkbox = forwardRef(function MyInput(
+  { id, label, required, className, disabled, ...rest }: Props,
+  ref: any,
+) {
+  return (
+    <div data-testid="Checkbox" className={cx('flex items-center', className)}>
+      <div className="relative bg-none w-5 h-5 flex justify-center items-center">
+        <input
+          id={id}
+          ref={ref}
+          disabled={disabled}
+          type="checkbox"
+          className="form-item checkbox m-0 appearance-none peer h-full w-full shrink-0 focus:ring-2"
+          required={required}
+          {...rest}
+        />
+        <span className="absolute transition-opacity opacity-0 pointer-events-none peer-checked:opacity-100 w-full h-full flex items-center justify-center top-0 left-0">
+          <Icon name="mdi:check-bold" size={12} />
+        </span>
+      </div>
+      {label && (
+        <label className="label pl-2 leading-none text-sm text-body-text dark:text-body-text-dark" htmlFor={id}>
+          {label}
+        </label>
+      )}
+    </div>
+  );
+});
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;
+export type { Props };

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,15 @@
+export enum Size {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+
+export interface Props {
+  id: string;
+  label?: string | React.ReactNode[];
+  required?: boolean;
+  className?: string;
+  disabled?: boolean;
+  checked?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}

package/src/components/Checkbox/index.ts

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

package/src/components/Chip/Chip.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Chip from '.';
+
+const meta: Meta<typeof Chip> = {
+  title: 'ATOMS/Chip',
+  component: Chip,
+};
+
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+  args: {
+    text: 'Chip',
+    outline: true,
+  },
+};
+
+export const WithIcon = {
+  args: {
+    text: 'Chip',
+    outline: true,
+    icon: 'mdi:check',
+  },
+};
+
+export const ClickeableCip = {
+  args: {
+    text: 'Chip',
+    outline: true,
+    icon: 'mdi:close',
+    rounded: true,
+    variant: 'error',
+    onClick: () => alert('Chip clicked'),
+  },
+};
+
+export default meta;

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,104 @@
+import React, { useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
+import cx from 'classnames';
+import { Props } from './Chip.types';
+import Icon from '../Icon';
+import Link from '../Link';
+import Copy from '../Copy';
+import { COPY_SIZE, COPY_TAG } from '../Copy/Copy.types';
+
+const Chip = ({
+  testID,
+  text,
+  outline,
+  rounded,
+  variant,
+  size = 'medium',
+  icon,
+  iconFirst,
+  onClick,
+}: Props) => {
+  const contentSizeMap = useMemo(() => {
+    switch (size) {
+      case 'small':
+        return {
+          iconSize: 16,
+          copySize: COPY_SIZE.SMALL,
+        };
+      case 'medium':
+        return {
+          iconSize: 20,
+          copySize: COPY_SIZE.MEDIUM,
+        };
+      case 'large':
+        return {
+          iconSize: 28,
+          copySize: COPY_SIZE.LARGE,
+        };
+      default:
+        return {
+          iconSize: 20,
+          copySize: COPY_SIZE.MEDIUM,
+        };
+    }
+  }, [size]);
+
+  const classes = twMerge(
+    cx(
+      'flex inline-flex items-center justify-center rounded select-none gap-2',
+      { 'border border-solid border-primary': outline },
+      { 'rounded-full': rounded },
+      { 'flex-row-reverse': iconFirst },
+      {
+        'bg-primary text-white': variant === 'primary',
+      },
+      { 'bg-secondary text-white': variant === 'secondary' },
+      { 'bg-tertiary text-white': variant === 'tertiary' },
+      { 'bg-info text-white': variant === 'info' },
+      {
+        'bg-success text-white': variant === 'success',
+      },
+      { 'bg-warning text-white': variant === 'warning' },
+      { 'bg-error text-white': variant === 'error' },
+      {
+        'py-1 px-3': size === 'small',
+      },
+      { 'py-2 px-4': size === 'medium' },
+      { 'py-3 px-6': size === 'large' },
+    ),
+  );
+
+  if (onClick && typeof onClick === 'function') {
+    return (
+      <Link data-testid={testID || 'Chip'} className={classes} onClick={onClick}>
+        <Copy className="mb-0" as={COPY_TAG.SPAN} size={contentSizeMap.copySize}>
+          {text}
+        </Copy>
+
+        {icon && (
+          <div className="flex items-center justify-center">
+            <Icon name={icon} size={contentSizeMap.iconSize} />
+          </div>
+        )}
+      </Link>
+    );
+  }
+
+  return (
+    <div data-testid={testID || 'Chip'} className={classes}>
+      <Copy className="mb-0" as={COPY_TAG.SPAN} size={contentSizeMap.copySize}>
+        {text}
+      </Copy>
+      {icon && (
+        <div className="flex items-center justify-center">
+          <Icon name={icon} size={contentSizeMap.iconSize} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+Chip.displayName = 'Chip';
+
+export default Chip;
+export type { Props };

package/src/components/Chip/Chip.types.ts

@@ -0,0 +1,13 @@
+export type ChipVariant = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error';
+
+export interface Props {
+  testID?: string;
+  text: string;
+  outline?: boolean;
+  rounded?: boolean;
+  variant?: ChipVariant;
+  size?: 'small' | 'medium' | 'large';
+  icon?: string;
+  iconFirst?: boolean;
+  onClick?: () => void;
+}

package/src/components/Chip/index.ts

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