docs: Inkdrop v6 — guides, components & pnpm migration

src/app/components/button/page.mdx

@@ -0,0 +1,70 @@
+export const metadata = {
+  title: 'Button',
+  description: 'A built-in styled React button component of Inkdrop with optional icon and tooltip support',
+}
+
+# Button
+
+A built-in React [component](/modules/component-manager) of Inkdrop that renders a styled button
+with optional icon and tooltip support.
+In addition to the props below, `Button` accepts all standard
+[`<button>` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#attributes)
+such as `onClick`, `disabled`, and `type`.
+
+To get the class of the `Button` component:
+
+```tsx
+import type { ButtonProps } from '@inkdropapp/types'
+
+const Button = inkdrop.components.getComponentClass<ButtonProps>('Button')
+```
+
+## Props
+
+```typescript
+type ButtonProps = {
+  // The element type to render as. Defaults to 'button'.
+  as?: React.ElementType
+  // The name of a Streamline icon to render before the children.
+  icon?: string
+  // Render with primary styling.
+  primary?: boolean
+  // Render with negative (destructive) styling.
+  negative?: boolean
+  // Render with basic styling.
+  basic?: boolean
+  // Render without the default `ui button` classes.
+  bare?: boolean
+  // Tooltip content shown while hovering the button.
+  tooltip?: React.ReactNode
+  // Additional class name applied to the tooltip.
+  tooltipClassName?: string
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+```
+
+## Example
+
+```tsx
+import React, { useCallback } from 'react'
+import type { ButtonProps } from '@inkdropapp/types'
+
+const SaveButton: React.FC = () => {
+  const Button = inkdrop.components.getComponentClass<ButtonProps>('Button')
+
+  const onClick = useCallback(() => {
+    inkdrop.commands.dispatch(document.body, 'core:save-note')
+  }, [])
+
+  return (
+    <Button primary tooltip="Save the note" onClick={onClick}>
+      Save
+    </Button>
+  )
+}
+
+export default SaveButton
+```
+
+## See also
+
+- [CommandButton](/components/command-button) — a `Button` that dispatches an Inkdrop command when clicked.

src/app/components/command-button/page.mdx

@@ -0,0 +1,59 @@
+export const metadata = {
+  title: 'CommandButton',
+  description: 'A built-in React component of Inkdrop that dispatches a command when clicked and shows its keybinding in a tooltip',
+}
+
+# CommandButton
+
+A built-in React [component](/modules/component-manager) of Inkdrop that extends [Button](/components/button).
+When clicked, it dispatches an Inkdrop [command](/modules/command-registry), and its tooltip automatically
+shows the command's keybinding.
+
+To get the class of the `CommandButton` component:
+
+```tsx
+import type { CommandButtonProps } from '@inkdropapp/types'
+
+const CommandButton =
+  inkdrop.components.getComponentClass<CommandButtonProps>('CommandButton')
+```
+
+## Props
+
+`CommandButton` accepts all [Button](/components/button) props in addition to the following:
+
+```typescript
+type CommandButtonProps = ButtonProps & {
+  // The command to dispatch when the button is clicked.
+  command?: string
+  // The DOM element to dispatch the command on. Defaults to document.body.
+  commandTarget?: HTMLElement
+  // The detail payload passed with the dispatched command.
+  commandDetail?: any
+}
+```
+
+## Example
+
+```tsx
+import React from 'react'
+import type { CommandButtonProps } from '@inkdropapp/types'
+
+const SaveButton: React.FC = () => {
+  const CommandButton =
+    inkdrop.components.getComponentClass<CommandButtonProps>('CommandButton')
+
+  return (
+    <CommandButton primary command="core:save-note">
+      Save
+    </CommandButton>
+  )
+}
+
+export default SaveButton
+```
+
+## See also
+
+- [Button](/components/button) — the base button component.
+- [Command Registry](/modules/command-registry) — how Inkdrop commands are registered and dispatched.

src/app/components/dialog/page.mdx

@@ -1,6 +1,6 @@
 export const metadata = {
   title: 'Dialog',
-  description: 'A built-in React component of Inkdrop that allows you to display a simple modal dialog with buttons',
+  description: 'A built-in React component of Inkdrop that allows you to display a modal dialog with a title, content, and actions',
 }
 
 # Dialog
@@ -9,37 +9,88 @@ export const metadata = {
 Available since v3.5.1.
 </Note>
 
-A built-in React [component](/modules/component-manager) of Inkdrop that allows you to display a simple modal dialog with buttons.
-To get the class of `Dialog` component:
+A built-in React [component](/modules/component-manager) of Inkdrop that displays a modal dialog.
+It is built on top of the [Modal](/components/modal) component and provides
+`Title`, `Content`, and `Actions` sub-components for laying out a dialog.
 
-```js
-const Dialog = inkdrop.components.getComponentClass('Dialog')
+To get the class of the `Dialog` component:
+
+```tsx
+import type { Dialog } from '@inkdropapp/types'
+
+const Dialog = inkdrop.components.getComponentClass('Dialog') as Dialog
 ```
 
+<Note>
+`Dialog` is cast to its type so that the `Dialog.Title`, `Dialog.Content`, and
+`Dialog.Actions` sub-components are typed. A plain
+`getComponentClass<DialogProps>('Dialog')` only types the props.
+</Note>
+
 ## Props
 
+`Dialog` accepts all [Modal](/components/modal) props in addition to the following:
+
 ```typescript
-type Props = {
-  className?: string,
-  children?: React.Node,
-  visible: boolean,
-  hiding: boolean,
-  onBackdropClick?: () => any,
-  autofocus?: boolean
+type DialogProps = ModalProps & {
+  className?: string
+  children?: React.ReactNode
+  // Render the dialog at a larger width.
+  large?: boolean
 }
 ```
 
-## Example
+### Sub-components
+
+<Properties>
+  <Property name="Dialog.Title" type="React.FC<DialogTitleProps>">
+    The header of the dialog.
+
+    ```typescript
+    type DialogTitleProps = {
+      className?: string
+      children?: React.ReactNode
+    }
+    ```
+  </Property>
+  <Property name="Dialog.Content" type="React.FC<DialogContentProps>">
+    The main body of the dialog.
+
+    ```typescript
+    type DialogContentProps = {
+      className?: string
+      // Lay out the content as a flex container.
+      flex?: boolean
+      // Remove the default padding.
+      noPadding?: boolean
+      children?: React.ReactNode
+      // The CSS `overflow` value applied to the content.
+      overflow?: React.CSSProperties['overflow']
+    }
+    ```
+  </Property>
+  <Property name="Dialog.Actions" type="React.FC<DialogActionsProps>">
+    The footer of the dialog, typically containing buttons.
+
+    ```typescript
+    type DialogActionsProps = {
+      className?: string
+      children?: React.ReactNode
+    }
+    ```
+  </Property>
+</Properties>
 
-```js
-'use babel'
+## Example
 
+```tsx
 import React, { useEffect, useCallback } from 'react'
 import { logger, useModal } from 'inkdrop'
+import type { Dialog as DialogType } from '@inkdropapp/types'
 
-const HelloMessageDialog = props => {
+const HelloMessageDialog: React.FC = () => {
   const modal = useModal()
-  const { Dialog } = inkdrop.components.classes
+  const Dialog = inkdrop.components.getComponentClass('Dialog') as DialogType
 
   const toggle = useCallback(() => {
     modal.show()
@@ -75,4 +126,5 @@ It produces:
 
 ## See also
 
+- [Modal](/components/modal) — the lower-level overlay component that `Dialog` builds on.
 - [The plugin tutorial](/guides/plugin-word-count#understanding-the-generated-code) that uses the `Dialog` component.

src/app/components/modal/page.mdx

@@ -0,0 +1,73 @@
+export const metadata = {
+  title: 'Modal',
+  description: 'A built-in React component of Inkdrop that renders a modal overlay with backdrop, focus management, and animations',
+}
+
+# Modal
+
+A built-in React [component](/modules/component-manager) of Inkdrop that renders a modal overlay.
+It handles backdrop clicks, the <kbd>Esc</kbd> key, focus management, and enter/exit animations.
+For a higher-level dialog with a title, content, and actions, use the [Dialog](/components/dialog) component.
+
+To get the class of the `Modal` component:
+
+```tsx
+import type { ModalProps } from '@inkdropapp/types'
+
+const Modal = inkdrop.components.getComponentClass<ModalProps>('Modal')
+```
+
+## Props
+
+```typescript
+type ModalProps = {
+  className?: string
+  children: React.ReactNode
+  // Whether the modal is visible.
+  visible: boolean
+  // Called when the backdrop is clicked.
+  onBackdropClick?: () => any
+  // Called when the Esc key is pressed.
+  onEscKeyDown?: () => any
+  // Move focus into the modal when it opens. Defaults to true.
+  autofocus?: boolean
+  // Restore focus to the previously focused element when it closes.
+  autoRestoreFocus?: boolean
+  // Play enter/exit animations. Defaults to true.
+  animate?: boolean
+}
+```
+
+## Example
+
+```tsx
+import React, { useCallback, useEffect } from 'react'
+import { useModal } from 'inkdrop'
+import type { ModalProps } from '@inkdropapp/types'
+
+const MyOverlay: React.FC = () => {
+  const modal = useModal()
+  const Modal = inkdrop.components.getComponentClass<ModalProps>('Modal')
+
+  const toggle = useCallback(() => modal.show(), [])
+
+  useEffect(() => {
+    const sub = inkdrop.commands.add(document.body, {
+      'yourplugin:toggle': toggle
+    })
+    return () => sub.dispose()
+  }, [toggle])
+
+  return (
+    <Modal {...modal.state} onBackdropClick={modal.close}>
+      <div className="my-overlay">Hello, world!</div>
+    </Modal>
+  )
+}
+
+export default MyOverlay
+```
+
+## See also
+
+- [Dialog](/components/dialog) — a higher-level dialog built on top of `Modal`.