open-index/open-npm huggingface dataset:
npm package: @ied/dropdown
Description: ## Install
Author: Didier Franc
Latest version: 1.0.0-beta.3

# Dropdown

## Install

```js
yarn add @ied/dropdown
```

## Use

```js
import React, { Component, Fragment } from 'react'
import { render } from 'react-dom'

import Dropdown, { positions } from '@ied/dropdown'

class App extends Component {
  state = {
    dropdown: false
  }

  toggleDropdown = () => {
    this.setState({ dropdown: !this.state.dropdown })
  }

  render() {
    return (
      <Fragment>
        <input
          onFocus={this.toggleDropdown}
          onBlur={this.toggleDropdown}
          id="xyz"
        />
        {this.state.dropdown && (
          <Dropdown target="xyz" position={positions.BOTTOM_RIGHT}>
            // Your content
          </Dropdown>
        )}
      </Fragment>
    )
  }
}

const root = document.getElementById('root')

if (root) {
  render(<App />, root)
}
```

## Types

```js
type Props = {
  children: React$Node,
  target: string,
  position?: string,
  className?: string,
  style?: {}
}
```
npm package: @ied/event
Description: ## Install
Latest version: 1.0.2

# Event

## Install

```js
 yarn add @ied/event
```

## Requirement

If you use icon property add this to your `index.html`

```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

## Use

```js
import Event from '@ied/event'

      <Event
        type="created"
        eventText={
          <p>
            <strong>Daffy Duck</strong> created the task Boom
          </p>
        }
        date="2019-11-13"
        locale="fr"
      />
      <Event
        type="updated"
        eventText={
          <p>
            <strong>E.T.</strong> updated the task Boom
          </p>
        }
        date="2019-09-23"
        locale="en"
      />
      <Event
        type="rejected"
        eventText={
          <p>
            <strong>Homer Simpson</strong> rejected a document
          </p>
        }
        date="2019-08-07"
        locale="da"
      />
```

## Types

### Props

```js
type Props = {
  type: string,
  eventText: Node,
  date: Date | number | string,
  children?: Node,
  locale?: string,
}
```

### List of event types

- created
- deleted
- completed
- uploaded
- assigned
- commented
- updated
- approved
- rejected
npm package: @ied/icon
Description: ## Install
Author: Yann Amsellem
Latest version: 1.0.1

# Icon

## Install

```js
yarn add @ied/icon
```

Add this to your `index.html`

```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

## Use

```js
import Icon from '@ied/icon'

<Icon>person</Icon>
```

## Types

```js
type Props = {
  children: string,
  className?: string,
  style?: {},
}
```
npm package: @ied/mission
Description: ## Install
Author: Guillou Bastien
Latest version: 1.0.0-beta.0

# Mission

## Install

```js
yarn add @ied/mission
```

Add this to your `index.html`

```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

## Use

```js
import Mission from '@ied/mission'

<Mission
  label="Bookkeeping with Monthly VAT declaration"
  company={{ label: 'DEM-DK-TEST', action: console.log }}
  tag={{ label: 'Bookkeeping', action: console.log }}
  date={new Date()}
  lastUpdate={date}
  completed={{ done: 10, total: 30 }}
  actions={[{ icon: 'file_download', onClick: console.log }]}
/>
// or
<Mission
  label="Payroll with Monthly VAT declaration"
  date={new Date()}
  tag={{ label: 'Payroll', action: console.log }}
  information={{ tasks: 20, monthly: 2, events: 10 }}
  description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos vel repellat quasi veritatis dolore, incidunt provident magnam possimus consequatur excepturi, facilis ducimus vero obcaecati saepe deleniti tempore nostrum mollitia cum."
