From 5b4672bad331912d9d6c375a34b6deabe4ddba99 Mon Sep 17 00:00:00 2001 From: iCrawl Date: Tue, 23 Aug 2022 13:21:32 +0200 Subject: [PATCH] refactor: css --- .../website/src/components/CodeListing.tsx | 35 ++++---- .../website/src/components/DocContainer.tsx | 9 +- .../src/components/InheritanceText.tsx | 2 +- .../website/src/components/MethodItem.tsx | 28 +++--- packages/website/src/components/Section.tsx | 7 +- packages/website/src/components/Sections.tsx | 8 +- .../website/src/components/SidebarLayout.tsx | 90 +++++++++---------- .../website/src/components/model/Enum.tsx | 2 +- .../src/components/tsdoc/BlockComment.tsx | 20 ++--- packages/website/src/pages/docs/[...slug].tsx | 2 +- 10 files changed, 100 insertions(+), 103 deletions(-) diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx index e3eeb3287..6ba880d4e 100644 --- a/packages/website/src/components/CodeListing.tsx +++ b/packages/website/src/components/CodeListing.tsx @@ -1,6 +1,6 @@ -import { ActionIcon, Badge, Box, Group, MediaQuery, Stack, Title } from '@mantine/core'; +import { ActionIcon, Badge, Box, createStyles, Group, MediaQuery, Stack, Title } from '@mantine/core'; import { useMediaQuery } from '@mantine/hooks'; -import type { ReactNode } from 'react'; +import type { PropsWithChildren } from 'react'; import { FiLink } from 'react-icons/fi'; import { HyperlinkedText } from './HyperlinkedText'; import { InheritanceText } from './InheritanceText'; @@ -14,6 +14,17 @@ export enum CodeListingSeparatorType { Value = '=', } +const useStyles = createStyles((theme) => ({ + outer: { + display: 'flex', + gap: 16, + + [theme.fn.smallerThan('sm')]: { + flexDirection: 'column', + }, + }, +})); + export function CodeListing({ name, separator = CodeListingSeparatorType.Type, @@ -25,7 +36,7 @@ export function CodeListing({ comment, deprecation, inheritanceData, -}: { +}: PropsWithChildren<{ name: string; separator?: CodeListingSeparatorType; typeTokens: TokenDocumentation[]; @@ -33,25 +44,15 @@ export function CodeListing({ optional?: boolean; summary?: ApiItemJSON['summary']; comment?: AnyDocNodeJSON | null; - children?: ReactNode; deprecation?: AnyDocNodeJSON | null; inheritanceData?: InheritanceData | null; -}) { - const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); +}>) { + const { classes } = useStyles(); + const matches = useMediaQuery('(max-width: 768px)'); return ( - ({ - display: 'flex', - gap: 16, - - [theme.fn.smallerThan('sm')]: { - flexDirection: 'column', - }, - })} - ml={matches ? 0 : -45} - > + diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx index ca83728b0..cf3d0fd4a 100644 --- a/packages/website/src/components/DocContainer.tsx +++ b/packages/website/src/components/DocContainer.tsx @@ -1,7 +1,7 @@ import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton, Divider } from '@mantine/core'; import { useMediaQuery } from '@mantine/hooks'; import { useRouter } from 'next/router'; -import { Fragment, type ReactNode } from 'react'; +import { Fragment, type PropsWithChildren } from 'react'; import { VscSymbolClass, VscSymbolMethod, @@ -23,19 +23,18 @@ import type { TypeParameterData } from '~/DocModel/TypeParameterMixin'; import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode'; import type { TokenDocumentation } from '~/util/parse.server'; -interface DocContainerProps { +type DocContainerProps = PropsWithChildren<{ name: string; kind: string; excerpt: string; summary?: ApiItemJSON['summary']; - children?: ReactNode; extendsTokens?: TokenDocumentation[] | null; implementsTokens?: TokenDocumentation[][]; typeParams?: TypeParameterData[]; comment?: AnyDocNodeJSON | null; methods?: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] | null; properties?: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] | null; -} +}>; function generateIcon(kind: string) { const icons = { @@ -63,7 +62,7 @@ export function DocContainer({ properties, }: DocContainerProps) { const router = useRouter(); - const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); + const matches = useMediaQuery('(max-width: 768px)'); return ( diff --git a/packages/website/src/components/InheritanceText.tsx b/packages/website/src/components/InheritanceText.tsx index 6f2fb999b..fe1eb035f 100644 --- a/packages/website/src/components/InheritanceText.tsx +++ b/packages/website/src/components/InheritanceText.tsx @@ -4,7 +4,7 @@ import type { InheritanceData } from '~/DocModel/ApiNodeJSONEncoder'; export function InheritanceText({ data }: { data: InheritanceData }) { return ( - + {'Inherited from '} diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx index 82b84feef..a56156620 100644 --- a/packages/website/src/components/MethodItem.tsx +++ b/packages/website/src/components/MethodItem.tsx @@ -1,4 +1,4 @@ -import { ActionIcon, Badge, Box, Group, MediaQuery, Stack, Title } from '@mantine/core'; +import { ActionIcon, Badge, Box, createStyles, Group, MediaQuery, Stack, Title } from '@mantine/core'; import { useMediaQuery } from '@mantine/hooks'; import { FiLink } from 'react-icons/fi'; import { HyperlinkedText } from './HyperlinkedText'; @@ -8,6 +8,17 @@ import { TSDoc } from './tsdoc/TSDoc'; import type { ApiMethodJSON, ApiMethodSignatureJSON } from '~/DocModel/ApiNodeJSONEncoder'; import { Visibility } from '~/DocModel/Visibility'; +const useStyles = createStyles((theme) => ({ + outer: { + display: 'flex', + gap: 16, + + [theme.fn.smallerThan('sm')]: { + flexDirection: 'column', + }, + }, +})); + function getShorthandName(data: ApiMethodJSON | ApiMethodSignatureJSON) { return `${data.name}${data.optional ? '?' : ''}(${data.parameters.reduce((prev, cur, index) => { if (index === 0) { @@ -19,7 +30,8 @@ function getShorthandName(data: ApiMethodJSON | ApiMethodSignatureJSON) { } export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJSON }) { - const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); + const { classes } = useStyles(); + const matches = useMediaQuery('(max-width: 768px)'); const method = data as ApiMethodJSON; const key = `${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`; @@ -27,17 +39,7 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ - ({ - display: 'flex', - gap: 16, - - [theme.fn.smallerThan('sm')]: { - flexDirection: 'column', - }, - })} - ml={matches ? 0 : -45} - > + diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx index 948546d57..ae17459fe 100644 --- a/packages/website/src/components/Section.tsx +++ b/packages/website/src/components/Section.tsx @@ -8,7 +8,7 @@ import { Text, useMantineColorScheme, } from '@mantine/core'; -import { type ReactNode, useState, useEffect } from 'react'; +import { useState, useEffect, type PropsWithChildren } from 'react'; import { VscChevronDown } from 'react-icons/vsc'; const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({ @@ -39,14 +39,13 @@ export function Section({ dense = false, defaultClosed = false, children, -}: { +}: PropsWithChildren<{ title: string; icon?: JSX.Element; padded?: boolean; dense?: boolean; defaultClosed?: boolean; - children: ReactNode; -}) { +}>) { const [opened, setOpened] = useState(!defaultClosed); const { colorScheme } = useMantineColorScheme(); const { classes } = useStyles({ opened }); diff --git a/packages/website/src/components/Sections.tsx b/packages/website/src/components/Sections.tsx index 111555b72..7c1fc1166 100644 --- a/packages/website/src/components/Sections.tsx +++ b/packages/website/src/components/Sections.tsx @@ -10,7 +10,7 @@ import type { ApiClassJSON, ApiConstructorJSON, ApiInterfaceJSON } from '~/DocMo import type { ParameterDocumentation } from '~/util/parse.server'; export function PropertiesSection({ data }: { data: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] }) { - const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); + const matches = useMediaQuery('(max-width: 768px)'); return data.length ? (
} padded dense={matches}> @@ -20,7 +20,7 @@ export function PropertiesSection({ data }: { data: ApiClassJSON['properties'] | } export function MethodsSection({ data }: { data: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] }) { - const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); + const matches = useMediaQuery('(max-width: 768px)'); return data.length ? (
} padded dense={matches}> @@ -30,7 +30,7 @@ export function MethodsSection({ data }: { data: ApiClassJSON['methods'] | ApiIn } export function ParametersSection({ data }: { data: ParameterDocumentation[] }) { - const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); + const matches = useMediaQuery('(max-width: 768px)'); return data.length ? (
} padded dense={matches}> @@ -40,7 +40,7 @@ export function ParametersSection({ data }: { data: ParameterDocumentation[] }) } export function ConstructorSection({ data }: { data: ApiConstructorJSON }) { - const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); + const matches = useMediaQuery('(max-width: 768px)'); const getShorthandName = () => `constructor(${data.parameters.reduce((prev, cur, index) => { diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx index 462399138..c30b36993 100644 --- a/packages/website/src/components/SidebarLayout.tsx +++ b/packages/website/src/components/SidebarLayout.tsx @@ -88,6 +88,47 @@ const useStyles = createStyles( transition: 'transform 150ms ease', transform: openedVersion ? 'rotate(180deg)' : 'rotate(0deg)', }, + + content: { + position: 'relative', + minHeight: 'calc(100vh - 50px)', + zIndex: 1, + background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0], + boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', + }, + + footer: { + position: 'fixed', + bottom: 0, + left: 0, + right: 0, + height: 200, + background: theme.colorScheme === 'dark' ? theme.colors.dark![7] : theme.colors.gray![0], + paddingLeft: 324, + + [theme.fn.smallerThan('lg')]: { + paddingRight: 24, + }, + + [theme.fn.smallerThan('md')]: { + paddingLeft: 24, + }, + + [theme.fn.smallerThan('sm')]: { + height: 300, + }, + }, + + links: { + display: 'flex', + justifyContent: 'space-between', + + [theme.fn.smallerThan('sm')]: { + flexDirection: 'column', + alignItems: 'center', + gap: 50, + }, + }, }), ); @@ -281,59 +322,18 @@ export function SidebarLayout({ } >
- ({ - position: 'relative', - minHeight: 'calc(100vh - 50px)', - zIndex: 1, - background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0], - boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', - })} - p="lg" - pb={80} - > + {children} ({ height: 200, [theme.fn.smallerThan('sm')]: { height: 300 } })}> ({ - position: 'fixed', - bottom: 0, - left: 0, - right: 0, - height: 200, - background: theme.colorScheme === 'dark' ? theme.colors.dark![7] : theme.colors.gray![0], - paddingLeft: 324, - paddingRight: data?.member?.kind !== 'Class' && data?.member?.kind !== 'Interface' ? 24 : 324, - - [theme.fn.smallerThan('lg')]: { - paddingRight: 24, - }, - - [theme.fn.smallerThan('md')]: { - paddingLeft: 24, - }, - - [theme.fn.smallerThan('sm')]: { - height: 300, - }, - })} + sx={{ paddingRight: data?.member?.kind !== 'Class' && data?.member?.kind !== 'Interface' ? 24 : 324 }} + className={classes.footer} pt={50} > - ({ - display: 'flex', - justifyContent: 'space-between', - - [theme.fn.smallerThan('sm')]: { - flexDirection: 'column', - alignItems: 'center', - gap: 50, - }, - })} - > + diff --git a/packages/website/src/components/tsdoc/BlockComment.tsx b/packages/website/src/components/tsdoc/BlockComment.tsx index e5037a3f4..31575ef72 100644 --- a/packages/website/src/components/tsdoc/BlockComment.tsx +++ b/packages/website/src/components/tsdoc/BlockComment.tsx @@ -1,9 +1,9 @@ import { Alert, Box, Title, Text } from '@mantine/core'; import { StandardTags } from '@microsoft/tsdoc'; -import type { ReactNode } from 'react'; +import type { PropsWithChildren } from 'react'; import { VscWarning } from 'react-icons/vsc'; -export function Block({ children, title }: { children: ReactNode; title: string }) { +export function Block({ children, title }: PropsWithChildren<{ title: string }>) { return ( {title} @@ -15,14 +15,11 @@ export function Block({ children, title }: { children: ReactNode; title: string export function ExampleBlock({ children, exampleIndex, -}: { - children: ReactNode; - exampleIndex?: number | undefined; -}): JSX.Element { +}: PropsWithChildren<{ exampleIndex?: number | undefined }>): JSX.Element { return {children}; } -export function DeprecatedBlock({ children }: { children: ReactNode }): JSX.Element { +export function DeprecatedBlock({ children }: PropsWithChildren): JSX.Element { return ( } title="Deprecated" variant="outline" color="red" radius="sm"> {children} @@ -30,11 +27,11 @@ export function DeprecatedBlock({ children }: { children: ReactNode }): JSX.Elem ); } -export function DefaultValueBlock({ children }: { children: ReactNode }): JSX.Element { +export function DefaultValueBlock({ children }: PropsWithChildren): JSX.Element { return {children}; } -export function RemarksBlock({ children }: { children: ReactNode }): JSX.Element { +export function RemarksBlock({ children }: PropsWithChildren): JSX.Element { return {children}; } @@ -42,11 +39,10 @@ export function BlockComment({ children, tagName, index, -}: { +}: PropsWithChildren<{ tagName: string; - children: ReactNode; index?: number | undefined; -}): JSX.Element { +}>): JSX.Element { switch (tagName.toUpperCase()) { case StandardTags.example.tagNameWithUpperCase: return {children}; diff --git a/packages/website/src/pages/docs/[...slug].tsx b/packages/website/src/pages/docs/[...slug].tsx index dbae04ba8..1058edaf5 100644 --- a/packages/website/src/pages/docs/[...slug].tsx +++ b/packages/website/src/pages/docs/[...slug].tsx @@ -203,7 +203,7 @@ const member = (props?: ApiItemJSON | undefined) => { export default function SlugPage(props: Partial) { const router = useRouter(); const [scroll, scrollTo] = useWindowScroll(); - const matches = useMediaQuery('(max-width: 1200px)', true, { getInitialValueInEffect: false }); + const matches = useMediaQuery('(max-width: 1200px)'); const name = `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`;