open-index/open-npm huggingface dataset:
npm package: @stijnvanhulle/babel-plugin-hooks-devtools
Description: Babel plugin to debug useState and useEffect inside of the redux devtools
Author: Stijn Van Hulle
Latest version: 0.1.3

# @stijnvanhulle/babel-plugin-hooks-devtools

Babel plugin to debug useState and useEffect inside of the redux devtools

## Getting Started

To begin, you'll need to install `@stijnvanhulle/babel-plugin-hooks-devtools`:

```console
$ npm install @stijnvanhulle/babel-plugin-hooks-devtools --save-dev
```

**babel.config.js**

```js
module.exports = {
  plugins: {
    [
      "@stijnvanhulle/babel-plugin-hooks-devtools",
      {
        active: true,
      },
    ]
  },
};
```

And _debug_ comment in front of the useEffect/useState that you want to debug

```js
const [isOpen, setIsOpen] = useState(false);
// debug
useEffect(() => {
  setIsOpen((value) => !value);
}, [isOpen]);
```

## Examples

### Initial load
<img width="706" src="https://user-images.githubusercontent.com/5904681/151671976-07eb785a-e838-4bba-933d-eef56c981fde.png"/>
<img width="793" src="https://user-images.githubusercontent.com/5904681/151671982-5e08e7cd-e93e-447d-8770-b113c6bd8d15.png"/>

### Changes happening in the useEffect hook
<img width="708" src="https://user-images.githubusercontent.com/5904681/151671990-92f0b9b2-cebf-43cc-b782-6d91c7d4dc2d.png"/>
<img width="797" src="https://user-images.githubusercontent.com/5904681/151671994-e53176e7-2a4b-4b69-a269-626a7e286380.png"/>
npm package: @stijnvanhulle/components
Description: Components library React
Author: Stijn Van Hulle
Latest version: 3.0.15

[![Build package and publish](https://github.com/stijnvanhulle/components/actions/workflows/buildPublish.yml/badge.svg)](https://github.com/stijnvanhulle/components/actions/workflows/buildPublish.yml)
[![npm version](https://badge.fury.io/js/@stijnvanhulle%2Fcomponents.svg)](https://badge.fury.io/js/@stijnvanhulle%2Fcomponents)
# Template

Components library

## Installation

```bash
yarn
```

## Install global to use generator

```bash
Usage: components [options] [arguments]

Options:
init                        Create template from zip, optional: 
                            --template [pathToZip] required
                            --to [pathToFolder] default to current directory
zip                         Zip template, optional: 
                            --from [pathToFolder] default from ./template directory
                            --to [pathToZip] default to ./config/template directory
```

## Start testing

```bash
yarn test
```

## Watch testing/debug

```bash
yarn run test:watch
yarn run test:debug
```


- to use default webpack settings, make file webpack.config.js and export "module.exports = require("@stijnvanhulle/components/bin/webpack")"
- to use default jest settings, make file jest.config.js and export "module.exports = require("@stijnvanhulle/components/jest.config.js")"
- to use default tsconfig, import from "@stijnvanhulle/components/tsconfig.NAME.json"
- are you using esnext as target use then components from "@stijnvanhulle/components/es/*"
npm package: @stijnvanhulle/css-vars-loader
Description: Loader to use config.json file as css variables
Author: Stijn Van Hulle
Latest version: 1.2.1

<div align="center">
  <a href="https://github.com/webpack/webpack">
    <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
  </a>
</div>

# @stijnvanhulle/css-vars-loader

Loader to use config.json file as css variables. This puts the declaration at the end of your base css file.
This is based on what the [less-loader](https://www.npmjs.com/package/less-loader#lessoptions) is using for setting the less-option *modify vars*. 
See [--modify-var](https://lesscss.org/usage/#command-line-usage-options) less cli command for more information.
```bash
lessc --modify-var
```

## Getting Started

To begin, you'll need to install `@stijnvanhulle/css-vars-loader`:

```console
$ npm install @stijnvanhulle/css-vars-loader --save-dev
```

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: `@stijnvanhulle/css-vars-loader`,
            options: { ...options },
          },
        ],
      },
    ],
  },
};
```

And run `webpack` via your preferred method.

## Options

### `modifyVars`

Type: `modifyVars`
Default: `undefined`

Object with all colours you wan to use as css variables

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        loader: `@stijnvanhulle/css-vars-loader`,
        options: {
          modifyVars: {
            'primary-color': 'blue',
          },
        },
      },
    ],
  },
};
```

