react-justified-layout-ts 2.1.5 → 2.2.1

package/.storybook/main.ts

@@ -1,18 +1,17 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-webpack5-compiler-swc",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
     "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
   ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
-  },
+  "framework": "@storybook/react-vite"
 };
-export default config;
+export default config;

package/.storybook/preview.ts

@@ -1,14 +1,21 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react-vite'
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
+       color: /(background|color)$/i,
+       date: /Date$/i,
       },
     },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
   },
 };
 
-export default preview;
+export default preview;

package/README.md

@@ -1,45 +1,45 @@
-A TypeScript component similar to Flickr's justified layout.
-
-# Usage
-
-
-Add the `TSJustifiedLayout` component to your code with the following props:
-
-- `aspectRatioList: number[];` - An array of aspect ratios for the images you are adding to the grid
-- `itemSpacing?: number;` - The amount of spacing between each image, in pixels. (Default: 10)
-- `rowSpacing?: number;` - The amount of spacing between each row, in pixels. (Default: 10)
-- `targetRowHeight?: number;` - The target row height for a row, in pixels. (Default: 320)
-- `targetRowHeightTolerance?: number;` - The amount the row height could deviate from the target row height, as a percent. (Default: .25)
-- `width: number;` - The width of the container. I would use something like `react-use-measure` if you're trying to make it dynamically take up the size of the parent container.
-- `children: any[];` - The children elements that makes up the grid.
-- `showWidows?: boolean;` - If the last row should be shown. (Default: true)
-
-## Example Usage
-
-
-```typescript jsx
-<TSJustifiedLayout width={width}
-                   aspectRatioList={imagesOnPage.map(value => ({
-       dimensions: value.aspectRatio || 1
-    }))}>
-        {imagesOnPage.map(value => <img
-            src={value.src}
-            alt={value.alt}
-        />)}
-</TSJustifiedLayout>
-```
-
-# Install
-
-
-`npm i react-justified-layout-ts`
-
-# Credits
-
-
-The display logic for the layout and the math used to calculate the row height for each row is adapted from [Flickr's Justified Layout library](https://github.com/flickr/justified-layout).
-
-# License
-
-
+A TypeScript component similar to Flickr's justified layout.
+
+# Usage
+
+
+Add the `TSJustifiedLayout` component to your code with the following props:
+
+- `aspectRatioList: number[];` - An array of aspect ratios for the images you are adding to the grid
+- `itemSpacing?: number;` - The amount of spacing between each image, in pixels. (Default: 10)
+- `rowSpacing?: number;` - The amount of spacing between each row, in pixels. (Default: 10)
+- `targetRowHeight?: number;` - The target row height for a row, in pixels. (Default: 320)
+- `targetRowHeightTolerance?: number;` - The amount the row height could deviate from the target row height, as a percent. (Default: .25)
+- `width: number;` - The width of the container. I would use something like `react-use-measure` if you're trying to make it dynamically take up the size of the parent container.
+- `children: any[];` - The children elements that makes up the grid.
+- `showWidows?: boolean;` - If the last row should be shown. (Default: true)
+
+## Example Usage
+
+
+```typescript jsx
+<TSJustifiedLayout width={width}
+                   aspectRatioList={imagesOnPage.map(value => ({
+       dimensions: value.aspectRatio || 1
+    }))}>
+        {imagesOnPage.map(value => <img
+            src={value.src}
+            alt={value.alt}
+        />)}
+</TSJustifiedLayout>
+```
+
+# Install
+
+
+`npm i react-justified-layout-ts`
+
+# Credits
+
+
+The display logic for the layout and the math used to calculate the row height for each row is adapted from [Flickr's Justified Layout library](https://github.com/flickr/justified-layout).
+
+# License
+
+
 Open Source Licensed under the MIT license.

package/dist/components/JustifiedGrid.js

@@ -42,17 +42,18 @@ function JustifiedGrid(props) {
     const { targetRowHeightTolerance = .25, width, targetRowHeight = 320, itemSpacing = 8, rowSpacing = 8, children, containerStyle, aspectRatioList } = props;
     const rows = getJustifiedGridRowConfiguration(width, targetRowHeightTolerance, aspectRatioList, targetRowHeight, itemSpacing);
     let childNodeCounter = -1;
-    function renderRowItem(value, aspectRatio) {
-        childNodeCounter++;
-        return react_1.default.createElement("div", { style: Object.assign({ flex: value.length === 1 ? 1 : aspectRatio }, containerStyle) }, children[childNodeCounter]);
-    }
     return (react_1.default.createElement("div", { style: {
             display: 'flex',
             flexDirection: 'column',
             gap: rowSpacing
-        } }, rows.map(value => react_1.default.createElement("div", { className: 'justified-row', style: {
-            display: "flex",
-            flexDirection: "row",
-            gap: itemSpacing,
-        } }, value.map(aspectRatio => renderRowItem(value, aspectRatio))))));
+        } }, rows.map((value) => {
+        return react_1.default.createElement("div", { className: 'justified-row', style: {
+                display: "flex",
+                flexDirection: "row",
+                gap: itemSpacing,
+            } }, value.map((aspectRatio) => {
+            childNodeCounter++;
+            return react_1.default.createElement("div", { style: Object.assign({ flex: value.length === 1 ? 1 : aspectRatio }, containerStyle) }, children[childNodeCounter]);
+        }));
+    })));
 }

