controller.md

Basic Controller 🐤

Once you finished your first Uibook Page, you’re ready to write Uibook Controller. This is a place where all Pages included and passed to UibookStarter ✨

Let’s start with a Basic Controller. You can add Redux, Context, etc later in Advanced Controller section.

1. Create uibook-controller.js file in uibook/ folder
2. Import UibookStarter and all your Pages
3. Then export UibookStarter with the following arguments

uibook-controller.js

import UibookStarter from 'uibook/starter'

import CheckboxUibook from './checkbox.uibook'
import ButtonUibook from './button.uibook'
import PopupUibook from './popup.uibook'

export default UibookStarter({
  pages: {
    Button: ButtonUibook,
    Checkbox: CheckboxUibook,
    Popup: PopupUibook
  }
})

🚩 The key represents Page Name. You can use any Name in CamelCase:

uibook-controller.js

{
  TheBestButton: ButtonUibook,
  Agree: CheckboxUibook,
  ВсплывающееОкно: PopupUibook
}

🚩 You can use Pages nesting:

uibook-controller.js

  pages: {
    Button: ButtonUibook,
    Checkbox: CheckboxUibook,
    Popups: {
      Popup: PopupUibook
    }
  }

Amazing! You’ve finished your Basic Controller, and now you can start Uibook with your project.

Uibook integrates into your project, so just run your bundler and open /uibook (or your custom address) in a browser.

Advanced Controller

This section describes how to add Wrappers, for example, Redux, Context, etc with your switchable values.

For example, wrap the component with a new React Context API and pass custom values: locale and theme. Uibook shows custom selectors in the top bar.

…
import Context from './Context'

export default UibookStarter({
  wrapper: (children, props) =>
    <Context.Provider value={ props }>
      { children }
    </Context.Provider>,
  values: {
    locale: ['ru', 'en'],
    theme: ['dark', 'light']
  },
  pages: {
    Button: ButtonUibook,
    Checkbox: CheckboxUibook,
    Popup: PopupUibook
  }
})

🚩 locale is the only prop shown in URL. Also, it is passed to Case function:

button.uibook.js

  cases: [
    locale => <UibookCase>locale === 'de' ? 'Hund' : 'Dog'</UibookCase>,
  ]

---

← Back to the configuration guide

Next: Troubleshooting →