open-index/open-npm huggingface dataset:
npm package: @planningcenter-experimental/finder
Description: Components for building a resource Finder in React
Author: Michael Chan
Latest version: 0.0.6

# @planningcenter/finder

Components for building a resource Finder in React

## Installation
```bash
yarn add @planningcenter/finder
```

## Usage
import * as Finder from "finder";

## Notes on filtering (From January, 2018)

## Groups Finder criteria

* Mobile/Desktop support
  - Read non-table variants
  - No dedicated mobile app. Mobile matters
* Data-agnostic (Groups doesn't have an API)
* Persisted params
  - React Router?
* Don't use `TokenizedInput` for two-dimensional Groups/Member Resource
* UI
  - No Filters = `*`
  - Horizontal section dividers are "and" `&&`
  - Each "filter" is "or" `||`
  - Tokens wrap (not scroll)
  - Seperate text search and tokens
  - In mobile, "Filters" panel gets modalized and sits behind "manage filters" button.
npm package: @planningcenter/avatar
Description: A circular image representing one person.
Author: Michael Chan
Latest version: 0.0.17
Deprecated: Package is no longer supported. Use @planningcenter/components

# `@planningcenter/avatar`

> A circular image representing one person

## Usage

`npm -i @planningcenter/avatar`

- [NPM](https://www.npmjs.com/package/@planningcenter/avatar)
- [UNPKG](http://unpkg.com/@planningcenter/avatar)

### React

```jsx
import Avatar from "@planningcenter/avatar";
import "@planningcenter/avatar.css";

<Avatar
  src="path/to/avatar.png"
  alt="some avatar"
  size={4}
  inset={true}
/>;
```

### CSS

First, link the stylesheet, relative to your platform.

```html
<span class="Avatar Avatar--size_4 Avatar--inset_true">
  <img src="path/to/avatar.png" alt="some avatar" />
</span>
```

## Properties

### size: `string | number`

Controls size in `8px` increments.

values: `3, 4, 5, 6, 7, 8, 9, "20px", "profile"`

### inset: `boolean`

Insets the component

## Theming with CSS Custom Properties

```css
:root {
  --planningcenter-avatar-inset-color: white;
}
```

## Specification

### Definition

An image representing one person.

### Treatment

- Shape: _circle_
- Dimensions: _height == width_
- Border: _optional_
  - excluded: _20px_
  - size: _.5 \* (absolute-avatar-size / 8px)_ (rounded up for better browser support)
  - scale: _roundUp(size _ .05)\*
  - min: _2px_
  - max: _5px_
  - position: _inside_
  - color: _variable_ (default: white)

### Size

Absolute height/width must be a multiple of 8px, with a single exception for _20px_.

Applications may choose to implement a subset of standard sizes.

#### standard sizes:

- 20px
- 24px
- 32px
- 40px
- 48px
- 56px
- 64px
- 72px
npm package: @planningcenter/browserslist-config
Description: Planning Center browser support codified for Node environments.
Author: Front End Systems Engineering
Latest version: 1.1.0

# `browserslist-config`

Our browser support codified for Node

## Installation

```bash
npm i @planningcenter/browserslist-config
```

## Usage

```
"browserslist": [
  "extends @planningcenter/browserslist-config"
]
```

## App configuration

You can use this in your project via [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env#options).

## Additional resources

https://github.com/browserslist/browserslist#shareable-configs
npm package: @planningcenter/components
Description: The entire collection of @planningcenter/components
Author: Michael Chan
Latest version: 0.0.25
Deprecated: Replaced by @planningcenter/elements and @planningcenter/grids

# `@planningcenter/components`

> TODO: description

## Usage

```
const components = require('@planningcenter/components');

// TODO: DEMONSTRATE API
```
npm package: @planningcenter/elements
Description: Shared Planning Center element styles
Author: Michael Chan
Latest version: 0.1.0-alpha.10
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# planningcenter/elements

Framework-independent element definitions and specification for the Planning Center suite of applications.

## Navigation

| File/Dir                | Why it's there                                                                                                  |
| :---------------------- | :-------------------------------------------------------------------------------------------------------------- |
| `{package}.css`         | CSS implementation **Published to NPM**                                                                         |
| `{package}.stories.mdx` | Element documentation and test sheet. `Stories` are visually tested by [Chromatic](https://www.chromaticqa.com) |

## Setup

### Installation

Add it.

`yarn add @planningcenter/elements`

Install it.

- Webpack `import "@planningcenter/elements"`
- Other JavaScript Bundlers `import "@planningcenter/elements/dist/elements.css"`
- Sprockets `/*= require @planningcenter/elements */`
- Sass `@import "@planningcenter/elements"`
npm package: @planningcenter/finder
Description: Components for building a resource Finder in React
Author: Michael Chan
Latest version: 0.0.16
Deprecated: No longer supported. See planningcenter/design README for details

# @planningcenter/finder

Components for building a resource Finder in React

## Installation
```bash
yarn add @planningcenter/finder
```

## Usage
import * as Finder from "finder";

## Notes on filtering (From January, 2018)

## Groups Finder criteria

* Mobile/Desktop support
  - Read non-table variants
  - No dedicated mobile app. Mobile matters
* Data-agnostic (Groups doesn't have an API)
* Persisted params
  - React Router?
* Don't use `TokenizedInput` for two-dimensional Groups/Member Resource
* UI
  - No Filters = `*`
  - Horizontal section dividers are "and" `&&`
  - Each "filter" is "or" `||`
  - Tokens wrap (not scroll)
  - Seperate text search and tokens
  - In mobile, "Filters" panel gets modalized and sits behind "manage filters" button.
npm package: @planningcenter/font-size
Description: Font Size Church Center Web
Author: Dustin Secrest
Latest version: 0.0.1-2

# font-size

Classes for applying font-size in pixels.
## Install

npm i -S @planningcenter/font-size
or
yarn add @planningcenter/font-size

## Usage

import "@planningcenter/font-size/css/font-size.css";
The code you're loading
```
.fs-0{font-size:24px}
.fs-1{font-size:20px}
.fs-2{font-size:18px}
.fs-3{font-size:16px}
.fs-4{font-size:14px}
.fs-5{font-size:12px}
.fs-6{font-size:10px}
```
npm package: @planningcenter/icons
Description: Planning Center Icons
Author: Frontend Systems Engineering
Latest version: 15.30.0

# Planning Center Icons
Accessible, scaleable, cacheable, and standard SVG icons for [Planning Center](https://planning.center) apps


## References

- [Installation](./docs/INSTALLATION.md)
- [Usage](./docs/USAGE.md)
- [Development Scripts](#development-scripts)
- [Contributing](./docs/CONTRIBUTING.md)
- [Publishing](./docs/PUBLISHING.md)
- [Releases (changelog)](https://github.com/planningcenter/icons/releases)
- [Actions](https://github.com/planningcenter/icons/actions)

## Links

- [Figma](https://www.figma.com/file/5WSYCrTtlQvFeOUZoakwR4/Icons)
- [Storybook](https://planningcenter.github.io/icons/)
- [Docs/Reference](https://planningcenter.github.io/icons/docs/)

### Packages

  - [npm package (preferred)](https://www.npmjs.com/package/@planningcenter/icons)
  - [GitHub (experimental)](https://github.com/planningcenter/icons/packages/167210)

### Helpers and Components

  - [React — @planningcenter/symbol](https://www.npmjs.com/package/@planningcenter/symbol)
  - [Rails — interfaces#planningcenter_svg_use_tag](https://github.com/ministrycentered/interfaces/blob/master/app/helpers/interfaces/application_helper.rb#L19-L64)

# Development Scripts

```bash
yarn build      # Generate sprites/paths from SVGs & build reference page
yarn start      # Build and serve local docs at http://localhost:1234
yarn test       # Run Jest tests
yarn storybook  # Start Storybook at http://localhost:6006
yarn deploy     # Build everything and deploy to GitHub Pages
```

# Reference Guides

- [Contributing](./docs/CONTRIBUTING.md)
- [Publishing](./docs/PUBLISHING.md)
npm package: @planningcenter/olio-dev-tools
Description: Expo DevTools plugin for Olio dev tools
Author: Mobile Systems Engineering
Latest version: 0.1.16

# @planningcenter/olio-dev-tools

Developer tools for Olio-powered React Native apps, surfaced via Expo DevTools.

## Installation

Install as a dev dependency:

```sh
npm install -D @planningcenter/olio-dev-tools
```

The `useOlioDevTools` hook is a no-op in production; it only activates in development.

## Quick Start

Call `useOlioDevTools` from a component that has access to:
- a React Navigation `navigation` object, and
- a Jolt client that supports `setOnStateChangeHandlerForDev(handler)`.

```tsx
import JoltClient from "@planningcenter/jolt-client";
import { useOlioDevTools } from "@planningcenter/olio-dev-tools";
import { useNavigation } from "@react-navigation/native";
import { useState } from "react";

function DevToolsBridge() {
	const navigation = useNavigation();
	const [environment, setEnvironment] = useState("staging");

	const jolt = new JoltClient(/* ... */) as JoltClient & {
		setOnStateChangeHandlerForDev: (state: any) => void;
	};

	useOlioDevTools({
		navigation,
		environment,
		onEnvironmentChange: setEnvironment,
		jolt,
	});

	return null;
}
```

Open your app in Expo DevTools. The Olio Dev Tools panel will appear and stay in sync with the running app.

## Features

### Viewing what's in Async Storage
- Lists all keys from `AsyncStorage.getAllKeys()` (sorted).
- Selecting a key fetches its value via `AsyncStorage.getItem(key)` and displays it.

### Overriding network requests
- Create per-URL overrides that return a stubbed `{ status, data? }` response.
- Toggle overrides ON/OFF globally.
- Overrides are applied via Olio’s `RequestManager` filters (`setFilters`) and override enable/disable APIs.

### Log configurations
Two separate logging-related tools are exposed:

- Request logging (network)
	- Toggle request logging ON/OFF.
	- Configure what gets logged:
		- `initial`: include an initial log entry
		- `startTime`: include start time (when `initial` is enabled)
		- `end`: include finished log entry
		- `duration`: include duration (when `end` is enabled)
		- `responses`: include response objects (when `end` is enabled)

- Log filters (app logs)
	- Toggle filters ON/OFF globally.
	- Add/remove filters across four buckets:
		- `typeIs`, `typeIsNot`, `contains`, `doesNotContain`
	- Filters are persisted via Olio’s `LogManager.saveFilters()`.

### Jolt subscriptions viewer
- Shows the current connection ID and active channel subscriptions.
- Each channel includes a subscriber count, which is helpful for spotting duplicate subscribes.
- DevTools stays updated as Jolt state changes via `setOnStateChangeHandlerForDev`.

### React navigation helper
- Navigate to any route name from DevTools.
- Supports arbitrary key/value parameters; the app calls `navigation.navigate(route, params)`.

### Environment selector
- Switch between Development / Staging / Production.
- When changed, DevTools calls `onEnvironmentChange(newEnv)` so your app can retarget endpoints.