package/dist/components/layout.css

@@ -1,4 +1,4 @@
-.justified-row img {
-    width: 100%;
-    display: block;
+.justified-row img {
+    width: 100%;
+    display: block;
 }

package/dist/src/components/JustifiedGrid.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import './layout.css';
+export interface JustifiedGridProps {
+    aspectRatioList: number[];
+    itemSpacing?: number;
+    rowSpacing?: number;
+    targetRowHeight?: number;
+    targetRowHeightTolerance?: number;
+    width: number;
+    children: React.JSX.Element[];
+    containerStyle?: React.CSSProperties;
+}
+export declare function JustifiedGrid(props: Readonly<JustifiedGridProps>): React.JSX.Element;

package/dist/src/components/JustifiedGrid.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JustifiedGrid = JustifiedGrid;
+const react_1 = __importDefault(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+require("./layout.css");
+function getJustifiedGridRowConfiguration(width, targetRowHeightTolerance, aspectRatioList, targetRowHeight, itemSpacing) {
+    let buffer = [];
+    const rows = [];
+    // We assume that the row will have the specified height, which allows us to convert aspect ratios into widths
+    const minRowWidth = width * (1 / (1 + targetRowHeightTolerance));
+    const maxRowWidth = width * (1 / (1 - targetRowHeightTolerance));
+    aspectRatioList.forEach((aspectRatio, index) => {
+        let currentRowWidth = (lodash_1.default.sum(buffer) * targetRowHeight + aspectRatio * targetRowHeight + itemSpacing * (buffer.length));
+        // If the new item's width would cause it to fall between the tolerances for max widths, finish the row
+        // If the new item's width would cause it to exceed the tolerances for the row, add it to a new row
+        if (buffer.length === 0 || currentRowWidth < maxRowWidth) {
+            buffer.push(aspectRatio);
+            if (currentRowWidth > minRowWidth) {
+                rows.push(buffer);
+                buffer = [];
+            }
+            // If we're handling the last item, and it doesn't exceed the minimum tolerance for the row width, we add a "dummy" item to make the rest of the row now take up the whole width
+            else if (index === aspectRatioList.length - 1) {
+                buffer.push((width - lodash_1.default.sum(buffer) * targetRowHeight - itemSpacing * (buffer.length - 1)) / targetRowHeight);
+            }
+        }
+        else {
+            rows.push(buffer);
+            buffer = [aspectRatio];
+        }
+    });
+    if (buffer.length !== 0) {
+        rows.push(buffer);
+    }
+    return rows;
+}
+function JustifiedGrid(props) {
+    const { targetRowHeightTolerance = .25, width, targetRowHeight = 320, itemSpacing = 8, rowSpacing = 8, children, containerStyle, aspectRatioList } = props;
+    const rows = getJustifiedGridRowConfiguration(width, targetRowHeightTolerance, aspectRatioList, targetRowHeight, itemSpacing);
+    let childNodeCounter = -1;
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rowSpacing
+        } }, rows.map((value) => {
+        return react_1.default.createElement("div", { className: 'justified-row', style: {
+                display: "flex",
+                flexDirection: "row",
+                gap: itemSpacing,
+            } }, value.map((aspectRatio) => {
+            childNodeCounter++;
+            return react_1.default.createElement("div", { style: Object.assign({ flex: value.length === 1 ? 1 : aspectRatio }, containerStyle) }, children[childNodeCounter]);
+        }));
+    })));
+}

