open-index/open-npm huggingface dataset:
npm package: @primecms/core
Description: The core Prime CMS Engine
Author: Birkir Gudjonsson
Latest version: 0.3.4-beta.3

# @primecms/core

> Prime backend core.

See our [docs](https://birkir.github.io/prime) for more information or the [issues](https://github.com/birkir/prime/issues) associated with this package.

## Install

Using npm:

```sh
npm install --save-dev @primecms/core
```

or using yarn:

```sh
yarn add @primecms/core --dev
```
npm package: @primecms/field
Description: Field Base for Prime CMS
Author: Birkir Gudjonsson
Latest version: 0.3.4-beta.3

# Prime Field

This package is the base for all fields in Prime.

## Core

You start off by exporting a default class that extends the PrimeField interface:

```ts
import PrimeField from '@primecms/field';
export default class PrimeFieldSample extends PrimeField {}
```

### GraphQL Output Type

The package needs to provide input and output types for the field.

## UI

You can provide React components that can be fitted into the Prime UI.

If you want Prime to register your UI library, you will have to bundle it and store as `ui.js`, `lib/ui.js` or `lib/ui/index.js` for the registerer to pick it up.

_(todo)_ Alternatively you can edit your `package.json` file to provide different path to the ui library by having an `"prime:ui"`, similar to how the `main` property works.

The output of the library should be in this format:

```ts
export default {
  InputComponent: YourReactComponent,
  SettingsComponent: AnotherReactComponent,
  Todo_menuItems() {
    return [];
  },
  Todo_routes() {
    return [];
  },
};
```
npm package: @primecms/field-asset
Description: Asset Field for Prime CMS
Author: Birkir Gudjonsson
Latest version: 0.3.4-beta.3

# `prime-field-asset`

Upload Images, Videos and other assets.

Backed with Cloudinary.

### Required environment variable

- `PRIME_CLOUDINARY_URL`

Example:

```bash
PRIME_CLOUDINARY_URL=cloudinary://apiKey:apiSecret@bucketName
```
npm package: @primecms/ui
Description: Prime CMS User Interface
Author: Birkir Gudjonsson
Latest version: 0.3.4-beta.3

# @primecms/ui

> Front-end interface for prime

See our [docs](https://birkir.github.io/prime) for more information or the [issues](https://github.com/birkir/prime/issues) associated with this package.

## Install

Using npm:

```sh
npm install --save-dev @primecms/ui
```

or using yarn:

```sh
yarn add @primecms/ui --dev
```
npm package: @primediabroadcasting/person-name
Description: Builds a full name string.
Author: Wayne Ashley Berry
Latest version: 2.0.2

[![Next](http://www.wearenext.co.za/assets/images/logos/logo-next-dark-57x22.png)](http://www.wearenext.co.za)

# Primedia Person Name

[![npm](https://img.shields.io/npm/v/@primediabroadcasting/person-name.svg?style=flat)](https://www.npmjs.com/package/@primediabroadcasting/person-name)
[![Dependency Status](https://david-dm.org/primediabroadcasting/primedia-person-name/status.svg?style=flat)](https://david-dm.org/primediabroadcasting/primedia-person-name#info=dependencies)
[![devDependency Status](https://david-dm.org/primediabroadcasting/primedia-person-name/dev-status.svg?style=flat)](https://david-dm.org/primediabroadcasting/primedia-person-name#info=devDependencies)

### Examples

```js
var ns = require('@primediabroadcasting/person-name');

var person = {
  first_name: 'Wayne',
  middle_names: 'Ashley',
  last_name: 'Berry'
}

var name = ns.name(person); // Wayne Ashley Berry
```

```js
var ns = require('@primediabroadcasting/person-name');

var name = ns.name({}) || 'Untitled'; // Untitled
```

```js
var ns = require('@primediabroadcasting/person-name');

var name = ns.concat(['Wayne', 'Ashley', 'Berry']); // Wayne Ashley Berry
```

You can also attempt to reverse the process and parse a full name string into
first, middle and last names.

```js
var ns = require('@primediabroadcasting/person-name');

ns.parse('Wayne Ashley Berry');
// {
//   first_name: 'Wayne',
//   middle_names: 'Ashley',
//   last_name: 'Berry'
// }
```

#### License

[MIT](http://opensource.org/licenses/MIT) © [Next](http://www.wearenext.co.za)
npm package: @primediabroadcasting/search-args
Description: Converts a string into search arguments.
Author: Wayne Ashley Berry
Latest version: 2.0.1

[![Next](http://www.wearenext.co.za/assets/images/logos/logo-next-dark-57x22.png)](http://www.wearenext.co.za)

# Primedia Search Args

[![npm](https://img.shields.io/npm/v/@primediabroadcasting/search-args.svg?style=flat)](https://www.npmjs.com/package/@primediabroadcasting/search-args)
[![Dependency Status](https://david-dm.org/primediabroadcasting/primedia-search-args/status.svg?style=flat)](https://david-dm.org/primediabroadcasting/primedia-search-args#info=dependencies)
[![devDependency Status](https://david-dm.org/primediabroadcasting/primedia-search-args/dev-status.svg?style=flat)](https://david-dm.org/primediabroadcasting/primedia-search-args#info=devDependencies)

## Installation

```sh
❯ npm install --save @primediabroadcasting/search-args
```

```javascript
var args = require('@primediabroadcasting/search-args');
args('...');
```

### Examples

```javascript
args('Wayne Ashley Berry');
```

```json
{
  "search": {
    "terms": [
      "Wayne",
      "Ashley",
      "Berry"
    ]
  }
}
```

---

```javascript
args('topic:Typography topic:"Robot Wars"');
```

```json
{
  "filter": {
    "topic_name": [
      "Robot Wars",
      "Typography"
    ]
  }
}
```

---

```javascript
args('is:contactable language:1 language:English Shawn');
```

```json
{
  "search": {
    "terms": [
      "Shawn"
    ]
  },
  "filter": {
    "contactable": true,
    "language_id": [
      1
    ],
    "language_name": [
      "English"
    ]
  }
}
```

---

```javascript
args('not:contactable direction:a-z');
```

```json
{
  "direction": "asc",
  "filter": {
    "contactable": false
  }
}
```

---

```javascript
args('direction:z-a is:deceased');
```

```json
{
  "direction": "desc",
  "filter": {
    "deceased": true
  }
}
```
npm package: @primefront/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 5.0.1

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @primer-io/goat
Description: Design system by primer.io
Latest version: 9.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<p align="center">
  <img src="../../logo/cover.png" alt="Goat logo" width="924" />
</p>

GOAT is Primer's design system.  
This package manages:

- React components

# Questions?

Ping us on Slack at `#goat-design-system`
npm package: @primer-io/goat-icons
Description: Design system icons by primer.io
Latest version: 11.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<p align="center">
  <img src="../../logo/cover.png" alt="Goat logo" width="924" />
</p>

GOAT is Primer's design system.  
This package manages:

- icons

## Usage

### With the `Icon` component

```javascript
import { Icon } from '@primer-io/goat';
import { Activity } from '@primer-io/goat-icons';

<Icon as={Activity}>
```

### By itself

```javascript
import { Activity } from '@primer-io/goat-icons';

<Activity.small />
<Activity.medium />
<Activity.default />
```

## Add / update an icon

Icons are generated on build from our cdn `https://goat-assets.production.core.primer.io`.
If an icon needs to be added/updated, simply run `npm run build` and open a PR with the changes.

## How it works

Icon definitions are generated based on the contents of the `svgs` folder.
The results are proxied objects containing the versions of the icon and a default
version.

### Icon versions

The icon versions are defined by specific suffixes in the file name, currently
this is used to define size variations.

The proxy ensures that the `default` component is returned if a field
is referenced that has no value. This fallback enables adding just one version
of an icon.

Checked suffixes:

- medium
- small

#### Example 1

Svg names in the folder:

- some-icon-small
- some-icon-medium

Result:

```javascript
export const SomeIcon = {
  small: SomeIconSmall,
  medium: SomeIconMedium,
  default: SomeIconMedium,
};
```

#### Example 2

Svg names in the folder:

- some-icon-without-size

Result:

```javascript
export const SomeIconWithoutSize = {
  default: SomeIconWithoutSize,
};
```

# Questions?

Ping us on Slack at `#guild-web` using any of:

- `@guild-web-developers ` (engineers)
- `@goatdesigners` (designers)
npm package: @primer-io/goat-tokens
Description: Design system tokens by primer.io
Author: PAX Team
Latest version: 0.13.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<p align="center">
  <img src="../../logo/cover.png" alt="Goat logo" width="924" />
</p>

GOAT is Primer's design system.  
This package manages:

- design tokens - colors, typography, etc.

# Questions?

Ping us on Slack at `#goat-design-system` using any of:

- `@goaties` (whole team)
- `@goatdesigners` (designers)
- `@goat-core-contributors` (engineers)
npm package: @primer-io/prettier-config
Description: Shared config for Prettier for frontend projects @ Primer
Author: Primer Developers
Latest version: 1.0.1

# `@primer-io/prettier-config`

Shared config for Prettier for frontend projects @ primer.io

# How to use

**Install**

```
yarn add --dev @primer-io/prettier-config
```

**a) use with package.json**

```
// package.json
{
  ...,
  "prettier": "@primer-io/prettier-config"
}
```

**b) use with .prettierrc.json**

```
// .prettierrc.json
"@primer-io/prettier-config"
```

**Overrides**

Options above do not allow to extend the configuration. For that, you need to use following approach:

```
// .prettierrc.js
module.exports = {
  ...require("@primer-io/prettier-config"),
  // custom overrides here
};
```

[More info on shared configurations](https://prettier.io/docs/en/configuration.html#sharing-configurations)
npm package: @primer/component-metadata
Description: [![npm](https://img.shields.io/npm/v/@primer/component-metadata)](https://www.npmjs.com/package/@primer/component-metadata) [![CI](https://github.com/primer/component-metadata/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/primer/comp
Latest version: 0.5.1
npm package: @primer/docs-components
Description: Components for GitHub Documentation Sites
Author: GitHub, Inc.
Latest version: 1.0.0

# docs-components

React components for building Primer documentation sites!

### 👀 COMING SOON! 👀
- Utilities for building docs sites using Next.js


### But that's not all!
You can also clone this repository and spin up a docs site of your own! In the future, we'd like to make this process much simpler, but for now there are a few things you'll need to do after you clone:

1. Rename the `docs-components` folder in `/pages` to whatever you'd like your root url to be.

2. Find and replace `docs-components` with whichever name you chose in step 1.

3. Delete the `src` folder!

4. Update package.json with the appropriate values for name, version, description, etc.
npm package: @primer/figma-action
Description: GitHub action for exporting figma components.
Author: GitHub, Inc.
Latest version: 1.0.0-alpha.3

# GitHub action for exporting Figma components

[![npm version](https://img.shields.io/npm/v/@primer/figma-action.svg)](https://www.npmjs.org/package/@primer/figma-action)

A [GitHub action](https://github.com/features/actions) that will export [Figma](https://figma.com/) components from design files to your repository.

## Usage

**Example workflow**

```workflow
name: Export SVG from Figma
on: [push]
jobs:
  all:
    name: Figma Export
    runs-on: ubuntu-latest    
    steps:
      - uses: primer/figma-action@v1.0.0-alpha.2
        with:
          args: "format=svg outputDir=./build/"
        env:
          FIGMA_FILE_URL: "https://www.figma.com/file/ZFjrph2HUwFK8Q3uEtJIu1PT/yourfilename"
          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
```

### Variables

**Secrets**

`FIGMA_TOKEN` **(required)**

This token is used to access the [Figma API](https://www.figma.com/developers/docs#access-tokens). It's required to generate one so this action will work. It's recommended to set the token in a [secret token](https://help.github.com/articles/virtual-environments-for-github-actions#creating-and-using-secrets-encrypted-variables) in your repository.

**env variables**

`FIGMA_FILE_URL` **(required)**

This is the file url that you would like to export from. The action will search the file for [components](https://help.figma.com/article/66-components) and export them with your configurations.

**Workflow args (optional)**

* `format` – The export format for exporting from Figma. Options are `svg`, `jpg`, `png`. Default is `jpg`
* `outputDir` – Where you would like the exported files to live. Default is `./build/`
* `scale` – When choosing an image format `jpg` or `png` this is the export scale between `0.01` and `4` that will allow you to scale the image. Default is `1`.

### Output

The output of this action lives in `./build/` by default, but can be configured. In addition to the files exported you will see a `data.json` file exported. This contains information about the exported components mapped by component `id`.

The directory will look like this:

```
./outputDir/
  ├── format/
  |     └── componentName.format
  └── data.json
```

The data.json file will look like this:

```js
{
  "0:639": {
    "name": "plus", // component name
    "id": "0:639", // component figma id
    "key": "89696b0b52493acc8692546ac829bd4e334c63a2", // component global figma id
    "file": "FP7lqd1V00LUaT5zvdklkkZr", // figma file key
    "description": "keywords: add, new, more", // figma component description
    "width": 12, // width of the component frame
    "height": 16, // height of the component frame
    "image": "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/1/6d/1234" // aws URL for the exported file
  }
}
```

## License

[MIT](./LICENSE) &copy; [GitHub](https://github.com/)
npm package: @primer/generated-data
Description: A repo with generated GitHub-like data to be used in tools like Figma plugins and prototypes.
Author: Github Inc.
Latest version: 0.0.9

# Generated data

[![npm package](https://img.shields.io/npm/v/@primer/generated-data.svg?style=flat)](https://www.npmjs.com/package/@primer/generated-data)

A repo with generated GitHub-like data to be used in tools like Figma plugins and prototypes.
npm package: @primer/next
Description: Primer components and helpers for Next.js
Author: GitHub
Latest version: 0.0.10

# @primer/next
React components and helpers for Primer sites built with Next.js.

## Features
* [MDX] support for pages with `.md` and `.mdx` extensions
* Conversion of `.svg` files into React components with [SVGR](https://www.smooth-code.com/open-source/svgr/)
* Sets [`assetPrefix`][assetPrefix] to `process.env.NOW_URL`, and exposes it to the client via [`publicRuntimeConfig`][publicRuntimeConfig]

### Configuration
Configuration happens in your `next.config.js` via what Zeit refers to as a "plugin" but is really just a function that generates a configuration object:

```js
// next.config.js
const withPrimer = require('@primer/next/plugin')
module.exports = withPrimer({
  // base Next config
}, {
  // optional plugin options
})
```

or, if you just want the default setup, simply:

```js
const withPrimer = require('@primer/next/plugin')
module.exports = withPrimer()
```

### Pages
TBD

[assetPrefix]: https://github.com/zeit/next.js/#cdn-support-with-asset-prefix
[pageExtensions]: https://github.com/zeit/next.js/#configuring-extensions-looked-for-when-resolving-pages-in-pages
[publicRuntimeConfig]: https://github.com/zeit/next.js/#exposing-configuration-to-the-server--client-side
[MDX]: https://mdxjs.com/
npm package: @primer/styled-octicons
Description: A scalable set of icons handcrafted with <3 by GitHub.
Author: GitHub, Inc.
Latest version: 19.23.1

# @primer/styled-octicons

[![npm version](https://img.shields.io/npm/v/@primer/styled-octicons.svg)](https://www.npmjs.org/package/@primer/styled-octicons)

The `@primer/styled-octicons` package wraps icon components from [`@primer/octicons-react`](/packages/react) with [system props](https://primer.style/components/system-props), making them easier to style in projects that use [styled system](https://styled-system.com/)—like [Primer React](https://primer.style/components).

## Install

```shell
npm install @primer/styled-octicons
```

## Usage

`@primer/styled-octicons`  exports each icons as a named export. This allows you to import only the icons you need:

```jsx
import {AlertIcon} from '@primer/styled-octicons'

export () => (
  <AlertIcon color="red.6" mr={2} />
)
```

## System props

All icon components in `@primer/styled-octicons` get `color` and `space` system props as well as the `sx` prop. Read the Primer React [System Props](https://primer.style/components/system-props) documentation for a full list of available props.


## Props

In addition to system props, icon components in `@primer/styled-octicons` accept the same props as components in `@primer/octicons-react`:

| Name | Type | Default | Description |
| :- | :- | :-: | :- |
| aria-label | String | | Sets the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) attribute of the `<svg>`. If no `aria-label` is defined, `aria-hidden` will be set to `true`.  |
| className | String | | Sets the `class` attribute on the `<svg>`. |
| size | Number \| `"small"` \| `"medium"` \| `"large"` | `16` | The height of the icon. Width will be scaled proportionally. |
| verticalAlign | `"middle"` \| `"text-bottom"` \| `"text-top"` \| `"top"` \| `"unset"` | `"text-bottom"` | The vertical alignment of the `<svg>`. |
npm package: @primer/sync
Description: Keep your Primer CSS modules in sync!
Author: GitHub, Inc.
Latest version: 2.0.0

# primer-sync

Sync [Primer CSS](https://github.com/primer/primer) SCSS files installed with npm out of `node_modules`.

If you use Primer CSS with Jekyll on GitHub Pages, this is for you:

```sh
npx -p @primer/sync primer-sync
```

And that's it! All of the Primer CSS source files will be copied to your `_sass` directory so that you can use them without adding `node_modules` to your Sass include paths. Then, you can add these files to git instead of `node_modules`, and your site will build on Pages! :sparkles:


## Installation

If you plan on updating Primer CSS regularly, you should add it as a dev dependency with:

```sh
npm i -D @primer/sync
```

Then, whenever you update your `@primer/css` dependency, you can run it with:

```sh
npx primer-sync
```


## Usage

The `primer-sync` command line script works like this:

```
primer-sync [options] [<output directory>]

Options:
  --help, -h      Show help                                            [boolean]
  --version       Show version number                                  [boolean]
  --from                                      [string] [default: "node_modules"]
  --packages, -p                               [string] [default: "@primer/css"]
  --files, -f                                             [default: "**/*.scss"]
  --dry-run, -n                                                        [boolean]
```

For instance:

* `primer-sync foo` will copy all of the Primer CSS source files from
  `node_modules` to a directory named `foo` in your current working directory.
* `primer-sync --from ../node_modules src/_sass` will tell it to look for your
  npm modules in `../node_modules` and copy them to `src/_sass`.
* `primer-sync --packages "primer{,-*}"` will copy `primer` and `primer-*` SCSS files. (Use this with `primer` dependencies prior to v12.0.0.)
* `primer-sync --files '**/*.md'` will copy only Markdown (documentation) files
  rather than the SCSS sources.
* `primer-sync --dry-run` (or `primer-sync -n`) will print the copy operations
  so you can confirm what will be copied before actually doing it.


## License

[MIT](./LICENSE) &copy; [GitHub](https://github.com/)
npm package: @primerlabs/formol
Description: An opiniated react form framework.
Author: Florian Mounier
Latest version: 2.7.2

# formol

[![Build Status](https://travis-ci.org/Kozea/formol.svg?branch=master)](https://travis-ci.org/Kozea/formol)
[![Coverage Status](https://coveralls.io/repos/github/Kozea/formol/badge.svg?branch=master)](https://coveralls.io/github/Kozea/formol?branch=master)

An opiniated react form framework.

## [Check the storybook](https://kozea.github.io/formol/)

## [Check the starter pack](https://github.com/Kozea/formol_starter_pack/)