diff --git a/packages/website/package.json b/packages/website/package.json index 31d5c5185..b7efd459a 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -74,6 +74,7 @@ "@typescript-eslint/eslint-plugin": "^5.30.5", "@typescript-eslint/parser": "^5.30.5", "@unocss/cli": "^0.43.2", + "@unocss/reset": "^0.43.2", "@vitejs/plugin-react": "^1.3.2", "c8": "^7.11.3", "concurrently": "^7.2.2", diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx index 0ee99ba46..9b4f7718b 100644 --- a/packages/website/src/components/DocContainer.tsx +++ b/packages/website/src/components/DocContainer.tsx @@ -1,5 +1,6 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism'; +import { Separator } from './Seperator'; import { TypeParamTable } from './TypeParamTable'; import { generateIcon } from '~/util/icon'; import type { TypeParameterData } from '~/util/parse.server'; @@ -9,38 +10,43 @@ export interface DocContainerProps { kind: string; excerpt: string; summary?: string | null; - children?: JSX.Element; + children?: JSX.Element | JSX.Element[]; typeParams?: TypeParameterData[]; } export function DocContainer({ name, kind, excerpt, summary, typeParams, children }: DocContainerProps) { return ( -
-

- {generateIcon(kind, 'mr-2')} - {name} -

-

Code declaration:

-
- - {excerpt} - + <> +
+

+ {generateIcon(kind, 'mr-2')} + {name} +

- {typeParams?.length ? ( - <> -

Type Parameters

- - - ) : null} -

Summary

-

{summary ?? 'No summary provided.'}

- {children} -
+
+
+ + {excerpt} + +
+

Summary

+

{summary ?? 'No summary provided.'}