package/dist/src/components/TSJustifiedLayout.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import './layout.css';
+export interface TSJustifiedLayoutProps {
+    aspectRatioList: number[];
+    itemSpacing?: number;
+    rowSpacing?: number;
+    targetRowHeight?: number;
+    targetRowHeightTolerance?: number;
+    width: number;
+    children: React.JSX.Element[];
+    showWidows?: boolean;
+    containerStyle?: React.CSSProperties;
+}
+/**
+ * @deprecated Use the new {@link JustifiedGrid} component instead as it has better handling for heights of widow rows and future work will be done there
+ */
+declare function TSJustifiedLayout({ children, aspectRatioList, itemSpacing, rowSpacing, showWidows, targetRowHeight, targetRowHeightTolerance, width, containerStyle }: Readonly<TSJustifiedLayoutProps>): React.JSX.Element;
+export { TSJustifiedLayout, TSJustifiedLayout as JustifiedGrid };

package/dist/src/components/TSJustifiedLayout.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TSJustifiedLayout = TSJustifiedLayout;
+exports.JustifiedGrid = TSJustifiedLayout;
+const react_1 = __importDefault(require("react"));
+require("./layout.css");
+/**
+ * @deprecated Use the new {@link JustifiedGrid} component instead as it has better handling for heights of widow rows and future work will be done there
+ */
+function TSJustifiedLayout({ children, aspectRatioList, itemSpacing = 10, rowSpacing = 10, showWidows = true, targetRowHeight = 320, targetRowHeightTolerance = .25, width, containerStyle }) {
+    const minAspectRatio = width / targetRowHeight * (1 - targetRowHeightTolerance);
+    const maxAspectRatio = width / targetRowHeight * (1 + targetRowHeightTolerance);
+    const rows = [];
+    let rowBuffer = [];
+    /**
+     * Attempts to add an item to the current row buffer
+     * @param value The new aspect ratio to be checked
+     * @return If the buffer can accept the new value
+     * */
+    function addItem(value) {
+        const newItems = rowBuffer.concat(value);
+        const newAspectRatio = newItems.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
+        const rowWidthMinusSpacing = width - (newItems.length - 1) * itemSpacing;
+        const targetAspectRatio = rowWidthMinusSpacing / targetRowHeight;
+        // Row still has space
+        if (newAspectRatio < minAspectRatio) {
+            rowBuffer.push(value);
+        }
+        // Row ran out of space, and the new item is larger than the max aspect ratio for the row
+        else if (newAspectRatio > maxAspectRatio) {
+            // Always accept if it's just 1 item
+            if (rowBuffer.length === 0) {
+                rowBuffer.push(value);
+                rows.push({ items: rowBuffer, height: rowWidthMinusSpacing / newAspectRatio });
+                rowBuffer = [];
+            }
+            else {
+                // Calculate width/aspect ratio for row before adding new item
+                const previousRowWidthWithoutSpacing = width - (rowBuffer.length - 1) * itemSpacing;
+                const previousAspectRatio = rowBuffer.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
+                const previousTargetAspectRatio = previousRowWidthWithoutSpacing / targetRowHeight;
+                // If the new aspect ratio is farther from the target after the insert, then push row buffer and insert new item into the next row
+                if (Math.abs(newAspectRatio - targetAspectRatio) > Math.abs(previousAspectRatio - previousTargetAspectRatio)) {
+                    rows.push({ items: rowBuffer, height: previousRowWidthWithoutSpacing / previousAspectRatio });
+                    rowBuffer = [value];
+                }
+                // If the new aspect ratio is closer to the target aspect ratio, then insert item and push row buffer
+                else {
+                    rowBuffer.push(value);
+                    rows.push({ items: rowBuffer, height: rowWidthMinusSpacing / newAspectRatio });
+                    rowBuffer = [];
+                }
+            }
+        }
+        else {
+            // New aspect ratio is within aspect ratio tolerance, so we finish off the row
+            rowBuffer.push(value);
+            rows.push({ items: rowBuffer, height: rowWidthMinusSpacing / newAspectRatio });
+            rowBuffer = [];
+        }
+    }
+    aspectRatioList.forEach((value) => {
+        addItem(value);
+    });
+    // Handle leftover content
+    if (showWidows && rowBuffer.length !== 0) {
+        rows.push({ items: rowBuffer, height: rows.length === 0 ? targetRowHeight : rows[rows.length - 1].height });
+    }
+    let childNodeCounter = -1;
+    /**
+     * Clone the children element, and inject the height of the element as a prop
+     */
+    function renderRowItem(aspectRatio, isSoloRow, lastRowWithinTolerance, fakeElementAspectRatio) {
+        childNodeCounter++;
+        return react_1.default.createElement("div", { style: Object.assign({ flex: isSoloRow ? 1 : aspectRatio }, containerStyle) },
+            children[childNodeCounter],
+            lastRowWithinTolerance && react_1.default.createElement("div", { style: { flex: fakeElementAspectRatio } }));
+    }
+    // TODO Figure out how to eliminate the tiny gap between div and actual image height
+    // TODO Make bottom row respect length restrictions
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rowSpacing
+        } }, rows.map((value, index, array) => {
+        let isLastRow = index === array.length - 1 && showWidows;
+        let rowAspectRatioSum = value.items.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
+        const isLastRowWithinTolerance = isLastRow && rowAspectRatioSum * value.height + (value.items.length - 1) * itemSpacing < minAspectRatio * value.height;
+        const fakeElementAspectRatio = (width - rowAspectRatioSum * value.height - (value.items.length - 1) * itemSpacing) / value.height;
+        return react_1.default.createElement("div", { className: 'justified-row', style: {
+                display: "flex",
+                flexDirection: "row",
+                gap: itemSpacing,
+            } }, value.items.map((aspectRatio) => renderRowItem(aspectRatio, value.items.length === 1, isLastRowWithinTolerance, fakeElementAspectRatio)));
+    })));
+}

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { TSJustifiedLayout } from "./components/TSJustifiedLayout";
+export { JustifiedGridProps, JustifiedGrid } from "./components/JustifiedGrid";

