@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

package/src/Components/DataDisplay/CarouselBlock/CarouselBlock.stories.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import type {Meta, StoryObj} from "@storybook/react-vite";
+import CarouselBlock from "./CarouselBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta : Meta<typeof CarouselBlock> = {
+  title: "Form / CarouselBlock",
+  component: CarouselBlock,
+}
+
+export default meta;
+type Story = StoryObj<typeof CarouselBlock>
+
+const CarouselTemplate: Story = {
+  render : () =>{
+
+    return <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="participate" level="light">
+      <CarouselBlock
+        title={'What’s On'}
+        cards={[
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+            image: "https://images.pexels.com/photos/1854897/pexels-photo-1854897.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+            image: "https://images.pexels.com/photos/1595655/pexels-photo-1595655.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+            image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+            image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+            pillar: 'participate',
+          },{
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+            image: "https://images.pexels.com/photos/1854897/pexels-photo-1854897.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+            image: "https://images.pexels.com/photos/1595655/pexels-photo-1595655.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+            image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+            image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+            pillar: 'participate',
+          }
+        ]}
+      />
+    </ElementHolder>
+
+  }
+}
+
+export const CarouselView = {
+  ...CarouselTemplate,
+}

package/src/Components/DataDisplay/CarouselBlock/CarouselBlock.tsx

@@ -0,0 +1,73 @@
+import styles from './carouselBlock.module.scss';
+import Slider from "react-slick";
+import CarouselBlockProps from "./CarouselBlockProps.tsx";
+import DetailsCard from "../DetailsCard/DetailsCard.tsx";
+import Container from "../../Shared/Container/Container.tsx";
+import '../slider.scss'
+import {CaretLeft, CaretRight} from "@hellobetterdigitalnz/selwynui";
+import {useRef} from "react";
+
+const CarouselBlock = (props : CarouselBlockProps) =>{
+
+  const { title , cards = [], action } = props
+  const sliderRef = useRef<any>(null);
+
+  const settings = {
+    dots: false,
+    arrows: false,
+    infinite: false,
+    speed: 500,
+    touchMove: true,
+    variableWidth: true,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+  };
+
+  return <div className={`${styles.carousel} carouselBlock`}>
+   <Container>
+     <div className={styles.carouselWrapper}>
+       <div className={styles.carouselTitle}>
+         <h3>{title}</h3>
+         <div className={styles.actions}>
+           <button
+             className="custom-arrow prev"
+             onClick={() => sliderRef.current?.slickPrev()}
+             aria-label="Previous"
+           >
+             <CaretLeft type="thin" />
+           </button>
+
+           <button
+             className="custom-arrow next"
+             onClick={() => sliderRef.current?.slickNext()}
+             aria-label="Next"
+           >
+             <CaretRight type="thin" />
+           </button>
+         </div>
+       </div>
+       <Slider ref={sliderRef} {...settings}>
+         {cards.map((card, index) => (
+           <div className={styles.card}>
+             <DetailsCard
+               key={index}
+               title={card.title}
+               date={card.date}
+               description={card.description}
+               image={card.image}
+               link={card.link}
+               pillar={card.pillar}
+               variation={'long'}
+             />
+           </div>
+         ))}
+       </Slider>
+       <div className={styles.btn}>
+         {action}
+       </div>
+     </div>
+   </Container>
+  </div>
+}
+
+export default CarouselBlock;

package/src/Components/DataDisplay/CarouselBlock/CarouselBlockProps.tsx

@@ -0,0 +1,23 @@
+import {ReactNode} from "react";
+
+export interface SlideItem {
+  title?: string;
+  date?: string;
+  description?: string;
+  image?: string;
+  link?: {
+    title?: string
+    href?: string
+    target?: "_blank" | "_self" | "_parent" | "_top"
+    rel?: string
+  } | undefined;
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
+}
+
+interface CarouselBlockProps {
+  title?: string;
+  action?:ReactNode;
+  cards?: SlideItem[];
+}
+
+export default CarouselBlockProps;

package/src/Components/DataDisplay/CarouselBlock/carouselBlock.module.scss

@@ -0,0 +1,60 @@
+.carousel{
+  .carouselWrapper{
+    width: 100%;
+  }
+
+  .carouselTitle{
+    margin: -12px;
+    margin-bottom: 70px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+
+    h3{
+      font-size: 36px;
+      line-height: 1;
+      font-weight: 700;
+      padding: 12px;
+    }
+
+    .actions{
+      padding: 12px;
+    }
+
+
+    @media screen and (min-width: 992px) {
+      margin-bottom: 84px;
+
+      h3{
+        font-size: var(--font-size-h3);
+      }
+
+    }
+
+  }
+
+  .card{
+    width: 312px !important;
+    margin-right: 16px;
+  }
+
+  .btn{
+    margin-top: 36px;
+    display: flex;
+  }
+
+  @media screen and (min-width: 992px) {
+
+    .card {
+      width: 456px !important;
+      margin-right: 24px;
+    }
+
+
+    .btn{
+      margin-top: 72px;
+    }
+
+  }
+}

