open-index/open-npm huggingface dataset:
npm package: @mstfucrr/create-next-template
Description: A CLI tool to generate customizable Next.js projects with Prettier and other features.
Author: Mustafa Uçar
Latest version: 1.2.1

# @mstfucrr/create-next-template

`@mstfucrr/create-next-template` is a CLI tool to generate customizable Next.js projects with Prettier, Tailwind, and more.

## Installation

You can use this template in two ways:

### Option 1: Using npx (Recommended)

```bash
npx @mstfucrr/create-next-template
```

### Option 2: Global Installation

```bash
npm install -g @mstfucrr/create-next-template
create-next-template
```

## Usage

1. Run the template using either method above.

2. The CLI will guide you through the following options:
   - Project name
   - Next.js version
   - Additional features:
     - Axios for HTTP requests
     - Zod for schema validation
     - React Hook Form for form handling
     - Shadcn UI for components
     - Authorization setup
     - Tailwind CSS v4 conversion

3. The tool will automatically:
   - Set up a Next.js project with TypeScript
   - Configure Tailwind CSS
   - Add ESLint
   - Set up Prettier
   - Create a recommended folder structure
   - Install selected dependencies
   - Convert CSS variables to OKLCH format (if Tailwind CSS v4 is selected)

4. Once the installation is complete, navigate to your project:

```bash
cd your-project-name
pnpm dev
```

## Features

- 🎨 Tailwind CSS integration with v4 support
- 📝 TypeScript support
- 🎯 ESLint configuration
- 💅 Prettier setup
- 📦 PNPM package manager
- 🏗️ Recommended project structure
- 🔧 Optional integrations:
  - Axios
  - Zod
  - React Hook Form
  - Shadcn UI
  - Authorization setup
  - Tailwind CSS v4 conversion with OKLCH color format
npm package: @mstiggle/react-native-canvas
Description: <div align="center"> <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/96/fireworks_1f386.png"/> <h1>react-native-canvas</h1> </div>
Latest version: 0.1.39

<div align="center">
<img src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/96/fireworks_1f386.png"/>
<h1>react-native-canvas</h1>
</div>

A Canvas component for React Native

```bash
npm install react-native-webview
react-native link react-native-webview
npm install react-native-canvas
```

### Usage

```JSX
import React, { Component } from 'react';
import Canvas from 'react-native-canvas';

class App extends Component {

  handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 100, 100);
  }

  render() {
    return (
      <Canvas ref={this.handleCanvas}/>
    )
  }
}
```

### API

#### Canvas

###### Canvas#height

Reflects the height of the canvas in pixels

###### Canvas#width

Reflects the width of the canvas in pixels

###### Canvas#getContext()

Returns a canvas rendering context. Currently only supports 2d context.

###### Canvas#toDataURL()

Returns a `Promise` that resolves to DataURL.

#### CanvasRenderingContext2D

Standard CanvasRenderingContext2D. [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D). Only difference is `await` should be used to retrieve values from methods.

```javascript
const ctx = canvas.getContext('2d');
```

#### Image

WebView Image constructor. Unlike in the browsers accepts canvas as first argument. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)

```javascript
const image = new Image(canvas, height, width);
```
npm package: @mstjr/plaid
Description: Svelte wrapper for Plaid Link based on the React Plaid Link SDK.
Author: mstjr
Latest version: 1.0.0

# Svelte library

Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).

Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```sh
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```sh
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```sh
npm pack
```

To create a production version of your showcase app:

