From b403fa0460bd793cf9ba9342155d3a9ffc33e368 Mon Sep 17 00:00:00 2001 From: irfankhan10 Date: Mon, 7 Oct 2024 10:09:29 +0100 Subject: [PATCH] feat():DocsNavBar with DropDown Menu * add product logos * update schema to include types for dropdown menu content * hard-code content into navmenu/index.tsx * Navigation component uses primitive components to enable dropdown menu with list of items * update story for modified navigation menu * add padding to text within dropdown logo box * update content for lambeq and inquanto --- .../docs/components/logos/HSeriesLogo.tsx | 51 ++++ .../docs/components/logos/InQuantoLogo.tsx | 23 ++ .../docs/components/logos/LambeqLogo.tsx | 253 ++++++++++++++++++ .../docs/components/logos/NexusLogo.tsx | 136 ++++++++++ src/custom/docs/components/logos/TKETLogo.tsx | 5 + .../components/navmenu/NavigationMenu.tsx | 62 ++++- src/custom/docs/components/navmenu/index.tsx | 148 ++++++++-- src/custom/docs/components/navmenu/schema.tsx | 14 +- stories/custom/docs-nav.stories.tsx | 52 +--- 9 files changed, 662 insertions(+), 82 deletions(-) create mode 100644 src/custom/docs/components/logos/HSeriesLogo.tsx create mode 100644 src/custom/docs/components/logos/InQuantoLogo.tsx create mode 100644 src/custom/docs/components/logos/LambeqLogo.tsx create mode 100644 src/custom/docs/components/logos/NexusLogo.tsx create mode 100644 src/custom/docs/components/logos/TKETLogo.tsx diff --git a/src/custom/docs/components/logos/HSeriesLogo.tsx b/src/custom/docs/components/logos/HSeriesLogo.tsx new file mode 100644 index 0000000..c44bfb9 --- /dev/null +++ b/src/custom/docs/components/logos/HSeriesLogo.tsx @@ -0,0 +1,51 @@ +import { ComponentProps } from "react"; + +export const HSeriesLogo = (props: ComponentProps<"svg">) => { + return ( + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/custom/docs/components/logos/InQuantoLogo.tsx b/src/custom/docs/components/logos/InQuantoLogo.tsx new file mode 100644 index 0000000..9c0ed0e --- /dev/null +++ b/src/custom/docs/components/logos/InQuantoLogo.tsx @@ -0,0 +1,23 @@ +import { ComponentProps } from "react" + +export const InquantoLogo = (props: ComponentProps<'svg'>) => { + return + + + + + + + + + + + + + + + + + + +} diff --git a/src/custom/docs/components/logos/LambeqLogo.tsx b/src/custom/docs/components/logos/LambeqLogo.tsx new file mode 100644 index 0000000..07ba636 --- /dev/null +++ b/src/custom/docs/components/logos/LambeqLogo.tsx @@ -0,0 +1,253 @@ +import { ComponentProps } from "react" + + +export const LambeqLogo = (props: ComponentProps<'svg'>) => { + return + + + + + + + + + + + + +} diff --git a/src/custom/docs/components/logos/NexusLogo.tsx b/src/custom/docs/components/logos/NexusLogo.tsx new file mode 100644 index 0000000..a32f808 --- /dev/null +++ b/src/custom/docs/components/logos/NexusLogo.tsx @@ -0,0 +1,136 @@ +import { ComponentProps } from 'react' + +type LogoVariants = { variant?: 'logo' | 'horizontal' | 'vertical' | 'favicon' } +export const NexusLogo = ({ + variant = 'logo', + ...props +}: ComponentProps<'svg'> & LogoVariants) => { + switch (variant) { + default: + case 'logo': + return ( + + + + + + ) + case 'favicon': + return ( + + + + + + ) + case 'horizontal': + return ( + + + + + + + + + + + + + + + + + + ) + case 'vertical': + return ( + + + + + + + + + + + + + + ) + } +} diff --git a/src/custom/docs/components/logos/TKETLogo.tsx b/src/custom/docs/components/logos/TKETLogo.tsx new file mode 100644 index 0000000..6567ff2 --- /dev/null +++ b/src/custom/docs/components/logos/TKETLogo.tsx @@ -0,0 +1,5 @@ +import { ComponentProps } from "react" + +export const TKETLogo = (props: ComponentProps<'svg'>) => { + return +} diff --git a/src/custom/docs/components/navmenu/NavigationMenu.tsx b/src/custom/docs/components/navmenu/NavigationMenu.tsx index 0a6a731..e92d75d 100644 --- a/src/custom/docs/components/navmenu/NavigationMenu.tsx +++ b/src/custom/docs/components/navmenu/NavigationMenu.tsx @@ -3,13 +3,17 @@ import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, + NavigationMenuTrigger, NavigationMenuList, - navigationMenuTriggerStyle, + NavigationMenuContent, + cn } from 'src' import { Link } from './config' import { NavConfig } from './schema' +import React from 'react'; + export const Navigation = (props: { activePath: string linkComponent: Link @@ -23,15 +27,27 @@ export const Navigation = (props: { { props.navTextLinks.map((item) => { return ( - - - {item.title} - - + {item.title} + + + ) })} @@ -39,3 +55,29 @@ export const Navigation = (props: { ) } + +const ListItem = React.forwardRef< + React.ElementRef<"a">, + React.ComponentPropsWithoutRef<"a"> +>(({ className, title, children, ...props }, ref) => { + return ( +
  • + + +
    {title}
    +

    + {children} +

    +     +     +
    • + ); +}); +ListItem.displayName = "ListItem"; \ No newline at end of file diff --git a/src/custom/docs/components/navmenu/index.tsx b/src/custom/docs/components/navmenu/index.tsx index 02226ec..b6b02d4 100644 --- a/src/custom/docs/components/navmenu/index.tsx +++ b/src/custom/docs/components/navmenu/index.tsx @@ -1,18 +1,139 @@ 'use client' import { Navigation } from './NavigationMenu' import { ComponentProps } from 'react' +import React from 'react' import { Link } from './config' import { QuantinuumLogo } from './QuantinuumLogo' import { MobileMenu } from './MobileMenu' import { QuantinuumIdent } from './QuantinuumIdent' import { ModeSelector } from './ModeSelector' -import { NavConfig } from './schema' + +import { HSeriesLogo } from '../logos/HSeriesLogo' +import { NexusLogo } from '../logos/NexusLogo' +import { TKETLogo } from '../logos/TKETLogo' +import { InquantoLogo } from '../logos/InQuantoLogo' +import { LambeqLogo } from '../logos/LambeqLogo' + + +const navConfig = { + navTextLinks: [ + { + title: 'H-Series', + href: 'https://docs.quantinuum.com/h-series/index.html', + pathMatch: 'somewhere', + logo: , + description: "Quantinuum's QCCD ion-trap hardware, the world's highest peforming quantum computer.", + dropDown: [{ + title: "Guides", + href: "https://docs.quantinuum.com/h-series/guides.html", + },{ + title: "Getting Started", + href: "https://docs.quantinuum.com/h-series/trainings/getting_started/getting_started_index.html", + },{ + title: "Knowledge Articles", + href: "https://docs.quantinuum.com/h-series/trainings/knowledge_articles/ka_index.html", + },{ + title: "Support", + href: "https://docs.quantinuum.com/h-series/support.html", + }] + }, { + title: 'Nexus', + href: 'https://docs.quantinuum.com/nexus/index.html', + pathMatch: 'somewhere', + logo: , + description: "Cloud platform connecting users with hardware and compilation services, alongside associated data.", + dropDown: [{ + title: 'Guides', + href: 'https://docs.quantinuum.com/nexus/guides.html', + }, + { + title: 'Trainings', + href: 'https://docs.quantinuum.com/nexus/trainings/getting_started.html', + }, + { + title: 'API Reference', + href: 'https://docs.quantinuum.com/nexus/api_index.html', + }, + { + title: 'Support', + href: 'https://docs.quantinuum.com/nexus/support_index.html', + },] + }, { + title: "TKET", + href: "https://docs.quantinuum.com/tket/index.html", + pathMatch: "", + logo: , + description: "Quantum computing toolkit and optimizing compiler", + dropDown: [{ + title: 'API Docs', + href: 'https://docs.quantinuum.com/tket/api-docs', + },{ + title: 'User Guide', + href: 'https://docs.quantinuum.com/tket/user-guide', + },{ + title: 'Blog', + href: 'https://docs.quantinuum.com/tket/blog/', + },] + }, { + title: "InQuanto", + href: "https://docs.quantinuum.com/inquanto/index.html", + pathMatch: "", + logo: , + description: "Toolkit for complex molecular and materials simulations", + dropDown: [{ + title: 'Introduction', + href: 'https://docs.quantinuum.com/inquanto/introduction/overview.html', + }, + { + title: 'User Guide', + href: 'https://docs.quantinuum.com/inquanto/manual/howto.html', + }, + { + title: 'Tutorials', + href: 'https://docs.quantinuum.com/inquanto/tutorials/tutorial_overview.html', + }, + { + title: 'Examples', + href: 'https://docs.quantinuum.com/inquanto/tutorials/examples_overview.html', + }, + { + title: 'API Reference', + href: 'https://docs.quantinuum.com/inquanto/api/inquanto_api_intro.html', + },] + }, { + title: "\u03BBambeq", + href: "https://docs.quantinuum.com/lambeq/index.html", + logo: , + description: "Α Python toolkit for quantum natural language processing", + dropDown: [{ + title: 'Getting Started', + href: 'https://docs.quantinuum.com/lambeq/intro.html', + }, + { + title: 'User Guide', + href: 'https://docs.quantinuum.com/lambeq/pipeline.html', + }, + { + title: 'Tutorials', + href: 'https://docs.quantinuum.com/lambeq/tutorials/sentence-input.html', + }, + { + title: 'Code Examples', + href: 'https://docs.quantinuum.com/lambeq/notebooks.html', + }, + { + title: 'API Reference', + href: 'https://docs.quantinuum.com/lambeq/root-api.html', + },] + } + ], +} export const NavBar = (props: { linkComponent?: Link activePath: string enableModeSelector?: boolean -} & NavConfig) => { +}) => { const Link = props.linkComponent ? props.linkComponent : (props: ComponentProps<'a'>) => @@ -21,19 +142,19 @@ export const NavBar = (props: {
    - +
    - +
    - {props.navProductName !== '' ?
    -
    |
    {props.navProductName}
    -
    : null} +
    +
    |
    Documentation
    +
    Quantinuum @@ -41,17 +162,8 @@ export const NavBar = (props: {
    - - -
    - {props.navIconLinks.map(link => { - return - - - })} -
    - - {props.enableModeSelector ? <>
    : null} + + {props.enableModeSelector ? <>
    : null}
    diff --git a/src/custom/docs/components/navmenu/schema.tsx b/src/custom/docs/components/navmenu/schema.tsx index 139dfe9..95d8822 100644 --- a/src/custom/docs/components/navmenu/schema.tsx +++ b/src/custom/docs/components/navmenu/schema.tsx @@ -1,16 +1,24 @@ import { ComponentProps } from 'react' +import React from 'react'; import { z } from 'zod'; - +const dropDownSchema = z.object({ + href: z.string(), + title: z.string(), +}); const linkSchema = z.object({ href: z.string(), title: z.string(), + logo: z.custom( + e => (e as any)?.$$typeof === Symbol.for("react.element"), + "value must be a React Element" + ), + description: z.string(), external: z.boolean().optional(), + dropDown: z.array(dropDownSchema), }); export const navConfigSchema = z.object({ navTextLinks: z.array(linkSchema), - navIconLinks: z.array(z.intersection(linkSchema, z.object({iconImageURL: z.string()}))), - navProductName: z.string() }) export type NavConfig = z.infer export type ActivePaths = (NavConfig['navTextLinks'])[number]['href'] diff --git a/stories/custom/docs-nav.stories.tsx b/stories/custom/docs-nav.stories.tsx index 29f9380..e10cf52 100644 --- a/stories/custom/docs-nav.stories.tsx +++ b/stories/custom/docs-nav.stories.tsx @@ -1,58 +1,8 @@ import { Meta, StoryObj } from "@storybook/react"; import {DocsNavBar } from "src"; -const navConfig = { - navTextLinks: [ - { - title: 'Nexus Concepts', - href: 'concepts/projects.html', - pathMatch: 'somewhere', - }, - { - title: 'User Guide', - href: 'user_guide/sign_up.html', - pathMatch: 'somewhere', - }, - { - title: 'Admin Guide', - href: 'admin_guide/quotas.html', - pathMatch: 'somewhere', - }, - { - title: 'Code Examples', - href: 'examples/overview.html', - pathMatch: 'somewhere', - }, - { - title: 'API Reference', - href: '"qnexus_api/auth.html', - pathMatch: 'somewhere', - }, - ], - navProductName: 'Nexus', - navIconLinks: [ - { - title: 'TKET Github', - href: 'https://github.com/CQCL/tket', - pathMatch: 'somewhere', - iconImageURL: '/github.svg', - }, - { - title: 'TKET Slack Channel', - href: 'https://tketusers.slack.com/', - pathMatch: 'somewhere', - iconImageURL: '/slack.svg', - }, - { - title: 'TKET Stack Exchange', - href: 'https://quantumcomputing.stackexchange.com/questions/tagged/pytket', - pathMatch: 'somewhere', - iconImageURL: '/stack.svg', - }, - ], - } export function DocsNavDemo() { - return ; + return ; } const meta: Meta = {