open-index/open-npm huggingface dataset:
npm package: @sazzad-anwar/api-docs
Description: A nodejs module that will give you a postman like ui for api calls with the express app
Author: Mohammad Sazzad Bin Anwar
Latest version: 0.1.13

# api-docs

Api-docs is a module that will give you an interface for making api documentation and make request. In express we need to write a lot of parameters in commented format for an API.

## Install

```sh
npm install @sazzad-anwar/api-docs
```

Or installing with yarn? `yarn add @sazzad-anwar/api-docs` <br>
Or installing with pnpm? `pnpm add @sazzad-anwar/api-docs`

## Usage

Create a `.json` file in the root of your project: <br>
`apiDocs.json`

```json
[]
```

Now follow the code snippet to get the api-docs working on your express app.

```javascript
const express = require('express');
const { serveApiDocs } = require('@sazzad-anwar/api-docs');
const cors = require('cors');
const app = express();
const path = require('path');
const dir = path.join(__dirname, 'DIR_OF_YOUR_JSON_THAT_YOU_HAVE_CREATED_BEFORE');
const port = process.env.PORT || 5000;

app.use(cors());
app.get('/', (req, res) => {
    res.json({ message: 'App is working' });
});

serveApiDocs(app, dir, 'production');
app.listen(port, () => console.log(`Server is running on port ${port}`));
```

Or using Typescript?

```typescript
import express, { Express, Request, Response } from 'express';
import { serveApiDocs } from '@sazzad-anwar/api-docs';
import cors from 'cors';
import path from 'path';

const dir: string = path.join(__dirname, 'DIR_OF_YOUR_JSON_THAT_YOU_HAVE_CREATED_BEFORE');
const port: string = process.env.PORT || 5000;
const app: Express = express();

app.use(cors());
app.get('/', (req, res) => {
    res.json({ message: 'App is working' });
});

serveApiDocs(app, dir, 'production');
app.listen(port, () => console.log(`Server is running on port ${port}`));
```

Here `development` parameter will give the edit access to the api collections, api details and delete the api collection. But `production` parameter will not give that access.

Yeah! that's it. Now when you run your express app the api docs will also be running on `/docs` route.

```
[your app running route:port]/docs
```
npm package: @sazze/envoy-nodejs
Description: envoy client libraries for nodejs
Author: Craig Thayer
Latest version: 1.1.0

Tests must be run as root (to bind to port 80):

```bash
sudo npm test
```


Example:

```js
var SendClient = require('@sazze/envoy-nodejs').SendClient;
var TransactionEmail = require('@sazze/envoy-nodejs').TransactionEmail;

var email = new TransactionEmail();

var client = new SendClient();

client.sendEmail(email, function (err, resp) {
    // do something with the response
});
```
npm package: @sazze/eslint-config-base
Description: Sazze's base JS ESLint config, following our styleguide
Author: Kevin Smithson
Latest version: 1.0.5

# eslint-config-sazze-base

This package provides Sazze's base JS .eslintrc as an extensible shared config.

## Usage

We export two ESLint configurations for your usage.

### eslint-config-sazze-base

Our default export contains all of our ESLint rules, including ECMAScript 6+. It requires `eslint` and `eslint-plugin-import`.

1. Ensure packages are installed with correct version numbers by running:
  ```sh
  (
    export PKG=@sazze/eslint-config-base;
    npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
  )
  ```

  Which produces and runs a command like:

  ```sh
    npm install --save-dev e@sazze/eslint-config-base eslint@^#.#.# eslint-plugin-import@^#.#.#
  ```

2. Add `"extends": "@sazze/base"` to your .eslintrc
npm package: @sazze/eslint-config-sand
Description: Sazze's sand JS ESLint config, following our styleguide
Author: Kevin Smithson
Latest version: 1.0.1

# eslint-config-sand

This package provides Sazze's Sand JS .eslintrc as an extensible shared config.

## Usage

### eslint-config-sand

Our default export contains all of our ESLint rules, including ECMAScript 6+. It requires `eslint` and `eslint-plugin-import`.

1. Ensure packages are installed with correct version numbers by running:
  ```sh
  (
    export PKG=@sazze/eslint-config-sand;
    npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
  )
  ```

  Which produces and runs a command like:x

  ```sh
    npm install --save-dev @sazze/eslint-config-sand eslint@^#.#.# eslint-plugin-import@^#.#.#
  ```

2. Add `"extends": "@sazze/sand"` to your .eslintrc
npm package: @sazze/eslint-config-vue
Description: Sazze's sand JS ESLint config, following our styleguide
Author: Kevin Smithson
Latest version: 1.0.1

# eslint-config-sand

This package provides Sazze's Vue JS .eslintrc as an extensible shared config.

## Usage

### eslint-config-sand

Our default export contains all of our ESLint rules, including ECMAScript 6+. It requires `eslint` and `eslint-plugin-import`.

