Workshop and revision¶

Hands up: do you have a component in your library that no page of your app uses? And a page that still has a hand-written <button>? Usually the same people raise their hand both times.

For three weeks you have made bricks, a catalogue, quality control, an instruction booklet and a box. The curriculum's last criterion is the one a user would care about: applications whose interface uses the created components. A brick in a drawer is not a model. Nothing here is new. On this page you build with what you have, and you rehearse working against the clock.

Take stock: the inventory¶

A component inventory is a table with one row per component of your library, showing what each one has and what it is still missing.

Fill in one row for each of yours. A dash is allowed when something does not apply. An empty cell is not. Empty cells are your to-do list. Which column has the most holes? Usually Used in page and Visual tests. That decides what you do first.

Integrate, one page at a time¶

Open a page that still has raw markup, and work in this order:

1. Search the page for the class names of your components (btn, row). Each hit is a brick you forgot to use.
2. Replace one block with the component, passing props. Delete the now-dead CSS from the page.
3. Move decisions up. The handler that changes notes stays in the page. The component gets ondelete={() => remove(note.id)}.
4. Run npm test and npm run test:visual. They should stay green: the bricks did not change, only where they are used.
5. Look at the page's <style>. It has shrunk to layout only: grid, gap, max-width. Where did the colours go? Into the components, and from there into tokens.css.

Integration checklist¶

When it goes wrong¶

Practice against the clock¶

Reading code you understand feels like knowing it. Writing it alone, with a timer, shows you what you really know. Here is a rehearsal: 30 minutes, alone, with no AI and no messages. Your own code from this unit and the official docs are allowed.

The spec: a Tag¶

A small label shown on a note, with an optional × to remove it.

Anatomy: 28 px tall, 10 px horizontal padding, 6 px gap, 14 px radius, 1 px border in --nb-ink, 13 px text at weight 500. Neutral has a --nb-paper background with --nb-ink text. Accent has --nb-accent as background and border, with --nb-paper text.

The four tasks¶

Do them in order, and make each one work before starting the next. A component with a story is worth more than four half-written files.

1. Component. src/lib/components/Tag.svelte: two props with defaults, one snippet, one event. JSDoc on every prop, and colours from tokens only.
2. Story. Tag.stories.svelte with Neutral, Accent and Removable, plus autodocs. The Removable story logs onremove in Actions.
3. Unit test. Tag.test.js: (a) it shows its label and no remove button by default; (b) it calls onremove once when the remove button is clicked.
4. Use it. Export Tag from src/lib/index.js and show a note's tags in one page. Clicking × removes that tag from a $state array.

Then swap seats with a classmate. Run npm test, open the stories, click ×, read Tag.svelte, and mark it out of 10 with this rubric.

Check your work¶

Try it first. These stay closed until you open them.

<script>
    /**
     * @typedef {Object} Props
     * @property {'neutral' | 'accent'} [tone] The colour of the tag.
     * @property {boolean} [removable] Shows the remove button.
     * @property {() => void} [onremove] Called when the remove button is clicked.
     * @property {import('svelte').Snippet} children The label.
     */

    /** @type {Props} */
    let { tone = 'neutral', removable = false, onremove, children } = $props();
</script>

<span class="tag {tone}">
    {@render children()}
    {#if removable}
        <button type="button" aria-label="Remove" onclick={() => onremove?.()}>×</button>
    {/if}
</span>

<style>
    .tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 28px;
        padding: 0 10px;
        border: 1px solid var(--nb-ink);
        border-radius: 14px;
        font: 500 13px var(--nb-font);
    }
    .neutral {
        background: var(--nb-paper);
        color: var(--nb-ink);
    }
    .accent {
        background: var(--nb-accent);
        border-color: var(--nb-accent);
        color: var(--nb-paper);
    }
    button {
        border: 0;
        padding: 0;
        background: none;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }
</style>

<script module>
    import { defineMeta } from '@storybook/addon-svelte-csf';
    import { fn } from 'storybook/test';
    import Tag from './Tag.svelte';

    const { Story } = defineMeta({
        title: 'NoteBox/Tag',
        component: Tag,
        tags: ['autodocs'],
        args: { onremove: fn() }
    });
</script>

<Story name="Neutral">school</Story>

<Story name="Accent" args={{ tone: 'accent' }}>urgent</Story>

<Story name="Removable" args={{ removable: true }}>school</Story>

import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import { createRawSnippet } from 'svelte';
import { expect, test, vi } from 'vitest';
import Tag from './Tag.svelte';

const label = createRawSnippet(() => ({ render: () => '<span>school</span>' }));

test('shows its label and no remove button by default', () => {
    render(Tag, { children: label });

    expect(screen.getByText('school')).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: 'Remove' })).not.toBeInTheDocument();
});

test('calls onremove once when the remove button is clicked', async () => {
    const user = userEvent.setup();
    const onremove = vi.fn();
    render(Tag, { children: label, removable: true, onremove });

    await user.click(screen.getByRole('button', { name: 'Remove' }));

    expect(onremove).toHaveBeenCalledOnce();
});

<script>
    import { Tag } from '#lib';

    let tags = $state(['urgent', 'home', 'weekend']);

    /** @param {string} tag */
    function remove(tag) {
        tags = tags.filter((t) => t !== tag);
    }
</script>

{#each tags as tag (tag)}
    <Tag tone={tag === 'urgent' ? 'accent' : 'neutral'} removable onremove={() => remove(tag)}>
        {tag}
    </Tag>
{/each}

Then ask yourself three questions. Did you have a working component but no story? Did you lose time on the CSS? Did you write the test last and run out of time? Read a rubric before you start: behaviour carries more points than pixels.

Revision map¶

How to approach the exam¶

The unit exam has a short theory part on paper and a larger practical part, and it covers all of the lessons above. In the practical part you work from a Figma spec, on a starter project that already has the tools installed. Your teacher gives you the date and the details in Classroom.

Copying means a zero.

Key takeaways¶

• A brick in a drawer is not a model: the goal is an app whose interface uses your components.
• A component inventory turns "what is left?" into a list. Empty cells are your to-do list.
• Pages own the data. Components receive props and report events.
• After integrating, your tests must stay green. Keep the stories and tests of every brick.
• Against the clock: make each task work before starting the next, and put behaviour before pixels.
• Never delete a failing test. Hand it in red, with an honest note.

Quick check¶

That closes Unit 4: you can design, build, test, document and package your own components. In Unit 5 your interfaces stop waiting for the mouse, and start listening to voice and watching gestures.