import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
import * as EntryShellStories from './EntryShell.stories'

<Meta of={EntryShellStories} />

# EntryShell

What an app shows while nobody is signed in to it: its logo, one line saying
why, and at most one button.

<Canvas of={EntryShellStories.MessageWithAction} />

## When

- **`busy`**: entry is still being decided. The logo alone, faded in after
  150ms, so an entry that resolves at once flashes nothing. It carries the
  pulse class too, as Peek's did; the reveal overrides it here, and an app
  that themes the pulse draws its own instead.
- **A `message` and an `action`**: entry stopped and one thing would get the
  person in.
- **A `message` alone**: entry stopped and nothing the person can do would
  help, so there is no button.
- **An `action` alone**: the button with no line over it.
- **`action.disabled`**: the button held while what it started is still
  running, so a second tap starts nothing.

<Canvas of={EntryShellStories.Busy} />

<Canvas of={EntryShellStories.MessageOnly} />

## When not

- Inside the app's frame. It stands in *for* the whole app while entry is
  decided; a page or a section with nothing to show inside the frame is an
  [**EmptyState**](?path=/docs/feedback-emptystate--docs).

## How

```tsx
import { EntryShell } from '@estiva-app/ui'

<EntryShell logo={appLogo} busy busyLabel="Opening" />

<EntryShell
  logo={appLogo}
  message={why}
  action={canRecover ? { label: continueLabel, onClick: start, disabled: starting } : undefined}
/>
```

- **The words are the caller's**: the line, the button's label and
  `busyLabel`.
- **`action.onClick` runs from the tap itself.** Start anything that needs the
  person's gesture there, not behind anything asynchronous, and pass
  `disabled` while it runs.
- **The logo is drawn as given**, at the size the app draws its mark. While
  `busy`, the pulse goes on that element itself, so it must take a
  `className`.
- **What a screen reader hears**: while `busy`, a busy status named
  `busyLabel` ("Loading" when you pass none); afterwards the line is a polite
  status, read when it appears.

## What it owns

Nothing. It only draws. Clicks and keys are yours.

## Props

<Controls of={EntryShellStories.MessageWithAction} />