open-index/open-npm huggingface dataset:
npm package: @fnando/check
Description: An alternative for switch..case.
Latest version: 0.1.0

# check

[![NPM package version](https://img.shields.io/npm/v/@fnando/check.svg)](https://www.npmjs.com/package/@fnando/check)
![License: MIT](https://img.shields.io/npm/l/@fnando/check.svg)
![Minified size](http://img.badgesize.io/fnando/check/master/dist/check.web.js.svg?label=min+size)
![Minified+Gzip size](http://img.badgesize.io/fnando/check/master/dist/check.web.js.svg?compression=gzip&label=min%2Bgzip+size)

An alternative for `switch` that resembles [Ruby](https://ruby-lang.org)'s `case`.

## Install

If you're using yarn:

    yarn add @fnando/check

If you're using npm:

    npm install @fnando/check

## Usage

The following example shows all supported type checkings:

```js
import check from "@fnando/check";

// `input` can be either a value or a function.
// When providing a function, the function is called only once
// before running `case`s.
const input = 1;

check(input)
  .case(1, () => console.log("Received one!"))
  .case(/^hello$/, () => console.log("Hello!"))
  .case("Hi", () => console.log("Hi!"))
  .case(undefined, () => console.log("input is undefined"))
  .case(null, () => console.log("input is null"))
  .case([true, false], () => console.log("boolean received"))
  .test(() => console.log("This is the default statement"));
```

Both `case` and `default` functions receive the input value.

```js
check(1)
  .case(1, number => console.log(`Received ${number}`))
  .test();

check(1)
  .test(number => console.log(`Received ${number}`));
```

## License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @fnando/codestyle
Description: ## Installation
Latest version: 0.0.13

# @fnando/codestyle

## Installation

```
$ yarn add -D @fnando/codestyle
```

## Usage

### Typescript

There are 3 distinct configuration files.

- `@fnando/codestyle`: the base file, which covers regular TypeScript, as well as React's.
- `@fnando/codestyle/react-native`: a React Native configuration that extends the base file.
- `@fnando/codestyle/package`: a React Native configuration that emits code for packages.

Create a file `tsconfig.json` with the following lines, extending from the file you care about. Don't forget to specify the source directory.

```json
{
  "extends": "@fnando/codestyle",
  "include": ["src"]
}
```

### Prettier

Create a file `.prettierrc.js` with the following lines:

```json
module.exports = require("@fnando/codestyle/prettier.json");
```

### ESLint

[Follow instructions](https://github.com/fnando/eslint-config-codestyle).

### Jest

Create a file `jest.config.js` with the following lines:

```json
module.exports = require("@fnando/codestyle/react/jest");
```

You can also use `"@fnando/codestyle/typescript/jest"` for Jest configuration without React.

## License

Copyright (c) 2019 Nando Vieira

MIT License

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @fnando/eslint-config-codestyle
Description: ## Installation
Latest version: 0.0.11

# @fnando/eslint-config-codestyle

## Installation

```
$ yarn add -D @fnando/eslint-config-codestyle
```

You may need to install peer dependencies.

- React: `yarn add -D eslint-plugin-react eslint-plugin-react-hooks`
- TypeScript:
  `yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser`

## Usage

Add a section `eslintConfig` to your package.json (or create an equivalent
file). Load the files you need; the follow example loads JavaScript, React, and
TypeScript rules.

```
{
  "eslintConfig": {
    "env": {
      "browser": true
    },
    "extends": [
      "@fnando/codestyle/javascript",
      "@fnando/codestyle/react",
      "@fnando/codestyle/typescript"
    ]
  }
}
```

## License

Copyright (c) 2019 Nando Vieira

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @fnando/eslint-plugin-consistent-import
Description: ESlint rule to enforce imports
Author: Nando Vieira
Latest version: 0.1.1

# eslint-plugin-consistent-import

[![NPM](https://img.shields.io/npm/v/@fnando/eslint-plugin-consistent-import.svg)](https://www.npmjs.com/package/@fnando/eslint-plugin-consistent-import)

Enforces consistent import paths when using `import`.

- No relative imports.
- No imports with extensions (`.[jt]sx?`).
- No absolute imports starting with `/`.

## Installation

You'll first need to install [ESLint](http://eslint.org):

```console
$ yarn add -D @fnando/eslint-plugin-consistent-import
```

## Usage

Add `consistent-import` to the plugins section of your `.eslintrc` configuration
file. You can omit the `eslint-plugin-` prefix:

```json
{
  "plugins": ["@fnando/consistent-import"]
}
```

Then configure the rules you want to use under the rules section.

```json
{
  "rules": {
    "@fnando/consistent-import/consistent-import": "error"
  }
}
```

You can also extend the recommended configuration (defaults to `error`).

```json
{
  "plugins": ["@fnando/consistent-import"],
  "extends": ["plugin:@fnando/consistent-import/recommended"]
}
```

## License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the 'Software'), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @fnando/new
Description: Generate new projects with a custom structure.
Latest version: 0.0.2

# @fnando/new

Generate new projects with a custom structure.

```console
$ npx -p @fnando/new react myproject
```

## License

Copyright (c) 2019 Nando Vieira

MIT License

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @fnando/react-native-carousel
Description: A ridiculously simple carousel.
Author: Nando Vieira
Latest version: 0.1.0

# @fnando/react-native-carousel

A ridiculously simple carousel.

## Usage

### Installation

```console
$ yarn add @fnando/react-native-carousel
```

### How to use

The basic usage is [rendering the carousel as it its][example-1]. This means
that indicators will be rendered using `#ccc` for inactive dots and `#4a90e2`
for active dots.

If you need to customize the indicators in any way, even changing the color,
you'll have to implement your own renderer. You can either disable the
indicators entirely with `showsIndicator={false}` then [rendering them outside
the `Carousel` component][example-2], or just [pass the indicator
element][example-3] using `renderIndicator`.

If you need to programatically go to an specific page, get a `ref` and use
`ref.current.goToPage(page: number, animated: boolean)`. The referece also
contains the current `ScrollView` object.

### Examples

[![Default indicators](https://github.com/fnando/react-native-carousel/raw/master/images/default-indicators.gif)][example-1]

[![Custom indicators](https://github.com/fnando/react-native-carousel/raw/master/images/custom-indicators.gif)][example-2]

[![Custom indicators - Change color](https://github.com/fnando/react-native-carousel/raw/master/images/custom-indicators-simple.gif)][example-3]

## License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the 'Software'), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

[example-1]:
  https://github.com/fnando/react-native-carousel/blob/master/examples/default-indicators/App.tsx
[example-2]:
  https://github.com/fnando/react-native-carousel/blob/master/examples/custom-indicators/App.tsx
[example-3]:
  https://github.com/fnando/react-native-carousel/blob/master/examples/custom-indicators-simple/App.tsx
npm package: @fnando/router
Description: Simple router for the browser.
Author: Nando Vieira
Latest version: 0.2.1

![@fnando/router: Simple router for the browser.](https://github.com/fnando/router/raw/main/router.png)

<p align="center">
  <img src="https://img.shields.io/badge/license-MIT-orange.svg" alt="License: MIT">
  <img src="http://img.badgesize.io/fnando/router/main/dist/router.js.svg?label=min+size" alt="Minified size">
  <img src="http://img.badgesize.io/fnando/router/main/dist/router.js.svg?compression=gzip&label=min%2Bgzip+size" alt="Minified+gzip size">
</p>

## Instalation

This lib is available as a NPM package. To install it, use the following
command:

```
npm install @fnando/router --save
```

If you're using Yarn (and you should):

```
yarn add @fnando/router
```

## Importing Router

If you're using `import`:

```js
import { router } from "@fnando/router";

router()
  .on("/", () => console.log("welcome home!"))
  .on("/posts/:slug", (params) => console.log(`viewing ${params.slug} post`))
  .on(
    "/posts/archive/:year/:month",
    { year: /^\d{4}$/, month: (value) => value >= 1 && value <= 12 },
    (params) => console.log(`viewing archive for ${params.year}`),
  )
  .on("/posts(/new)", () => console.log("/posts or /posts/new"))
  .fallback(() => console.log("no routes matched"))
  .run();
```

## API

- `router().on(path, conditions, callback)` adds a route that must be valid
  according to the `conditions`.
- `router().on(path, callback)` adds a route that must be valid according to the
  target path.
- `router().run(pathname = window.location.pathname)` returns the result of the
  matched url and the params. E.g. `const [result, params] = router().run()`. If
  you have added multiple fallbacks, then `result` will be an array. If only one
  fallback is defined, then you get the result instead.

## Icon

Icon made by [Freepik](https://www.freepik.com) from
[Flaticon](https://www.flaticon.com/) is licensed by Creative Commons BY 3.0.

## License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the 'Software'), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @fnando/server-reload
Description: Reload server files using a combination of Node's cluster and Facebook's watchman.
Author: Nando Vieira
Latest version: 0.1.0

# server-reload

Reload server files using a combination of Node's [cluster](https://nodejs.org/api/cluster.html) and Facebook's [watchman](https://facebook.github.io/watchman/).

## Installation

First, make sure you have [watchman](https://facebook.github.io/watchman/) install and available on your `$PATH`. For instructions about how to install, [check the official guide](https://facebook.github.io/watchman/docs/install.html).

Install using NPM:

```
npm install @fnando/server-reload --save-dev
```

or [Yarn](https://yarnpkg.com/):

```
yarn add @fnando/server-reload --dev
```

## Usage

Imagine you have a file structure like this:

```
/Projects/foo-bar
├── package.json
├── src
│   └── server.js
└── yarn.lock

1 directory, 3 files
```

To use regular Node.js binary, call the `server-reload` binary:

```
./node_modules/.bin/server-reload \
    --pattern src/server \
    --pattern package.json \
    --entry src/server.js \
    --root $(pwd)
```

But if you need to transform your files using [Babel.js](https://babeljs.io), use `server-reload-babel` instead:

```
./node_modules/.bin/server-reload-babel \
    --pattern src/server \
    --pattern package.json \
    --entry src/server.js \
    --root $(pwd)
```

## License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @fnc/sanity-super-pane
Description: > The Sanity Desk Tool Pane with Super Powers
Author: Rico Kahler
Latest version: 0.0.21

# _SUPER_ Pane

> The Sanity Desk Tool Pane with Super Powers

![CleanShot 2021-03-25 at 09 00 11](https://user-images.githubusercontent.com/10551026/112476955-d2479380-8d48-11eb-842e-15f0674d29d4.gif)

**Status:** ⚠️ MVP/EARLY ALPHA. There is [much more (eventually)](https://github.com/ricokahler/sanity-super-pane/issues/2) planned for this thing. Stay tuned/Watch Releases to be notifed with updates.

[Please report bugs](/issues)!

## What

Super Pane aims to replace the traditional document type list pane in the Sanity Studio for certain documents that need more editing power. The goal of Super Pane is to enable more bulk editing and quick scanning while not losing any of the live-edit/reactivity of Sanity.

Super Pane aims to feel Sanity-y via [`@sanity/ui`](https://www.sanity.io/ui) other integrations.

## Installation

```
# note: the alpha tag is needed at this time
yarn add sanity-super-pane@alpha
```

Then integrate Super Pane using the [structure builder](https://www.sanity.io/docs/structure-builder-introduction):

```js
import S from '@sanity/desk-tool/structure-builder';
import { createSuperPane } from 'sanity-super-pane';

export default () =>
  S.list()
    .title('Base')
    .items([
      S.listItem().title('Normal List').child(createSuperPane('movie', S)),
    ]);
```

### Custom columns (optional):
The SuperPane supports custom queries and column cells. A custom column consists of a title, name and type. Optionally, you can prodide it with a query and/or custom compoment.
Example is show in [structure.js](./structure.js)


## Local development

Here is the first time setup for this lib:

### Install

First, clone the repo (or a fork), and then install with npm

> Note: installing with npm instead of yarn is required.

```
npm i
```

### Create a sample project with the movie dataset

The login into the sanity CLI

```
npx sanity login
```

Then create a temporary project via the CLI. We'll use this create project entry in your Sanity account with the example movie dataset.

```
npx sanity init -y \
  --create-project "super-pane-dev" \
  --dataset production \
  --visibility private \
  --template moviedb \
  --output-path ./temp-movie-project
```

After this is done grab the project ID:

```
cat ./temp-movie-project/sanity.json | grep projectId
```

Copy and paste the `projectId` into the root `sanity.json` and then delete the `temp-movie-project` folder.

### Start the dev server

```
npm start
```

## Contributing

1. Open an [issue](/issues) first so we can quickly align on the what and how.
2. Fork this repo to your own Github account or org.
3. Create a new branch (e.g. `feat/new-feature`, `fix/the-bug`, etc) and commit following the [Angular Commit Message Conventions](https://github.com/semantic-release/semantic-release#commit-message-format). This is important because this repo is managed via [semantic-release](https://github.com/semantic-release/semantic-release). Semantic-release parses these messages to determine version numbers.
npm package: @fnc_web/d-button
Description: D Button
Latest version: 1.0.0

# D-Button

@fnc_web/d-button

D Button

## API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ---- |
|     onClick   |   onClick   |   onClick   |     onClick |  onClick      |   onClick   |
npm package: @fncheng/postcss-px2rem
Description: Postcss version of px2rem
Author: fncheng
Latest version: 1.0.0

# postcss-px2rem

This is a [postcss](https://www.npmjs.com/package/postcss) plugin of [px2rem](https://www.npmjs.com/package/px2rem). fork from [postcss-px2rem](https://www.npmjs.com/package/postcss-px2rem). add support for postcss8.

[![NPM version][npm-image]][npm-url]
[![Build status][travis-image]][travis-url]
[![Downloads][downloads-image]][downloads-url]

[npm-image]: https://img.shields.io/npm/v/postcss-px2rem.svg?style=flat-square
[npm-url]: https://npmjs.org/package/postcss-px2rem
[travis-image]: https://img.shields.io/travis/songsiqi/px2rem-postcss.svg?style=flat-square
[travis-url]: https://travis-ci.org/songsiqi/px2rem-postcss
[downloads-image]: http://img.shields.io/npm/dm/postcss-px2rem.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/postcss-px2rem

## Usage

### Node

```
var postcss = require('postcss');
var px2rem = require('postcss-px2rem');
var originCssText = '...';
var newCssText = postcss().use(px2rem({remUnit: 64})).process(originCssText).css;
```

**Please see [px2rem](https://www.npmjs.com/package/px2rem) for more information about the features and usage of px2rem.**

### Gulp

```
npm install gulp-postcss
```

```
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');

gulp.task('default', function() {
  var processors = [px2rem({remUnit: 75})];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});
```

### Webpack

```
npm install postcss-loader
```

```
var px2rem = require('postcss-px2rem');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})];
  }
}
```

### Grunt

```
npm install grunt-postcss
```

```
module.exports = function(grunt) {
  grunt.initConfig({
    postcss: {
      options: {
        processors: [
          px2rem({remUnit: 75})
        ]
      },
      dist: {
        src: 'src/*.css',
        dest: 'build'
      }
    }
  });
  grunt.loadNpmTasks('grunt-postcss');
  grunt.registerTask('default', ['postcss']);
}
```

## Change Log

### 0.3.0

* Deps: px2rem@~0.5.0
  * Support Animation keyframes (no `/*px*/` comment).

### 0.2.0

* Deps: postcss@^5.0.0

### 0.1.6

* Deps: px2rem@~0.4.0
  * The generated [data-dpr] rules follow the origin rule, no longer placed at the end of the whole style sheet.
  * Optimize 0px, do not generate 3 [data-dpr] rules.

### 0.1.5

* Do not extend current root node.

### 0.1.4

* Fix bug while working with webpack loader.

### 0.1.0

* First release.

## License

MIT
npm package: @fnet/dir-gzipper
Description: This code represents a software package or module named `@fnet/dir-gzipper`. Its function is to create a gzipped tarball of files in a given source directory. The files included are determined by glob patterns provided as parameters. If a `.gitignore` fil
Latest version: 0.1.3

# @fnet/dir-gzipper

This code represents a software package or module named `@fnet/dir-gzipper`. Its function is to create a gzipped tarball of files in a given source directory. The files included are determined by glob patterns provided as parameters. If a `.gitignore` file is present, the package can also exclude files based on the patterns specified in that file. This is set to true by default but can be toggled off.

### Main Functionality

The code reads files from a source directory and uses *glob patterns* to identify specific files to be included in the gzipped tarball. These glob patterns can be specified by the end user. Glob patterns are patterns using wildcards, and are a way to identify multiple files without needing to specify each one explicitly. For instance, the glob pattern `*.txt` would match all text files.

The code also reads a `.gitignore` file if present and excludes any files that match the patterns in that file - mimicking git's own behavior. This feature can be deactivated.

The gzipped tarball created by the module maintains the directory structure from the source directory and supports recursion, which means that it can include files from subdirectories within the source directory as well.

The tarball will be saved in a location dependent on whether the user has defined an output directory or not. If an output directory is defined, the tarball will be saved to that directory, otherwise, it will be saved to the operating system's temporary directory.

### Edge Case Handling

The code also includes functionality to tackle potential edge cases:

- It ensures that even if files or directories are matched by several glob patterns, they are included in the tarball only once.
- If no glob patterns are provided, the code will take an empty array `[]` as the default.

### Return Value

Finally, the returned value of the code is a JavaScript Promise that resolves with an object. This object contains the full path of the created tarball file, and lists of the files and folders that have been included in the tarball.
npm package: @fnet/dir-to-yaml
Description: At a high level, the "@fnet/dir-to-yaml" project's main function is to generate YAML (YAML Ain't Markup Language) content, based on the configuration and content of files within a specific directory of a system, and on matching specific file patterns with
Latest version: 0.1.5

# @fnet/dir-to-yaml

At a high level, the "@fnet/dir-to-yaml" project's main function is to generate YAML (YAML Ain't Markup Language) content, based on the configuration and content of files within a specific directory of a system, and on matching specific file patterns within this directory. The generated YAML content depicts the directory's file hierarchy and the content of the matched files.

## Functionality

The "@fnet/dir-to-yaml" module, as manifested in the main function, executes several significant actions:

1. **Scans a Specific Directory:** Based on user input parameters, it scans a designated directory for files matching certain specified patterns. This is made possible using the "fnetListFiles" function, which fetches a list of matching file paths.

2. **Reads and Transforms File Contents:** For each of the files matching the specified pattern, it reads the file content and transforms it into a hierarchical structure. This structure maps the relative path of the files (in relation to the specified directory) to their respective content.

3. **Creates YAML Content:** The hierarchical structure is then converted into YAML format using the "yaml.stringify" method.

4. **Copies Result to Clipboard (Optional):** If requested by the user input parameters, the resulting YAML content can be copied to the system's clipboard utilizing the package 'clipboardy'.

5. **Saves Result to File (Optional):** Alternatively (or in addition to the clipboard option), if a user specifies an output file path, the YAML content is written out to this file.

The module returns an object containing the generated YAML content, and optionally, the output file path (if provided). Basic validation of the input parameters is included in the feature set of the module, validating both the directory path and pattern input to help ensure accurate and useful outcomes.
npm package: @fnet/element-visibility-watcher
Description: The primary purpose of this project is monitoring the visibility of a specific HTML element on the webpage and running a callback function when this element is no longer visible or has been removed from the document structure (DOM).
Latest version: 0.1.1

# @fnet/element-visibility-watcher

The primary purpose of this project is monitoring the visibility of a specific HTML element on the webpage and running a callback function when this element is no longer visible or has been removed from the document structure (DOM).

To start, the user should provide an object containing at least two properties: the HTML element to be watched and the callback function to run when the element goes out of view or gets removed. This project also supports an optional parameter to define whether the observer should automatically disconnect before running the callback function, with this value being `true` by default.

## Functionality

The core functionality of the @fnet/element-visibility-watcher revolves around the Intersection Observer API, a robust and modern system to monitor an HTML element’s visibility within the viewport. 

The observer initiates after you pass the HTML element to monitor and the callback function. If the monitored element stops intersecting the viewport or gets removed from the DOM, the observer triggers and runs the provided callback function. If the user has enabled autoDisconnect (which is true by default), the observer disconnects before executing the callback.

### Error Checks

This project also runs error checking to ensure appropriate usage. It checks if the supplied element is a valid HTML element and if the given callback is a valid function. If these checks fail, it throws an error notifying the user about the incorrect input.

### Manual Disconnect

Users have the ability to manually disconnect the observer to halt monitoring using the returned ‘disconnect’ function.

In conclusion, the @fnet/element-visibility-watcher provides functionality for developers to easily monitor the visibility of particular elements on the page and take action when they are no longer in view or have been removed entirely from the DOM. This utility can be highly useful for tracking user interactions, enhancing user experience, and many other practical implementations.
npm package: @fnet/form-auto-complete
Description: This project is a React component designed to simplify the creation of autocomplete input fields within forms. It provides a straightforward way to integrate an autocomplete feature that enhances user interactivity by suggesting possible inputs as the use
Latest version: 0.2.19

# @fnet/form-auto-complete

This project is a React component designed to simplify the creation of autocomplete input fields within forms. It provides a straightforward way to integrate an autocomplete feature that enhances user interactivity by suggesting possible inputs as the user types.

## How It Works

The `@fnet/form-auto-complete` component uses React and Material-UI's components to render an autocomplete field that can handle a variety of input options. It allows users to type into a text field and be presented with a list of suggestions, helping them quickly find and select the desired option. Customization options are available, such as setting the number of suggestions displayed, allowing multiple selections, or enabling free text input.

## Key Features

- **Autocomplete Suggestions**: Provides a list of suggestions as users type into the text field, enhancing user input efficiency.
- **Multiple Selection**: Can be configured to allow the selection of multiple options from the suggestion list.
- **Customizable Options**: Offers flexibility in defining how options are displayed and selected, including option labels, keys, and groupings.
- **Styling Support**: Supports custom styling with built-in options to modify the text field appearance.
- **Integration Ready**: Easily integrates into forms, providing hooks to manage change events for both selected values and input values.

## Conclusion

The `@fnet/form-auto-complete` component serves as a reliable utility for developers looking to implement autocomplete inputs in their React applications. It offers customizable features that can improve data entry efficiency and user experience without requiring extensive setup or configuration.
npm package: @fnet/form-bpmn-modeler
Description: The project is a **React-based application** aimed at streamlining the visualization, editing, and creation of BPMN (Business Process Model and Notation) diagrams. Its primary clientele is end-users who require the creation, modification, or visualization
Latest version: 0.1.15

# @fnet/form-bpmn-modeler

The project is a **React-based application** aimed at streamlining the visualization, editing, and creation of BPMN (Business Process Model and Notation) diagrams. Its primary clientele is end-users who require the creation, modification, or visualization of BPMN diagrams. 

It uses the open-source BPMN-JS library, an extensive tool for rendering BPMN 2.0 diagrams in browsers.

## Functionality
The main functionality of this application includes:

1. **Viewing BPMN Diagrams**: The project enables users to load and view existing BPMN diagrams.

2. **Creating and Modifying BPMN Diagrams**: Users are able to draw new diagrams or modify existing ones using various tools and modules provided. This includes resizing tasks, choosing colors, specifying properties, and more.

3. **Simulation of BPMN Elements**: The users can simulate tokens through the diagram, allowing for the understanding or troubleshooting of certain workflows or tasks in the diagram.

4. **Integrated Properties Panel**: A significant feature is the presence of an integrated BPMN Properties Panel, enabling users to customize BPMN elements on-the-go. 

5. **Advanced Visualization**: It includes the Minimap module for more accessible navigation over large diagrams. This grants users a better overview and makes handling complex, sizeable diagrams more manageable.

6. **Custom Extensions Support**: The application provides support for custom elements, thanks to its moddleExtensions property. This allows users to extend BPMN with custom elements and attributes that fit their specific use-case - ensuring a great deal of flexibility.

In short, this application aims to provide an user-friendly platform for businesses, developers, and other users to create, modify, and view BPMN diagrams, enhancing process modeling and automation.
npm package: @fnet/form-dialog
Description: This project provides a simple mechanism for rendering form dialogs using predefined layouts. It leverages the `@fnet/react-layout-asya` component to manage the layout, offering you a straightforward way to create dialog forms without needing to handle th
Latest version: 0.2.10

# @fnet/form-dialog

This project provides a simple mechanism for rendering form dialogs using predefined layouts. It leverages the `@fnet/react-layout-asya` component to manage the layout, offering you a straightforward way to create dialog forms without needing to handle the layout complexities manually.

## How It Works

The project operates by wrapping your provided properties in a `Layout` component from the `@fnet/react-layout-asya` library. This allows you to render dialog forms with consistent structure and design, focusing only on your specific content and logic.

## Key Features

- **Layout Management**: Utilizes `@fnet/react-layout-asya` to handle the structural layout of dialog forms.
- **Ease of Use**: Simplifies the integration process by exposing a single component that takes care of the dialog presentation.

## Conclusion

The @fnet/form-dialog project serves as a handy tool for developers looking to streamline their dialog form creation with minimal setup. By handling layout concerns, it enables you to concentrate on developing the form's content and logic efficiently.
npm package: @fnet/form-iframe
Description: The @fnet/form-iframe project provides a straightforward solution for embedding content into a web page using an iframe within a React component. It aims to simplify the integration of external content, such as videos or interactive forms, directly into y
Latest version: 0.1.22

# @fnet/form-iframe

The @fnet/form-iframe project provides a straightforward solution for embedding content into a web page using an iframe within a React component. It aims to simplify the integration of external content, such as videos or interactive forms, directly into your layout.

## How It Works

This project uses a React component that contains an iframe, allowing you to seamlessly incorporate and display content from another source. By simply passing a URL as a prop, you can render the desired content within the borders of your existing layout.

## Key Features

- **Responsive Embedding**: The iframe seamlessly adapts to the full width and height of its container, ensuring content is displayed effectively on various screen sizes.
- **Simplified Integration**: By leveraging a single React component, you can easily include external content without needing additional setup.
- **Rich Media Support**: The iframe supports a range of permissions to enable functionalities such as autoplay and clipboard access.

## Conclusion

@fnet/form-iframe offers a straightforward way to embed external content within your React application. Its simple structure makes it easy to display rich media or interactive forms, enhancing the functionality and user experience of your pages without unnecessary complexity.
npm package: @fnet/form-in-progress
Description: This project provides a simple and straightforward React component to display a "form in progress" indicator. It is designed to help users visualize the loading state of a form or a process within an application, thereby improving user experience by offer
Latest version: 0.2.8

# @fnet/form-in-progress

This project provides a simple and straightforward React component to display a "form in progress" indicator. It is designed to help users visualize the loading state of a form or a process within an application, thereby improving user experience by offering visual feedback that something is being processed.

## How It Works

The component integrates with existing React applications by using the '@fnet/react-layout-asya' layout as a wrapper. It uses Material-UI's `Box` and `LinearProgress` components to present a linear loading bar, giving users a clear indication that a form or a process is currently loading.

## Key Features

- **Form Loading Visualization**: Displays a linear progress bar to inform users that a form is being processed.
- **Simple Integration**: Easily integrates into React projects using familiar components from Material-UI.
- **Responsive Design**: Expands to the full width of its container, ensuring adaptability to various screen sizes.

## Conclusion

The @fnet/form-in-progress component is a practical tool for developers looking to enhance the user experience in their React applications by providing a straightforward and responsive visual cue during form or process loading states. It is easy to implement and leverages common Material-UI components to ensure consistency and familiarity in design.
npm package: @fnet/form-net-promote-score
Description: ## Introduction
Latest version: 0.2.8

# @fnet/form-net-promote-score

## Introduction

The `@fnet/form-net-promote-score` component is a simple, user-friendly React component focused on providing a visual representation and interaction mechanism for users to express opinions in a percentage format. Its primary purpose is to allow users to indicate their likelihood or inclination towards a particular option or statement using a slider interface.

## How It Works

This component integrates into your existing React application seamlessly. It uses a slider to capture user input with steps and allows for customizable start values. As users adjust the slider, the percentage value they select is displayed clearly above the slider for instant feedback. 

## Key Features

- **Interactive Slider:** Users can quickly and easily set preferences or opinions in percentage form.
- **Default Value and Step Control:** Pre-set starting point and incremental steps can be tailored as per the requirement.
- **End Labels:** Clearly marked labels indicate the extent of the scale, ranging from "Not likely at all" to "Extremely likely".
- **Visual Feedback:** Displays the selected percentage value above the slider to keep users informed about their choice.

## Conclusion

The `@fnet/form-net-promote-score` component offers a straightforward and useful tool for collecting user preference data in a visually engaging manner. Designed for ease of use, it lends itself well to applications that require user input on scales, such as feedback forms or surveys, without complicating the user experience.
npm package: @fnet/form-rating
Description: The `@fnet/form-rating` is a simple and flexible React component that allows you to incorporate a star rating feature into your application. It's designed to be straightforward to use and easily fits into layouts created using the `@fnet/react-layout-asya
Latest version: 0.2.10

# @fnet/form-rating

The `@fnet/form-rating` is a simple and flexible React component that allows you to incorporate a star rating feature into your application. It's designed to be straightforward to use and easily fits into layouts created using the `@fnet/react-layout-asya` library. With its integration of Material-UI components, it provides a familiar look and feel consistent with modern web applications.

## How It Works

The `@fnet/form-rating` component utilizes React and Material-UI to deliver a star rating input. When you include this component in your application, it presents a set of stars that users can click on to rate an item. The component captures the user's input and presents it in a structured layout, allowing developers to easily retrieve and utilize the rating values within their application logic.

## Key Features

- **User-Friendly Rating Input**: Provides an intuitive interface for users to give ratings using a star system.
- **Customizable Precision**: Allows flexibility in the granularity of ratings, with precision settings that can display half stars or other increments.
- **Responsive Design**: Adapts the size of the component according to the viewport, ensuring a consistent appearance across different screen sizes.
- **Integration with React and Material-UI**: Utilizes familiar React patterns and Material-UI components for ease of integration.

## Conclusion

The `@fnet/form-rating` component effectively adds a simple yet versatile star rating feature to your React-based applications. It integrates seamlessly with existing layouts and uses responsive design principles to maintain visual consistency. Whether you're looking to gather user feedback or enhance interactivity, this component provides a reliable solution.
npm package: @fnet/geopattern
Description: **The bundled version of  https://github.com/btmills/geopattern in flownet.**
Latest version: 0.1.8

# @fnet/geopattern

**The bundled version of  https://github.com/btmills/geopattern in flownet.**

The `@fnet/geopattern` project is a source code written in JavaScript. The code is meant to *generate geometric patterns* that can add a unique, attractive visual element to an interface or a web page. 

The primary purpose of `@fnet/geopattern` is to generate SVG (Scalable Vector Graphics) geometric patterns. This library takes a string input, and returns an SVG pattern in the form of a data URL, ready to use as a CSS background-image.

The library generates a pattern based on the hash of the provided string. Therefore, the same input always produces the same output pattern, ensuring consistency across multiple uses. If no string is provided, it generates a pattern based on current date and time as the default.

The `@fnet/geopattern` library can be used to create patterns of different geometric shapes. Some forms it can generate are sine waves, octagons, overlapping circles, nested squares, concentric circles, triangles, plus signs, xes, and many others. It offers developers a high level of customization, allowing them to define pattern generator, base color, color function, and specify whether to include a specific SVG element or not.

The library further ensures that the patterns are visually appealing by calculating color based on the hash of the input string. It uses the hue-saturation-lightness (HSL) color model for this purpose.

In short, `@fnet/geopattern` is an incredibly resourceful library for developers and designers who want to incorporate unique, predictable, and appealing geometric patterns into their projects.