Components

Book

The <Book> component is the root of your bookemoji application. It receives a list of books, which is provided to other bookemoji components via contexts.

It also has an optional base prop, which defaults to /books. It is used for constructing urls.

By default, it should receive books and base from the layout loader.

It does not have any UI by default.

<script lang="ts">
  import type { LayoutData } from "./$types.js";
  import { Book } from "bookemoji/components";

  export let data: LayoutData;
</script>

<Book base={data.base} books={data.books}>
  <slot />
</Book>

Contexts

The <Book> component sets these contexts, which you can utilize for your own needs:

• bookemoji.stories - a list of the stories detected by bookemoji
• bookemoji.base - the base route path set within svelte.config.js
• bookemoji.meta - A Map<Component, ComponentMeta>, holding details about all component's "meta" (as set via defineMeta)
• bookemoji.argTypes - A A key-key-map store of Component to Variant to the argType info, as used primarily by <Controls> and defined via defineMeta

Story

<Story> is the component used to indicate a variant within a {Component}.book.svelte file.

Controls

<Controls> are used to control a story variant's args via UI. Each Controls is mapped to a specific variant via the of and story props.

<Story name="Story Name" of={SomeComponent} />
<Controls story="Story Name" of={SomeComponent} />

The name / story props must match, in addition to the of prop.

StoryList

<StoryList> is a convenience component for listing all of the stories and their variants.

Below, the <Book> sample has been modified to display as a sidebar layout really, this is roughly the source of the examples section of the website

<script lang="ts">
  import type { LayoutData } from "./$types.js";
  import { Book, StoryList } from "bookemoji/components";

  export let data: LayoutData;
</script>

<Book base="/books" books={data.books}>
  <div class="book-layout">
    <div class="book-sidebar">
      <div class="brand-header">
        <h1 class="brand-title">Your Brand Here</h1>
      </div>

      <StoryList />
    </div>
    <div class="book-canvas">
      <slot />
    </div>
  </div>
</Book>

StoryCode

The <StoryCode> component automatically generates the code representation of a story variant based on the selected props. It's designed to quickly allow developers to grab-and-go a component after tweaking it's props.

Key Features

Auto-generated Code: It takes a component and story name, then automatically generates the corresponding Svelte component code based on the current args/props.

Syntax Highlighting: Uses Shiki for beautiful syntax highlighting with customizable themes (defaults to "catppuccin-frappe").

Collapsible Interface: Starts collapsed by default to avoid layout shift, with a toggle button (</>) to show/hide the code.

Copy Functionality: Includes a copy button to easily copy the generated code to clipboard.

Usage

<Story name="Primary Button" of={Button} />
<StoryCode story="Primary Button" of={Button} />

Props

• of: The component this code represents
• story: The story name (must match the corresponding <Story> name)
• collapsed: Whether to start collapsed (default: true)
• shikiOptions: Syntax highlighting configuration
• tab: Indentation style (" " or "\t")

The component intelligently handles different prop types - strings get quotes, other values get curly braces, and undefined/empty values are omitted entirely.