Skip to content
Vy logo
Guides

How to make new React components

Lyst til å implementere en ny React-komponent? Denne guiden viser deg hvordan du går fram.

Basert på Chakra UI

Spor sin React-implementasjon er basert på Chakra UI, og er i stor grad et overbygg på forskjellige eksisterende Chakra UI-komponenter. Om du ser etter en prop som ikke er dokumentert på dokumentasjonssidene våre, kan det være smart å se på dokumentasjonen til Chakra UI.

Spor bruker også en god del av de samme triksene som Chakra bruker, som f.eks. å plassere brorparten av stilene i en egen spor-theme-react-pakke, og hente dem ut der de trengs ved hjelp av useStyleConfig og useMultiStyleConfig. Vi kommer tilbake til hvordan dette funker senere.

Struktur

React-implementasjonen av Spor er basert rundt en rekke mindre pakker. Hver pakke inneholder et en eller flere relevante komponenter for et visst område. spor-datepicker-react kan inneholde kun en DatePicker-komponent (og dens delkomponenter), mens spor-typography-react kan ha Text, Heading og Code. Vurdér alltid om en ny komponent burde få en ny pakke, eller om den hører hjemme i en eksisterende. Ta gjerne en diskusjon med andre bidragsytere for å lande en god konsensus.

Alle pakkene finner du i packages/-mappen i dette repoet. De er ikke ment å brukes hver for seg, men heller via en "proxy-pakke" spor-react, som importerer og re-eksporterer alle pakkene sine eksporter. Det gjøres så man i nødssituasjoner kan override én pakke, om man ikke har tid til å oppgradere den sammen med resten, for eksempel.

Hver pakke har en minimal mengde med config (en package.json for å definere pakkenavn og avhengigheter, og en tsconfig.json som i stor grad bare extender en felles konfigurasjonsfil).

Styling

Så godt som all styling i Spor finner du i spor-theme-react-pakken. Der finner du to mapper, foundations og components. foundations inneholder alle designtokenene våre, som farger, avrundinger, skygger og avstander. I components finner du implementasjoner av forskjellige komponenter.

Det finnes to typer stilkonfigurasjoner - for de komponentene med ett enkelt DOM-element, og for de med flere.

Her er et eksempel på en komponent med ett DOM-element:

import { defineStyleConfig } from "@chakra-ui/react";
const config = defineStyleConfig({
baseStyle: {
backgroundColor: "white",
boxShadow: "md",
},
variants: {
outline: {
borderWidth: "sm"
borderStyle: "solid",
borderColor: "darkTeal"
},
solid: {
backgroundColor: "darkTeal",
color: "white",
},
},
sizes: {
sm: {
padding: 1,
},
lg: {
padding: 2,
},
},
});

Nyttige huskeregler

  • Bruk size-propen for å definere størrelser, og bruk t-skjortestørrelser (sm, md, lg osv)
  • Bruk variant-propen for å definere forskjellige designvarianter (outline, solid, ghost osv)
  • Bruk colorScheme-propen for å definere forskjellige fargevarianter (green, teal, grey osv)
  • Unngå boolean props til fordel for enums (loadState: "idle" | "loading" | "success" | "error" osv)
  • Start alle boolean props du fortsatt må ha med is, som isDisabled, isLoading eller isSpecial
  • Skriv gode JSDoc-kommentarer på alle offentlige komponenter og props, så de er lettere å bruke.
  • Bryt opp store komponenter i mindre, mer oversiktlige komponenter som komponerer sammen via children
  • Prøv å bruke så få props som overhodet mulig.
  • Unngå eksterne avhengigheter der de ikke gir mening

Hvordan lage en ny pakke

Om du vil lage en ny pakke, kan du følge følgende oppskrift:

  1. Åpne terminalen, og naviger til rotmappen til Spor.
  2. Kjør kommandoen npm run add-package. Dette vil starte en interaktiv guide som hjelper deg velge navn og type teknologi.
  • Konvensjonen er å bruke éntall i pakkenavn, som "popover", "tab" eller "table" istedenfor "popovers", "tabs" eller "tables".
  • Ikke legg til -react i navnet ditt – det legges til automatisk.
  1. Gå inn i packages/spor-react/package.json og legg til avhengigheten @vygruppen/spor-pakken-din-react": "*" i "dependencies".
  2. Gå inn i packages/spor-react/src/index.ts og legg til export * from "@vygruppen/spor-pakken-din-react";
  3. Kjør npm install

Finito! Om noen vil automatisere alle disse stegene så hadde det vært en flott PR.

Notat på hvordan pakker lages

Spor bruker et lite script som heter plop for å bootstrappe opp nye komponenter. Du kan finne konfigurasjonen og filene som brukes for å lage denne boilerplaten i internal/-mappen.

Referanseimplementasjon

React-implementasjonen av Spor er en såkalt referanseimplementasjon. Det betyr at alle implementasjoner bør tilstrebe å ha et så likt API som mulig til hvordan det er laget i React. Alle komponenter bør (men ikke) implementeres i React først, så man får landet et godkjent API på tvers.

Hva betyr dette for deg? Vel, om du skal implementere en komponent i React Native som finnes i React, bør du ta en titt på hvilke delkomponenter og props som har blitt valgt for React-implementasjonen, og bruke de samme abstraksjonsnivåene og APIene i React Native. Du bør riktignok fortsatt holde deg til plattformspesifikke konvensjoner, som onPress istedenfor onClick, og accessibilityLabel istedenfor aria-label.