Erstelle eine Komponentenbibliothek für Designer- und Entwickler:innen

Wo wir aufgehört haben

Im vorangegangenen Artikel haben wir uns mit der Definition einer Komponentenbibliothek befasst, die auf der Prämisse der Kommunikation basiert. In diesem Artikel werden wir uns weiter mit der Implementierung einer Komponentenbibliothek für Designer- und Entwickler:innen befassen und dabei das bisher Gelernte einbeziehen.

Anforderungen

Der erste Schritt besteht darin, dass Designer- und Entwickler:innen die Anforderungen an die betreffende Komponente umreißen. In unserem Fall konzentrieren wir uns auf eine Button-Komponente mit einem optionalen Dropdown-Menü.

Anforderungen der Designer:innen

• Varianten: Bold, Subtle, Outline, Ghost
• Label: Optionaler Text, der angezeigt werden soll
• Icon: Optionales Symbol neben der Beschriftung

Anforderungen der Entwickler:innen

• Agnostisch: Unterstützt HTML-Elemente wie <a> oder <button>
• Optionen: Wiederverwendbar als Selektor-Schnittstelle für Optionen
• Zugänglich: Stellt einen Titel zur Verfügung und ist sichtbar fokussierbar

In diesem Stadium können wir bereits zukünftige Probleme erkennen: Varianten und Erweiterbarkeit. Derzeit werden von den Designer:innen 4 Varianten für ein Farbthema angefordert. In Zukunft werden wir jedoch die Anzahl der Themen erweitern müssen, um mehr Optionen abzudecken.

Um dies zu verdeutlichen, werfen wir einen Blick in die Zukunft: Irgendwann werden wir 4 Varianten für 6 Farben und 4 Zustände pro Variante haben. Das würde 96 mögliche Kombinationen ergeben. Das ist eine Menge Arbeit für Designer- und Entwickler:innen, um den Zugang zu ermöglichen und richtig zu pflegen.

Wie man die schleichende Komplexität von Komponenten überwinden kann, ist ein Thema, das wir später in der Serie über Komponentenbibliotheken untersuchen werden. Konzentrieren wir uns zunächst auf die ursprünglichen Anforderungen und beschränken wir uns auf eine Farbe und 4 Varianten.

Gestalten

In Figma ist der erste Entwurf für die neue Komponente schnell erstellt. Er enthält bereits die notwendigen Elemente, aber es fehlen noch die Varianten. Bevor wir dazu kommen, sehen wir uns zunächst die erste Komponente als Ausgangspunkt an.

Ab hier richten wir die Eigenschaften der Komponente ein, um einfache Kombinationen von Beschriftungs-, Symbol- und Selektorelementen innerhalb einer Variante zu ermöglichen. Wir haben nun 6 mögliche Kombinationen von Elementen innerhalb einer Variante zur Auswahl.

Sobald unsere Ausgangskomponente richtig eingerichtet ist, können wir Varianten erstellen und verwenden, um die gewünschten Varianten unseres Buttons zusammenzustellen. Die zuvor festgelegten Eigenschaften werden gegebenenfalls automatisch wieder angewendet.

Hand-Off

Eine Möglichkeit, die Komponente mit Entwickler:innen zu teilen, ist die Verwendung des in Figma integrierten Dev Mode. Diese Funktion stellt Entwickler:innen automatisch detaillierte Informationen über die Komponente, wie z. B. ihre Eigenschaften und Varianten, zur Verfügung.

Die Übergabe selbst ist ein sehr individueller Prozess und kann auf unterschiedliche Weise erfolgen. Einige Teams ziehen es vor, Tools wie Zeplin zu verwenden, während andere einen direkteren Ansatz bevorzugen, z. B. die Freigabe eines Links zur Figma-Datei oder die Verwendung eines gemeinsamen Ordners.

Entwickeln

Bei der Entwicklung der eigentlichen Komponente kommt es darauf an, sich für einen prägnanten Ansatz zu entscheiden. In diesem Fall werden wir Vue 3 mit der Composition API verwenden. Dies ermöglicht es uns, die Komponente in einer einzigen Datei zu definieren, wodurch sie leichter zu pflegen und zu verstehen ist.

Beachte, dass dies nicht die einzige Möglichkeit ist, Komponenten zu erstellen. Ein populäres Beispiel ist daisyUI, das TailwindCSS und benutzerdefinierte Klassen verwendet, um die Erstellung von Komponenten zu vereinfachen, und sich nur auf grundlegende HTML-Elemente und CSS stützt, um sie zu strukturieren.

Bitte beachte, dass die <Icon /> Komponente nicht in dem Code-Schnipsel enthalten ist.

<script setup lang="ts">
import Icon from './Icon.vue';

defineOptions({ inheritAttrs: false });

const { variant = 'bold', is = 'button', selector = false } = defineProps<{
    variant?: 'bold' | 'subtle' | 'outline' | 'ghost';
    is?: string;
    selector?: boolean;
}>();
</script>

