open-index/open-npm huggingface dataset:
npm package: @kiva/kv-activity-feed
Description: A library of methods for get stream library on Kiva.org.
Latest version: 1.9.2

# kv-activity-feed

A library of methods for get stream library on Kiva.org.

## Install

Deployed:

```bash
npm i @kiva/kv-activity-feed
```

Local:

```bash
# Open kv-ui-elements folder in Terminal
npm link -w @kiva/kv-activity-feed

# Open target local project folder in Terminal
npm link @kiva/kv-activity-feed
```

## Lint

```bash
npm run lint
```

## Build

```bash
npm run build
```

## Test

```bash
npm test
```

## Contribution Guidelines

The Kiva UI project is bound by a [Code of Conduct](https://github.com/kiva/ui/blob/master/code_of_conduct.md).

Kiva welcomes outside contributions to our UI repository. If you have any ideas for a feature or improvement, create an issue and we can discuss whether it makes sense to create a pull request. Thanks for the help!
npm package: @kiva/kv-analytics
Description: A library of methods for web analytics on Kiva.org.
Latest version: 1.3.1

# kv-analytics

A library of methods for web analytics on Kiva.org.

## Install

Deployed:

```bash
npm i @kiva/kv-analytics
```

Local:

```bash
# Open kv-ui-elements folder in Terminal
npm link -w @kiva/kv-analytics

# Open target local project folder in Terminal
npm link @kiva/kv-analytics
```

## Lint

```bash
npm run lint
```

## Build

```bash
npm run build
```

## Test

```bash
npm test
```

## Contribution Guidelines

The Kiva UI project is bound by a [Code of Conduct](https://github.com/kiva/ui/blob/master/code_of_conduct.md).

Kiva welcomes outside contributions to our UI repository. If you have any ideas for a feature or improvement, create an issue and we can discuss whether it makes sense to create a pull request. Thanks for the help!
npm package: @kiva/kv-components
Description: A library of accessible UI components that adhere to Kiva's Design System. Currently built using Vue 2.
Latest version: 8.9.0

# kv-components

A library of accessible UI components that adhere to Kiva's Design System. Currently built using Vue 2.

## Using these Components

1. [Install tailwind](https://tailwindcss.com/docs/installation) into your project
2. Install components and design definitions:
   `npm install @kiva/kv-components && npm install @kiva/kv-tokens --save-dev`
3. Add our Tailwind config as a [preset](https://tailwindcss.com/docs/configuration#presets) in your tailwind.config.js

```js
// tailwind.config.js
import { tailwindConfig } from "@kiva/kv-tokens";

export default {
	presets: [tailwindConfig],
	// Project-specific customizations
	theme: {
		//...
	},
	content: [
		//...
	],
	// ...
};
```

4. Import and use the components in your Vue 2 project

```vue
<template>
	<div>
		<h2 class="tw-text-secondary">Test Title</h2>
		<kv-button>Lend today</kv-button>
	</div>
</template>

<script>
import KvButton from "kv-ui-elements/kv-components/vue/KvButton.vue";
export default {
	components: {
		KvButton,
	},
};
</script>
```

## Developing Components using Storybook

Pull down the project and fire up [Storybook](https://storybook.js.org/) locally

```sh
git clone git@github.com:kiva/kv-ui-elements.git
cd kv-ui-elements
npm install
cd @kiva/kv-components
npm run storybook
```

### Writing Stories

-   Write stories in the [CSF format](https://storybook.js.org/docs/vue/writing-stories/introduction)
-   Build stories (permutations) that describe the intended look and feel given the components set of inputs (props or slots)
-   Use JsHint to document all props, slots and events so Storybook docs will pick them up

### Additional Resources

-   https://storybook.js.org/tutorials/design-systems-for-developers

### Recommended VSCode Extensions

-   [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

## Tests

`npm run test`

## Contribution Guidelines

The Kiva UI project is bound by a [Code of Conduct](https://github.com/kiva/ui/blob/master/code_of_conduct.md).

Kiva welcomes outside contributions to our UI repository. If you have any ideas for a feature or improvement, create an issue and we can discuss whether it makes sense to create a pull request. Thanks for the help!
npm package: @kiva/kv-loan-filters
Description: A library of utilities related to the Kiva loan filters.
Latest version: 1.22.0

# kv-loan-filters

A library of utilities related to the Kiva loan filters.

## Install

Deployed:

```bash
npm i @kiva/kv-loan-filters
```

Local:

```bash
# Open kv-ui-elements folder in Terminal
cd @kiva/kv-loan-filters
npm link

# Open target local project folder in Terminal
npm link @kiva/kv-loan-filters
```

Extra step for Nuxt local development:

```ts
// Open nuxt.config.ts in target project and add with your username
...
vite: {
    optimizeDeps: {
      exclude: ['@kiva/kv-loan-filters'],
    },
    server: {
      fs: {
        allow: ['/Users/username/kiva/kv-ui-elements'],
      },
    },
  },
...
```

## Tests

```bash
npm run test
npm run test-watch
```

## Lint

```bash
npm run lint
```

## Build

```bash
npm run build
```

## Overview

The loan filter utilities are used to power the filtering UI in the Kiva Vue 2 + 3 applications. Example pages include `/lend/filter` and `/lending-home`. While these utilities don't deal directly with FLSS queries, the utilities provide the functionality for filter against the FLSS endpoints. The underlying state of the filters is stored in the Apollo cache in `loanSearchState`.

For an example of how to handle filtering and the changes to the Apollo cache, look to `LoanSearchInterface` in the `ui` repo, specifically the Apollo `watchQuery` that monitors `loanSearchState`. There are also utilities for using query params to change the `loanSearchState`.

Facets are the available filters, and the legacy lend API is the source of truth. The loans per facet count is provided by FLSS.

## Contribution Guidelines

The Kiva UI project is bound by a [Code of Conduct](https://github.com/kiva/ui/blob/master/code_of_conduct.md).

Kiva welcomes outside contributions to our UI repository. If you have any ideas for a feature or improvement, create an issue and we can discuss whether it makes sense to create a pull request. Thanks for the help!
npm package: @kiva/kv-shop
Description: A library of methods and components related to the Kiva Shop.
Latest version: 3.7.65

# kv-shop

A library of methods and components related to the Kiva Shop.

## Install

Deployed:

```bash
npm i @kiva/kv-shop
```

Local:

```bash
# Open kv-ui-elements folder in Terminal
npm link -w @kiva/kv-shop

# Open target local project folder in Terminal
npm link @kiva/kv-shop
```

Extra step for Nuxt local development:

```ts
// Open nuxt.config.ts in target project and add with your username
...
vite: {
    optimizeDeps: {
      exclude: ['@kiva/kv-shop'],
    },
    server: {
      fs: {
        allow: ['/Users/username/kiva/kv-ui-elements'],
      },
    },
  },
...
```

## Lint

```bash
npm run lint
```

## Build

```bash
npm run build
```

## Test

```bash
npm run test
```

## Contribution Guidelines

This project is bound by a [Code of Conduct](https://github.com/kiva/ui/blob/master/code_of_conduct.md).

Kiva welcomes outside contributions to our UI repository. If you have any ideas for a feature or improvement, create an issue and we can discuss whether it makes sense to create a pull request. Thanks for the help!
npm package: @kiva/kv-tokens
Description: The package contains
Latest version: 3.7.6

# kv-tokens

The package contains

-   A JSON file specifying the design definitions of Kiva's style guide.
-   A custom Tailwind configuration set to Kiva's style guide that can be used as a preset for your Tailwind project.

## Install

`npm i --save-dev @kiva/kv-tokens`

## Using the Design Definitions

```js
import designTokens from '@kiva/kv-tokens';

const primaryTextColor = designTokens.colors.theme.DEFAULT.text.primary;
```

## Using the Tailwind Preset

```js
// tailwind.config.js
import { tailwindConfig } from "@kiva/kv-tokens";

export default {
	presets: [tailwindConfig],
	// Project-specific customizations
	theme: {
		//...
	},
	content: [
		//...
	],
	// ...
};
```

See the [Tailwind documentation](https://tailwindcss.com/docs/configuration#presets) for more information on using a preset.

### Notable Config Differences

Our Tailwind config has some differences to the standard install. Notably

-   All Tailwind classes are prefixed with "tw-". E.g., `tw-mb-1` instead of `mb-1`.
-   Themable color names instead of the default Tailwind colors. E.g., `tw-bg-primary` instead of `tw-bg-gray-500`.
    See our [Storybook](https://main--608b4cf87f686c00213841b1.chromatic.com/?path=/docs/base-styling-primitives--primitives) for possible names.
-   Our spacing scale is based on 8px rather Tailwind's default 4px.

## Contribution Guidelines

The Kiva UI project is bound by a [Code of Conduct](https://github.com/kiva/ui/blob/master/code_of_conduct.md).

Kiva welcomes outside contributions to our UI repository. If you have any ideas for a feature or improvement, create an issue and we can discuss whether it makes sense to create a pull request. Thanks for the help!