@shipfox/react-ui 0.25.0 → 0.27.0

package/dist/components/form/form.stories.js

@@ -1,587 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { argosScreenshot } from '@argos-ci/storybook/vitest';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Button } from '../../components/button/index.js';
-import { Checkbox, CheckboxLabel, CheckboxLinks } from '../../components/checkbox/index.js';
-import { Input } from '../../components/input/index.js';
-import { Textarea } from '../../components/textarea/index.js';
-import { Code, Header } from '../../components/typography/index.js';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './form.js';
-const meta = {
-    title: 'Components/Form',
-    tags: [
-        'autodocs'
-    ]
-};
-export default meta;
-const basicFormSchema = z.object({
-    username: z.string().min(3, 'Username must be at least 3 characters'),
-    email: z.string().email('Invalid email address')
-});
-function BasicFormExample() {
-    const form = useForm({
-        resolver: zodResolver(basicFormSchema),
-        defaultValues: {
-            username: '',
-            email: ''
-        }
-    });
-    function onSubmit(data) {
-        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
-        console.log(data);
-    }
-    return /*#__PURE__*/ _jsx(Form, {
-        ...form,
-        children: /*#__PURE__*/ _jsxs("form", {
-            onSubmit: form.handleSubmit(onSubmit),
-            className: "space-y-8 w-full max-w-md",
-            children: [
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "username",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Username"
-                                }),
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Input, {
-                                        placeholder: "shadcn",
-                                        ...field
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormDescription, {
-                                    children: "This is your public display name."
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "email",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Email"
-                                }),
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Input, {
-                                        type: "email",
-                                        placeholder: "email@example.com",
-                                        ...field
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormDescription, {
-                                    children: "We'll never share your email."
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(Button, {
-                    type: "submit",
-                    children: "Submit"
-                })
-            ]
-        })
-    });
-}
-export const Basic = {
-    render: ()=>/*#__PURE__*/ _jsx(BasicFormExample, {}),
-    play: async (context)=>{
-        await new Promise((resolve)=>setTimeout(resolve, 100));
-        await argosScreenshot(context, 'Form Basic');
-    }
-};
-const componentsFormSchema = z.object({
-    example: z.string().min(1, 'This field is required'),
-    exampleTextarea: z.string().min(1, 'This field is required')
-});
-function FormComponentsExample() {
-    const form = useForm({
-        resolver: zodResolver(componentsFormSchema),
-        defaultValues: {
-            example: '',
-            exampleTextarea: ''
-        }
-    });
-    return /*#__PURE__*/ _jsx(Form, {
-        ...form,
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-32 w-full max-w-md",
-            children: [
-                /*#__PURE__*/ _jsxs("div", {
-                    className: "flex flex-col gap-16",
-                    children: [
-                        /*#__PURE__*/ _jsx(Header, {
-                            variant: "h3",
-                            children: "Form Components"
-                        }),
-                        /*#__PURE__*/ _jsx(Code, {
-                            variant: "label",
-                            className: "text-foreground-neutral-subtle",
-                            children: "Individual form components work together within FormField"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs("form", {
-                    className: "space-y-8",
-                    children: [
-                        /*#__PURE__*/ _jsx(FormField, {
-                            control: form.control,
-                            name: "example",
-                            render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx(FormLabel, {
-                                            children: "Form Label"
-                                        }),
-                                        /*#__PURE__*/ _jsx(FormControl, {
-                                            children: /*#__PURE__*/ _jsx(Input, {
-                                                placeholder: "Form Control with Input",
-                                                ...field
-                                            })
-                                        }),
-                                        /*#__PURE__*/ _jsx(FormDescription, {
-                                            children: "This is a form description."
-                                        }),
-                                        /*#__PURE__*/ _jsx(FormMessage, {})
-                                    ]
-                                })
-                        }),
-                        /*#__PURE__*/ _jsx(FormField, {
-                            control: form.control,
-                            name: "exampleTextarea",
-                            render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx(FormLabel, {
-                                            children: "Form Label"
-                                        }),
-                                        /*#__PURE__*/ _jsx(FormControl, {
-                                            children: /*#__PURE__*/ _jsx(Textarea, {
-                                                placeholder: "Form Control with Textarea",
-                                                ...field
-                                            })
-                                        }),
-                                        /*#__PURE__*/ _jsx(FormDescription, {
-                                            children: "This is a form description."
-                                        }),
-                                        /*#__PURE__*/ _jsx(FormMessage, {})
-                                    ]
-                                })
-                        })
-                    ]
-                })
-            ]
-        })
-    });
-}
-export const Components = {
-    render: ()=>/*#__PURE__*/ _jsx(FormComponentsExample, {})
-};
-const checkboxFormSchema = z.object({
-    username: z.string().min(3, 'Username must be at least 3 characters'),
-    email: z.string().email('Invalid email address'),
-    newsletter: z.boolean(),
-    notifications: z.boolean()
-});
-function FormWithCheckboxExample() {
-    const form = useForm({
-        resolver: zodResolver(checkboxFormSchema),
-        defaultValues: {
-            username: '',
-            email: '',
-            newsletter: false,
-            notifications: false
-        }
-    });
-    function onSubmit(data) {
-        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
-        console.log(data);
-    }
-    return /*#__PURE__*/ _jsx(Form, {
-        ...form,
-        children: /*#__PURE__*/ _jsxs("form", {
-            onSubmit: form.handleSubmit(onSubmit),
-            className: "space-y-8 w-full max-w-md",
-            children: [
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "username",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Username"
-                                }),
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Input, {
-                                        placeholder: "shadcn",
-                                        ...field
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormDescription, {
-                                    children: "This is your public display name."
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "email",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Email"
-                                }),
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Input, {
-                                        type: "email",
-                                        placeholder: "email@example.com",
-                                        ...field
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormDescription, {
-                                    children: "We'll never share your email."
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "newsletter",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            className: "flex flex-row items-center gap-8 pt-4",
-                            children: [
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Checkbox, {
-                                        checked: field.value,
-                                        onCheckedChange: field.onChange
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Subscribe to newsletter"
-                                })
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "notifications",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            className: "flex flex-row items-center gap-8 pt-4 pb-8",
-                            children: [
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Checkbox, {
-                                        checked: field.value,
-                                        onCheckedChange: field.onChange
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Enable notifications"
-                                })
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(Button, {
-                    type: "submit",
-                    children: "Submit"
-                })
-            ]
-        })
-    });
-}
-export const WithCheckbox = {
-    render: ()=>/*#__PURE__*/ _jsx(FormWithCheckboxExample, {})
-};
-const checkboxLabelSchema = z.object({
-    username: z.string().min(1, 'Username is required'),
-    email: z.string().email('Invalid email address'),
-    terms: z.boolean().refine((val)=>val === true, {
-        message: 'You must accept the terms and conditions'
-    }),
-    marketing: z.boolean()
-});
-function FormWithCheckboxLabelExample() {
-    const form = useForm({
-        resolver: zodResolver(checkboxLabelSchema),
-        defaultValues: {
-            username: '',
-            email: '',
-            terms: false,
-            marketing: false
-        }
-    });
-    function onSubmit(data) {
-        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
-        console.log(data);
-    }
-    return /*#__PURE__*/ _jsx(Form, {
-        ...form,
-        children: /*#__PURE__*/ _jsxs("form", {
-            onSubmit: form.handleSubmit(onSubmit),
-            className: "space-y-8 w-full max-w-md",
-            children: [
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "username",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Username"
-                                }),
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Input, {
-                                        placeholder: "shadcn",
-                                        ...field
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "email",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Email"
-                                }),
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Input, {
-                                        type: "email",
-                                        placeholder: "email@example.com",
-                                        ...field
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "terms",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(CheckboxLabel, {
-                                        label: "I agree to the terms and conditions",
-                                        description: "By checking this box, you agree to our terms of service and privacy policy.",
-                                        checked: field.value,
-                                        onCheckedChange: field.onChange
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "marketing",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(CheckboxLabel, {
-                                        label: "I want to receive marketing emails",
-                                        description: "Stay updated with our latest products and offers.",
-                                        optional: true,
-                                        checked: field.value,
-                                        onCheckedChange: field.onChange
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(Button, {
-                    type: "submit",
-                    children: "Submit"
-                })
-            ]
-        })
-    });
-}
-export const WithCheckboxLabel = {
-    render: ()=>/*#__PURE__*/ _jsx(FormWithCheckboxLabelExample, {})
-};
-const checkboxLinksSchema = z.object({
-    username: z.string().min(1, 'Username is required'),
-    email: z.string().email('Invalid email address'),
-    acceptPolicies: z.boolean().refine((val)=>val === true, {
-        message: 'You must accept the policies to continue'
-    })
-});
-function FormWithCheckboxLinksExample() {
-    const form = useForm({
-        resolver: zodResolver(checkboxLinksSchema),
-        defaultValues: {
-            username: '',
-            email: '',
-            acceptPolicies: false
-        }
-    });
-    function onSubmit(data) {
-        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
-        console.log(data);
-    }
-    return /*#__PURE__*/ _jsx(Form, {
-        ...form,
-        children: /*#__PURE__*/ _jsxs("form", {
-            onSubmit: form.handleSubmit(onSubmit),
-            className: "space-y-8 w-full max-w-md",
-            children: [
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "username",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Username"
-                                }),
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Input, {
-                                        placeholder: "shadcn",
-                                        ...field
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "email",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Email"
-                                }),
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Input, {
-                                        type: "email",
-                                        placeholder: "email@example.com",
-                                        ...field
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "acceptPolicies",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(CheckboxLinks, {
-                                        label: "Accept policies",
-                                        links: [
-                                            {
-                                                label: 'Terms of use',
-                                                href: '#'
-                                            },
-                                            {
-                                                label: 'Privacy Policy',
-                                                href: '#'
-                                            }
-                                        ],
-                                        checked: field.value,
-                                        onCheckedChange: field.onChange
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(Button, {
-                    type: "submit",
-                    children: "Submit"
-                })
-            ]
-        })
-    });
-}
-export const WithCheckboxLinks = {
-    render: ()=>/*#__PURE__*/ _jsx(FormWithCheckboxLinksExample, {})
-};
-const checkboxLabelBorderSchema = z.object({
-    plan: z.string().min(1, 'Plan name is required'),
-    newsletter: z.boolean()
-});
-function FormWithCheckboxLabelBorderExample() {
-    const form = useForm({
-        resolver: zodResolver(checkboxLabelBorderSchema),
-        defaultValues: {
-            plan: '',
-            newsletter: false
-        }
-    });
-    function onSubmit(data) {
-        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
-        console.log(data);
-    }
-    return /*#__PURE__*/ _jsx(Form, {
-        ...form,
-        children: /*#__PURE__*/ _jsxs("form", {
-            onSubmit: form.handleSubmit(onSubmit),
-            className: "space-y-8 w-full max-w-md",
-            children: [
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "plan",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormLabel, {
-                                    children: "Select a plan"
-                                }),
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(Input, {
-                                        placeholder: "Enter plan name",
-                                        ...field
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormDescription, {
-                                    children: "Choose the plan that best fits your needs."
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(FormField, {
-                    control: form.control,
-                    name: "newsletter",
-                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                            children: [
-                                /*#__PURE__*/ _jsx(FormControl, {
-                                    children: /*#__PURE__*/ _jsx(CheckboxLabel, {
-                                        label: "Subscribe to our newsletter",
-                                        description: "Get weekly updates, tips, and exclusive content delivered to your inbox.",
-                                        optional: true,
-                                        showInfoIcon: true,
-                                        border: true,
-                                        checked: field.value,
-                                        onCheckedChange: field.onChange
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(FormMessage, {})
-                            ]
-                        })
-                }),
-                /*#__PURE__*/ _jsx(Button, {
-                    type: "submit",
-                    className: "mt-4",
-                    children: "Submit"
-                })
-            ]
-        })
-    });
-}
-export const WithCheckboxLabelBorder = {
-    render: ()=>/*#__PURE__*/ _jsx(FormWithCheckboxLabelBorderExample, {})
-};
-
-//# sourceMappingURL=form.stories.js.map

package/dist/components/icon/icon.stories.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Code } from '../../components/typography/index.js';
-import { Icon, iconNames } from './icon.js';
-const meta = {
-    title: 'Components/Icon',
-    component: Icon
-};
-export default meta;
-export const Gallery = {
-    args: {
-        name: 'google'
-    },
-    render: (args)=>/*#__PURE__*/ _jsx("div", {
-            className: "flex flex-col gap-16",
-            children: /*#__PURE__*/ _jsx("div", {
-                className: "grid grid-cols-8 gap-16",
-                children: iconNames.toSorted().map((name)=>/*#__PURE__*/ _jsxs("div", {
-                        className: "flex flex-col items-center gap-4",
-                        children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                className: "flex items-center justify-center w-20 h-20",
-                                children: /*#__PURE__*/ _jsx(Icon, {
-                                    ...args,
-                                    name: name
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Code, {
-                                variant: "label",
-                                className: "text-foreground-neutral-subtle",
-                                children: name
-                            })
-                        ]
-                    }, name))
-            })
-        })
-};
-
-//# sourceMappingURL=icon.stories.js.map