yet-another-react-lightbox 1.0.0

package/dist/plugins/Inline.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { createModule } from "../core/index.js";
+export const InlineContainer = ({ inline, children }) => React.createElement("div", { ...inline }, children);
+export const InlineModule = createModule("inline", InlineContainer);
+export const Inline = ({ augment, replace, remove }) => {
+    augment(({ toolbar: { buttons, ...restToolbar }, open, close, ...restProps }) => ({
+        open: true,
+        close: () => { },
+        toolbar: {
+            buttons: buttons.filter((button) => button !== "close"),
+            ...restToolbar,
+        },
+        ...restProps,
+    }));
+    remove("no-scroll");
+    replace("portal", InlineModule);
+};

package/dist/plugins/Video.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { Plugin } from "../types.js";
+export interface SlideVideo {
+    type: "video";
+    poster?: string;
+    width?: number;
+    height?: number;
+    sources?: {
+        src: string;
+        type: string;
+    }[];
+}
+declare module "../types.js" {
+    interface SlideTypes {
+        SlideVideo: SlideVideo;
+    }
+}
+export declare const VideoSlide: ({ slide: { sources, poster, width, height } }: {
+    slide: SlideVideo;
+}) => JSX.Element;
+export declare const Video: Plugin;

package/dist/plugins/Video.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { SlideTypesPropTypes } from "../types.js";
+import { clsx, cssClass, useContainerRect } from "../core/index.js";
+SlideTypesPropTypes.push(PropTypes.shape({
+    type: PropTypes.oneOf(["video"]).isRequired,
+    poster: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    sources: PropTypes.arrayOf(PropTypes.shape({
+        src: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+    }).isRequired),
+}));
+export const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
+    const { setContainerRef, containerRect } = useContainerRect();
+    const scaleWidthAndHeight = () => {
+        if (!width || !height || !containerRect)
+            return null;
+        const widthBound = width / height > containerRect.width / containerRect.height;
+        return {
+            width: widthBound ? containerRect.width : Math.round((containerRect.height / height) * width),
+            height: !widthBound ? containerRect.height : Math.round((containerRect.width / width) * height),
+        };
+    };
+    return (React.createElement(React.Fragment, null, sources && (React.createElement("div", { ref: setContainerRef, style: {
+            width: "100%",
+            height: "100%",
+        }, className: clsx(cssClass("video_container"), cssClass("flex_center")) }, containerRect && (React.createElement("video", { controls: true, playsInline: true, poster: poster, ...scaleWidthAndHeight() }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
+};
+export const Video = ({ augment }) => {
+    augment(({ render: { slide: renderSlide, ...restRender }, ...restProps }) => ({
+        render: {
+            slide: (slide) => {
+                if ("type" in slide && slide.type === "video") {
+                    return React.createElement(VideoSlide, { slide: slide });
+                }
+                return renderSlide(slide);
+            },
+            ...restRender,
+        },
+        ...restProps,
+    }));
+};

package/dist/plugins/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Fullscreen.js";
+export * from "./Inline.js";
+export * from "./Video.js";

package/dist/plugins/index.js

@@ -0,0 +1,3 @@
+export * from "./Fullscreen.js";
+export * from "./Inline.js";
+export * from "./Video.js";

package/dist/styles.css

@@ -0,0 +1,237 @@
+.yarl__portal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--yarl__fade_animation_duration, 250ms) ease;
+}
+.yarl__portal_open {
+  opacity: 1;
+}
+.yarl__container, .yarl__carousel, .yarl__slide {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  touch-action: none;
+}
+.yarl__container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  color: #fff;
+  background-color: #000;
+  outline: 0;
+}
+.yarl__carousel {
+  position: absolute;
+  overflow: hidden;
+  inset: 0;
+}
+.yarl__flex_center {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+.yarl__slide {
+  position: absolute;
+  overflow: hidden;
+  inset: 0;
+  padding: var(--yarl__carousel_padding, 16px);
+  -webkit-transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%))), 0, 0);
+          transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%))), 0, 0);
+  transition: -webkit-transform var(--yarl__swipe_animation_duration, 500ms) ease-out;
+  transition: transform var(--yarl__swipe_animation_duration, 500ms) ease-out;
+  transition: transform var(--yarl__swipe_animation_duration, 500ms) ease-out, -webkit-transform var(--yarl__swipe_animation_duration, 500ms) ease-out;
+}
+.yarl__container_swipe .yarl__slide {
+  -webkit-transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%))), 0, 0) translate3d(var(--yarl__swipe_offset, 0px), 0, 0);
+          transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%))), 0, 0) translate3d(var(--yarl__swipe_offset, 0px), 0, 0);
+  transition: unset;
+}
+.yarl__slide_image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+.yarl__slide_image_loading {
+  opacity: 0;
+}
+.yarl__slide_placeholder {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+          transform: translate3d(-50%, -50%, 0);
+  line-height: 0;
+}
+.yarl__slide_loading {
+  color: rgba(255, 255, 255, 0.8);
+  -webkit-animation: yarl__delayed_fadein 1s linear;
+          animation: yarl__delayed_fadein 1s linear;
+}
+.yarl__slide_loading line {
+  -webkit-animation: yarl__stroke_opacity 1s linear infinite;
+          animation: yarl__stroke_opacity 1s linear infinite;
+}
+.yarl__slide_loading line:nth-of-type(1) {
+  -webkit-animation-delay: -1.875s;
+          animation-delay: -1.875s;
+}
+.yarl__slide_loading line:nth-of-type(2) {
+  -webkit-animation-delay: -1.75s;
+          animation-delay: -1.75s;
+}
+.yarl__slide_loading line:nth-of-type(3) {
+  -webkit-animation-delay: -1.625s;
+          animation-delay: -1.625s;
+}
+.yarl__slide_loading line:nth-of-type(4) {
+  -webkit-animation-delay: -1.5s;
+          animation-delay: -1.5s;
+}
+.yarl__slide_loading line:nth-of-type(5) {
+  -webkit-animation-delay: -1.375s;
+          animation-delay: -1.375s;
+}
+.yarl__slide_loading line:nth-of-type(6) {
+  -webkit-animation-delay: -1.25s;
+          animation-delay: -1.25s;
+}
+.yarl__slide_loading line:nth-of-type(7) {
+  -webkit-animation-delay: -1.125s;
+          animation-delay: -1.125s;
+}
+.yarl__slide_loading line:nth-of-type(8) {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s;
+}
+.yarl__slide_error {
+  width: 48px;
+  height: 48px;
+  color: red;
+}
+@media (prefers-reduced-motion) {
+  .yarl__portal, .yarl__slide {
+    transition: unset;
+  }
+  .yarl__slide_loading, .yarl__slide_loading line {
+    -webkit-animation: unset;
+            animation: unset;
+  }
+}
+.yarl__toolbar {
+  position: absolute;
+  inset: 0 0 auto 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+  gap: 8px;
+}
+.yarl__icon {
+  width: 32px;
+  height: 32px;
+}
+.yarl__button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  cursor: pointer;
+  border: 0;
+  margin: 0;
+  outline: none;
+  line-height: 0;
+  padding: 8px;
+  color: rgba(255, 255, 255, 0.8);
+  -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
+          filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
+  -webkit-tap-highlight-color: transparent;
+}
+.yarl__button:focus {
+  color: #fff;
+}
+.yarl__button:focus:not(:focus-visible) {
+  color: rgba(255, 255, 255, 0.8);
+}
+.yarl__button:focus-visible {
+  color: #fff;
+}
+@media (hover: hover) {
+  .yarl__button:hover, .yarl__button:focus:hover, .yarl__button:focus-visible:hover {
+    color: #fff;
+  }
+}
+.yarl__button:disabled {
+  color: rgba(255, 255, 255, 0.4);
+  cursor: default;
+}
+.yarl__navigation_prev, .yarl__navigation_next {
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  padding: 24px 16px;
+}
+.yarl__navigation_prev {
+  left: 0;
+}
+.yarl__navigation_next {
+  right: 0;
+}
+.yarl__no_scroll {
+  height: 100%;
+  overflow: hidden;
+}
+.yarl__pad_scrollbar {
+  padding-right: var(--yarl__scrollbar_padding, 17px);
+}
+
+@-webkit-keyframes yarl__delayed_fadein {
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes yarl__delayed_fadein {
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes yarl__stroke_opacity {
+  from {
+    stroke-opacity: 1;
+  }
+  to {
+    stroke-opacity: 0.125;
+  }
+}
+@keyframes yarl__stroke_opacity {
+  from {
+    stroke-opacity: 1;
+  }
+  to {
+    stroke-opacity: 0.125;
+  }
+}

package/dist/types.d.ts

@@ -0,0 +1,102 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+export interface SlideImage {
+    src?: string;
+    title?: string;
+    aspectRatio?: number;
+    srcSet?: {
+        src: string;
+        width: number;
+    }[];
+}
+export interface SlideTypes {
+    SlideImage: SlideImage;
+}
+export declare type Slide = SlideTypes[keyof SlideTypes];
+export interface Carousel {
+    finite: boolean;
+    preload: number;
+    padding: string | number;
+    spacing: string | number;
+}
+export interface Animation {
+    fade: number;
+    swipe: number;
+}
+export interface Render {
+    slide: (slide: Slide) => React.ReactNode;
+}
+export interface LightboxProps {
+    open: boolean;
+    close: () => void;
+    index: number;
+    slides: Slide[];
+    render: Render;
+    labels: Labels;
+    plugins: Plugin[];
+    toolbar: Toolbar;
+    carousel: Carousel;
+    animation: Animation;
+}
+export declare const SlideTypesPropTypes: PropTypes.Validator<any>[];
+export declare const LightboxPropTypes: {
+    open: PropTypes.Validator<boolean>;
+    close: PropTypes.Validator<(...args: any[]) => any>;
+    index: PropTypes.Validator<number>;
+    slides: PropTypes.Validator<any[]>;
+    render: PropTypes.Validator<PropTypes.InferProps<{
+        slide: PropTypes.Validator<(...args: any[]) => any>;
+    }>>;
+    plugins: PropTypes.Validator<((...args: any[]) => any)[]>;
+    toolbar: PropTypes.Validator<PropTypes.InferProps<{
+        buttons: PropTypes.Validator<(string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | null | undefined)[]>;
+    }>>;
+    labels: PropTypes.Validator<PropTypes.InferProps<{}>>;
+    carousel: PropTypes.Validator<PropTypes.InferProps<{
+        finite: PropTypes.Validator<boolean>;
+        preload: PropTypes.Validator<number>;
+        padding: PropTypes.Validator<string | number>;
+        spacing: PropTypes.Validator<string | number>;
+    }>>;
+    animation: PropTypes.Validator<PropTypes.InferProps<{
+        fade: PropTypes.Validator<number>;
+        swipe: PropTypes.Validator<number>;
+    }>>;
+};
+export declare const LightboxDefaultProps: {
+    open: boolean;
+    close: () => void;
+    index: number;
+    slides: Slide[];
+    render: Render;
+    plugins: Plugin[];
+    toolbar: Toolbar;
+    labels: {};
+    animation: Animation;
+    carousel: Carousel;
+};
+export declare type Labels = {
+    [key: string]: string;
+};
+export interface Toolbar {
+    buttons: ("close" | React.ReactNode)[];
+}
+export declare type ComponentProps = Omit<LightboxProps, "plugins">;
+export declare type Component = React.ComponentType<React.PropsWithChildren<ComponentProps>>;
+export declare type Module = {
+    name: string;
+    component: Component;
+};
+export declare type Node = {
+    module: Module;
+    children?: Node[];
+};
+export declare type Augmentation = (props: LightboxProps) => LightboxProps;
+export declare type Plugin = ({ addParent, addChild, addSibling, replace, remove, }: {
+    addParent: (target: string, module: Module) => void;
+    addChild: (target: string, module: Module, precede?: boolean) => void;
+    addSibling: (target: string, module: Module, precede?: boolean) => void;
+    replace: (target: string, module: Module) => void;
+    remove: (target: string) => void;
+    augment: (augmentation: Augmentation) => void;
+}) => void;

package/dist/types.js

@@ -0,0 +1,61 @@
+import PropTypes from "prop-types";
+export const SlideTypesPropTypes = [
+    PropTypes.shape({
+        src: PropTypes.string.isRequired,
+        title: PropTypes.string,
+        aspectRatio: PropTypes.number,
+        srcSet: PropTypes.oneOfType([
+            PropTypes.string.isRequired,
+            PropTypes.arrayOf(PropTypes.shape({
+                src: PropTypes.string.isRequired,
+                width: PropTypes.number.isRequired,
+            }).isRequired).isRequired,
+        ]),
+    }),
+];
+export const LightboxPropTypes = {
+    open: PropTypes.bool.isRequired,
+    close: PropTypes.func.isRequired,
+    index: PropTypes.number.isRequired,
+    slides: PropTypes.arrayOf(PropTypes.oneOfType(SlideTypesPropTypes).isRequired).isRequired,
+    render: PropTypes.shape({
+        slide: PropTypes.func.isRequired,
+    }).isRequired,
+    plugins: PropTypes.arrayOf(PropTypes.func.isRequired).isRequired,
+    toolbar: PropTypes.shape({
+        buttons: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["close"]), PropTypes.node])).isRequired,
+    }).isRequired,
+    labels: PropTypes.shape({}).isRequired,
+    carousel: PropTypes.shape({
+        finite: PropTypes.bool.isRequired,
+        preload: PropTypes.number.isRequired,
+        padding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+        spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    }).isRequired,
+    animation: PropTypes.shape({
+        fade: PropTypes.number.isRequired,
+        swipe: PropTypes.number.isRequired,
+    }).isRequired,
+};
+export const LightboxDefaultProps = {
+    open: false,
+    close: () => { },
+    index: 0,
+    slides: [],
+    render: {
+        slide: () => null,
+    },
+    plugins: [],
+    toolbar: { buttons: ["close"] },
+    labels: {},
+    animation: {
+        fade: 330,
+        swipe: 500,
+    },
+    carousel: {
+        finite: false,
+        preload: 2,
+        padding: "16px",
+        spacing: "30%",
+    },
+};

