open-index/open-npm huggingface dataset:
npm package: @minimal_ui/react-ripple
Description: create react ripple in any element
Author: singh-taranjeet
Latest version: 1.0.21

# @minimal_ui/react-ripple

> create react ripple in any element.
> Typescript support
> Css animation
> Minimal size bundle
> Based on efficient react-hooks
> 0 dependencies

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

# Demo
> [DEMO](https://codesandbox.io/s/keen-pine-urlqs?file=/src/App.js)

## Install

```bash
npm install --save @minimal_ui/react-ripple
```

## Basic Usage

```tsx
import React from 'react'

import { Ripple, dispatchRipple } from 'react-ripple-effect';

const App = () => {

  const ref = React.createRef<HTMLDivElement>();

  return (
    <div className="App">
      
      <h2>Basic usage:</h2>

      <Ripple>
        <button className="btn">Basic usage</button>
      </Ripple>
    </div>
  );
}

```

## Custom Color

```tsx

      <div className="flex sb">
        <Ripple color="#48c78e">
          <button className="btn green">Green ripple</button>
        </Ripple>

        <Ripple color="#cc0f35">
          <button className="btn red">Red ripple</button>
        </Ripple>

        <Ripple color="#485fc7">
          <button className="btn blue">Blue ripple</button>
        </Ripple>
      </div>

```

## Custom Animation duration

```tsx

      <div className="flex sb">
        <Ripple animationDuration={2000}>
          <button className="btn green">slow Animation(2000ms)</button>
        </Ripple>

        <Ripple animationDuration={300}>
          <button className="btn red">Fast Animation(300ms)</button>
        </Ripple>

        <Ripple>
          <button className="btn blue">default Animation(550ms)</button>
        </Ripple>
      </div>

```

## Rounded ripple

```tsx

      <Ripple borderRadius={"5px"}>
        <button className="btn green">Centered ripple</button>
      </Ripple>
```

## Centered Ripple

```tsx

      <Ripple centeredRipple borderRadius={"50%"}>
        <button className="btn red round">0</button>
      </Ripple>

      
```

## Ripple on custom event
```tsx

      import { Ripple, dispatchRipple } from 'react-ripple-effect';

      return (
        <>
          <Ripple forwardRef={ref}>
            <button className="red btn">Click button for ripple</button>
          </Ripple>

          <button className="btn ml-20" onClick={() => dispatchRipple(ref)}>Press to ripple on red button</button>
        </>
      );
```

## License

MIT © [singh-taranjeet](https://github.com/singh-taranjeet)
npm package: @minimal_ui/save_data
Description: Save all data in localstorage
Author: taranjeet.s
Latest version: 1.0.21

# @minimal_ui/save_data

> Save all data in localstorage. For example http api response, previous selected theme, login related info, etc.

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

## Install

```bash
npm install --save @minimal_ui/save_data
```
## How it works
```
It saves all the data in the localstorage. 
For every request to udpate the data it checks if the data is already stored or not.
If the data is present then it returns the saved data.
Else it calls the method to refresh the data.
```

## Usage

```tsx
// Root component
import React from 'react'
import { Provider } from '@minimal_ui/save_data';
import { List } from './List';

export default () => {
  // Add provider to parent component
  return (
    <Provider>
      <List />
    </Provider>
  );
}

// List component
import React, { useContext } from "react";
import { Context } from '@minimal_ui/save_data'

export const List = () => {

    const { updateStore, store } = useContext(Context);
  
    // Fetch the list of data
    async function fetchUsers() {
        const res: any = await fetch("https://reqres.in/api/users?page=2");
        return res.json();
    }
  
    function onClick() {
        updateStore({
            // Method that will fetch the list of data
            fetcher: fetchUsers,
            // Any unique name
            url: "fetch-users",
            // boolean to check for update(default = true)
            checkForUpdate: false
        });
    }

    return (
      <div>
        <button onClick={onClick}>Fetch Users</button>
        {store?["fetch-users"]?.data?.map((item: any) =>{
            return (
                <div key={item.id}>{item.email}</div>
            );
        })}
      </div>
    );
  
  }
```

## License

MIT © [singh-taranjeet](https://github.com/singh-taranjeet)
npm package: @minimal_ui/style-engine
Description: Create efficient styles with react
Author: singh-taranjeet
Latest version: 1.0.4

# @minimal_ui/style-engine

> Create efficient styles with react

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

## Install

```bash
npm install --save @minimal_ui/style-engine
```

## Usage

```tsx
import React from 'react'

import { Root } from '@minimal_ui/style-engine'

const App = () => {
  return <Root tag={"h1"} styles={{
    "color": "#e91e63"
  }}>
    Hello Styled component
  </Root>
}

export default App
```

## License

MIT © [singh-taranjeet](https://github.com/singh-taranjeet)
npm package: @minimal_ui/theme
Description: Minimal UI Theme
Author: singh-taranjeet
Latest version: 1.0.78

# @minimal_ui/theme

> Minimal UI Theme

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

## Install

```bash
npm install --save @minimal_ui/theme
```

## Usage

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

import {Button} from '@minimal_ui/theme';

class Example extends Component {
  render() {
    return <Button>Example button</Button>
  }
}
```

## License

MIT © [singh-taranjeet](https://github.com/singh-taranjeet)
npm package: @minimalab/indie-flags
Description: Feature flags for Indie Flags — isEnabled, getValue, optional 60s cache
Author: Minima Lab
Latest version: 0.2.0

# Indie Flags SDK

Feature flags for [Indie Flags](https://indieflags.dev) — `isEnabled`, `getValue`, optional 60s cache. Works in **Node.js (18+)** and **browser**.

## Install

```bash
npm install indie-flags
```

## Get your API key

In the [Indie Flags dashboard](https://app.indieflags.dev), open your project → **API Keys**. Copy the **client key** (starts with `if_pub_`). Use it only in client-side or server-side code; never expose it in public repos.

## Usage

### Init (recommended)

Call `init()` on app startup to fetch all flags once and cache them for 60 seconds. Later `isEnabled` / `getValue` use the cache (no extra request per flag).

```ts
import { IndieFlags } from "indie-flags";

const flags = new IndieFlags({
  apiKey: "if_pub_xxxxxxxx",
  // baseUrl: "https://your-api.com",  // optional, for self-hosted
  // email: "user@example.com",         // optional, for flag overrides
});

await flags.init();

if (await flags.isEnabled("new-checkout")) {
  // show new checkout
} else {
  // show old checkout
}

const theme = await flags.getValue("theme"); // "dark" | "light" | "system" (string flag)
```

### Without init

You can skip `init()` and call `isEnabled(flagKey)` or `getValue(flagKey)` directly. Each call will request that flag from the API (no cache unless you set `cacheTtlMs` and call `init()` yourself).

```ts
const flags = new IndieFlags({ apiKey: "if_pub_xxxxxxxx" });

const enabled = await flags.isEnabled("new-feature");
const value = await flags.getValue("ab-test-variant"); // boolean or string
```

### Options

| Option       | Type   | Description                                                |
| ------------ | ------ | ---------------------------------------------------------- |
| `apiKey`     | string | **Required.** Project API key (client key from dashboard). |
| `baseUrl`    | string | API base URL. Default `https://api.indieflags.dev`.        |
| `email`      | string | User email for flag overrides (targeting).                 |
| `cacheTtlMs` | number | Cache TTL after `init()`. Default 60000. Set 0 to disable. |

### Methods

- **`init(): Promise<Record<string, boolean \| string>>`** — Fetch all flags and cache them. Call once at startup.
- **`isEnabled(flagKey: string): Promise<boolean>`** — Whether the flag is on.
- **`getValue(flagKey: string): Promise<boolean \| string>`** — Flag value (boolean or string for enums).
- **`invalidateCache(): void`** — Clear cache so the next call refetches.

## API

The SDK uses the Indie Flags eval API:

- `GET /eval?apiKey=...&flag=...` — single flag (used when not cached).
- `GET /eval/flags?apiKey=...` — all flags (used by `init()`).

You can also call the API directly with `fetch` or curl; see the dashboard **Try API** for examples.
npm package: @minimalcorp/dartboard-connector
Description: Connect to Dartboard with Web Bluetooth API.
Author: Okuyama
Latest version: 0.1.1

# Dartboard Connector

Connect to Dartboard with Web Bluetooth API.

`yarn add @minimalcorp/dartboard-connector`

Only ES Modules are supported.

## Supported dartboards

### DARTSLIVE Home

`import { DARTSLIVEHomeConnector } from "@minimalcorp/dartboard-connector/dartslive-home"`

examples are in `example` directory.

#### Disclaimer

This is not an official library.
This project is not affiliated with, endorsed by, or sponsored by DARTSLIVE Co., Ltd.
DARTSLIVE Home is a registered trademark of DARTSLIVE Co., Ltd.
npm package: @minimalstuff/tooling
Description: Shared tooling configs: EditorConfig, OXC (oxlint + oxfmt)
Author: Sonny93
Latest version: 0.3.0

## Features

- Shared presets for [OXC](https://oxc.rs/) tools (oxlint + oxfmt)
- TypeScript configuration presets
- CLI for quick project setup

## Usage

> [!IMPORTANT]
> New/updated rules will not be considered as breaking changes. Only API changes will be considered as breaking changes.

### CLI installation

Just run this command in your project root directory:

```bash
pnpm dlx @minimalstuff/tooling@latest
```

### Manual install

```bash
pnpm add -D oxlint oxfmt @minimalstuff/tooling
```

### OXC (oxlint + oxfmt)

#### oxlint

```ts
// oxlint.config.ts
import { defineConfig } from 'oxlint';
import { minimalstuffPreset } from '@minimalstuff/tooling/oxc/lint';

export default defineConfig({
	extends: [minimalstuffPreset()],
});
```

Options:

| Option          | Type      | Default | Description                             |
| --------------- | --------- | ------- | --------------------------------------- |
| `react`         | `boolean` | `false` | Enable React-specific oxlint plugins    |
| `adonisjs`      | `boolean` | `false` | Enable AdonisJS-specific rules          |
| `perfectionist` | `boolean` | `false` | Enable import sorting via perfectionist |

```ts
export default defineConfig({
	extends: [
		minimalstuffPreset({ react: true, adonisjs: true, perfectionist: true }),
	],
});
```

#### oxfmt

```ts
// oxfmt.config.ts
import { minimalstuffPreset } from '@minimalstuff/tooling/oxc/fmt';

export default minimalstuffPreset();
```

You can override any option:

```ts
export default minimalstuffPreset({ printWidth: 120, semi: true });
```

Defaults: `printWidth: 100`, `semi: false`, `singleQuote: true`, `trailingComma: 'all'`, `arrowParens: 'avoid'`.

#### Scripts

```json
{
	"scripts": {
		"lint": "oxlint",
		"lint:fix": "oxlint --fix",
		"format": "oxfmt --write ."
	}
}
```

### Tsconfig

Node (ESM):

```json
{
	"extends": "@minimalstuff/tooling/tsconfigs/tsconfig.node",
	"compilerOptions": {
		"rootDir": "./",
		"outDir": "./build"
	}
}
```

Node Next (ESM + `ts` extensions):

```json
{
	"extends": "@minimalstuff/tooling/tsconfigs/tsconfig.node-next",
	"compilerOptions": {
		"rootDir": "./",
		"outDir": "./build"
	}
}
```

React (TSX, bundler resolution):

```json
{
	"extends": "@minimalstuff/tooling/tsconfigs/tsconfig.react",
	"compilerOptions": {
		"rootDir": "./",
		"outDir": "./build"
	}
}
```

### Prerequisites

1. **NPM token**
   Create an automation token at [npmjs.com/access-tokens](https://www.npmjs.com/access-tokens) (scope: package publish for `@minimalstuff/ui`).

2. **Repository secret**
   In the repo: **Settings → Secrets and variables → Actions**. Add a secret named `NPM_TOKEN` with the token value.

---

> source: https://github.com/Julien-R44/tooling