@4alldigital/foundation-ui--core 3.0.0

package/src/components/TextInput/TextInput.types.ts

@@ -0,0 +1,81 @@
+import { ChangeEvent } from "react";
+
+export enum InputType {
+  TEXT = 'text',
+  PASSWORD = 'password',
+  EMAIL = 'email',
+  NUMBER = 'number',
+  TEL = 'tel',
+  URL = 'url',
+  SEARCH = 'search',
+  DATE = 'date',
+  TIME = 'time',
+  DATETIME = 'datetime-local',
+  MONTH = 'month',
+  WEEK = 'week',
+  FILE = 'file',
+  TEXTAREA = 'textarea',
+  HIDDEN = 'hidden',
+}
+
+export interface Props {
+  /** Input type. */
+  type?: InputType;
+  /** Specify if input is required. */
+  required?: boolean;
+  /** Custom style attributes. */
+  className?: string;
+  /** OnChange function handler. */
+  onChange?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Input name attribute. */
+  name?: string;
+  /** Input icon value. */
+  icon?: string;
+  /** Input status. */
+  disabled?: boolean;
+  autoComplete?:
+    | 'off'
+    | 'honorific-prefix'
+    | 'given-name'
+    | 'additional-name'
+    | 'family-name'
+    | 'honorific-suffix'
+    | 'nickname'
+    | 'email'
+    | 'username'
+    | 'new-password'
+    | 'current-password'
+    | 'one-time-code'
+    | 'organization-title'
+    | 'organization'
+    | 'street-address'
+    | 'address-line1'
+    | 'address-line2'
+    | 'address-line3'
+    | 'address-level4'
+    | 'address-level3'
+    | 'address-level2'
+    | 'address-level1'
+    | 'country'
+    | 'country-name'
+    | 'postal-code'
+    | 'cc-name'
+    | 'cc-given-name'
+    | 'cc-additional-name'
+    | 'cc-family-name'
+    | 'cc-number'
+    | 'cc-exp'
+    | 'cc-exp-month'
+    | 'cc-exp-year'
+    | 'cc-csc'
+    | 'cc-type'
+    | 'transaction-currency'
+    | 'transaction-amount'
+    | 'language'
+    | 'bday'
+    | 'bday-day'
+    | 'bday-month'
+    | 'bday-year';
+}

package/src/components/TextInput/index.ts

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

package/src/components/Video/Video.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Video from '.';
+
+const meta: Meta<typeof Video> = {
+  title: 'UI/Video',
+  component: Video,
+};
+
+type Story = StoryObj<typeof Video>;
+
+export const Default: Story = {
+  args: {
+    url: 'https://youtube.com/live/-mkSeTVKvIQ',
+    //url: 'https://youtube.com/live/E7IlXwmN5Hw', //private
+    isYoutube: true,
+  },
+};
+
+export const M3U8: Story = {
+  args: {
+    // url: 'https://d227lq76md6ahr.cloudfront.net/6f931020-437f-4484-a966-82e40c6a4e8c/hls/livestream--upper-body-blast--05-05-2024.m3u8',
+    sources: [
+      {
+        src: 'https://dgyf3rr1f57sz.cloudfront.net/c2d0b92e-f35d-4e6f-b232-69389744bfd3/hls/livestream--garuda-brick--06-09-2023.m3u8',
+        type: 'application/x-mpegURL',
+      },
+    ],
+    options: {
+      poster: 'https://assets.nrgbarrebody.app/2021-05/202103%20NBP%20-%20NRG%20BarreBody-67-min.jpg',
+      autoplay: false,
+      muted: false,
+      onPause: () => console.log('paused'),
+      onPlay: () => console.log('play'),
+      onEnded: () => console.log('ended'),
+    },
+  },
+};
+
+export const MP4: Story = {
+  args: {
+    // url: 'https://d227lq76md6ahr.cloudfront.net/6f931020-437f-4484-a966-82e40c6a4e8c/hls/livestream--upper-body-blast--05-05-2024.m3u8',
+    sources: [
+      {
+        src: 'https://d227lq76md6ahr.cloudfront.net/348c47cd-b682-4c48-bdbd-e3a4ea3986d8/mp4/livestream--signature-express--12-08-2024_Mp4_Avc_Aac_16x9_1920x1080p_24Hz_6Mbps_qvbr.mp4',
+        type: 'video/mp4',
+      },
+    ],
+    options: {
+      poster: 'https://assets.nrgbarrebody.app/2021-05/202103%20NBP%20-%20NRG%20BarreBody-67-min.jpg',
+      autoplay: false,
+      muted: false,
+    },
+  },
+};
+
+export const BackgroundVideo: Story = {
+  args: {
+    sources: [
+      {
+        src: 'https://d227lq76md6ahr.cloudfront.net/6f931020-437f-4484-a966-82e40c6a4e8c/hls/livestream--upper-body-blast--05-05-2024.m3u8',
+        type: 'application/x-mpegURL',
+      },
+    ],
+    options: {
+      poster: 'https://assets.nrgbarrebody.app/2021-05/202103%20NBP%20-%20NRG%20BarreBody-67-min.jpg',
+      autoplay: true,
+      muted: true,
+      controls: false,
+      playsinline: true,
+      preferFullWindow: false,
+    },
+  },
+};
+
+export default meta;

