Scroll walkthrough

1
<ScrollWalkthrough>
2
  <Step title="Install the SDK" file="Terminal" focus="1">
3
    Add the Plant Store SDK to your project.
4
  </Step>
5
  <Step title="Create the client" file="garden.ts" focus="1-5">
6
    Point the client at your garden with an API key.
7
    <Substep file="garden.ts" focus="1">Import the client.</Substep>
8
    <Substep file="garden.ts" focus="3-5">Construct it with your API key.</Substep>
9
  </Step>
10
  <Step title="Add a plant" file="garden.ts" focus="7-11">
11
    Create your first plant record. The `wateringDays` interval drives care reminders.
12
  </Step>
13
14
  ```bash Terminal
15
  npm install @plantstore/sdk
16
  ```
17
18
  ```ts garden.ts
19
  import { PlantStore } from "@plantstore/sdk";
20
21
  const client = new PlantStore({
22
    apiKey: process.env.PLANT_API_KEY,
23
  });
24
25
  await client.plants.create({
26
    name: "Monstera deliciosa",
27
    light: "bright-indirect",
28
    wateringDays: 7,
29
  });
30
  ```
31
</ScrollWalkthrough>

1
<ScrollWalkthrough layout="wide" panelHeight="20rem">
2
  <Step title="Fetch a plant" file="garden.ts" focus="1-3">
3
    Read a single plant by ID.
4
  </Step>
5
  <Step title="Log a watering" file="garden.ts" focus="5-8">
6
    Record care events to keep the plant's schedule accurate.
7
  </Step>
8
9
  ```ts garden.ts
10
  const plant = await client.plants.get("monstera-1", {
11
    includeCareHistory: true,
12
  });
13
14
  await client.plants.logWatering("monstera-1", {
15
    wateredAt: new Date().toISOString(),
16
    amountMl: 250,
17
  });
18
  ```
19
</ScrollWalkthrough>

1
<ScrollWalkthrough substepStyle="bullet">
2
  <Step title="Configure care defaults" file="garden.ts">
3
    Each field controls one reminder.
4
    <Substep file="garden.ts" focus="2">Set the watering interval in days.</Substep>
5
    <Substep file="garden.ts" focus="3">Set the fertilizing interval in weeks.</Substep>
6
    <Substep file="garden.ts" focus="4">Choose where reminders are delivered.</Substep>
7
  </Step>
8
9
  ```ts garden.ts
10
  await client.gardens.updateDefaults({
11
    wateringDays: 7,
12
    fertilizingWeeks: 6,
13
    remindVia: "email",
14
  });
15
  ```
16
</ScrollWalkthrough>

1
<ScrollWalkthrough>
2
  <Step title="Configure the client" file="garden.ts" focus="1-4">
3
    Set your API key and a request timeout.
4
  </Step>
5
  <Step title="Shorten the watering interval" file="garden.ts" highlight="8">
6
    Summer growth needs more frequent watering, so drop the interval to five days.
7
  </Step>
8
9
  ```ts garden.ts
10
  const client = new PlantStore({
11
    apiKey: process.env.PLANT_API_KEY,
12
    timeoutMs: 10000,
13
  });
14
15
  await client.plants.update("monstera-1", {
16
    light: "bright-indirect",
17
    wateringDays: 5,
18
  });
19
  ```
20
</ScrollWalkthrough>