npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@vtfk/components

v0.12.2

Published

Komponentbibliotek for Vestfold og Telemark fylkeskommune

Downloads

43

Readme

Komponentbibliotek

Felles komponenter for VTFKs frontend-løsninger.

Introduksjon

Komponentbiblioteket har som formål å standardisere kode og design, samt å effektivere utvikling av nye frontend-løsninger i fylkeskommunen. Dette verktøyet forhåndsviser komponentene og dokumenterer bruken av dem. Har du spørsmål, kan du ta kontakt med seksjonen for Teknologi og digitalisering (BDK-TEK).

Komponentene er oppbygd slik at de skal være enkle å bruke, følge prinsippene om universell utforming (WCAG 2.0), og fungere godt på alle flater og skjermstørrelser.

Finner du noe feil, eller har du innspill til hvordan vi kan forbedre biblioteket, kan du komme i kontakt med oss ved å lage en issue på GitHub.

Designsystemet

Komponentene er bygd på Vestfold og Telemark fylkeskommunes grafiske profil. Dokumentasjon av designsystemet finner du her.

Kom i gang

For å installere komponentbiblioteket, kjør kommandoen:

npm install @vtfk/components

# eller denne, om du bruker yarn:
yarn add @vtfk/components

BaseStyle

For at stilsettet skal bli korrekt og at alt skal fungere optimalt, er det anbefalt å pakke alle sidene i applikasjonen inn i BaseStyle-komponenten.

I en React-applikasjon kan dette gjøres i index.js som dette:

import React from 'react'
import ReactDOM from 'react-dom'
import { BaseStyle } from '@vtfk/components'

import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <BaseStyle>
      <App />
    </BaseStyle>
  </React.StrictMode>,
  document.getElementById('root')
)

Utvikling

Repository for biblioteket finner du her.

  1. Klone ned repository
git clone https://github.com/vtfk/component-library.git

# eller over SSH
git clone [email protected]:vtfk/component-library.git
  1. Installere dependencies
npm install
  1. Starte Storybook for forhåndsvisning av komponenter
npm run storybook

Opprette ny komponent

Det er lagt inn et script for generering av nye komponenter, som hjelper deg med å sette opp det du trenger for å komme kjapt i gang.

Kjør følgende kommando og følg veiviseren for å komme i gang:

npm run generate

Husk å eksportere ut komponenten din i /src/ui/index.js, så den blir tilgjengelig i den eksporterte pakka.

Kodestil

Fylkeskommunen prøver så langt det lar seg gjøre å standarisere på bruk av Standardjs-kodestil. Komponentbiblioteket inneholder linter (eslint) som sjekker og fikser eventuelle feil.

Sjekk at kodestilen holder mål ved å kjøre:

npm run test:lint

Automatiserte tester

Alle komponenter i biblioteket skal som hovedregel ha automatiserte tester, slik at vi unngår feil i komponenter når det gjøres endringer.

Testene bør som et minimum validere at komponenten laster, og at den gjør det den skal (user action). Det er for eksempel fornuftig å sjekke at klikk på en knapp faktisk trigger en onClick-event, eller at endring av verdi i et tekstfelt trigger forventet endring. For å hjelpe oss med testingen bruker vi jest og React Testing Library.

Kjør testene ved å kjøre:

npm run test

# eller med watcher, som er kjekt når man utvikler
npm run test:watch

Publisering av biblioteket

Vi bruker git tags for publisering av nye versjoner. For å opprette ny versjon bruker vi pakken release, som lar deg opprette endringslogg og tagg av releasen på en god måte. Selve publiseringen til NPM er det Github Actions som tar seg av for oss.

For å opprette ny release, bruk følgende kommando. Type erstatter du med enten major, minor eller patch, alt ettersom.

npm run release -- <type>

🔗   NPM-pakke - @vtfk/components 🔗   Mer dokumentasjon på bruk av release-kommandoen

Publisering av dokumentasjon/Storybook

For å oppdatere denne Storybook-siden holder det å dytte endringen din til main-branchen i Github, da vil Vercel oppdatere siden automatisk. Det vil også genereres en forhåndsvisning av Storybook-dokumentasjonen i andre brancher (PR-er), slik at man kan se hvordan ting vil se ut når man legger til produksjon.

Lisens

Komponentbiblioteket er lisensiert som MIT, og all kode er utgitt som åpen kildekode.