open-index/open-npm huggingface dataset:
npm package: @frontendfixer/stylelint-config-standard
Description: Stylelint config with standard rules and useful plugins
Author: Lakshmikanta Patra
Latest version: 1.0.1

# @frontendfixer/stylelint-config-standard

![npm](https://img.shields.io/npm/v/%40frontendfixer%2Fstylelint-config-standard?style=social&logo=npm&logoColor=%23ff5555) ![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/frontendfixer/-frontendfixer-stylelint-config-standard/release.yml?style=social&logo=github) ![GitHub](https://img.shields.io/github/license/frontendfixer/-frontendfixer-stylelint-config-standard)

Stylelint config with standard rules and useful plugins

---

## Packages included

- plugins
  - [stylelint-scss](https://github.com/stylelint-scss/stylelint-scss)
- Config Extended
  - [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
  - [stylelint-config-standard-scss](https://github.com/stylelint/stylelint-config-standard-scss)
  - [stylelint-config-css-modules](https://github.com/pascalduez/stylelint-config-css-modules)
  - [stylelint-config-recess-order](https://github.com/stormwarning/stylelint-config-recess-order)
- [postcss-scss](https://github.com/postcss/postcss-scss)

---

## Usages

### Installation

```bash
yarn add -D postcss^8.4.27 stylelint^15.10.2 @frontendfixer/stylelint-config-standard

```

### Configuration

Create a Stylelint config file with `.stylelintrc` or `.stylelintrc.json` and put this lint

```json
{
  "extends": "@frontendfixer/stylelint-config-standard"
}
```

or you can also put it in your `package.json` above scripts or higher position

```json
"stylelint": {
    "extends": "@frontendfixer/stylelint-config-standard"
  }
```

### Add script

You can add two scripts to your package.json to lint and/or fix:

```json
"scripts": {
  "lint": "stylelint '**/*.{css,scss}'",
  "lint:fix": "stylelint '**/*.{css,scss}' --fix",
},
```

- Now you can manually lint your code by running `yarn run lint` and fix all fixable issues with `yarn run lint:fix`. You probably want your editor to do this though.

### Auto fix lint error with VSCode

You should read this entire thing. Serious!

Once you have done one, or both, of the above installs. You probably want your editor to lint and fix for you. Here are the instructions for VS Code:

1. Install the [vscode-stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
2. Now we need to setup some VS Code settings via `Code/File` → `Preferences` → `Settings`. It's easier to enter these settings while editing the `settings.json` file, so click the Open (Open Settings) icon in the top right corner:

```js
// disable the built-in CSS, Less, and SCSS linters:
"css.validate": false,
"scss.validate": false,
// enable stylelint
"stylelint.validate": ["css", "scss"],
// tell the Stylelint plugin to run on save
"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
},
```
npm package: @frontendfyi/cli
Description: > ## ALPHA VERSION > > This package is in **a very early stage of development**. I'm experimenting with how I want this CLI to work. On top of that it only supports a very small subset of frontend toolings — it for example installs React eslint dependenci
Author: Jeroen Reumkens
Latest version: 0.0.1-experimental.11

# @frontendfyi/cli

> ## ALPHA VERSION
>
> This package is in **a very early stage of development**. I'm experimenting with how I want this CLI to work. On top of that it only supports a very small subset of frontend toolings — it for example installs React eslint dependencies when enabling Eslint automatically. Of course that isn't very flexible. This will change in the future.

There's a lot of great frontend tooling out there. But every time I start a new project, I need to combine all these things together and remember which tools I like to use. This CLI helps me in setting up my projects with the toolings I like.

![CleanShot 2024-02-28 at 16 26 43](https://github.com/frontendfyi/ui/assets/2969573/eeacdecd-5cc3-4e0f-834e-452faab7cbda)

## What does it include?

It brings the following tools:

1. Tailwind
   1. If prettier is enabled too, it will add the tailwind prettier plugin too
   2. Tailwind PostCSS Config
   3. Optional basic CSS file with `@tailwind` directives
2. Prettier
   1. Includes `@trivago/prettier-plugin-sort-imports` for import sorting
   2. Includes Eslint prettier plugin if eslint is enabled too
3. Eslint

### Framework and library detection

I currently have some extra detections built in for frameworks/libraries you might be using. Based on that I will install extra configs.

- NextJS:
  - Eslint core web vitals plugin
- Typescript:
  - Eslint Typescript/eslint plugin and config

## Usage

Make sure you already have an empty project setup (a package.json should be present, this is pretty much the only requirement). So run either: `npx create-vite .`, `npm init`, or any other project starter. Once you have your basic project in place, you can run the following command in the root of your project:

```
npx @frontendfyi/cli@latest setup .
```

If you omit the `.` the CLI will ask you where you want to put the files instead.
npm package: @frontendista/astro-html-minify
Description: HTML minifier for statically rendered files in Astro
Author: Pavel Sušický
Latest version: 2.0.0

# Astro HTML minify

HTML minifier for statically rendered files in Astro.

# 1. Usage

## 1.1 Using `astro add` command

```sh
# Using npm
npx astro add @frontendista/astro-html-minify

# Using yarn
yarn astro add @frontendista/astro-html-minify

# Using pnpm
pnpx astro add @frontendista/astro-html-minify
```

## 1.2 Manually

### 1.2.1 Install dependency

```sh
# Using npm
npm install --save-dev @frontendista/astro-html-minify

# Using npm
yarn add -D @frontendista/astro-html-minify

# Using npm
pnpm add -D @frontendista/astro-html-minify
```

### 1.2.2 Add to configuration

Default import the integration and add it to `integrations` key in your `astro.config.{mjs,js,ts}` configuration.

```ts
import { defineConfig } from "astro/config";

import minify from "@frontendista/astro-html-minify";

export default defineConfig({
	integrations: [minify()]
});
```

## 1.3 Customize minifiers options

```ts
import { defineConfig } from "astro/config";

import minify from "@frontendista/astro-html-minify";

export default defineConfig({
	integrations: [
		minify({
			html: {
				// Customize Terser options
			},
			css: {
				// Customize LightningCSS options
			},
			js: {
				// Customize ESBuild options
			}
		})
	]
});
```
npm package: @frontendista/html-minifier-terser
Description: HTML minifier that uses LightningCSS and ESBuild
Author: Pavel Sušický
Latest version: 0.2.2

# @frontendista/html-minifier-terser

HTML minifier that uses LightningCSS and ESBuild for minification.

# Installation

```sh
pnpm install @frontendista/html-minifier-terser
```

# Usage

```ts
import { Minifier } from "@frontendista/html-minifier-terser"

const minifier = new Minifier()
.withHTMLOptions({
    // Override the default Terser options.
})
.withCSSOptions({
    // Override the default LightningCSS options.
});
.withJSOptions({
    // Override the default ESBuild options.
});

const minifiedHTML = minifier.minify("")
```
npm package: @frontendista/rehype-sectionize
Description: rehype plugin that wraps section based on heading
Author: Takahashi Yuki
Latest version: 1.1.1

# rehype-sectionize

![test workflow](https://github.com/hbsnow/rehype-sectionize/actions/workflows/test.yml/badge.svg)
[![codecov](https://codecov.io/gh/hbsnow/rehype-sectionize/branch/main/graph/badge.svg?token=T3Z18P56LV)](https://codecov.io/gh/hbsnow/rehype-sectionize)

## Motivation

There is already [rehype-section][rehype-section] in the library for sectioning. But it could not change the class of section. In addition, sections could not have the slug of heading in the data attribute. I was referred [rehype-section][rehype-section]. Thanks.

## Install

```
npm i -D @hbsnow/rehype-sectionize
```

## Sample

### Input

```html
<h1 id="h1-id">h1</h1>
<h2 id="h2-id">h2</h2>
<h3 id="h3-id">h3</h3>
```

### Output

```html
<section class="heading" data-heading-rank="1" aria-labelledby="h1-id">
  <h1 id="h1-id">h1</h1>
  <section class="heading" data-heading-rank="2" aria-labelledby="h2-id">
    <h2 id="h2-id">h2</h2>
    <section class="heading" data-heading-rank="3" aria-labelledby="h3-id">
      <h3 id="h3-id">h3</h3>
    </section>
  </section>
</section>
```

## Options

| option              | type                    | default           | description                    |
| ------------------- | ----------------------- | ----------------- | ------------------------------ |
| `properties`        | `hastscript.Properties` | `{}`              | Attributes assigned to section |
| `enableRootSection` | `boolean`               | `false`           | Section to wrap all            |
| `rankPropertyName`  | `string`                | `dataHeadingRank` | Name of rank data attribute    |
| `idPropertyName`    | `string`                | `ariaLabelledby`  | Name of id data attribute      |

## License

[MIT][license] © [hbsnow][author]

[license]: license
[author]: https://hbsnow.dev
[rehype-section]: https://github.com/agentofuser/rehype-section
npm package: @frontendlive/eslint-config
Description: Common ESLint Configuration for projects at github.com/frontendlive
Latest version: 1.2.0

# eslint-config-frontendlive

Personal ESLint Configuration for projects at github.com/frontendlive

### Features

* JavaScript linting with `eslint-config-airbnb`
* React best practices (including hooks)
* Accessibility (a11y) best practices
* Browser compatibility warnings
* Typescript integration
* Import sorting

### Sort Order

This configuration enables automatic import sorting using `eslint --fix` to sort imports to the following order:

1. `import React from 'react'` (always goes first)
2. Third party libraries (i.e. from `node_modules`)
3. Imports from the root directory using the alias `'@/../..'`
4. Relative imports (i.e. `../` or `./`)

Imports in the same group will then be sorted alphabetically.
npm package: @frontendmonster/builder
Description: simple build script for my FOS libs
Author: frontendmonster
Latest version: 2.2.0

# @frontendmonster/builder

Simple build script for my FOS projects.
run build command, copy package.files and pacage.json to outdir

## Instalation

```bash
npm install --save-dev @frontendmonster/builder
```

or

```sh
yarn add --dev @frontendmonster/builder
```

## Usage

```sh
builder [options]
```

## Options:

| arg           | alias | description                           |
| ------------- | ----- | ------------------------------------- |
| --version     | -v    | package version                       |
| --outDir      | -o    | output directory (default: lib)       |
| --cmd         | -c    | build commad (default: npm run build) |
| --ignoreBuild |       | ignore build command                  |
| --pack        |       | generate output pack                  |
| --publish     |       | pulish package with npm               |
npm package: @frontendmonster/crypto
Description: useful encryption and jwt utils
Author: frontendmonster
Latest version: 4.0.0

# crypto

Useful encryption and jwt utils

## Bcrypt

```typescript
import { hash, hashSync, compare } from '@frontendmonster/crypto';

const passwordHash = await hash(password, saltLen); // hash password with specific salt and returns Promise<string>
const passwordHashSync = await hashSync(password, saltLen); // hash password with specific salt and returns hash
const isValid = await compare(userPassword, hashedPassword); // compare hashed passwords
```

## Id

```typescript
import { randomId, randomHex, randomNumber } from '@frontendmonster/crypto';

const id = randomId(16); // create 16-len uid
const hex = randomHex(16); // create 16-len uid
const HEX = randomHex(16, { casing: 'uppercase' }); // create 16-len uppercase hex string
const numbers = randomNumber(16); // create 16-len number string
```

## JWT

```typescript
import { decode, sign, verify } from '@frontendmonster/crypto';
const jwt = sign(payload, secret, option); // sign json web token
const isValid = verify(jwt, token); // verify json web token
const payload = decode(jwt); // decode json web token
```
npm package: @frontendmonster/eslint-config
Description: frontendmonster eslint config
Author: frontendmonster
Latest version: 4.0.4
Deprecated: @frontendmonster/eslint-config package has been renamed to @fullstacksjs/eslint-config

# @frontendmonster/eslint-config

my personal ESLint rules.

## Installation

```sh
npm install --save-dev eslint @frontendmonster/eslint-config
```

## Usage

Add the extends to your `.eslintrc`:

```javascript
{
  "parserOptions": {
    "project": "<PATH_TO_TSCONFIG>"
  },
  "extends": ["@frontendmonster"],
}
```

That's all. Feel free to use 💛
npm package: @frontendmonster/graphql-utils
Description: Useful utilities for create graphql server and client
Author: frontendmonster
Latest version: 4.0.1

# @frontendmonster/graphql-utils

## Client Module

### API

The simple way to generate apollo-client with jwt refresh token and authentication helpers.

| api                    | description |
| ---                    | ---         |
|`createApolloClient`    | create zero-config apollo-client with retriable-fetch.|
|`createRetriableFetch`  | create apollo-http-link fetch that refreshes token when jwt token is expired. |

```javascript
import { createApolloClient } from '@frontendmonster/graphql-utils/client';

const apolloClinet = createApolloClient({
    endpoint: 'http://localhost:3000/graphql',
    intialState: {},
    refreshTokenMutation: `graphqlMutationToRefreshToken($userId, $refreshToken) { token, refreshToken } `,
    resolvers: {},
    debug: isDev,
    storage: MyStorage,
    onLogin: (storage, cache, user, accessToken, refreshToken) => console.log(`${user} logged in let's save that on storage and update apollo-cache.`),
    onLogout: (storage, cache) => console.log('user logged out lets reset the apollo-cache and storage'),
  });
};
```

---

## Server Module

### graphql-errors

Extending [apollo-server-errors](https://github.com/apollographql/apollo-server/tree/master/packages/apollo-server-errors)

* NotFoundError
* AlreadyExistedError
* ForbiddenError
* AlreadyAuthenticatedError
* UnknownError
* UserInputError
* ForbidenError
* AuthenticationError
* ValidationError

#### Usage

```javascript
import { NotFoundError } from '@frontendmonster/graphql-utils/server';

const resolvers = {
  user: (root, input, context) => {
    // ...
    if(user == null) {
      throw new NotFoundError('user'); // throws NOT_FOUND error with UserNotFound message
    }
    // ...
  }
}
```

### graphql-client

Simple graphql client for testing purpose.
You can inject mongodb models and redis instance.

#### Usage

1. Create a graphql-client instance with schema, mongoose models and redis client.
2. Use `instance.run(query)`;

#### GraphqlClient Instace Api

`run<T>:: (query, [user], [variables]) => Promise<T>`

arguments:

* `query`: graphql query
* `user`: will pass to query context for authorization purpos
* `variables`: query variables

#### Example

```javascript
import { GraphqlClient } from '@frontendmonster/graphql-utils/server';
import { schema, context } from './schema';

const graphqlClient = new GraphqlClient({ schema, context });

const query = `{
  hello
}`;

const result = await graphqlClient.run(query); // result.data.hello > 'world'

```
npm package: @frontendmonster/password
Description: hash and compare passwords
Author: frontendmonster
Latest version: 2.0.0
Deprecated: This module is deprecated use @frontendmonster/crypto instead

# password

useful encryption and jwt utils

## Usage

```javascript
import { hash, compare, uid, decode, sign, verify } from '@frontendmonster/password';

const hashedPassword = await hash(password, salt); // hash password with specific salt
const await compare(userPassword, hasedPassword); // compare hashed passwords
const token = uid(16); // crate 16-len uid
const jwt = sign(payload, secret, option); // sign json web token
const isValid = verify(jwt, tokn); // verify json web token
const payload = decode(jwt); // decode json web token
```
npm package: @frontendmonster/steps
Description: creates array of numbers from start to end point with specific steps.
Author: frontendmonster
Latest version: 1.0.0

# @frontendmonster/setps

Creates array of numbers from start to end point with specific steps.

## Usage

```javascript
import steps from '@frontendmonster/steps';

steps(0, 5, 1); // [0, .2, .4, .6, .8, 1]
steps(0, 2, 1); // [0, .5, 1]
steps(0, .3, 4) // Error: Can't reach end with 0.3 steps
```
npm package: @frontendmonster/styled-utils
Description: utilities for css-in-js dev
Author: frontendmonster
Latest version: 1.0.0

# @frontendmonster/styled-utils

utilities for css-in-js dev

## thickness

returns css like thickness function

### Usage

```javascript
import { ThicknessHelper } from '@frontendmonster/styled-utils';

const pxThickness = ThicknessHelper('px');
const empxThickness = ThicknessHelper('em', 'px');
const empxpcThickness = ThicknessHelper('em', 'px', 'pc');
const empxpcpsThickness = ThicknessHelper('em', 'px', 'pc', '%');

pxThickness(1);       // '1px 1px 1px 1px'
pxThickness(1, 2);    // '1px 2px 1px 2px'
pxThickness(1,2,3);   // '1px 2px 3px 2px'
pxThickness(1,2,3,4); // '1px 2px 3px 4px'

empxThickness(0,2,3,4); // '0em 2px 3em 4px'

empxpcThickness(0,2,3,4); // '0em 2px 3pc 4px'

empxpcpsThickness(0,2,3,4); // '0em 2px 3pc 4%'
```

## placeholder

returns cross-brwser placeholder style

### Usage

```javascript
import { placeholder } from '@frontendmonster/styled-utils';

const style = `
  color: #222;
  opacity: .4;

  &:focus {
    opacity: .6
  }
`

placeholder(style);

/*
result will be:

`::-webkit-input-placeholder {
  color: #222; opacity: .4; &:focus { opacity: .6 }
}

::-moz-placeholder {
  color: #222; opacity: .4; &:focus { opacity: .6 }
}

:-ms-input-placeholder {
  color: #222; opacity: .4; &:focus { opacity: .6 }
}

:-moz-placeholder {
  color: #222; opacity: .4; &:focus { opacity: .6 }
}`
*/
```