From 9857b461213e6bbc1711278c5b0426d3ae448325 Mon Sep 17 00:00:00 2001 From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com> Date: Mon, 9 Oct 2023 08:45:54 +0000 Subject: [PATCH] chore: add Navigation in storybook (CALCOM-10760) (#10867) Co-authored-by: gitstart-calcom Co-authored-by: gitstart-calcom Co-authored-by: Peer Richelsen --- packages/lib/hooks/useUrlMatchesCurrentUrl.ts | 2 +- .../__stories__/horizontalTabs.stories.mdx | 134 +++++++++++++++ .../tabs/__stories__/verticalTabs.stories.mdx | 158 ++++++++++++++++++ 3 files changed, 293 insertions(+), 1 deletion(-) create mode 100644 packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx create mode 100644 packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx diff --git a/packages/lib/hooks/useUrlMatchesCurrentUrl.ts b/packages/lib/hooks/useUrlMatchesCurrentUrl.ts index 5526f2fbe2..7fc0c5fe2c 100644 --- a/packages/lib/hooks/useUrlMatchesCurrentUrl.ts +++ b/packages/lib/hooks/useUrlMatchesCurrentUrl.ts @@ -7,7 +7,7 @@ export const useUrlMatchesCurrentUrl = (url: string) => { // It can certainly have null value https://nextjs.org/docs/app/api-reference/functions/use-pathname#:~:text=usePathname%20can%20return%20null%20when%20a%20fallback%20route%20is%20being%20rendered%20or%20when%20a%20pages%20directory%20page%20has%20been%20automatically%20statically%20optimized%20by%20Next.js%20and%20the%20router%20is%20not%20ready. const pathname = usePathname() as null | string; const searchParams = useSearchParams(); - const query = searchParams.toString(); + const query = searchParams?.toString(); let pathnameWithQuery; if (query) { pathnameWithQuery = `${pathname}?${query}`; diff --git a/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx b/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx new file mode 100644 index 0000000000..701cd54c8e --- /dev/null +++ b/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx @@ -0,0 +1,134 @@ +import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks"; + +import { + Title, + VariantRow, + VariantsTable, + CustomArgsTable, + Examples, + Example, +} from "@calcom/storybook/components"; +import { Plus } from "@calcom/ui/components/icon"; + +import HorizontalTabs from "../HorizontalTabs"; + + + + + +## Definition + +The HorizontalTabs component is a user interface element used for displaying a horizontal set of tabs, often employed for navigation or organization purposes within a web application. + +## Structure + +The HorizontalTabs component is designed to work alongside the HorizontalTabItem component, which represents individual tabs within the tab bar. + +export const tabs = [ + { + name: "Tab 1", + href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab1", + disabled: false, + linkShallow: true, + linkScroll: true, + icon: Plus, + }, + { + name: "Tab 2", + href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab2", + disabled: false, + linkShallow: true, + linkScroll: true, + avatar: "Avatar", + }, + { + name: "Tab 3", + href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab3", + disabled: true, + linkShallow: true, + linkScroll: true, + }, +]; + +<CustomArgsTable of={HorizontalTabs} /> + +<Examples title="Default"> + <Example title="Default"> + <HorizontalTabs + tabs={[ + { + name: "tab 1", + href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab1", + }, + ]} + /> + </Example> + <Example title="With avatar"> + <HorizontalTabs + tabs={[ + { + name: "Tab 1", + href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab1", + avatar: "Avatar", + }, + ]} + /> + </Example> + <Example title="With icon"> + <HorizontalTabs + tabs={[ + { + name: "Tab 1", + href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab1", + icon: Plus, + }, + ]} + /> + </Example> + <Example title="Disabled"> + <HorizontalTabs + tabs={[ + { + name: "Tab 1", + href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab1", + disabled: true, + }, + ]} + /> + </Example> +</Examples> + +## HorizontalTabs Story + +<Canvas> + <Story + name="Horizontal Tabs" + args={{ + name: "Tab 1", + href: "/tab1", + disabled: false, + className: "", + linkShallow: true, + linkScroll: true, + icon: "", + avatar: "", + }} + argTypes={{ + name: { control: "text", description: "Tab name" }, + href: { control: "text", description: "Tab link" }, + disabled: { control: "boolean", description: "Whether the tab is disabled" }, + className: { control: "text", description: "Additional CSS class" }, + linkShallow: { control: "boolean", description: "Whether to use shallow links" }, + linkScroll: { control: "boolean", description: "Whether to scroll to links" }, + icon: { control: "text", description: "SVGComponent icon" }, + avatar: { control: "text", description: "Avatar image URL" }, + }}> + {(...props) => ( + <VariantsTable titles={["Default"]} columnMinWidth={150}> + <VariantRow> + <HorizontalTabs tabs={tabs} className="overflow-hidden" actions={<button>Click me</button>} /> + </VariantRow> + </VariantsTable> + )} + </Story> +</Canvas> diff --git a/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx b/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx new file mode 100644 index 0000000000..6b7b3ea2c6 --- /dev/null +++ b/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx @@ -0,0 +1,158 @@ +import { Meta, Story } from "@storybook/addon-docs/blocks"; + +import { + Title, + CustomArgsTable, + Examples, + Example, + VariantsTable, + VariantsRow, +} from "@calcom/storybook/components"; +import { Plus } from "@calcom/ui/components/icon"; + +import VerticalTabs from "../VerticalTabs"; + +<Meta title="UI/Navigation/VerticalTabs" component={VerticalTabs} /> + +<Title title="Vertical Tabs Brief" subtitle="Version 1.0 — Last Update: 17 Aug 2023" /> + +## Definition + +The VerticalTabs component is a user interface element utilized to present a vertical set of tabs, commonly employed for navigation or organizing content within a web application. + +## Structure + +The VerticalTabs component is designed to complement the HorizontalTabItem component, which represents individual tabs within the tab bar. This combination allows for creating intuitive navigation experiences and organized content presentation. + +export const tabs = [ + { + name: "Tab 1", + href: "/tab1", + disabled: false, + linkShallow: true, + linkScroll: true, + disableChevron: true, + icon: Plus, + }, + { + name: "Tab 2", + href: "/tab2", + disabled: false, + linkShallow: true, + linkScroll: true, + avatar: "Avatar", + }, + { + name: "Tab 3", + href: "/tab3", + disabled: true, + linkShallow: true, + linkScroll: true, + }, +]; + +<CustomArgsTable of={VerticalTabs} /> + +<Examples title="Default"> + <Example title="Default"> + <VerticalTabs + tabs={[ + { + name: "tab 1", + href: "/tab1", + }, + ]} + /> + </Example> + <Example title="Disabled chevron"> + <VerticalTabs + tabs={[ + { + name: "Tab 1", + href: "/tab1", + disableChevron: true, + }, + ]} + /> + </Example> + <Example title="With icon"> + <VerticalTabs + tabs={[ + { + name: "Tab 1", + href: "/tab1", + icon: Plus, + }, + ]} + /> + </Example> + <Example title="Disabled"> + <VerticalTabs + tabs={[ + { + name: "Tab 1", + href: "/tab1", + disabled: true, + }, + ]} + /> + </Example> +</Examples> + +## VerticalTabs Story + +<Canvas> + <Story + name="Vertical Tabs" + args={{ + name: "Tab 1", + info: "Tab information", + icon: Plus, + disabled: false, + children: [ + { + name: "Sub Tab 1", + href: "/sub-tab1", + disabled: false, + className: "sub-tab", + }, + ], + textClassNames: "", + className: "", + isChild: false, + hidden: false, + disableChevron: true, + href: "/tab1", + isExternalLink: true, + linkShallow: true, + linkScroll: true, + avatar: "", + iconClassName: "", + }} + argTypes={{ + name: { control: "text", description: "Tab name" }, + info: { control: "text", description: "Tab information" }, + icon: { control: "object", description: "SVGComponent icon" }, + disabled: { control: "boolean", description: "Whether the tab is disabled" }, + children: { control: "object", description: "Array of child tabs" }, + textClassNames: { control: "text", description: "Additional text class names" }, + className: { control: "text", description: "Additional CSS class" }, + isChild: { control: "boolean", description: "Whether the tab is a child tab" }, + hidden: { control: "boolean", description: "Whether the tab is hidden" }, + disableChevron: { control: "boolean", description: "Whether to disable the chevron" }, + href: { control: "text", description: "Tab link" }, + isExternalLink: { control: "boolean", description: "Whether the link is external" }, + linkShallow: { control: "boolean", description: "Whether to use shallow links" }, + linkScroll: { control: "boolean", description: "Whether to scroll to links" }, + avatar: { control: "text", description: "Avatar image URL" }, + iconClassName: { control: "text", description: "Additional icon class name" }, + }}> + {(...props) => ( + <VariantsTable titles={["Default"]} columnMinWidth={150}> + <VariantRow> + <VerticalTabs tabs={tabs} className="overflow-hidden" /> + </VariantRow> + </VariantsTable> + )} + </Story> +</Canvas>