1. Ensure packages are installed with correct version numbers by running:
  ```sh
  (
    export PKG=@sazze/eslint-config-vue;
    npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
  )
  ```

  Which produces and runs a command like:x

  ```sh
    npm install --save-dev @sazze/eslint-config-sand eslint@^#.#.# eslint-plugin-import@^#.#.#
  ```

2. Add `"extends": "@sazze/vue"` to your .eslintrc
npm package: @sazze/thrift
Description: A thrift client/server library
Author: Craig Thayer
Latest version: 1.1.0

### @sazze/thrift

---

Helper library for the `thrift` nodejs module.

#### Exampes

---

These examples expect that your generated thrift code is available in a nodejs module named `<thrift_service_module>`

**Socket Client:**

```js
var thrift = require('@sazze/thrift');
var thriftService = require('<thrift_service_module>').Service;

var service = new thriftService.Client();

var options = {
  host: 'localhost',
  port: 9090,
};

var client = thrift.Client(options);

client.call(service.action, [], function (data) {
  //success
}, function (err) {
  // error
});
```

**HTTP Client:**

```js
var thrift = require('@sazze/thrift');
var thriftService = require('<thrift_service_module>').Service;

var service = new thriftService.Client();

var options = {
  type: 'http',
  host: 'localhost',
  port: 9090,
  path: '/foo'
};

var client = thrift.Client(options);

clilent.call(service.action, [], function (data) {
  //success
}, function (err) {
  // error
});
```

#### Options

---

- `type`: [optional] 'http' or 'socket' (default: 'socket')
- `host`: hostname or ip address of the server
- `port`: port the server is listening on
- `path`: the path where the server is listening (required when `type` = 'http')
- `service`: the thrift service object (from thrift generated code)
- `transport`: [optional] the thrift transport to use (default: `thrift.TBufferedTransport` from the `thrift` module)
- `protocol`: [optional] the thrift protocol to use (default: `thrift.TBinaryProtocol` from the `thrift` module)
npm package: @sb-elements/all
Description: Library of unopinionated components
Author: jonathan
Latest version: 0.3.4
Deprecated: Renamed to 'headless-elements' to make it easier to find

# Simple Basic CustomElements

