diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 49f6ddd..e6748a8 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -6,7 +6,7 @@ repos: - repo: builtin hooks: - id: trailing-whitespace - exclude: '^sphinx-ui/demo/' + exclude: '(^sphinx-ui/demo/|\.snap$)' - id: end-of-file-fixer exclude: '^sphinx-ui/demo/' - id: check-yaml diff --git a/documentation-ui/.gitignore b/documentation-ui/.gitignore index 8d1bc6b..7d4e105 100644 --- a/documentation-ui/.gitignore +++ b/documentation-ui/.gitignore @@ -5,4 +5,4 @@ storybook.log storybook-static .mypy_cache .vscode -*.tgz +*.tgz diff --git a/documentation-ui/src/custom/docs/QuantinuumLogo.tsx b/documentation-ui/src/custom/docs/QuantinuumLogo.tsx index 28fc66a..a40555a 100644 --- a/documentation-ui/src/custom/docs/QuantinuumLogo.tsx +++ b/documentation-ui/src/custom/docs/QuantinuumLogo.tsx @@ -1,50 +1,50 @@ -import { ComponentProps } from "react" -import { cn } from "src" +import { ComponentProps } from 'react' +import { cn } from 'src' export const QuantinuumLogo = (props: ComponentProps<'svg'>) => { - return ( - + return ( + + - - - - - - + - - - - - ) - } + + + + + + + + + ) +} diff --git a/documentation-ui/src/custom/docs/components/footer/index.tsx b/documentation-ui/src/custom/docs/components/footer/index.tsx index ec6a546..193636e 100644 --- a/documentation-ui/src/custom/docs/components/footer/index.tsx +++ b/documentation-ui/src/custom/docs/components/footer/index.tsx @@ -1,131 +1,161 @@ -import { QuantinuumLogo } from "../../QuantinuumLogo"; -import { Separator } from "@quantinuum/quantinuum-ui"; +import { QuantinuumLogo } from '../../QuantinuumLogo' +import { Separator } from '@quantinuum/quantinuum-ui' const footerConfig = { columns: [ { - name: "User Community", + name: 'User Community', items: [ { - name: "Compute Platform Updates", - href: "/product-updates" - },{ - name: "Q-NET", - href: "https://www.quantinuum.com/q-net#get-started" - },{ - name: "Quantinuum Startup Partner Program", - href: "https://www.quantinuum.com/startup-partner-program#join" - } - ] - }, { - name: "Compute Platform", + name: 'Compute Platform Updates', + href: '/product-updates', + }, + { + name: 'Q-NET', + href: 'https://www.quantinuum.com/q-net#get-started', + }, + { + name: 'Quantinuum Startup Partner Program', + href: 'https://www.quantinuum.com/startup-partner-program#join', + }, + ], + }, + { + name: 'Compute Platform', items: [ { - name: "Quantinuum Systems", - href: "/systems" - }, { - name: "Quantinuum Nexus", - href: "/nexus" - }, { - name: "Guppy", - href: "/guppy" - }, { - name: "Selene", - href: "/selene" - }, { - name: "Pytket", - href: "/tket" + name: 'Quantinuum Systems', + href: '/systems', + }, + { + name: 'Quantinuum Nexus', + href: '/nexus', + }, + { + name: 'Guppy', + href: '/guppy', + }, + { + name: 'Selene', + href: '/selene', + }, + { + name: 'Pytket', + href: '/tket', }, - ] - }, { - name: "Applications", + ], + }, + { + name: 'Applications', items: [ { - name: "InQuanto", - href: "/inquanto" - }, + name: 'InQuanto', + href: '/inquanto', + }, { - name: "Quantum Origin", - href: "/origin" - },{ - name: "\u03BBambeq", - href: "/lambeq/" - }, - ] - },{ - name: "Quantinuum", + name: 'Quantum Origin', + href: '/origin', + }, + { + name: '\u03BBambeq', + href: '/lambeq/', + }, + ], + }, + { + name: 'Quantinuum', items: [ { - name: "About", - href: "https://www.quantinuum.com/about", - },{ - name: "Careers", - href: "https://www.quantinuum.com/careers", - },{ - name: "Events", - href: "https://www.quantinuum.com/events" - } - ] - } + name: 'About', + href: 'https://www.quantinuum.com/about', + }, + { + name: 'Careers', + href: 'https://www.quantinuum.com/careers', + }, + { + name: 'Events', + href: 'https://www.quantinuum.com/events', + }, + ], + }, ], } export const Footer = () => { return (
-
- -
+ +
-
) } diff --git a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/CookieBanner.test.tsx b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/CookieBanner.test.tsx index 10c45e0..10be02a 100644 --- a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/CookieBanner.test.tsx +++ b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/CookieBanner.test.tsx @@ -13,7 +13,9 @@ vi.mock('@quantinuum/quantinuum-ui', () => ({ ), Dialog: (props: MockDialogProps) =>
{props.children}
, - DialogContent: (props: MockDialogProps) =>
{props.children}
, + DialogContent: (props: MockDialogProps) => ( +
{props.children}
+ ), })) const defaultProps = { diff --git a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/CookieBanner.tsx b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/CookieBanner.tsx index f951961..3e4e6b2 100644 --- a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/CookieBanner.tsx +++ b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/CookieBanner.tsx @@ -21,9 +21,9 @@ export const CookieBanner = ({

- We use essential cookies to ensure the website functions properly. With your permission, we’ll also use - optional cookies to analyze site usage and improve the user experience. For details of how we use - cookies and your personal data, please read our{' '} + We use essential cookies to ensure the website functions properly. With your + permission, we’ll also use optional cookies to analyze site usage and improve the user + experience. For details of how we use cookies and your personal data, please read our{' '} ({ CookieBanner: () =>

})) +vi.mock('../CookieBanner/CookieBanner', () => ({ + CookieBanner: () =>
, +})) vi.mock('../CookieSettingsDialog/CookieSettingsDialog', () => ({ CookieSettingsDialog: () =>
, })) diff --git a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieConsentManager/index.ts b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieConsentManager/index.ts index 7e6497a..f8c9f48 100644 --- a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieConsentManager/index.ts +++ b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieConsentManager/index.ts @@ -1 +1 @@ -export * from './CookieConsentManager' \ No newline at end of file +export * from './CookieConsentManager' diff --git a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsButton/CookieSettingsButton.test.tsx b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsButton/CookieSettingsButton.test.tsx index 1afee72..399bfc3 100644 --- a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsButton/CookieSettingsButton.test.tsx +++ b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsButton/CookieSettingsButton.test.tsx @@ -9,7 +9,9 @@ describe('CookieSettingsButton', () => { }) it('should render as expected', () => { - const { container } = render() + const { container } = render( + + ) expect(container).toMatchSnapshot() }) diff --git a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsButton/CookieSettingsButton.tsx b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsButton/CookieSettingsButton.tsx index 4438305..9a694e7 100644 --- a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsButton/CookieSettingsButton.tsx +++ b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsButton/CookieSettingsButton.tsx @@ -5,7 +5,10 @@ type CookieSettingsButtonProps = Omit, 'onClick'> & { onCookiesSettingsButtonClick: () => void } -export function CookieSettingsButton({ onCookiesSettingsButtonClick, ...props }: CookieSettingsButtonProps) { +export function CookieSettingsButton({ + onCookiesSettingsButtonClick, + ...props +}: CookieSettingsButtonProps) { return ( -
+
+ ) } diff --git a/documentation-ui/src/custom/docs/components/helpcard/index.tsx b/documentation-ui/src/custom/docs/components/helpcard/index.tsx index b094970..8a810d3 100644 --- a/documentation-ui/src/custom/docs/components/helpcard/index.tsx +++ b/documentation-ui/src/custom/docs/components/helpcard/index.tsx @@ -1,31 +1,36 @@ -import { CardTitle } from '../triplecard/Card' -import { LucideIcon } from "lucide-react" -import { CardHeader, CardDescription, Card } from "@quantinuum/quantinuum-ui" +import { CardTitle } from '../triplecard/Card' +import { LucideIcon } from 'lucide-react' +import { CardHeader, CardDescription, Card } from '@quantinuum/quantinuum-ui' export const HelpCard = (props: { - columns: { - title: string; - icon_description: string; - icon: LucideIcon; - link: string; - description: string; - }[] - }) => { - return (
- {props.columns.map((item) => { - return ( - - - - - {item.title} - {item.description} - - - - - ); - })} -
+ columns: { + title: string + icon_description: string + icon: LucideIcon + link: string + description: string + }[] +}) => { + return ( +
+ {props.columns.map((item) => { + return ( + + + + + + {item.title} + + {item.description} + + + + ) + })} +
) } diff --git a/documentation-ui/src/custom/docs/components/logos/InQuantoLogo.tsx b/documentation-ui/src/custom/docs/components/logos/InQuantoLogo.tsx index 9c0ed0e..171fd79 100644 --- a/documentation-ui/src/custom/docs/components/logos/InQuantoLogo.tsx +++ b/documentation-ui/src/custom/docs/components/logos/InQuantoLogo.tsx @@ -1,23 +1,52 @@ -import { ComponentProps } from "react" +import { ComponentProps } from 'react' -export const InquantoLogo = (props: ComponentProps<'svg'>) => { - return - - - - - - - - - - - - - - - - - +export const InquantoLogo = (props: ComponentProps<'svg'>) => { + return ( + + + + + + + + + + + + + + + + + + + ) } diff --git a/documentation-ui/src/custom/docs/components/logos/LambeqLogo.tsx b/documentation-ui/src/custom/docs/components/logos/LambeqLogo.tsx index 07ba636..73df5f2 100644 --- a/documentation-ui/src/custom/docs/components/logos/LambeqLogo.tsx +++ b/documentation-ui/src/custom/docs/components/logos/LambeqLogo.tsx @@ -1,253 +1,309 @@ -import { ComponentProps } from "react" - +import { ComponentProps } from 'react' export const LambeqLogo = (props: ComponentProps<'svg'>) => { - return - - - - - - - - - - - + return ( + + + + + + + + + + + + + ) } diff --git a/documentation-ui/src/custom/docs/components/logos/NexusLogo.tsx b/documentation-ui/src/custom/docs/components/logos/NexusLogo.tsx index a32f808..63f3b9b 100644 --- a/documentation-ui/src/custom/docs/components/logos/NexusLogo.tsx +++ b/documentation-ui/src/custom/docs/components/logos/NexusLogo.tsx @@ -1,20 +1,12 @@ import { ComponentProps } from 'react' type LogoVariants = { variant?: 'logo' | 'horizontal' | 'vertical' | 'favicon' } -export const NexusLogo = ({ - variant = 'logo', - ...props -}: ComponentProps<'svg'> & LogoVariants) => { +export const NexusLogo = ({ variant = 'logo', ...props }: ComponentProps<'svg'> & LogoVariants) => { switch (variant) { default: case 'logo': return ( - + + diff --git a/documentation-ui/src/custom/docs/components/logos/SystemsLogo.tsx b/documentation-ui/src/custom/docs/components/logos/SystemsLogo.tsx index 2f6d7df..bfe2d9b 100644 --- a/documentation-ui/src/custom/docs/components/logos/SystemsLogo.tsx +++ b/documentation-ui/src/custom/docs/components/logos/SystemsLogo.tsx @@ -1,22 +1,28 @@ -import { ComponentProps } from "react"; +import { ComponentProps } from 'react' -export const SystemsLogo = (props: ComponentProps<"svg">) => { +export const SystemsLogo = (props: ComponentProps<'svg'>) => { return ( - - - - + + - - - - - - - + + + + + + + + + + - - - ); -}; + + ) +} diff --git a/documentation-ui/src/custom/docs/components/logos/TKETLogo.tsx b/documentation-ui/src/custom/docs/components/logos/TKETLogo.tsx index 6567ff2..c2d90ae 100644 --- a/documentation-ui/src/custom/docs/components/logos/TKETLogo.tsx +++ b/documentation-ui/src/custom/docs/components/logos/TKETLogo.tsx @@ -1,5 +1,30 @@ -import { ComponentProps } from "react" +import { ComponentProps } from 'react' export const TKETLogo = (props: ComponentProps<'svg'>) => { - return + return ( + + + + + + + ) } diff --git a/documentation-ui/src/custom/docs/components/navmenu/ListItem.tsx b/documentation-ui/src/custom/docs/components/navmenu/ListItem.tsx index 6dd35f3..27219e6 100644 --- a/documentation-ui/src/custom/docs/components/navmenu/ListItem.tsx +++ b/documentation-ui/src/custom/docs/components/navmenu/ListItem.tsx @@ -1,4 +1,3 @@ - import { NavigationMenuLink, cn } from '@quantinuum/quantinuum-ui' import React from 'react' export const ListItem = React.forwardRef< @@ -17,9 +16,7 @@ export const ListItem = React.forwardRef< {...props} >
{title}
-

- {children} -

+

{children}

diff --git a/documentation-ui/src/custom/docs/components/navmenu/MobileMenu.tsx b/documentation-ui/src/custom/docs/components/navmenu/MobileMenu.tsx index d3e7b1d..c0c97bd 100644 --- a/documentation-ui/src/custom/docs/components/navmenu/MobileMenu.tsx +++ b/documentation-ui/src/custom/docs/components/navmenu/MobileMenu.tsx @@ -1,38 +1,55 @@ - - import { - Button, - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - } from "@quantinuum/quantinuum-ui" -import { MenuIcon } from "lucide-react" + Button, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@quantinuum/quantinuum-ui' +import { MenuIcon } from 'lucide-react' - export const MobileMenu = (props: { - navTextLinks: { - href: string, - title: string, - logo: JSX.Element, - description: string, - dropDown: { - href: string, - title: string, - }[], - }[]; - }) => { - return - - - {props.navTextLinks.map(link => { - return <>{link.title} - - {link.dropDown.map(subitem => { - return {subitem.title} - })} +export const MobileMenu = (props: { + navTextLinks: { + href: string + title: string + logo: JSX.Element + description: string + dropDown: { + href: string + title: string + }[] + }[] +}) => { + return ( + + + + + + {props.navTextLinks.map((link) => { + return ( + <> + + {link.title} + + {link.dropDown.map((subitem) => { + return ( + + {subitem.title} + + ) + })} + ) })} {} - - - } + + + ) +} diff --git a/documentation-ui/src/custom/docs/components/navmenu/ModeSelector.tsx b/documentation-ui/src/custom/docs/components/navmenu/ModeSelector.tsx index 39407e8..e22520f 100644 --- a/documentation-ui/src/custom/docs/components/navmenu/ModeSelector.tsx +++ b/documentation-ui/src/custom/docs/components/navmenu/ModeSelector.tsx @@ -1,4 +1,3 @@ - import { Check, MoonIcon, SunIcon } from 'lucide-react' import { Button, @@ -14,20 +13,14 @@ export const ModeSelector = () => { return ( - -
- Select Theme -
+
Select Theme
theme.setMode('light')}> Light {theme.theme.mode === 'light' ? ( diff --git a/documentation-ui/src/custom/docs/components/navmenu/NavigationMenu.tsx b/documentation-ui/src/custom/docs/components/navmenu/NavigationMenu.tsx index 91bce5f..82d01f9 100644 --- a/documentation-ui/src/custom/docs/components/navmenu/NavigationMenu.tsx +++ b/documentation-ui/src/custom/docs/components/navmenu/NavigationMenu.tsx @@ -1,4 +1,3 @@ - import { NavigationMenu, NavigationMenuItem, @@ -8,34 +7,35 @@ import { NavigationMenuContent, } from '@quantinuum/quantinuum-ui' - export const Navigation = (props: { - activePath: string, + activePath: string navTextLinks: { - href: string, - title: string, - logo: JSX.Element, - description: string, + href: string + title: string + logo: JSX.Element + description: string dropDown: { - href: string, - title: string, - }[], - }[]; -} ) => { + href: string + title: string + }[] + }[] +}) => { return ( - { props.navTextLinks.map((item) => { + {props.navTextLinks.map((item) => { return ( - {item.title} - - {item.description && !item.href && ( -

- {item.description} -

- )} -
    + + {item.title} + + + {item.description && !item.href && ( +

    + {item.description} +

    + )} +
      {item.href && (
    • @@ -52,20 +52,24 @@ export const Navigation = (props: {
      • )} - {item.dropDown && item.dropDown.length > 0 && item.dropDown.map((subtitle) => ( -
    • {/* Add a unique key */} - - -
      {subtitle.title}
      -       -       -
      • - ))} + {item.dropDown && + item.dropDown.length > 0 && + item.dropDown.map((subtitle) => ( +
    • + {' '} + {/* Add a unique key */} + + +
      {subtitle.title}
      +       +       +
      • + ))}
    -     + ) })} diff --git a/documentation-ui/src/custom/docs/components/navmenu/QuantinuumIdent.tsx b/documentation-ui/src/custom/docs/components/navmenu/QuantinuumIdent.tsx index ae37273..06ae571 100644 --- a/documentation-ui/src/custom/docs/components/navmenu/QuantinuumIdent.tsx +++ b/documentation-ui/src/custom/docs/components/navmenu/QuantinuumIdent.tsx @@ -1,47 +1,46 @@ export const QuantinuumIdent = () => { - return ( - + return ( + + - - - - - - + - - - - - ) - } - \ No newline at end of file + + + + + + + + + ) +} diff --git a/documentation-ui/src/custom/docs/components/navmenu/globals.d.ts b/documentation-ui/src/custom/docs/components/navmenu/globals.d.ts index a3528f2..ab08e6c 100644 --- a/documentation-ui/src/custom/docs/components/navmenu/globals.d.ts +++ b/documentation-ui/src/custom/docs/components/navmenu/globals.d.ts @@ -1,11 +1,11 @@ type Link = { - href: string - title: string - openInNewTab: boolean + href: string + title: string + openInNewTab: boolean } type ProductName = string type Icon = { - iconImageURL: string + iconImageURL: string } declare const navTextLinks: Link[] declare const navProductName: string diff --git a/documentation-ui/src/custom/docs/components/page/index.tsx b/documentation-ui/src/custom/docs/components/page/index.tsx index 5e5c2aa..a4662c8 100644 --- a/documentation-ui/src/custom/docs/components/page/index.tsx +++ b/documentation-ui/src/custom/docs/components/page/index.tsx @@ -1,10 +1,12 @@ -import React from "react" +import React from 'react' export const DocsPageLayout = React.forwardRef< -HTMLDivElement, -React.HTMLAttributes + HTMLDivElement, + React.HTMLAttributes >(({ ...props }, ref) => { - return
    {props.children}
    - + return ( +
    + {props.children} +
    + ) }) - diff --git a/documentation-ui/src/custom/docs/components/triplecard/Card.tsx b/documentation-ui/src/custom/docs/components/triplecard/Card.tsx index c6ab309..560e046 100644 --- a/documentation-ui/src/custom/docs/components/triplecard/Card.tsx +++ b/documentation-ui/src/custom/docs/components/triplecard/Card.tsx @@ -6,13 +6,7 @@ const CardTitle = React.forwardRef< React.HTMLAttributes >(({ className, ...props }, ref) => { return ( -

    +

    {props.children}

    ) @@ -24,47 +18,39 @@ const CardSubtitle = React.forwardRef< React.HTMLAttributes >(({ className, ...props }, ref) => { return ( -

    +

    {props.children}

    ) }) CardSubtitle.displayName = 'CardSubtitle' -const Card = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => { - return ( -
    -
    {props.children}
    -
    - ) -}) +const Card = React.forwardRef>( + ({ className, ...props }, ref) => { + return ( +
    +
    {props.children}
    +
    + ) + } +) Card.displayName = 'Card' -const IconBar = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => { - return ( -
    - {props.children} -
    - ) -}) +const IconBar = React.forwardRef>( + ({ className, ...props }, ref) => { + return ( +
    + {props.children} +
    + ) + } +) IconBar.displayName = 'IconBar' export { Card, CardTitle, CardSubtitle } diff --git a/documentation-ui/src/custom/docs/scripts/nav/index.tsx b/documentation-ui/src/custom/docs/scripts/nav/index.tsx index 4d55140..7c5f08d 100644 --- a/documentation-ui/src/custom/docs/scripts/nav/index.tsx +++ b/documentation-ui/src/custom/docs/scripts/nav/index.tsx @@ -1,16 +1,25 @@ +import { createRoot } from 'react-dom/client' +import { NavBar } from '../../components/navmenu' -import {createRoot} from "react-dom/client" -import { NavBar } from "../../components/navmenu"; +;(() => { + const mountElement = document.querySelector('.nexus-nav') + if (!mountElement) return + const renderIn = document.createElement('div') + mountElement.appendChild(renderIn) - (() => { - const mountElement = document.querySelector('.nexus-nav') - if (!mountElement) return - const renderIn = document.createElement('div') - mountElement.appendChild(renderIn) - - const root = createRoot(renderIn) - - root.render( -
    - ) - })() + const root = createRoot(renderIn) + + root.render( +
    + {' '} +
    + {' '} +
    +
    + ) +})() diff --git a/documentation-ui/src/custom/slide-in.tsx b/documentation-ui/src/custom/slide-in.tsx index e511872..5a0ee1f 100644 --- a/documentation-ui/src/custom/slide-in.tsx +++ b/documentation-ui/src/custom/slide-in.tsx @@ -1,25 +1,25 @@ -"use client"; +'use client' -import React, { useRef } from "react"; +import React, { useRef } from 'react' export const SlideIn = (props: { children: React.ReactNode }) => { - const ref = useRef(null); + const ref = useRef(null) React.useEffect(() => { if (ref.current !== null) { const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { - ref.current?.classList.add("animate-slide-up"); - ref.current?.classList.remove("opacity-0"); + ref.current?.classList.add('animate-slide-up') + ref.current?.classList.remove('opacity-0') } - }); - observer.observe(ref.current); - return () => observer.disconnect(); + }) + observer.observe(ref.current) + return () => observer.disconnect() } - }, []); + }, []) return (
    {props.children}
    - ); -}; + ) +} diff --git a/documentation-ui/src/custom/theme-selector.tsx b/documentation-ui/src/custom/theme-selector.tsx index b5afd2c..3dae651 100644 --- a/documentation-ui/src/custom/theme-selector.tsx +++ b/documentation-ui/src/custom/theme-selector.tsx @@ -4,26 +4,34 @@ import React from 'react' import { Button } from '@quantinuum/quantinuum-ui' import { type useTheme } from './use-theme' -export const ThemeSelector = React.forwardRef>(({ theme, setMode }, ref) => { - - const stateMap = { - light: { - icon: , - }, - dark: { - icon: , - }, - system: { - icon: , - }, - } satisfies Record - return ( - - ) -}) +export const ThemeSelector = React.forwardRef>( + ({ theme, setMode }, ref) => { + const stateMap = { + light: { + icon: , + }, + dark: { + icon: , + }, + system: { + icon: , + }, + } satisfies Record + return ( + + ) + } +) diff --git a/documentation-ui/src/index.ts b/documentation-ui/src/index.ts index ec1d4d4..adf7b86 100644 --- a/documentation-ui/src/index.ts +++ b/documentation-ui/src/index.ts @@ -1,6 +1,6 @@ -export * from "./custom/slide-in"; -export * from "./custom/theme-selector"; -export * from "./custom/use-theme"; -export * from "./tailwindTheme"; -export * from "./utils"; +export * from './custom/slide-in' +export * from './custom/theme-selector' +export * from './custom/use-theme' +export * from './tailwindTheme' +export * from './utils' export * from './custom/docs' diff --git a/documentation-ui/src/tailwindTheme.ts b/documentation-ui/src/tailwindTheme.ts index 62f6e30..2c13fba 100644 --- a/documentation-ui/src/tailwindTheme.ts +++ b/documentation-ui/src/tailwindTheme.ts @@ -1,50 +1,50 @@ -import typography from "@tailwindcss/typography"; -import type { Config } from "tailwindcss"; -import animate from "tailwindcss-animate"; +import typography from '@tailwindcss/typography' +import type { Config } from 'tailwindcss' +import animate from 'tailwindcss-animate' export const tailwindTheme = { darkMode: ['class', '[data-theme="dark"]'], theme: { container: { center: true, - padding: "2rem", + padding: '2rem', screens: { - "2xl": "1400px", + '2xl': '1400px', }, }, extend: { colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', }, secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', }, destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', }, muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', }, accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', }, popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', }, card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', }, sidebar: { DEFAULT: 'hsl(var(--sidebar-background))', @@ -59,30 +59,30 @@ export const tailwindTheme = { }, borderRadius: { xl: `calc(var(--radius) + 4px)`, - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)', }, keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, + 'accordion-down': { + from: { height: '0' }, + to: { height: 'var(--radix-accordion-content-height)' }, }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, + 'accordion-up': { + from: { height: 'var(--radix-accordion-content-height)' }, + to: { height: '0' }, }, - "slide-up": { - from: { opacity: "0", transform: "translateY(50%)" }, - to: { opacity: "1", transform: "translateY(0)" }, + 'slide-up': { + from: { opacity: '0', transform: 'translateY(50%)' }, + to: { opacity: '1', transform: 'translateY(0)' }, }, }, animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - "slide-up": "slide-up 0.6s ease-in", + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', + 'slide-up': 'slide-up 0.6s ease-in', }, }, }, plugins: [animate, typography], -} satisfies Partial; +} satisfies Partial diff --git a/documentation-ui/src/utils/darkMode.ts b/documentation-ui/src/utils/darkMode.ts index 90b0134..25012d0 100644 --- a/documentation-ui/src/utils/darkMode.ts +++ b/documentation-ui/src/utils/darkMode.ts @@ -1,58 +1,45 @@ -type Mode = "system" | "dark" | "light"; +type Mode = 'system' | 'dark' | 'light' const isMode = (mode: string): mode is Mode => { - return ["system", "dark", "light"].includes(mode); -}; + return ['system', 'dark', 'light'].includes(mode) +} -const mode_storage_key = "data-theme" as const; +const mode_storage_key = 'data-theme' as const const isDark = (mode: Mode): boolean => { return ( - (mode === "system" && - window?.matchMedia?.("(prefers-color-scheme: dark)").matches) || - mode === "dark" - ); -}; + (mode === 'system' && window?.matchMedia?.('(prefers-color-scheme: dark)').matches) || + mode === 'dark' + ) +} const getTheme = () => { - const localMode = localStorage.getItem(mode_storage_key); + const localMode = localStorage.getItem(mode_storage_key) // Default to dark mode if none specified. - const resolvedMode = - localMode !== null && isMode(localMode) ? localMode : ("light" as const); + const resolvedMode = localMode !== null && isMode(localMode) ? localMode : ('light' as const) return { mode: resolvedMode, isDark: isDark(resolvedMode), - }; -}; + } +} const setTheme = (mode: Mode) => { - localStorage.setItem(mode_storage_key, mode); - window.dispatchEvent(new Event("storage")); -}; - - + localStorage.setItem(mode_storage_key, mode) + window.dispatchEvent(new Event('storage')) +} -const subscribeToTheme = (callback: (state: {isDark: boolean, mode: Mode}) => void) => { +const subscribeToTheme = (callback: (state: { isDark: boolean; mode: Mode }) => void) => { const _callback = () => { - const theme = getTheme(); - callback(theme); + const theme = getTheme() + callback(theme) } _callback() - window.addEventListener("storage", _callback); - window - .matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", _callback); + window.addEventListener('storage', _callback) + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', _callback) return () => { - window.removeEventListener("storage", _callback); - window - .matchMedia("(prefers-color-scheme: dark)") - .removeEventListener("change", _callback); - }; -}; - -export { - getTheme, - setTheme, - subscribeToTheme, -}; + window.removeEventListener('storage', _callback) + window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', _callback) + } +} +export { getTheme, setTheme, subscribeToTheme } diff --git a/documentation-ui/src/utils/index.ts b/documentation-ui/src/utils/index.ts index dd5c14e..734f9c8 100644 --- a/documentation-ui/src/utils/index.ts +++ b/documentation-ui/src/utils/index.ts @@ -1,6 +1,6 @@ -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; -export * from "./darkMode"; +import { clsx, type ClassValue } from 'clsx' +import { twMerge } from 'tailwind-merge' +export * from './darkMode' export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); + return twMerge(clsx(inputs)) } diff --git a/documentation-ui/src/utils/syncTheme.ts b/documentation-ui/src/utils/syncTheme.ts index 9596b0e..447b9b5 100644 --- a/documentation-ui/src/utils/syncTheme.ts +++ b/documentation-ui/src/utils/syncTheme.ts @@ -1,9 +1,8 @@ -import { subscribeToTheme } from "./darkMode" +import { subscribeToTheme } from './darkMode' // This script sets up event listeners to set the appropriate css class in the DOM for the current theme. It's intended to be executed in the head of the document hence it is immediately invoked (IIFE). -(() => { - - subscribeToTheme(({isDark}) => { - document.body.setAttribute("data-theme", isDark ? "dark" : 'light') - }) +;(() => { + subscribeToTheme(({ isDark }) => { + document.body.setAttribute('data-theme', isDark ? 'dark' : 'light') + }) })() diff --git a/documentation-ui/src/utils/useIsMobile.ts b/documentation-ui/src/utils/useIsMobile.ts index 2b0fe1d..4331d5c 100644 --- a/documentation-ui/src/utils/useIsMobile.ts +++ b/documentation-ui/src/utils/useIsMobile.ts @@ -1,4 +1,4 @@ -import * as React from "react" +import * as React from 'react' const MOBILE_BREAKPOINT = 768 @@ -10,9 +10,9 @@ export function useIsMobile() { const onChange = () => { setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) } - mql.addEventListener("change", onChange) + mql.addEventListener('change', onChange) setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) - return () => mql.removeEventListener("change", onChange) + return () => mql.removeEventListener('change', onChange) }, []) return !!isMobile diff --git a/documentation-ui/stories/custom/NexusLogo.tsx b/documentation-ui/stories/custom/NexusLogo.tsx index a32f808..63f3b9b 100644 --- a/documentation-ui/stories/custom/NexusLogo.tsx +++ b/documentation-ui/stories/custom/NexusLogo.tsx @@ -1,20 +1,12 @@ import { ComponentProps } from 'react' type LogoVariants = { variant?: 'logo' | 'horizontal' | 'vertical' | 'favicon' } -export const NexusLogo = ({ - variant = 'logo', - ...props -}: ComponentProps<'svg'> & LogoVariants) => { +export const NexusLogo = ({ variant = 'logo', ...props }: ComponentProps<'svg'> & LogoVariants) => { switch (variant) { default: case 'logo': return ( - + + diff --git a/documentation-ui/stories/custom/docs-footer.stories.tsx b/documentation-ui/stories/custom/docs-footer.stories.tsx index eb363c8..d2988a3 100644 --- a/documentation-ui/stories/custom/docs-footer.stories.tsx +++ b/documentation-ui/stories/custom/docs-footer.stories.tsx @@ -1,17 +1,16 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { DocsFooter } from "src"; - +import { Meta, StoryObj } from '@storybook/react' +import { DocsFooter } from 'src' export function DocsFooterDemo() { - return ; + return } const meta: Meta = { component: DocsFooterDemo, -}; +} -export default meta; +export default meta export const Default: StoryObj = { args: {}, -}; +} diff --git a/documentation-ui/stories/custom/docs-header.stories.tsx b/documentation-ui/stories/custom/docs-header.stories.tsx index 7a42af2..c6ca7d3 100644 --- a/documentation-ui/stories/custom/docs-header.stories.tsx +++ b/documentation-ui/stories/custom/docs-header.stories.tsx @@ -1,62 +1,64 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { DocsHeaderWrapper, DocsHeaderRight, DocsHeaderLeft, DocsHeaderTitle, DocsHeaderSubtitle, CodeCopy} from "src/custom/docs"; -import { NexusLogo } from "./NexusLogo"; -import { Button } from "@quantinuum/quantinuum-ui"; -import { RocketIcon } from "lucide-react"; - +import { Meta, StoryObj } from '@storybook/react' +import { + DocsHeaderWrapper, + DocsHeaderRight, + DocsHeaderLeft, + DocsHeaderTitle, + DocsHeaderSubtitle, + CodeCopy, +} from 'src/custom/docs' +import { NexusLogo } from './NexusLogo' +import { Button } from '@quantinuum/quantinuum-ui' +import { RocketIcon } from 'lucide-react' export function DocsHeaderDemo() { - return - - + return ( + + + The Full Stack Quantum Computing Platform - - - - - + - - + + + + + + ) } const meta: Meta = { component: DocsHeaderDemo, -}; +} -export default meta; +export default meta export const Default: StoryObj = { args: {}, -}; - - +} diff --git a/documentation-ui/stories/custom/docs-helpcard.stories.tsx b/documentation-ui/stories/custom/docs-helpcard.stories.tsx index 591d1cc..6f0e770 100644 --- a/documentation-ui/stories/custom/docs-helpcard.stories.tsx +++ b/documentation-ui/stories/custom/docs-helpcard.stories.tsx @@ -1,36 +1,36 @@ -import { Meta, StoryObj } from "@storybook/react"; +import { Meta, StoryObj } from '@storybook/react' import { LifeBuoyIcon, BookIcon } from 'lucide-react' import { DocsHelpCard } from 'src' const helpSectionConfig = { - columns: [{ - title: "Get in touch for support", - icon_description: "Support Icon", - icon: LifeBuoyIcon, - link: "https://www.quantinuum.com/contact/docs", - description: "Need help? Fill out our support form here", - + columns: [ + { + title: 'Get in touch for support', + icon_description: 'Support Icon', + icon: LifeBuoyIcon, + link: 'https://www.quantinuum.com/contact/docs', + description: 'Need help? Fill out our support form here', }, { - title: "Publications", - icon_description: "Publications Icon", - icon: BookIcon, - link: "https://quantinuum.com/publications", - description: "Find our latest research publications here", - }], -}; - + title: 'Publications', + icon_description: 'Publications Icon', + icon: BookIcon, + link: 'https://quantinuum.com/publications', + description: 'Find our latest research publications here', + }, + ], +} function DocsHelpCardDemo() { - return + return } const meta: Meta = { - component: DocsHelpCardDemo, -}; + component: DocsHelpCardDemo, +} -export default meta; +export default meta export const Default: StoryObj = { - args: {}, -}; + args: {}, +} diff --git a/documentation-ui/stories/custom/docs-tripleCard.stories.tsx b/documentation-ui/stories/custom/docs-tripleCard.stories.tsx index b13737d..9ea7adc 100644 --- a/documentation-ui/stories/custom/docs-tripleCard.stories.tsx +++ b/documentation-ui/stories/custom/docs-tripleCard.stories.tsx @@ -1,79 +1,88 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { ComponentProps } from "react"; -import { DocsTripleCard } from "src"; +import { Meta, StoryObj } from '@storybook/react' +import { ComponentProps } from 'react' +import { DocsTripleCard } from 'src' - const tripleCardProps = [ - { - "title": "Guides", - "subtitle": "How to navigate Quantinuum’s full-stack quantum computing platform.", - "image_link": "", - "icon": "BookOpenText", - "image_description": "description", - "links": [ - { - "title": "User Guide", - "description": "How to use Nexus, understand core concepts and navigate our user interface.", - "link": "user_guide/sign_up.html" - }, - { - "title": "Administrator Guide", - "description": "Learn about our tools for managing users, allocating resources, and visualizing activity.", - "link": "admin_guide/accessing_org_page.html" - } - ] - }, - { - "title": "Getting Started", - "icon": "SquarePlay", - "subtitle": "Get up and running using Nexus for your Python quantum computing workflows", - - "image_link": "", - "image_description": "description", - "links": [ - { - "title": "Get Started With qnexus", - "description": "Get started with using client Python package to run workflows and retrieve your data.", - "link": "examples/notebooks/getting_started.html" - }, - { - "title": "Nexus Lab", - "description": "Use our hosted Nexus Lab JupyterHub environment to get started coding in Python immediately, pre-configured with Quantinuum software packages like TKET and qnexus.", - "link": "concepts/lab.html" - } - ] - }, - { - "title": "Advanced Users", - "icon": "GraduationCap", - "subtitle": "In-depth code examples and API documentation.", - "image_link": "", - "image_description": "description", - "links": [ - { - "title": "API Reference For qnexus", - "description": "View API documentation and examples for the qnexus package.", - "link": "qnexus_api/index.html" - }, - { - "title": "Code Examples Using qnexus", - "description": "Examples of core qnexus usage and tutorials for more complex applied workflows using Nexus.", - "link": "examples/overview.html" - } - ] - } - ] +const tripleCardProps = [ + { + title: 'Guides', + subtitle: 'How to navigate Quantinuum’s full-stack quantum computing platform.', + image_link: '', + icon: 'BookOpenText', + image_description: 'description', + links: [ + { + title: 'User Guide', + description: 'How to use Nexus, understand core concepts and navigate our user interface.', + link: 'user_guide/sign_up.html', + }, + { + title: 'Administrator Guide', + description: + 'Learn about our tools for managing users, allocating resources, and visualizing activity.', + link: 'admin_guide/accessing_org_page.html', + }, + ], + }, + { + title: 'Getting Started', + icon: 'SquarePlay', + subtitle: 'Get up and running using Nexus for your Python quantum computing workflows', + image_link: '', + image_description: 'description', + links: [ + { + title: 'Get Started With qnexus', + description: + 'Get started with using client Python package to run workflows and retrieve your data.', + link: 'examples/notebooks/getting_started.html', + }, + { + title: 'Nexus Lab', + description: + 'Use our hosted Nexus Lab JupyterHub environment to get started coding in Python immediately, pre-configured with Quantinuum software packages like TKET and qnexus.', + link: 'concepts/lab.html', + }, + ], + }, + { + title: 'Advanced Users', + icon: 'GraduationCap', + subtitle: 'In-depth code examples and API documentation.', + image_link: '', + image_description: 'description', + links: [ + { + title: 'API Reference For qnexus', + description: 'View API documentation and examples for the qnexus package.', + link: 'qnexus_api/index.html', + }, + { + title: 'Code Examples Using qnexus', + description: + 'Examples of core qnexus usage and tutorials for more complex applied workflows using Nexus.', + link: 'examples/overview.html', + }, + ], + }, +] export function DocsTripleCardDemo() { - return ) => } imageComponent={(props: ComponentProps<'img'>) => } />; + return ( + ) => } + imageComponent={(props: ComponentProps<'img'>) => } + /> + ) } const meta: Meta = { component: DocsTripleCardDemo, -}; +} -export default meta; +export default meta export const Default: StoryObj = { args: {}, -}; +} diff --git a/documentation-ui/stories/custom/navbar.stories.tsx b/documentation-ui/stories/custom/navbar.stories.tsx index c532561..14451a4 100644 --- a/documentation-ui/stories/custom/navbar.stories.tsx +++ b/documentation-ui/stories/custom/navbar.stories.tsx @@ -1,6 +1,6 @@ -import { IconJarLogoIcon } from "@radix-ui/react-icons"; -import { Meta, StoryObj } from "@storybook/react"; -import React from "react"; +import { IconJarLogoIcon } from '@radix-ui/react-icons' +import { Meta, StoryObj } from '@storybook/react' +import React from 'react' import { Button, Input, @@ -12,45 +12,44 @@ import { NavigationMenuTrigger, cn, navigationMenuTriggerStyle, -} from "@quantinuum/quantinuum-ui"; +} from '@quantinuum/quantinuum-ui' const components: { title: string; href: string; description: string }[] = [ { - title: "Alert Dialog", - href: "/docs/primitives/alert-dialog", + title: 'Alert Dialog', + href: '/docs/primitives/alert-dialog', description: - "A modal dialog that interrupts the user with important content and expects a response.", + 'A modal dialog that interrupts the user with important content and expects a response.', }, { - title: "Hover Card", - href: "/docs/primitives/hover-card", - description: - "For sighted users to preview content available behind a link.", + title: 'Hover Card', + href: '/docs/primitives/hover-card', + description: 'For sighted users to preview content available behind a link.', }, { - title: "Progress", - href: "/docs/primitives/progress", + title: 'Progress', + href: '/docs/primitives/progress', description: - "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", + 'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.', }, { - title: "Scroll-area", - href: "/docs/primitives/scroll-area", - description: "Visually or semantically separates content.", + title: 'Scroll-area', + href: '/docs/primitives/scroll-area', + description: 'Visually or semantically separates content.', }, { - title: "Tabs", - href: "/docs/primitives/tabs", + title: 'Tabs', + href: '/docs/primitives/tabs', description: - "A set of layered sections of content—known as tab panels—that are displayed one at a time.", + 'A set of layered sections of content—known as tab panels—that are displayed one at a time.', }, { - title: "Tooltip", - href: "/docs/primitives/tooltip", + title: 'Tooltip', + href: '/docs/primitives/tooltip', description: - "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", + 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.', }, -]; +] function NavigationDemo() { return ( @@ -68,12 +67,9 @@ function NavigationDemo() { href="/" > -
    - shadcn/ui -
    +
    shadcn/ui

    - Beautifully designed components built with Radix UI and - Tailwind CSS. + Beautifully designed components built with Radix UI and Tailwind CSS.

    @@ -95,11 +91,7 @@ function NavigationDemo() {
      {components.map((component) => ( - + {component.description} ))} @@ -126,50 +118,43 @@ function NavigationDemo() { - + - ); + ) } -const ListItem = React.forwardRef< - React.ElementRef<"a">, - React.ComponentPropsWithoutRef<"a"> ->(({ className, title, children, ...props }, ref) => { - return ( -
    • - - -
      {title}
      -

      - {children} -

      -       -       -
      • - ); -}); -ListItem.displayName = "ListItem"; +const ListItem = React.forwardRef, React.ComponentPropsWithoutRef<'a'>>( + ({ className, title, children, ...props }, ref) => { + return ( +
    • + + +
      {title}
      +

      {children}

      +       +       +
      • + ) + } +) +ListItem.displayName = 'ListItem' const meta: Meta = { component: NavigationDemo, -}; +} -export default meta; +export default meta export const Default: StoryObj = { args: {}, -}; +} diff --git a/documentation-ui/stories/custom/slide-in.stories.tsx b/documentation-ui/stories/custom/slide-in.stories.tsx index 318f4b6..872910a 100644 --- a/documentation-ui/stories/custom/slide-in.stories.tsx +++ b/documentation-ui/stories/custom/slide-in.stories.tsx @@ -1,20 +1,20 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import { SlideIn } from "src/custom/slide-in"; +import type { Meta, StoryObj } from '@storybook/react' +import { SlideIn } from 'src/custom/slide-in' const meta: Meta = { component: () => { return (
      - {["Item 1", "Item 2", "Item 3"].map((item) => ( + {['Item 1', 'Item 2', 'Item 3'].map((item) => ( {item} ))}
      - ); + ) }, -}; +} -export default meta; +export default meta export const Default: StoryObj = { args: {}, -}; +} diff --git a/documentation-ui/stories/custom/theme-selector.stories.tsx b/documentation-ui/stories/custom/theme-selector.stories.tsx index 5f931f8..f57a5cd 100644 --- a/documentation-ui/stories/custom/theme-selector.stories.tsx +++ b/documentation-ui/stories/custom/theme-selector.stories.tsx @@ -1,17 +1,17 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { ThemeSelector } from "src/custom/theme-selector"; -import { useTheme } from "src/custom/use-theme"; +import { Meta, StoryObj } from '@storybook/react' +import { ThemeSelector } from 'src/custom/theme-selector' +import { useTheme } from 'src/custom/use-theme' export function ThemeSelectorDemo() { - const { theme, setMode } = useTheme(); - return ; + const { theme, setMode } = useTheme() + return } const meta: Meta = { component: ThemeSelectorDemo, -}; +} -export default meta; +export default meta export const Default: StoryObj = { args: {}, -}; +} diff --git a/sphinx-ui/.gitignore b/sphinx-ui/.gitignore index f0a1613..825f213 100644 --- a/sphinx-ui/.gitignore +++ b/sphinx-ui/.gitignore @@ -1,5 +1,5 @@ -.venv -.nodeenv +.venv +.nodeenv .devcontainer node_modules diff --git a/sphinx-ui/README.md b/sphinx-ui/README.md index 96dc8e2..688cb23 100644 --- a/sphinx-ui/README.md +++ b/sphinx-ui/README.md @@ -16,7 +16,7 @@ html_theme = 'quantinuum_sphinx' html_favicon = '' ``` -Create a file `./_static/nav-config.js` containing: +Create a file `./_static/nav-config.js` containing: ```js const navConfig = { diff --git a/sphinx-ui/quantinuum_sphinx/static/styles/quantinuum-sphinx.css b/sphinx-ui/quantinuum_sphinx/static/styles/quantinuum-sphinx.css index 73bd591..cbc66ce 100644 --- a/sphinx-ui/quantinuum_sphinx/static/styles/quantinuum-sphinx.css +++ b/sphinx-ui/quantinuum_sphinx/static/styles/quantinuum-sphinx.css @@ -7,7 +7,7 @@ html { position: fixed; top: 3.5rem; } - .page { + .page { margin-top: 3.5rem; } diff --git a/sphinx-ui/react/.prettierrc b/sphinx-ui/react/.prettierrc index dcc2ee9..67765b8 100644 --- a/sphinx-ui/react/.prettierrc +++ b/sphinx-ui/react/.prettierrc @@ -8,4 +8,3 @@ "@trivago/prettier-plugin-sort-imports" ] } - \ No newline at end of file diff --git a/sphinx-ui/react/README.md b/sphinx-ui/react/README.md index dad55d6..944f71f 100644 --- a/sphinx-ui/react/README.md +++ b/sphinx-ui/react/README.md @@ -7,7 +7,7 @@ Install deps: Build UI assets: -`npm run build` +`npm run build` outputs js and css to `build` diff --git a/sphinx-ui/react/tsconfig.json b/sphinx-ui/react/tsconfig.json index 5f4ea3f..fc79077 100644 --- a/sphinx-ui/react/tsconfig.json +++ b/sphinx-ui/react/tsconfig.json @@ -31,4 +31,3 @@ "strictNullChecks": true } } - \ No newline at end of file