package/package.json

@@ -0,0 +1,105 @@
+{
+    "name": "yet-another-react-lightbox",
+    "version": "1.0.0",
+    "description": "Modern lightbox component for React",
+    "author": "Igor Danchenko",
+    "license": "MIT",
+    "type": "module",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": "./dist/index.js",
+        "./styles.css": "./dist/styles.css",
+        "./core": "./dist/core/index.js",
+        "./plugins": "./dist/plugins/index.js"
+    },
+    "typesVersions": {
+        "*": {
+            "*": [
+                "dist/index.d.ts"
+            ],
+            "core": [
+                "dist/core/index.d.ts"
+            ],
+            "plugins": [
+                "dist/plugins/index.d.ts"
+            ]
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "sideEffects": false,
+    "homepage": "https://github.com/igordanchenko/yet-another-react-lightbox#readme",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/igordanchenko/yet-another-react-lightbox.git"
+    },
+    "bugs": {
+        "url": "https://github.com/igordanchenko/yet-another-react-lightbox/issues"
+    },
+    "engines": {
+        "node": ">=14"
+    },
+    "scripts": {
+        "prepare": "husky install",
+        "clean": "rimraf dist",
+        "build": "npm-run-all clean build:scss build:css build:js",
+        "build:js": "tsc -p tsconfig.build.json",
+        "build:css": "postcss src/styles.css -u autoprefixer --no-map -d dist",
+        "build:scss": "sass src/styles.scss src/styles.css --no-source-map ",
+        "start": "npm-run-all clean --parallel \"build:* -- -w\"",
+        "lint": "eslint .",
+        "test": "jest"
+    },
+    "dependencies": {
+        "prop-types": "^15.8.1"
+    },
+    "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+    },
+    "devDependencies": {
+        "@commitlint/cli": "^17.0.0",
+        "@commitlint/config-conventional": "^17.0.0",
+        "@semantic-release/changelog": "^6.0.1",
+        "@semantic-release/github": "^8.0.4",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.2.0",
+        "@testing-library/user-event": "^14.2.0",
+        "@types/jest": "^27.5.1",
+        "@types/react": "^18.0.9",
+        "@types/react-dom": "^18.0.4",
+        "@typescript-eslint/eslint-plugin": "^5.25.0",
+        "@typescript-eslint/parser": "^5.25.0",
+        "autoprefixer": "^10.4.7",
+        "eslint": "^8.15.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react-hooks": "^4.5.0",
+        "husky": "^8.0.1",
+        "jest": "^28.1.0",
+        "jest-environment-jsdom": "^28.1.0",
+        "lint-staged": "^12.4.1",
+        "npm-run-all": "^4.1.5",
+        "postcss": "^8.4.14",
+        "postcss-cli": "^9.1.0",
+        "prettier": "^2.6.2",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
+        "rimraf": "^3.0.2",
+        "sass": "^1.51.0",
+        "ts-jest": "^28.0.2",
+        "typescript": "^4.6.4"
+    },
+    "keywords": [
+        "react",
+        "lightbox",
+        "react lightbox"
+    ]
+}