```sh
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```sh
npm publish
```
npm package: @mstking/uikit
Description: This package includes components that are widely used in web applications.
Author: Mostafa Golparvar
Latest version: 2.0.0

# UI Web Component Library

This package includes components that are widely used in web applications.

---

#### Development Goal

The development of this package is to prevent code duplication in different sections of the code.

Components such as `Button` have different states that are widely used in many sections, in order to prevent code duplication by creating a component and developing different states, you can use code duplication and also reduce the size of the code.

#### Development Workflow

1. Update the master branch
Make sure the `master` branch has the latest changes:

```bash
git checkout master
git pull origin master
```

2. Create a new branch
Create a new branch from `master` to apply your changes. For example:

```bash
git checkout -b your-branch-name
```

3. Apply changes and update the version
After making changes, publish an alpha version for testing. Do the following:

- Open `package.json`.
- Update the version according to Semantic Versioning.
- Append an alpha suffix to the new version, like the example below:

```json
"version": "1.5.3-alpha.x"
```
(Replace x with an appropriate number.)

4. Build the project
Run the following command to build the project with your changes:

```bash
npm run build
```

5. Log in to npm
Before publishing the alpha version, log in to npm:

```bash
npm login
```
(This is only required once per machine.)

6. Publish the alpha version
Use the following command to publish the alpha release:

```bash
npm publish --tag alpha
```

7. View published versions
Check the published versions on the npm registry for your package.

8. Install the alpha version for testing
To test the changes in your project, install the alpha version of `@mstking/uikit`:

```bash
npm i @mstking/uikit@alpha
```

9. Verify the changes work correctly
After installing the alpha version, ensure the changes work correctly across all parts of this project and any projects that use `@mstking/uikit`, without unexpected side effects.

10. Finalize changes and publish the stable version
After confirming everything works as expected:

- Remove the `alpha` suffix from the version in `package.json`.
- Merge your branch into `master` and switch to the `master` branch:

```bash
git checkout master
```

- Build and publish the final release:

```bash
npm run build
npm publish
```
npm package: @mstoduto/gatsby-source-remote-config
Description: Gatsby source plugin for building websites using the Remote Config as a data source
Author: Marco Stoduto
Latest version: 1.0.2

# gatsby-source-remote-config [![npm](https://img.shields.io/npm/v/@mstoduto/gatsby-source-remote-config)](https://www.npmjs.com/package/@mstoduto/gatsby-source-remote-config) ![node](https://img.shields.io/node/v/firebase-admin)

Gatsby plugin for connecting [Firebase Remote Config](https://firebase.google.com/products/remote-config)
as a data source. 

## Usage

1. Generate and download a Firebase Admin SDK private key by accessing the
   [Firebase Project Console > Settings > Service Accounts](https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk)

2. Rename and put the downloaded `.json` crendtial file somewhere in the GatsbyJS project (e.g. `./credentials.json`)

3. Add `gatsby-source-remote-config` as a dependency by running using `npm` or `yarn`:

   ```sh
   npm i @mstoduto/gatsby-source-remote-config
   # or
   yarn add @mstoduto/gatsby-source-remote-config
   ```

4. Configure settings at `gatsby-config.js`, for example:
```js
module.exports = {
    plugins: [
        {
            resolve: `@mstoduto/gatsby-source-remote-config`,
            options: {
                // credential or appConfig
                credential: require(`./credentials.json`),
                appConfig: {
                    apiKey: 'api-key',
                    authDomain: 'project-id.firebaseapp.com',
                    databaseURL: 'https://project-id.firebaseio.com',
                    projectId: 'project-id',
                    storageBucket: 'project-id.appspot.com',
                    messagingSenderId: 'sender-id',
                    appID: 'app-id',
                },
                parameterGroup: "website",
                fields: [
                    "sections"
                ]
            },
        },
    ],
};
```

Example
``` graphql
{
  allRemoteConfigParam {
    nodes {
      id
      valueString
      value {
        array {
          content
          order
          title
        }
      }
    }
  }
}
```



## Configurations

| Key                    | Description                                                                                                                                                        
| ---------------------- | --------------------------------------------------------------------------------- |
| `credential`           | Credential configurations from downloaded private key                             |
| `fields`               | Array of fields to get from remote config                                         |
| `appConfig `           | Credential configurations defined inside object                                   |
| `parameterGroup`       | Name of the parameterGroup to use, if none only main folder parameters are shown  |
npm package: @mstr-viz-helpers/mstr-viz-object-custom-props
Description: A plugin to allow per-object custom properties to be set within MicroStrategy custom visualisations. ## Build Status [![version](https://badge.fury.io/js/mstr-viz-object-custom-props.svg)](https://www.npmjs.com/package/mstr-viz-object-custom-props) [![Bui
Latest version: 1.0.3
Deprecated: Maintained package is mstr-viz-object-custom-props

# mstr-viz-object-custom-properties
A plugin to allow per-object custom properties to be set within MicroStrategy custom visualisations.
## Build Status
[![version](https://badge.fury.io/js/mstr-viz-object-custom-props.svg)](https://www.npmjs.com/package/mstr-viz-object-custom-props) [![Build Status](https://travis-ci.org/paulbailey/mstr-viz-object-custom-props.svg?branch=master)](https://travis-ci.org/paulbailey/mstr-viz-object-custom-props) [![codecov](https://codecov.io/gh/paulbailey/mstr-viz-object-custom-props/branch/master/graph/badge.svg)](https://codecov.io/gh/paulbailey/mstr-viz-object-custom-props)

### Usage
Add `objectPropertiesMixin` as a mixin to your custom visualisation class constructor.
npm package: @mstrlaw/noodle
Description: A Node.js project scaffolding CLI tool
Author: Lawrence @mstrlaw
Latest version: 0.2.1

noodle
======

A Node.js project scaffolding CLI tool using [oclif](https://github.com/oclif/oclif)

<!-- toc -->
# Usage
Create new project (no name param defaults to folder/pkg name _new_project_)
```
noodle --name <project-name>
```

After that, `cd` into the folder and run `npm i` to install dependencies.
npm package: @mstssk/cleandir
Description: Cleanup directories.
Author: @mstssk
Latest version: 3.0.0

# cleandir

![Test](https://github.com/mstssk/cleandir/workflows/Test/badge.svg)
[![npm version](https://badge.fury.io/js/%40mstssk%2Fcleandir.svg)](https://badge.fury.io/js/%40mstssk%2Fcleandir)

`cleandir` just empty output directories.

- Single purpose and feature.
  - Empty compiler's output directories.
  - Remain specified top directory.
    - `.gitkeep` and `.keep` is also remained.
- Very tiny!
  - No dependencies.

Inspired by https://stackoverflow.com/a/57866165

## Install

```
$ npm install --save-dev @mstssk/cleandir
```

### Install from GitHub Package

You can install from GitHub Package.
See a package page and GitHub Package document.

- Package: https://github.com/mstssk/cleandir/packages/285984
- Document: https://help.github.com/en/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages#installing-a-package

## Usage

In npm-run-script:

```json
// package.json
{
  "scripts": {
    "prebuild": "cleandir dist/",
    "build": "tsc"
  }
}
```

In your code:

```js
const { cleandir } = require("@mstssk/cleandir");

