@ilo-org/react 0.13.0 → 0.14.1

package/src/components/Video/Video.tsx

@@ -1,34 +0,0 @@
-import { forwardRef } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { VideoProps } from "./Video.props";
-import VideoPlayer from "./VideoPlayer";
-import { VideoPlayerRef } from "./VideoPlayer.props";
-
-const Video = forwardRef<VideoPlayerRef, VideoProps>(
-  ({ className, caption, ...video }, ref) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--video`;
-
-    const videoClasses = classNames(className, {
-      [baseClass]: true,
-    });
-
-    const captionClasses = classNames("", {
-      [`${baseClass}--caption`]: true,
-    });
-
-    return (
-      <figure className={videoClasses}>
-        <div className={`${videoClasses}--wrapper`}>
-          {video && <VideoPlayer {...video} ref={ref} />}
-        </div>
-        {caption && (
-          <figcaption className={captionClasses}>{caption}</figcaption>
-        )}
-      </figure>
-    );
-  }
-);
-
-export default Video;

package/src/components/Video/VideoPlayer.props.ts

@@ -1,51 +0,0 @@
-import { Poster } from "./Video.props";
-import videojs from "video.js";
-
-export interface VideoPlayerRef {
-  player: videojs.Player | undefined;
-}
-export interface VideoPlayerControls {
-  /**
-   * Specify the label for the fullscreen button
-   */
-  fullscreen: string;
-
-  /**
-   * Specify the label for the  play button
-   */
-  play: string;
-
-  /**
-   * Specify the label for the pause button
-   */
-  pause: string;
-
-  /**
-   * Specify the label for the volume button
-   */
-  volume: string;
-}
-
-export interface VideoPlayerProps {
-  src: string;
-
-  /**
-   * Specify an optional className to be added to your Media.
-   */
-  className?: string;
-
-  /**
-   * Specify the strings to be used as labels for the video controls
-   */
-  controls?: VideoPlayerControls;
-
-  /**
-   *  poster image for video
-   */
-  poster?: Poster;
-
-  /**
-   * if YouTube, set to true
-   */
-  youtube?: boolean;
-}

package/src/components/Video/VideoPlayer.tsx

@@ -1,71 +0,0 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import "videojs-youtube";
-import { VideoPlayerProps, VideoPlayerRef } from "./VideoPlayer.props";
-import videojs, { ILOVideo } from "video.js";
-
-const video = videojs as unknown as ILOVideo;
-
-const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(
-  ({ src, poster, youtube }, ref) => {
-    const videoNode = useRef<HTMLVideoElement>(null);
-    const player = useRef<videojs.Player>();
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        get player() {
-          return player.current;
-        },
-      }),
-      [player]
-    );
-
-    useEffect(() => {
-      if (videoNode.current) {
-        player.current = video(videoNode.current, {
-          autoplay: false,
-          controls: true,
-          preload: "auto",
-          bigPlayButton: false,
-          poster: poster?.src,
-          controlBar: {
-            descriptionsButton: false,
-            playbackRateMenuButton: false,
-            chaptersButton: false,
-            audioTrackButton: false,
-            pictureInPictureToggle: false,
-            subsCapsButton: false,
-            seekToLive: false,
-            liveDisplay: false,
-          },
-          errorDisplay: false,
-          textTrackSettings: false,
-          resizeManager: false,
-          /**
-           * If youtube is true, it will default to the youtube video
-           */
-          sources: [
-            { type: youtube ? "video/youtube" : undefined, src: src as string },
-          ],
-          dataSetup: {
-            techOrder: ["youtube"],
-          },
-          liveTracker: false,
-        });
-      }
-      return () => {
-        if (player.current) {
-          player.current.dispose();
-        }
-      };
-    }, [poster?.src, src, youtube]);
-
-    return (
-      <div className="ilo--videoplayer">
-        <video ref={videoNode} className="ilo--video--element" />
-      </div>
-    );
-  }
-);
-
-export default VideoPlayer;

package/src/components/Video/index.ts

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

package/src/components/index.ts

@@ -1,46 +0,0 @@
-export {
-  Accordion,
-  AccordionButton,
-  AccordionItem,
-  AccordionPanel,
-} from "./Accordion";
-export { Form } from "./Form";
-export { Collapse } from "./Collapse";
-export { Empty } from "./Empty";
-export { Image } from "./Image";
-export { Loading } from "./Loading";
-export { Radio } from "./Radio";
-export { Tag } from "./Tag";
-export { Button } from "./Button";
-export { ContextMenu } from "./ContextMenu";
-export { Fieldset } from "./Fieldset";
-export { GlobalProvider } from "./GlobalProvider";
-export { Notification } from "./Notification";
-export { ReadMore } from "./ReadMore";
-export { Textarea } from "./Textarea";
-export { Callout } from "./Callout";
-export { Credit } from "./Credit";
-export { FileUpload } from "./FileUpload";
-export { Heading } from "./Heading";
-export { Link } from "./Link";
-export { NumberPicker } from "./NumberPicker";
-export { RichText } from "./RichText";
-export { Tooltip } from "./Tooltip";
-export { Checkbox } from "./Checkbox";
-export { DatePicker } from "./DatePicker";
-export { Hero } from "./Hero";
-export { LinkList } from "./LinkList";
-export { Pagination } from "./Pagination";
-export { SearchField } from "./SearchField";
-export { Video } from "./Video";
-export { Dropdown } from "./Dropdown";
-export { Icon } from "./Icon";
-export { List } from "./List";
-export { Profile } from "./Profile";
-export { TableOfContents } from "./TableOfContents";
-export { Footer } from "./Footer";
-export { LocalNav } from "./LocalNav";
-export { Navigation } from "./Navigation";
-export { CardGroup } from "./Cards/CardGroup";
-export { Breadcrumb } from "./Breadcrumb";
-export { Tabs } from "./Tabs";

package/src/declarations.d.ts

@@ -1,36 +0,0 @@
-import videojs from "video.js";
-
-declare module "*.svg" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.png" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.jpg" {
-  const content: string;
-  export default content;
-}
-
-declare module "video.js" {
-  interface VideoJsPlayerOptionsAugmentation extends videojs.PlayerOptions {
-    liveTracker: boolean;
-    textTrackSettings: boolean;
-    errorDisplay: boolean;
-    resizeManager: boolean;
-    dataSetup: {
-      techOrder: string[];
-    };
-  }
-
-  type ILOVideo = (
-    id: string | HTMLVideoElement,
-    options: VideoJsPlayerOptionsAugmentation,
-    ready?: () => void
-  ) => videojs.Player;
-}
-
-declare module "videojs-youtube" {}

package/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export { default as useGlobalSettings } from "./useGlobalSettings";
-export { default as useVideoPlayer } from "./useVideoPlayer";

package/src/hooks/useGlobalSettings.ts

@@ -1,13 +0,0 @@
-import { useContext } from "react";
-import { GlobalProviderContext } from "../components/GlobalProvider";
-
-const useGlobalSettings = () => {
-  const { prefix, ...rest } = useContext(GlobalProviderContext);
-
-  return {
-    prefix,
-    ...rest,
-  };
-};
-
-export default useGlobalSettings;

package/src/hooks/usePrevious.ts

@@ -1,15 +0,0 @@
-import { useEffect, useRef } from "react";
-
-// This code was shamelessly borrowed from the blog post
-// "How to access previous props or state with React Hooks" by
-// Ohans Emmanuel, published on LogRocket May 11, 2023
-// https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
-
-export function usePrevious<T>(value: T) {
-  const ref = useRef<T>();
-  useEffect(() => {
-    ref.current = value; //assign the value of ref to the argument
-  }, [value]); //this code will run when the value of 'value' changes
-  return ref.current; //in the end, return the current ref value.
-}
-export default usePrevious;

package/src/hooks/useVideoPlayer.ts

@@ -1,85 +0,0 @@
-import { useState, useEffect } from "react";
-
-const useVideoPlayer = (videoElement: any) => {
-  const [fullscreen, setFullscreen] = useState(false);
-  const [playing, setPlaying] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [showvolume, showVolume] = useState(false);
-
-  /**
-   * Fullscreen functionality
-   */
-  const toggleFullscreen = () => {
-    setFullscreen(!fullscreen);
-  };
-
-  useEffect(() => {
-    if (fullscreen) {
-      if (videoElement.requestFullscreen) {
-        videoElement.requestFullscreen();
-      }
-    } else {
-      document.exitFullscreen();
-    }
-  }, [fullscreen, videoElement]);
-
-  /**
-   * Play/pause functionality
-   */
-  const togglePlay = () => {
-    setPlaying(!playing);
-  };
-
-  useEffect(() => {
-    playing ? videoElement.current.play() : videoElement.current.pause();
-  }, [playing, videoElement]);
-
-  /**
-   * Progress indicator
-   */
-  const handleOnTimeUpdate = () => {
-    setProgress(
-      (videoElement.current.currentTime / videoElement.current.duration) * 100
-    );
-  };
-
-  /**
-   * Scrub functionality
-   */
-  const handleVideoScrub = (event: any) => {
-    const scrubValue = Number(
-      (event.offsetX * event.target.max) / event.target.offsetWidth
-    );
-    videoElement.current.currentTime =
-      videoElement.current.duration * scrubValue;
-    setProgress(scrubValue);
-  };
-
-  /**
-   * Show volume slider
-   */
-  const toggleVolumeSlider = () => {
-    showVolume(!showvolume);
-  };
-
-  /**
-   * Volume change
-   */
-  const handleVolumeChange = (event: any) => {
-    videoElement.volume = event.target.value;
-  };
-
-  return {
-    handleOnTimeUpdate,
-    handleVideoScrub,
-    handleVolumeChange,
-    playing,
-    progress,
-    showvolume,
-    toggleFullscreen,
-    togglePlay,
-    toggleVolumeSlider,
-  };
-};
-
-export default useVideoPlayer;

package/src/index.ts

@@ -1 +0,0 @@
-export * from "./components";

package/src/types/forms.args.ts

@@ -1,288 +0,0 @@
-// This annoying file has to exist because at the present time, react-docgen-typescript can't generate argTypes for
-// components that use forwardRef. So we have to create the argTypes manually. This only regards Form elements for the time being.
-
-export const formFieldArgTypes = (element: string) => ({
-  className: {
-    description:
-      "The className of the Component. Passed to the outermost element.",
-    control: {
-      type: "text",
-    },
-    table: {
-      type: {
-        summary: "string | undefined",
-      },
-    },
-  },
-  disabled: {
-    description: "Whether the Component is disabled",
-    control: {
-      type: "boolean",
-    },
-    table: {
-      defaultValue: { summary: "false" },
-      type: {
-        summary: "boolean | undefined",
-      },
-    },
-  },
-  error: {
-    description: "Whether the Component has an error",
-    control: {
-      type: "boolean",
-    },
-    table: {
-      defaultValue: { summary: "false" },
-      type: {
-        summary: "boolean | undefined",
-      },
-    },
-  },
-  id: {
-    description:
-      "The id attribute of the underlying form element. This will be the same as `name` if not set",
-    control: {
-      type: "text",
-    },
-    table: {
-      type: {
-        summary: "string | undefined",
-      },
-    },
-  },
-  inputStyle: {
-    description: "Inline styles for the input",
-    control: {
-      type: "object",
-    },
-    table: {
-      type: {
-        summary: "React.CSSProperties | undefined",
-      },
-    },
-  },
-  name: {
-    description:
-      "The name of the Component. This is required and should be unique",
-    control: {
-      type: "text",
-    },
-    type: {
-      required: true,
-      name: "other" as const,
-      value: "string",
-    },
-    table: {
-      type: {
-        summary: "string",
-      },
-    },
-  },
-  onBlur: {
-    description: "The onBlur handler of the Component",
-    control: {
-      type: "function",
-    },
-    table: {
-      type: {
-        summary: `(event: React.FocusEvent<${element}>) => any`,
-      },
-    },
-  },
-  onChange: {
-    description: "The onChange handler of the Component",
-    control: {
-      type: "function",
-    },
-    table: {
-      type: {
-        summary: `(event: React.ChangeEvent<${element}>) => any`,
-      },
-    },
-  },
-  required: {
-    description: "Whether the Component is required",
-    control: {
-      type: "boolean",
-    },
-    table: {
-      type: {
-        summary: "boolean | undefined",
-      },
-      defaultValue: { summary: false },
-    },
-  },
-});
-
-export const choiceFieldArgTypes = (element: string) => ({
-  ...formFieldArgTypes(element),
-  defaultChecked: {
-    description: "Whether the Component is checked by default when it loads",
-    control: {
-      type: "boolean",
-    },
-    table: {
-      type: {
-        summary: "boolean | undefined",
-      },
-    },
-  },
-  checked: {
-    description: "Whether the Component is checked",
-    control: {
-      type: "boolean",
-    },
-    table: {
-      defaultValue: { summary: "false" },
-      type: {
-        summary: "boolean | undefined",
-      },
-    },
-  },
-  value: {
-    description: "The value of the Component",
-    control: {
-      type: "text",
-    },
-    table: {
-      type: {
-        summary: "string | undefined",
-      },
-    },
-  },
-});
-
-export const formControlArgTypes = {
-  className: {
-    description:
-      "The className of the Component. Passed to the outermost element.",
-    control: {
-      type: "text",
-    },
-    table: {
-      type: {
-        summary: "string | undefined",
-      },
-    },
-  },
-  disabled: {
-    description: "Whether the Component is disabled",
-    control: {
-      type: "boolean",
-    },
-    table: {
-      defaultValue: { summary: "false" },
-      type: {
-        summary: "boolean | undefined",
-      },
-    },
-  },
-  error: {
-    description: "Whether the Component has an error",
-    control: {
-      type: "boolean",
-    },
-    table: {
-      defaultValue: { summary: "false" },
-      type: {
-        summary: "boolean | undefined",
-      },
-    },
-  },
-  errorMessage: {
-    description: "The error message to display in case of an error",
-    control: {
-      type: "text",
-    },
-    table: {
-      type: {
-        summary: "string | undefined",
-      },
-    },
-  },
-  label: {
-    description: "The label of the Component. This is required.",
-    control: {
-      type: "text",
-    },
-    type: {
-      required: true,
-      name: "other" as const,
-      value: "string",
-    },
-    table: {
-      type: {
-        summary: "string | undefined",
-      },
-    },
-  },
-  labelSize: {
-    description: "The size of the label",
-    defaultValue: "medium",
-    control: "select",
-    options: ["small", "medium", "large"],
-    table: {
-      defaultValue: { summary: "medium" },
-      type: {
-        name: "enum",
-        summary: "small | medium | large",
-      },
-    },
-  },
-  labelPlacement: {
-    description: "The placement of the label",
-    defaultValue: "start",
-    control: "select",
-    options: ["top", "start", "bottom", "end"],
-    table: {
-      defaultValue: { summary: "start" },
-      type: {
-        name: "enum",
-        summary: "top | start | bottom | end",
-      },
-    },
-  },
-  helper: {
-    description: "Helper text to display with the label",
-    control: {
-      type: "text",
-    },
-    table: {
-      type: {
-        summary: "string | undefined",
-      },
-    },
-  },
-  style: {
-    description: "Inline styles for the outermost element of the Component",
-    control: {
-      type: "object",
-    },
-    table: {
-      type: {
-        summary: "React.CSSProperties | undefined",
-      },
-    },
-  },
-  tooltip: {
-    description: "Optional text to render in a tooltip",
-    control: {
-      type: "text",
-    },
-    table: {
-      type: {
-        summary: "string | undefined",
-      },
-    },
-  },
-};
-
-export const labelledFormFieldArgTypes = (element: string) => ({
-  ...formControlArgTypes,
-  ...formFieldArgTypes(element),
-});
-
-export const labelledChoiceFieldArgTypes = (element: string) => ({
-  ...formControlArgTypes,
-  ...choiceFieldArgTypes(element),
-});