package/src/components/Video/Video.tsx

@@ -0,0 +1,280 @@
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import cx from 'classnames';
+import ReactPlayer from 'react-player/youtube';
+import { isMobileOnly } from 'react-device-detect';
+import { Props } from './Video.types';
+import { twMerge } from 'tailwind-merge';
+import videojs from 'video.js';
+export interface VideoPlayerMethods {
+  play: () => void;
+  pause: () => void;
+  fullscreen: () => void;
+}
+
+const Video = forwardRef(function MyVideo(
+  {
+    url,
+    sources,
+    onReady,
+    onExitFullScreenCallback,
+    className,
+    options = {
+      playsinline: true,
+      preferFullWindow: true,
+    },
+    isYoutube = false,
+    defaultAudioTrack = 'No Music',
+    rounded = true,
+    aspectRatioValue,
+    // fullScreenOnly = false,
+    isModal = false,
+  }: Props,
+  ref: any,
+) {
+  const reactPlayerRef = useRef<ReactPlayer>(null);
+  const videoRef = useRef<any>(null);
+  const playerRef = useRef<any>(null);
+
+  const aspectRatioConfig = useMemo(() => {
+    switch (aspectRatioValue) {
+      case '4/3':
+        return {
+          aspectRatio: '4:3',
+          className: 'aspect-[4/3]',
+        };
+      case '1/1':
+        return {
+          aspectRatio: '1:1',
+          className: 'aspect-[1/1]',
+        };
+      case '3/4':
+        return {
+          aspectRatio: '3:4',
+          className: 'aspect-[3/4]',
+        };
+      case '9/16':
+        return {
+          aspectRatio: '9:16',
+          className: 'aspect-[9/16]',
+        };
+      case '16/7':
+        return {
+          aspectRatio: '16:7',
+          className: 'aspect-[16/7]',
+        };
+      case '16/5':
+        return {
+          aspectRatio: '16:5',
+          className: 'aspect-[16/5]',
+        };
+      default:
+        return {
+          aspectRatio: '16:9',
+          className: 'aspect-[16/9]',
+        };
+    }
+  }, [aspectRatioValue]);
+
+  useEffect(() => {
+    // Do not initialize Video.js player if it's a YouTube video
+    if (isYoutube) return;
+    const videoOptions = {
+      autoplay: true,
+      controls: true,
+      muted: false,
+      playsInline: true,
+      preferFullWindow: true,
+      responsive: true,
+      fill: true,
+      fluid: !isModal,
+      // aspectRatio: aspectRatioConfig.aspectRatio || '16:9',
+      controlBar: {
+        skipButtons: !isMobileOnly
+          ? {
+              forward: 30,
+              backward: 30,
+            }
+          : {},
+        volumePanel: {
+          inline: true,
+        },
+      },
+      html5: {
+        hls: {
+          enableLowInitialPlaylist: true, // Optional configuration for better HLS performance
+        },
+      },
+      ...options, // Override default options
+      sources: sources,
+    };
+
+    // Make sure Video.js player is only initialized once
+    if (!playerRef.current) {
+      // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
+      const videoElement = document.createElement('video-js');
+
+      // videoElement.classList.add('vjs-big-play-centered');
+      videoRef?.current?.appendChild(videoElement);
+
+      const player = (playerRef.current = videojs(videoElement, videoOptions, () => {
+        videojs.log('player is ready', player);
+        // player.playsinline(options.playsInline);
+        if (onReady) {
+          onReady(player);
+        }
+      }));
+
+      // if (fullScreenOnly) {
+      //   player.requestFullscreen();
+      //   player.play();
+      // }
+
+      // handle on play event.
+      if (videoOptions.onPlay && typeof videoOptions.onPlay === 'function') {
+        player.on('play', videoOptions.onPlay);
+      }
+
+      // handle on pause event.
+      if (videoOptions.onPause && typeof videoOptions.onPause === 'function') {
+        player.on('pause', videoOptions.onPause);
+      }
+
+      // handle on ended event.
+      if (videoOptions.onEnded && typeof videoOptions.onEnded === 'function') {
+        player.on('ended', videoOptions.onEnded);
+      }
+
+      //   // Modals are temporary by default. They dispose themselves when they are
+      //   // closed; so, we can create a new one each time the player is paused and
+      //   // not worry about leaving extra nodes hanging around.
+      //   var modal = player.createModal('This is a modal!');
+
+      //   // When the modal closes, resume playback.
+      //   modal.on('modalclose', function() {
+      //     player.play();
+      //   });
+      // });
+
+      // Wait for metadata to be loaded.
+      player.on('loadedmetadata', function () {
+        const audioTracksList = (player as any).audioTracks();
+        if (audioTracksList && audioTracksList.length) {
+          for (let i = 0; i < audioTracksList.length; i++) {
+            if (audioTracksList[i]?.label === defaultAudioTrack) {
+              audioTracksList[i].enabled = true;
+            }
+          }
+        }
+      });
+
+      player.on('fullscreenchange', function () {
+        // If player is in fullscreen mode, log state to console
+        if (player.isFullscreen()) {
+          console.log('Player is in fullscreen');
+        } else {
+          console.log('Player is not in fullscreen');
+          if (onExitFullScreenCallback && typeof onExitFullScreenCallback === 'function') {
+            onExitFullScreenCallback();
+          }
+        }
+      });
+
+      // You could update an existing player in the `else` block here
+      // on prop change, for example:
+    } else {
+      const player = playerRef.current;
+
+      player.autoplay(options.autoplay);
+      player.src(options.sources);
+    }
+  }, [options, videoRef]);
+
+  // Expose specific methods to parent
+  useImperativeHandle(ref, () => ({
+    play: () => {
+      if (playerRef.current) {
+        playerRef.current.play();
+      }
+    },
+    pause: () => {
+      if (playerRef.current) {
+        playerRef.current.pause();
+      }
+    },
+    fullscreen: () => {
+      if (playerRef.current) {
+        playerRef.current.requestFullscreen();
+      }
+    },
+  }));
+
+  // Dispose the Video.js player when the functional component unmounts
+  useEffect(() => {
+    // DO NOT dispose the player if it's a YouTube video
+    if (isYoutube) return;
+    const player = playerRef.current;
+
+    return () => {
+      if (player && !player.isDisposed()) {
+        player.dispose();
+        playerRef.current = null;
+      }
+    };
+  }, [playerRef]);
+
+  if (isYoutube && url) {
+    return (
+      <div data-testid="Video" className={cx('relative w-full h-full aspect-[16/9]', className)}>
+        <ReactPlayer
+          ref={reactPlayerRef}
+          className="react-player"
+          url={url}
+          width="100%"
+          height="100%"
+          controls
+          onReady={onReady}
+          config={{
+            // @ts-expect-error - TS doesn't know about the playerVars prop.
+            youtube: {
+              playerVars: {
+                // controls: 0,  // Hide all controls
+                modestbranding: 1, // Remove YouTube logo from control bar
+                disablekb: 1, // Disable keyboard controls
+              },
+            },
+          }}
+        />
+      </div>
+    );
+  }
+
+  if (isModal) {
+    return <div ref={videoRef} className="relative w-full h-full" />;
+  }
+
+  return (
+    <div
+      className={twMerge(
+        cx(
+          'relative w-full overflow-hidden h-full object-cover',
+          {
+            rouded: rounded,
+          },
+          aspectRatioConfig.className,
+          className,
+        ),
+      )}>
+      <div data-vjs-player>
+        <div
+          ref={videoRef}
+          className={cx('object-cover bg-black flex items-center justify-center', aspectRatioConfig.className)}
+        />
+      </div>
+    </div>
+  );
+});
+
+Video.displayName = 'Video';
+
+export default Video;
+export type { Props };