(async function () {
  await cleandir(dirPaths);
})();
```

### More complicated deleting?

I recommend to use [rimraf](https://www.npmjs.com/package/rimraf), if you want conditional deleting.

## Changelog

See https://github.com/mstssk/cleandir/releases
npm package: @mstssk/del-bs
Description: Delete backspace charactors.
Author: mstssk
Latest version: 0.0.2

# del-bs

Delete backspace charactors.

## Usage

```sh
npx @mstssk/del-bs <file>
```

## Why

Japanese Input method(also CJK?) often outputs broken text that includes unnecessary backspace char.

https://github.com/electron/electron/issues/9173

Above issue was fixed. However it reproducts sometimes with other environment.
<!--
Note:
たぶん漢字変換の候補表示中にバックスペースで戻ったりいろいろしていると再現する。
VSCodeでプレーンテキスト編集モードでは再現しないけど、Markdownモードでは再現したりする。
他のプラグインとの兼ね合いなので、誰が悪いのかわかってない。
-->
npm package: @mstssk/ppp
Description: Calculate CircleCI's Performance Pricing Plan Price.
Author: mstssk
Latest version: 0.1.1

[![npm version](https://badge.fury.io/js/%40mstssk%2Fppp.svg)](https://badge.fury.io/js/%40mstssk%2Fppp)
[![CircleCI](https://circleci.com/gh/mstssk/calc-circleci-ppp.svg?style=svg)](https://circleci.com/gh/mstssk/calc-circleci-ppp)

# calc-circleci-ppp
Calculate CircleCI's Performance Pricing Plan.

## How to Use

### Web

https://mstssk.github.io/calc-circleci-ppp/

### CLI

Usage
```sh
$ npx @mstssk/ppp <activeUsers> <dlc:run> ...<resource_class:min>
```

Example

```sh
# 7 users, 5000 min for medium class.
$ npx @mstssk/ppp 7 medium:5000
# output: 105
```

```sh
# 5 users, 1500 min for large class, 1000 min for macos, Use Docker layer caching for 100 times.
$ npx @mstssk/ppp 5 large:1500 macos-large:1000 dlc:100
# output: 105
```
npm package: @mstssk/serve
Description: Minimal static file server for local development
Latest version: 0.0.5

# @mstssk/serve

[![CI](https://github.com/mstssk/serve/actions/workflows/ci.yml/badge.svg)](https://github.com/mstssk/serve/actions/workflows/ci.yml)
[![npm version](https://badge.fury.io/js/@mstssk%2Fserve.svg)](https://badge.fury.io/js/@mstssk%2Fserve)

Minimal static file server for local development.

- Zero config
- No dependencies
- Plugin interface for extensibility

## Install

```bash
npm install -g @mstssk/serve
```

## Usage

```bash
serve ./dist                 # serve ./dist on :3000
serve ./dist -p 8080         # serve ./dist on :8080
serve ./dist -p 8080 -H      # with hot-reload
```

## Options

| Option             | Short | Description                                        | Default |
| ------------------ | ----- | -------------------------------------------------- | ------- |
| `--port`           | `-p`  | Port number                                        | `3000`  |
| `--hot-reload`     | `-H`  | Reload browser on file changes                     | off     |
| `--allow-dotfiles` |       | Serve dotfiles and node_modules (default: ignored) | off     |
| `--help`           | `-h`  | Show help message                                  |         |

## Plugin interface

`createAppServer` accepts a `plugins` array. Each plugin can implement:

| Method                                      | Description                                                          |
| ------------------------------------------- | -------------------------------------------------------------------- |
| `setup({ server, root, port })`             | Called once before the server starts listening. Can be async.        |
| `handleRequest(req, res)`                   | Handle a request. Return `true` if handled, `false` to fall through. |
| `transformResponse(body, { mime, target })` | Transform response body, return new body                             |

### Example plugin

```js
import { createAppServer } from "@mstssk/serve/lib/server.mjs";

