Stories


Stories allows your components to receive data props from a visual form inputs, something similar to storybook

Stories can be used based on a chosen schema of data.

For example, if your component has multiple exported properties, with schema you can decide what properties need to be filled in a single input group.

<script>
 export let label = "Click here"
 export let bgColor = "red-700"
 export let txtColor = "red-100"
</script>

<button class="bg-{bgColor} text-{txtColor} px-4 py-2">
 {label}
</button>


stories fouita


Inside the page you can imagine users changing the label or changing the color, this will require 2 schemas:

1. Schema with bgColor and txtColor

for this schema we can create 2 types of buttons
Primary:
   bgColor: blue-700
   txtColor: blue-100
 Danger:
   bgColor: red-700
   txtColor: red-100

2. Schema with label

for this we can create multiple stories to display button label
Save:
  label: "Save"
Get Started:
  label: "Get Started"

More details on how to create and use schemas in the next section.