open-index/open-npm huggingface dataset:
npm package: @navikt/personbruker-telefon-input
Description: React modul som viser brukerens arbeidsforhold
Author: NAVIKT
Latest version: 0.0.3-18

# react-component-lib

This is a boilerplate repository for creating npm packages with React components written in TypeScript and using styled-components.

Medium article explaining step by step how to use this repo to publish your own library to NPM:
https://medium.com/@xfor/developing-publishing-react-component-library-to-npm-styled-components-typescript-cc8274305f5a

## Installation:

To install all dependencies run `npm run install-all`.

## Developing your library:

To start developing your library, run `npm run dev`. It will build your library and run example create-react-app where you can test your components. Each time you make changes to your library or example app, app will be reloaded to reflect your changes.

## Styled-components:

Developing library with components built with styled-components is challenging because you have to keep only one instance of styled-components. If you would just symlink your library (`file:../` or `npm link`) to example app that is also using styled-components you'll get a console warning about multiple instances of styled-components (even though styled-components are peer dependency) and your styles will be possibly broken. To be able to conveniently develop styled components I am injecting bundled files directly into example app's /src folder and importing it in App.tsx along with type declaration.

## Typescript

This boilerplate lets you develop your libraries in Typescript and you can simultaneously test it in Typescript example create-react-app.
npm package: @navikt/react-decorator
Description: Dekoratoren for nav.no
Author: NAVIKT
Latest version: 1.0.12

# NAV Dekoratør

React moduler / mikro-frontends som wrapper applikasjonen din med dekoratøren

## Installasjon

```
npm install @navikt/react-decorator
```

## Komponenter

```js
import Decorator from "@navikt/react-decorator";
```

Eksempel

```js
return (
    <Decorator miljo={"DEV" as "LOCAL" | "DEV" | "PROD"}>
      <div>
        Din app
      </div>
    </Decorator>
);
```

Komponenten vil hente data basert på miljo-variabelen

## Videreutvikling / test

- Hent repoet fra github

```
git clone https://github.com/navikt/react-decorator.git
```

- Installer nødvendige pakker og start kompilering

```
npm install && npm start
```

- Start test applikasjonen <br>

```
cd example && npm install && npm start
```

Test-applikasjonen består av en simpel create-react-app som importerer og benytter pakkene <br>
Prosjektet støtter hot-reloading, endringer i komponentene vil føre til at test-applikasjonen oppdateres

## Deployering

Applikasjonen bygges automatisk til dev / https://www-q0.nav.no/person/react-decorator ved merge til master. <br>
For å lansere applikasjonen til [npmjs](https://www.npmjs.com/package/@navikt/react-decorator), benytt [npm version](https://docs.npmjs.com/cli/version) til å oppdatere package.json og lage en ny git-tag. Eks:

```
npm version patch -m "Din melding"
```

Push deretter den nye versjonen til Github, som vil plukkes opp av [CircleCI](https://circleci.com/gh/navikt/workflows/react-decorator).

```
git push && git push --tags
```

## Logging

Vi bruker fo-frontendlogger for logging. For oppslag i kibana:

```
application:frontendlogger AND x_appname:react-decorator
```

# Henvendelser

Spørsmål knyttet til koden eller prosjektet kan rettes mot https://github.com/orgs/navikt/teams/team-personbruker

## For NAV-ansatte

Interne henvendelser kan sendes via Slack i kanalen #team-personbruker.
npm package: @navikt/sif-common
Description: Felleskomponenter for sykdom i familien søknadsskjema
Latest version: 9.4.0
Deprecated: Denne er ikke lenger i bruk. Innholdet er delt ut i flere sif-common-* pakker.

# sif-common

Felleskomponenter for sykdom i familien søknadsskjema

# Release ny versjon til npmjs

krav: git working directory må være clean. Kode som er endret må være commitet og ligge på master på github.

```
npm run build-lib

VELG EN AV DISSE:
- npm version patch -m "Upgrade to %s"
- npm version minor -m "Upgrade to %s"
- npm version major -m "Upgrade to %s"

npm publish
```

# Kjøre SIF-common guide

Starter guiden som viser noen av komponentene som er i biblioteket

```
npm run dev
```
npm package: @navikt/sif-common-core
Description: Basis felleskomponenter for sykdom i familien søknadsskjema
Author: navikt
Latest version: 13.1.2

# sif-common-core

Basiskomponenter for bruk av applikasjoner hos team brukerdialog i sykdom-i-familien

# Release ny versjon til npmjs

krav: git working directory må være clean. Kode som er endret må være commitet og ligge på master på github.

```
npm run build-lib

VELG EN AV DISSE:
- npm version patch -m "Upgrade to %s"
- npm version minor -m "Upgrade to %s"
- npm version major -m "Upgrade to %s"

npm publish
```
npm package: @navikt/sif-common-formik
Description: Formikwrapper for nav-frontend-skjema
Author: navikt
Latest version: 23.5.1

# sif-common-formik

Formik-wrapped skjemakomponenter fra nav-frontend-moduler

# Kjøre eksempel-app

Starter app som viser noen av komponentene

```
npm run dev
```
npm package: @navikt/sif-common-formik-ds
Description: Wrapper skjemakomponenter fra @navikt/react-ds
Author: navikt
Latest version: 0.25.0

# sif-common-formik-ds

Wrapper skjemakomponenter fra @navikt/react-ds

# Kjøre eksempel-app

Starter app som viser noen av komponentene

```
yarn dev
```
npm package: @navikt/sif-common-pleiepenger
Description: Felleskode for søknad om pleiepenger og endringsdialog pleiepenger
Author: navikt
Latest version: 5.1.1

# sif-common-pleiepenger

Samling av utils brukt av SIF - Sykdom i familien teamet hos NAV

## Henvendelser

Spørsmål knyttet til koden eller prosjektet kan stilles som issues her på GitHub.

Interne henvendelser kan sendes via Slack i kanalen #sif-brukerdialog.
npm package: @navikt/sif-common-sanity
Description: Sanity utils for sykdom i familien
Author: navikt
Latest version: 0.0.5
Deprecated: Not maintained

# sif-common-sanity

Sanity koblinger for sykdom i familien søknadsdialoger

# Kjøre eksempel-app

Starter app som viser noen av komponentene

```
npm run dev
```
npm package: @navikt/sif-common-soknad
Description: Basis felleskomponenter for sykdom i familien søknadsskjema
Author: navikt
Latest version: 6.0.1

# sif-common-soknad

Felleskode for å sette opp en søknad innenfor sykdom i familien

# Release beta versjon til npmjs

1. `Endringer...`.
2. `Commit`.
3. `npm version 1.0.0-beta.0`.
4. `npm run build-lib`.
5. `npm publish --tag beta`. -
6. `"Det trenges å ha tilgang til npmjs navikt og bruke two-faktor auth. For å generere engangskode det kan brukes feks. Google Authenticator)"`.

# Release ny versjon til npmjs

krav: git working directory må være clean. Kode som er endret må være commitet og ligge på master på github.

1. `Endringer...`.
2. `Commit`.
3. `npm version 1.0.1`.
4. `npm run build-lib`.
5. `npm publish`.
6. `"Det trenges å ha tilgang til npmjs navikt og bruke two-faktor auth. For å generere engangskode det kan brukes feks. Google Authenticator)"`.

```
Versjonering:

- npm version patch -m "Upgrade to %s"
- npm version minor -m "Upgrade to %s"
- npm version major -m "Upgrade to %s"

eller:
- npm version 1.0.1

```
npm package: @navikt/tag-input
Description: react-component tag-input
Author: NAV
Latest version: 2.0.1

# Tag-input

Simple react component for tag-input fields.

Exposes a simple react-component that can be used as a simple text-input-field, but will parse and render words prefixed with `#` as tags.
```tsx
function Test() {
    const [text, setText] = useState('');
    return (
        <TagInput
              name="test"
              value={text}
              onChange={(e) => setText(e.target.value)}
        />
    );
}
```

Exposes a utility function to parse the content of `text`: `parseTekst`

```tsx
import {parseTekst} from "./tag-input";

const text = "#test #one some query";
const parsed = parseTekst(text);
console.log(parsed);
// {
//     tags: ['test', 'one'],
//     text: 'some query'
// }
```

## Styling

The application utilizes styling from the follow packages: 
```
nav-frontend-core
nav-frontend-knapper-style
nav-frontend-lenker-style
nav-frontend-paneler-style
nav-frontend-skjema-style
nav-frontend-typografi-style
```