@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/SkeletonText.stories.js

@@ -0,0 +1,718 @@
+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 _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 Stack from "../components/Stack.js";
+import SkeletonText from "../components/SkeletonText.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import Box from "../components/Box.js";
+import { useState } from "react";
+export default {
+    title: 'Litho/SkeletonText',
+    component: SkeletonText,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A SkeletonText component that displays placeholder text content while data is loading. SkeletonText provides visual hints about content structure and improves perceived performance."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        lines: 3,
+        type: 'body',
+        size: 'md'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        lines: {
+            control: 'number',
+            description: 'Number of skeleton lines to display'
+        },
+        type: {
+            control: 'select',
+            options: [
+                'body',
+                'heading'
+            ],
+            description: 'Type of skeleton text (body or heading)'
+        },
+        size: {
+            control: 'select',
+            options: [
+                'xs',
+                'sm',
+                'md',
+                'lg',
+                'xl'
+            ],
+            description: 'Size of the skeleton text'
+        },
+        width: {
+            control: 'number',
+            description: 'Fixed width percentage for all lines'
+        },
+        fullWidth: {
+            control: 'boolean',
+            description: 'Whether lines should be full width'
+        },
+        align: {
+            control: 'select',
+            options: [
+                'start',
+                'center',
+                'end'
+            ],
+            description: 'Alignment of skeleton lines'
+        },
+        gap: {
+            control: 'select',
+            options: [
+                'small',
+                'medium',
+                'large'
+            ],
+            description: 'Spacing between skeleton lines'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsx(SkeletonText, _object_spread({}, args));
+    }
+};
+export var BodyText = {
+    args: {
+        lines: 4,
+        type: 'body',
+        size: 'md'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Skeleton placeholder for body text content.'
+            }
+        }
+    }
+};
+export var HeadingText = {
+    args: {
+        type: 'heading',
+        size: 'lg'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Skeleton placeholder for heading text (always displays as single line).'
+            }
+        }
+    }
+};
+export var Sizes = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Extra Small"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            size: "xs",
+                            lines: 2
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Small"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            size: "sm",
+                            lines: 2
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Medium"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            size: "md",
+                            lines: 2
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Large"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            size: "lg",
+                            lines: 2
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Extra Large"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            size: "xl",
+                            lines: 2
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different sizes of skeleton text.'
+            }
+        }
+    }
+};
+export var HeadingSizes = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Heading XS"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            type: "heading",
+                            size: "xs"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Heading SM"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            type: "heading",
+                            size: "sm"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Heading MD"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            type: "heading",
+                            size: "md"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Heading LG"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            type: "heading",
+                            size: "lg"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different sizes of skeleton headings.'
+            }
+        }
+    }
+};
+export var WithFixedWidth = {
+    args: {
+        lines: 3,
+        width: 75
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Skeleton text with a fixed width percentage.'
+            }
+        }
+    }
+};
+export var FullWidth = {
+    args: {
+        lines: 4,
+        fullWidth: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Skeleton text with all lines at full width.'
+            }
+        }
+    }
+};
+export var Alignment = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Start Aligned"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            lines: 3,
+                            align: "start"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Center Aligned"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            lines: 3,
+                            align: "center"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "End Aligned"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            lines: 3,
+                            align: "end"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different alignment options for skeleton text.'
+            }
+        }
+    }
+};
+export var GapSizes = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Small Gap"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            lines: 4,
+                            gap: "small"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Medium Gap"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            lines: 4,
+                            gap: "medium"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Large Gap"
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            lines: 4,
+                            gap: "large"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different gap sizes between skeleton lines.'
+            }
+        }
+    }
+};
+export var ArticleLoading = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Article",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "xs",
+                children: [
+                    /*#__PURE__*/ _jsx(SkeletonText, {
+                        type: "heading",
+                        size: "lg"
+                    }),
+                    /*#__PURE__*/ _jsx(SkeletonText, {
+                        lines: 1,
+                        size: "sm",
+                        width: 40
+                    }),
+                    /*#__PURE__*/ _jsx(SkeletonText, {
+                        lines: 5,
+                        gap: "medium"
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        style: {
+                            height: '200px',
+                            backgroundColor: '#f0f0f0',
+                            borderRadius: '8px'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(SkeletonText, {
+                        lines: 3,
+                        gap: "medium"
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Article loading state using skeleton text for different content types.'
+            }
+        }
+    }
+};
+export var ProfileCard = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                horizontal: true,
+                gap: "xs",
+                children: [
+                    /*#__PURE__*/ _jsx(Box, {
+                        style: {
+                            width: '80px',
+                            height: '80px',
+                            backgroundColor: '#f0f0f0',
+                            borderRadius: '50%',
+                            flexShrink: 0
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "xs",
+                        style: {
+                            flex: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(SkeletonText, {
+                                type: "heading",
+                                size: "md",
+                                width: 60
+                            }),
+                            /*#__PURE__*/ _jsx(SkeletonText, {
+                                lines: 2,
+                                size: "sm"
+                            }),
+                            /*#__PURE__*/ _jsx(SkeletonText, {
+                                lines: 1,
+                                size: "xs",
+                                width: 30
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Profile card loading state with avatar and user information skeletons.'
+            }
+        }
+    }
+};
+export var ListLoading = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Items",
+            padded: true,
+            children: /*#__PURE__*/ _jsx(Stack, {
+                gap: "xs",
+                children: [
+                    1,
+                    2,
+                    3,
+                    4,
+                    5
+                ].map(function(item) {
+                    return /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "xs",
+                        style: {
+                            padding: '1rem',
+                            border: '1px solid #e1e1e1',
+                            borderRadius: '8px'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                style: {
+                                    width: '50px',
+                                    height: '50px',
+                                    backgroundColor: '#f0f0f0',
+                                    borderRadius: '4px',
+                                    flexShrink: 0
+                                }
+                            }),
+                            /*#__PURE__*/ _jsxs(Box, {
+                                style: {
+                                    flex: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(SkeletonText, {
+                                        type: "heading",
+                                        size: "sm",
+                                        width: 70
+                                    }),
+                                    /*#__PURE__*/ _jsx(SkeletonText, {
+                                        lines: 2,
+                                        size: "xs",
+                                        gap: "small"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                style: {
+                                    width: '80px',
+                                    height: '20px',
+                                    backgroundColor: '#f0f0f0',
+                                    borderRadius: '4px',
+                                    flexShrink: 0
+                                }
+                            })
+                        ]
+                    }, item);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'List loading state with repeated skeleton items.'
+            }
+        }
+    }
+};
+export var InteractiveExample = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(true), 2), isLoading = _useState[0], setIsLoading = _useState[1];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Content Loading Demo",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockEnd: "1",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        onClick: function() {
+                            return setIsLoading(!isLoading);
+                        },
+                        children: isLoading ? 'Show Content' : 'Show Skeleton'
+                    })
+                }),
+                isLoading ? /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "xs",
+                    children: [
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            type: "heading",
+                            size: "lg",
+                            width: 80
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            lines: 1,
+                            size: "sm",
+                            width: 30
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            lines: 4,
+                            gap: "medium"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            style: {
+                                height: '120px',
+                                backgroundColor: '#f0f0f0',
+                                borderRadius: '8px'
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(SkeletonText, {
+                            lines: 2,
+                            gap: "small"
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingLg",
+                            children: "Understanding Design Systems"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            color: "subdued",
+                            children: "Published on March 15, 2024"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Design systems are comprehensive collections of reusable components, guided by clear standards, that can be assembled together to build any number of applications. They serve as the single source of truth for design and development teams."
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "The benefits of implementing a design system include improved consistency across products, faster development cycles, better collaboration between teams, and reduced maintenance overhead."
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            style: {
+                                height: '120px',
+                                backgroundColor: '#e3f2fd',
+                                borderRadius: '8px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                border: '1px dashed #2196f3'
+                            },
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                color: "subdued",
+                                children: "[Design System Diagram]"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "When building a design system, it's important to start with foundational elements like colors, typography, and spacing before moving on to components and patterns."
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive example showing the transition from skeleton to actual content.'
+            }
+        }
+    }
+};