open-index/open-npm huggingface dataset:
npm package: @marknenadov/noctuidae-eslint-config
Description: An opiniated, somewhat strict, yet reasonable eslint configuration.
Author: Mark Nenadov
Latest version: 0.3.1

# noctuidae-eslint-config

An opiniated, somewhat strict, yet reasonable eslint configuration.

## node

Package: @marknenadov/noctuidae-eslint-config
Current Version 0.3.1
npm package: @marknguyen/inst-ui
Description: A meta package exporting all UI components
Author: Instructure, Inc. Engineering and Product Design
Latest version: 8.39.0

---
category: packages
---

## ui

[![npm][npm]][npm-url]
[![MIT License][license-badge]][license]
[![Code of Conduct][coc-badge]][coc]

A meta package exporting all UI components made by Instructure Inc.

### Components

The `ui` package contains the following:

- AccessibleContent
- Alert
- All ui-icons
- ApplyLocale
- ApplyTextDirection
- AppNav
- Avatar
- Badge
- Billboard
- Breadcrumb
- Button
- Byline
- Calendar
- Checkbox
- CheckboxGroup
- CloseButton
- CodeEditor
- CondensedButton
- ContextView
- DateInput
- Dialog
- DrawerLayout
- Editable
- EmotionThemeProvider
- FileDrop
- Flex
- Focusable
- FormField
- FormFieldGroup
- FormFieldLabel
- FormFieldLayout
- FormFieldMessage
- FormFieldMessages
- Grid
- Heading
- IconButton
- Img
- InlineList
- InlineSVG
- InPlaceEdit
- InstUISettingsProvider
- Link
- List
- Mask
- Menu
- Metric
- MetricGroup
- Modal
- Navigation
- NumberInput
- Options
- Overlay
- Pages
- Pagination
- Pill
- Popover
- Portal
- Position
- PresentationContent
- ProgressBar
- ProgressCircle
- RadioInput
- RadioInputGroup
- RangeInput
- Rating
- Responsive
- ScreenReaderContent
- Select
- Selectable
- Spinner
- SVGIcon
- Tab
- Table
- Tag
- Text
- TextArea
- TextDirectionContext
- TextInput
- TimeSelect
- ToggleButton
- ToggleDetails
- ToggleGroup
- Tooltip
- Transition
- Tray
- TreeBrowser
- TruncateText
- View

### Installation

```sh
yarn add @instructure/ui
```

[npm]: https://img.shields.io/npm/v/@instructure/ui.svg
[npm-url]: https://npmjs.com/package/@instructure/ui
[license-badge]: https://img.shields.io/npm/l/instructure-ui.svg?style=flat-square
[license]: https://github.com/instructure/instructure-ui/blob/master/LICENSE
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/instructure/instructure-ui/blob/master/CODE_OF_CONDUCT.md
npm package: @marknjunge/eslint-config
Description: Mark Njung'e's eslint config
Author: Mark Njung'e
Latest version: 1.14.0

# @marknjunge/eslint-config

