chore: add Navigation in storybook (CALCOM-10760) (#10867)
Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: gitstart-calcom <gitstart-calcom@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>pull/10903/head
GitStart-Cal.com
GitHub
parent
a35750734c
commit
9857b46121
|
|
@ -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}`;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
<Meta title="UI/Navigation/HorizontalTabs" component={HorizontalTabs} />
|
||||
|
||||
<Title title="Horizontal Tabs" suffix="Brief" subtitle="Version 1.0 — Last Update: 17 Aug 2023" />
|
||||
|
||||
## 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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue