open-index/open-npm huggingface dataset:
npm package: @primitives/progress-bar
Description: `ProgressBar` is a box that holds other components inside. It can be styled to some limited extent. The closest analogs are:
Latest version: 0.2.0

`ProgressBar` is a box that holds other components inside. It can be styled to some limited extent. The closest analogs are:

- `div` in Web
- `View` in Native

```ts
type TProgressBar<TStyles> = {
  id?: string,
  ariaValuemin?: number,
  ariaValuenow?: number,
  ariaValuemax?: number,
  children?: ReactNode,
  accessibilityLabel?: string,
  style?: TStyle,
}
```

> ⚠️`TStyles` differ on Native and Web given each one’s different environment-specific elements and document-models.
npm package: @primitives/radio
Description: Radio input for both React Native and Web
Latest version: 0.4.0

`Radio` brings the equivalent of an `<input type="radio" />` to Native land.

## Handling changes

Context passes down a `groupValue` and a `groupName` together with a `setGroupValue` action to all its consumers. Both the value and the state are set by a `useState` hook within the consumer’s side, while `groupName` is a hardcoded `string` that marks the group name. And this is how the `checked` state is defined, since React Native does not offer a built-in solution similar to the radio input on Web.


## Basic usage

```jsx
import React, { useState } from 'react'
import { RadioGroup, RadioContext, RadioInput } from '@primitives/radio'
import PresentationComponent from './somewhere'

const RadioWrapper = ({
  groupName,
  isVisible = false,
  isDisabled = false
}) => {
  const [ groupValue, setGroupValue ] = useState('')

  return <RadioGroup
    groupName={groupName}
    groupValue={groupValue}
    onChange={setGroupValue}
  >
    <RadioInput
      value={value}
      isVisible={isVisible}
      isDisabled={isDisabled}
    />
    <RadioContext.Consumer>
      {({groupValue}) => (
        <PresentationComponent
          groupValue={groupValue}
        />
      )}
    </RadioContext.Consumer>
  </RadioGroup>
}
```
npm package: @primitives/select
Description: `Select` is an element that provides a space where the user can select a value from a list of options.
Latest version: 3.1.0

`Select` is an element that provides a space where the user can select a value from a list of options.

## Option selection handler

- `onChange`: triggered when a different option is selected

## Press handlers

- `onPressIn`: triggered when the component is pressed
- `onPressOut`: triggered when the component is no longer pressed

## Focus-like handlers

- `onFocus`: triggered when the component gets the focus
- `onBlur`: triggered when the component loses the focus

These map to the same corresponding props in Web and in React Native.

## Raw type definitions

```ts
export type TSelectProps = {
  id?: string
  isDisabled?: boolean
  isHidden?: boolean
  color?: string
  family?: string
  weight?: number
  size?: number
  lineHeight?: number
  letterSpacing?: number
  firstNoneSelectableOption?: string
  paddingBottom?: number
  paddingLeft?: number
  paddingRight?: number
  paddingTop?: number
  shouldStretch?: boolean
  value: string
  zIndex?: number
  onChange: (newValue: string) => void
  onFocus?: () => void
  onBlur?: () => void
  onPressIn?: () => void
  onPressOut?: () => void
}
```
npm package: @primitives/table
Description: This is A WEB COMPONENT, in the next version we will add native variation.
Latest version: 3.1.0

This is A WEB COMPONENT, in the next version we will add native variation.

`Table`, `TableBody`, `TableBodyCell`, `TableHead`, `TableHeadCell`, `TableRow` are use in order to render web tables.

These map to the same corresponding props in Web.

## Raw type definitions

Table:
```ts
export type TTable = {
  id?: string,
  children?: ReactNode,
  backgroundColor?: string,
  borderColor?: string,
  borderTopWidth?: number,
  borderBottomWidth?: number,
  borderLeftWidth?: number,
  borderRightWidth?: number,
  borderStyle?: string,
}
```

TableBody:
```ts
export type TTableBody = {
  id?: string,
  children?: ReactNode,
}
```

TableBodyCell:
```ts
export type TTableBodyCell = {
  id?: string,
  children?: ReactNode,
  backgroundColor?: string,
  borderColor?: string,
  borderTopWidth?: number,
  borderBottomWidth?: number,
  borderLeftWidth?: number,
  borderRightWidth?: number,
  borderStyle?: string,
}
```