[![npm (scoped)](https://img.shields.io/npm/v/@marknjunge/eslint-config)](https://www.npmjs.com/package/@marknjunge/eslint-config)

My ESLint config

## Usage

Install the package

```
npm install --save-dev @marknjunge/eslint-config
```

Add it to the `extends` section of your `.eslintrc` file.

```javascript
extends: ["...", "@marknjunge/eslint-config"]
```

Add the following helpful scripts

```json
"lint": "eslint **/*.js",
"lint:fix": "eslint **/*.js --fix"
```
npm package: @marknjunge/eslint-config-ts
Description: Mark Njung'e's eslint config for Typescript
Author: Mark Njung'e
Latest version: 3.1.0

# eslint-config-ts

[![npm (scoped)](https://img.shields.io/npm/v/@marknjunge/eslint-config-ts)](https://www.npmjs.com/package/@marknjunge/eslint-config-ts)

My ESLint config for Typescript.

## Usage

1. Initialize ESLint based on the documentation: [Getting Started with ESLint](https://eslint.org/docs/latest/use/getting-started)

```shell
npm init @eslint/config@latest
```

2. Install the package

```shell
npm install -D @marknjunge/eslint-config-ts
```

3. Replace `tseslint.configs.recommended` with the config.

```diff
+ import markConfig from "@marknjunge/eslint-config-ts";

export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,ts}"], plugins: { js }, extends: ["js/recommended"], },
  { files: ["**/*.{js,mjs,cjs,ts}"], languageOptions: { globals: globals.node }, },
+ markConfig,
- tseslint.configs.recommended,
]);
```

Alternatively to override rules,

```javascript
export default defineConfig([
  // Default configs ...
  {
    files: ["**/*.{js,mjs,cjs,ts}"],
    plugins: { js },
    extends: [markConfig],
    rules: {
      '@typescript-eslint/require-await': 'warn',
      '@typescript-eslint/no-misused-promises': 'warn'
    }
  },
]);
```

See [Using a Shareable Config](https://eslint.org/docs/latest/extend/shareable-configs#using-a-shareable-config) for other ways to use the config.

Note: You may need to include `eslint.config.mjs` in your `tsconfig.json`
```diff
{
  "include": [
    "src/**/*",
+    "eslint.config.mjs",
  ],
}
```
npm package: @marknotton/css-reset
Description: An opinionated CSS reset
Author: Mark Notton
Latest version: 1.11.7


# CSS Reset

This opinionated css reset is forked from [Elad Shechters](https://elad2412.github.io/the-new-css-reset/)  original version. This iteration includes a number of resets I felt were missing.

## How to get started:

```
npm install @marknotton/css-reset
```
```
yarn add @marknotton/css-reset
```

Or [download the latest version](https://raw.githubusercontent.com/marknotton/css-reset/main/css/reset.css).

## How to use:

### The Sass way:

Import directly in your scss file:
```sass
@use "@marknotton/css-reset"
```
Or
```sass
@use "node_module/@marknotton/css-reset/css/reset.css"
```
Or if you want to use Cascade Layers within your SCSS:
```sass
@use 'sass:meta';

@layer reset, defaults;

@layer reset {
  @include meta.load-css("@marknotton/css-reset");
}

@layer defaults { ... }
```

### The Javascript way:

Include the following snippet in one of the JavaScript/TypeScript entry files:
```js
import "@marknotton/css-reset";
```
Or
```js
import "node_module/@marknotton/css-reset/css/reset.css";
```
npm package: @marknotton/env
Description: Add, edit, delete and read variables from any .env file.
Author: Mark Notton
Latest version: 2.0.0


# Env

![Made For NPM](https://img.shields.io/badge/Made%20for-NPM-orange.svg)

Add, edit, delete and read variables from a .env file.

## Installation
```
npm i @marknotton/env --save-dev
```
```js
import Env from '@marknotton/env'

```

## Usage

Basic usage
```
const env = new Env()
```

You can defined a different .env file by passing in a string that is relative path.

 ```
const env = new Env('.env.example')
```

## Methods

### Set Variable

Add a variable and value to the .env file. Variable will be created if it isn't found. It will be overwritten if it does exists.

```js
env.set(variable, value)
```

### Delete Variable

Delete variable from .env file.

```js
env.delete(variable)
```

### Toggle Variable

Add a 'true' boolean to the given vairable, or remove it entirely if it's false. 

```js
env.toggleBoolean(variable, true)  // Add's VARIABLE=true 
env.toggleBoolean(variable, false) // Removes VARIABLE=true entirely 
```

### Get Variable

Get variable from .env file.

```js
env.get(variable)
```

### Has Variable

Check if a variable exists.

```js
env.has(variable)
```
npm package: @marknotton/gulp-tasks
Description: A private collection of Gulp tasks commonly used within internal projects.
Author: Mark Notton
Latest version: 0.0.3

# Gulp Tasks

![Made For NPM](https://img.shields.io/badge/Made%20for-NPM-orange.svg) ![Made For Gulp](https://img.shields.io/badge/Made%20for-Gulp-red.svg)

A private collection of Gulp tasks commonly used within internal projects.

## Installation
```
npm i @marknotton/gulp-tasks --save-dev
```
```js
const tasks = require('@marknotton/gulp-tasks');

gulp.task('sass', tasks.sass)
gulp.task('scripts', tasks.scripts)
gulp.task('vendors', tasks.vendors)
gulp.task('es5', tasks.es5)
gulp.task('react', tasks.react)
gulp.task('symbols', tasks.symbols)
gulp.task('serve', tasks.serve)
gulp.task('config', tasks.config)

```
TODO: Transpile with Babel so that this can actually be used!
npm package: @marknotton/notifier
Description: Manage CLI and popup notifications messages.
Author: Mark Notton
Latest version: 1.2.2

# Notifier

![Made For NPM](https://img.shields.io/badge/Made%20for-NPM-orange.svg) ![Made For Gulp](https://img.shields.io/badge/Made%20for-Gulp-red.svg)

Manage CLI and popup notification messages.

## Installation
```
npm i @marknotton/notifier --save-dev
```
```js
const notifier = require('@marknotton/notifier');
```

## Usage
```js
gulp.task('someTask', () => {
  return gulp.src([...])
  .pipe(plumber({errorHandler: notifier.error }))
  .pipe(concat('ccombined.js'))
  .pipe(gulp.dest('/some/location/'))
  .pipe(notifier.success())
});
```

## Options
| Option | Type | Default | Details |
|--|--|--|--|
| project    | String | Package.json 'name' | Project name. Will appear as a subheading. |
| exclusions | String | '.map' | Files that match any part of this string will be excluded from any notification |
| prefix     | String | - | String to add before the notification message |
| suffix     | String | - | String to add after the notification message |
| popups     | Bool   | true | Prevent popups from showing. Console logs will still be rendered. Defaults to false on non 'dev' environments. |
| success    | String | <img src="https://i.imgur.com/G6fTWAs.png" alt="Success" align="left" height="20" /> | Icon to use on success messages. Can be relative to the project folder or an absolute URL. An attempt will be made to look for a 'icon.png' in your projects root directly. |
| error      | String | <img src="https://i.imgur.com/VsfiLjV.png" alt="Success" align="left" height="20" /> | Icon to use on error messages. Can be relative to the project folder or an absolute URL |
| messages   | String | Files compiled successfully | The message you want to display. This can be a shorthand name that references an object key defined in the defaults function (see below)   |
| extra      | Array/String| - | Manually add extra files to log out, regardless of whether they are  actually part of the stream |

A string will be defined as the message or message shorthand.

```js
notifier.success('js', { project : 'My Project', ...})
```
Notice the use of a shorthand name as the first parameter. This will look for the keys in the default settings object. So you can list all your messages in one place.

## Defining your default settings

You can preset the above options with the settings function. This will be refereed as your default options for every notifier instance.
```
notifier.settings({
  project : 'My Project,
  success : 'images/icon.png',
  exclusions:'.map',
  messages  : {
    js      : 'Javascript files compiled!',
    sass    : 'Looking gooooood!'
  }
});
```
npm package: @marknotton/source-exists
Description: Report files that don't exist from an array of relative paths.
Author: Mark Notton
Latest version: 1.1.0

# Source Exists

![Made For NPM](https://img.shields.io/badge/Made%20for-NPM-orange.svg)

Report files that don't exist from an array of relative paths.

## Installation
```
npm i @marknotton/source-exists --save-dev
```
```js
const sourceExists = require('@marknotton/source-exists')
```

## Usage

Simply pass in the same array of source files into the sourceExists function to check if the files exist.

Special cases where ignored files (!) or globs (*) are used will not be checked. Only full file paths relative to where the Gulp task file is located.  

```js
gulp.task('scripts', () => {

  let files = [
    "modules/scripts/file.js",
    "public/assets/js/galleryzzzz.js",
    "public/assets/js/inits.js",
    "public/assets/js/*/**.js"
  ]

  sourceExists(files)

  return gulp.src(files)
  .pipe(gulp.dest("combined.js"))
});
```
This will output something like this in your CLI:

`[12:32:01] Missing: public/assets/js/galleryzzzz.js Could not find this file`

You can pass in a second parameter too. A `true` boolean will cause your task to throw an error if a source file couldn't be found rather than outputting a CLI message.
Alternatively you can set your own callback function to do what you like. The callback function passes back an array of strings.  

```js
sourceExists(files, message => { console.log(message); })
```
npm package: @marknotton/svg-to-symbols
Description: A simple SVG to Symbols generator
Author: Mark Notton
Latest version: 1.1.3

# SVG to Symbols

![Made For NPM](https://img.shields.io/badge/Made%20for-NPM-orange.svg) ![Made For Gulp](https://img.shields.io/badge/Made%20for-Gulp-red.svg)

Compile a source of SVG images into one single file, with all files sanitised and refactored to be used as symbols.

## Installation
```
npm i @marknotton/svg-to-symbols --save-dev
```
```js
const symbols = require('@marknotton/svg-to-symbols');
```

## Usage

```js

gulp.task('symbols', () => {

    let options = {
      prefix   : 'icon',
      exclude  : ['facebook', 'twitter'],
      scss     : '/src/sass/_symbols.scss',
      sanitise : true
    };

    return gulp.src('/assets/images/**/*.svg')
    .pipe(symbols(options))
    .pipe(concat('symbols.svg'))
    .pipe(gulp.dest(images))

});
```

## Options

| Setting | Type | Default | Description |
|--|--|--|--|
| prefix | string | icon | All symbol element ID's will be prefixed with this string. A hyphen will be used to separate the prefix and the filename to create a valid ID name. If the prefix name matches an actual filename, then no prefix will be applied.
| exclude | array | null | There may be cases (particularly with complex SVG's) where you don't want to include a SVG image into the symbols file. An array of SVG filenames will be ignored (no need to include the file extension). This does not effect the sass map.
| scss | string/bool | false | Define a path and filename to store a file which contains a Sass map for each symbol. The map will contain the symbol names, height and width. This can come in handy when you need to calculate the original aspect ratios of each symbol.
| sanitise | bool | true | Removes any inline style tags, XML tags and commenting from the symbols. Unless your SVG elements are very cleanly coded, you may find many files contain potentially conflicting CSS styling directly in the file. If you need to retain the styling of a symbol, it's recommended you do this elsewhere (like a global .css file).
| children | bool | false | Enabling this will include useful data of each child element from the svg into the scss map file. This nested map item will log the element type (path, circle, polyline... ), left and top positions, height and width, the x and y co-ordinates of the centre, and class and id names. Additionally, if the child is wrapped in a group `<g>...</g>` a reference name which includes an ID or/and Class attributes concatenated together.