package/src/components/Video/Video.types.ts

@@ -0,0 +1,147 @@
+interface VideoJsPlayerOptions {
+  autoplay?: boolean;
+  controls?: boolean;
+  height?: number;
+  loop?: boolean;
+  muted?: boolean;
+  poster?: string;
+  preload?: 'auto' | 'metadata' | 'none';
+  sources?: { src: string; type?: string }[];
+  width?: number;
+  aspectRatio?: string;
+  controlBar?: {
+    remainingTimeDisplay?: {
+      displayNegative: boolean;
+    };
+    skipButtons?: {
+      forward: number;
+      backward: number;
+    };
+    volumePanel?: {
+      inline: boolean;
+    };
+  };
+  html5?: {
+    hls?: {
+      enableLowInitialPlaylist: boolean;
+    };
+  };
+  playbackRates?: number[];
+  plugins?: any[];
+  responsive?: boolean;
+  fill?: boolean;
+  fluid?: boolean;
+  preferFullWindow?: boolean;
+  audioOnlyMode?: boolean;
+  audioPosterMode?: boolean;
+  enableSmoothSeeking?: boolean;
+  experimentalSvgIcons?: boolean;
+  fullscreen?: {
+    options: {
+      navigationUI: 'hide' | 'show';
+    };
+  };
+  liveui?: boolean;
+  liveTracker?: {
+    trackingThreshold: number;
+    liveTolerance: number;
+  };
+  nativeControlsForTouch?: boolean;
+  normalizeAutoplay?: boolean;
+  notSupportedMessage?: string;
+  noUITitleAttributes?: boolean;
+  playsinline?: boolean;
+  techCanOverridePoster?: boolean;
+  techOrder?: string[];
+  userActions?: {
+    click?: boolean;
+    doubleClick?: boolean;
+    hotkeys?: {
+      fullscreenKey: string;
+      muteKey: string;
+      playPauseKey: string;
+    };
+  };
+  language?: string;
+  languages?: {
+    [key: string]: {
+      Play: string;
+      Pause: string;
+      Mute: string;
+      Unmute: string;
+      Fullscreen: string;
+      PictureInPicture: string;
+      RemainingTime: string;
+      TimeDivider: string;
+      Time: string;
+      Live: string;
+      Volume: string;
+      Aired: string;
+      PlaybackRate: string;
+      Subtitles: string;
+      AudioTracks: string;
+      Settings: string;
+      Quality: string;
+      Speed: string;
+      Normal: string;
+      QualityBadge: string;
+      Rewind: string;
+      Forward: string;
+      FullscreenOff: string;
+      PictureInPictureOn: string;
+      PictureInPictureOff: string;
+      VolumePanel: string;
+      AudioTrack: string;
+      YouAreWatchingLive: string;
+      YouAreWatchingLiveEvent: string;
+      YouAreWatchingLiveStream: string;
+      LiveEvent: string;
+      LiveStream: string;
+    };
+  };
+  inactivityTimeout?: number;
+  breakpoints?: {
+    [key: string]: {
+      width: number;
+      height: number;
+    };
+  };
+  controlBarBreakpoints?: {
+    [key: string]: {
+      width: number;
+      height: number;
+    };
+  };
+  playbackRate?: number;
+  // Event Handlers
+  onReady?: (player: any) => void; // Player ready event handler
+  onPlay?: (event: Event) => void; // Play event handler
+  onPause?: (event: Event) => void; // Pause event handler
+  onEnded?: (event: Event) => void; // Ended event handler
+  onError?: (event: Event) => void; // Error event handler
+  onTimeUpdate?: (event: Event) => void; // Time update event handler
+  onVolumeChange?: (event: Event) => void; // Volume change event handler
+  onFullscreenChange?: (event: Event) => void; // Fullscreen change event handler
+
+  // Custom Components
+  // [key: string]: any; // Allow additional properties for custom components
+}
+
+export interface Props {
+  url?: string;
+  autoPlay?: boolean;
+  muted?: boolean;
+  preload?: 'auto' | 'metadata' | 'none';
+  title?: string;
+  sources?: { src: string; type?: string }[];
+  className?: string;
+  options?: VideoJsPlayerOptions;
+  isYoutube?: boolean;
+  onReady?: (player: any) => void;
+  onExitFullScreenCallback?: () => void;
+  defaultAudioTrack?: string;
+  rounded?: boolean;
+  aspectRatioValue?: '16/9' | '4/3' | '1/1' | '3/4' | '9/16' | '16/7' | '16/5';
+  fullScreenOnly?: boolean;
+  isModal?: boolean;
+}

