open-index/open-npm huggingface dataset:
npm package: @min.hein/oh-sass-modules
Description: Helper repo to store npm module with  lightweight mixin library for Sass for all projects
Author: Open Health
Latest version: 0.1.0

# mixins-sass

sass mixins，require `Sass ~> 3.3.0`

**utility**

* [`flexbox`](#flexbox)
* [`screen reader`](#screen)
* [`transform`](#transform)
* [`overlay`](#overlay-background)
* [`padding gutters`](#padding-gutters)
* [`margin gutters`](#margin-gutters)
* [`font smoothing`](#font-smoothing)

## usage

```shell
npm install @openhealth/oh-sass-modules --save
```

```sass
Usage:
@import '../node_modules/@openhealth/oh-sass-modules/src/mixins'
```

## utility

### flexbox

```sass   
@include flexbox
@include justify-content(center)
@include align-item(center)
... ... ...
```

### screen reader-only

```sass
@include screenreader-only
... ... ...
```

### transform

```sass
@include transform(deg90)
... ... ...
```

### overlay-background

```sass
@include overlay-bg
... ... ...
```

### margin-gutters

```sass
@include gutters('margin-top', 'large')
... ... ...
```

### padding-gutters

```sass
@include gutters('padding', 'large')
... ... ...
```

### font-smoothing

```sass
@include font-smoothing(auto)
... ... ...    
```
npm package: @min98/layui-custom
Description: Classic modular Front-End UI library rebuild 
Author: Min
Latest version: 1.0.2

<p align="center">
  <a href="https://layui.dev">
    <img src="https://unpkg.com/outeres@0.1.0/img/layui/logo-icon.png" width="81" alt="Layui">
  </a>
</p>
<h1 align="center">Layui</h1>
<p align="center">
  Classic modular front-end UI library
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/layui">
    <img src="https://img.shields.io/npm/v/layui" alt="Version">
  </a>
  <a href="https://www.npmjs.com/package/layui">
    <img src="https://img.shields.io/github/license/layui/layui" alt="License">
  </a>
  <a href="https://github.com/layui/layui/blob/2.x/dist/css/layui.css">
    <img src="https://img.badgesize.io/layui/layui/2.x/dist/css/layui.css?compression=brotli&label=CSS%20Brotli%20size" alt="CSS Brotli size">
  </a>
  <a href="https://github.com/layui/layui/blob/2.x/dist/layui.js">
    <img src="https://img.badgesize.io/layui/layui/2.x/dist/layui.js?compression=brotli&label=JS%20Brotli%20size" alt="JS Brotli size">
  </a>
</p>

---

Layui is a collection of free and open source Web user interface component libraries. It uses its own lightweight module specifications and follows the original `HTML/CSS/JavaScript` development model. It is easy to get started and can be used immediately. Its style is simple and understated but the interior elegance is rich, every detail, including the documentation, is carefully crafted, making it perfect for quickly building web interfaces. Layui is different from popular front-end frameworks, but it does not go against the trend and believes in going back to nature. To be more precise, it is aimed at pragmatic people who pursue simplicity, that is, there is no need to use many different construction tools, just face the browser itself and you can get the elements. elements and interactions that the page needs to present

## Get started quickly

To use Layui, just add files to the page:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Quick Start - Layui</title>
    <link href="./layui/css/layui.css" rel="stylesheet" />
  </head>
  <body>
    <!-- HTML Content -->
    <script src="./layui/layui.js"></script>
    <script>
      // Usage
      layui.use(function () {
        var layer = layui.layer;
        // Welcome
        layer.msg("Hello World", { icon: 6 });
      });
    </script>
  </body>
</html>
```

## Documents

[**Documents current version**](https://layui.dev/docs/2/)

## Join the project

[project participants](https://github.com/layui/layui/graphs/contributors)

## Open source license

Layui use [MIT](https://opensource.org/licenses/MIT) Published with permission. Other relevant agreements may also be consulted《[Disclaimer](https://gitee.com/layui/layui/blob/main/DISCLAIMER.md)》。
npm package: @mina-akimi/staleless
Description: Zero dependency lib to solve stale state in React
Author: Minasan Akimi
Latest version: 1.1.1

# staleless
Zero dependency lib to solve stale state in React

Problems this solves:
1. Stale state in React, see this [codepen](https://codepen.io/ryan200888/pen/PoVRYro).
2. Cannot use `async` functions to update state. 

# How to use

```jsx
// Component.js
import { useState, useRef } from 'react';
import { Mutex, getValueFromSetState } from '@mina-akimi/staleless';

// An example async function to get delta
const getDelta = async () => {
  // Return a random number from internet
};

export const Component = () => {
  const [amount, setAmount] = useState(0);
  const [delta, setDelta] = useState(0);
  const mutex = useRef(new Mutex());
  
  // increment never gets stale closure.
  const increment = useCallback(async () => {
    // Must lock to prevent concurrent access and race condition.
    await mutex.current.lock();
    try {
        const currentAmount = await getValueFromSetState(setAmount);
        const currentDelta = await getValueFromSetState(setDelta);
        
        // Can use async function
        const newDelta = await getDelta();
        
        // Only update delta if it's bigger than currentDelta
        if (newDelta > currentDelta) {
          setAmount(currentAmount + newDelta);
        }
    } finally {
      mutex.current.unlock();
    }
  }, []); // No dependencies

  const incrementTen = useCallback(async () => {
    // Can be safely used in a loop.
    for (let i = 0; i < 10; i++) {
      // This never gets stale.
      // But be careful: this can get interleaved with other calls to incrementTen.
      await increment();
    }
  }, [increment]);
  
  return (
    <div>
      <div>amount: {amount}</div>
      <div>delta: {delta}</div>
      <button onClick={increment}>Increment</button>
      <button onClick={incrementTen}>Increment 10</button>
    </div>
  );
};
```
npm package: @mina-akimi/vitest-console-untangle-reporter
Description: Vitest reporter that untangles interleaved console log outputs from tests run in parallel
Author: Minasan Akimi
Latest version: 1.0.9

# Overview

When running Vitest in parallel mode (the default mode), Vitest runs each test file in a separate thread.

A problem with this is the `console` output are interleaved and can be hard to read.

This reporter solves the problem by saving the `console` output to a file for each test case, and then printing the
output at the end if the test case fails.

# Usage

```sh
# Install the reporter
yarn add -D @mina-akimi/vitest-console-untable-reporter
```

```ts
// vitest.setup.ts, or any set up file you use

import { setup } from '@mina-akimi/vitest-console-untable-reporter/setup';

// Run this to set up the `beforeEach` and `afterEach` hooks to intercept console output and save it to a file.
setup();

// You can also do this to override the log file output directory
// setup({ outputDir: 'path/to/output/dir' });
```

> Remember to add `vitest.setup.ts` to your `vitest.config.ts` file. Check the official doc for how to do this.

```ts
// vitest.config.ts

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./vitest.setup.ts'],
    // reporters: ['default'],
    reporters: ['@mina-akimi/vitest-console-untable-reporter/reporter'],
    // Or if you set up a different output directory, you must also set it correctly here, otherwise the reporter cannot find the log files.
    // reporters: [['@mina-akimi/vitest-console-untable-reporter', {outputDir: 'path/to/output/dir'}]],
  },
});
```

# Limitations

- The reporter only prints the console output for failed test cases.  This is because it's adapted from the `DefaultReporter`, which only prints errors on failed tests.

# License

MIT