open-index/open-npm huggingface dataset:
npm package: @jamescoyle/paper-css
Description: An opinionated, lightweight CSS framework based on the Material Design 2 specification.
Author: James Coyle
Latest version: 0.1.0

# Paper CSS <!-- omit in toc -->

An opinionated, lightweight CSS framework based on the Material Design 2 specification. This is intended to provide helper classes and base styles which can be utilised by component libraries to build more complex components.

## Contents <!-- omit in toc -->

- [Usage](#usage)
	- [Install](#install)
	- [Include in project](#include-in-project)
- [Directories](#directories)
	- [Base](#base)
	- [Components](#components)
	- [Dist](#dist)
	- [Layout](#layout)
	- [Mixins](#mixins)
	- [Public](#public)
	- [Vars](#vars)

## Usage

### Install

Install using your prefered package manager.

**Yarn**

```
yarn add @jamescoyle/paper-css
```

**NPM**

```
npm install @jamescoyle/paper-css
```

### Include in project

**Webpack**

```scss
@import '~@jamescoyle/paper-css/index';
@import '~@jamescoyle/paper-css/layout/[layout-type]';
@import '~@jamescoyle/paper-css/component/[component-type]';
```

**SASS**

```scss
@import '[path-to-node-modules]/@jamescoyle/paper-css/index';
@import '[path-to-node-modules]/@jamescoyle/paper-css/layout/[layout-type]';
@import '[path-to-node-modules]/@jamescoyle/paper-css/component/[component-type]';
```

**HTML** - Not recommended for production

```html
<link rel="stylesheet" href="[path-to-node-modules]/@jamescoyle/dist/index.css" />
<link rel="stylesheet" href="[path-to-node-modules]/@jamescoyle/dist/layout/[layout-type].css" />
<link rel="stylesheet" href="[path-to-node-modules]/@jamescoyle/dist/component/[component-type].css" />
```

## Directories

### Base

The base folder contains base styles which are included in `index.scss`. These styles do not need importing into your project.

### Components

Each file in this folder is responsible for styling a paricular UI component and often require specific markup. These files need to be imported into your project in order to use them.

### Dist

The dist folder provides compiled versions of the scss files. It is not recommended that you use these files in production but they may be useful for quick prototyping and testing.

### Layout

Each file in this folder is responsible for a particular aspect of document layout. As with the components, you need to import these files in order to use them in your project.

### Mixins

This folder contains mixins which help to define certain styles. These are for internal use but you are free to import them into your own SASS projects if they are helpful.

### Public

The public folder contains the code for the paper-css documentation website. You shouldn't need to touch anything in here unless you are contributing to the documentation.

### Vars

The vars folder contains collections of CSS custom properties that are imported into `base.scss` and set on the `:root` element making them available anywhere. You do not need to import these manually.
npm package: @jamescoyle/paper-vue
Description: Material design based Vue UI library with a focus on semantics and customization.
Author: James Coyle
Latest version: 0.1.4

# PaperVue

PaperVue is a highly customisable implementation of the Material Design 2 specification in Vue. Unilke other libraries, not everything in the specification has a vue component. Much of the specification is handled using simple CSS classes provided by PaperCSS which makes your code much less verbose and a lot easier to understand and tinker with. You can easily change theme colors and style components in a way that suits you. Everything is designed to be flexible and configurable to allow for a much wider range of possibilities for unique and fresh UI designs.

## Installation

This package uses [PNPM](https://pnpm.js.org/) as the package manager. It is recommended that you use this too but NPM or any other alternatives should work just fine if that is what you prefer. This documentation will use PNPM syntax which is identical to the NPM syntax.

```console
pnpm install @jamescoyle/paper-vue
```
npm package: @jamescoyle/prettier-config
Description: My personal Prettier config
Author: James Coyle
Latest version: 1.1.0

# Prettier Config

My prefered prettier settings. 

## Usage

Install `npm i -D @jamescoyle/prettier-config` and then add the following to your package.json:

```jsonc
{
  // ...
  "prettier": "@jamescoyle/prettier-config",  
  // ...
}
```
npm package: @jamescoyle/svelte-icon
Description: Icon component for Svelte
Author: Pictogrammers, James Coyle
Latest version: 0.1.1

Consider using the [webcomponent version](https://github.com/JamesCoyle/svg-icon) of this component for an icon component that can be used in any modern browser with any framework.

# Svelte Icon Component

[![](https://chips.james-coyle.now.sh/npm/version/@jamescoyle/svelte-icon)](https://www.npmjs.com/package/@jamescoyle/svelte-icon) [![](https://chips.james-coyle.now.sh/npm/downloads/@jamescoyle/svelte-icon)](https://www.npmjs.com/package/@jamescoyle/svelte-icon)

An icon component which makes it easy to render SVG path based icons in any Svelte project. Provides several helpful properties to manipulate the icon and supports any icon pack which provides icons as a single SVG path to be displayed on a square viewbox.

# Usage

1. Install from NPM

    ```
    npm install @jamescoyle/svelte-icon
    ```

2. Import into your project
    ```
    import SvgIcon from '@jamescoyle/svelte-icon'
    ```

# Props

| Name    | Default     | Description                                                                                                                          |
| ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| type    | null        | This sets the size and viewbox to match the recommended size for the icon pack specified.                                            |
| path    | null        | Required. An SVG path to render as an icon                                                                                           |
| size    | 24          | The width and height of the SVG element                                                                                              |
| viewbox | "0 0 24 24" | The `viewBox` of the SVG element                                                                                                     |
| flip    | null        | One of "horizontal", "vertical", or "both". Flips the icon in the specified direction(s).                                            |
| rotate  | 0deg        | Rotates the icon by the specified value. Can be any valid [CSS angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle) value. |

# Styling

By default the icon will inherit the current font color of the container it is placed within. You can easily provide a specific color using an inline style on the element (`style="color: red"`) or can target the tag as normal with CSS rules.

# Accessibility

You should make use of aria attributes to improve accessibility for users that use screen reading technology. You can use `aria-labelledby` to create a link between an icon and its label. A descriptive `aria-label` can be used to allow screen readers to announce an icon if there is no visual label to accompany it.
npm package: @jamescoyle/svg-icon
Description: Icon webcomponent
Author: Pictogrammers, James Coyle
Latest version: 1.0.0

# SVG Icon WebComponent

[![](https://chips.james-coyle.now.sh/npm/version/@jamescoyle/svg-icon)](https://www.npmjs.com/package/@jamescoyle/svg-icon)
[![](https://chips.james-coyle.now.sh/npm/downloads/@jamescoyle/svg-icon)](https://www.npmjs.com/package/@jamescoyle/svg-icon)

A basic webcomponent for rendering a single path SVG icon. This component makes it easy to use SVG path based icon packs such as [MaterialDesignIcons](https://materialdesignicons.com/) and [SimpleIcons](https://simpleicons.org/).

# Usage

1. Install the package from NPM
    ```
    npm install @jamescoyle/svg-icon
    ```

2. Import the component into your application
    ```
    import '@jamescoyle/svg-icon'
    ```

3. Use the icon in your markup
    ```
    <svg-icon type="mdi" path="M...z"></svg-icon>
    ```

# Attributes

| Name    | Default     | Description                                                                                                                          |
| ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| type    | null        | This sets the size and viewbox to match the recommended size for the icon pack specified.                                            |
| path    | null        | Required. An SVG path to render as an icon                                                                                           |
| size    | 24          | The width and height of the SVG element                                                                                              |
| viewbox | "0 0 24 24" | The `viewBox` of the SVG element                                                                                                     |
| flip    | null        | One of "horizontal", "vertical", or "both". Flips the icon in the specified direction(s).                                            |
| rotate  | 0deg        | Rotates the icon by the specified value. Can be any valid [CSS angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle) value. |

# Styling

By default the icon will inherit the current font color of the container it is placed within. You can easily provide a specific color using an inline style on the element (`style="color: red"`) or can target the tag as normal with CSS rules.

# Accessibility

You should make use of aria attributes to improve accessibility for users that use screen reading technology. You can use `aria-labelledby` to create a link between an icon and its label. A descriptive `aria-label` can be used to allow screen readers to announce an icon if there is no visual label to accompany it.
npm package: @jamescoyle/vue-polyfilled-dialog
Description: This Vue component allows you to replace any instance of `<dialog>` with `<polyfilled-dialog>` to easily polyfill dialog functionality into all modern browsers. It uses the [polyfill provided by the Google Chrome team](https://github.com/GoogleChrome/dial
Author: James Coyle
Latest version: 0.1.5

# Polyfilled dialog

This Vue component allows you to replace any instance of `<dialog>` with `<polyfilled-dialog>` to easily polyfill dialog functionality into all modern browsers. It uses the [polyfill provided by the Google Chrome team](https://github.com/GoogleChrome/dialog-polyfill).
npm package: @jamesdirosa/use-urlstate
Description: >
Author: jdirosa
Latest version: 0.0.2

# use-url-state

>

[![NPM](https://img.shields.io/npm/v/use-urlstate.svg)](https://www.npmjs.com/package/use-urlstate) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @jamesdirosa/use-urlstate
```

## Usage

```tsx
import React from 'react'
import { useUrlState } from 'use-urlstate'

interface User {
  name: string
  id: string
}

export const OtherHome = () => {
  const defaultUser: User = {
    name: 'james',
    id: '1234'
  }
  const [user, setUser] = useUrlState('user', defaultUser)

  return (
    <>
      <div className='App'>
        <header className='App-header'>
          <p>Name: {user?.name}</p>
          <p>Id: {user?.id}</p>
        </header>
      </div>
    </>
  )
}
```

## License

MIT © [jdirosa](https://github.com/jdirosa)
npm package: @jamesernator/match
Description: Pattern matching
Author: James "The Jamesernator" Browning
Latest version: 0.2.1

# Match

## Experiemental package designed for
## trying out semantics of [the pattern matching proposal](https://github.com/tc39/proposal-pattern-matching)

# Test a value matches a pattern

```js
import match, { string, number } from "@jamesernator/match"

match([string, string, number], ['cats', 'hats', 2]) // true

match.on('fizz')
    .if(string, val => console.log("Got a string!")
    .else(_ => { throw new Error("Not a string") })
```

### Methods docs coming soon
npm package: @jamesernator/rollup-plugin-node-globals
Description: insert the same globals browserify does
Author: Calvin Metcalf
Latest version: 1.2.5

rollup-plugin-node-globals
===

Plugin to insert node globals including so code that works with browserify should work even if it uses process or buffers. This is based on [rollup-plugin-inject
](https://github.com/rollup/rollup-plugin-inject).

- process
- global
- Buffer
- __dirname
- __filename

Plus `process.nextTick` and `process.browser` are optimized to only pull in
themselves and __dirname and __filename point to the file on disk

Only option beyond the default plugin ones is an optional basedir which is used for resolving __dirname and __filename.

# examples

```js
var foo;
if (process.browser) {
  foo = 'bar';
} else {
  foo = 'baz';
}
```

turns into

```js
import {browser} from 'path/to/process';
var foo;
if (browser) {
  foo = 'bar';
} else {
  foo = 'baz';
}
```

but with rollup that ends up being

```js
var browser = true;
var foo;
if (browser) {
  foo = 'bar';
} else {
  foo = 'baz';
}
```

or

```js
var timeout;
if (global.setImmediate) {
  timeout = global.setImmediate;
} else {
  timeout = global.setTimeout;
}
export default timeout;
```

turns into

```js
import {_global} from 'path/to/global.js';
var timeout;
if (_global.setImmediate) {
  timeout = _global.setImmediate;
} else {
  timeout = _global.setTimeout;
}
export default timeout;

```

which rollup turns into

```js
var _global = typeof global !== "undefined" ? global :
            typeof self !== "undefined" ? self :
            typeof window !== "undefined" ? window : {}

var timeout;
if (_global.setImmediate) {
  timeout = _global.setImmediate;
} else {
  timeout = _global.setTimeout;
}
var timeout$1 = timeout;

export default timeout$1;
```

With that top piece only showing up once no matter how many times global was used.
npm package: @jamesfancy/awx
Description: 使用 JavaScript Proxy 特性对微信小程序的 `wx` 进行封装，使之以返回 `Promise` 对象的形式进行调用。随后可以使用 `await` 关键字简化程序结构。
Author: James Fan
Latest version: 0.1.0

# awx = asynchronous wx

使用 JavaScript Proxy 特性对微信小程序的 `wx` 进行封装，使之以返回 `Promise` 对象的形式进行调用。随后可以使用 `await` 关键字简化程序结构。

## 一、安装和引用

### 直接使用源文件

找到 `dist/awx.esm.js`，拷贝到小程序项目目录（假设是 `/util/awx.esm.js`），在 `app.js` 中作为本地源文件引用：

```js
import { asyncProxy } from "./util/awx.esm";
```

### npm 安装

需要参考 [微信开发文档的 npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。

```bash
npm install @jamesfancy/awx
```

引用

```js
import { asyncProxy } from "@jamesfancy/awx";
```

## 二、注入 app

由于 `asyncProxy` 每次调用都会封装新的代码对象，而 `asyncProxy` 封装出来的代理对象只会缓存使用到的函数（懒加载）。建议在程序启动时使用 `asyncProxy` 封装 `awx`，注入 `app` 对象中。

```js
// app.js
import { asyncProxy } from "./util/awx.esm";
// 或
// import { asyncProxy } from "./utils/async";


App({
    onLaunch: function () {
        this.awx = asyncProxy(wx);
        // ...
    }
});
```

## 三、在程序中使用

```json
const app = getApp();
const { awx } = app;

Page({
    someMethod() {
        awx.request(...);
    }
});
```



---

> 参考公众号文章：
>
> - [在微信小程序中使用 async/await](https://mp.weixin.qq.com/s/qgE3-SH8P4IJ4KCLNDr9ew)
> - [Proxy 封装微信小程序的异步调用](https://mp.weixin.qq.com/s/s-VbQyIQUsqew0Xj0CMgPQ)