package/src/components/Video/index.ts

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

package/src/components/VisitUs/VisitUs.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import VisitUs from '.';
+
+const meta: Meta<typeof VisitUs> = {
+  title: 'MOLECULES/VisitUs',
+  component: VisitUs,
+};
+
+type Story = StoryObj<typeof VisitUs>;
+
+export const Default: Story = {
+  args: {
+    facebook: {
+      title: 'Facebook',
+      url: 'https://www.facebook.com',
+    },
+    twitter: {
+      title: 'Twitter',
+      url: 'https://www.twitter.com',
+    },
+    instagram: {
+      title: 'Instagram',
+      url: 'https://www.instagram.com',
+    },
+    linkedin: {
+      title: 'LinkedIn',
+      url: 'https://www.linkedin.com',
+    },
+  },
+};
+
+export default meta;

package/src/components/VisitUs/VisitUs.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Props } from './VisitUs.types';
+import Button from '../Button';
+import { BTN_SIZES, BTN_VARIANTS } from '../Button/Button.types';
+
+const VisitUs = ({ testID, facebook, twitter, instagram, linkedin, youtube }: Props) => {
+  return (
+    <div data-testid={testID || '"VisitUs"'} className="flex gap-2">
+      {facebook && (
+        <Button
+          variant={BTN_VARIANTS.PRIMARY}
+          size={BTN_SIZES.MEDIUM}
+          icon="mdi:facebook"
+          onClick={() => window.open(facebook.url)}
+        />
+      )}
+      {twitter && (
+        <Button
+          variant={BTN_VARIANTS.PRIMARY}
+          size={BTN_SIZES.MEDIUM}
+          icon="mdi:twitter"
+          onClick={() => window.open(twitter.url)}
+        />
+      )}
+      {instagram && (
+        <Button
+          variant={BTN_VARIANTS.PRIMARY}
+          size={BTN_SIZES.MEDIUM}
+          icon="mdi:instagram"
+          onClick={() => window.open(instagram.url)}
+        />
+      )}
+      {linkedin && (
+        <Button
+          variant={BTN_VARIANTS.PRIMARY}
+          size={BTN_SIZES.MEDIUM}
+          icon="mdi:linkedin"
+          onClick={() => window.open(linkedin.url)}
+        />
+      )}
+      {youtube && (
+        <Button
+          variant={BTN_VARIANTS.PRIMARY}
+          size={BTN_SIZES.MEDIUM}
+          icon="mdi:youtube"
+          onClick={() => window.open(youtube.url)}
+        />
+      )}
+    </div>
+  );
+};
+
+VisitUs.displayName = 'VisitUs';
+
+export default VisitUs;
+export type { Props };

package/src/components/VisitUs/VisitUs.types.ts

@@ -0,0 +1,13 @@
+export interface ShareProps {
+  title: string;
+  url: string;
+}
+
+export interface Props {
+  testID?: string;
+  facebook?: ShareProps;
+  twitter?: ShareProps;
+  instagram?: ShareProps;
+  linkedin?: ShareProps;
+  youtube?: ShareProps;
+}

package/src/components/VisitUs/index.ts

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