CM1: Handling State

[matheusps]

Shoreline state handling

Current model

In Admin UI components, we have 3 ways of state handling:

1. State hooks: Composed of a stateless component, and a hook that provides the state to the component through a state prop. Example: Menu, Modal, Combobox, Datepicker.

function Example() {
  const state = useMenuState()

  return (
    <>
      <MenuButton state={state}>
        Label
      </MenuButton>

      <Menu state={state}>
        <MenuItem label="Item 1" />
        <MenuItem label="Item 2" />
      </Menu>
    </>
  )
}

2. Controlled Components: The component have its own state (uncontrolled). The developer can take control of the state, through props and callbacks. Example: Select, Tooltip, Checkbox.

function Example() {
  const [value, setValue] = useState('')

  return (
    <Select
      label="Label"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    >
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </Select>
  )
}

3. Component hooks: When UI is not well defined, only exposes behaviors through getters. Example: useCollapsibe, useTable.

function Example() {
  const { getToggleProps, getCollapseProps } = useCollapsible()

  return (
    <>
      <button {...getToggleProps()}>Toggle</button>
      <div {...getCollapseProps()}>content</div>
    </>
  )
}

Proposal

In Shoreline e intent to

Full form component:

function Example() {
  return (
    <MenuProvider>
      <MenuButton>Label</MenuButton>
      <Menu>
        <MenuItem label="Item 1" />
        <MenuItem label="Item 2" />
      </Menu>
    </MenuProvider>
  )
}

Specialized version

function Example() {
  return (
    <ActionMenu label="Label">
      <MenuItem label="Item 1" />
      <MenuItem label="Item 2" />
    </ActionMenu>
  )
}

function Example() {
  const [open, setOpen] = useState(false) 
  
  return (
    <Menu label="Label" open={open} setOpen={setOpen}>
      <MenuItem label="Item 1" />
      <MenuItem label="Item 2" />
    </Menu>
  )
}

Component Providers

function Example() {
  return (
    <CollapsibleProvider>
      <CollapsibleTrigger asChild>
        <button>Toggle</button>
      </CollapsibleTrigger>
      <CollapsibleContent>content</CollapsibleContent>
    </CollapsibleProvider>
  )
}

function Example() {
  const [visible, setVisible] = useState(false)

  return (
    <CollapsibleProvider visible={visible} setVisible={setVisible}>
      <CollapsibleTrigger asChild>
        <button>Toggle</button>
      </CollapsibleTrigger>
      <CollapsibleContent>content</CollapsibleContent>
    </CollapsibleProvider>
  )
}