From c30934bc840ded9fa957eca96dc2d08104856646 Mon Sep 17 00:00:00 2001 From: aidanCQ Date: Mon, 16 Sep 2024 11:37:54 +0100 Subject: [PATCH 1/4] feat(): Add docs components. --- package-lock.json | 9 +++ package.json | 9 ++- src/custom/docs/QuantinuumLogo.tsx | 50 ++++++++++++ src/custom/docs/components/footer/index.tsx | 51 ++++++++++++ .../docs/components/navmenu/ListItem.tsx | 28 +++++++ .../docs/components/navmenu/MobileMenu.tsx | 22 ++++++ .../docs/components/navmenu/ModeSelector.tsx | 53 +++++++++++++ .../components/navmenu/NavigationMenu.tsx | 41 ++++++++++ .../components/navmenu/QuantinuumIdent.tsx | 47 +++++++++++ .../components/navmenu/QuantinuumLogo.tsx | 46 +++++++++++ src/custom/docs/components/navmenu/config.tsx | 20 +++++ .../docs/components/navmenu/globals.d.ts | 12 +++ src/custom/docs/components/navmenu/index.tsx | 58 ++++++++++++++ src/custom/docs/components/navmenu/schema.tsx | 18 +++++ src/custom/docs/icons/github.svg | 3 + src/custom/docs/icons/quantinuum_favicon.svg | 15 ++++ src/custom/docs/icons/slack.svg | 1 + src/custom/docs/icons/stack.svg | 1 + src/custom/docs/index.ts | 2 + src/custom/docs/scripts/nav/index.tsx | 22 ++++++ src/index.ts | 2 +- stories/custom/docs-footer.stories.tsx | 79 +++++++++++++++++++ stories/custom/docs-nav.stories.tsx | 66 ++++++++++++++++ 23 files changed, 653 insertions(+), 2 deletions(-) create mode 100644 src/custom/docs/QuantinuumLogo.tsx create mode 100644 src/custom/docs/components/footer/index.tsx create mode 100644 src/custom/docs/components/navmenu/ListItem.tsx create mode 100644 src/custom/docs/components/navmenu/MobileMenu.tsx create mode 100644 src/custom/docs/components/navmenu/ModeSelector.tsx create mode 100644 src/custom/docs/components/navmenu/NavigationMenu.tsx create mode 100644 src/custom/docs/components/navmenu/QuantinuumIdent.tsx create mode 100644 src/custom/docs/components/navmenu/QuantinuumLogo.tsx create mode 100644 src/custom/docs/components/navmenu/config.tsx create mode 100644 src/custom/docs/components/navmenu/globals.d.ts create mode 100644 src/custom/docs/components/navmenu/index.tsx create mode 100644 src/custom/docs/components/navmenu/schema.tsx create mode 100644 src/custom/docs/icons/github.svg create mode 100644 src/custom/docs/icons/quantinuum_favicon.svg create mode 100644 src/custom/docs/icons/slack.svg create mode 100644 src/custom/docs/icons/stack.svg create mode 100644 src/custom/docs/index.ts create mode 100644 src/custom/docs/scripts/nav/index.tsx create mode 100644 stories/custom/docs-footer.stories.tsx create mode 100644 stories/custom/docs-nav.stories.tsx diff --git a/package-lock.json b/package-lock.json index ae8fe7c..710475e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,6 +45,7 @@ "lucide-react": "^0.298.0", "next-themes": "^0.2.1", "react-day-picker": "^8.10.0", + "react-icons": "^5.3.0", "react-resizable-panels": "^1.0.5", "sonner": "^1.3.1", "tailwind-merge": "^2.1.0", @@ -18787,6 +18788,14 @@ "react": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index dab8a4e..0e58d76 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,13 @@ "build": "rm -rf ./dist && rollup -c" }, "release": { - "branches": ["main", { "name": "alpha", "prerelease": true}] + "branches": [ + "main", + { + "name": "alpha", + "prerelease": true + } + ] }, "publishConfig": { "registry": "https://registry.npmjs.org", @@ -112,6 +118,7 @@ "lucide-react": "^0.298.0", "next-themes": "^0.2.1", "react-day-picker": "^8.10.0", + "react-icons": "^5.3.0", "react-resizable-panels": "^1.0.5", "sonner": "^1.3.1", "tailwind-merge": "^2.1.0", diff --git a/src/custom/docs/QuantinuumLogo.tsx b/src/custom/docs/QuantinuumLogo.tsx new file mode 100644 index 0000000..28fc66a --- /dev/null +++ b/src/custom/docs/QuantinuumLogo.tsx @@ -0,0 +1,50 @@ +import { ComponentProps } from "react" +import { cn } from "src" + +export const QuantinuumLogo = (props: ComponentProps<'svg'>) => { + return ( + + + + + + + + + + + + + + + + + + + + + ) + } diff --git a/src/custom/docs/components/footer/index.tsx b/src/custom/docs/components/footer/index.tsx new file mode 100644 index 0000000..fa2c074 --- /dev/null +++ b/src/custom/docs/components/footer/index.tsx @@ -0,0 +1,51 @@ +export const Footer = (props: { logo: JSX.Element, subtitle: string, columns: { + title: string; + items: { + name: string; + href: string; + }[]; +}[] }) => { + return ( + + ) +} diff --git a/src/custom/docs/components/navmenu/ListItem.tsx b/src/custom/docs/components/navmenu/ListItem.tsx new file mode 100644 index 0000000..4d036bc --- /dev/null +++ b/src/custom/docs/components/navmenu/ListItem.tsx @@ -0,0 +1,28 @@ + +import { NavigationMenuLink, cn } from 'src' +import React from 'react' +export const ListItem = React.forwardRef< + React.ElementRef<'a'>, + React.ComponentPropsWithoutRef<'a'> +>(({ className, title, children, ...props }, ref) => { + return ( +
  • + + +
    {title}
    +

    + {children} +

    +     +     +
    • + ) +}) +ListItem.displayName = 'ListItem' diff --git a/src/custom/docs/components/navmenu/MobileMenu.tsx b/src/custom/docs/components/navmenu/MobileMenu.tsx new file mode 100644 index 0000000..3bb4733 --- /dev/null +++ b/src/custom/docs/components/navmenu/MobileMenu.tsx @@ -0,0 +1,22 @@ + + +import { + Button, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + } from "src" +import { MenuIcon } from "lucide-react" +import { NavConfig } from "./schema" + + export const MobileMenu = (props: Pick) => { + return + + + {props.navTextLinks.map(link => { + return {link.title} + })} + + + } diff --git a/src/custom/docs/components/navmenu/ModeSelector.tsx b/src/custom/docs/components/navmenu/ModeSelector.tsx new file mode 100644 index 0000000..acaa330 --- /dev/null +++ b/src/custom/docs/components/navmenu/ModeSelector.tsx @@ -0,0 +1,53 @@ + +import { Check, MoonIcon, SunIcon } from 'lucide-react' +import { + Button, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + + useTheme, +} from 'src' + +export const ModeSelector = () => { + const theme = useTheme() + return ( + + + + + +
    + Select Theme +
    + theme.setMode('light')}> + Light + {theme.theme.mode === 'light' ? ( + + ) : null} + + theme.setMode('dark')}> + Dark + {theme.theme.mode === 'dark' ? ( + + ) : null} + + theme.setMode('system')}> + System + {theme.theme.mode === 'system' ? ( + + ) : null} + +     +     + ) +} diff --git a/src/custom/docs/components/navmenu/NavigationMenu.tsx b/src/custom/docs/components/navmenu/NavigationMenu.tsx new file mode 100644 index 0000000..0a6a731 --- /dev/null +++ b/src/custom/docs/components/navmenu/NavigationMenu.tsx @@ -0,0 +1,41 @@ + +import { + NavigationMenu, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + navigationMenuTriggerStyle, +} from 'src' + +import { Link } from './config' +import { NavConfig } from './schema' + +export const Navigation = (props: { + activePath: string + linkComponent: Link +} & Pick) => { + const isActivePath = (activePath: string, path: string) => { + return activePath.startsWith(path) + } + return ( + + + { props.navTextLinks.map((item) => { + return ( + + + + {item.title} + + + + ) + })} + + + ) +} diff --git a/src/custom/docs/components/navmenu/QuantinuumIdent.tsx b/src/custom/docs/components/navmenu/QuantinuumIdent.tsx new file mode 100644 index 0000000..ae37273 --- /dev/null +++ b/src/custom/docs/components/navmenu/QuantinuumIdent.tsx @@ -0,0 +1,47 @@ +export const QuantinuumIdent = () => { + return ( + + + + + + + + + + + + + + + + + + + + + ) + } + \ No newline at end of file diff --git a/src/custom/docs/components/navmenu/QuantinuumLogo.tsx b/src/custom/docs/components/navmenu/QuantinuumLogo.tsx new file mode 100644 index 0000000..c8b275d --- /dev/null +++ b/src/custom/docs/components/navmenu/QuantinuumLogo.tsx @@ -0,0 +1,46 @@ +export const QuantinuumLogo = () => { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/custom/docs/components/navmenu/config.tsx b/src/custom/docs/components/navmenu/config.tsx new file mode 100644 index 0000000..40c266c --- /dev/null +++ b/src/custom/docs/components/navmenu/config.tsx @@ -0,0 +1,20 @@ +import { ComponentProps } from 'react' +import { z } from 'zod'; + + +const linkSchema = z.object({ + href: z.string(), + title: z.string(), + external: z.boolean().optional().default(false), +}); +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 ActivePaths = (z.infer['navTextLinks'])[number]['href'] +const defaultLink = (props: ComponentProps<'a'>) => +export type Link = typeof defaultLink diff --git a/src/custom/docs/components/navmenu/globals.d.ts b/src/custom/docs/components/navmenu/globals.d.ts new file mode 100644 index 0000000..a3528f2 --- /dev/null +++ b/src/custom/docs/components/navmenu/globals.d.ts @@ -0,0 +1,12 @@ +type Link = { + href: string + title: string + openInNewTab: boolean +} +type ProductName = string +type Icon = { + iconImageURL: string +} +declare const navTextLinks: Link[] +declare const navProductName: string +declare const navIconLinks: (Icon & Link)[] diff --git a/src/custom/docs/components/navmenu/index.tsx b/src/custom/docs/components/navmenu/index.tsx new file mode 100644 index 0000000..7110a65 --- /dev/null +++ b/src/custom/docs/components/navmenu/index.tsx @@ -0,0 +1,58 @@ +'use client' +import { Navigation } from './NavigationMenu' +import { ComponentProps } 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' + +export const NavBar = (props: { + linkComponent?: Link + activePath: string +} & NavConfig) => { + const Link = props.linkComponent + ? props.linkComponent + : (props: ComponentProps<'a'>) => + return ( +
    +
    +
    +
    + +
    +
    + +
    +
    +
    + +
    +     +
    +
    |
    {props.navProductName}
    +
    +
    + + Quantinuum + + +
    +
    + + +
    + {props.navIconLinks.map(link => { + return + + + })} +
    +
    + +
    +
    +
    + ) +} diff --git a/src/custom/docs/components/navmenu/schema.tsx b/src/custom/docs/components/navmenu/schema.tsx new file mode 100644 index 0000000..139dfe9 --- /dev/null +++ b/src/custom/docs/components/navmenu/schema.tsx @@ -0,0 +1,18 @@ +import { ComponentProps } from 'react' +import { z } from 'zod'; + + +const linkSchema = z.object({ + href: z.string(), + title: z.string(), + external: z.boolean().optional(), +}); +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'] +const defaultLink = (props: ComponentProps<'a'>) => +export type Link = typeof defaultLink diff --git a/src/custom/docs/icons/github.svg b/src/custom/docs/icons/github.svg new file mode 100644 index 0000000..a8d1174 --- /dev/null +++ b/src/custom/docs/icons/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/custom/docs/icons/quantinuum_favicon.svg b/src/custom/docs/icons/quantinuum_favicon.svg new file mode 100644 index 0000000..d7063b2 --- /dev/null +++ b/src/custom/docs/icons/quantinuum_favicon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/custom/docs/icons/slack.svg b/src/custom/docs/icons/slack.svg new file mode 100644 index 0000000..4f101e0 --- /dev/null +++ b/src/custom/docs/icons/slack.svg @@ -0,0 +1 @@ + diff --git a/src/custom/docs/icons/stack.svg b/src/custom/docs/icons/stack.svg new file mode 100644 index 0000000..74d5333 --- /dev/null +++ b/src/custom/docs/icons/stack.svg @@ -0,0 +1 @@ + diff --git a/src/custom/docs/index.ts b/src/custom/docs/index.ts new file mode 100644 index 0000000..c955498 --- /dev/null +++ b/src/custom/docs/index.ts @@ -0,0 +1,2 @@ +export {Footer} from './components/footer' +export { NavBar } from './components/navmenu/index' diff --git a/src/custom/docs/scripts/nav/index.tsx b/src/custom/docs/scripts/nav/index.tsx new file mode 100644 index 0000000..cf0922d --- /dev/null +++ b/src/custom/docs/scripts/nav/index.tsx @@ -0,0 +1,22 @@ + +import {createRoot} from "react-dom/client" +import { NavBar } from "../../components/navmenu"; +import { navConfigSchema } from '../../components/navmenu/schema'; + + (() => { + const mountElement = document.querySelector('.nexus-nav') + if (!mountElement) return + const renderIn = document.createElement('div') + mountElement.appendChild(renderIn) + + const root = createRoot(renderIn) + + const navConfig = navConfigSchema.parse({ + navTextLinks: typeof navTextLinks !== "undefined" ? navTextLinks : null, + navIconLinks: typeof navIconLinks !== "undefined" ? navIconLinks : null, + navProductName: typeof navProductName !== "undefined" ? navProductName : null + }) + root.render( +
    + ) + })() diff --git a/src/index.ts b/src/index.ts index 7ee595a..ae7d438 100644 --- a/src/index.ts +++ b/src/index.ts @@ -48,5 +48,5 @@ export * from "./shadcn/ui/breadcrumb"; export * from './shadcn/ui/sonner' export * from "./tailwindTheme"; export * from "./utils"; - +export * from './custom/docs' diff --git a/stories/custom/docs-footer.stories.tsx b/stories/custom/docs-footer.stories.tsx new file mode 100644 index 0000000..febcddf --- /dev/null +++ b/stories/custom/docs-footer.stories.tsx @@ -0,0 +1,79 @@ +import { Meta, StoryObj } from "@storybook/react"; +import {Footer } from "src/custom/docs"; +import { QuantinuumLogo } from "src/custom/docs/QuantinuumLogo"; + + const footerConfig = { + logo: , + columns: [ + { + title: 'Solutions', + items: [ + { + href: 'https://docs.quantinuum.com/nexus/index.html', + name: 'Quantinuum Nexus', + }, + { + href: 'https://docs.quantinuum.com/inquanto/index.html', + name: 'Inquanto', + }, + { + href: 'https://tket.quantinuum.com/', + name: 'TKET', + }, + { + href: 'https://docs.quantinuum.com/lambeq', + name: 'Lambeq', + }, + ], + }, + { + title: 'Hardware', + items: [ + { + href: 'https://docs.quantinuum.com/h-series/index.html', + name: 'System Model H1', + }, + { + href: 'https://docs.quantinuum.com/h-series/index.html', + name: 'System Model H2', + }, + { + href: 'https://www.quantinuum.com/hardware#access', + name: 'Get Access', + }, + ], + }, + { + title: 'What We Do?', + items: [ + { + href: 'https://www.quantinuum.com/about', + name: 'About Quantinuum', + }, + { + href: '"https://www.quantinuum.com/publications', + name: 'Research', + }, + { + href: 'https://www.quantinuum.com/events', + name: 'Events', + }, + ], + }, + ], + subtitle: '', + } + +export function DocsNavDemo() { + return