open-index/open-npm huggingface dataset:
npm package: @project-millipede/break-styled-lines
Description: Add newlines to a string of text given a font style and width
Latest version: 1.2.2

# break-styled-lines

This package is useful for when you want to know where linebreaks will occur in text given a font style (e.g. `16pt italic Georgia`) and the width of its container.

This utility also supports some more complex use-cases:

- Adding linebreaks to a list of strings as though they were a single string, and returning the text back as arrays.
- Adding linebreaks to a body of text which does not have consistent styling throughout (e.g. one much larger word in the middle of a sentence).

Uses the Canvas API to measure text, so it's quite fast. Uses an OffscreenCanvas if the browser supports it.

Comes with typescript types.

## Basic example

```ts
import breakLines from "break-styled-lines";

const textWithLineBreaks = breakLines(
  "Good day to you my friends! What ails you on this day?",
  100,
  "bold 12pt arial"
);
```

The result of the above usage would be:

```
/*
Good day to
you my
friends!
What ails
you on this
day?
*/
```

## Installation

`yarn add break-styled-lines`

## Usage

The single `breakLines` export supports three different cases:

### Single string

```ts
breakLines(
  // The text you'd like to insert newlines into
  text: string
  // The width constraining the text
  width: number
  // The font style of the text (a value of the CSS font property e.g. 10px bold serif)
  style: string
): string | string[]
```

```ts
breakLines("Good morrow my good man!", 100, "16pt serif");
```

### Array of strings

```ts
breakLines(
  // An array of strings, which will be treated as a single run of text, and then split back apart again before being returned.
  text: string[]
  // The width constraining the text
  width: number
  // The font style of the text (a value of the CSS font property e.g. 10px bold serif)
  style: string
): string | string[]
```

````ts
breakLines(["Good morrow my good man!", " What brings you to our corner of the world?"], 100, "16pt serif")
```ts

### Text descriptors

```ts
breakLines(
  // An array of descriptors, which will be treated as a single run of text, and then split back apart again before being returned.
  // { text: string, font?: string }
  text: TextDescriptor[]
  // The width constraining the text
  width: number
  // The default font style of the text which will be used if the descriptor is not provided one (a value of the CSS font property e.g. 10px bold serif)
  style: string
): string | string[]
````

```ts
breakLines(
  [
    { text: "Good morrow my good man!" },
    { text: " What brings you to our corner of the world?" },
    {
      text: " Our selection of the finest smoked cheeses, you say?!",
      font: "36pt bold Impact",
    },
  ],
  100,
  "16pt serif"
);
```
npm package: @project-millipede/windups
Description: A typewriter effect library for React.
Author: Sam Gwilym
Latest version: 1.1.12

# windups

A typewriter effect library for React.

