@heymantle/litho 0.0.2 → 0.0.4

package/dist/esm/stories/Thumbnail.stories.js

@@ -0,0 +1,806 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transformStorySource } from "../utilities/transformers.js";
+import Thumbnail from "../components/Thumbnail.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import VerticalStack from "../components/VerticalStack.js";
+import Grid from "../components/Grid.js";
+import Box from "../components/Box.js";
+import { useState } from "react";
+export default {
+    title: 'Litho/Thumbnail',
+    component: Thumbnail,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Thumbnail component that displays an image or a placeholder icon. Thumbnails are used to show preview images in a consistent format with various sizing options."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        size: 'medium',
+        alt: 'Thumbnail image'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        src: {
+            control: 'text',
+            description: 'Image source URL'
+        },
+        alt: {
+            control: 'text',
+            description: 'Alternative text for the image'
+        },
+        size: {
+            control: 'select',
+            options: [
+                'small',
+                'medium',
+                'large'
+            ],
+            description: 'Size of the thumbnail'
+        },
+        skeleton: {
+            control: 'boolean',
+            description: 'Whether to show skeleton loader'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsx(Thumbnail, _object_spread({}, args));
+    }
+};
+export var WithImage = {
+    args: {
+        src: 'https://picsum.photos/200/200?random=1',
+        alt: 'Sample image'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Thumbnail displaying an actual image.'
+            }
+        }
+    }
+};
+export var Placeholder = {
+    args: {
+        alt: 'No image available'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Thumbnail showing placeholder icon when no image is provided.'
+            }
+        }
+    }
+};
+export var Sizes = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "4",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Thumbnail, {
+                            size: "small",
+                            src: "https://picsum.photos/200/200?random=2",
+                            alt: "Small thumbnail"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "Small"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Thumbnail, {
+                            size: "medium",
+                            src: "https://picsum.photos/200/200?random=3",
+                            alt: "Medium thumbnail"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "Medium"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Thumbnail, {
+                            size: "large",
+                            src: "https://picsum.photos/200/200?random=4",
+                            alt: "Large thumbnail"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "Large"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different sizes of thumbnails.'
+            }
+        }
+    }
+};
+export var CustomSize = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "4",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Thumbnail, {
+                            size: 32,
+                            src: "https://picsum.photos/200/200?random=5",
+                            alt: "32px thumbnail"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "32px"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Thumbnail, {
+                            size: 64,
+                            src: "https://picsum.photos/200/200?random=6",
+                            alt: "64px thumbnail"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "64px"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Thumbnail, {
+                            size: 80,
+                            src: "https://picsum.photos/200/200?random=7",
+                            alt: "80px thumbnail"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "80px"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Thumbnail, {
+                            size: 120,
+                            src: "https://picsum.photos/200/200?random=8",
+                            alt: "120px thumbnail"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "caption",
+                            children: "120px"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Thumbnails with custom pixel sizes.'
+            }
+        }
+    }
+};
+export var SkeletonState = {
+    args: {
+        skeleton: true,
+        size: 'medium'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Thumbnail in skeleton loading state.'
+            }
+        }
+    }
+};
+export var ProductGallery = {
+    render: function() {
+        var products = [
+            {
+                id: 1,
+                name: 'Product A',
+                image: 'https://picsum.photos/200/200?random=10'
+            },
+            {
+                id: 2,
+                name: 'Product B',
+                image: 'https://picsum.photos/200/200?random=11'
+            },
+            {
+                id: 3,
+                name: 'Product C',
+                image: 'https://picsum.photos/200/200?random=12'
+            },
+            {
+                id: 4,
+                name: 'Product D',
+                image: 'https://picsum.photos/200/200?random=13'
+            },
+            {
+                id: 5,
+                name: 'Product E',
+                image: null
+            },
+            {
+                id: 6,
+                name: 'Product F',
+                image: 'https://picsum.photos/200/200?random=14'
+            }
+        ];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Product Gallery",
+            padded: true,
+            children: /*#__PURE__*/ _jsx(Grid, {
+                columns: "auto-fill",
+                gap: "4",
+                minItemWidth: "120px",
+                children: products.map(function(product) {
+                    return /*#__PURE__*/ _jsx(Box, {
+                        padding: "4",
+                        border: "default",
+                        borderRadius: "lg",
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "2",
+                            inlineAlign: "center",
+                            children: [
+                                /*#__PURE__*/ _jsx(Thumbnail, {
+                                    size: "large",
+                                    src: product.image,
+                                    alt: product.name
+                                }),
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "bodySm",
+                                    textAlign: "center",
+                                    children: product.name
+                                })
+                            ]
+                        })
+                    }, product.id);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Product gallery showing thumbnails with and without images.'
+            }
+        }
+    }
+};
+export var UserAvatars = {
+    render: function() {
+        var users = [
+            {
+                id: 1,
+                name: 'Alice Johnson',
+                avatar: 'https://picsum.photos/200/200?random=15'
+            },
+            {
+                id: 2,
+                name: 'Bob Smith',
+                avatar: 'https://picsum.photos/200/200?random=16'
+            },
+            {
+                id: 3,
+                name: 'Carol Davis',
+                avatar: null
+            },
+            {
+                id: 4,
+                name: 'David Wilson',
+                avatar: 'https://picsum.photos/200/200?random=17'
+            },
+            {
+                id: 5,
+                name: 'Eve Brown',
+                avatar: 'https://picsum.photos/200/200?random=18'
+            }
+        ];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Team Members",
+            padded: true,
+            children: /*#__PURE__*/ _jsx(VerticalStack, {
+                gap: "4",
+                children: users.map(function(user) {
+                    return /*#__PURE__*/ _jsx(Box, {
+                        padding: "3",
+                        border: "default",
+                        borderRadius: "lg",
+                        children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                            gap: "4",
+                            blockAlign: "center",
+                            children: [
+                                /*#__PURE__*/ _jsx(Thumbnail, {
+                                    size: "medium",
+                                    src: user.avatar,
+                                    alt: "".concat(user.name, " avatar")
+                                }),
+                                /*#__PURE__*/ _jsx(Text, {
+                                    children: user.name
+                                })
+                            ]
+                        })
+                    }, user.id);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'User list with avatar thumbnails.'
+            }
+        }
+    }
+};
+export var FilePreview = {
+    render: function() {
+        var files = [
+            {
+                name: 'document.pdf',
+                type: 'pdf',
+                thumbnail: null
+            },
+            {
+                name: 'presentation.pptx',
+                type: 'presentation',
+                thumbnail: null
+            },
+            {
+                name: 'image1.jpg',
+                type: 'image',
+                thumbnail: 'https://picsum.photos/200/200?random=19'
+            },
+            {
+                name: 'image2.png',
+                type: 'image',
+                thumbnail: 'https://picsum.photos/200/200?random=20'
+            },
+            {
+                name: 'video.mp4',
+                type: 'video',
+                thumbnail: 'https://picsum.photos/200/200?random=21'
+            },
+            {
+                name: 'spreadsheet.xlsx',
+                type: 'excel',
+                thumbnail: null
+            }
+        ];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "File Browser",
+            padded: true,
+            children: /*#__PURE__*/ _jsx("div", {
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+                    gap: '1rem'
+                },
+                children: files.map(function(file, index) {
+                    return /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            gap: '0.5rem',
+                            padding: '1rem',
+                            border: '1px solid #e1e1e1',
+                            borderRadius: '8px',
+                            cursor: 'pointer'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Thumbnail, {
+                                size: 60,
+                                src: file.thumbnail,
+                                alt: file.name
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                style: {
+                                    fontSize: '0.8rem',
+                                    textAlign: 'center',
+                                    wordBreak: 'break-word'
+                                },
+                                children: file.name
+                            })
+                        ]
+                    }, index);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'File browser with thumbnails for different file types.'
+            }
+        }
+    }
+};
+export var LoadingStates = {
+    render: function() {
+        var _useState = _sliced_to_array(useState({
+            image1: false,
+            image2: false,
+            image3: false
+        }), 2), loadingStates = _useState[0], setLoadingStates = _useState[1];
+        var toggleLoading = function(imageKey) {
+            setLoadingStates(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, imageKey, !prev[imageKey]));
+            });
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Image Loading Demo",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "8",
+                children: [
+                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                onClick: function() {
+                                    return toggleLoading('image1');
+                                },
+                                children: "Toggle Image 1"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                onClick: function() {
+                                    return toggleLoading('image2');
+                                },
+                                children: "Toggle Image 2"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                onClick: function() {
+                                    return toggleLoading('image3');
+                                },
+                                children: "Toggle Image 3"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        gap: "4",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "2",
+                                inlineAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Thumbnail, {
+                                        size: "large",
+                                        src: loadingStates.image1 ? null : 'https://picsum.photos/200/200?random=22',
+                                        alt: "Image 1",
+                                        skeleton: loadingStates.image1
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "caption",
+                                        children: loadingStates.image1 ? 'Loading...' : 'Loaded'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "2",
+                                inlineAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Thumbnail, {
+                                        size: "large",
+                                        src: loadingStates.image2 ? null : 'https://picsum.photos/200/200?random=23',
+                                        alt: "Image 2",
+                                        skeleton: loadingStates.image2
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "caption",
+                                        children: loadingStates.image2 ? 'Loading...' : 'Loaded'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "2",
+                                inlineAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Thumbnail, {
+                                        size: "large",
+                                        src: loadingStates.image3 ? null : 'https://picsum.photos/200/200?random=24',
+                                        alt: "Image 3",
+                                        skeleton: loadingStates.image3
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "caption",
+                                        children: loadingStates.image3 ? 'Loading...' : 'Loaded'
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive demo showing thumbnail loading states.'
+            }
+        }
+    }
+};
+export var MediaLibrary = {
+    render: function() {
+        var media = [
+            {
+                id: 1,
+                name: 'Sunset Beach',
+                src: 'https://picsum.photos/200/200?random=25',
+                type: 'image'
+            },
+            {
+                id: 2,
+                name: 'Mountain View',
+                src: 'https://picsum.photos/200/200?random=26',
+                type: 'image'
+            },
+            {
+                id: 3,
+                name: 'City Lights',
+                src: 'https://picsum.photos/200/200?random=27',
+                type: 'image'
+            },
+            {
+                id: 4,
+                name: 'Ocean Waves',
+                src: 'https://picsum.photos/200/200?random=28',
+                type: 'video'
+            },
+            {
+                id: 5,
+                name: 'Forest Path',
+                src: null,
+                type: 'image'
+            },
+            {
+                id: 6,
+                name: 'Desert Landscape',
+                src: 'https://picsum.photos/200/200?random=29',
+                type: 'image'
+            },
+            {
+                id: 7,
+                name: 'Urban Architecture',
+                src: 'https://picsum.photos/200/200?random=30',
+                type: 'image'
+            },
+            {
+                id: 8,
+                name: 'Wildlife Documentary',
+                src: null,
+                type: 'video'
+            }
+        ];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Media Library",
+            padded: true,
+            children: /*#__PURE__*/ _jsx("div", {
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+                    gap: '1rem'
+                },
+                children: media.map(function(item) {
+                    return /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            position: 'relative',
+                            border: '1px solid #e1e1e1',
+                            borderRadius: '8px',
+                            overflow: 'hidden',
+                            cursor: 'pointer',
+                            transition: 'transform 0.2s ease'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    padding: '1rem',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    gap: '0.75rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Thumbnail, {
+                                        size: 80,
+                                        src: item.src,
+                                        alt: item.name
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            textAlign: 'center'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                style: {
+                                                    fontSize: '0.9rem',
+                                                    fontWeight: 'bold'
+                                                },
+                                                children: item.name
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                style: {
+                                                    fontSize: '0.8rem',
+                                                    color: '#666'
+                                                },
+                                                children: item.type
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            item.type === 'video' && /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    position: 'absolute',
+                                    top: '1rem',
+                                    right: '1rem',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                                    color: 'white',
+                                    padding: '0.25rem 0.5rem',
+                                    borderRadius: '4px',
+                                    fontSize: '0.7rem'
+                                },
+                                children: "VIDEO"
+                            })
+                        ]
+                    }, item.id);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Media library with thumbnails for images and videos.'
+            }
+        }
+    }
+};