Button

This is a markdown document of the Button component.

You can put this page in a subGroup of the side menu using staticData.subGroup.

---

Here are some examples of library documentation tools.

Demos

The following markdown

<Demo src="./demos/demo1.tsx" />

which will result in:

Extract Type info from Typescript code

You can extract Typescript type info and render it into page. This is very useful for API documentation.

Render Interface

The following markdown

<TsInfo src="./types.ts" name="ButtonProps" />

The name should be the export name of the Typescript interface.

will result in:

Render Type Alias

Besides interface, TsInfo API also support type alias.

SomeObjectLiteralType (Object Literal):

SomeComplexType (Complex Type):

Using TsInfo API in JS files

In jsx page, You can import and render tsInfo like this:

import tsInfoData from './types.ts?tsInfo=ButtonProps'
import { TsInfo } from 'vite-pages-theme-doc'

export default function Page() {
  return <TsInfo {...tsInfoData} />
}

Render text from files

You can also render text from any files. So that these files can be both "code" and "documentation".

The following markdown

<FileText src="./types.ts" syntax="ts" />

will result in:

import type { MyImportedTypeAlias } from './typesUtils'
export type { ReExportedInterface } from './typesUtils'
export type MyExportedTypeAlias = { a: number }
type MyTypeAlias = { a: number }
export interface MyExportedInterface {
  a: number
}
interface MyInterface {
  a: number
}

/**
 * This is the description of the Button component's props
 */
export interface ButtonProps<TestGenerics extends string> extends Base {
  /**
   * the type of button
   * @defaultValue 'default'
   */
  type?: 'primary' | 'default' | 'text'
  /**
   * the size of button
   * @defaultValue 'middle'
   */
  size?: 'large' | 'middle' | 'small' | TestGenerics
  /**
   * loading state of button
   * @defaultValue false
   */
  loading?: boolean
  /**
   * click handler
   */
  onClick?: (event: React.MouseEvent) => void
  /** test method declaration */
  testMethod(param: MyExportedTypeAlias): MyTypeAlias
  /** test required property */
  testRequired: boolean
  myExportedTypeAlias: MyExportedTypeAlias
  myTypeAlias: MyTypeAlias
  myExportedInterface: MyExportedInterface
  myInterface: MyInterface
  myImportedTypeAlias: MyImportedTypeAlias
  /** test call signatures */
  (options?: { ignorePending?: true }): Array<string | Promise<string>>
  (options: { ignorePending: false }): string[]
  /** test construct signatures */
  new (options: string): MyInterface
  new (): MyInterface
}

interface Base {
  /**
   * children content
   */
  children: React.ReactNode
}

export type SomeObjectLiteralType<TestGenerics> = {
  /**
   * the type of button
   * @defaultValue 'default'
   */
  type?: 'primary' | 'default' | 'text'
  /**
   * the size of button
   * @defaultValue 'middle'
   */
  size?: 'large' | 'middle' | 'small' | TestGenerics
  /**
   * loading state of button
   * @defaultValue false
   */
  loading?: boolean
  /**
   * click handler
   */
  onClick?: (event: React.MouseEvent) => void
  /** test method declaration */
  testMethod(param: MyInterface): MyExportedInterface
  /** test required property */
  testRequired: boolean
  myExportedTypeAlias: MyExportedTypeAlias
  myTypeAlias: MyTypeAlias
  myExportedInterface: MyExportedInterface
  myInterface: MyInterface
  myImportedTypeAlias: MyImportedTypeAlias
  /** test call signatures */
  (options?: { ignorePending?: true }): Array<string | Promise<string>>
  (options: { ignorePending: false }): string[]
  /** test construct signatures */
  new (options: string): MyInterface
  new (): MyInterface
}

/**
 * Description of SomeComplexType ...
 */
export type SomeComplexType = 0 | 1 | 'a' | 'b' | { key: string }

In jsx page, You can render file text like this:

// https://vitejs.dev/guide/assets.html#importing-asset-as-string
import text from './types.ts?raw'
import { FileText } from 'vite-pages-theme-doc'

export default function Page() {
  return <FileText text={text} syntax="ts" />
}