diff --git a/src/app/component/[component]/code-docs/page.tsx b/src/app/component/[component]/code-docs/page.tsx index 3bdf3783..e68ecdc9 100644 --- a/src/app/component/[component]/code-docs/page.tsx +++ b/src/app/component/[component]/code-docs/page.tsx @@ -5,6 +5,7 @@ import { css } from '@emotion/css'; import { TableSkeleton } from '@leafygreen-ui/skeleton-loader'; import { spacing } from '@leafygreen-ui/tokens'; import { InstallCard, PropsTable, VersionCard } from '@/components/code-docs'; +import { useMediaQuery } from '@/hooks/useMediaQuery'; import { components } from '@/utils'; import { TSDocResponse, @@ -15,6 +16,9 @@ import { import { getTSDocFromServer, getChangelogFromServer } from './server'; export default function Page({ params }: { params: { component: string } }) { + const [isTablet] = useMediaQuery(['(max-width: 768px)'], { + fallback: [true], + }); const [isLoading, setIsLoading] = useState(true); const [componentProps, setComponentProps] = useState>( [], @@ -78,11 +82,13 @@ export default function Page({ params }: { params: { component: string } }) {
+ { const [components, setComponents] = useState([]); @@ -46,6 +46,9 @@ const useGetInitialContentStackContext = () => { export default function Template({ children }: { children: React.ReactNode }) { const { darkMode } = useDarkMode(); + const [isMobile] = useMediaQuery(['(max-width: 640px)'], { + fallback: [false], + }); const { components, contentPageGroups } = useGetInitialContentStackContext(); return ( @@ -80,13 +83,17 @@ export default function Template({ children }: { children: React.ReactNode }) {
{ - const [packageManager, setPackageManager] = useState("yarn"); + const [packageManager, setPackageManager] = useState('yarn'); return ( @@ -27,7 +27,8 @@ export const InstallCard = ({ component }: { component: string }) => {
{ id="install-instructions" className={css` margin: unset; + width: unset; `} > - {packageManager === "yarn" + {packageManager === 'yarn' ? `yarn add @leafygreen-ui/${component}` : `npm i @leafygreen-ui/${component}`} diff --git a/src/components/code-docs/VersionCard.tsx b/src/components/code-docs/VersionCard.tsx index d280f917..19425354 100644 --- a/src/components/code-docs/VersionCard.tsx +++ b/src/components/code-docs/VersionCard.tsx @@ -1,16 +1,16 @@ -"use client"; +'use client'; -import React, { useEffect, useState } from "react"; -import { css } from "@emotion/css"; -import Button from "@leafygreen-ui/button"; -import Card from "@leafygreen-ui/card"; +import React, { useEffect, useState } from 'react'; +import { css } from '@emotion/css'; +import Button from '@leafygreen-ui/button'; +import Card from '@leafygreen-ui/card'; // @ts-expect-error -import ActivityFeed from "@leafygreen-ui/icon/dist/ActivityFeed"; -import Modal from "@leafygreen-ui/modal"; -import { CardSkeleton } from "@leafygreen-ui/skeleton-loader"; -import { spacing } from "@leafygreen-ui/tokens"; -import { Subtitle } from "@leafygreen-ui/typography"; -import { color } from "@leafygreen-ui/tokens"; +import ActivityFeed from '@leafygreen-ui/icon/dist/ActivityFeed'; +import Modal from '@leafygreen-ui/modal'; +import { CardSkeleton } from '@leafygreen-ui/skeleton-loader'; +import { spacing } from '@leafygreen-ui/tokens'; +import { Subtitle } from '@leafygreen-ui/typography'; +import { color } from '@leafygreen-ui/tokens'; export const VersionCard = ({ component, @@ -26,14 +26,14 @@ export const VersionCard = ({ useEffect(() => { getChangelog(component) - .then((response) => { + .then(response => { setChangelog(response); }) .finally(() => setIsLoading(false)); }, [component, getChangelog]); useEffect(() => { - setVersion(changelog?.split("h2")[1]?.replace(/[>/<]+/g, "") ?? null); + setVersion(changelog?.split('h2')[1]?.replace(/[>/<]+/g, '') ?? null); }, [changelog]); if (isLoading) { @@ -55,7 +55,7 @@ export const VersionCard = ({ leftGlyph={} onClick={() => setIsModalOpen(true)} > - View Changelog + View Changelog
{ const { theme } = useDarkMode(); const Component = node.bold ? 'b' : 'span'; - console.log({ node }); return ( void; + children: React.ReactNode; +}) => { + const { theme } = useDarkMode(); + const [firstMount, setFirstMount] = useState(false); + + useEffect(() => { + if (isOpen && !firstMount) { + setFirstMount(true); + } + }, [isOpen, firstMount]); + + if (!firstMount) { + return null; + } + + return ( + <> +
+ +
+ + + + {children} +
+ + ); +}; diff --git a/src/components/global/SideNavigation/SideNavItem.tsx b/src/components/global/SideNavigation/SideNavItem.tsx new file mode 100644 index 00000000..3d83e35a --- /dev/null +++ b/src/components/global/SideNavigation/SideNavItem.tsx @@ -0,0 +1,96 @@ +import Link from 'next/link'; +import { css, cx } from '@emotion/css'; +import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; +import { color, spacing } from '@leafygreen-ui/tokens'; + +export function SideNavItem({ + children, + className, + active, + href, + ...rest +}: JSX.IntrinsicElements['li'] & { + active?: boolean; + href: string; +}) { + const { theme } = useDarkMode(); + return ( + +
  • + {children} +
    • + + ); +} diff --git a/src/components/global/SideNavigation/SideNavLabel.tsx b/src/components/global/SideNavigation/SideNavLabel.tsx new file mode 100644 index 00000000..e2b61c74 --- /dev/null +++ b/src/components/global/SideNavigation/SideNavLabel.tsx @@ -0,0 +1,32 @@ +import { css } from '@emotion/css'; +import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; +import { palette } from '@leafygreen-ui/palette'; +import { spacing } from '@leafygreen-ui/tokens'; + +export function SideNavLabel({ + label, + glyph, +}: { + label: string; + glyph?: React.ReactNode; +}) { + const { darkMode } = useDarkMode(); + + return ( +

    + {glyph} + {label.split('-').join(' ')} +

    + ); +} diff --git a/src/components/global/SideNavigation/SideNavList.tsx b/src/components/global/SideNavigation/SideNavList.tsx new file mode 100644 index 00000000..58203b23 --- /dev/null +++ b/src/components/global/SideNavigation/SideNavList.tsx @@ -0,0 +1,15 @@ +import { css } from '@emotion/css'; + +export function SideNavList({ children }: { children: React.ReactNode }) { + return ( +
      + {children} +
    + ); +} diff --git a/src/components/global/SideNavigation.tsx b/src/components/global/SideNavigation/SideNavigation.tsx similarity index 55% rename from src/components/global/SideNavigation.tsx rename to src/components/global/SideNavigation/SideNavigation.tsx index 7f0e6f63..18e93f3c 100644 --- a/src/components/global/SideNavigation.tsx +++ b/src/components/global/SideNavigation/SideNavigation.tsx @@ -3,8 +3,7 @@ import React from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { css, cx } from '@emotion/css'; - +import { css } from '@emotion/css'; // @ts-expect-error import GovernmentBuildingIcon from '@leafygreen-ui/icon/dist/GovernmentBuilding'; // @ts-expect-error @@ -13,191 +12,34 @@ import UniversityIcon from '@leafygreen-ui/icon/dist/University'; import AppsIcon from '@leafygreen-ui/icon/dist/Apps'; // @ts-expect-error import LockIcon from '@leafygreen-ui/icon/dist/Lock'; +// @ts-expect-error +import MenuIcon from '@leafygreen-ui/icon/dist/Menu'; +import IconButton from '@leafygreen-ui/icon-button'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { MongoDBLogo, SupportedColors } from '@leafygreen-ui/logo'; -import { palette } from '@leafygreen-ui/palette'; import { color, spacing } from '@leafygreen-ui/tokens'; - import { SIDE_NAV_WIDTH } from '@/constants'; +import { useMediaQuery } from '@/hooks/useMediaQuery'; import { ComponentMeta, Group, groupedComponents } from '@/utils/components'; - -function NavLabel({ - label, - glyph, -}: { - label: string; - glyph?: React.ReactNode; -}) { - const { darkMode } = useDarkMode(); - - return ( -

    - {glyph} - {label.split('-').join(' ')} -

    - ); -} - -function NavList({ children }: { children: React.ReactNode }) { - return ( -
      - {children} -
    - ); -} - -function NavItem({ - children, - className, - active, - href, - ...rest -}: JSX.IntrinsicElements['li'] & { - active?: boolean; - href: string; -}) { - const { theme } = useDarkMode(); - return ( - -
  • - {children} -
    • - - ); -} +import { Drawer } from './Drawer'; +import { SideNavItem } from './SideNavItem'; +import { SideNavLabel } from './SideNavLabel'; +import { SideNavList } from './SideNavList'; export function SideNavigation() { + const [open, setOpen] = React.useState(false); + const [isMobile] = useMediaQuery(['(max-width: 640px)'], { + fallback: [false], + }); const pathname = usePathname(); const [_, topLevelPage, activeSubDirOrPage] = pathname.split('/'); const currentComponent = topLevelPage === 'component' ? activeSubDirOrPage : ''; const { darkMode, theme } = useDarkMode(); - return ( -