kit

empty

Built revision v17.10.0

React
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

empty

An empty Calendar week with an inert action and disabled More, its hours kept.

View
Mon
Tue
Wed

Nothing booked this week. Start a booking on any day.

Choose a hall before starting a booking.

Choose a hall before importing bookings.

Nothing booked this week. Start a booking on any day.

Choose a hall before starting a booking.

Choose a hall before importing bookings.

An empty Calendar month.

View
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Nothing booked this month. Start a booking on any day.

Nothing booked this month. Start a booking on any day.

An empty region whose next action waits, its words beneath it.

Invitations

No invitations yet. People you invite stand here until they accept.

Add an email address before inviting someone.

An empty region with a disabled action and inert More, their words together.

Invitations

No invitations yet. People you invite stand here until they accept.

Add an email address before inviting someone.

Choose a hall before importing invitations.

A Headed region standing alone with nothing in it yet.

Key holders

No key holders yet. Anyone given a key to the hall shows here.

Source
module Calendar = KitReact.Layouts.Calendar

let reader = Specimen_Reader.reader

let hour = (on): Calendar.DeskGrid.hour => {time: KitReact.Time.clock(reader, {hour: on, minute: 0}), props: {}}

let weekDay = (on): KitReact.Time.t => KitReact.Time.day(reader, {year: 2025, month: 4, day: on})

let weekHead = (on): Calendar.DeskGrid.head => {key: Int.toString(on), column: Day(weekDay(on)), props: {}}

let column = (key): Calendar.DeskGrid.column => {key, children: React.null, props: {}}

let monthDay = (on): KitReact.Time.t => KitReact.Time.day(reader, {year: 2027, month: 2, day: on})

let february = Array.fromInitializer(~length=28, index => index + 1)

let weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]->Array.map((name): Calendar.MonthGrid.head => {
  key: name,
  heading: <strong> {React.string(name)} </strong>,
  props: {},
})

let nothing = <p> {React.string("Nothing booked")} </p>

let scope = (prefix): KitReact.Roles.FormGroup.props => {
  id: `${prefix}-scope-form-group`,
  kind: Select,
  label: React.string("Hall"),
  labelProps: {htmlFor: `${prefix}-scope`},
  controlProps: {id: `${prefix}-scope`},
  options: [{label: React.string("All halls"), value: "all", props: {}}],
}

let view = (prefix, value) =>
  <KitReact.Roles.FormGroup id={`${prefix}-view-form-group`}
    label={React.string("View")}
    kind={KitReact.Roles.SegmentedControl.controlSet({name: `${prefix}-view`, value, options: Three({value: "week", content: React.string("Week")}, {value: "day", content: React.string("Day")}, {value: "month", content: React.string("Month")})})}
  />

