@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/dist/src/shadcn/components/ui/tabs.stories.js

@@ -1,168 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { action } from "storybook/internal/actions";
-import { Button } from "./button.js";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
-import { Input } from "./input.js";
-import { Label } from "./label.js";
-import { Tabs, TabsAddButton, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
-const meta = {
-    title: "Component/Tabs",
-    argTypes: {
-        variant: {
-            options: [
-                "button",
-                "dashed"
-            ],
-            control: {
-                type: "select"
-            }
-        }
-    }
-};
-export default meta;
-export const Demo = {
-    render: (props)=>/*#__PURE__*/ _jsx("div", {
-            className: "flex w-full max-w-sm flex-col gap-6",
-            children: /*#__PURE__*/ _jsxs(Tabs, {
-                defaultValue: "account",
-                ...props,
-                children: [
-                    /*#__PURE__*/ _jsxs(TabsList, {
-                        children: [
-                            /*#__PURE__*/ _jsx(TabsTrigger, {
-                                value: "account",
-                                children: "Account"
-                            }),
-                            /*#__PURE__*/ _jsx(TabsTrigger, {
-                                value: "password",
-                                children: "Password"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(TabsContent, {
-                        value: "account",
-                        children: /*#__PURE__*/ _jsxs(Card, {
-                            children: [
-                                /*#__PURE__*/ _jsxs(CardHeader, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx(CardTitle, {
-                                            children: "Account"
-                                        }),
-                                        /*#__PURE__*/ _jsx(CardDescription, {
-                                            children: "Make changes to your account here. Click save when you're done."
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs(CardContent, {
-                                    className: "grid gap-6",
-                                    children: [
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            className: "grid gap-3",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Label, {
-                                                    htmlFor: "tabs-demo-name",
-                                                    children: "Name"
-                                                }),
-                                                /*#__PURE__*/ _jsx(Input, {
-                                                    id: "tabs-demo-name",
-                                                    defaultValue: "Pedro Duarte"
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            className: "grid gap-3",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Label, {
-                                                    htmlFor: "tabs-demo-username",
-                                                    children: "Username"
-                                                }),
-                                                /*#__PURE__*/ _jsx(Input, {
-                                                    id: "tabs-demo-username",
-                                                    defaultValue: "@peduarte"
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx(CardFooter, {
-                                    children: /*#__PURE__*/ _jsx(Button, {
-                                        children: "Save changes"
-                                    })
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(TabsContent, {
-                        value: "password",
-                        children: /*#__PURE__*/ _jsxs(Card, {
-                            children: [
-                                /*#__PURE__*/ _jsxs(CardHeader, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx(CardTitle, {
-                                            children: "Password"
-                                        }),
-                                        /*#__PURE__*/ _jsx(CardDescription, {
-                                            children: "Change your password here. After saving, you'll be logged out."
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs(CardContent, {
-                                    className: "grid gap-6",
-                                    children: [
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            className: "grid gap-3",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Label, {
-                                                    htmlFor: "tabs-demo-current",
-                                                    children: "Current password"
-                                                }),
-                                                /*#__PURE__*/ _jsx(Input, {
-                                                    id: "tabs-demo-current",
-                                                    type: "password"
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            className: "grid gap-3",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Label, {
-                                                    htmlFor: "tabs-demo-new",
-                                                    children: "New password"
-                                                }),
-                                                /*#__PURE__*/ _jsx(Input, {
-                                                    id: "tabs-demo-new",
-                                                    type: "password"
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx(CardFooter, {
-                                    children: /*#__PURE__*/ _jsx(Button, {
-                                        children: "Save password"
-                                    })
-                                })
-                            ]
-                        })
-                    })
-                ]
-            })
-        })
-};
-function BrowserTabOnClose(value) {
-    action("onClose")(value);
-}
-function BrowserTabOnClick() {
-    action("onClick")();
-}
-function BrowserTabOnAdd() {
-    action("onAdd")();
-}
-export const Browser = {
-    parameters: {
-        layout: "fullscreen"
-    },
-    render: ()=>/*#__PURE__*/ _jsxs(Tabs, {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import { action } from "storybook/actions";
+import { Tabs, TabsAddButton, TabsContent, TabsList, TabsListDropdown, TabsTrigger } from "./tabs.js";
+function TabsWrapper({ variant = "default" }) {
+    if (variant === "browser") {
+        return /*#__PURE__*/ _jsxs(Tabs, {
             defaultValue: "first",
             variant: "browser",
             children: [
@@ -170,8 +12,8 @@ export const Browser = {
                     children: [
                         /*#__PURE__*/ _jsx(TabsTrigger, {
                             value: "first",
-                            onClick: BrowserTabOnClick,
-                            onClose: BrowserTabOnClose,
+                            onClick: ()=>action("onClick")(),
+                            onClose: (v)=>action("onClose")(v),
                             children: /*#__PURE__*/ _jsxs("span", {
                                 className: "flex items-center gap-1",
                                 children: [
@@ -187,8 +29,8 @@ export const Browser = {
                         }),
                         /*#__PURE__*/ _jsx(TabsTrigger, {
                             value: "second",
-                            onClick: BrowserTabOnClick,
-                            onClose: BrowserTabOnClose,
+                            onClick: ()=>action("onClick")(),
+                            onClose: (v)=>action("onClose")(v),
                             children: /*#__PURE__*/ _jsxs("span", {
                                 className: "flex items-center gap-1",
                                 children: [
@@ -201,28 +43,410 @@ export const Browser = {
                                     })
                                 ]
                             })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(TabsAddButton, {
+                    onClick: ()=>action("onAdd")()
+                }),
+                /*#__PURE__*/ _jsx(TabsContent, {
+                    value: "first",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "p-4",
+                        children: "GET /fhir/Patient content"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(TabsContent, {
+                    value: "second",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "p-4",
+                        children: "POST /fhir content"
+                    })
+                })
+            ]
+        });
+    }
+    if (variant === "secondary") {
+        return /*#__PURE__*/ _jsxs(Tabs, {
+            defaultValue: "tab1",
+            variant: "secondary",
+            children: [
+                /*#__PURE__*/ _jsxs(TabsList, {
+                    children: [
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "tab1",
+                            children: "Tab 1"
                         }),
                         /*#__PURE__*/ _jsx(TabsTrigger, {
-                            value: "third",
-                            onClick: BrowserTabOnClick,
-                            onClose: BrowserTabOnClose,
-                            children: /*#__PURE__*/ _jsxs("span", {
-                                className: "flex items-center gap-1",
+                            value: "tab2",
+                            children: "Tab 2"
+                        }),
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "tab3",
+                            children: "Tab 3"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(TabsContent, {
+                    value: "tab1",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "p-4",
+                        children: "Tab 1 content"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(TabsContent, {
+                    value: "tab2",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "p-4",
+                        children: "Tab 2 content"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(TabsContent, {
+                    value: "tab3",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "p-4",
+                        children: "Tab 3 content"
+                    })
+                })
+            ]
+        });
+    }
+    if (variant === "tertiary") {
+        return /*#__PURE__*/ _jsxs(Tabs, {
+            defaultValue: "tab1",
+            variant: "tertiary",
+            children: [
+                /*#__PURE__*/ _jsxs(TabsList, {
+                    children: [
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "tab1",
+                            children: "Tab 1"
+                        }),
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "tab2",
+                            children: "Tab 2"
+                        }),
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "tab3",
+                            children: "Tab 3"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(TabsContent, {
+                    value: "tab1",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "p-4",
+                        children: "Tab 1 content"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(TabsContent, {
+                    value: "tab2",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "p-4",
+                        children: "Tab 2 content"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(TabsContent, {
+                    value: "tab3",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "p-4",
+                        children: "Tab 3 content"
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Tabs, {
+        defaultValue: "tab1",
+        children: [
+            /*#__PURE__*/ _jsxs(TabsList, {
+                children: [
+                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                        value: "tab1",
+                        children: "Tab 1"
+                    }),
+                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                        value: "tab2",
+                        children: "Tab 2"
+                    }),
+                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                        value: "tab3",
+                        children: "Tab 3"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(TabsContent, {
+                value: "tab1",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "p-4",
+                    children: "Tab 1 content"
+                })
+            }),
+            /*#__PURE__*/ _jsx(TabsContent, {
+                value: "tab2",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "p-4",
+                    children: "Tab 2 content"
+                })
+            }),
+            /*#__PURE__*/ _jsx(TabsContent, {
+                value: "tab3",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "p-4",
+                    children: "Tab 3 content"
+                })
+            })
+        ]
+    });
+}
+const meta = {
+    title: "Component/Tabs",
+    component: TabsWrapper,
+    parameters: {
+        docs: {
+            page: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Title, {}),
+                        /*#__PURE__*/ _jsx(Primary, {}),
+                        /*#__PURE__*/ _jsx(Controls, {})
+                    ]
+                })
+        }
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "default",
+                "browser",
+                "secondary",
+                "tertiary"
+            ]
+        }
+    },
+    args: {
+        variant: "default"
+    }
+};
+export default meta;
+export const Default = {
+    tags: [
+        "!dev"
+    ],
+    render: ({ variant = "default" })=>/*#__PURE__*/ _jsx(TabsWrapper, {
+            variant: variant
+        })
+};
+export const Demo = {
+    tags: [
+        "!autodocs"
+    ],
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "space-y-8",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-label mb-4",
+                            children: "Default"
+                        }),
+                        /*#__PURE__*/ _jsx(Tabs, {
+                            defaultValue: "tab1",
+                            children: /*#__PURE__*/ _jsxs(TabsList, {
                                 children: [
-                                    /*#__PURE__*/ _jsx("span", {
-                                        className: "text-utility-yellow",
-                                        children: "POST"
+                                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                                        value: "tab1",
+                                        children: "Tab 1"
                                     }),
-                                    /*#__PURE__*/ _jsx("span", {
-                                        children: "/$graphql"
+                                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                                        value: "tab2",
+                                        children: "Tab 2"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                                        value: "tab3",
+                                        children: "Tab 3"
                                     })
                                 ]
                             })
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsx(TabsAddButton, {
-                    onClick: BrowserTabOnAdd
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-label mb-4",
+                            children: "Secondary"
+                        }),
+                        /*#__PURE__*/ _jsx(Tabs, {
+                            defaultValue: "tab1",
+                            variant: "secondary",
+                            children: /*#__PURE__*/ _jsxs(TabsList, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                                        value: "tab1",
+                                        children: "Tab 1"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                                        value: "tab2",
+                                        children: "Tab 2"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                                        value: "tab3",
+                                        children: "Tab 3"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-label mb-4",
+                            children: "Tertiary"
+                        }),
+                        /*#__PURE__*/ _jsx(Tabs, {
+                            defaultValue: "tab1",
+                            variant: "tertiary",
+                            children: /*#__PURE__*/ _jsxs(TabsList, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                                        value: "tab1",
+                                        children: "Tab 1"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                                        value: "tab2",
+                                        children: "Tab 2"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TabsTrigger, {
+                                        value: "tab3",
+                                        children: "Tab 3"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-label mb-4",
+                            children: "Browser"
+                        }),
+                        /*#__PURE__*/ _jsxs(Tabs, {
+                            defaultValue: "first",
+                            variant: "browser",
+                            children: [
+                                /*#__PURE__*/ _jsxs(TabsList, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                                            value: "first",
+                                            onClick: ()=>action("onClick")(),
+                                            onClose: (v)=>action("onClose")(v),
+                                            children: /*#__PURE__*/ _jsxs("span", {
+                                                className: "flex items-center gap-1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "text-utility-green",
+                                                        children: "GET"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "/fhir/Patient"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                                            value: "second",
+                                            onClick: ()=>action("onClick")(),
+                                            onClose: (v)=>action("onClose")(v),
+                                            children: /*#__PURE__*/ _jsxs("span", {
+                                                className: "flex items-center gap-1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "text-utility-yellow",
+                                                        children: "POST"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "/fhir"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                                            value: "third",
+                                            onClick: ()=>action("onClick")(),
+                                            onClose: (v)=>action("onClose")(v),
+                                            children: /*#__PURE__*/ _jsxs("span", {
+                                                className: "flex items-center gap-1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "text-utility-yellow",
+                                                        children: "POST"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "/$graphql"
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(TabsAddButton, {
+                                    onClick: ()=>action("onAdd")()
+                                }),
+                                /*#__PURE__*/ _jsx(TabsListDropdown, {
+                                    tabs: [
+                                        {
+                                            id: "first",
+                                            content: /*#__PURE__*/ _jsxs("span", {
+                                                className: "flex items-center gap-1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "text-utility-green",
+                                                        children: "GET"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "/fhir/Patient"
+                                                    })
+                                                ]
+                                            })
+                                        },
+                                        {
+                                            id: "second",
+                                            content: /*#__PURE__*/ _jsxs("span", {
+                                                className: "flex items-center gap-1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "text-utility-yellow",
+                                                        children: "POST"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "/fhir"
+                                                    })
+                                                ]
+                                            })
+                                        },
+                                        {
+                                            id: "third",
+                                            content: /*#__PURE__*/ _jsxs("span", {
+                                                className: "flex items-center gap-1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "text-utility-yellow",
+                                                        children: "POST"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "/$graphql"
+                                                    })
+                                                ]
+                                            })
+                                        }
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
                 })
             ]
         })