@4alldigital/foundation-ui--core 3.0.0

package/src/components/ShadcnCarousel/ShadcnCarousel.tsx

@@ -0,0 +1,261 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "../../utils"
+import { ShadcnButton } from "../ShadcnButton"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const ShadcnCarousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+ShadcnCarousel.displayName = "ShadcnCarousel"
+
+const ShadcnCarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+ShadcnCarouselContent.displayName = "ShadcnCarouselContent"
+
+const ShadcnCarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+ShadcnCarouselItem.displayName = "ShadcnCarouselItem"
+
+const ShadcnCarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof ShadcnButton>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <ShadcnButton
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full bg-white/40",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </ShadcnButton>
+  )
+})
+ShadcnCarouselPrevious.displayName = "ShadcnCarouselPrevious"
+
+const ShadcnCarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof ShadcnButton>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <ShadcnButton
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full bg-white/40",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </ShadcnButton>
+  )
+})
+ShadcnCarouselNext.displayName = "ShadcnCarouselNext"
+
+export {
+  type CarouselApi,
+  ShadcnCarousel,
+  ShadcnCarouselContent,
+  ShadcnCarouselItem,
+  ShadcnCarouselPrevious,
+  ShadcnCarouselNext,
+  useCarousel,
+}

package/src/components/ShadcnCarousel/index.ts

@@ -0,0 +1,9 @@
+export {
+  type CarouselApi,
+  ShadcnCarousel,
+  ShadcnCarouselContent,
+  ShadcnCarouselItem,
+  ShadcnCarouselPrevious,
+  ShadcnCarouselNext,
+  useCarousel,
+} from './ShadcnCarousel';

package/src/components/Share/Share.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Share from '.';
+
+const meta: Meta<typeof Share> = {
+  title: 'MOLECULES/Share',
+  component: Share,
+};
+
+type Story = StoryObj<typeof Share>;
+
+export const Default: Story = {
+  args: {
+    url: 'http://github.com',
+  },
+};
+
+export default meta;

package/src/components/Share/Share.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  EmailShareButton,
+  FacebookShareButton,
+  LinkedinShareButton,
+  TwitterShareButton,
+  WhatsappShareButton,
+} from 'react-share';
+import { Props } from './Share.types';
+import Icon from '../Icon';
+import Copy from '../Copy';
+import { COPY_TAG } from '../Copy/Copy.types';
+import STRINGS from '../../translations';
+
+const Share = ({
+  testID,
+  url,
+  title = 'Share',
+  enabled = { facebook: true, twitter: true },
+}: Props) => {
+  return (
+    <div data-testid={testID || 'Share'} className="flex gap-2 items-center ">
+      <div>
+        <Copy as={COPY_TAG.P} className="mb-0">
+          {STRINGS.UI.SHARE}:
+        </Copy>
+      </div>
+      {enabled?.facebook && (
+        <FacebookShareButton url={url} title={title} className="">
+          <Icon name="mdi:facebook" />
+        </FacebookShareButton>
+      )}
+      {enabled?.twitter && (
+        <TwitterShareButton url={url} title={title} className="">
+          <Icon name="mdi:twitter" />
+        </TwitterShareButton>
+      )}
+      {enabled?.whatsapp && (
+        <WhatsappShareButton url={url} title={title} className="">
+          <Icon name="mdi:whatsapp" />
+        </WhatsappShareButton>
+      )}
+      {enabled?.email && (
+        <EmailShareButton url={url} title={title} className="">
+          <Icon name="mdi:email" />
+        </EmailShareButton>
+      )}
+      {enabled?.linkedin && (
+        <LinkedinShareButton url={url} title={title} className="">
+          <Icon name="mdi:linkedin" />
+        </LinkedinShareButton>
+      )}
+    </div>
+  );
+};
+
+Share.displayName = 'Share';
+
+export default Share;
+export type { Props };

package/src/components/Share/Share.types.ts

@@ -0,0 +1,12 @@
+export interface Props {
+  testID?: string;
+  title?: string;
+  url: string;
+  enabled?: {
+    facebook?: boolean;
+    twitter?: boolean;
+    whatsapp?: boolean;
+    email?: boolean;
+    linkedin?: boolean;
+  }
+}

package/src/components/Share/index.ts

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