const logPlugin = {
  setup({ root }) {
    console.log(`serving ${root}`);
  },
  transformResponse(body, { mime }) {
    if (mime !== "text/html") return body;
    return Buffer.from(body.toString() + "<!-- served by @mstssk/serve -->");
  },
};

createAppServer({ ROOT: "./dist", PORT: 3000, plugins: [logPlugin] });
```

## Security

- Path traversal is blocked via `resolve()` + root boundary check
- Symbolic links are blocked
- Binds to `127.0.0.1` by default (not exposed to LAN)

## License

MIT
npm package: @mstssk/whatver
Description: What is the version of this command?
Author: mstssk
Latest version: 0.3.0

# whatver

[![npm version](https://badge.fury.io/js/%40mstssk%2Fwhatver.svg)](https://badge.fury.io/js/%40mstssk%2Fwhatver)

What is the version of this command?

## Usage

```sh
$ npm i -g @mstssk/whatver
$ whatver git
git version 2.21.0
$ wv git # shorthand
git version 2.21.0
```

OR

```sh
$ npx @mstssk/whatver git
npx: installed 1 in 1.336s
git version 2.19.1
```

## Motivation

There are many commands, and have options to show versions each other.
However these options are not same and have many variations.
We don't want to take care about "what a option is to show version for this command?"

## Version args repository

https://github.com/mstssk/whatver-repo
npm package: @mstuart/iterable-ops
Description: A WeakRef-based cache that automatically evicts entries when values are garbage collected
Author: Mark Stuart
Latest version: 1.0.0

# weak-cache

> A WeakRef-based cache that automatically evicts entries when values are garbage collected

## Install

```sh
npm install weak-cache
```

## Usage

```js
import WeakCache from 'weak-cache';

const cache = new WeakCache({
	onEvict(key) {
		console.log(`${key} was garbage collected`);
	},
});

let value = {data: 'hello'};
cache.set('key', value);

console.log(cache.get('key'));
//=> {data: 'hello'}

console.log(cache.has('key'));
//=> true
```

## API

### new WeakCache(options?)

#### options

Type: `object`

##### onEvict

Type: `(key) => void`

Callback invoked with the key when an entry is evicted by garbage collection.

### .get(key)

Returns the value for the key, or `undefined` if the key does not exist or its value has been garbage collected.

### .set(key, value)

Set a key-value pair. The value must be an object (required for `WeakRef`). Throws `TypeError` for primitives.

### .has(key)

Returns `true` if the key exists and the value is still alive.

### .delete(key)

Removes an entry. Returns `true` if the entry existed.

### .size

The approximate number of entries. May include entries whose values have been collected but not yet finalized.

## Related

- [WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef) - MDN WeakRef documentation
- [FinalizationRegistry](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry) - MDN FinalizationRegistry documentation

## License

MIT
npm package: @mstuart/weak-cache
Description: A WeakRef-based cache that automatically evicts entries when values are garbage collected
Author: Mark Stuart
Latest version: 1.0.0

# weak-cache

> A WeakRef-based cache that automatically evicts entries when values are garbage collected

## Install

```sh
npm install weak-cache
```

## Usage

```js
import WeakCache from 'weak-cache';

const cache = new WeakCache({
	onEvict(key) {
		console.log(`${key} was garbage collected`);
	},
});

let value = {data: 'hello'};
cache.set('key', value);

console.log(cache.get('key'));
//=> {data: 'hello'}

console.log(cache.has('key'));
//=> true
```

## API

### new WeakCache(options?)

#### options

Type: `object`

##### onEvict

Type: `(key) => void`

Callback invoked with the key when an entry is evicted by garbage collection.

### .get(key)

Returns the value for the key, or `undefined` if the key does not exist or its value has been garbage collected.

### .set(key, value)

Set a key-value pair. The value must be an object (required for `WeakRef`). Throws `TypeError` for primitives.

### .has(key)

Returns `true` if the key exists and the value is still alive.

### .delete(key)

Removes an entry. Returns `true` if the entry existed.

### .size

The approximate number of entries. May include entries whose values have been collected but not yet finalized.

## Related

- [WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef) - MDN WeakRef documentation
- [FinalizationRegistry](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry) - MDN FinalizationRegistry documentation

## License

MIT