open-index/open-npm huggingface dataset:
npm package: @orderandchaos/lib-test
Description: In the project directory, you can run:
Latest version: 0.1.1

This project was bootstrapped with [Create React Library](https://github.com/dimimikadze/create-react-library).

All library files are located inside **src/lib** folder.

Inside **src/demo** folder, you can test your library while developing.

## Available Scripts

In the project directory, you can run:

### `npm start` or `yarn start`

Runs the library in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

### `npm run test` or `yarn run test`

Runs the test watcher in an interactive mode.

### `npm run build` or `yarn build`

Builds the library for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

### `npm publish`

Publishes the library to NPM.

## Typescript

[Adding Typescript support](https://gist.github.com/DimiMikadze/f25e1c5c70fa003953afd40fa9042517)

## Troubleshooting

### Usage of other libraries within your library

- Add the library as a peer dependency in package.json (effectively requiring the calling project to provide this dependency)
- Add the library as a dev dependency in package.json (effectively allowing this library to successfully build without complaining about not having this dependency)
- Add the library to the externals config in your webpack.config file(s). By default, only react and react-dom are there, meaning that those are the only two libraries that you can use within your new shared library.
npm package: @orderandchaos/log-slider
Description: Wrapper class for initialising range slider with optional log scaling. 
Author: Sarcoma
Latest version: 3.0.5

[![NPM](https://img.shields.io/npm/v/@orderandchaos/log-slider.svg)](https://www.npmjs.com/package/@orderandchaos/log-slider)

# log-slider

https://sarcoma.github.io/log-slider/

## Setup

### CDN 

Include these in your HTML somewhere (update the version number if a new version is available).

*script*  
`<script src="https://cdn.jsdelivr.net/npm/@orderandchaos/log-slider@3.0.4/lib/log-slider.js"></script>`

*stylesheet*  
`<link href="https://cdn.jsdelivr.net/npm/@orderandchaos/log-slider@3.0.4/lib/log-slider.css" rel="stylesheet"/>`

## Examples

### Log scale slider

*js*
```javascript
const handleDemoLogUpdate = (log, value) => {
    console.log(log, value);
};

const demoLog = new LogSlider({
    id: 'log-scale',
    min: 100,
    max: 10000,
    type: sliderTypes.LOG,
    showTab: true,
    callback: handleDemoLogUpdate,
});
```
*html*
```html
<input type="range" id="log-scale"/>
```

### Linear scale slider

*js*
```javascript
const handleDemoLinearUpdate = (value) => {
    console.log(value);
};

const demoLinear = new LogSlider({
    id: 'linear-scale',
    min: 1,
    max: 1000,
    showTab: true,
    callback: handleDemoLinearUpdate,
});
```
*html*
```html
<input type="range" id="linear-scale"/>
```

### Linear scale slider with steps

*js*
```javascript
const handleDemoLinearUpdate = (value) => {
    console.log(value);
};

const demoLinearStepped = new LogSlider({
    id: 'linear-scale',
    min: 1,
    max: 100,
    type: sliderTypes.LINEAR,
    steps: [1, 10, 25, 50, 100],
    showTab: true,
    callback: handleDemoLinearUpdate,
});
```

*html*
```html
<input type="range" id="linear-scale"/>
```

## Examples Using HTML Attributes

### Linear scale slider with steps
*html*
```html
<div class="form-field">
    <label for="linear-scale">Linear Scale</label>
    <input type="range"
           id="linear-scale"
           class="slider"
           step="1"
           min="1"
           max="100"
           data-steps="1,5,15,50,75,100"
           data-decimal-places="2"
           data-show-tab="true"
    />
</div>
```

*js*
```javascript
const demoLinear = new LogSlider({
    id: 'linear-scale',
    callback: (value) => {console.log(value)},
});
```

### Log scale slider
*html*
```html
<div class="form-field">
    <label for="log-scale">Log Scale</label>
    <input type="range"
           id="log-scale"
           class="slider"
           step="1"
           min="1"
           max="10000"
           data-type="log"
           data-show-tab="true"
    />
</div>
```

*js*
```javascript
const demoLog = new LogSlider({
    id: 'log-scale',
    callback: (log) => {console.log(log)},
});
```
npm package: @orderandchaos/range-slider
Description: Wrapper class for initialising range slider with optional log scaling. 
Author: Sarcoma
Latest version: 1.0.1

# log-slider

https://sarcoma.github.io/range-slider/

## Setup

*Example log scaling slider*
```javascript
const handleDemoLogUpdate = (value, log) => {
    console.log(value, log);
};

const demoLog = new LogSlider({
    id: 'log-scale',
    min: 100,
    max: 10000,
    type: sliderTypes.LOG,
    showTab: true,
    inputHandler: handleDemoLogUpdate,
    changeHandler: handleDemoLogUpdate,
});
```

```html
<input type="range" id="log-scale"/>
```

*Example linear slider*
```javascript
const handleDemoLinearUpdate = (value) => {
    console.log(value);
};

const demoLinear = new LogSlider({
    id: 'linear-scale',
    min: 1,
    max: 1000,
    type: sliderTypes.LINEAR,
    showTab: true,
    inputHandler: handleDemoLinearUpdate,
    changeHandler: handleDemoLinearUpdate,
});
```

```html
<input type="range" id="linear-scale"/>
```
npm package: @orderandchaos/react-components-typescript
Description: react components typescript
Author: sarcoma
Latest version: 3.0.1

# @orderandchaos/react-components-typescript

> react components typescript

[![NPM](https://img.shields.io/npm/v/@orderandchaos/react-components-typescript.svg)](https://www.npmjs.com/package/@orderandchaos/react-components-typescript) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @orderandchaos/react-components-typescript
```

## Usage

```tsx
import React from 'react';
import {Column, ContainerFullWidth, Row, Title, Text, ThemeProvider} from "@orderandchaos/react-components-typescript";
import styles from "@orderandchaos/react-styles/dist/styles.module.css";
import customStyles from './custom-styles.module.css'

const App = () =>
    <ThemeProvider theme={customStyles}>
        <ContainerFullWidth className={styles.bc_lighterGrey}>
            <Row>
                <Column columnClass={styles.col6}>
                    <Title tag={'h1'}>Hello World</Title>
                    <Text>Blah blah blah</Text>
                </Column>
                <Column columnClass={styles.col6}>
                    <Title tag={'h1'}>Second Column</Title>
                    <Text>Blah blah blah</Text>
                </Column>
            </Row>
        </ContainerFullWidth>
    </ThemeProvider>
;

export default App;
```

## License

MIT © [sarcoma](https://github.com/sarcoma)
npm package: @orderandchaos/react-range-slider
Description: Linear and logarithmic range sliders for React
Author: sarcoma
Latest version: 1.0.11

# orderandchaos-react-range-slider

Linear and logarithmic range sliders for React

[![NPM](https://img.shields.io/npm/v/@orderandchaos/react-range-slider.svg)](https://www.npmjs.com/package/@orderandchaos/react-range-slider)
## Install

```bash
npm install @orderandchaos/react-range-slider
```

## Usage

```tsx
import React, { useState } from 'react'

import { RangeSlider, RangeSliderTypes } from '@orderandchaos/react-range-slider'
import '@orderandchaos/react-range-slider/dist/index.css'

const App = () => {
  const [linearValue, setLinearValue] = useState<number>(0)
  const [logValue, setLogValue] = useState<number>(100)
  return (
    <>
      <input readOnly={true} value={linearValue}/>
      <RangeSlider value={linearValue} setValue={setLinearValue} min={0} max={100} step={1}/>
      <input readOnly={true} value={logValue}/>
      <RangeSlider value={logValue} setValue={setLogValue} type={RangeSliderTypes.LOG} min={100} max={100000} decimalPlaces={0}/>
    </>
  )
}

export default App
```

## Demo 

https://sarcoma.github.io/orderandchaos-react-range-slider/

## License

MIT © [sarcoma](https://github.com/sarcoma)
npm package: @orderandchaos/react-styles
Description: Stylesheets framework for React, CSS in JS
Author: Sarcoma
Latest version: 0.4.0

[![NPM](https://img.shields.io/npm/v/@orderandchaos/react-styles.svg)](https://www.npmjs.com/package/@orderandchaos/react-styles)


# Order & Chaos Styles 

## Install

`npm i @orderandchaos/react-styles`

## React Import

`import styles from "@orderandchaos/react-styles/dist/styles.module.css";`
npm package: @orderandchaos/rgb-to-hsl
Description: run `npm install @orderandchaos/rgb-to-hsl`
Author: Sean Cooper
Latest version: 1.0.4

# RGB to HSL and back again...

run `npm install @orderandchaos/rgb-to-hsl`

## Example

```typescript
import RgbToHsl from "@orderandchaos/rgb-to-hsl";

const rgbToHsl = new RgbToHsl();
rgbToHsl.fromRgbHex(0x0000ff)

console.log(rgbToHsl.r);
console.log(rgbToHsl.g);
console.log(rgbToHsl.b);

console.log(rgbToHsl.h);
console.log(rgbToHsl.s);
console.log(rgbToHsl.l);
console.log(rgbToHsl.rgb);
rgbToHsl.h += 180;
console.log(rgbToHsl.rgb);
rgbToHsl.h += 180;
console.log(rgbToHsl.rgb);
```
npm package: @orderandchaos/rmws
Description: Remove whitespace from template literal backtick strings
Author: orderandchaos
Latest version: 1.0.2

# Remove Whitespace Template Literal

`rmws` is a simple utility function to trim indentation and remove extra spaces from template strings and values.

## Installation

You can install the `rmws` package via npm:

```bash
npm install @orderandchaos/rmws
```

## Usage

```javascript
import { rmws } from '@orderandchaos/rmws';

const result = rmws`
    Hello,   
      this is a test.   
        We are removing extra spaces.   
`;

console.log(result);
// Output:
// Hello,
// this is a test.
// We are removing extra spaces.
```

## API

`rmws(strings: TemplateStringsArray, ...values: (string | number)[]): string`

- `strings`: The array of template strings.
- `...values`: The list of values to be interpolated into the template.

Returns the processed output with trimmed indentation and removed extra spaces.

## Examples

### Removes whitespace, blank lines and handles multiple template strings and values

```javascript
import { rmws } from '@orderandchaos/rmws';

const result = rmws`
    The value is ${5}
    
        The result is ${3 + 7}
        
`;

console.log(result);
// Output:
// The value is 5
// The result is 10
```

### Removes leading and trailing whitespace

```javascript
import { rmws } from '@orderandchaos/rmws';

const result = rmws`    
    one, two, three    
    four, five, six    
    `;

console.log(result);
// Output:
// one, two, three
// four, five, six
```

### Removes multiple blank lines

```javascript
import { rmws } from '@orderandchaos/rmws';

const result = rmws`    
    
    
    
    one, two, three    
    
    
    four, five, six    
    
    
    `;

console.log(result);
// Output:
// one, two, three
// four, five, six
```

## Contributing

Contributions are welcome! Please feel free to open an issue or submit a pull request.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
npm package: @orderandchaos/sorted
Description: Sort an array of objects by it&#x27;s keys
Author: sarcoma
Latest version: 1.0.9

# @orderandchaos/sorted

> Sort an array of objects by it&#x27;s keys

[![NPM](https://img.shields.io/npm/v/@orderandchaos/sorted.svg)](https://www.npmjs.com/package/@orderandchaos/sorted) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @orderandchaos/sorted
```

## Usage

```tsx
import sortOnColumn, { ISortColumns, makeSortColumns } from '@orderandchaos/sorted';

interface IObj {
    name: string,
    value: number,
    misc: any
}

const arr: IObj[] = [
    {name: 'a', value: 3, misc: null},
    {name: 'b', value: 2, misc: undefined},
    {name: 'c', value: 1, misc: 0},
    {name: 'd', value: 0, misc: ''},
]


const sortColumns: ISortColumns = makeSortColumns<IObj>(arr);

// Sort on 'name'
const sortedByNameAsc = arr.sort(sortOnColumn<IObj>('name', sortColumns.name));
console.log('Name Asc', sortedByNameAsc);

sortColumns.name = !sortColumns.name;

const sortedByNameDesc = arr.sort(sortOnColumn<IObj>('name', sortColumns.name));
console.log('Name Desc', sortedByNameDesc);

// Sort on 'value'
const sortedByValueAsc = arr.sort(sortOnColumn<IObj>('value', sortColumns.value));
console.log('Value Asc', sortedByValueAsc);

sortColumns.value = !sortColumns.value;

const sortedByValueDesc = arr.sort(sortOnColumn<IObj>('value', sortColumns.value));
console.log('Value Desc', sortedByValueDesc);
```

## License

MIT © [sarcoma](https://github.com/sarcoma)
npm package: @orderandchaos/styles
Description: Stylesheets framework
Author: Sarcoma
Latest version: 2.2.9

# Order & Chaos Styles

Style Guide: https://sarcoma.github.io/orderandchaos-styles/

## Install

`npm i @orderandchaos/styles`

## Import

Sass import: `@import "~@orderandchaos/styles/sass/styles";
`
npm package: @orderandchaos/tidy-yml
Description: Tidy yaml template literal.
Author: orderandchaos
Latest version: 1.0.5

# tidyYml

`tidyYml` is a JavaScript utility function that tidies YAML strings by removing extra whitespace to the left and extra blank lines.

## Installation

Install `@orderandchaos/tidy-yml` using npm:

```bash
npm install @orderandchaos/tidy-yml
```

## Usage

Use `tidyYml` as a tagged template literal to tidy your YAML data:

```javascript
import tidyYml from '@orderandchaos/tidy-yml';

const tidiedYaml = tidyYml`
    person:
      name: John Doe
      age: 30
      is_employee: true
      favorite_numbers:
        - 42
        - 7
      address:
        street: 123 Main St
        city: Exampleville
        country: Exampleland
      contact_details:
        email: john@example.com
        phone: "+1 (555) 123-4567"
      null_value: null
      multiline_string: |
        This is a multiline string
        spanning multiple lines
        in YAML.
      timestamp: 2023-08-06T12:34:56Z
`;

console.log(tidiedYaml);
```

## API

`tidyYml(strings: TemplateStringsArray, ...values: any[]): string`

This function takes a template literal containing YAML strings and values, and it returns the tidied YAML string.

## License

MIT License

## Contributing

Contributions are welcome! Feel free to open a GitHub issue or submit a pull request.

---

**Note**: Customize the examples and description based on your project. Replace "Your Name" and "yourusername" with your actual name and GitHub username. Add more usage examples or API details if needed.