@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

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

@@ -0,0 +1,36 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Media from "./Media";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+  title: "DataDisplay / Media",
+  component: Media,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const MediaTemplate: Story = {
+  render: () => {
+
+    const mediaProps = {
+      thumbnail: "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=1200&h=675&fit=crop",
+      videoSrc: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+    };
+
+    return <Media pillar={'visit'}  {...mediaProps} />
+  }
+}
+
+
+export const MediaComponent = {
+  ...MediaTemplate
+};
+

package/src/Components/DataDisplay/Media/Media.tsx

@@ -0,0 +1,158 @@
+import MediaProps from "./MediaProps.tsx";
+import { useEffect, useRef } from "react";
+import videojs from "video.js";
+import "video.js/dist/video-js.css";
+import styles from "./media.module.scss";
+import  './mediaVideo.scss'
+
+const Media = ({ imageSrc, videoSrc, thumbnail, pillar }: MediaProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const playerRef = useRef<any>(null);
+
+  useEffect(() => {
+
+    if (imageSrc) {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = null;
+      }
+      return;
+    }
+
+    if (!playerRef.current && videoRef.current) {
+      playerRef.current = videojs(videoRef.current, {
+        controls: true,
+        responsive: true,
+        fluid: true,
+        preload: "metadata",
+        playbackRates: false,
+        poster: thumbnail,
+        controlBar: {
+          volumePanel: false,
+          playToggle: true,
+          currentTimeDisplay: true,
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          progressControl: true,
+          fullscreenToggle: true,
+          playbackRateMenuButton: true,
+        },
+      });
+
+      playerRef.current.ready(() => {
+        const bigPlayButton = playerRef.current.el().querySelector('.vjs-big-play-button');
+        const controlPlayBtn = playerRef.current.el().querySelector('.vjs-play-control .vjs-icon-placeholder')
+        const playProgress = playerRef.current.el().querySelector('.vjs-play-progress');
+
+        if (bigPlayButton) {
+          bigPlayButton.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"> <path d="M13.5 7.47751V40.5225C13.5049 40.7862 13.5792 41.0439 13.7155 41.2698C13.8518 41.4956 14.0452 41.6814 14.2762 41.8086C14.5073 41.9358 14.7678 41.9999 15.0314 41.9943C15.2951 41.9887 15.5527 41.9137 15.7781 41.7769L42.7931 25.2544C43.0089 25.1238 43.1874 24.9397 43.3112 24.72C43.4351 24.5002 43.5001 24.2523 43.5001 24C43.5001 23.7478 43.4351 23.4998 43.3112 23.2801C43.1874 23.0603 43.0089 22.8762 42.7931 22.7456L15.7781 6.22314C15.5527 6.08628 15.2951 6.01128 15.0314 6.00571C14.7678 6.00013 14.5073 6.06418 14.2762 6.19139C14.0452 6.3186 13.8518 6.50448 13.7155 6.73028C13.5792 6.95608 13.5049 7.21382 13.5 7.47751Z" fill="currentColor"/> </svg>
+        `;
+        }
+
+        if(controlPlayBtn){
+          controlPlayBtn.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="26" height="32" viewBox="0 0 26 32" fill="none">
+            <path d="M0 1.30896V30.691C0.00414171 30.9255 0.0670014 31.1547 0.18224 31.3554C0.297479 31.5562 0.461023 31.7215 0.656383 31.8346C0.851742 31.9477 1.07201 32.0047 1.29498 31.9997C1.51794 31.9947 1.73573 31.9281 1.92637 31.8064L24.7701 17.1153C24.9525 16.9992 25.1034 16.8355 25.2081 16.6401C25.3129 16.4448 25.3679 16.2243 25.3679 16C25.3679 15.7757 25.3129 15.5552 25.2081 15.3599C25.1034 15.1645 24.9525 15.0008 24.7701 14.8847L1.92637 0.193629C1.73573 0.0719391 1.51794 0.00525422 1.29498 0.000297978C1.07201 -0.00465826 0.851742 0.0522898 0.656383 0.1654C0.461023 0.278509 0.297479 0.443782 0.18224 0.644553C0.0670014 0.845324 0.00414171 1.0745 0 1.30896Z" fill="currentColor"/>
+          </svg>
+          `;
+        }
+
+        if (playProgress) {
+          const span = document.createElement('span');
+          span.className = 'vjs-progress-indicator';
+
+          span.innerHTML = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="31" height="32" viewBox="0 0 31 32" fill="none">
+              <g filter="url(#filter0_d_4327_15382)">
+              <ellipse cx="15.0148" cy="14" rx="11.0148" ry="12" fill="currentColor"/>
+              </g>
+              <defs>
+              <filter id="filter0_d_4327_15382" x="0" y="0" width="30.0298" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+              <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_4327_15382"/>
+              <feOffset dy="2"/>
+              <feGaussianBlur stdDeviation="1"/>
+              <feComposite in2="hardAlpha" operator="out"/>
+              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4327_15382"/>
+              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4327_15382" result="shape"/>
+              </filter>
+              </defs>
+            </svg>
+          `;
+
+          playProgress.appendChild(span);
+        }
+
+        playerRef.current.on("play", () => {
+          if (bigPlayButton) bigPlayButton.style.display = "none";
+
+          if(controlPlayBtn){
+            controlPlayBtn.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+            <path d="M27 6V26C27 26.5304 26.7893 27.0391 26.4142 27.4142C26.0391 27.7893 25.5304 28 25 28H20C19.4696 28 18.9609 27.7893 18.5858 27.4142C18.2107 27.0391 18 26.5304 18 26V6C18 5.46957 18.2107 4.96086 18.5858 4.58579C18.9609 4.21071 19.4696 4 20 4H25C25.5304 4 26.0391 4.21071 26.4142 4.58579C26.7893 4.96086 27 5.46957 27 6ZM12 4H7C6.46957 4 5.96086 4.21071 5.58579 4.58579C5.21071 4.96086 5 5.46957 5 6V26C5 26.5304 5.21071 27.0391 5.58579 27.4142C5.96086 27.7893 6.46957 28 7 28H12C12.5304 28 13.0391 27.7893 13.4142 27.4142C13.7893 27.0391 14 26.5304 14 26V6C14 5.46957 13.7893 4.96086 13.4142 4.58579C13.0391 4.21071 12.5304 4 12 4Z" fill="currentColor"/>
+          </svg>
+          `;
+          }
+
+        });
+
+        playerRef.current.on("pause", () => {
+          if (bigPlayButton) bigPlayButton.style.display = "flex";
+
+          if(controlPlayBtn){
+            controlPlayBtn.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="26" height="32" viewBox="0 0 26 32" fill="none">
+            <path d="M0 1.30896V30.691C0.00414171 30.9255 0.0670014 31.1547 0.18224 31.3554C0.297479 31.5562 0.461023 31.7215 0.656383 31.8346C0.851742 31.9477 1.07201 32.0047 1.29498 31.9997C1.51794 31.9947 1.73573 31.9281 1.92637 31.8064L24.7701 17.1153C24.9525 16.9992 25.1034 16.8355 25.2081 16.6401C25.3129 16.4448 25.3679 16.2243 25.3679 16C25.3679 15.7757 25.3129 15.5552 25.2081 15.3599C25.1034 15.1645 24.9525 15.0008 24.7701 14.8847L1.92637 0.193629C1.73573 0.0719391 1.51794 0.00525422 1.29498 0.000297978C1.07201 -0.00465826 0.851742 0.0522898 0.656383 0.1654C0.461023 0.278509 0.297479 0.443782 0.18224 0.644553C0.0670014 0.845324 0.00414171 1.0745 0 1.30896Z" fill="currentColor"/>
+          </svg>
+          `;
+          }
+
+        });
+
+        playerRef.current.on("ended", () => {
+          if (bigPlayButton) bigPlayButton.style.display = "flex";
+
+        });
+      });
+
+    }
+
+
+    if (playerRef.current && videoSrc) {
+      playerRef.current.src({ src: videoSrc, type: "video/mp4" });
+    }
+
+    return () => {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = null;
+      }
+    };
+  }, [imageSrc, videoSrc, thumbnail]);
+
+  return <div className={`${pillar}`}>
+    {imageSrc ? (
+      <div className={styles.media}>
+        <div className={`${styles.imgWrapper}`}>
+          <img src={imageSrc} alt="" className="media-image" />
+        </div>
+      </div>
+    ) : (
+      <div className="video-container">
+        <div data-vjs-player>
+          <video
+            ref={videoRef}
+            className="video-js vjs-big-play-centered"
+            playsInline
+          />
+        </div>
+      </div>
+    )}
+  </div>
+};
+
+export default Media;

package/src/Components/DataDisplay/Media/MediaProps.tsx

@@ -0,0 +1,8 @@
+interface MediaProps {
+  imageSrc?: string
+  videoSrc?: string
+  thumbnail?:string
+  pillar?: 'live' | 'visit' | 'taste' | 'business' | 'participate'
+}
+
+export default MediaProps

package/src/Components/DataDisplay/Media/media.module.scss

@@ -0,0 +1,16 @@
+.media {
+  .imgWrapper {
+    position: relative;
+    width: 100%;
+    padding-top: 45.25%;
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}

package/src/Components/DataDisplay/Media/mediaVideo.scss

@@ -0,0 +1,88 @@
+
+
+.video-container{
+  .vjs-big-play-button{
+    background: var(--color-block-bg) !important;
+    color: var(--color-block-text);
+    height: 114px;
+    width: 114px;
+    border-radius: 100%;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .vjs_video_4320-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
+    padding-top: 56.25%;
+  }
+
+  .vjs-control-bar{
+    bottom: 44px;
+    background: transparent;
+    padding: 0 48px;
+  }
+
+  .vjs-play-control .vjs-icon-placeholder{
+
+    color: var(--color-block-text);
+
+    &:before{
+      content: unset !important;
+    }
+
+  }
+
+  .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{
+    opacity: 1 !important;
+    pointer-events: auto;
+  }
+
+  .video-js .vjs-progress-holder{
+    height: 17px;
+    border-radius: 16px;
+  }
+
+  .video-js .vjs-slider{
+    background: var(--color-block-bg) !important;
+  }
+
+  .video-js .vjs-play-progress {
+    background-color: var(--color-block-text);
+    height: 9px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
+    left: 4px;
+
+    .vjs-progress-indicator{
+      color: var(--color-block-text);
+      display: flex;
+      position: absolute;
+      right: -14px;
+      top: 6px;
+      transform: translateY(-50%);
+    }
+
+    &:before{
+      content: unset;
+    }
+
+  }
+
+
+  .video-js .vjs-load-progress{
+    height: 9px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
+    left: 4px;
+  }
+
+  .vjs_video_1857-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
+    padding-top: 56.25%;
+  }
+
+}

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

@@ -0,0 +1,89 @@
+import React, { useContext } from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+
+import Modal from "./Modal.tsx";
+import ModalHeader from "./ModalHeader.tsx";
+import ModalBody from "./ModalBody.tsx";
+import ModalActions from "./ModalActions.tsx";
+import ModalActionsLeft from "./ModalActionsLeft.tsx";
+import ModalActionsRight from "./ModalActionsRight.tsx";
+import FormFieldHolder from "../../Form/FormFieldHolder/FormFieldHolder.tsx";
+import TextField from "../../Form/TextField/TextField.tsx";
+import Button from "../../Form/Button/Button.tsx";
+import {SelwynUIContext, SelwynUIProvider} from "../../SelwynUIProvider";
+
+const meta: Meta = {
+  title: "Data Display/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ModalStoryContent = () => {
+  const context = useContext(SelwynUIContext);
+
+  const innerModal = (
+    <Modal>
+      <ModalHeader title="Inner Modal" canClose={true} canGoBack={false} />
+      <ModalBody>
+        <FormFieldHolder label="Inner Input">
+          <TextField />
+        </FormFieldHolder>
+      </ModalBody>
+      <ModalActions>
+        <ModalActionsRight>
+          <Button label="Close" size="large"
+            extraClass="btn-white-border" onClick={context.closeModal} />
+        </ModalActionsRight>
+      </ModalActions>
+    </Modal>
+  );
+
+  const outerModal = (
+    <Modal>
+      <ModalHeader title="Outer Modal" canClose={true} canGoBack={false} />
+      <ModalBody>
+        <FormFieldHolder label="Outer Input">
+          <TextField />
+        </FormFieldHolder>
+      </ModalBody>
+      <ModalActions>
+        <ModalActionsLeft></ModalActionsLeft>
+        <ModalActionsRight>
+          <div>
+            <Button label="Close" size="large"
+            extraClass="btn-white-border" onClick={context.closeModal} />
+          </div>
+          <div>
+            <Button label="Open Inner Modal" size="large" onClick={() => context.openModal(innerModal)} />
+          </div>
+          
+        </ModalActionsRight>
+      </ModalActions>
+    </Modal>
+  );
+
+  return (
+    <Button
+      label="Open Modal"
+      onClick={() => {
+        context.openModal(outerModal);
+      }}
+    />
+  );
+};
+
+const ModalTemplate: Story = {
+  render: () => (
+    <SelwynUIProvider>
+      <ModalStoryContent />
+    </SelwynUIProvider>
+  ),
+};
+
+export const Example = {
+  ...ModalTemplate,
+};

package/src/Components/DataDisplay/Modal/Modal.tsx

@@ -0,0 +1,16 @@
+import ModalProps from "./ModalProps";
+import styles from "./modal.module.scss";
+
+const Modal = (props: ModalProps) => {
+  const { children, extraClass, pillar = 'taste'  } = props;
+
+  return (
+    <div className={`${styles.holder} ${pillar} ${extraClass} modalHolder`}>
+      <div className={`${styles.modal} modal`}>
+        <div className={`${styles.wrapper} modalWrapper`}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

package/src/Components/DataDisplay/Modal/ModalActions.tsx

@@ -0,0 +1,14 @@
+import ModalActionsProps from "./ModalActionsProps.tsx";
+import styles from "./modal.module.scss"
+
+const ModalActions = (props: ModalActionsProps) => {
+
+  const {children, extraClass =''} =props
+
+  return<div className={`${styles.modalAction} modalAction ${extraClass}`}>
+    {children}
+  </div>
+
+}
+
+export default ModalActions;

package/src/Components/DataDisplay/Modal/ModalActionsLeft.tsx

@@ -0,0 +1,13 @@
+import ModalActionsLeftProps from "./ModalActionsLeftProps.tsx";
+import styles from './modal.module.scss'
+const ModalActionsLeft = (props: ModalActionsLeftProps) => {
+
+  const {children, extraClass ='' } =props
+
+  return <div className={`${styles.modalActionLeft} modalActionLeft ${extraClass}`}>
+    {children}
+  </div>
+
+}
+
+export default ModalActionsLeft;

package/src/Components/DataDisplay/Modal/ModalActionsLeftProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface ModalActionsLeftProps {
+  children?: ReactNode;
+  extraClass?:string;
+}
+
+export default ModalActionsLeftProps;

package/src/Components/DataDisplay/Modal/ModalActionsProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface ModalActionsProps {
+  children?: ReactNode;
+  extraClass?:string;
+}
+
+export default ModalActionsProps ;

package/src/Components/DataDisplay/Modal/ModalActionsRight.tsx

@@ -0,0 +1,14 @@
+import ModalActionsRightProps from "./ModalActionsRightProps.tsx";
+import styles from "./modal.module.scss"
+
+const ModalActionsRight = (props:ModalActionsRightProps) => {
+
+  const {children, extraClass ='' } =props
+
+  return<div className={`${styles.modalActionRight} modalActionRight ${extraClass}`}>
+    {children}
+  </div>
+
+}
+
+export default ModalActionsRight;

package/src/Components/DataDisplay/Modal/ModalActionsRightProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface ModalActionsRightProps {
+  children?: ReactNode;
+  extraClass?:string;
+}
+
+export default ModalActionsRightProps;

package/src/Components/DataDisplay/Modal/ModalBody.tsx

@@ -0,0 +1,14 @@
+import ModalBodyProps from "./ModalBodyProps";
+import styles from "./modal.module.scss";
+
+const ModalBody = (props: ModalBodyProps) => {
+  const { children,extraClass =''} = props;
+
+  return (
+    <div className={`${styles.modalBody} ${extraClass} modalBody`}>
+      <div className={`${styles.modalBodyWrapper} modalBodyWrapper`}>{children}</div>
+    </div>
+  );
+};
+
+export default ModalBody;

package/src/Components/DataDisplay/Modal/ModalBodyProps.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+
+interface ModalBodyProps {
+  children?: ReactNode;
+  extraClass?:string;
+}
+
+export default ModalBodyProps;

package/src/Components/DataDisplay/Modal/ModalCurtain.tsx

@@ -0,0 +1,6 @@
+import styles from './modal.module.scss'
+const ModalCurtain = () => {
+  return <div className={styles.curtain} />
+}
+
+export default ModalCurtain;

package/src/Components/DataDisplay/Modal/ModalHeader.tsx

@@ -0,0 +1,55 @@
+import CaretLeft from "../../Icons/Arrows/CaretLeft/CaretLeft";
+import XIcon from "../../Icons/MathsAndFinance/XIcon/XIcon";
+import ModalHeaderProps from "./ModalHeaderProps";
+import styles from "./modal.module.scss";
+
+import {useContext} from "react";
+import SelwynUIContext from "../../SelwynUIProvider/SelwynUIContext.tsx";
+
+const ModalHeader = (props: ModalHeaderProps) => {
+  const {closeOnclick, canGoBackOnclick ,canGoBack, canClose, title, extraClass ='',} = props;
+
+  const context = useContext(SelwynUIContext);
+
+  const closeOnclickHandler = (e:any) => {
+    if (canClose) {
+      if (closeOnclick) {
+        closeOnclick(e);
+      }
+      context.closeModal();
+    }
+  };
+
+  const goBackOnclickHandler = (e:any) => {
+    if (canGoBack) {
+      if (canGoBackOnclick) {
+        canGoBackOnclick(e);
+      }
+    }
+  };
+
+  return (
+    <div className={`${styles.modalHeader} ${extraClass}`}>
+      <div className={styles.modalHeaderWrapper}>
+        {!!canGoBack && (
+          <div onClick={goBackOnclickHandler} className={`${styles.caretLeft} ${styles.icon}`}>
+            <CaretLeft type="bold"/>
+          </div>
+        )}
+        <div className={`${styles.heading} modalHeading`}>
+          {!!title && (
+            <h4>{title}</h4>
+          )}
+        </div>
+        {!!canClose && (
+          <span className={`${styles.close} ${styles.icon}`}
+                onClick={closeOnclickHandler}>
+            <XIcon type="bold"/>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ModalHeader;

package/src/Components/DataDisplay/Modal/ModalHeaderProps.tsx

@@ -0,0 +1,10 @@
+interface ModalHeaderProps {
+  title?: string;
+  extraClass?: string;
+  canClose?: boolean;
+  canGoBack?: boolean;
+  closeOnclick?: (e:any) => void;
+  canGoBackOnclick?: (e:any) => void;
+}
+
+export default ModalHeaderProps;

package/src/Components/DataDisplay/Modal/ModalProps.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface ModalProps {
+  children?: ReactNode;
+  extraClass?: string;
+  pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate'
+}
+
+export default ModalProps;