@react.component
let make = (~print: Specimen_Print.t) =>
  <>
    <p className="specimen-case-line" id="state-empty-menu-subject">{React.string("An empty Calendar week with an inert action and disabled More, its hours kept.")}</p>
    <Calendar
      printIdentity={print.identity} printSubject={print.subject} printStanding={print.standing} printTenant=?print.tenant
      subjectState=Some(Empty({
        words: [KitReact.Words.Text("Nothing booked this week. Start a booking on any day.")],
        actions: [{children: React.string("New booking"), state: KitReact.ActionState.Inert({id: "empty-calendar-new", words: [KitReact.Words.Text("Choose a hall before starting a booking.")]})}, {children: React.string("Add a closure")}],
        more: KitReact.Roles.ActionMenu.role({
          id: "empty-calendar-more", label: "More actions for this calendar",
          state: Disabled({id: "empty-calendar-more-trigger", words: [KitReact.Words.Text("Choose a hall before importing bookings.")]}),
          groups: [{items: [KitReact.Menu.Item({name: "Import bookings"}), KitReact.Menu.Item({name: "Copy bookings from another week"})]}],
        }),
      }))
      scopeId="state-empty-calendar-filters"
      filtersLabel="Filters"
      toolbarProps={{ariaLabel: "Calendar controls"}}
      range={
        days: KitReact.Time.dayRange(reader, ~first={year: 2025, month: 4, day: 21}, ~last={year: 2025, month: 4, day: 23}),
        today: {label: "Today", props: {}},
        previous: {label: "Previous week", href: "?week=previous", props: {rel: "prev"}},
        next: {label: "Next week", href: "?week=next", props: {rel: "next"}},
        date: {group: {id: "empty-date", label: React.string("Go to a date"), kind: KitReact.Roles.DateField.control({name: "date", reader: Specimen_Reader.reader, value: Day(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 21})), today: KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 21}), direction: Either})}},
      }
      scope=[FormGroup(scope("state-empty-calendar"))]
      view={view("state-empty-calendar", "week")}
      actions={content: [Calendar.PrimaryAction({children: React.string("New booking")})]}
      content={subjectRegion => <>
        <Calendar.DeskGrid subjectRegion
          columnHeads=[weekHead(21), weekHead(22), weekHead(23)]
          hours=[hour(9), hour(10), hour(11), hour(12)]
          columns=[column("21"), column("22"), column("23")]
        />
        <Calendar.Days subjectRegion>
          {React.array([21, 22, 23]->Array.map(on => <Calendar.Day key={Int.toString(on)} day={weekDay(on)} empty=nothing />))}
        </Calendar.Days>
      </>}
    />
    <p className="specimen-case-line">{React.string("An empty Calendar month.")}</p>
    <Calendar
      printIdentity={print.identity} printSubject={print.subject} printStanding={print.standing} printTenant=?print.tenant
      subjectState=Some(Empty({
        words: [KitReact.Words.Text("Nothing booked this month. Start a booking on any day.")],
        actions: [{children: React.string("New booking")}, {children: React.string("Add a closure")}],
      }))
      scopeId="state-empty-month-filters"
      filtersLabel="Filters"
      toolbarProps={{ariaLabel: "Calendar controls"}}
      range={
        days: KitReact.Time.month(reader, ~year=2027, ~month=2),
        today: {label: "Today", props: {}},
        previous: {label: "Previous month", href: "?month=previous", props: {rel: "prev"}},
        next: {label: "Next month", href: "?month=next", props: {rel: "next"}},
        date: {group: {id: "empty-date-3", label: React.string("Go to a date"), kind: KitReact.Roles.DateField.control({name: "date", reader: Specimen_Reader.reader, value: Day(KitReact.Time.day(Specimen_Reader.reader, {year: 2027, month: 2, day: 1})), today: KitReact.Time.day(Specimen_Reader.reader, {year: 2027, month: 2, day: 1}), direction: Either})}},
      }
      scope=[FormGroup(scope("state-empty-month"))]
      view={view("state-empty-month", "month")}
      actions={content: [Calendar.PrimaryAction({children: React.string("New booking")})]}
      content={subjectRegion => <>
        <Calendar.MonthGrid subjectRegion columns=7 columnHeads=weekdays>
          {React.array(february->Array.map(on => <Calendar.MonthCell key={Int.toString(on)} day={KitReact.Time.dayNumber(reader, {year: 2027, month: 2, day: on})} />))}
        </Calendar.MonthGrid>
        <Calendar.Days subjectRegion>
          {React.array(february->Array.map(on => <Calendar.Day key={Int.toString(on)} day={monthDay(on)} empty=nothing />))}
        </Calendar.Days>
      </>}
    />
    <p className="specimen-case-line" id="state-empty-inert-action">{React.string("An empty region whose next action waits, its words beneath it.")}</p>
    <KitReact.Roles.HeadedRegion
      heading={[KitReact.Words.Text("Invitations")]}
      content={React.null}
      state=Empty({
        words: [KitReact.Words.Text("No invitations yet. People you invite stand here until they accept.")],
        actions: [{children: React.string("Invite someone"), state: KitReact.ActionState.Inert({id: "empty-invitation-waiting", words: [KitReact.Words.Text("Add an email address before inviting someone.")]})}],
      })
    />
    <p className="specimen-case-line" id="state-empty-menu-region">{React.string("An empty region with a disabled action and inert More, their words together.")}</p>
    <KitReact.Roles.HeadedRegion
      heading={[KitReact.Words.Text("Invitations")]}
      content={React.null}
      state=Empty({
        words: [KitReact.Words.Text("No invitations yet. People you invite stand here until they accept.")],
        actions: [{children: React.string("Invite someone"), state: KitReact.ActionState.Disabled({id: "empty-invitation-new", words: [KitReact.Words.Text("Add an email address before inviting someone.")]})}, {children: React.string("Share a sign-up link")}],
        more: KitReact.Roles.ActionMenu.role({
          id: "empty-invitation-more", label: "More actions for invitations",
          state: Inert({id: "empty-invitation-more-trigger", words: [KitReact.Words.Text("Choose a hall before importing invitations.")]}),
          groups: [{items: [KitReact.Menu.Item({name: "Import invitations"}), KitReact.Menu.Item({name: "Copy invitations from another hall"})]}],
        }),
      })
    />
    <p className="specimen-case-line">{React.string("A Headed region standing alone with nothing in it yet.")}</p>
    <KitReact.Roles.HeadedRegion
      heading={[KitReact.Words.Text("Key holders")]}
      content={React.null}
      state=Empty({
        words: [KitReact.Words.Text("No key holders yet. Anyone given a key to the hall shows here.")],
        actions: [{children: React.string("Add a key holder")}, {children: React.string("Copy key holders from another hall")}],
      })
    />
  </>