+ + {typeParams?.length ? ( + <> +

Type Parameters

+ + + + ) : null} +
{children}
+
+ ); } diff --git a/packages/website/src/components/ItemSidebar.tsx b/packages/website/src/components/ItemSidebar.tsx index 39482f4d5..7002bdda6 100644 --- a/packages/website/src/components/ItemSidebar.tsx +++ b/packages/website/src/components/ItemSidebar.tsx @@ -1,4 +1,4 @@ -import { AiOutlineMenu } from 'react-icons/ai'; +import { FiMenu } from 'react-icons/fi'; import { VscPackage } from 'react-icons/vsc'; import { generateIcon } from '~/util/icon'; import type { getMembers } from '~/util/parse.server'; @@ -17,14 +17,14 @@ function onMenuClick() { export function ItemSidebar({ packageName, data }: ItemListProps) { return ( -
+

{`${packageName}`}

-
diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx new file mode 100644 index 000000000..c99c4fb3f --- /dev/null +++ b/packages/website/src/components/MethodItem.tsx @@ -0,0 +1,51 @@ +import { FiLink } from 'react-icons/fi'; +import { ParameterTable } from './ParameterTable'; +import type { DocMethod } from '~/DocModel/DocMethod'; +import type { DocMethodSignature } from '~/DocModel/DocMethodSignature'; +import { constructHyperlinkedText } from '~/util/util'; + +type MethodResolvable = ReturnType | ReturnType; + +export interface MethodItemProps { + data: MethodResolvable; +} + +function getShorthandName(data: MethodResolvable) { + return `${data.name}(${data.parameters.reduce((prev, cur, index) => { + if (index === 0) { + return `${prev}${cur.name}`; + } + + return `${prev}, ${cur.name}`; + }, '')})`; +} + +function onAnchorClick() { + console.log('anchor clicked'); + // Todo implement jump-to links +} + +export function MethodItem({ data }: MethodItemProps) { + return ( +
+
+ +
+
+

{`${getShorthandName(data)}`}

+

:

+

+ {constructHyperlinkedText(data.returnTypeTokens)} +

+
+
+
+
+ {data.summary &&

{data.summary}

} + {data.parameters.length ? : null} +
+
+ ); +} diff --git a/packages/website/src/components/MethodList.tsx b/packages/website/src/components/MethodList.tsx index a3be348b4..e2301b3e0 100644 --- a/packages/website/src/components/MethodList.tsx +++ b/packages/website/src/components/MethodList.tsx @@ -1,3 +1,4 @@ +import { MethodItem } from './MethodItem'; import type { DocMethod } from '~/DocModel/DocMethod'; import type { DocMethodSignature } from '~/DocModel/DocMethodSignature'; @@ -8,12 +9,12 @@ export interface MethodListProps { export function MethodList({ data }: MethodListProps) { return (
-

Methods

-
    +

    Methods

    +
    {data.map((method) => ( -
  • {method.name}
    • + ))} -
+
); } diff --git a/packages/website/src/components/ParameterTable.tsx b/packages/website/src/components/ParameterTable.tsx index 08fda4a95..83256d648 100644 --- a/packages/website/src/components/ParameterTable.tsx +++ b/packages/website/src/components/ParameterTable.tsx @@ -1,35 +1,31 @@ +import { Table } from './Table'; import { constructHyperlinkedText } from '../util/util'; import type { ParameterDocumentation } from '~/util/parse.server'; interface ParameterDetailProps { data: ParameterDocumentation[]; + className?: string | undefined; } -export function ParameterTable({ data }: ParameterDetailProps) { +export function ParameterTable({ data, className }: ParameterDetailProps) { + const rows = data.map((param) => ({ + Name: param.name, + Type: constructHyperlinkedText(param.tokens), + Optional: param.isOptional ? 'Yes' : 'No', + Description: 'None', + })); + + const columnStyles = { + Name: 'font-mono', + Type: 'font-mono', + }; + return ( -
- - - - - - - - - - - {data.map((parameter) => ( - - - - - - - ))} - -
NameTypeOptionalDescription
{parameter.name} - {constructHyperlinkedText(parameter.tokens)} - {parameter.isOptional ? 'Yes' : 'No'}None
-
+ ); } diff --git a/packages/website/src/components/PropertyItem.tsx b/packages/website/src/components/PropertyItem.tsx new file mode 100644 index 000000000..51f82f9e3 --- /dev/null +++ b/packages/website/src/components/PropertyItem.tsx @@ -0,0 +1,19 @@ +import type { DocProperty } from '~/DocModel/DocProperty'; +import { constructHyperlinkedText } from '~/util/util'; + +export interface PropertyItemProps { + data: ReturnType; +} + +export function PropertyItem({ data }: PropertyItemProps) { + return ( +
+
+

{`${data.name}`}

+

:

+

{constructHyperlinkedText(data.propertyTypeTokens)}

+
+ {data.summary &&

{data.summary}

} +
+ ); +} diff --git a/packages/website/src/components/PropertyList.tsx b/packages/website/src/components/PropertyList.tsx index 55ab1226b..30d082443 100644 --- a/packages/website/src/components/PropertyList.tsx +++ b/packages/website/src/components/PropertyList.tsx @@ -1,3 +1,4 @@ +import { PropertyItem } from './PropertyItem'; import type { DocProperty } from '~/DocModel/DocProperty'; export interface PropertyListProps { @@ -6,13 +7,11 @@ export interface PropertyListProps { export function PropertyList({ data }: PropertyListProps) { return ( -
-

Properties

-
    - {data.map((prop) => ( -
  • {prop.name}
    • - ))} -
+
+

Properties

+ {data.map((prop) => ( + + ))}
); } diff --git a/packages/website/src/components/Seperator.tsx b/packages/website/src/components/Seperator.tsx new file mode 100644 index 000000000..7b43af0fb --- /dev/null +++ b/packages/website/src/components/Seperator.tsx @@ -0,0 +1,3 @@ +export function Separator() { + return
; +} diff --git a/packages/website/src/components/Table.tsx b/packages/website/src/components/Table.tsx new file mode 100644 index 000000000..e7f070521 --- /dev/null +++ b/packages/website/src/components/Table.tsx @@ -0,0 +1,49 @@ +export interface RowData { + monospace?: boolean; + content: string; +} + +export interface TableProps { + columns: string[]; + columnStyles?: Record; + rows: Record[]; + className?: string | undefined; +} + +export function Table({ rows, columns, columnStyles, className }: TableProps) { + return ( +
+
+ + + {columns.map((column) => ( + + ))} + + + + {rows.map((row, i) => ( + + {Object.entries(row).map(([colName, val]) => { + console.log(colName); + console.log(columnStyles?.[colName]); + return ( + + ); + })} + + ))} + +
+ {column} +
+ {val} +
+
+ ); +} diff --git a/packages/website/src/components/TypeParamTable.tsx b/packages/website/src/components/TypeParamTable.tsx index f0d09d37a..47038e70b 100644 --- a/packages/website/src/components/TypeParamTable.tsx +++ b/packages/website/src/components/TypeParamTable.tsx @@ -1,39 +1,33 @@ +import { Table } from './Table'; import type { TypeParameterData } from '~/util/parse.server'; import { constructHyperlinkedText } from '~/util/util'; export interface TableProps { data: TypeParameterData[]; + className?: string; } -export function TypeParamTable({ data }: TableProps) { +export function TypeParamTable({ data, className }: TableProps) { + const rows = data.map((typeParam) => ({ + Name: typeParam.name, + Constraints: constructHyperlinkedText(typeParam.constraintTokens), + Optional: typeParam.optional ? 'Yes' : 'No', + Default: constructHyperlinkedText(typeParam.defaultTokens), + Description: 'None', + })); + + const rowElements = { + Name: 'font-mono', + Constraints: 'font-mono', + Default: 'font-mono', + }; + return ( -
- - - - - - - - - - - - {data.map((parameter) => ( - - - - - - - - ))} - -
NameConstraintOptionalDefaultDescription
{parameter.name} - {constructHyperlinkedText(parameter.constraintTokens)} - {parameter.optional ? 'Yes' : 'No'} - {constructHyperlinkedText(parameter.defaultTokens)} - None
-
+ ); } diff --git a/packages/website/src/components/model/Class.tsx b/packages/website/src/components/model/Class.tsx index 5c054513d..a86020666 100644 --- a/packages/website/src/components/model/Class.tsx +++ b/packages/website/src/components/model/Class.tsx @@ -1,6 +1,7 @@ import { DocContainer } from '../DocContainer'; import { MethodList } from '../MethodList'; import { PropertyList } from '../PropertyList'; +import { Separator } from '../Seperator'; import type { DocClass } from '~/DocModel/DocClass'; export interface ClassProps { @@ -17,8 +18,19 @@ export function Class({ data }: ClassProps) { typeParams={data.typeParameterData} > <> - {data.properties.length ? : null} - {data.methods.length ? : null} + {data.properties.length ? ( + <> + + + + ) : null} + + {data.methods.length ? ( + <> + + + + ) : null} ); diff --git a/packages/website/src/components/model/Function.tsx b/packages/website/src/components/model/Function.tsx index 5879f61aa..467458427 100644 --- a/packages/website/src/components/model/Function.tsx +++ b/packages/website/src/components/model/Function.tsx @@ -15,6 +15,7 @@ export function Function({ data }: FunctionProps) { summary={data.summary} typeParams={data.typeParameterData} > +

Parameters

); diff --git a/packages/website/src/components/model/TypeAlias.tsx b/packages/website/src/components/model/TypeAlias.tsx index eda5208c5..e8fbbf7c5 100644 --- a/packages/website/src/components/model/TypeAlias.tsx +++ b/packages/website/src/components/model/TypeAlias.tsx @@ -13,8 +13,6 @@ export function TypeAlias({ data }: TypeAliasProps) { excerpt={data.excerpt} summary={data.summary} typeParams={data.typeParameterData} - > -
WIP
- + /> ); } diff --git a/packages/website/src/routes/docs/$branchName/packages/$packageName.tsx b/packages/website/src/routes/docs/$branchName/packages/$packageName.tsx index 070d5eee0..601e7e4c0 100644 --- a/packages/website/src/routes/docs/$branchName/packages/$packageName.tsx +++ b/packages/website/src/routes/docs/$branchName/packages/$packageName.tsx @@ -39,11 +39,11 @@ export default function Package() { const { packageName } = useParams(); return ( -
+
-
+
diff --git a/packages/website/src/styles/main.css b/packages/website/src/styles/main.css index 8f334d19d..a1c824ccf 100644 --- a/packages/website/src/styles/main.css +++ b/packages/website/src/styles/main.css @@ -1,3 +1,4 @@ +@import '@unocss/reset/tailwind.css'; @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); html, diff --git a/packages/website/src/util/parse.server.ts b/packages/website/src/util/parse.server.ts index ae14ea8b9..c84a0b503 100644 --- a/packages/website/src/util/parse.server.ts +++ b/packages/website/src/util/parse.server.ts @@ -143,6 +143,11 @@ export function genReference(item: ApiItem) { } export function genToken(model: ApiModel, token: ExcerptToken) { + if (token.canonicalReference) { + // @ts-expect-error + token.canonicalReference._navigation = '.'; + } + const item = token.canonicalReference ? model.resolveDeclarationReference(token.canonicalReference, undefined).resolvedApiItem ?? null : null; diff --git a/yarn.lock b/yarn.lock index 8b944adc7..9b25c693a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3079,6 +3079,7 @@ __metadata: "@typescript-eslint/eslint-plugin": ^5.30.5 "@typescript-eslint/parser": ^5.30.5 "@unocss/cli": ^0.43.2 + "@unocss/reset": ^0.43.2 "@vitejs/plugin-react": ^1.3.2 "@vscode/codicons": ^0.0.31 c8: ^7.11.3 @@ -5089,7 +5090,7 @@ __metadata: languageName: node linkType: hard -"@unocss/reset@npm:0.43.2": +"@unocss/reset@npm:0.43.2, @unocss/reset@npm:^0.43.2": version: 0.43.2 resolution: "@unocss/reset@npm:0.43.2" checksum: ea9a47d09b179f9b0ee2ff96e5f1617b8f6f3e790f809f9c8e2824e2bb048f0c5b0f653f50f2501f2b1e46e604f344981c94054e70deb1728b34cd440b119be3