/>
```

## Types

```js
type Props = {
  label: string,
  company?: { label: string, action: () => void },
  tag?: { label: string, action: () => void },
  description?: string,
  date: string | Date,
  lastUpdate?: string | Date,
  completed?: { done: number, total: number },
  information?: { tasks: number, monthly: number, events: number },
  locale?: 'en' | 'fr' | 'da' | 'de',
  actions?: { icon: string, onClick?: Event => void }[],
}
```
npm package: @ied/nav-card
Description: A component that represents a NavCard
Author: Didier Franc
Latest version: 1.0.1

# NavCard

## Install

```js
yarn add @ied/nav-card
```

## Requirement

If you use icon property, add this in your `index.html`

```html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

## Use

```js
import NavCard from '@ied/nav-card'

<NavCard title="Informations" description="Update your profile" icon="person" />
```

## Types

```js
type Props = {
  title: string,
  description?: string,
  icon?: string,
  notifications?: number,
  notificationsMax?: number,
  style?: {},
  className?: string
}
```
npm package: @ied/onesky
Description: Import/export translations from/to **OneSky** and use them to translate text directly in your app. No dependency, it runs at frontend and backend.
Author: Didier Franc
Latest version: 0.0.13

# onesky

Import/export translations from/to **OneSky** and use them to translate text directly in your app. No dependency, it runs at frontend and backend.

# How to ?

## Use translation algorithm

```js
import OneSky from '@ied/onesky'
import translations from './translations.json'

const i18n = new OneSky(translations, 'fr')

// translate "completed" to french feminine plural
i18n.translate('completed', 'fp')

// translate with variables
i18n.translate('hi ${firstName} ${lastName}', null, {
  firstName: Bruce,
  lastName: Wayne
})
```

## Convert

