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.
|
// 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 pathname = usePathname() as null | string;
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const query = searchParams.toString();
|
const query = searchParams?.toString();
|
||||||
let pathnameWithQuery;
|
let pathnameWithQuery;
|
||||||
if (query) {
|
if (query) {
|
||||||
pathnameWithQuery = `${pathname}?${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