@shipfox/react-ui 0.25.0 → 0.27.0

package/dist/components/dynamic-item/dynamic-item.stories.js

@@ -1,385 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../components/button/button.js';
-import { ItemTitle } from '../../components/item/index.js';
-import { MovingBorder } from '../../components/moving-border/index.js';
-import { cn } from '../../utils/cn.js';
-import illustration1 from '../../assets/illustration-1.svg';
-import illustration2 from '../../assets/illustration-2.svg';
-import illustrationBg from '../../assets/illustration-gradient.svg';
-import { Avatar } from '../avatar/avatar.js';
-import { AvatarGroup, AvatarGroupTooltip } from '../avatar/avatar-group.js';
-import { Icon } from '../icon/icon.js';
-import { DynamicItem } from './dynamic-item.js';
-const meta = {
-    title: 'Components/DynamicItem',
-    component: DynamicItem,
-    tags: [
-        'autodocs'
-    ]
-};
-export default meta;
-export const OrganizationItem = {
-    args: {},
-    render: ()=>/*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-16 w-full max-w-476",
-            children: [
-                /*#__PURE__*/ _jsx(DynamicItem, {
-                    variant: "default",
-                    leftElement: /*#__PURE__*/ _jsx(Avatar, {
-                        content: "logo",
-                        logoName: "slack",
-                        radius: "rounded",
-                        size: "xl"
-                    }),
-                    title: "Slack",
-                    description: "3 members",
-                    rightElement: /*#__PURE__*/ _jsxs(AvatarGroup, {
-                        size: "md",
-                        children: [
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "John Doe",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "John Doe"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Jane Smith",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Jane Smith"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Bob Johnson",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Bob Johnson"
-                                })
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ _jsx(DynamicItem, {
-                    variant: "default",
-                    leftElement: /*#__PURE__*/ _jsx(Avatar, {
-                        content: "logo",
-                        logoName: "stripe",
-                        radius: "rounded",
-                        size: "xl"
-                    }),
-                    title: "Stripe",
-                    description: "2 members",
-                    rightElement: /*#__PURE__*/ _jsxs(AvatarGroup, {
-                        size: "md",
-                        children: [
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Alice Brown",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Alice Brown"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Carlos Vega",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Carlos Vega"
-                                })
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ _jsx(DynamicItem, {
-                    variant: "default",
-                    leftElement: /*#__PURE__*/ _jsx(Avatar, {
-                        content: "logo",
-                        logoName: "shipfox",
-                        radius: "rounded",
-                        size: "xl"
-                    }),
-                    title: "Shipfox",
-                    description: "9 members",
-                    rightElement: /*#__PURE__*/ _jsxs(AvatarGroup, {
-                        size: "md",
-                        maxVisible: 4,
-                        animateOnHover: true,
-                        children: [
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Linda Tran",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Linda Tran"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Michael Chen",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Michael Chen"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Sarah Williams",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Sarah Williams"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "David Lee",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "David Lee"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Emily Davis",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Emily Davis"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "James Wilson",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "James Wilson"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Olivia Martinez",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Olivia Martinez"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Noah Anderson",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Noah Anderson"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "image",
-                                fallback: "Sophia Taylor",
-                                children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                    children: "Sophia Taylor"
-                                })
-                            })
-                        ]
-                    })
-                })
-            ]
-        })
-};
-export const ConnectGithubAccountItem = {
-    args: {},
-    render: ()=>/*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-16 w-full max-w-476",
-            children: [
-                /*#__PURE__*/ _jsx(DynamicItem, {
-                    variant: "default",
-                    leftElement: /*#__PURE__*/ _jsxs("div", {
-                        className: "relative",
-                        children: [
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "logoPlaceholder",
-                                logoName: "slack",
-                                radius: "full",
-                                size: "lg"
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "logoPlaceholder",
-                                logoName: "github",
-                                radius: "full",
-                                size: "2xs",
-                                logoClassName: "p-0",
-                                className: "absolute bottom-0 left-27"
-                            })
-                        ]
-                    }),
-                    title: "Slack",
-                    description: "Connect Github organization",
-                    rightElement: /*#__PURE__*/ _jsx(Button, {
-                        variant: "primary",
-                        size: "sm",
-                        children: "Connect"
-                    })
-                }),
-                /*#__PURE__*/ _jsx(DynamicItem, {
-                    variant: "default",
-                    leftElement: /*#__PURE__*/ _jsxs("div", {
-                        className: "relative",
-                        children: [
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "logoPlaceholder",
-                                logoName: "slack",
-                                radius: "full",
-                                size: "lg"
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "logo",
-                                logoName: "github",
-                                radius: "full",
-                                size: "2xs",
-                                logoClassName: "p-0",
-                                className: "absolute bottom-0 left-27"
-                            })
-                        ]
-                    }),
-                    title: "Slack",
-                    description: /*#__PURE__*/ _jsxs("p", {
-                        className: "text-xs leading-20 text-tag-warning-icon inline-flex items-center gap-2",
-                        children: [
-                            "Personal account (kyle-nguyen)",
-                            /*#__PURE__*/ _jsx(Icon, {
-                                name: "info",
-                                size: "sm",
-                                className: "shrink-0 size-16 text-tag-warning-icon"
-                            })
-                        ]
-                    }),
-                    rightElement: /*#__PURE__*/ _jsx(Button, {
-                        variant: "primary",
-                        size: "sm",
-                        children: "Change account"
-                    })
-                }),
-                /*#__PURE__*/ _jsx(DynamicItem, {
-                    variant: "default",
-                    leftElement: /*#__PURE__*/ _jsxs("div", {
-                        className: "relative",
-                        children: [
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "logoPlaceholder",
-                                logoName: "slack",
-                                radius: "full",
-                                size: "lg"
-                            }),
-                            /*#__PURE__*/ _jsx(Avatar, {
-                                content: "logo",
-                                logoName: "github",
-                                radius: "full",
-                                size: "2xs",
-                                logoClassName: "p-0",
-                                className: "absolute bottom-0 left-27"
-                            })
-                        ]
-                    }),
-                    title: "Slack",
-                    description: "Organization (slack-github)",
-                    rightElement: /*#__PURE__*/ _jsx(Button, {
-                        variant: "secondary",
-                        size: "sm",
-                        children: "Change account"
-                    })
-                })
-            ]
-        })
-};
-export const WithCustomElementsItem = {
-    args: {},
-    render: ()=>{
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-16 w-full max-w-672",
-            children: [
-                /*#__PURE__*/ _jsx(DynamicItem, {
-                    variant: "default",
-                    leftElement: /*#__PURE__*/ _jsx("div", {
-                        className: "flex shrink-0 items-center justify-center text-tag-success-icon",
-                        children: /*#__PURE__*/ _jsx(Icon, {
-                            name: "checkCircleSolid",
-                            size: "sm"
-                        })
-                    }),
-                    title: "Give access to your Github organizations",
-                    description: "We'll use this permission to sync your organization's.",
-                    action: /*#__PURE__*/ _jsxs("div", {
-                        className: "flex gap-8 mx-auto sm:mx-0",
-                        children: [
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "primary",
-                                size: "sm",
-                                children: "Github access"
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "transparentMuted",
-                                size: "sm",
-                                children: "Skip for now"
-                            })
-                        ]
-                    }),
-                    rightElement: /*#__PURE__*/ _jsx("img", {
-                        src: illustration1,
-                        alt: "illustration-1",
-                        className: "hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 -translate-x-46 w-fit object-contain"
-                    })
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: "relative",
-                    children: [
-                        /*#__PURE__*/ _jsx("img", {
-                            src: illustration2,
-                            alt: "illustration-2",
-                            className: "hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50"
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: cn('relative overflow-hidden bg-transparent p-1 rounded-8'),
-                            children: [
-                                /*#__PURE__*/ _jsx("div", {
-                                    className: "absolute inset-0",
-                                    style: {
-                                        borderRadius: 'calc(0.5rem * 0.96)'
-                                    },
-                                    children: /*#__PURE__*/ _jsx(MovingBorder, {
-                                        duration: 6000,
-                                        rx: "30%",
-                                        ry: "30%",
-                                        children: /*#__PURE__*/ _jsx("div", {
-                                            className: "h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]"
-                                        })
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx("div", {
-                                    className: "relative",
-                                    style: {
-                                        borderRadius: 'calc(0.5rem * 0.96)'
-                                    },
-                                    children: /*#__PURE__*/ _jsx(DynamicItem, {
-                                        variant: "default",
-                                        title: /*#__PURE__*/ _jsxs("div", {
-                                            className: "flex items-center gap-6",
-                                            children: [
-                                                /*#__PURE__*/ _jsx("span", {
-                                                    className: "flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16",
-                                                    children: /*#__PURE__*/ _jsx(Icon, {
-                                                        name: "money",
-                                                        size: "sm",
-                                                        color: "var(--foreground-neutral-subtle, #a1a1aa)"
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsx(ItemTitle, {
-                                                    children: "6000 free credits/month to run your jobs"
-                                                })
-                                            ]
-                                        }),
-                                        description: "~500 builds/month. No payment required.",
-                                        rightElement: /*#__PURE__*/ _jsx("img", {
-                                            src: illustrationBg,
-                                            alt: "illustration-bg",
-                                            className: "hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105"
-                                        })
-                                    })
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
-        });
-    }
-};
-
-//# sourceMappingURL=dynamic-item.stories.js.map

package/dist/components/empty-state/empty-state.stories.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { EmptyState } from './empty-state.js';
-const meta = {
-    title: 'Components/EmptyState',
-    component: EmptyState,
-    tags: [
-        'autodocs'
-    ],
-    parameters: {
-        layout: 'centered'
-    }
-};
-export default meta;
-export const Default = {
-    render: (args)=>/*#__PURE__*/ _jsx("div", {
-            className: "w-400",
-            children: /*#__PURE__*/ _jsx(EmptyState, {
-                ...args
-            })
-        }),
-    args: {}
-};
-export const CustomContent = {
-    render: (args)=>/*#__PURE__*/ _jsx("div", {
-            className: "w-400",
-            children: /*#__PURE__*/ _jsx(EmptyState, {
-                ...args
-            })
-        }),
-    args: {
-        icon: 'shipfox',
-        title: 'No jobs yet',
-        description: 'Import past runs or start a runner.'
-    }
-};
-export const Compact = {
-    render: (args)=>/*#__PURE__*/ _jsx("div", {
-            className: "w-400 h-200 relative",
-            children: /*#__PURE__*/ _jsx(EmptyState, {
-                ...args
-            })
-        }),
-    args: {
-        icon: 'lineChartLine',
-        title: 'Nothing here yet.',
-        variant: 'compact'
-    }
-};
-export const NoDescription = {
-    render: (args)=>/*#__PURE__*/ _jsx("div", {
-            className: "w-400",
-            children: /*#__PURE__*/ _jsx(EmptyState, {
-                ...args
-            })
-        }),
-    args: {
-        title: 'No data available',
-        description: undefined
-    }
-};
-export const NoTitle = {
-    render: (args)=>/*#__PURE__*/ _jsx("div", {
-            className: "w-400",
-            children: /*#__PURE__*/ _jsx(EmptyState, {
-                ...args
-            })
-        }),
-    args: {
-        title: undefined,
-        description: 'This is a description without a title.'
-    }
-};
-
-//# sourceMappingURL=empty-state.stories.js.map