zidanezidane-ui/
The setup wizard over an OnboardingHost: the provider, the flow with its eleven steps, and the hooks and the frame to build your own.
import { … } from 'zidane-ui/onboarding'ui/src/onboarding/index.ts
Use this entry point to show the setup wizard of zidane in a React app. OnboardingProvider starts a run over an OnboardingHost. OnboardingFlow shows the run: the steps in a rail (dots on narrow windows), the current step and its number, and the keyboard. Enter moves on, and Escape goes back. To replace a step, pass your component in steps. To build your own flow, use useOnboarding, useOnboardingStep, OnboardingStepFrame and the step components. The model in zidane/chat/pure defines the steps, their order and what a run writes. The host contract is in zidane-ui/onboarding/headless, and a fixture host in zidane-ui/onboarding/testing.
import type { OnboardingHost } from 'zidane-ui/onboarding/headless'
import { OnboardingFlow, OnboardingProvider } from 'zidane-ui/onboarding'
declare const host: OnboardingHost
export function Setup({ onClose }: { onClose: () => void }) {
return (
<OnboardingProvider host={host} onDone={onClose}>
<OnboardingFlow />
</OnboardingProvider>
)
}Components#
ApprovalDemoComponent#
The mini demos of the setup wizard: small decorative scenes of what a feature, an extension or an approval mode does, and the scenes of the tutorials, one per topic, each taking the step on show.
AutonomyStepComponent#
The Autonomy step.
ConnectorsStepComponent#
The Connectors step.
ConnectProviderCardComponent#
Renders the Connect a provider card. Its strings are connectProviderTitle, connectProviderBody and
connectProviderAction of the onboarding labels; it needs no OnboardingProvider.
ConnectStepComponent#
The Connect step.
ConversationPresetPreviewComponent#
Renders the sample conversation with tabs for your settings and for each preset. A tab only previews. The Use button applies the previewed preset.
ConversationPreviewComponent#
Renders the sample conversation with a set of transcript settings, in a small window.
ConversationStepComponent#
The Conversation step.
DeliveryDemoComponent#
Renders the demo of a "Messages during a run" choice.
DemoStageComponent#
Renders the stage of a demo: a canvas-toned panel with a faint dot grid.
ExtensionDemoComponent#
Renders the demo of a native extension, or nothing for an extension without one.
ExtensionMarkComponent#
Renders an extension's mark: its own icon, its logo, or its letter, on a tinted tile. The Extensions rows, the source browser's rows and the settings nav draw this one.
ExtensionsStepComponent#
The Extensions step.
FeatureDemoComponent#
Renders the demo of a feature, or nothing for a feature without one.
FeaturesStepComponent#
The Features step.
ImportStepComponent#
The Bring your setup step.
LookStepComponent#
The Look step.
OnboardingFlowComponent#
Renders the run: progress, the current step, and the keyboard.
OnboardingHostProviderComponent#
Puts an OnboardingHost in context for the OnboardingProviders below (what AppHostProvider does with
its onboarding).
OnboardingProviderComponent#
Provides a setup wizard run over a host to the steps below it.
OnboardingStepFrameComponent#
Renders a step's page, its footer wired to the run.
ProviderMarkComponent#
Renders a provider's logo: its own, the one of the extension that adds it, a chip for a local server, or its letter.
ReadyStepComponent#
The Ready step.
SandboxDemoComponent#
The mini demos of the setup wizard: small decorative scenes of what a feature, an extension or an approval mode does, and the scenes of the tutorials, one per topic, each taking the step on show.
SkillSourceBrowserComponent#
Renders the skill source browser: a field, the recommended sources, and the skills of the open source.
SkillsStepComponent#
The Skills step.
SourceBrowserComponent#
Renders a source browser: a field, the recommended sources, and the rows of the open source.
TutorialComponent#
Renders the tutorial of a topic: its scene, which plays the steps in turn, beside the steps.
WelcomeStepComponent#
The Welcome step.
Functions#
extensionMarkOfFunction#
The mark of an extension: extensionMark of its entry, the rule every app and every row shares.
hasFeatureDemoFunction#
Whether a feature has a demo.
transcriptPreviewOptionsFunction#
The transcript options that a set of settings gives: the keys it sets, the rest left to the transcript's defaults.
useOnboardingFunction#
Returns the run from the nearest OnboardingProvider. Throws when called outside one.
useOnboardingHostFunction#
The OnboardingHost from the nearest OnboardingHostProvider, or null.
useOnboardingLabelsFunction#
Returns the wizard's strings: the defaults merged with any overrides given to OnboardingProvider or LabelsProvider.
useOnboardingStepFunction#
Returns the current step and the moves out of it.
useSignInFunction#
Follows one browser sign-in at a time.
Constants#
GITHUB_SKILL_SOURCE_IMAGESConstant#
The pictures of GitHub: owner avatars and repository previews.
NATIVE_EXTENSION_ICONSConstant#
The icons of the native extensions, by name (their catalog icon.gui).
ONBOARDING_STEP_COMPONENTSConstant#
The component of each step, as OnboardingFlow renders them.
TUTORIAL_SCENESConstant#
The scene of each tutorial.
Interfaces#
AutonomyStepPropsInterface#
Props of AutonomyStep.
ConnectorsStepPropsInterface#
Props of ConnectorsStep.
ConnectProviderCardPropsInterface#
Props of ConnectProviderCard: the attributes of its div, plus onConnect.
ConnectStepPropsInterface#
Props of ConnectStep.
ConversationPresetPreviewPropsInterface#
Props of ConversationPresetPreview.
ConversationPreviewPropsInterface#
Props of ConversationPreview.
ConversationStepPropsInterface#
Props of ConversationStep.
DemoPropsInterface#
What every demo takes: whether the switch it shows is on.
ExtensionMarkEntryInterface#
The extension an ExtensionMark draws.
ExtensionMarkPropsInterface#
Props of ExtensionMark.
ExtensionsStepPropsInterface#
Props of ExtensionsStep.
FeaturesStepPropsInterface#
Props of FeaturesStep.
ImportStepPropsInterface#
Props of ImportStep.
LookStepPropsInterface#
Props of LookStep.
OnboardingFlowPropsInterface#
Props of OnboardingFlow.
OnboardingHostProviderPropsInterface#
Props for OnboardingHostProvider.
OnboardingProviderPropsInterface#
Props of OnboardingProvider.
OnboardingRunInterface#
The run in context, from the nearest OnboardingProvider.
OnboardingStepFramePropsInterface#
Props of OnboardingStepFrame.
OnboardingStepNavInterface#
The current step and the moves out of it, for a step's footer.
ProviderMarkPropsInterface#
Props of ProviderMark.
ReadyStepPropsInterface#
Props of ReadyStep.
ScenePropsInterface#
What every tutorial scene takes.
SignInHandleInterface#
A sign-in a component runs.
SkillSourceBrowserPropsInterface#
Props of SkillSourceBrowser.
SkillsStepPropsInterface#
Props of SkillsStep.
SourceBrowserPropsInterface#
Props of SourceBrowser.
SourceBrowserRowInterface#
What SourceBrowserProps.renderRow gets for one row.
SourceBrowserWordsInterface#
The words of a SourceBrowser that depend on what it lists.
SourceCardInterface#
What the card of an open source shows. A skills listing's source is one.
SourcePickInterface#
A pick: anything with a key that is stable across listings of the same source.
TutorialPropsInterface#
Props of Tutorial.
WelcomeStepPropsInterface#
Props of WelcomeStep.