open-index/open-npm huggingface dataset:
npm package: @graficos/avatar-color
Description: Single function exported as package that generates an HSL color from a string, i.e.: user names, etc.
Author: paul_melero
Latest version: 1.4.0

﻿# Avatar Color Generator

## Installation

Install it

```
# via npm
> npm i @graficos/avatar-color

# or via yarn
> yarn add @graficos/avatar-color
```

## Usage

```
import gGetAvatarColor from '@graficos/avatar-color';

console.log(gGetAvatarColor('asdf'));
```
npm package: @graficos/graficols
Description: A tiny helper to get your scss cols in place
Author: paul_melero
Latest version: 0.1.2

# @graficos/graficols

## Motivation
I turned this [gist](https://gist.github.com/gangsthub/8b497cd315864c28464ec0c435d04b87)
into a library (my first one ever) because I use variations of the same in several projects.


## What it includes

- There's a defined list of column (will be percetages):

```
// note the ellipsis is for explanation purposes only
$G_CONTAINER_WIDTHS: (5, 10, 20..., 50, ..., 100)
```

- A set of breackpoints:

```
$G_WINDOW_DIMENSIONS: (
    // edit / add BPs as you please
    sm: '(max-width: 64em)',
    md: '(min-width: 64.01em) and (max-width: 87.99em)',
    xl: '(min-width: 88em)',
);
```

- The actual mixin `gGenerateCols` wich is the one you will use on your scss.

## Usage

1. Installation

    ```
    npm i @graficos/graficols
    ```

2. Import the scss file. Depending on your environment or bundling system, you might have a defined way of doing
this. Examples:
  - Import in an Angular project: [link](https://github.com/angular/angular-cli/issues/2269#issuecomment-320126603)
  - In Nuxt.js: [link](https://nuxtjs.org/api/configuration-css)
  - Using Webpack and adding an alias: [link](https://github.com/webpack/webpack/issues/1789#issuecomment-250983832)
  - Using Parcel: [link](https://github.com/parcel-bundler/parcel/issues/1800)
  - In a Vanilla project:
    - Add a `.sassrc` file in your root directory with the following content:
    ```
    {
      "includePaths": ["node_modules"]
    }
    ```

    - Then, you can `@import` from your SCSS files using `~`:

    ```
    @import "~@graficos/graficols/graficols";
    // ... use the mixin here :)
    ```


3. Re-define the collections (`G_CONTAINER_WIDTHS` and `$G_WINDOW_DIMENSIONS`) if you please.

4. `@include` the mixin like so:

```
// with no @media queries
@include gGenerateCols(null);
// -> will create dynamic classes: min-w50p, max-w50p, w50p, push50p, pull50p

// with media queries
@each $mediaName, $mediaValue in $G_WINDOW_DIMENSIONS {
  @media #{ $mediaValue } {
    @include gGenerateCols($mediaName);
  }
}
// -> will create: (tailwind style) xl:min-w50p (using the keys from $G_WINDOW_DIMENSIONS as class prefixes)
```

## Recommendation

It is recommended to use [https://www.purgecss.com](https://www.purgecss.com) along with this library because
most of the generated css classes will not be used in production, most likely.
npm package: @grafikart/drop-files-element
Description: Customized built-in element to add user interactions on a file input with multiple files as a progressive enhancement.
Author: Jonathan Boyer
Latest version: 1.0.9

# Customized built-in elements `is="drop-files"`

[![npm](https://img.shields.io/npm/v/@grafikart/drop-files-element.svg)](http://npm.im/@grafikart/drop-files-element)
[![Build Status](https://travis-ci.org/Grafikart/CustomElement-DropFiles.svg?branch=master)](https://travis-ci.org/Grafikart/CustomElement-DropFiles)
[![Build Status](https://github.com/Grafikart/CustomElement-DropFiles/workflows/Test/badge.svg)](https://github.com/Grafikart/CustomElement-DropFiles/actions)

The goal of this module is to add user interaction on a file input with multiple files as a progressive enhancement (the form still works if this JavaScript is disabled). [Live demo](https://codesandbox.io/s/customelement-dropfiles-demo-9iudwlate-night-9iudw?fontsize=14)

![](preview.jpg)

## Usage

### With npm

Install the package using npm or yarn

```bash
npm i @grafikart/drop-files-element
# or
yarn add @grafikart/drop-files-element
```

Then import it in your script

```js
import '@grafikart/drop-files-element'
```

### With unpkg.com

```html
<script type="module" src="//unpkg.com/@grafikart/drop-files-element"></script>
```

Then use the custom element in your html using `is="drop-files`.

```html
<input
        type="file"
        multiple
        name="files[]"
        label="Drop files here or click to upload."
        help="Upload files here and they won't be sent immediately"
        is="drop-files"
/>
```

### Safari

Unfortunately safari doesn't support Custom built-in elements and you have to polyfill this feature at the moment using [@ungap polyfill](https://github.com/ungap/custom-elements-builtin)

```html
<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
```

## Customization

### Attributes

| Attribute | Type     | Description                                          |
|-----------|----------|------------------------------------------------------|
| `label`   | `string` | The label used as a bold text for the drop area      |
| `help`   | `string` | Help text used as a secondary text for the drop area  |

### CSS Custom Properties

| Property                    |
|-----------------------------|
| `--drop-border-color`       |
| `--drop-border-color-hover` |

### HTML Structure

This component doesn't use shadow dom so you can customize the style using CSS and overwrite the style already included inside this custom element.

## Changelog

**1.0.9**

- Fixed the behaviour of a single file input

**1.0.8**

- Correctly handle input without the "multiple" attribute (issue #4)

**1.0.7**

- Fixed a rendering bug on Firefox (issue #2)

**1.0.6**

- Fixed a bug happening when no attributes were passed to the component

**1.0.5**

- Fix style when box-sizing is set to border-box 

**1.0.4**

- Better error handling
- Improved style for the delete button
npm package: @grafikjs/vue
Description: A lightweight Vue library for creating interactive SVG on the web.
Author: Andras Tovishati
Latest version: 0.0.3

# GrafikJS Vue.js

The Vue package is a specialized extension of the GrafikJS library, designed specifically for integrating GrafikJS's powerful SVG capabilities into Vue.js applications. This package allows Vue.js developers to seamlessly create and manage interactive and scalable vector graphics within their Vue components.

## Installation

To get started with Vue package, you'll first need to install it along with GrafikJS styles. You can do this using npm:

```bash
npm install @grafikjs/vue
npm install @grafikjs/styles
```

## Basic Setup

Next, you'll need to set up your Vue application to use the GrafikJS components. Here's a basic example to help you get started:

### Import GrafikJS and Initialize the Application

```js
import { createApp } from 'vue';
import { createGrafik } from '@grafikjs/vue';
import App from './App.vue';
import '@grafikjs/styles';

// Here you can specify the default canvas setting.
const grafik = createGrafik({
	width: 400,
	height: 400,
	multiselection: false
});

createApp(App).use(grafik).mount('#wrap');
```

In this setup, createGrafik() provides the canvas object model, which is essential for using GrafikJS components.

### Define the Template with GrafikJS Components

```vue
<script>
import { Canvas, Rect, Wrapper, Interactive } from '@grafikjs/vue';
</script>

<template>
	<Wrapper>
		<Canvas :width="400" :height="400">
			<Rect :width="200" :height="200" :left="100" :top="100" :angle="45" fill="#00ff00" />
		</Canvas>
		<Interactive />
	</Wrapper>
</template>
```

-   **Wrapper:** A container component for GrafikJS elements.
-   **Canvas:** The drawing area where you place your SVG elements.
-   **Rect:** An example SVG element representing a rectangle.
-   **Interactive:** A component that makes shapes transformable, enabling operations such as translate, scale, and rotate.

This basic setup will render a rectangle that is 200x200 pixels in size, rotated 45 degrees, and positioned at coordinates (100, 100) within a 400x400 canvas.
The Interactive component renders the top layer that allows for interactive transformations of shapes, such as translating, scaling, and rotating.
npm package: @grafikr/shopify-devserver
Description: Shopify DevServer is a package to make [webpack DevSever](https://webpack.js.org/configuration/dev-server/) work with Shopify.
Latest version: 2.1.0

# Shopify DevServer

Shopify DevServer is a package to make [webpack DevSever](https://webpack.js.org/configuration/dev-server/) work with Shopify.

### Installation

You can install the package using Yarn:

```
$ yarn install @grafikr/shopify-devserver --save-dev
```

### Usage

In your webpack config file, add the package to the `devServer` attribute. It could look like this:

```js
const devServer = require('@grafikr/shopify-devserver');

module.exports = (env) => ({
  ...

  devServer: devServer(env),

  ...
});
```

Once this is done, you should be able to run webpack with the serve command.

For easy integration, you can add it as an action to your scripts in `package.json`.

```json
{
  "scripts": {
    "serve": "webpack serve --mode development --hot"
  }
}
```
npm package: @grafikr/shopify-typescript
Description: This packages adds TypeScript for all Shopify responses and objects.
Latest version: 2.5.0

# Shopify TypeScript

This packages adds TypeScript for all Shopify responses and objects.

### Installation

You can install the package using Yarn:

```
$ yarn install @grafikr/shopify-typescript
```

### Usage

```ts
import type { Product } from '@grafikr/shopify-typescript/type/json/Product';

const func = (data: Product) => {
  ...
};
```

You can have a look in the repository under `global` and `type` folder, to find types you can use.
npm package: @grafikr/spaghetti
Description: Tasty little compiler util.
Author: https://grafikr.dk
Latest version: 1.4.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @friendsof/spaghetti
🍝 Tasty little compiler util. Supports most modern JS syntax, as well as compiles
and extracts CSS (or SCSS) by default.

## Install
```bash
npm i @friendsof/spaghetti -g # or --save-dev for npm scripts
```

## Usage
```bash
spaghetti [options] <in> <outDir>
```

### Options
#### `-w, --watch`
Watch files for changes.
```bash
spaghetti src/index.js dist/ -w
```

#### `--jsx`
Specify a JSX pragma (default: `React.createElement`)
```bash
spaghetti src/index.js dist/ --jsx preact.h
```

#### `--map`
Any source map value supported by webpack (default: `source-map`)
```bash
spaghetti src/index.js dist/ --map cheap-module-source-map
```

#### `--sass`
Use sass instead of postcss
```bash
spaghetti src/index.js dist/ --sass
```

#### `--config`
Specify a config file (default: `spaghetti.config.js`)
```bash
spaghetti src/index.js dist/ --config config.js
```

### Config
Config files support the same options as above, along with a couple additions.
```javascript
// spaghetti.config.js
module.exports = {
  in: 'src/index.js',
  outDir: 'dist',
  jsx: 'h',
  sass: false, // set to true for sass
  reload: true, // reloads on watch
  alias: {
    components: 'src/components/'
  },
  banner: '/** Hello there */'
}
```

## License
MIT License © [The Couch](https://thecouch.nyc)
npm package: @grafite/bootstrap-magic-extras
Description: A collection of utility style classes to add extra features to Bootstrap.
Author: mlantz
Latest version: 0.4.2

![Grafite Bootstrap Magic Extras](https://github.com/GrafiteInc/bmx/blob/main/GrafiteBootstrapMagicExtras-banner.png?raw=true)

## Why?

A great question you may find yourself asking is why do this at all? There is tailwind and there are lots of parts built into Bootstrap already. Its true that Tailwind is great, however we predominantly use Bootstrap and its utlities are lacking. This collection of animations, utilities, and small bonus pieces are all built around Bootstrap's variables ensuring that anything added follows suit with the standard Bootstrap feel. This to us covers 95% of the needed aspects of designing and making any modern website.

##### Author(s):
* [Matt Lantz](https://github.com/mlantz) ([@mattylantz](http://twitter.com/mattylantz), mattlantz at gmail dot com)

## Requirements

1. Bootstrap 5.3.3+

### Installation

Start a new Laravel project:
```php
npm install @grafite/bootstrap-magic-extras
```

## Sources

All animations have been sourced from [animate.css](https://github.com/animate-css/). Original credit and authorship should be given to their team. I simply wanted a select few of these animations without the overhead of having another package in my projects.

Most utilities are heavily inspired by [Tailwind](https://tailwindcss.com). Though their package is significant and well designed, and I enjoy the scope of their utilities, I'd prefer to stick with Bootstrap and its components and simply gain more utilities to the core of Bootstrap.

## Documentation

[https://docs.grafite.ca/utilities/bmx](https://docs.grafite.ca/utilities/bmx)

## License
Grafite Charts is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT)

### Bug Reporting and Feature Requests
Please add as many details as possible regarding submission of issues and feature requests

### Disclaimer
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: @grafoo/http-transport
Description: grafoo client standard transport
Author: malbernaz
Latest version: 1.4.2

# `@grafoo/http-transport`

<p><i>A Simple HTTP Client for GraphQL Servers</i></p>

<p>
  <a href=https://circleci.com/gh/grafoojs/grafoo>
    <img
      src=https://img.shields.io/circleci/project/github/grafoojs/grafoo/master.svg?label=build
      alt=build
    />
  </a>
  <a href=https://codecov.io/github/grafoojs/grafoo>
    <img
      src=https://img.shields.io/codecov/c/github/grafoojs/grafoo/master.svg
      alt="coverage"
    />
  </a>
  <a href=https://www.npmjs.com/package/@grafoo/http-transport>
    <img
      src=https://img.shields.io/npm/v/@grafoo/http-transport.svg
      alt=npm
    >
  </a>
  <a href=https://www.npmjs.com/package/@grafoo/http-transport>
    <img
      src=https://img.shields.io/npm/dm/@grafoo/http-transport.svg
      alt=downloads
    >
  </a>
  <a href=https://github.com/grafoojs/grafoo>
    <img
      src=https://img.shields.io/bundlephobia/minzip/@grafoo/http-transport.svg?label=size
      alt=size
    >
  </a>
  <a href=https://prettier.io>
    <img
      src=https://img.shields.io/badge/code_style-prettier-ff69b4.svg
      alt="code style: prettier"
    />
  </a>
  <a href=https://lernajs.io>
    <img
      src=https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
      alt="mantained with: lerna"
    />
  </a>
  <a href=https://grafoo-slack.herokuapp.com>
    <img
      src=https://grafoo-slack.herokuapp.com/badge.svg
      alt="slack"
    />
  </a>
</p>

## Install

```
$ npm i @grafoo/http-transport
```

## Usage

`@grafoo/http-transport` default export is a factory that accepts as arguments `uri` and `fetchOptions` (that can be an object or a function):

```js
import createTransport from "@grafoo/http-transport";

const request = createTransport("http://some.graphql.api", () => ({
  headers: {
    authorization: storage.getItem("authorization")
  }
}));

const USER_QUERY = `
  query($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;

const variables = { id: 123 };

request(USER_QUERY, variables).then(({ data }) => {
  console.log(data.user);
});
```

## Warning

As this package uses `fetch` and `Object.assign` under the hood, make sure to install the proper polyfills if you want to use it in your project.

## LICENSE

[MIT](https://github.com/grafoojs/grafoo/blob/master/LICENSE)
npm package: @grafoo/preact
Description: grafoo client preact bindings
Author: malbernaz
Latest version: 1.4.2

# `@grafoo/preact`

<p><i>Grafoo Preact Bindings</i></p>

<p>
  <a href=https://circleci.com/gh/grafoojs/grafoo>
    <img
      src=https://img.shields.io/circleci/project/github/grafoojs/grafoo/master.svg?label=build
      alt=build
    />
  </a>
  <a href=https://codecov.io/github/grafoojs/grafoo>
    <img
      src=https://img.shields.io/codecov/c/github/grafoojs/grafoo/master.svg
      alt="coverage"
    />
  </a>
  <a href=https://github.com/grafoojs/grafoo>
    <img
      src=https://img.shields.io/npm/v/@grafoo/preact.svg
      alt=npm
    >
  </a>
  <a href=https://www.npmjs.com/package/@grafoo/preact>
    <img
      src=https://img.shields.io/npm/dm/@grafoo/preact.svg
      alt=downloads
    >
  </a>
  <a href=https://www.npmjs.com/package/@grafoo/preact>
    <img
      src=https://img.shields.io/bundlephobia/minzip/@grafoo/preact.svg?label=size
      alt=size
    >
  </a>
  <a href=https://prettier.io>
    <img
      src=https://img.shields.io/badge/code_style-prettier-ff69b4.svg
      alt="code style: prettier"
    />
  </a>
  <a href=https://lernajs.io>
    <img
      src=https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
      alt="mantained with: lerna"
    />
  </a>
  <a href=https://grafoo-slack.herokuapp.com>
    <img
      src=https://grafoo-slack.herokuapp.com/badge.svg
      alt="slack"
    />
  </a>
</p>

## Install

```
$ npm i @grafoo/{core,react} && npm i -D @grafoo/babel-plugin
```

## API

For documentation please refer to [`@grafoo/react`](https://github.com/grafoojs/grafoo/tree/master/packages/react)'s page since both modules share the same API.

## Example

**`index.js`**

```jsx
import { h, render } from "preact";
import createClient from "@grafoo/core";
import { Provider } from "@grafoo/preact";

import Posts from "./Posts";

function fetchQuery(query, variables) {
  const init = {
    method: "POST",
    body: JSON.stringify({ query, variables }),
    headers: {
      "content-type": "application/json"
    }
  };

  return fetch("http://some.graphql.api", init).then(res => res.json());
}

const client = createClient(fetchQuery);

render(
  <Provider client={client}>
    <Posts />
  </Provider>,
  document.getElementById("mnt")
);
```

**`Posts.js`**

```jsx
import { h } from "preact";
import gql from "@grafoo/core/tag";
import { Consumer } from "@grafoo/preact";

const ALL_POSTS = gql`
  query getPosts($orderBy: PostOrderBy) {
    allPosts(orderBy: $orderBy) {
      title
      content
      createdAt
      updatedAt
    }
  }
`;

export default function Posts() {
  return (
    <Consumer query={ALL_POSTS} variables={{ orderBy: "createdAt_DESC" }}>
      {({ client, load, loaded, loading, errors, allPosts }) => (
        <h1>
          <marquee>👆 do whatever you want with the variables above 👆</marquee>
        </h1>
      )}
    </Consumer>
  );
}
```

## LICENSE

[MIT](https://github.com/grafoojs/grafoo/blob/master/LICENSE)
npm package: @grafoo/types
Description: grafoo client typescript definitions
Author: malbernaz
Latest version: 1.4.2

# `@grafoo/types`

<p><i>Grafoo Typescript Definitions</i></p>

<p>
  <a href=https://circleci.com/gh/grafoojs/grafoo>
    <img
      src=https://img.shields.io/circleci/project/github/grafoojs/grafoo/master.svg?label=build
      alt=build
    />
  </a>
  <a href=https://codecov.io/github/grafoojs/grafoo>
    <img
      src=https://img.shields.io/codecov/c/github/grafoojs/grafoo/master.svg
      alt="coverage"
    />
  </a>
  <a href=https://www.npmjs.com/package/@grafoo/types>
    <img
      src=https://img.shields.io/npm/v/@grafoo/types.svg
      alt=npm
    >
  </a>
  <a href=https://www.npmjs.com/package/@grafoo/types>
    <img
      src=https://img.shields.io/npm/dm/@grafoo/types.svg
      alt=downloads
    >
  </a>
  <a href=https://prettier.io>
    <img
      src=https://img.shields.io/badge/code_style-prettier-ff69b4.svg
      alt="code style: prettier"
    />
  </a>
  <a href=https://lernajs.io>
    <img
      src=https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
      alt="mantained with: lerna"
    />
  </a>
  <a href=https://grafoo-slack.herokuapp.com>
    <img
      src=https://grafoo-slack.herokuapp.com/badge.svg
      alt="slack"
    />
  </a>
</p>

## Install

```
$ npm i @grafoo/types
```

## LICENSE

[MIT](https://github.com/grafoojs/grafoo/blob/master/LICENSE)