open-index/open-npm huggingface dataset:
npm package: @picter/timezones
Description: A compact but comprehensive list of timezones, based on https://www.iana.org/time-zones
Author: Matthias Lohscheidt
Latest version: 0.0.1

# Timezones

This project uses [*moment-timezone*](http://momentjs.com/timezone)'s data utitlities to create compact but comprehensive lists of timezones for user interfaces.

## Usage

```javascript
import timezones from '@picter/timezones/data/select-list.json';
import moment from 'moment-timezone';
import momentData from '@picter/timezones/data/moment-timezones.json';

console.log(JSON.stringify(timezones, null, 2));

/*
output:

[
  {
    "label": "(UTC-11:00) Niue",
    "value": "Pacific/Niue"
  },
  {
    "label": "(UTC-11:00) Pago Pago, Midway, Samoa",
    "value": "Pacific/Pago_Pago"
  },
...
]

*/

// use pre-built moment data to base moment on the same data
moment.tz.add(momentData.zones);

```

The values are extracted from [iana's time zone database](https://www.iana.org/time-zones) and can safely be used by libraries like [*moment-timezone*](http://momentjs.com/timezone).

## Development

*iana* publishes database updates twice a year. As soon as [*moment-timezone*](http://momentjs.com/timezone) updated their data, we can update our *moment-timezone* dev-dependency and rebuild or lists with `yarn run build`.
npm package: @pictogrammers/bitmask-to-svg
Description: 1 Bit Bitmask to SVG
Author: Pictogrammers
Latest version: 0.9.1

# bitmask-to-svg

JavaScript Library to convert a 1D/2D Array to an SVG Path.

[View the Demo](https://pictogrammers.github.io/@pictogrammers/bitmask-to-svg/)

## Usage

Some use cases for this library.

- 1 Bit depth image to SVG path.
- Bitmap font glyph to SVG path.
- Pixel perfect SVG mask for an image.

```typescript
import bitmaskToPath from '@pictogrammers/bitmask-to-svg';

const letterP = [
    [0, 0, 0, 0, 0],
    [0, 1, 1, 1, 0],
    [0, 1, 0, 1, 1],
    [0, 1, 1, 1, 0],
    [0, 1, 0, 0, 0],
    [0, 1, 0, 0, 0],
    [0, 0, 0, 0, 0]
];

const width = letterP[0].length;
const height = letterP.length;
const path = bitmaskToPath(letterP);
console.log(width, height, path);
// 5 7 M2,3H3V2H2ZM2,6H1V1H4V2H5V3H4V4H2Z
```

This path data can then be written to an SVG file in NodeJS.

```typescript
import { writeFileSync } from 'fs';

writeFileSync(
    "letter-p.svg",
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"><path d="${data}" /></svg>`,
    {
      encoding: "utf8"
    }
);
```

## Spec

The `options` allows the path to be scaled or offset. The `width` is only required to be passed if the array is 1 dimensional.

| Property | Default | Description |
|----------|---------|-------------|
| width    | `undefined` | Required if `data` is a 1 dimensional array. |
| height   | `undefined` | Not actually used. |
| scale    | `1` | SVG path scale size. |
| offsetX  | `0` | This x offset ignores scale! |
| offsetY  | `0` | This y offset ignores scale! |

## Development

Clone the repo.

```bash
npm install
npm run build # Build
npm start # Build + View demo
# Navigate to localhost:3000
```
npm package: @pictogrammers/components
Description: > Note this repo is for the components used in various Pictogrammers apps. If you are looking for icon related components for your own project look here: > > - [React](https://github.com/Templarian/MaterialDesign-React/) > - [Web Component](https://git
Author: Austin Andrews
Latest version: 0.5.15

# Pictogrammers - Components

> Note this repo is for the components used in various Pictogrammers apps. If you are looking for icon related components for your own project look here:
>
> - [React](https://github.com/Templarian/MaterialDesign-React/)
> - [Web Component](https://github.com/Templarian/MaterialDesign-WebComponent/)

Components here are in various stages of development, view the `src/pg` folder to see the source.

- [View the Components](https://pictogrammers.github.io/@pictogrammers/components/)

## Contribute to this Project

To run the demo application locally use the following NPM commands.

```bash
npm install
npm start
# npm start [pgButton|pg-button, ...]
```

Open http://localhost:3000 (port could vary)

To build the components.

```bash
npm run build
```

## Publish

This project does not use the normal `npm publish`. Always run the script to build individual components.

```bash
npm run publish
```

### Web Components

Web Components with a [very basic wrapper](https://github.com/Pictogrammers/Element/). The only magic is...

- `@Prop() foo = 'Hello World`;
  - Calls `this.render()` on change.
- `@Part() $foo: HTMLDivElement;` = `<div part="foo"></div>`
  - `this.$part.innerText = 'Hello World!';`
- `@Local('store') foo = Map([['key', true]]);` Shorthand for localStorage.

Learn More: https://github.com/Pictogrammers/Element
npm package: @pictogrammers/element-esbuild
Description: Element esbuild
Author: Austin Andrews
Latest version: 0.0.30

# Element-esbuild

Element [esbuild](https://esbuild.github.io/) tooling for developing Web Components with the [Element](https://github.com/Pictogrammers/Element/) utility.

## Features

- Application - Bundle a single application
- Components - Bundle a shared component library
  - `__examples__` components map to the library

Default folder structure for both:

- `src/index.html` - optional
- `src/favicon.svg` - optional
- `src/components/*` - required
  - `namespace/` - required
    - `app/app.ts` - required for app
      - `__examples__`
        - `basic/basic.ts` - for component library

## `element.config.ts`

Example configuration for a app.

```typescript
export default {
  // root hello/app/app.ts
  namespace: 'hello', // for applications
  // optionally include external component packages
  external: ['mynodepackage'],
  copy: [
    { from: 'assets', to: 'assets' }
  ],
}
```

Example configuration for a component library.

```typescript
export default {
  repo: 'https://...',
  navigation: [{
    label: 'Components',
    // default group
  }, {
    label: 'Overlays',
    extends: ['MyOverlay'], // group all components extend class
    include: ['MyOverlay'], // also include MyOverlay component
    exclude: ['MyExclude'],
    namespaces: ['my'], // filter to only my-* components
  }],
}
```

Leaving off the `namespace` will treat the repo as a component library. Each component will be built individually instead of a single application. The component's `__examples__` folders will render as demo.

Changes to the `/components/*` will sync to the `/publish/*` directory. This is by design so the publish directory can be linked with the `npm link` command.
npm package: @pictogrammers/element-webpack
Description: Shared webpack config for @pictogrammers/element
Author: Austin Andrews
Latest version: 0.1.57
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Element Webpack Config

> ⚠️ DEPRECATED! [Use `@pictogrammers/element-esbuild`](https://github.com/Pictogrammers/Element-esbuild).

Shared webpack configuration for use with `@pictogrammers/element` package.

```javascript
const config = require('@pictogrammers/element-webpack');

module.exports = config({
    port: 3000,
    src: 'src',
    dist: 'dist',
    watch: [
        'src/**/*.md'
    ],
    before: (components, args, mode) => {
        console.log(`${components.length} Components`);
    },
    after: (components, args, mode) => {
        // Run after compilation
        // components = [
        //   {
        //     name,
        //     input,
        //     namespace,
        //     component
        //     examples: [
        //       { example, exampleInput },
        //       ...
        //     ]
        //   },
        //   ...
        // ]
        // mode = 'production' | 'development'
    },
    copy: [
        { from: 'src/styles.css', to: 'styles.css' },
    ]
    // Shorthand copy for the above
    // copy: [ 'src/styles.css' ]
});
```

## Options

| Option | Default | Description |
| ------ | ------- | ----------- |
| `port` | `3000` | localhost port |
| `src`  | `src`  | Source folder for components, `favicon.svg`, and `index.html` |
| `dist` | `dist` | Distribution folder. Defaults to `dist` |
| `watch` | `[]`  | Array of additional files to watch. Glob string format. |
| `copy` | `[]` | Copy over additional folders or files to the `dist` folder. |
| `before` | `null` | Run additional code after before every compilation. |
| `after` | `null` | Run additional code after every compilation. |