<template>
    <div :class="`button-${variant}`">
        <component class="center" :is="is || 'button'" v-bind="$attrs">
            <slot />
        </component>
        <span class="separator" v-if="selector"></span>
        <button v-if="selector" class="selector">
            <Suspense>
                <Icon variant="NavArrowDown" />
            </Suspense>
        </button>
    </div>
</template>

<style scoped>
button {
    background: unset;
    color: inherit;
    border: unset;
}

[class^='button-'] {
    display: inline-flex;
    gap: 0.25rem;
    line-height: 1rem;
    padding: 0.25rem;
    align-items: center;
    border-radius: 0.75rem;
}

.button-bold {
    background: #4f46e5;
    color: #e0e7ff;
}

.button-subtle {
    color: #4f46e5;
    background: #e0e7ff;
}

.button-outline {
    color: #4f46e5;
    border: 0.0625rem solid #e0e7ff;
}

.button-ghost {
    color: #4f46e5;
}

.center {
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.75rem;
}

.separator {
    background: currentColor;
    height: 1.5rem;
    width: 0.0625rem;
}

.selector {
    display: flex;
    border-radius: 0.5rem;
    padding: 0.75rem;
}
</style>

<template>
    <Button>
        <span>Hello World</span>
        <Icon variant="ArrowRight" />
    </Button>
</template>

Dokumentieren

Sowohl für Designer- als auch für Entwickler:innen dient die Dokumentation als Referenzpunkt für die Eigenschaften und Varianten der Komponente. Dies kann auf unterschiedliche Weise geschehen, von einer einfachen Dokumentations-Website wie Docusaurus bis hin zu einem komplexeren Dokumentationswerkzeug wie Storybook.

In unserem Fall werden wir Storybook verwenden, um die Komponente zu dokumentieren. Dies ermöglicht es uns, die Komponente in verschiedenen Zuständen und Varianten zu zeigen und bei Bedarf detaillierte Informationen über ihre Eigenschaften bereitzustellen.

import type { Meta, StoryObj } from '@storybook/vue3';
import Button from '../components/Button.vue';

const meta: Meta<typeof Button> = {
    component: Button,
    parameters: {
        slots: {
            default: {
                template: `<span>{{ args.default }}</span>`,
            }
        }
    }
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Bold: Story = {
    args: {
        variant: 'bold',
        is: 'button',
        selector: true,
        default: 'Bold Button',
    },
};

export const Subtle: Story = {
    args: {
        variant: 'subtle',
        is: 'button',
        selector: true,
        default: 'Subtle Button',
    },
};

export const Outline: Story = {
    args: {
        variant: 'outline',
        is: 'button',
        selector: true,
        default: 'Outline Button',
    },
};

export const Ghost: Story = {
    args: {
        variant: 'ghost',
        is: 'button',
        selector: true,
        default: 'Ghost Button',
    },
};

Mit Hilfe der Autodocs-Funktion von Storybook können wir automatisch eine Dokumentation für die Komponente erstellen, die auf ihren exponierten Eigenschaften und Varianten in der Datei Button.stories.ts basiert.

Pflegen

Nachdem wir unsere Komponente <Button> konzipiert, entworfen, entwickelt und dokumentiert haben, müssen wir sie nun pflegen. Dazu gehört es, die Komponente mit den neuesten Designänderungen auf dem neuesten Stand zu halten, Fehler zu beheben und bei Bedarf neue Funktionen hinzuzufügen.

Die Aufgabe der Wartung erstreckt sich über alle vorangegangenen Schritte, da die Teams gemeinsam dafür verantwortlich sind, Design, Entwicklung und Dokumentation auf dem gleichen Stand zu halten. Sobald ein angemessener Prozess etabliert ist, wird die Wartung der Komponente viel einfacher.

Nächster Artikel

Herzlichen Glückwunsch! Du hast die ersten Schritte zur Erstellung einer Komponentenbibliothek für dein Projekt oder deine Organisation unternommen. Während dieser Artikel nur den allgemeinen Ansatz behandelt, wird sich der nächste Artikel mit den Besonderheiten der Verwaltung der Komponentenkomplexität und deren Wartbarkeit befassen.

Um dies zu erreichen, werden wir auch auf frühere Artikel zurückblicken, wie z. B. die Entwicklung von Design-Systemen unter Berücksichtigung der Barrierefreiheit, und wie die dort vorgestellten Muster angewendet werden können, um die Entwicklung einer Komponentenbibliothek zu erleichtern.

TL;DR

Wir haben untersucht, wie man eine grundlegende Komponentenbibliothek mit einer einzigen Komponente als Ausgangspunkt erstellt. Der Prozess umfasst die Definition der Anforderungen, den Entwurf der Komponente, die Übergabe an die Entwickler:innen, die Entwicklung der Komponente, ihre Dokumentation und ihre Pflege.