package/src/components/SubscriptionManager/SubscriptionManager.stories.tsx

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import SubscriptionManager from '.';
+import Copy from '../Copy';
+
+const meta: Meta<typeof SubscriptionManager> = {
+  title: 'ORGANISMS/SubscriptionManager',
+  component: SubscriptionManager,
+};
+
+type Story = StoryObj<typeof SubscriptionManager>;
+
+export const Default: Story = {
+  args: {
+    title: 'Manage Subscription',
+    description: 'Manage your subscription here.  New subscription include a 7-day free trial.',
+    subscription: {
+      id: '1',
+      status: 'active',
+      plan: 'Premium',
+      planDescription: 'Unlimited Platform Access',
+      price: '£4.50/month',
+      nextBillingDate: '20th August 2025',
+    },
+    paymentMethod: {
+      cardType: 'Visa',
+      cardNumber: '•••• •••• •••• 4242',
+      cardExpiry: '12/25',
+    },
+    plans: [
+      {
+        id: '1',
+        name: 'Premium',
+        price: '£4.50',
+        icon: 'mdi:rotate-360',
+        description: 'Unlimited Platform Access',
+      },
+      {
+        id: '2',
+        name: 'Premium+',
+        price: '£19.50',
+        icon: 'mdi:camera-flip',
+        description: 'Unlimited On-Demand and Live classes',
+      },
+    ],
+    children: (
+      <div className="flex justify-center gap-4">
+        <Copy>Stripe payment form goes here FROM APP.</Copy>
+      </div>
+    ),
+    pauseSubscriptionCallback: () => console.log('Pause Subscription'),
+    changeSubscriptionCallback: (id: string) => console.log('Change Subscription to: ', id),
+    updatePaymentMethodCallback: () => console.log('Update Payment Method'),
+    contactSupportCallback: () => console.log('Contact Support'),
+    selectedPlanCallback: (planId: string) => console.log('Selected Plan: ', planId),
+    isLoading: false,
+  },
+};
+
+export const WithEndDate: Story = {
+  args: {
+    ...Default.args,
+    subscription: {
+      id: '1',
+      status: 'cancelled',
+      plan: 'Premium+',
+      planDescription: 'Unlimited On-Demand and Live classes',
+      price: '£19.50/month',
+      nextBillingDate: '20th August 2025',
+      endDate: '20th September 2025',
+    },
+    updatePaymentMethodCallback: undefined,
+  },
+};
+
+export const NoSubscription: Story = {
+  args: {
+    ...Default.args,
+    subscription: undefined,
+    paymentMethod: undefined,
+    updatePaymentMethodCallback: undefined,
+  },
+};
+
+export const Trialing: Story = {
+  args: {
+    ...Default.args,
+    subscription: {
+      id: '2',
+      status: 'trialing',
+      plan: 'Premium+',
+      planDescription: 'Unlimited On-Demand and Live classes',
+      price: '£19.50/month',
+      nextBillingDate: '20th August 2025',
+    },
+    paymentMethod: {
+      cardType: 'Visa',
+      cardNumber: '•••• •••• •••• 1881',
+      cardExpiry: '09/26',
+    },
+  },
+};
+
+export const PastDue: Story = {
+  args: {
+    ...Default.args,
+    subscription: {
+      id: '3',
+      status: 'past_due',
+      plan: 'Premium',
+      planDescription: 'Unlimited Platform Access',
+      price: '£4.50/month',
+      nextBillingDate: '15th July 2025',
+    },
+    paymentMethod: {
+      cardType: 'Mastercard',
+      cardNumber: '•••• •••• •••• 4444',
+      cardExpiry: '11/26',
+    },
+    updatePaymentMethodCallback: () => console.log('Update Payment Method (Past Due)'),
+  },
+};
+
+export const Incomplete: Story = {
+  args: {
+    ...Default.args,
+    subscription: {
+      id: '4',
+      status: 'incomplete',
+      plan: 'Premium+',
+      planDescription: 'Unlimited On-Demand and Live classes',
+      price: '£19.50/month',
+      nextBillingDate: 'Pending',
+    },
+  },
+};
+
+export const Inactive: Story = {
+  args: {
+    ...Default.args,
+    subscription: {
+      id: '5',
+      status: 'inactive',
+      plan: 'Premium',
+      planDescription: 'Unlimited Platform Access',
+      price: '£4.50/month',
+      nextBillingDate: 'N/A',
+    },
+  },
+};
+
+export const WithoutDescription: Story = {
+  args: {
+    ...Default.args,
+    subscription: {
+      id: '6',
+      status: 'active',
+      plan: 'Basic',
+      price: '£2.99/month',
+      nextBillingDate: '1st September 2025',
+    },
+    paymentMethod: {
+      cardType: 'Amex',
+      cardNumber: '•••• •••• •••• 0005',
+      cardExpiry: '03/27',
+    },
+  },
+};
+
+export const NoPaymentMethod: Story = {
+  args: {
+    ...Default.args,
+    paymentMethod: undefined,
+    updatePaymentMethodCallback: () => console.log('Update Payment Method (No PM)'),
+  },
+};
+
+export default meta;