package/dist/src/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JustifiedGrid = exports.TSJustifiedLayout = void 0;
+var TSJustifiedLayout_1 = require("./components/TSJustifiedLayout");
+Object.defineProperty(exports, "TSJustifiedLayout", { enumerable: true, get: function () { return TSJustifiedLayout_1.TSJustifiedLayout; } });
+var JustifiedGrid_1 = require("./components/JustifiedGrid");
+Object.defineProperty(exports, "JustifiedGrid", { enumerable: true, get: function () { return JustifiedGrid_1.JustifiedGrid; } });

package/dist/src/stories/ConfiguredJustifiedLayout.d.ts

@@ -0,0 +1,3 @@
+import { TSJustifiedLayoutProps } from "../components/TSJustifiedLayout";
+import React from "react";
+export declare const ConfiguredJustifiedLayout: ({ aspectRatioList, rowSpacing, width, itemSpacing, targetRowHeight, targetRowHeightTolerance, children }: TSJustifiedLayoutProps) => React.JSX.Element;

package/dist/src/stories/ConfiguredJustifiedLayout.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfiguredJustifiedLayout = void 0;
+const react_1 = __importDefault(require("react"));
+const JustifiedGrid_1 = require("../components/JustifiedGrid");
+const ConfiguredJustifiedLayout = ({ aspectRatioList, rowSpacing = 8, width = 1000, itemSpacing = 8, targetRowHeight = 320, targetRowHeightTolerance = 0.10, children }) => {
+    return react_1.default.createElement(JustifiedGrid_1.JustifiedGrid, { aspectRatioList: aspectRatioList, width: width, itemSpacing: itemSpacing, targetRowHeight: targetRowHeight, targetRowHeightTolerance: targetRowHeightTolerance, rowSpacing: rowSpacing }, children.map((child) => child));
+};
+exports.ConfiguredJustifiedLayout = ConfiguredJustifiedLayout;

