Creating flowers

You can create one or more flowers, depending on how you want to structure your project. Ideally every major feature of your application should be handled by a separate flower.

Flower json model

To create a new flower, click on "Create Flower" in the Flower extension menu. A new .json file will be created, with the name key to fill in: that should be the flower name. Save the file to a location of your choice; the naming convention is [your_flower_name].flower.json.

When working on a flower in the graphical interface, this is the file that Flower reads and writes to everytime you change something. It is a serializable format of your flower, meaning that you could potentially store it on a database and retrieve it at runtime.

note

You should not need to edit a flower .json file directly.

Flower React component

Now that you have a flower configuration file, you should insert the corresponding Flower React component in your project; you can add it in the place it makes more sense for your project.

A flower is associated with a reducer, that acts as a state for that flower. For instance:

import Flower from '@stackhouseos/flower-client'
import loginFlow from './login.flower.json'

const LoginFeature = () => (
  <Flower name={loginFlow.name} elements={loginFlow.elements} reducerName='login' />
)

The LoginFeature component may be used as a page of you application; the content of the page and the logic behind it can now be handled entirely with Flower, via its graphical interface.