TableHead:
```ts
export type TTableHead = {
  id?: string,
  children?: ReactNode,
}
```

TableHeadCell:
```ts
export type TTableHeadCell = {
  id?: string,
  children?: ReactNode,
  backgroundColor?: string,
  borderColor?: string,
  borderTopWidth?: number,
  borderBottomWidth?: number,
  borderLeftWidth?: number,
  borderRightWidth?: number,
  borderStyle?: string,
}
```

TableRow:
```ts
export type TTableRow = {
  id?: string,
  children?: ReactNode,
}
```
npm package: @primitivesocial/lego
Description: Handcrafted Vue components to help you create amazing uis.
Author: Elie Andraos
Latest version: 1.0.6

# Lego
Handcrafted Vue components to help you create amazing uis.

## Installation
```javascript
npm i @primitivesocial/lego --save
```
### Usage
```javascript
import VueLego from "@primitivesocial/lego";
Vue.use(VueLego);
```

### Custom lego config
```javascript
window.Lego = require('path/to/lego.config.js');
```

### Available Components
- `<icon>`
- `<primary-button>`
- `<secondary-button>`
- `<text-input>`
- `<dropdown>`
- `<checkbox-input>`
- `<radio-input>`
- `<tabs>`
- `<toggle>`

## Author & Contribution
Hey, I'm Elie Andraos, a web developer at [Primitive](https://twitter.com/lead_primitive).
Pull requests are always welcome. For major changes, please open an issue first to discuss what you would like to change.
You can also [reach me out on twitter](https://twitter.com/andzilla31) for any question!
npm package: @primitivesocial/ps-kernel
Description: Middleware system with Vue Router and Vuex
Author: Elie Andraos
Latest version: 1.0.4

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/PrimitiveSocial/ps-kernel/NodeCI)
[![CodeFactor](https://www.codefactor.io/repository/github/primitivesocial/ps-kernel/badge)](https://www.codefactor.io/repository/github/primitivesocial/ps-kernel)
![downloads](https://img.shields.io/npm/dt/@primitivesocial/ps-kernel)
![downloads](https://img.shields.io/npm/v/@primitivesocial/ps-kernel)
![min-size](https://img.shields.io/bundlephobia/min/@primitivesocial/ps-kernel/1.0.0)
![license](https://img.shields.io/github/license/PrimitiveSocial/ps-kernel)

A middleware system for Vue-router and Vuex

## Installation
```
npm i @primitivesocial/ps-kernel --save
```

## Configuration
In your app.js file, import the Vue router, Vuex and define the router as any vuex/vue-router app: 
```js
import store from './vuex/store' // vuex store instance
import router from './router' // vue-router instance
const router = new VueRouter(...);
```

Import the kernel and add it to the vue-router beforeEach hook.
```js
import Kernel from "@primitivesocial/ps-kernel";

router.beforeEach((to, from, next) => {
    let kernel = new Kernel(to, next, store);
    kernel.run();
});
```

## Usage
Middlewares are simply ES6 exported functions. The function accepts a destructred object as parameter, which contains the store instance, a next function and a redirect function. **The redirect function accepts a route name as parameter.**

```js
//auth.js middleware file
export default function auth ({ store, redirect, next }){

    if(!store.getters['user/id']){
        return redirect('Login'); // 'Login' is the route name
    }

    //proceed the request
    return next();
}
```

And in your route definitions, add it inside tge middleware meta field: 
```js
import auth from "./auth";

let routes = [
    {
        path: '/login',
        component: Login,
        name: 'Login'
    },
    {
        path: '/dashboard',
        component: Dashboard,
        meta: {
            middleware: [
                auth,
            ]
        },
    },
]
```

The middleware meta field accepts an array, which means, you can add multiple middleware per route :fire: :fire:

## Author & Contribution
Hey, I'm Elie Andraos, a web developer at [Primitive Social](https://twitter.com/PrimitiveSocial).
Pull requests are always welcome. For major changes, please open an issue first to discuss what you would like to change.
You can also [reach me out on twitter](https://twitter.com/andzilla31) for any question!