[![npm](https://img.shields.io/npm/v/@sb-elements/all.svg)](http://npm.im/@sb-elements/all)
[![Build Status](https://travis-ci.org/SimpleBasicElements/Elements.svg?branch=master)](https://travis-ci.org/SimpleBasicElements/Elements)
[![Build Status](https://github.com/SimpleBasicElements/Elements/workflows/Test/badge.svg)](https://github.com/SimpleBasicElements/Elements/actions)

The goal of this project is to create a library of CustomElement to stop reinventing the wheel (starting by reinventing the wheel using CustomElements).

[Storybook](https://simplebasicelements.github.io/Elements/)
npm package: @sb-kit/core
Description: Drop-in authentication layer for Next.js and Supabase.
Author: bytaesu
Latest version: 0.0.2

# `@sb-kit/core`

## Introduction

Drop-in authentication layer for Next.js and Supabase.

It’s built for speed. Perfect for MVPs and rapid prototyping. It handles the full auth flow, including UI, so you can focus on building your product without compromising security or flexibility.

## Features

- Ready-to-use auth components.
- Works with your existing Supabase client.
- Easy and type-safe setup.
- Sync code with Supabase settings in a single file.
- Safe dynamic redirects to the original path after login.
- Server-side authentication by default.

## Core Concepts

- _Bring Your Own Client:_

  sb-kit doesn’t create its own Supabase client. Instead, it’s designed to work with the client instance provided by your application, giving you full control over how it’s configured.

  This means you can continue using all Supabase features through your client, in addition to what sb-kit provides.

- _Centralized Configuration:_

  Integrating Supabase Auth with Next.js usually means writing scattered setup code across multiple files. sb-kit centralizes everything into a single configuration file, making it easier to manage and update.

- _Ready to Use:_

  Supabase offers powerful customization options, but sometimes you just need auth that works out of the box. sb-kit provides common auth UI patterns and logic you can drop in and start using right away.

## Documentation

Looking for setup instructions or usage examples?  
Visit the [sb-kit docs](https://sb-kit.hillche.com) for everything you need to get started.

## Contributions

This project was originally built for personal use, and I've added documentation before sharing it. Since it hasn't received external feedback yet, I'd especially welcome any contributions! Whether you spot a bug, have an idea for a new feature, or want to improve the documentation, PRs and issues are always welcome.

## In closing

Last year, I needed to quickly jump into web frontend from scratch for a prototype build. Supabase monorepo was an excellent learning resource. Later, I built and sold a private service using Supabase, which is still running smoothly today.

sb-kit is how I give back to the ecosystem. I hope sb-kit can be helpful for you too!
npm package: @sb-konzept/gatsby-source-storyblok
Description: ``` gatsby-config.js options: { generateFragments: true } ```
Latest version: 3.0.0

## GraphQL Fragment Generation

```
gatsby-config.js
options: {
  generateFragments: true
}
```

will autogenerate complete graphql fragments

```
gatsby-config.js
options: {
  generateFragments: [{fragment: 'StoryblokMarkdown', addToQuery: 'childMarkdownRemark { htmlAst }'}]
}
```

to use gatsby-transformer-remark

```
gatsby-config.js
options: {
  generateFragments: [{fragment: 'StoryblokTile', images: [{ path: ['backgroundImage'], type: 'fluid', maxWidth: 600}]}]
}
```

to use with gatsby-image
npm package: @sb-luis/jerga
Description: Access and interpolate strings from a dictionary
Author: Luis Sanchez Barranquero
Latest version: 0.0.0

# @sb-luis/jerga

> Tiny utility library to access and interpolate strings from a dictionary. 

```javascript
import jerga from '@sb-luis/jerga';

jerga.init({
   cake: 'A piece of cake', 
   greet: {
        slang: 'Yo!',
        formal: {
            short: 'A pleasure to meet you, {{name}}.',
            long: '...'
   }
});

// Usage:
jerga.t('cake'); // 'A piece of cake'
jerga.t('greet.slang'); // 'Yo!'
jerga.t('greet.formal.short', { name: 'Jane'}); // 'A pleasure to meet you, Jane.'
jerga.t('greet.formal.short', { name: 'John'}); // 'A pleasure to meet you, John.'
```
npm package: @sb1/eslint-config-ffe
Description: Recommended eslint config used for FFE components. Based on eslint-config-airbnb, but without any styling rules.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/eslint-config-ffe

Recommended eslint config used for FFE components. Based on eslint-config-airbnb, but without any styling rules.

## Install

```bash
npm install --save-dev eslint @sb1/eslint-config-ffe eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
```

## Usage

Create `.eslintsrc` in the same directory as your `package.json` and extend this config:

```json
{
    "extends": "@sb1/ffe"
}
```

NB: If you are not using React see `@sb1/eslint-config-ffe-base`.

## Migration Guide for ESLint 9

Version 9.0.0 of this package upgrades to ESLint 9, which requires Node.js 18 or later and includes significant changes to the configuration system.

ESLint 9 introduces the new flat config system as the default and removes support for the legacy config format. Here's how to migrate your project:

### 1. Update your ESLint configuration

Create an `eslint.config.js` file (instead of `.eslintrc.js`) in your project root:

```js
// eslint.config.js
import ffeConfig from '@sb1/eslint-config-ffe';

export default [
    ...ffeConfig,
    // Your project-specific overrides here
];
```

### 2. Use ES modules syntax

ESLint 9 requires ES module syntax. Make sure your config file uses `import`/`export` instead of `require`/`module.exports`.

### 3. Update structure of custom rules

If you have custom rules, migrate them to the flat config format:

```js
// Old format
{
  rules: {
    'react/prop-types': 'off'
  },
  globals: {
    window: true
  }
}

// New format
{
  rules: {
    'react/prop-types': 'off'
  },
  languageOptions: {
    globals: {
      window: true
    }
  }
}
```

### 4. Update dependencies

Make sure your `package.json` has updated peer dependencies:

```diff
- "eslint": "^8.0.0",
+ "eslint": "^9.0.0",
```

### 5. Prettier compatibility

If you're using Prettier, update to the latest eslint-config-prettier for compatibility with flat configs.

For more information, refer to the [ESLint 9 migration guide](https://eslint.org/docs/latest/use/configure/migration-guide).

## Contribute

Contributions are welcome. Please check out our [contribution guide](../../CONTRIBUTING.md)
npm package: @sb1/eslint-config-ffe-base
Description: Recommended eslint config used for FFE components. Based on eslint-config-airbnb, but without any styling rules.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/eslint-config-ffe-base

Recommended eslint config used for FFE components. Based on eslint-config-airbnb, but without any styling rules.

## Install

```bash
npm install --save-dev eslint @sb1/eslint-config-ffe-base eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
```

## Usage

Create `.eslintsrc` in the same directory as your `package.json` and extend this config:

```json
{
    "extends": "@sb1/ffe-base"
}
```

NB: If you are using React see `@sb1/eslint-config-ffe`.
npm package: @sb1/ffe-accordion
Description: Accordion component for FFE.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-accordion

## Install

```bash
npm install --save @sb1/ffe-accordion
```

## Usage

Full documentation on accordion usage is available at https://design.sparebank1.no/komponenter/accordion/.

```less
@import 'path/to/node_modules/@sb1/ffe-accordion/less/ffe-accordion';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-accordion/css/ffe-accordion.css';
```

See also `@sb1/ffe-accordion-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-accordion-react
Description: Kollapsbare seksjoner for å organisere innhold. `Accordion` er wrapper-komponenten, `AccordionItem` representerer hver seksjon.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-accordion-react

## Beskrivelse

Kollapsbare seksjoner for å organisere innhold. `Accordion` er wrapper-komponenten, `AccordionItem` representerer hver seksjon.

## Installasjon

```bash
npm install --save @sb1/ffe-accordion-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

Avhengig av `@sb1/ffe-collapse-react` og `@sb1/ffe-icons-react`. Importer styling:

```css
@import '@sb1/ffe-accordion/css/accordion.css';
```

## Eksempler

### Enkel bruk

```tsx
import { Accordion, AccordionItem } from '@sb1/ffe-accordion-react';

function MyComponent() {
    return (
        <Accordion headingLevel={2}>
            <AccordionItem heading="Første seksjon">
                Innhold for første seksjon
            </AccordionItem>
            <AccordionItem heading="Andre seksjon" defaultOpen>
                Denne seksjonen er åpen som standard
            </AccordionItem>
        </Accordion>
    );
}
```

### Kontrollert modus

```tsx
import { useState } from 'react';
import { Accordion, AccordionItem } from '@sb1/ffe-accordion-react';

function MyComponent() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <Accordion headingLevel={2}>
            <AccordionItem
                heading="Kontrollert seksjon"
                isOpen={isOpen}
                onToggleOpen={setIsOpen}
            >
                Denne seksjonen styres av ekstern state
            </AccordionItem>
        </Accordion>
    );
}
```

## Utvikling

```bash
npm install && npm run build && npm start
```

Storybook kjører på http://localhost:6006/.
npm package: @sb1/ffe-badge
Description: En badge er en liten visuell indikator som viser antall uleste varsler, meldinger eller oppgaver.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-badges

## Install

```bash
npm install --save @sb1/ffe-core @sb1/ffe-badges
```

## Usage

```less
@import 'path/to/node_modules/@sb1/ffe-badges/less/badge';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-badges/css/badge.css';
```

See also `@sb1/ffe-badges-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/colors-semantic.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `ffe.less`:

```css
@import '~@sb1/ffe-core/less/ffe';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-badge-react
Description: React implementation of ffe-badge component
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-badge-react

## Beskrivelse

Badge viser små merkelapper eller tellere for notifikasjoner. Rendrer et `<span>`-element med CSS-klassen `ffe-badge`.

## Installasjon

```bash
npm install --save @sb1/ffe-badge-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

### Importere CSS

```css
@import '@sb1/ffe-badge/css/badge.css';
```

### CSS-klasser

- `ffe-badge` - Hovedklassen, alltid påført
- `ffe-badge--no-children` - Påført automatisk når `children` er tom (indikator-modus)

## Eksempler

### Standard badge med tall

```tsx
import { Badge } from '@sb1/ffe-badge-react';

function NotificationCount() {
    return <Badge>9</Badge>;
}
```

### Indikator uten tall

Uten children vises Badge som en liten prikk:

```tsx
import { Badge } from '@sb1/ffe-badge-react';

function IconWithIndicator() {
    return (
        <div style={{ position: 'relative', display: 'inline-block' }}>
            <MyIcon />
            <Badge />
        </div>
    );
}
```

## Utvikling

```bash
npm install && npm run build && npm start
```

Storybook kjorer pa http://localhost:6006/.
npm package: @sb1/ffe-buttons
Description: ```bash npm install --save @sb1/ffe-core @sb1/ffe-buttons ```
Author: SpareBank1
Latest version: 100.12.3

# @sb1/ffe-buttons

## Install

```bash
npm install --save @sb1/ffe-core @sb1/ffe-buttons
```

## Usage

Full documentation on button usage is available at https://design.sparebank1.no/komponenter/knapper/.

```less
@import 'path/to/node_modules/@sb1/ffe-buttons/less/buttons';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-buttons/css/buttons.css';
```

See also `@sb1/ffe-buttons-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-cards
Description: Kort for bruk i oversikter
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-cards

## Install

```bash
npm install --save @sb1/ffe-core @sb1/ffe-cards
```

## Usage

Full documentation on card usage is available at https://design.sparebank1.no/komponenter/kort/.

Import styling for all card types:

```less
@import 'path/to/node_modules/@sb1/ffe-cards/less/cards';
```

Or pick just the ones you need from these:

```less
@import 'path/to/node_modules/@sb1/ffe-cards/less/text-card';
@import 'path/to/node_modules/@sb1/ffe-cards/less/icon-card';
@import 'path/to/node_modules/@sb1/ffe-cards/less/image-card';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-cards/css/cards.css';
```

See also `@sb1/ffe-cards-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-chart-donut-react
Description: Donut chart in SVG
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-chart-donut-react

## Beskrivelse

Ringdiagram som viser prosentvis fordeling mellom to verdier. Viser alltid to segmenter: `percentage` (hoyre) og `100 - percentage` (venstre).

## Installasjon

```bash
npm install --save @sb1/ffe-chart-donut-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

### Importere styling

```css
@import '@sb1/ffe-chart-donut-react/less/ffe-chart-donut';
```

Eller kompilert CSS:

```css
@import '@sb1/ffe-chart-donut-react/css/ffe-chart-donut.css';
```

## Eksempler

### Grunnleggende bruk med to etiketter

```tsx
import { ChartDonut } from '@sb1/ffe-chart-donut-react';

<ChartDonut
    name="Avstemning"
    percentage={42}
    firstLabel="Sa nei"
    lastLabel="Sa ja"
/>;
```

### Bruk med egendefinert label

```tsx
import { ChartDonut } from '@sb1/ffe-chart-donut-react';

<ChartDonut
    name="Prosjektstatus"
    percentage={75}
    label={<span>75% fullfort</span>}
/>;
```

## Theming med CSS custom properties

Krever base-tema fra `ffe-core`:

```css
@import '@sb1/ffe-core/less/theme';
```

## Utvikling

```bash
npm install && npm run build && npm start
```

Storybook kjorer pa http://localhost:6006/.
npm package: @sb1/ffe-checkbox-react
Description: The components from this package has moved to `ffe-form-react` and this should no longer be used.
Author: SpareBank 1
Latest version: 7.0.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @sb1/ffe-checkbox-react

The components from this package has moved to `ffe-form-react` and this should no longer be used.

## Install

```
npm install --save @sb1/ffe-form-react
```

_Make sure you have at least version_ `4.3.0`

## Usage

```javascript
import { Checkbox } from '@sb1/ffe-form-react';
```
npm package: @sb1/ffe-chips
Description: Chips are compact elements that represent an input, attribute, or action.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-chips

## Install

```bash
npm install --save @sb1/ffe-core @sb1/ffe-chips
```

## Usage

```less
@import 'path/to/node_modules/@sb1/ffe-chips/less/chip';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-chips/css/chip.css';
```

See also `@sb1/ffe-chips-react`.

## Theming with CSS custom properties

In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:

```css
@import '~@sb1/ffe-core/less/theme';
```

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-chips-react
Description: React implementation of ffe-chips component
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-chips-react

## Beskrivelse

Chip-komponenter i tre varianter: `Chip` (standard), `ChipRemovable` (med fjern-knapp) og `ChipSelectable` (kan velges/avvelges).

## Installasjon

```bash
npm install --save @sb1/ffe-chips-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

### Importere CSS

```css
@import '@sb1/ffe-chips/css/chip.css';
```

## Eksempler

### Standard Chip

```tsx
import { Chip } from '@sb1/ffe-chips-react';
import { Icon } from '@sb1/ffe-icons-react';

<Chip size="sm" onClick={() => console.log('Klikket')}>
    Liten chip
</Chip>

// Som lenke
<Chip as="a" href="/side" size="sm">Gå til side</Chip>

// Med ikon
<Chip size="sm" leftIcon={<Icon size="sm" fileUrl="path/to/icon.svg" />}>
    Med ikon
</Chip>
```

### ChipRemovable

```tsx
import { useState } from 'react';
import { ChipRemovable } from '@sb1/ffe-chips-react';

function MyComponent() {
    const [items, setItems] = useState(['Filter 1', 'Filter 2']);

    return (
        <div style={{ display: 'flex', gap: '8px' }}>
            {items.map(item => (
                <ChipRemovable
                    key={item}
                    size="sm"
                    onClick={() => setItems(items.filter(i => i !== item))}
                >
                    {item}
                </ChipRemovable>
            ))}
        </div>
    );
}
```

### ChipSelectable

```tsx
import { useState } from 'react';
import { ChipSelectable } from '@sb1/ffe-chips-react';

function MyComponent() {
    const [isSelected, setIsSelected] = useState(false);

    return (
        <ChipSelectable
            size="sm"
            isSelected={isSelected}
            onClick={() => setIsSelected(!isSelected)}
        >
            {isSelected ? 'Valgt' : 'Velg meg'}
        </ChipSelectable>
    );
}
```

## TypeScript

Komponenter er generiske og støtter polymorfisme via `as`-propen. TypeScript infererer riktige props basert på elementtypen.

## Utvikling

```bash
npm install && npm run build && npm start
```

Lokal Storybook kjører på http://localhost:6006/
npm package: @sb1/ffe-collapse-react
Description: React component for expand/collapse
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-collapse-react

## Beskrivelse

React-komponent for å vise og skjule innhold med animasjon. Bruker CSS grid-animasjon for jevn overgang mellom åpent og lukket tilstand.

## Installasjon

```bash
npm install --save @sb1/ffe-collapse-react
```

## Bruk

Dokumentasjon: https://sparebank1.github.io/designsystem/

### Importere CSS

```css
@import '@sb1/ffe-collapse-react/css/collapse.css';
```

Merk: CSS-variablene `--ffe-transition-duration` og `--ffe-ease` må være definert (tilgjengelig via `@sb1/ffe-core`).

## Eksempler

### Grunnleggende bruk

```tsx
import { Collapse } from '@sb1/ffe-collapse-react';
import { useState } from 'react';

function BasicExample() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div>
            <button onClick={() => setIsOpen(!isOpen)}>
                {isOpen ? 'Skjul' : 'Vis'} innhold
            </button>
            <Collapse isOpen={isOpen}>
                <p>Dette innholdet kan vises og skjules</p>
            </Collapse>
        </div>
    );
}
```

### Med ExpandButton

```tsx
import { Collapse } from '@sb1/ffe-collapse-react';
import { ExpandButton } from '@sb1/ffe-buttons-react';
import { useState } from 'react';

function ExpandButtonExample() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div>
            <ExpandButton
                isExpanded={isOpen}
                onClick={() => setIsOpen(!isOpen)}
            >
                {isOpen ? 'Skjul' : 'Vis'} detaljer
            </ExpandButton>
            <Collapse isOpen={isOpen}>
                <p>Detaljert informasjon her</p>
            </Collapse>
        </div>
    );
}
```

## TypeScript

```typescript
import type { CollapseProps } from '@sb1/ffe-collapse-react';
```

## Utvikling

```bash
npm install && npm run build && npm start
```

Storybook kjører på http://localhost:6006/.
npm package: @sb1/ffe-component-index
Description: Index of FFE compontents
Author: SpareBank 1 Utvikling
Latest version: 100.8.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Component overview

This package might only be useful if you are a contributing developer or if you
want to build a documentation framework for our designsystem.

We just had to build our own framework for previewing components.

## package `@sb1/ffe-component-overview`

You probably won't need this.
The package contains some named exports:

-   `examples` - compiled code examples from `./examples/`
-   `reactDoc` - output of react-docgen
-   `packages` - list of all packages

Also there is `lib/style.css` with everything.

## Component overview

Preview ./examples on localhost:1234

```
npm install
npm start
```
npm package: @sb1/ffe-context-message
Description: Messagebox showing non-critical tip or information about a page or product
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-context-message

This package is deprecated, and will be removed from the designsystem repo.

Use the new packages for messages, please refer to [ffe-messages](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages) and/or [ffe-messages-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages-react).
npm package: @sb1/ffe-context-message-react
Description: React implementation of ffe-context-message component
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-context-message-react

> **UTDATERT/DEPRECATED:** Bruk [ffe-messages-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages-react) i stedet.

## Beskrivelse

React-komponenter for kontekstuelle meldinger (info, tips, suksess, feil).

## Installasjon

```bash
npm install @sb1/ffe-context-message-react @sb1/ffe-context-message
```

## Bruk

Dokumentasjon: https://sparebank1.github.io/designsystem/

### Importere CSS

```js
import '@sb1/ffe-context-message/less/context-message.less';
```

## Eksporterte komponenter

| Komponent               | Bruksomrade                       | ARIA role                        |
| ----------------------- | --------------------------------- | -------------------------------- |
| `ContextInfoMessage`    | Generell informasjon til brukeren | `group`                          |
| `ContextTipsMessage`    | Tips og anbefalinger              | `group`                          |
| `ContextSuccessMessage` | Bekreftelse pa vellykket handling | `group`                          |
| `ContextErrorMessage`   | Feilmeldinger og advarsler        | `alert` (standard) eller `group` |

## Grunnleggende bruk

```tsx
import {
    ContextInfoMessage,
    ContextTipsMessage,
    ContextSuccessMessage,
    ContextErrorMessage,
} from '@sb1/ffe-context-message-react';

<ContextInfoMessage>
    <p>Informasjonsmelding.</p>
</ContextInfoMessage>

<ContextErrorMessage headerText="Noe gikk galt">
    <p>Vennligst prov igjen senere.</p>
</ContextErrorMessage>
```

## Eksempler

### Med overskrift og lukkeknapp

```tsx
<ContextInfoMessage
    headerText="Viktig informasjon"
    showCloseButton={true}
    onCloseRest={() => console.log('Lukket')}
>
    <p>Denne meldingen kan lukkes.</p>
</ContextInfoMessage>
```

### Kompakt visning

```tsx
<ContextTipsMessage compact={true}>
    <p>Et kort tips i kompakt format.</p>
</ContextTipsMessage>
```

## TypeScript

Eksporterer typer: `ContextInfoMessageProps`, `ContextTipsMessageProps`, `ContextSuccessMessageProps`, `ContextErrorMessageProps`.

## Tilgjengelighet

- `ContextErrorMessage` bruker `role="alert"` som standard
- Lukkeknappen har `aria-label` basert pa valgt sprak
- Overskrifter rendres som semantiske heading-elementer

## Relaterte pakker

- [@sb1/ffe-context-message](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-context-message) - CSS-stiler
- [@sb1/ffe-messages-react](https://github.com/SpareBank1/designsystem/tree/develop/packages/ffe-messages-react) - Nyere meldingskomponenter (anbefalt)
npm package: @sb1/ffe-core-react
Description: React components for ffe-core components
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-core-react

## Beskrivelse

React-komponenter for typografi og grunnleggende tekstmønstre. Bruk for overskrifter, avsnitt, lenker og tekstinnhold med riktig stil og semantikk.

Merk: `Wave` er deprecated, bruk varianten i `@sb1/ffe-shapes-react`.

## Installasjon

```bash
npm install --save @sb1/ffe-core-react
```

## Bruk

Dokumentasjon: https://sparebank1.github.io/designsystem/

### Importere CSS

```css
@import '@sb1/ffe-core/css/ffe.css';
```

## Eksempler

### Tilgjengelige komponenter

```tsx
import {
    Heading1,
    Heading2,
    Heading3,
    Heading4,
    Heading5,
    Heading6,
    Paragraph,
    BodyText,
    SmallText,
    MicroText,
    EmphasizedText,
    StrongText,
    PreformattedText,
    LinkText,
    LinkIcon,
    DividerLine,
} from '@sb1/ffe-core-react';
```

### Overskrifter (Heading1-Heading6)

```tsx
<Heading1>Sidetittel</Heading1>
<Heading2 lookLike={1}>Semantisk h2 som ser ut som h1</Heading2>
<Heading3 withBorder noMargin>Med understrek, uten margin</Heading3>
```

### Paragraph

```tsx
<Paragraph lead>Ledende avsnitt med større skrift.</Paragraph>
<Paragraph>Standard brødtekst.</Paragraph>
```

### BodyText

Brødtekst med polymorfisk `as`-prop. Standard: `div`.

```tsx
<BodyText>Brødtekst i en div.</BodyText>
<BodyText as="span">Brødtekst som span.</BodyText>
```

### SmallText

Liten tekst. Standard element: `span`.

```tsx
<SmallText>Liten hjelpetekst</SmallText>
```

### MicroText

Ekstra liten tekst. Standard element: `span`. Støtter `strong`-prop.

```tsx
<MicroText>Veldig liten tekst</MicroText>
<MicroText strong>Veldig liten, fet tekst</MicroText>
```

### Tekstformatering

```tsx
<EmphasizedText>Betont tekst (kursiv, rendrer em)</EmphasizedText>
<StrongText>Viktig tekst (fet, rendrer strong)</StrongText>
<PreformattedText>{`kode her`}</PreformattedText>
```

### LinkText

Tekstlenke med valgfri understreking. Standard element: `a`.

```tsx
<LinkText href="https://sparebank1.no">Gå til SpareBank 1</LinkText>
<LinkText as={Link} to="/dashboard">Med React Router</LinkText>
```

### LinkIcon

Lenke med pilikon. Standard element: `a`. Støtter `as`-prop.

```tsx
<LinkIcon href="/produkter">Se alle produkter</LinkIcon>
```

### DividerLine

Visuell skillelinje. Rendrer `<hr>` med `aria-hidden="true"`.

```tsx
<DividerLine />
```

## Utvikling

```bash
npm install
npm run build
npm start
```

Lokal Storybook på http://localhost:6006/.
npm package: @sb1/ffe-decorators-react
Description: ## Install
Author: SpareBank 1
Latest version: 3.0.17
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @sb1/ffe-decorators-react

## Install

```
npm install --save @sb1/ffe-decorators-react
```

## Usage

```javascript
import decorator from '@sb1/ffe-decorators-react/lib/decorator';

decorator(config)(MyComponent);
```

## Decorators

### ease-properties

En dekoratør-klasse som kan brukes i forbindelse med animering med Javascript.
Denne sørger for at en endring i en gitt property skjer gradivis over et gitt tidsinterval i stedet for at den endres med en gang.

Opprett komponenten med

```javascript
easeProperties({
    foobar: {
        initialValue: 1,
        duration: 0.5,
    },
})(MyComponent);
```

Der `foobar` er propertyen man er interessert i, `initialValue` er start-verdien og `duration` er hvor lang tid det skal ta før en property-endringen er fullført.

Det er frivillig å oppgi en `initialValue`.
Dersom det ikke angis en `duration` blir 1s brukt som default.

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `component-overview` with live reloading will run at http://localhost:1234/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-details-list
Description: Opplisting av attributter i en grid
Author: SpareBank 1
Latest version: 10.0.15
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @sb1/ffe-details-list

## Install

```bash
npm install --save @sb1/ffe-core @sb1/ffe-details-list
```

## Usage

```less
@import 'path/to/node_modules/@sb1/ffe-details-list/less/ffe-details-list';
```

See also `@sb1/ffe-details-list-react`.
npm package: @sb1/ffe-details-list-react
Description: ## Install
Author: SpareBank 1
Latest version: 5.0.8

# @sb1/ffe-details-list-react

## Install

```
npm install --save @sb1/ffe-details-list-react
```

## Usage

Full documentation on details list usage is available at https://design.sparebank1.no/komponenter/detaljliste/.

Included less file to your imports:

```css
@import 'node_modules/@sb1/ffe-details-list-react/less/ffe-details-list-react';
```

This React component does not depend on the `@sb1/ffe-details-list` package,
which is deprecated and removed from the source code. The component uses the
`@sb1/ffe-grid`-package to attain the same design and behavior. This way, the
components can be used in connection to other `ffe-grid`-based components.

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `component-overview` with live reloading will run at http://localhost:1234/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-dropdown-react
Description: Nedtrekksliste for valg av ett alternativ fra en liste. Wrapper rundt HTML `<select>` som videresender alle standard attributter.
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-dropdown-react

## Beskrivelse

Nedtrekksliste for valg av ett alternativ fra en liste. Wrapper rundt HTML `<select>` som videresender alle standard attributter.

## Installasjon

```bash
npm install --save @sb1/ffe-dropdown-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

### Importere CSS

```css
@import '@sb1/ffe-form/css/form.css';
```

## Eksempler

### Grunnleggende bruk med InputGroup (anbefalt)

```tsx
import { Dropdown } from '@sb1/ffe-dropdown-react';
import { InputGroup } from '@sb1/ffe-form-react';

function DropdownMedLabel() {
    const [value, setValue] = React.useState('jan');

    return (
        <InputGroup label="Velg måned">
            <Dropdown value={value} onChange={e => setValue(e.target.value)}>
                <option value="jan">Januar</option>
                <option value="feb">Februar</option>
                <option value="mar">Mars</option>
            </Dropdown>
        </InputGroup>
    );
}
```

### Inline-modus

```tsx
<InputGroup label="Antall">
    <Dropdown inline={true} defaultValue="1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </Dropdown>
</InputGroup>
```

### Validering med feilmelding

```tsx
import { Dropdown } from '@sb1/ffe-dropdown-react';
import { InputGroup } from '@sb1/ffe-form-react';

function DropdownMedFeil() {
    const [value, setValue] = React.useState('');
    const hasError = value === '';

    return (
        <InputGroup
            label="Velg måned"
            fieldMessage={hasError ? 'Du må velge en måned' : undefined}
        >
            {inputProps => (
                <Dropdown
                    {...inputProps}
                    value={value}
                    onChange={e => setValue(e.target.value)}
                    aria-invalid={hasError ? 'true' : undefined}
                >
                    <option value="">Velg ...</option>
                    <option value="jan">Januar</option>
                    <option value="feb">Februar</option>
                </Dropdown>
            )}
        </InputGroup>
    );
}
```

## Utvikling

```bash
npm install
npm run build
npm start
```

Lokal Storybook kjører på http://localhost:6006/.
npm package: @sb1/ffe-feedback
Description: Feedback component for ffe
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-feedback

This package contains styles for the ffe-feedback.

## Install

```bash
npm install --save @sb1/ffe-feedback
```

## Usage

Full documentation is not yet available, but will be added to https://design.sparebank1.no/komponenter.

```less
@import 'node_modules/@sb1/ffe-feedback/less/feedback';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-feedback/css/feedback.css';
```

See also `@sb1/ffe-feedback-react`.

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
npm package: @sb1/ffe-feedback-react
Description: React component for ffe-feedback
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-feedback-react

## Beskrivelse

React-komponent for tilbakemeldinger. Viser thumbs up/down-velger, utvides til tekstfelt etter klikk, og viser bekreftelse ved innsending.

## Installasjon

```bash
npm install --save @sb1/ffe-feedback-react
```

## Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

Avhengig av `@sb1/ffe-buttons-react`, `@sb1/ffe-icons-react` og `@sb1/ffe-form-react`. Importer CSS:

```css
@import url('@sb1/ffe-buttons/css/ffe-buttons.css');
@import url('@sb1/ffe-icons/css/ffe-icons.css');
@import url('@sb1/ffe-form/css/ffe-form.css');
```

## Eksempler

### Grunnleggende bruk

```tsx
import { Feedback } from '@sb1/ffe-feedback-react';

function MinKomponent() {
    return (
        <Feedback
            onThumbClick={thumb => console.log('Valgt:', thumb)}
            onFeedbackSend={(text, consent) =>
                console.log('Tilbakemelding:', text)
            }
        />
    );
}
```

### Med samtykke og kontaktlenke

```tsx
import { Feedback } from '@sb1/ffe-feedback-react';

function TilbakemeldingMedSamtykke() {
    return (
        <Feedback
            onThumbClick={thumb =>
                analytics.track('feedback_thumb', { value: thumb })
            }
            onFeedbackSend={(text, consent) =>
                api.sendFeedback({ text, canContact: consent })
            }
            onFinish={() => console.log('Bruker avsluttet')}
            includeConsent={true}
            contactLink={{
                url: 'https://example.com/kontakt',
                linkText: 'Kontakt oss',
            }}
            bgColor="secondary"
            locale="en"
        />
    );
}
```

## Utvikling

```bash
npm install && npm run build && npm start
```

Lokal Storybook kjører på http://localhost:6006/.
npm package: @sb1/ffe-file-upload
Description: File upload module
Author: SpareBank 1
Latest version: 100.12.3

# @sb1/ffe-file-upload

## Install

```bash
npm install --save @sb1/ffe-file-upload
```

## Usage

Full documentation on file upload usage is available at https://design.sparebank1.no/komponenter/skjemaelementer/#fileupload.

```less
@import 'path/to/node_modules/@sb1/ffe-file.upload/less/file-upload.less';
```

### Importing compiled CSS

If your project does not use Less, you can import the compiled styling:

```css
@import '~@sb1/ffe-file-upload/css/file-upload.css';
```

See also `@sb1/ffe-file-upload-react`.

## Development

To start a local development server, run the following from the designsystem root folder:

```bash
npm install
npm run build
npm start
```

A local instance of `Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.