package/src/Components/DataDisplay/ChatItenaryBlock/ChatItenaryBlock.stories.tsx

@@ -0,0 +1,128 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import ChatItineraryBlock from "./ChatItenaryBlock";
+import { ElementHolder } from "../../Shared";
+import { Itinerary } from "./ChatItenaryBlockProps";
+
+const meta: Meta = {
+  title: "Layout / ChatItineraryBlock",
+  component: ChatItineraryBlock,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Mock itinerary data
+const mockItinerary: Itinerary = {
+  title: "Selwyn 2 Day Trip",
+  intro: "Hey there! Ready to plan an adventure that beats the Christchurch chill? Let's make your next trip unforgettable!",
+  recommendation: "Nice choice! Selwyn is a beautiful spot with plenty of nature to soak in, great dining options, and perfect for some relaxation.",
+  itineraryHeader: {
+    title: "2-Day Great Alpine Highway Adventure",
+    description: "Explore the Great Alpine Highway. Travel across the Canterbury Plains, past stunning alpine vistas, lakes and rivers into Arthur's Pass National Park."
+  },
+  days: [
+    {
+      title: "Day 1 of 2",
+      subtitle: "Kirwee, Springfield, Porters",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+      activities: [
+        {
+          image: "https://images.pexels.com/photos/1591373/pexels-photo-1591373.jpeg",
+          title: "Check in at Porters Lodge for the night and enjoy a meal",
+          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+          link: {
+            "title": "Learn More",
+            "href": "/",
+            "target": ""
+          },
+        },
+        {
+          image: "https://images.pexels.com/photos/1595655/pexels-photo-1595655.jpeg",
+          title: "Check out the Darfield Bakery",
+          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+          link: {
+            "title": "Learn More",
+            "href": "/",
+            "target": ""
+          },
+        },
+        {
+          image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+          title: "Get a birds eye view of Selwyn with Ballooning Canterbury",
+          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+          link: {
+            "title": "Learn More",
+            "href": "/",
+            "target": ""
+          },
+        }
+      ]
+    },
+    {
+      title: "Day 2 of 2",
+      subtitle: "Porters, Arthurs Pass",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+      activities: [
+        {
+          image: "https://images.pexels.com/photos/1181263/pexels-photo-1181263.jpeg",
+          title: "Stop by Lake Pearson, one of Selwyn's hidden gems",
+          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+          link: {
+            "title": "Learn More",
+            "href": "/",
+            "target": ""
+          },
+        },
+        {
+          image: "https://images.pexels.com/photos/1578750/pexels-photo-1578750.jpeg",
+          title: "Walk to the Devils Punchbowl",
+          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+          link: {
+            "title": "Learn More",
+            "href": "/",
+            "target": ""
+          },
+        },
+        {
+          image: "https://images.pexels.com/photos/1581384/pexels-photo-1581384.jpeg",
+          title: "Refresh at Arthur's Pass Cafe and Store",
+          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+          link: {
+            "title": "Learn More",
+            "href": "/",
+            "target": ""
+          },
+        }
+      ]
+    }
+  ],
+  tags: ["FOOD & WINE", "LUXURY"]
+};
+
+export const ChatItineraryBlockComponent: Story = {
+  render: () => {
+    // Mock API function that returns the itinerary
+    const handlePlanTrip = async (userInput: string): Promise<Itinerary> => {
+      // Simulate API delay
+      await new Promise(resolve => setTimeout(resolve, 1500));
+
+      // Return mock data
+      return mockItinerary;
+    };
+
+    return (
+      <ElementHolder pillar={'visit'} level={'primary'}>
+        <ChatItineraryBlock
+          onPlanTrip={handlePlanTrip}
+        />
+      </ElementHolder>
+    )
+  }
+};

package/src/Components/DataDisplay/ChatItenaryBlock/ChatItenaryBlock.tsx

@@ -0,0 +1,257 @@
+import { useState } from 'react';
+import ChatItineraryBlockProps, { Itinerary } from "./ChatItenaryBlockProps.tsx";
+import styles from './chatItenaryBlock.module.scss';
+import Container from "../../Shared/Container/Container.tsx";
+import HeaderRight from "../../Layout/Header/HeaderRight.tsx";
+import HeaderRightItem from "../../Layout/Header/HeaderRightItem.tsx";
+import Header from "../../Layout/Header/Header.tsx";
+import {XIcon, PaperPlaneTilt, Paperclip, CaretLeft, CaretRight} from "../../Icons";
+import Button from "../../Form/Button/Button.tsx";
+import PathwayBlock from "../PathwayBlock/PathwayBlock.tsx";
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
+import LargeHeroIcon from "../../Layout/HeroBanner/LargeHeroIcon.tsx";
+
+const ChatItineraryBlock = (props: ChatItineraryBlockProps) => {
+  const {
+    onPlanTrip,
+    initialItinerary
+  } = props;
+
+  const [isStarted, setIsStarted] = useState(!!initialItinerary);
+  const [userInput, setUserInput] = useState('');
+  const [itinerary, setItinerary] = useState<Itinerary | null>(initialItinerary || null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const logo = (
+    <a href={"/"}>
+      <img src={'/img/waikirikiri-full-logo.svg'} width={190} height={60} alt={'Waikirikiri Selwyn'}/>
+    </a>
+  );
+
+  const logoSmall = (
+    <a href={"/"}>
+      <img src={'/img/waikirikiri-full-logo.svg'} width={110} height={45} alt={'Waikirikiri Selwyn'}/>
+    </a>
+  );
+
+  const handlePlanTrip = async () => {
+    if (userInput.trim() && onPlanTrip) {
+      setIsLoading(true);
+
+      try {
+        const result = await onPlanTrip(userInput);
+        setItinerary(result);
+        setIsStarted(true);
+      } catch (error) {
+        console.error('Error planning trip:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  if (!isStarted) {
+    return (
+      <div className={styles.mainContainer}>
+        <Header logo={logo} logoSmall={logoSmall}>
+          <HeaderRight>
+            <HeaderRightItem>
+              <XIcon/>
+            </HeaderRightItem>
+          </HeaderRight>
+        </Header>
+
+        <div className={`${styles.chatItineraryBlock} ${styles.hero}`}>
+          <div style={{backgroundImage: `url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg')`}} className={styles.heroBackground}></div>
+          <Container border={false}>
+            <div className={styles.heroContent}>
+              <h1 className={styles.titleHeader}>
+                Kia ora, I’m your AI<br />
+                <span className={styles.highlight}>Selwyn trip planner.</span>
+              </h1>
+              <p className={styles.subtitle}>
+                Tell me what you love — nature, food, adventure, relaxation — and your budget. I'll design a personalised Selwyn itinerary just for you.
+              </p>
+
+              <div className={styles.inputWrapper}>
+                <div className={styles.inputBox}>
+                  <textarea
+                    value={userInput}
+                    onChange={(e) => setUserInput(e.target.value)}
+                    placeholder="I'd love to spend two nights in Selwyn, I love nature, dining out and relaxing."
+                    rows={3}
+                    disabled={isLoading}
+                  />
+                  <div className={styles.inputActions}>
+                    <button className={styles.attachButton} aria-label="Attach file" disabled={isLoading}>
+                      <Paperclip type={'light'}/>
+                    </button>
+                    <div className={styles.planButton}>
+                      <div className={styles.planButtonDesktop}>
+                        <Button
+                          label={isLoading ? 'PLANNING...' : 'PLAN MY TRIP'}
+                          secondaryIcon={<PaperPlaneTilt type={'fill'}/>}
+                          onClick={handlePlanTrip}
+                          type={'button'}
+                          size={'default'}
+                        />
+                      </div>
+                      <button className={styles.planButtonMobile} aria-label="Plan Trip" disabled={isLoading} onClick={handlePlanTrip}>
+                        <PaperPlaneTilt type={'fill'}/>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Container>
+        </div>
+        <div className={styles.heroSvg}>
+          <LargeHeroIcon/>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.itineraryContainer}>
+      <Header logo={logo} logoSmall={logoSmall}>
+        <HeaderRight>
+          <HeaderRightItem>
+            <XIcon/>
+          </HeaderRightItem>
+        </HeaderRight>
+      </Header>
+      <div className={`${styles.chatItineraryBlock} ${styles.itinerary} `}>
+        <Container>
+          <div className={styles.itineraryWrapper}>
+            <h2 className={styles.itineraryTitle}>{itinerary?.title}</h2>
+
+            <div className={styles.conversation}>
+              <p className={styles.assistantMessage}>{itinerary?.intro}</p>
+
+              <div className={styles.userMessage}>
+                <p>{userInput}</p>
+              </div>
+
+              <p className={styles.assistantMessage}>{itinerary?.recommendation}</p>
+            </div>
+
+            {itinerary?.itineraryHeader && (
+              <div className={styles.itinaryHeader}>
+                <h4>{itinerary.itineraryHeader.title}</h4>
+                <p>{itinerary.itineraryHeader.description}</p>
+              </div>
+            )}
+
+            {itinerary?.days.map((day, index) => (
+              <div key={index} className={styles.daySection}>
+                <div className={styles.dayHeader}>
+                  <h3>{day.title}</h3>
+                  {/*<div className={styles.navigationButtons}>*/}
+                  {/*  <button className={styles.navButtonLeft} aria-label="Previous">*/}
+                  {/*    <CaretLeft type={'light'}/>*/}
+                  {/*  </button>*/}
+                  {/*  <button className={styles.navButtonRight} aria-label="Next">*/}
+                  {/*    <CaretRight type={'light'}/>*/}
+                  {/*  </button>*/}
+                  {/*</div>*/}
+                </div>
+
+
+
+                <div className={styles.headerWithArrows}>
+                  <div className={styles.arrowHeaderContent}>
+                    <h4 className={styles.daySubtitle}>{day.subtitle}</h4>
+                    <p className={styles.dayDescription}>{day.description}</p>
+                  </div>
+                  <div className={styles.navigationButtons}>
+                    <button className={styles.navButtonLeft} aria-label="Previous">
+                      <CaretLeft type={'light'}/>
+                    </button>
+                    <button className={styles.navButtonRight} aria-label="Next">
+                      <CaretRight type={'light'}/>
+                    </button>
+                  </div>
+                </div>
+
+                <PathwayBlock
+                  cards={day.activities.map((activity) => ({
+                    date: activity.date || "",
+                    title: activity.title,
+                    description: activity.description,
+                    image: activity.image,
+                    link: activity.link,
+                    category: activity.category,
+                    variation: 'short',
+                  }))}
+                />
+              </div>
+            ))}
+
+            <div className={styles.downloadButton}>
+              <Button label={'DOWNLOAD ITINERARY'} size={'default'} level={'primary'} secondaryIcon={<ArrowRight/>} />
+            </div>
+
+            <hr/>
+
+            {/* Add padding at bottom to prevent content being hidden behind fixed footer */}
+            <div className={styles.bottomSpacer}></div>
+          </div>
+        </Container>
+      </div>
+
+      {/* Fixed footer section */}
+      <div className={styles.fixedFooter}>
+        <Container>
+          <div className={styles.footerContent}>
+            {itinerary?.tags && itinerary.tags.length > 0 && (
+              <div className={styles.tags}>
+                {itinerary.tags.map((tag, index) => (
+                  <Button key={index} label={tag} size={'default'} level={'primary'} style={'hollow'}/>
+                ))}
+              </div>
+            )}
+
+            {/*<div className={styles.chatInput}>*/}
+            {/*  <div className={styles.chatInputBox}>*/}
+            {/*    <input type="text"/>*/}
+            {/*    <button className={styles.attachButton}>*/}
+            {/*      <Paperclip/>*/}
+            {/*    </button>*/}
+
+            {/*    <button className={styles.sendButton}>*/}
+            {/*      <PaperPlaneTilt type={'fill'}/>*/}
+            {/*    </button>*/}
+            {/*  </div>*/}
+            {/*</div>*/}
+
+            <div className={styles.fixedInputBox}>
+                  <textarea
+                    value={userInput}
+                    onChange={(e) => setUserInput(e.target.value)}
+                    placeholder="I'd love to spend two nights in Selwyn, I love nature, dining out and relaxing."
+                    rows={3}
+                    disabled={isLoading}
+                  />
+              <div className={styles.inputActions}>
+                <button className={styles.attachButton} aria-label="Attach file" disabled={isLoading}>
+                  <Paperclip type={'light'}/>
+                </button>
+                <div className={styles.chatButton}>
+                    <div>
+                      <button className={styles.sendButton}>
+                        <PaperPlaneTilt type={'fill'}/>
+                      </button>
+                    </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </div>
+    </div>
+  );
+};
+
+export default ChatItineraryBlock;

package/src/Components/DataDisplay/ChatItenaryBlock/ChatItenaryBlockProps.tsx

@@ -0,0 +1,44 @@
+
+
+export interface Activity {
+  image: string;
+  title: string;
+  description: string;
+  link: {
+    title?: string | undefined;
+    href?: string | undefined;
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    rel?: string | undefined;
+  };
+  category: 'all' | 'adventure' | 'ski' | 'nature';
+  date?: string;
+}
+
+export interface Day {
+  title: string;
+  subtitle: string;
+  description: string;
+  activities: Activity[];
+}
+
+export interface Itinerary {
+  title: string;
+  intro: string;
+  recommendation: string;
+  days: Day[];
+  itineraryHeader?: {
+    title: string;
+    description: string;
+  };
+  tags?: string[];
+}
+
+interface ChatItineraryBlockProps {
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste' | 'main';
+  onPlanTrip?: (userInput: string) => Promise<Itinerary>;
+  initialItinerary?: Itinerary;
+}
+
+export default ChatItineraryBlockProps;
+
+