Examples, API docs, and guides can all be found at [the docs site](https://windups.gwil.co)!

Apply the typewriter (or, ahem, "windup") effect to:

- strings
- anything you can put in React's children prop!

Use the API to:

- Control the pacing of your windups
- Trigger animations, sounds or any effect you can think of!
- Intelligently handle line breaking in text!

Want to see a codebase that makes extensive, real-word use of this package? Source for the docs site is at https://github.com/sgwilym/windups-docs

## 🗼 Code landmarks

Where the action is happening in this codebase.

### `src/Windup.ts`

The bulk of the file are functions which return modified versions of a windup (e.g. `next`, `rewind`), utilities (e.g. `isUnplayed`), or functions for creating a Windup data structure (e.g. `windupFromString`).

The windup data structure is also described here:

- It has three elements, representing collections of members in three states: played, in progress, and unplayed.
- It is a recursive data structure, i.e. a windup can be a member of any of these three parts.

### `src/react/useWindup.ts`

This is a hook that is used internally by `WindupChildren` and `useWindupString`. It does the bulk of the work of a windup: scheduling the next update, triggering effects, returning callbacks for rewinding/skipping etc.

### `src/react/useWindupString.ts`

This hook does very little: it just turns a string into a windup and passes it along to `useWindup`.

### `src/react/WindupChildren.tsx`

A lot going on in this one: transforming the `children` data type into a Windup, and a rough heuristic to determine when the value of `children` has 'changed' (big quotation marks).
npm package: @project-monarch/sdk
Description: 🛠 An SDK for building applications on top of Project Monarch.
Latest version: 2.0.1

# Project Monarch SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/Project-Monarch/project-monarch-sdk/workflows/CI/badge.svg)](https://github.com/Project-Monarch/project-monarch-sdk)
[![npm version](https://img.shields.io/npm/v/@project-monarch/sdk/latest.svg)](https://www.npmjs.com/package/@project-monarch/sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@project-monarch/sdk/latest.svg)](https://bundlephobia.com/result?p=@project-monarch/sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/Project-Monarch/project-monarch-sdk.git
```

Move into the project-monarch-sdk working directory

```sh
cd project-monarch-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @project-monarch/sdk-extra
Description: A specific SDK/toolkit for building applications on top of Project Monarch.
Latest version: 2.1.0

# Monarch SDK Extra

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/Project-Monarch/project-monarch-sdk-extra/workflows/CI/badge.svg)](https://github.com/Project-Monarch/project-monarch-sdk-extra)
[![npm version](https://img.shields.io/npm/v/@project-monarch/sdk-extra/latest.svg)](https://www.npmjs.com/package/@project-monarch/sdk-extra/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@project-monarch/sdk-extra/latest.svg)](https://bundlephobia.com/result?p=@project-monarch/sdk-extra@latest)

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/Project-Monarch/project-monarch-sdk-extra.git
```

Move into the project-monarch-sdk-extra working directory

```sh
cd project-monarch-sdk-extra/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```
npm package: @project-nebula/questionset-editor
Description: Question Set Editor library components is powered by angular. This editor is primarily designed to be used in the sunbirdEd portal and web portal to drive reusability, maintainability hence reducing the redundant development effort significantly. And it c
Latest version: 1.0.0-beta.1


# :diamond_shape_with_a_dot_inside: QuestionSet Editor for Sunbird!
Question Set Editor library components is powered by angular. This editor is primarily designed to be used in the sunbirdEd portal and web portal to drive reusability, maintainability hence reducing the redundant development effort significantly. And it can be integrated with any platform irrespective of the platforms and the frontend frameworks. It is exported not only as an angular library but also as a web component aims to make it easy to share, discover, and reuse web components. It creates a framework agnostic way of composing and re-purposing code.

# :bookmark_tabs: Getting started with integration steps
The Question Set Editor can be integrated as a web component and also as an angular library in angular application projects and it can also be integrated into vanilla javascript and angular framework as a web component.

- [Using it as Web component](https://inquiry.sunbird.org/use/developer-installation/question-set-editor/installation#use-as-web-components)
- [Using it as Angular library](https://inquiry.sunbird.org/use/developer-installation/question-set-editor/installation#use-as-angular-library-in-angular-app)

# :bookmark_tabs: Editor Contribution and Configuration Guide

[Contribution guidelines for this project](https://inquiry.sunbird.org/use/developer-installation/question-set-editor/installation#questionset-editor-contribution-guide)

[Configuration guidelines for this project](https://inquiry.sunbird.org/learn/product-and-developer-guide/question-and-question-set-editor/configuration)
npm package: @project-nebula/questionset-editor-web-component
Description: The web component package for the sunbird questionset editor
Author: Sunbird
Latest version: 1.0.0-beta.1


# :diamond_shape_with_a_dot_inside: QuestionSet Editor for Sunbird!
Question Set Editor library components is powered by angular. This editor is primarily designed to be used in the sunbirdEd portal and web portal to drive reusability, maintainability hence reducing the redundant development effort significantly. And it can be integrated with any platform irrespective of the platforms and the frontend frameworks. It is exported not only as an angular library but also as a web component aims to make it easy to share, discover, and reuse web components. It creates a framework agnostic way of composing and re-purposing code.

# :bookmark_tabs: Getting started with integration steps
The Question Set Editor can be integrated as a web component and also as an angular library in angular application projects and it can also be integrated into vanilla javascript and angular framework as a web component.

- [Using it as Web component](https://inquiry.sunbird.org/use/developer-installation/question-set-editor/installation#use-as-web-components)
- [Using it as Angular library](https://inquiry.sunbird.org/use/developer-installation/question-set-editor/installation#use-as-angular-library-in-angular-app)

# :bookmark_tabs: Editor Contribution and Configuration Guide

[Contribution guidelines for this project](https://inquiry.sunbird.org/use/developer-installation/question-set-editor/installation#questionset-editor-contribution-guide)

[Configuration guidelines for this project](https://inquiry.sunbird.org/learn/product-and-developer-guide/question-and-question-set-editor/configuration)
npm package: @project-nos/decorators
Description: Project NOS decorators is a library to help you develop spryker frontend components fast and easy.
Author: Andreas Penz
Latest version: 1.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

![NOS decorators](.github/banner.svg)

# NOS decorators

[![github workflow tests](https://img.shields.io/github/actions/workflow/status/project-nos/decorators/tests.yml?branch=master&label=tests&style=flat-square)](https://github.com/project-nos/decorators/actions/workflows/tests.yml)
[![mit license](https://img.shields.io/github/license/project-nos/decorators?style=flat-square)](https://github.com/project-nos/decorators/blob/master/LICENSE)
[![npm](https://img.shields.io/npm/v/@project-nos/decorators?style=flat-square)](https://www.npmjs.com/package/@project-nos/decorators)
[![npm bundle size](https://img.shields.io/bundlephobia/min/@project-nos/decorators?style=flat-square)](https://bundlephobia.com/package/@project-nos/decorators)

### A library to help you build Web Components fast and easy.

You no longer have to write all the boilerplate code needed to bring your components to life. Under the hood this library uses decorators to automatically bind attributes, actions and targets to your Web Components.

There is no better way to get a feel for what NOS decorators is and what it can do, than by seeing it for yourself:

Imagine you create a hello-world component which generates following html:

```html
<hello-world some-number="123" some-boolean some-string="baz" some-array="[4,5,6]" some-object="{"foo":"bar"}">
  <button hello-world-action="click#foo" hello-world-target="bar">…</button>
  <div hello-world-targets="bazs">...</div>
  <div hello-world-targets="bazs">...</div>
</hello-world>
```

You no longer need to query for elements on your own, listen for events or create `getters` for attributes. Everything you have to do is to add the corresponding decorators to your class and properties.


```typescript
import { actionable, attributable, attribute, targetable, target, targets } from '@project-nos/decorators';

@actionable()
@attributable()
@targetable()
class HelloWorld extends HTMLElement {
    @attribute({ type: Number })
    accessor someNumber: number

    @attribute({ type: Boolean })
    accessor someBoolean: boolean;

    @attribute({ type: String })
    accessor someString: string;

    @attribute({ type: Array })
    accessor someArray: [];

    @attribute({ type: Object })
    accessor someObject: object;

    @target()
    accessor bar: HTMLButtonElement;

    @targets()
    accessor bazs: HTMLDivElement[];
    
    foo(event: Event) {
        //...
    }
}
```

***

## Documentation

For full documentation, visit our [Wiki](https://github.com/project-nos/decorators/wiki).

## License

Copyright (c) [Andreas Penz](https://github.com/andreaspenz). Licensed unter the [MIT License](https://github.com/project-nos/decorators/blob/master/LICENSE).
npm package: @project-nos/eslint-config
Description: Project NOS ESLint config
Author: Andreas Penz
Latest version: 0.2.0

![NOS eslint-config](.github/banner.svg)

# NOS eslint-config

[![github workflow tests](https://img.shields.io/github/actions/workflow/status/project-nos/eslint-config/tests.yml?branch=master&label=tests&style=flat-square)](https://github.com/project-nos/eslint-config/actions/workflows/tests.yml)
[![mit license](https://img.shields.io/github/license/project-nos/eslint-config?style=flat-square)](https://github.com/project-nos/eslint-config/blob/master/LICENSE)
[![npm](https://img.shields.io/npm/v/@project-nos/eslint-config?style=flat-square)](https://www.npmjs.com/package/@project-nos/eslint-config)
[![npm bundle size](https://img.shields.io/bundlephobia/min/@project-nos/eslint-config?style=flat-square)](https://bundlephobia.com/package/@project-nos/eslint-config)

### A more restrictive eslint ruleset for your Spryker project

This package exports [a flat ESLint configuration](https://eslint.org/docs/latest/use/configure/configuration-files-new).

## Installation and Usage

1. Install the package
`npm i --save-dev @project-nos/eslint-config@latest`

2. Install the peer dependencies
`npx install-peerdeps --dev @project-nos/eslint-config@latest`

3. Add `"extends": "@project-nos/eslint-config"` to your `.eslintrc.

## License

Copyright (c) [Andreas Penz](https://github.com/andreaspenz). Licensed under the [MIT License](https://github.com/project-nos/eslint-config/blob/master/LICENSE).