### `file`

Type: `file`
Default: `undefined`

The file where you want to append the css variables, see [ResourcePath](https://webpack.js.org/api/loaders/#thisresourcepath) for path format

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        loader: `@stijnvanhulle/css-vars-loader`,
        options: {
          modifyVars: {
            'primary-color': 'blue',
          },
          file: Path.resolve('./css/global.css'),
        },
      },
    ],
  },
};
```

## Examples

**config.js**

```json
{
  "primary-color": "#000"
}
```

**global.css**

```css
html {
  background: white;
}
```

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        loader: `@stijnvanhulle/css-vars-loader`,
        options: {
          modifyVars: require('./config.js'),
          file: Path.resolve('./global.css'),
        },
      },
    ],
  },
};
```

**bundle.css**

```css
html {
  background: white;
}

:root {
  --primary-color: #000;
}
```

## Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

[CONTRIBUTING](./.github/CONTRIBUTING.md)

## License

[MIT](./LICENSE)
npm package: @stile/github-releases
Description: <p align="center">   <a href="#">     <img alt="" src="logo.png" width="60" />   </a> </p> <h1 align="center">   Library Name </h1> <h3 align="center">   Tag line </h3> <p align="center">   Short description. </p>
Latest version: 1.1.0-3

<p align="center">
  <a href="#">
    <img alt="" src="logo.png" width="60" />
  </a>
</p>
<h1 align="center">
  Library Name
</h1>
<h3 align="center">
  Tag line
</h3>
<p align="center">
  Short description.
</p>

Feature Descriptions 

- **Feature one.** Get all.
- **Feature two.** Other good feature.



## What’s In This Document

- [Get Up and Running](#-get-up-and-running)
- [Learning](#-learning)

## 🚀 Get Up and Running

You can get a new site up and running on your local dev environment in 5 minutes with these four steps:

1. **Install no CLI.**

   ```shell
   npm install

   ```


## ❗ Code of Conduct

 We expect everyone participating in the community to abide by our [**Code of Conduct**](CODE_OF_CONDUCT.md). Please read it. Please follow it. We work hard to build each other up and create amazing things together. 💪💜

## 🤝 How to Contribute

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the community! :muscle::purple_heart:

Check out our [**Contributing Guide**]() for ideas on contributing and setup steps for getting our repositories up and running on your local machine.

### A note on how this repository is organized

This repository is codebase for all and we publish it to NPM as package.

### Contributing

We are currently only accepting bug fixes.

## :memo: License

Licensed under the [MIT License](./LICENSE).

## 💜 Thanks

Thanks to our many contributors.
npm package: @still-forest/biomejs-config
Description: biome.js config for Still Forest
Author: John Szymanowski
Latest version: 2.2.0

# Biome config for Still Forest

### Key features

- Uses `.gitignore` to avoid formatting unuseful files and directories
- Up to 120 chars per line
- Spacing: spaces instead of tabs, 2 instead of 4
- JavaScript: double quotes, trailing commas, semicolons

### Usage

Firstly, install [biome](https://biomejs.dev) and this [configuration](https://www.npmjs.com/package/@still-forest/biomejs-config):

```bash
pnpm i -D --save-exact @still-forest/biomejs-config @biomejs/biome
```

Then, add the following to your `biome.json`:

```json
{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "extends": ["@still-forest/biomejs-config"]
}
```

And finally, add the following scripts to your `package.json` to easily format and lint your code:

```json
{
  "scripts": {
    "format": "biome format --write .",
    "lint": "biome check .",
    "lint:ci": "biome ci .",
    "lint:fix": "biome check --write --unsafe ."
  }
}
```

### Extending this config

A downstream project's `biome.json` may be extended to override or add rules to this config. Example:

```json
{
  // boilerplat config above
  "files": {
    "includes": ["**", "!**/dist/**", "!**/*.generated.js"]
  }
}
```

For more information:

- https://biomejs.dev/guides/configure-biome/
- https://biomejs.dev/guides/big-projects/#share-the-configuration
- https://biomejs.dev/reference/configuration/
npm package: @still-forest/canopy-charts
Description: React charts, built with VisX and Canopy
Author: John Szymanowski
Latest version: 0.4.1

# Canopy Charts

_React charts, built with VisX and [Canopy](https://github.com/still-forest/canopy)_

**Resources**

- [Github repo](https://github.com/still-forest/canopy-charts)
- Distribution
  - [npm registry](https://www.npmjs.com/package/@still-forest/canopy-charts)
- Building blocks
  - [TailwindCSS](https://tailwindcss.com/docs)
  - [shadcn-ui](https://ui.shadcn.com/docs/)
    - [color themes](https://ui.shadcn.com/colors)
  - [Vite](https://vite.dev/guide/)
  - [Vitest](https://vitest.dev/guide/)
- Documentation via Storybook
  - [Github Pages](https://still-forest.github.io/canopy-charts/)
- Development
  - [Renovate](https://developer.mend.io/github/still-forest/canopy-charts)
- Other documentation, documents
  - [Changelog](./CHANGELOG.md)

---

## Usage

### Installation

When using Vite, Canopy Charts must be included in your primary `.css` file in order to ensure the necessary CSS classes are included in the build. For more details, read the Tailwind CSS documentation on [explicitly registering sources](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources).

Example `index.css`:

```css
@import "tailwindcss";
@source "../node_modules/@still-forest/canopy-charts/dist";

@layer base {
  /* your usual CSS definitions */
}
```
npm package: @still-forest/pollen
Description: TypeScript linter + formatter, based on ESLint & Prettier
Author: John Szymanowski
Latest version: 0.3.0

# Pollen

TypeScript linter + formatter, based on ESLint &amp; Prettier

## Usage

Add as a dependency, along with peer dependencies:

```bash
pnpm add -D @still-forest/pollen eslint prettier typescript --save-exact
```

### Configure package.json

Add scripts to your `package.json` file, e.g.:

```jsonc
// package.json
"scripts": {
  "format": "prettier --write .",
  "lint": "eslint --ext .js,.ts .",
  "lint:ci": "eslint --ext .js,.ts --quiet .",
  "lint:fix": "eslint --ext .js,.ts --fix .",
}
```

### Configure ESLint

Add a `eslint.config.js|mjs` file with:

```js
// Base config (JS/TS)
export { base as default } from "@still-forest/pollen";

// React config (base + JSX/TSX + React)
export { react as default } from "@still-forest/pollen";
```

### Configure Prettier

#### Option 1: package.json reference

```jsonc
// package.json
"prettier": "@still-forest/pollen/prettier"
```

#### Option 2: ES module

Add a `prettier.config.js|mjs` file with:

```js
export { prettier as default } from "@still-forest/pollen";
```

## Local testing

Test this package in a local downstream project with `npm pack`

### Pack this package (pollen)

```bash
pnpm pack
```

### Install downstream

Taking note of the `.tgz` file (likely named with the format `still-forest-pollen-1.2.3.tgz`), install it:

```bash
# From another repo, install with:
pn add ~/Development/pollen/still-forest-pollen-0.1.0.tgz
```
npm package: @still-forest/proper-date.js
Description: Simple, lightweight date object library for JavaScript/TypeScript, without the time nonsense.
Author: John Szymanowski
Latest version: 0.9.0

# ProperDate.js

A simple, lightweight date object library for JavaScript/TypeScript, without the time and timezone nonsense.

[![codecov](https://codecov.io/gh/still-forest/proper-date.js/branch/main/graph/badge.svg)](https://codecov.io/gh/still-forest/proper-date.js)

## Usage

```js
import ProperDate from "@still-forest/proper-date.js";

const date = ProperDate("2024-12-25");
date.formatted; // '2024-12-25'

// and so on
```

## Package management

### Local testing

Testing this package as a dependency is easy with [Yalc](https://github.com/wclr/yalc):

```bash
# Install (depending on your preferred package manager)
npm i yalc -g
yarn global add yalc
pnpm add -g yalc

# Build this library, as usual:
pnpm build

# "Publish" this library locally (run in this directory)
yalc publish

# Link the locally "published" version of ProperDate.js (run in the consuming app/library)
## This will copy the local version of this library into the `.yalc` folder and modify your
## package.json to look for this library there.  You will want to add `.yalc` to your `.gitignore`,
## and be sure to change back to the real published version before shipping.
yalc add @still-forest/proper-date.js

# As needed: update the locally "published" package
yalc update @still-forest/proper-date.js
yalc update # all packages in yalc.lock

# When done
## In consuming app/library:
yalc remove @still-forest/proper-date.js
yalc remove --all # all packages in yalc.lock

## In this package:
yalc installations clean @still-forest/proper-date.js # unpublish / reverts yalc publish
```

### Publishing

Manual:

```bash
git tag v0.1.0
git push origin v0.1.0
```
npm package: @still-oss/vite-plugin-svg-sprite
Description: SVG sprite plugin for Vite
Author: meowtec
Latest version: 0.8.1

# @still-oss/vite-plugin-svg-sprite

Fork of [vite-plugin-svg-sprite](https://github.com/meowtec/vite-plugin-svg-sprite) with various [improvements](https://github.com/still-oss/vite-plugin-svg-sprite/compare/meowtec:main...still-oss:main).
npm package: @stillmotionhu/aero-svelte
Description: Aero is a component library inspired by the design principles of the Frutiger Aero design trend.
Author: Balázs Papp
Latest version: 0.0.5

# @stillmotionhu/aero-svelte

Aero is a component library inspired by the design principles of the Frutiger Aero design trend.
npm package: @stillyu/schematics
Description: Nest - modern, fast, powerful node.js web framework (@schematics)
Latest version: 9.0.9

<p align="center">
  <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="120" alt="Nest Logo" /></a>
</p>

  <p align="center">A progressive <a href="http://nodejs.org" target="blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
    <p align="center">
<a href="https://www.npmjs.com/~nestjscore"><img src="https://img.shields.io/npm/v/@nestjs/schematics.svg" alt="NPM Version" /></a>
<a href="https://www.npmjs.com/~nestjscore"><img src="https://img.shields.io/npm/l/@nestjs/schematics.svg" alt="Package License" /></a>
<a href="https://www.npmjs.com/~nestjscore"><img src="https://img.shields.io/npm/dm/@nestjs/schematics.svg" alt="NPM Downloads" /></a>
  <a href="https://coveralls.io/github/nestjs/nest?branch=master" target="_blank"><img src="https://coveralls.io/repos/github/nestjs/nest/badge.svg?branch=master#9" alt="Coverage" /></a>
<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
  <a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg"/></a>
  <a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow"></a>

## Description

The Nest CLI is a command-line interface tool that helps you to initialize, develop, and maintain your Nest applications. It assists in multiple ways, including scaffolding the project, serving it in development mode, and building and bundling the application for production distribution. It embodies best-practice architectural patterns to encourage well-structured apps. Read more [here](https://docs.nestjs.com/cli/overview).

## Installation

```bash
$ npm install -g @nestjs/schematics
```

## Usage

Learn more in the [official documentation](https://docs.nestjs.com/).

## Stay in touch

- Website - [https://nestjs.com](https://nestjs.com/)
- Twitter - [@nestframework](https://twitter.com/nestframework)

## License

Nest is [MIT licensed](LICENSE).
npm package: @stilt/core
Description: Core component of the stilt framework
Author: Zoé Cox
Latest version: 0.21.0-alpha.21

# @stilt/core

*Stilt Framework Conductor*

## Stilt Core

Stilt Core is the main module of Stilt. It provides the necessary tools
that plugins can use such as dependency injection.

## Table Of Contents

- [Usage](docs/USAGE.md)
- [Dependency Injection](docs/DEPENDENCY_INJECTION.md)

## Available Plugins

- [@stilt/http](../packages/http/README.md) the base building block for HTTP servers.
- [@stilt/rest](../packages/rest/README.md) if you are interested in building a REST API.
- [@stilt/graphql](../packages/graphql/README.md) if you are interested in building a GraphQL API.
- [@stilt/squelize](../packages/sequelize/README.md) for sequelize support.
- [@stilt/jwt-sessions](../packages/jwt-sessions/README.md) to get access to jwt-based sessions.
npm package: @stilt/graphql
Description: GraphQL Module for Stilt Framework
Author: Zoé Cox
Latest version: 0.21.0-alpha.25

# @stilt/graphql

*GraphQL Adapter for Stilt Framework*

## Table Of Contents

- [Basic Usage](docs/USAGE.md)
- [Error Handling](docs/ERRORS.md)
- [Custom Scalars](docs/SCALARS.md)