Tabs

// Pseudocode walkthrough of the Foldkit integration points. Each labeled
// block below is an excerpt. Fit them into your own Model, init, Message,
// update, and view definitions.
import { Match as M, Option } from 'effect'
import { Update } from 'foldkit'
import type { HtmlBuilder } from 'foldkit/html'
import { m } from 'foldkit/message'
import { evo } from 'foldkit/struct'

import { Tabs } from '@foldkit/ui'

const Framework = S.Literals(['Foldkit', 'React', 'Elm'])
type Framework = typeof Framework.Type

// Add fields to your Model for the Tabs Submodel and the active tab. The
// Submodel keeps private keyboard-focus state; the parent owns the active
// tab value and passes it back in as selectedValue.
const Model = S.Struct({
  tabs: Tabs.Model,
  activeFramework: Framework,
  // ...your other fields
})

// In your init function, initialize the Tabs Submodel with a unique id and
// pick the starting active tab:
const init = () => [
  {
    tabs: Tabs.init({ id: 'framework-tabs' }),
    activeFramework: 'Foldkit',
    // ...your other fields
  },
  [],
]

// Embed the Tabs Message in your parent Message:
const GotTabsMessage = m('GotTabsMessage', {
  message: Tabs.Message,
})

// Declare a typed Tabs factory once at module scope. The Value generic
// types tab.value in toView so the consumer can switch on it without
// casting:
const FrameworkTabs = Tabs.create<Framework>()

const frameworks: ReadonlyArray<Framework> = ['Foldkit', 'React', 'Elm']

const descriptions: Record<Framework, string> = {
  Foldkit: 'Model-View-Update with Effect.',
  React: 'Component-based with hooks.',
  Elm: 'The original MVU architecture.',
}

// At module scope, fold the OutMessage into your own Model. `Selected`
// carries the chosen value (typed as `Framework`) and its index. Fold the
// value into your own Model so it flows back in as selectedValue. The arm
// returns an Update.Step over the parent Model, which already has the next
// Tabs Model written back:
const foldTabsOutMessage = M.type<Tabs.OutMessage<Framework>>().pipe(
  M.withReturnType<Update.Step<Model, Message>>(),
  M.tagsExhaustive({
    // The child has emitted `Selected`. Store the selected value as the new
    // active tab. In this arm the parent can also update its own state or
    // dispatch Commands, for example route to a new URL, persist the
    // selection, or trigger a panel content fetch.
    Selected:
      ({ value }) =>
      model => [evo(model, { activeFramework: () => value }), []],
  }),
)

// Update.foldChild wires the child into the parent: it runs
// FrameworkTabs.update, writes the next Tabs Model back, maps the Submodel's
// Commands into your Message type, and hands any OutMessage to
// foldOutMessage.
const foldTabs = Update.foldChild({
  update: FrameworkTabs.update,
  read: (model: Model) => Option.some(model.tabs),
  write: (model, nextTabs) => evo(model, { tabs: () => nextTabs }),
  toParentMessage: message => GotTabsMessage({ message }),
  foldOutMessage: foldTabsOutMessage,
})

// Inside your update function's M.tagsExhaustive({...}), call the fold:
GotTabsMessage: ({ message }) => foldTabs(model, message)

// Inside your view function, embed the tabs via h.submodel and pass the
// parent-owned active tab as selectedValue:
const view = (model: Model, h: HtmlBuilder<Message>) =>
  h.submodel({
    slotId: 'framework-tabs',
    model: model.tabs,
    view: FrameworkTabs.view,
    viewInputs: {
      tabs: frameworks,
      selectedValue: model.activeFramework,
      ariaLabel: 'Framework comparison',
      toView: ({ tablist, tabs, activeIndex }) =>
        h.div(
          [],
          [
            h.div(
              [...tablist, h.Class('flex')],
              tabs.map(tab =>
                h.button(
                  [
                    ...tab.tab,
                    h.Class(
                      'px-4 py-2 rounded-t-lg border data-[selected]:bg-white data-[selected]:border-b-0',
                    ),
                  ],
                  [h.span([], [tab.value])],
                ),
              ),
            ),
            ...tabs
              .filter(tab => tab.index === activeIndex)
              .map(tab =>
                h.div(
                  [...tab.panel, h.Class('p-6 border rounded-b-lg')],
                  [h.p([], [descriptions[tab.value]])],
                ),
              ),
          ],
        ),
    },
    toParentMessage: message => GotTabsMessage({ message }),
  })

// Pseudocode walkthrough using the same Model, init, Message, and update
// as the basic tabs; only the view config changes to set orientation and
// use flex + flex-col for layout.
import type { HtmlBuilder } from 'foldkit/html'
import { m } from 'foldkit/message'

import { Tabs } from '@foldkit/ui'

const GotTabsMessage = m('GotTabsMessage', {
  message: Tabs.Message,
})

const Framework = S.Literals(['Foldkit', 'React', 'Elm'])
type Framework = typeof Framework.Type

const FrameworkTabs = Tabs.create<Framework>()
const frameworks: ReadonlyArray<Framework> = ['Foldkit', 'React', 'Elm']

const descriptions: Record<Framework, string> = {
  Foldkit: 'Model-View-Update with Effect.',
  React: 'Component-based with hooks.',
  Elm: 'The original MVU architecture.',
}

// Inside your view function, set orientation to 'Vertical' and use flex +
// flex-col for layout:
const view = (model: Model, h: HtmlBuilder<Message>) =>
  h.submodel({
    slotId: 'framework-tabs',
    model: model.tabs,
    view: FrameworkTabs.view,
    viewInputs: {
      tabs: frameworks,
      selectedValue: model.activeFramework,
      ariaLabel: 'Framework comparison',
      orientation: 'Vertical',
      toView: ({ tablist, tabs, activeIndex }) =>
        h.div(
          [h.Class('flex')],
          [
            h.div(
              [...tablist, h.Class('flex flex-col')],
              tabs.map(tab =>
                h.button(
                  [
                    ...tab.tab,
                    h.Class(
                      'px-4 py-2 text-left rounded-l-lg border mr-[-1px] data-[selected]:bg-white data-[selected]:border-r-0',
                    ),
                  ],
                  [h.span([], [tab.value])],
                ),
              ),
            ),
            ...tabs
              .filter(tab => tab.index === activeIndex)
              .map(tab =>
                h.div(
                  [...tab.panel, h.Class('flex-1 p-6 border rounded-r-lg')],
                  [h.p([], [descriptions[tab.value]])],
                ),
              ),
          ],
        ),
    },
    toParentMessage: message => GotTabsMessage({ message }),
  })