open-index/open-npm huggingface dataset:
npm package: @sebgroup/bootstrap
Description: A standalone bootstrap theme for SEB
Author: Robert Hjalmers
Latest version: 6.0.4

# Bootstrap

[![CI](https://github.com/sebgroup/bootstrap/actions/workflows/main.yml/badge.svg?branch=master)](https://github.com/sebgroup/bootstrap/actions/workflows/main.yml)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

## THIS PROJECT IS DEPRECATED!

The code works as is but has been deprecated in favor for [Green](https://github.com/sebgroup/green) which is SEB:s new design system.

## Install with npm

```
npm install @sebgroup/bootstrap --save
```

For more info please see the [wiki](https://github.com/sebgroup/bootstrap/wiki)

## Use sebgroup/bootstrap with libraries such as Angular and/or React

sebgroup/bootstrap was created to be framework agnostic ie. it will never contain code for any particular JavaScript framework, so it's going to work with your framework as long as you use the right markup. If you need more complex components such as datepickers, advanced tables, multiselect dropdowns etc. checkout these libraries:

### Angular 2+

[**ng-bootstrap**](https://ng-bootstrap.github.io/) - A set of angular components using Bootstrap 4 markup
[**angular-generic-table**](https://hjalmers.github.io/angular-generic-table/start) - A smarter table component

## Development server

Run `ng start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @sebgroup/document-write-intervene
Description: Prevent document write from writing to your document and instead insert a new script to the dom.
Author: Radu Achim
Latest version: 3.0.0

# document-write-intervene

[![Build Status](https://travis-ci.com/sebgroup/document-write-intervene.svg?token=tzrdkWGEu776AVobzRhp&branch=master)](https://travis-ci.com/sebgroup/document-write-intervene)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

Overwrites `document.write` function and will prevent it from clearing your document contents due to how `document.write` works when the document has been loaded.

It checks if the markup is a `<script>` tag and will load it asynchronous.

Otherwise it will insert the contents using `insertAdjacentHTML` on the `body`

Tested inside an Angular project.

It should work seamlessly with a React project.

Otherwise you could have a look at `browserify` to integrate it in your project

## Installation

Install via npm:

```
$ npm install @sebgroup/document-write-intervene
```

## Example

```
const { intervene } = require('@sebgroup/document-write-intervene')
intervene()
```

## Testing

Unit tests:

```
$ npm t
```

#### E2E tests:

- Chrome tests:

```
$ npm run webdriver:chrome
```

and then

```
$ npm run e2e:chrome
```

- Internet Explorer tests:

```
$ npm run webdriver:ie
```

and then

```
$ npm run e2e:ie
```
npm package: @sebgroup/extract
Description: Base library for framework components.
Author: SEB Open Source
Latest version: 3.0.3

# `@sebgroup/extract`

Extract is considered deprectaed in favor of implementing shared functionality as Web Components. See https://github.com/seb-oss/green/tree/main/libs/core

---

Extract is where all the business logic of Green components lives so that it
can be shared between Angular and React implementations. It is called Extract
since the normal way of creating a component is within Angular and React and
then extracting the common logic.

## Patterns for common components

### The look

Step one is always creating CSS and HTML for your component in Chlorophyll.
We use Storybook to visualise the component in various states so that we can
track progress and continuously check that it adheres to design guidelines.
Read more in https://github.com/seb-oss/green/libs/chlorophyll

### Interaction and data

A common component consists of two parts: An interaction object and the data.
Let's look at these through an example.

```typescript
type Operator = '+' | '-' | '*' | '/' | '='
type Digit = number | '.'
type Press = Operator | Digit

export interface Calculator {
  pressDigit: (digit: Digit) => void
  pressOperator: (operator: Operator) => void
  clear: () => void
}

export interface CalculatorData {
  currentValue: number
  numpad: Digit[][]
  operators: string[]
  presses: Press[]
}
```

These are the components we will be interacting with. The `Calculator` instance
will be persistent and allows us to interact while the `CalculatorData` is
changed on every interaction and allows us to render our component.

Now, lets create out Calculator.

```typescript
export interface CalculatorOptions {
  containerEl: HTMLElement
}

export const createCalculator = (listener: (data: CalculatorData) => void, options: CalculatorOptions): Calculator => {
  // Create initial data
  let data: CalculatorData = {
    currentValue: 0,
    numpad: [
      [7, 8, 9],
      [4, 5, 6],
      [1, 2, 3],
      [0, '.'],
    ],
    operators: ['/', '*', '-', '+', '='],
  }

  // Create interaction object
  const calculator: Calculator = {
    clear: () => {
      data = clear(data) // pure function
      listener(data)
    },
    pressDigit: (digit) => {
      data = pressDigit(data, digit) // reducer
      listener(data)
    },
    pressOperator: (operator) => {
      data = pressOperator(data, operator) // reducer
      listener(data)
    },
  }

  // Add keyboard interactions to element
  // options.containerEl

  // Call listener with initial data
  listener(data)
}
```

All interactions with the calculator is done through pure functions with no
side effects using a reducer pattern (basically a data structure goes in and
a new, changed data structure comes out). These are easily testable. The
resulting updated data model is communicated to the framewoek of choice which
can then re-render making it easily bindable.
npm package: @sebgroup/frontend-tools
Description: A set of frontend tools
Author: sebgroup
Latest version: 2.2.2

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![Coverage Status](https://coveralls.io/repos/github/sebgroup/frontend-tools/badge.svg?branch=master)](https://coveralls.io/github/sebgroup/frontend-tools?branch=master)
[![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=sebgroup/frontend-tools)](https://dependabot.com)
[![npm version](https://badge.fury.io/js/%40sebgroup%2Ffrontend-tools.svg)](https://www.npmjs.com/package/@sebgroup/frontend-tools)
![tree shakable](https://img.shields.io/badge/%F0%9F%8C%B2-tree--shakable-brightgreen)

# **Frontend tools**

A set of frontend utilities that can be used with any javascript application. It's lightweight and intuitive.

This library is **tree-shakable** 🎉.

## **Installation**

### npm

```terminal
npm install @sebgroup/frontend-tools
```

### yarn

```terminal
yarn add @sebgroup/frontend-tools
```

## **Usage**

Using `isStrongPassword` utility as an example, this is how you import it:

### ES6

```typescript
import { isStrongPassword } from "@sebgroup/frontend-tools";
```

### ES5

```typescript
const isStrongPassword = require("@sebgroup/frontend-tools");
```

## **How to contribute**

Please read our [contributing guildines](https://github.com/sebgroup/frontend-tools/blob/master/CONTRIBUTING.md)

## **Documentation**

For detailed documentation about these utilites please visit our [wiki page](https://github.com/sebgroup/frontend-tools/wiki)
npm package: @sebgroup/green-angular
Description: Angular components built on top of @sebgroup/chlorophyll.
Author: SEB Open Source
Latest version: 10.0.2

<div align="center">
<img width="600" alt="green-angular" src="https://github.com/seb-oss/green/assets/11420341/c776109a-c980-4c33-92dd-109f1ff31ba2">
<h1>@sebgroup/green-angular</h1>
<p>
Angular components with SEB's look and feel.
</p>
</div>

## Install

If you are using the latest version of Angular, you can simply install `@sebgroup/green-angular` like this:

```
// If you are using yarn
yarn install @sebgroup/green-angular --save

// If you are using npm
npm install @sebgroup/green-angular --save
```

However, because `@sebgroup/green-angular` has a peer dependency to `@angular/cdk`, and Angular is very picky about which versions go together, if you use an older version of Angular you need to explicitly install the matching version of `@angular/cdk` as well.

For example, for Angular 14:

```
npm install @angular/cdk@~14.0.0 @sebgroup/green-angular --save
```

Currently, our aim is to support the LTS version of Angular as well as the current latest version.

## Import module

We recommend that you import `NggModule` (or just the module you need for Angular Green) into a shared module eg. `SharedModule` that can be imported into other, preferably lazy loaded modules when needed.

```ts
import { NggModule } from '@sebgroup/green-angular'

@NgModule({
  declarations: [...],
  imports: [
    ...
    NggModule
  ],
  exports: [
    NggModule
  ]
})
export class SharedModule {}
```

## Import styling

We recommend setting up your Angular project to use scss (SASS) for css preprocessing.

Once configured to use scss, it's just a matter of including the scss to your main styles file, typically it would be `styles.scss` located at the root of the `src` folder unless you've changed it.

### Add scss

`{project}/src/styles.scss`

```css
// import base styles from @sebgroup/chlorophyll
@use '@sebgroup/chlorophyll/scss';
```

### Have other needs?

More examples and use cases coming soon! In the meantime create an [issue over at github](https://github.com/seb-oss/green/issues)