You can see an overview of the format in this [issue](https://github.com/inextensodigital/onesky/issues/1) or browsing project files.

```
npm i -g @ied/onesky
```

### Import
`en.json`, `fr.json`, `de.json`, `da.json`, `es.json`, `fr_CA.json` → `translations.json`

```
onesky import
```

### Export
`translations.json` → `en.json`, `fr.json`, `de.json`, `da.json`, `es.json`, `fr_CA.json`

```
onesky export
```

### Preview
![Screenshot](screenshot.png)
npm package: @ied/pagination
Description: ## Install
Author: Guillou Bastien
Latest version: 1.0.0-beta.6

# Pagination

## Install

```
yarn add @ied/pagination
```

## Use

```js
import Pagination from '@ied'

<Pagination
  locale="en"
  defaultPage={1}
  max={100}
  rowsPerPage={10}
  onChange={console.log}
/>
```

## Types

```js
type Props = {
  max: number,
  rowsPerPage: number,
  onChange: (pageState: number, rowsPerPage: number) => void,
  range?: Array<number>,
  defaultPage?: number,
  style?: {},
  locale?: string,
  className?: string,
  disableRowsPerPage?: bool,
}
```
npm package: @ied/popover
Description: ## Install
Author: Guillou Bastien
Latest version: 1.0.0-beta.3

# Popover

## Install

```js
yarn add @ied/popover
```

## Use

### Auto position

```js
import Popover from '@ied/popover'

<Popover
  component={<Badge icon="keyboard_arrow_right" />}
>
  Add any component here !
</Popover>
```

### Set position

```js
import Popover from '@ied/popover'

<Popover
  component={<Badge icon="keyboard_arrow_right" />}
  position={{left: "100%" top:'0'}}
>
  Add any component here !
</Popover>
```

## Types

```js
type Props = {
  component: React$Node,
  children: React$Node,
  position?: { left?: string, right?: string, top?: string, bottom?: string },
  style?: {},
  className?: string,
}
```
npm package: @ied/react-enhanced-form
Description: Enhanced form input for your React application
Author: Didier Franc
Latest version: 1.5.1

### [Live](https://inextensodigital.github.io/react-enhanced-form/)
### [Show-room](https://inextensodigital.github.io/react-showroom/#input)

# react-enhanced-form

## Usage

```sh
yarn add react-enhanced-form
```

```jsx
import React from 'react'
import Input from 'react-enhanced-form'

class Main extends React.Component {

  style = {
    default: { width: 300 },
    onFocus: { borderBottom: '1px solid green' },
    onError: { borderBottom: '1px solid red' }
  }

  check = newValue => newValue < 10
  format = value => `${value} $`

  render = () => (
    <form onSubmit={this.handleSubmit}>
      <Input
        type='number'
        value='1'
        onChange={(data, error) => console.log('change', data, error)}
        onMount={(data,error) => console.log('mount', data, error)}
        style={this.style}
        check={this.check}
        format={this.format}
        required
      />
    </form>
 )
}
```
npm package: @ied/react-free-dom
Description: The goal of this library is to render only what is visible to the user, this will superpower app like huge list, image gallery ...
Latest version: 1.0.2

![](.github/react-free-dom.png)

## Purpose

The goal of this library is to render only what is visible to the user, this will superpower app like huge list, image gallery ...

## Example

```js
import React from 'react'
import { Range } from '@ied/react-free-dom'
import { renderPDF } from '@ied/pdf'

function renderer(pages) {
  pages.forEach(({ element, index }) => {
    renderPDF(element, index)
  })
}

export default function App() {
  return (
    <Range
      renderer={renderer}
      itemHeight={500}
      numberOfItems={10}
      renderKey={1234}
    />
  )
}
```
npm package: @ied/react-infinite-scroll
Description: The real react infinite scroll component
Author: Florian Bonniec
Latest version: 5.0.3

### [Live](https://xeonys.github.io/react-showroom/#scroll)

## @ied/react-infinite-scroll

The best react infinite scroll component, on earth 🌍

### Usage

##### Install

```
yarn add @ied/react-infinite-scroll
```

##### How to

```jsx
import React from 'react'
import InfiniteScroll from '@ied/react-infinite-scroll'

const Component = (props) => {

  const infiniteActions = {
    loadMore,
  }

  const infiniteState = {
    hasMore,
    loading,
    error,
  }

  const infiniteCustoms = {
    spinner: <CustomSpinner />,
    reloader: <CustomReloader />,
  }

  const infiniteOptions = {
    threshold: 100,
  }

  const infiniteStyle = {
    height: 300,
  }

  return (
    <InfiniteScroll
      actions={infiniteActions}
      state={infiniteState}
      customs={infiniteCustoms}
      options={infiniteOptions}
      style={infiniteStyle}
    >
     {items.map((item, index) => <Item item={item} key={index} />)}
    </InfiniteScroll>
  )
}
```

##### PropTypes

```jsx
  InfiniteScroll.propTypes = {
    children: React.PropTypes.node,
    style: React.PropTypes.shape({}),
    options: React.PropTypes.shape({
      threshold: React.PropTypes.number,
    }),
    actions: React.PropTypes.shape({
      loadMore: React.PropTypes.func.isRequired,
    }).isRequired,
    state: React.PropTypes.shape({
      hasMore: React.PropTypes.bool.isRequired,
      loading: React.PropTypes.bool.isRequired,
      error: React.PropTypes.bool.isRequired,
    }).isRequired,
    customs: React.PropTypes.shape({
      spinner: React.PropTypes.node,
      reloader: React.PropTypes.node,
    }),
  }
```
npm package: @ied/row
Description: ## Install
Author: Didier Franc
Latest version: 1.0.2

# Row

## Install

```bash
yarn add @ied/row
```

If you use icon property, add this to your `index.html`

```html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

## Use

```js
import Row from '@ied/row'
```

1 - Row with icon + description + inline + hoverable

```js
<Row
  icon="business"
  label="Wednesday"
  description="Filenumber"
  inline
  hoverable
/>
```

2 - Row with icon + description + hoverable

```js
<Row icon="person" label="Mr World" description="Filenumber" hoverable />
```

3 - Row with icon + hoverable

```js
<Row icon="date_range" label="Czernobog" hoverable />
```

4 - Row with description + hoverable

```js
<Row label="Media" description="media@gmail.com" hoverable />
```

5 - Row with description + inline + hoverable

```js
<Row label="Media" description="media@gmail.com" hoverable inline />
```

6 - Row with badge(icon, small) + description + hoverable

```js
<Row
  label="Shadow Moon"
  badge={{ icon: 'people', small: true }}
  description="shadowmoon@gmail.com"
  hoverable
/>
```

7 - Row with badge(icon) + description + hoverable

```js
<Row
  label="Shadow Moon"
  badge={{ icon: 'people' }}
  description="shadowmoon@gmail.com"
  hoverable
/>
```

8 - Row with badge(fullName) + description + hoverable

```js
<Row
  label="Clark Kent"
  badge={{ firstName: 'Clark', lastName: 'Kent' }}
  description="shadowmoon@gmail.com"
  hoverable
/>
```

9 - Row with badge(fullName, small) + description + hoverable

```js
<Row
  label="Clark Kent"
  badge={{ firstName: 'Clark', lastName: 'Kent', small: true }}
  description="lowkey@gmail.com"
  hoverable
  inline
/>
```

## Types

```js
type Props = {
  icon?: string,
  label: string,
  description?: string,
  badge?: {
    lastName?: string,
    firstName?: string,
    icon?: string,
    small?: boolean,
  },
  style?: {},
  className?: string,
  inline?: boolean,
  hoverable?: boolean,
}
```
npm package: @ied/search-bar
Description: ## Install
Author: Didier Franc
Latest version: 1.0.1

# Badge

## Install

```js
yarn add @ied/search-bar
```

## Use

```js
import SearchBar from '@ied/search-bar'

<SearchBar onChange={() => {}} autoFocus placeholder="Search..." />
```

## Types

```js
type Props = {
  placeholder?: string,
  onChange: (value: string) => void,
  autoFocus?: boolean,
  dark?: boolean,
  style?: {},
  className?: string,
}
```
npm package: @ied/tag
Description: ## Install
Author: Didier Franc
Latest version: 1.0.0-beta.2

# Tag

## Install

```
yarn add @ied/tag
```

## Use

### Simple

```js
import Tag from '@ied/tag'

<Tag label="Bookkeeping" />
```

### With dot

```js
import Tag from '@ied/tag'

<Tag label="Bookkeeping" withDot />
```

## Types

```js
type Props = {
  label: string,
  style?: {},
  onClick?: MouseEvent => void,
  className?: string,
  withDot?: boolean,
}
```
npm package: @ied/thumb
Description: ## Install
Author: Bastien Guillou
Latest version: 1.0.0-beta.2

# Thumb

## Install

```
yarn add '@ied/thumb'
```

## Use

```js
import Thumb from '@ied/thumb'

<Thumb title="Clients" value="20" label="Due tasks" color="green" />
```

## Types

```js
type TypeThumb = {
  title: string,
  value: string,
  label: string,
  style?: {},
  className?: string,
  color?: string,
}
```
npm package: @ied/tree-select
Description: ## Install
Author: Didier Franc
Latest version: 1.0.2

# Tree Select

## Install

```js
yarn add @ied/tree-select
```

## Use

```json
[
  {
    "id": "9473aed3-94e2-4618-895a-f54df27b8a8d",
    "name": "Cat1",
    "indent": 0
  },
  {
    "id": "db763d1b-d87e-46df-b706-023965f6e4fa",
    "name": "Cat1Sub1",
    "indent": 1
  },
  {
    "id": "8909ce93-1a50-40e5-a783-7e0c4ed02639",
    "name": "Cat1Sub1Item1",
    "indent": 2
  }
]
```

_Dataset order is important_

```js
<Select data={data} onChange={console.log} />
```