@sb1/indeks-react
v0.5.0
Published
React components for Indeks design system
Downloads
449
Readme
@sb1/indeks-react
React-komponenter for Indeks designsystemet. Denne pakken inneholder ferdigbygde React-komponenter med tilhørende TypeScript-typer.
📦 Del av Indeks
Denne pakken er en del av Indeks designsystemet og er et tynt React-lag oppå @sb1/indeks-web. For å bruke den trenger du tre ting i prosjektet:
- CSS fra
@sb1/indeks-css(via CDN eller npm) - Web components fra
@sb1/indeks-web(via CDN — kreves også for React) - Denne pakken —
@sb1/indeks-react
📥 Installasjon
npm install @sb1/indeks-react
npm install --save-dev @sb1/indeks-web@sb1/indeks-web installeres som devDependency fordi runtime-koden lastes fra CDN — npm-pakken brukes kun for TypeScript-typer ved utvikling.
🎨 Styling
Komponentene krever at du inkluderer Indeks CSS.
Metode 1: Via CDN (anbefalt)
CDN er anbefalt fordi URL-en deles på tvers av SB1-applikasjoner. Nettleseren kan gjenbruke samme cachede CSS, slik at brukere som allerede har besøkt en annen SB1-app slipper å laste ned stylingen på nytt.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.sparebank1.no/indeks/css/<versjon>.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="https://cdn.sparebank1.no/indeks/web/<versjon>/index.js"></script>
</body>
</html>Metode 2: Via npm
npm install @sb1/indeks-css// main.tsx eller App.tsx
import '@sb1/indeks-css';
import '@sb1/indeks-web'; // registrerer custom elements🔄 Hold CDN-URL-er i takt
@sb1/indeks-css og @sb1/indeks-web versjonslåses til samme versjon som denne pakken. Når @sb1/indeks-react bumpes, må CDN-URL-ene i prosjektet ditt oppdateres tilsvarende — ellers får du drift mellom React-komponentenes forventede DOM og det som faktisk er lastet i nettleseren.
Pakken har et innebygd script for dette. Legg til i package.json:
{
"scripts": {
"prebuild": "indeks-react sync-cdn --check",
"sync-indeks": "indeks-react sync-cdn"
}
}prebuildfeiler hvis CDN-URL-ene ikke matcher installert versjon. Med vilje — hvis builden auto-fikser, kan det som deployes bruke andre klasser enn det du har testet.sync-indekskjører du eksplisitt for å oppdatere URL-ene iindex.html, CSS-filer osv.
Scriptet bruker ikke postinstall fordi SB1 anbefaler npm install --ignore-scripts — da blir lifecycle-hooks hoppet over.
✨ Bruk
import { Button, Card, Heading, Text, HStack, VStack } from '@sb1/indeks-react';
function App() {
return (
<VStack gap="4">
<Card>
<Heading as="h1">Velkommen til Indeks</Heading>
<Text>Dette er en eksempelapp med Indeks-komponenter.</Text>
<HStack gap="2">
<Button variant="primary">Primær knapp</Button>
<Button variant="secondary">Sekundær knapp</Button>
</HStack>
</Card>
</VStack>
);
}🔧 TypeScript
Pakken inkluderer TypeScript-definisjoner for alle komponenter:
import { ButtonProps, CardProps } from '@sb1/indeks-react';
const MyButton: React.FC<ButtonProps> = (props) => {
return <Button {...props} />;
};🔗 Relaterte pakker
- @sb1/indeks-css - CSS-styling (via CDN eller npm)
- @sb1/indeks-web - Web components som React-pakken wrapper (kreves)
- @sb1/indeks-tokens - Design tokens (trenger ikke egen import)
- @sb1/indeks-utils - Utility-klasser (trenger ikke egen import)
📚 Dokumentasjon
Full dokumentasjon finnes på:
🧩 Opprette nye komponenter
Nye komponenter genereres med Plop:
npm run create-componentDette oppretter komponent, story og test i riktig mappestruktur under lib/components/.
🎯 Peer Dependencies
Denne pakken krever:
react^18.0.0 || ^19.0.0react-dom^18.0.0 || ^19.0.0
📄 Lisens
MIT