setupSteps

Steps of the plugin in Hodi's setup, the wizard that opens at the first start. They are for what the plugin must know from the beginning, such as the name of a public site.

Where in Hodi

Hodi's setup is the wizard that opens at the first start. The wizard goes through steps. One of these steps, Plugins found, lists the plugins present and offers to turn them on. The steps of the plugins turned on come right after, before The server is ready.

Example

This step asks for the site's name, saves it, then goes to the next step with next():

import { SetupActions, TextField, definePlugin } from 'hodi:sdk'

const Welcome = ({ next }) => {
  const [name, setName] = useState('')
  const save = async () => {
    await saveName(name)
    next()
  }
  return (
    <>
      <TextField
        aria-label="Site name"
        value={name}
        onChange={event => setName(event.target.value)}
      />
      <SetupActions onNext={save} />
    </>
  )
}

definePlugin({
  setupSteps: [
    {
      id: 'welcome',
      title: 'setup.title',
      intro: 'setup.intro',
      page: Welcome
    }
  ]
})

A step's fields

setupSteps is a list. Each step of the list has four fields:

Props

Who draws what

• Hodi draws the card, the title, the line under the title, the numbering and Back.
• The plugin draws the middle, and ends with SetupActions, which shows Continue.

Good to know

• Who sees the steps: the admin, if the plugin is on at the Plugins found step.
• A Hodi step: { id: 'mail', core: 'mail' } adds the form of Server › E-mail.