package/dist/src/stories/JustifiedLayout.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    title: string;
+    component: ({ aspectRatioList, rowSpacing, width, itemSpacing, targetRowHeight, targetRowHeightTolerance, children }: import("../components/TSJustifiedLayout").TSJustifiedLayoutProps) => React.JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Divs: Story;
+export declare const Single: Story;
+export declare const SingleWithDiv: Story;

package/dist/src/stories/JustifiedLayout.stories.js

@@ -0,0 +1,202 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleWithDiv = exports.Single = exports.Divs = exports.Secondary = exports.Primary = void 0;
+const ConfiguredJustifiedLayout_1 = require("./ConfiguredJustifiedLayout");
+const react_1 = __importDefault(require("react"));
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const meta = {
+    title: 'JustifiedLayout/Basic',
+    component: ConfiguredJustifiedLayout_1.ConfiguredJustifiedLayout,
+};
+exports.default = meta;
+const displayedImages = [
+    {
+        "title": "Outfit Sheet",
+        "artist": "@godbirdart",
+        "tags": [
+            "Vernal",
+            "Serotinal Circuitboard",
+            "Estival Checker",
+            "Autumnal Wavesniper",
+            "Hibernal Assassin",
+            "Rastaban Form",
+            "Knives",
+            "Techwear",
+            "Hoodie",
+            "Bodysuit",
+            "Featured"
+        ],
+        "href": "https://x.com/FaintAlcor/status/1785179761309839456",
+        "published": "2024-04-30",
+        "aspectRatio": 2.35,
+        "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/outfit_sheet.webp",
+        "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/outfit_sheet.webp",
+        "src": "https://alcorsiteartbucket.s3.amazonaws.com/outfit_sheet.PNG"
+    },
+    {
+        "title": "Quick-Draw Stance",
+        "artist": "@RSN_07",
+        "tags": [
+            "Aquarius Form",
+            "Featured"
+        ],
+        "href": "https://x.com/RSN_07/status/1775664237119217719?s=20",
+        "published": "2024-04-03",
+        "aspectRatio": 0.6328125,
+        "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/quick_draw_stance.webp",
+        "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/quick_draw_stance.webp",
+        "src": "https://alcorsiteartbucket.s3.amazonaws.com/quick_draw_stance.PNG"
+    },
+    {
+        "title": "Evening Train",
+        "artist": "@greyy_arts",
+        "tags": [
+            "Estival Checker",
+            "Rastaban Form",
+            "Hoodie",
+            "Featured"
+        ],
+        "href": "https://twitter.com/greyy_arts/status/1613748293531758593",
+        "published": "2023-01-12",
+        "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/evening_train.webp",
+        "src": "https://alcorsiteartbucket.s3.amazonaws.com/evening_train.png",
+        "aspectRatio": 0.8203125,
+        "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/evening_train.webp"
+    },
+    {
+        "src": "https://pbs.twimg.com/media/Fj2qZYRVEAAVyRC?format=jpg&name=large",
+        "title": "AICore Relaxing",
+        "href": "https://twitter.com/KuroPenguinEx/status/1602624683211227136/photo/1",
+        "artist": "@KuroPenguinEx",
+        "tags": [
+            "AICore Form",
+            "Thuban Form",
+            "Featured"
+        ],
+        "published": "2022-12-13",
+        "aspectRatio": 1.3333333333333333
+    },
+    {
+        "title": "Sci-fi Mode: ON",
+        "href": "https://twitter.com/AxyUsagi/status/1543041029674344448?s=20&t=tlXwc5aegdXuQeLhgdUw-Q",
+        "artist": "@AxyUsagi",
+        "src": "https://pbs.twimg.com/media/FWn7dJ9XkAIHM5j?format=jpg&name=medium",
+        "tags": [
+            "Thuban Form",
+            "Knives",
+            "Hoodie",
+            "Techwear",
+            "Bodysuit",
+            "Featured"
+        ],
+        "published": "2022-07-01",
+        "aspectRatio": 0.9166666666666666
+    },
+    {
+        "title": "Lance Hero",
+        "href": "https://twitter.com/eb_kemo/status/1521991097098305536?s=20&t=8fG0sc10hW-oJEyn8HzT3w",
+        "src": "https://pbs.twimg.com/media/FR8y1bnakAA0Pol?format=jpg&name=large",
+        "artist": "@eb_erh",
+        "tags": [
+            "Rastaban Form",
+            "Gungrir Suit",
+            "Lances",
+            "Superhero",
+            "Featured"
+        ],
+        "published": "2022-05-04",
+        "aspectRatio": 0.85107421875
+    },
+    {
+        "src": "https://pbs.twimg.com/media/FnHp4nWaUAA-lgD?format=jpg&name=large",
+        "title": "Special Archery Training!",
+        "href": "https://twitter.com/Yamainu_ken/status/1617331411761115138?s=20",
+        "tags": [
+            "Superhero",
+            "Indra Suit",
+            "Bow",
+            "Bodysuit",
+            "Thuban Form",
+            "Featured"
+        ],
+        "artist": "@Yamainu_ken",
+        "published": "2023-01-22",
+        "aspectRatio": 1.5442260442260443
+    }
+];
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+exports.Primary = {
+    name: "Complex Elements",
+    args: {
+        width: 1920,
+        showWidows: true,
+        targetRowHeight: undefined,
+        rowSpacing: undefined,
+        itemSpacing: undefined,
+        aspectRatioList: displayedImages.map(value => value.aspectRatio),
+        targetRowHeightTolerance: undefined,
+        children: displayedImages.map(value => {
+            var _a;
+            return react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { style: { top: 16, left: 16, position: "absolute" } }, "Testing"),
+                react_1.default.createElement("img", { src: (_a = value.webp) !== null && _a !== void 0 ? _a : value.src }));
+        }),
+        containerStyle: { position: 'relative' }
+    },
+};
+exports.Secondary = {
+    name: "Image Tag Elements",
+    args: {
+        width: 1920,
+        showWidows: true,
+        targetRowHeight: undefined,
+        rowSpacing: undefined,
+        itemSpacing: undefined,
+        aspectRatioList: displayedImages.slice(1, 5).map(value => value.aspectRatio),
+        targetRowHeightTolerance: undefined,
+        children: displayedImages.slice(1, 5).map(value => { var _a; return react_1.default.createElement("img", { src: (_a = value.webp) !== null && _a !== void 0 ? _a : value.src }); })
+    },
+};
+exports.Divs = {
+    name: "Divs Only",
+    args: {
+        width: 1920,
+        showWidows: true,
+        targetRowHeight: undefined,
+        rowSpacing: undefined,
+        itemSpacing: undefined,
+        aspectRatioList: displayedImages.slice(1, 5).map(value => value.aspectRatio),
+        targetRowHeightTolerance: undefined,
+        children: displayedImages.slice(1, 5).map(value => react_1.default.createElement(react_loading_skeleton_1.default, { style: { aspectRatio: value.aspectRatio } }))
+    },
+};
+exports.Single = {
+    name: "Single Elements",
+    args: {
+        children: [react_1.default.createElement("img", { src: 'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp' })],
+        width: 1920,
+        showWidows: true,
+        targetRowHeight: undefined,
+        rowSpacing: undefined,
+        itemSpacing: undefined,
+        targetRowHeightTolerance: undefined,
+        aspectRatioList: [1],
+    }
+};
+exports.SingleWithDiv = {
+    name: "Complex Single Element",
+    args: {
+        children: [react_1.default.createElement("div", null,
+                react_1.default.createElement("img", { src: 'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp' }))],
+        width: 1920,
+        showWidows: true,
+        targetRowHeight: undefined,
+        rowSpacing: undefined,
+        itemSpacing: undefined,
+        targetRowHeightTolerance: undefined,
+        aspectRatioList: [1],
+    }
+};

package/dist/stories/JustifiedLayout.stories.d.ts

@@ -1,6 +1,5 @@
 import type { StoryObj } from "@storybook/react";
 import React from "react";
-import 'react-loading-skeleton/dist/skeleton.css';
 declare const meta: {
     title: string;
     component: ({ aspectRatioList, rowSpacing, width, itemSpacing, targetRowHeight, targetRowHeightTolerance, children }: import("../components/TSJustifiedLayout").TSJustifiedLayoutProps) => React.JSX.Element;