Add Component Variants

To easily mock a component in a variety of states with type safety you can create multiple variants of a component simply by adding a sibling file using a component’s filename and replacing the the .svelte extension with variants.ts. See [SearchResult] for an example with several different variants.

Here is an example of a Header.svelte component’s variants file:

Header.variants.ts
ts
import type { Variants } from 'kitbook';
import type Component from './Header.svelte';
export const variants: Variants<Component> = [
  {
    name: 'Desktop',
    description: 'Describe this variant',
    width: 800,
    height: 600,
    props: {
      activeURL: "/",
      githubURL: "https://github.com/jacob-8/kitbook/",
    },
    contexts: [
      {
        key: 'settings',
        context: { foo: 'baz' },
      }
    ]
    slots: {
      default: 'My Workbench' // can pass a string or a Svelte component
      // presently we can only mock the default slot and not named slots until Svelte supports dynamically named slots since Kitbook needs to have the dynamically named slots feature to be able to mock named slots
    }
  },
]

+page.svelte files are actually just plain Svelte components with a very important data prop. You can create a variants file for them as well but replace + with _ (_page.variants.ts) because + is reserved for SvelteKit files:

_page.variants.ts
ts
import type { Variants } from 'kitbook';
import type Component from './+page.svelte';
export const variants: Variants<Component> = [
  {
    name: 'First',
    description: 'Foo',
    props: {
      data: {
        // place data props here
      },
    },
  },
]

The wonderful thing about variants is they’re written in TypeScript so you can easily spin up varieties of variants with minimal effort without having to duplicate data. Just use features of the language like ...spread and .map() or import data from mocks folder and apply it across multiple different components.