open-index/open-npm huggingface dataset:
npm package: @sis-cc/dotstatsuite-ui-components
Description: Set of UI components based on React.
Author: OECD
Latest version: 2.0.0

# dotstatsuite-ui-components

![splash](./splash.jpg?raw=true "splash")

UI-Components is a lib of React components.  The goal is to collect pure visual UI components, isolated from business logic driving them in applications.
Components from this lib are currently used in [data-explorer](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-data-explorer) and [data-viewer](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-data-viewer) from the .Stat Suite.
If components from this library are still used and maintained, they are deprecated regarding their dependencies, and are planned to be replaced by components from [visions](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-visions) library.


## setup (dev)

1. run `npm i`
1. run `npm start` to dev with hot reloading on http://localhost:3001

## usage

1. run `npm i -S @sis-cc/dotstatsuite-ui-components`
1. `import { MyComponent } from '@sis-cc/dotstatsuite-ui-components`;

## folder structure

```
.
├── src                                   # source code
│   ├── components                        # components
│   │   ├── SomeComponent                 # component specific folder
│   │   │   ├── index.js                  # component implementation
│   │   │   ├── some-component.test.js    # structural test (jest snapshot)
│   │   │   ├── some-component.story.js   # story (storybook)
│   │   ├── index.js                      # components module interface
│   ├── logic                             # ui logic
│   │   ├── index.js                      # ui logic module interface
│   ├── index.js                          # visions module interface (and entry point)
```

## dependencies

In order to rationalize the dependencies of the components, 
authorized dependencies should be discussed:
- [blueprintjs](http://blueprintjs.com/) UI lib to speed-up design
- [glamorous](https://github.com/paypal/glamorous) encapsulate style within component (maintainability)
- [classnames](https://github.com/JedWatson/classnames) utils to deal with css classes
- [recompose](https://github.com/acdlite/recompose) FP lib to implement HOC logic
- [react-intl](https://github.com/yahoo/react-intl) i18n supports
- [ramda](http://ramdajs.com) FP utility lib

## rules

- a component should have a dedicated folder
- a component should be tested (expected coverage is over 80%)
  - run `npm test` to test all components
  - run `npm run test:u` to update snapshots
  - run `npm test -p <string|regexp>` to scope tests
- a component should have a complete story
  - all usecases should be covered
  - all props should be configurable through knobs
- code should pass lint configuration
  - run `npm run lint:fix` to automatically fix common issues
  - run `npm run lint` to check code quality
- a component should have a deep definition of its relevant propTypes
npm package: @sis-cc/dotstatsuite-ui-footer
Description: A footer view component for Table and Charts.
Author: OECD
Latest version: 3.5.0
Deprecated: Package no longer supported. Use at your own risk. Replaced by DataFooter in @sis-cc/dotstatsuite-visions@3.7.x

# sis-footer

A footer view component for Table and Charts.

## setup

- install: `npm i sis-footer` (with the nexus configuration)
- live: `./node_modules/web-component-env/wce start`

## Usage

To know how to use the component, have a look to `app.js`.

Why?
- because `app.js` is used to show component features and should cover basic and complex needs
- because `app.js` will be updated if the code is updated

## API

To know the API see `PropTypes`.

Why?
- because `PropTypes` will be updated since it's part of the code
- because `PropTypes` are always formatted in the same way
- because `PropTypes` also increase maintainability
npm package: @sis-cc/dotstatsuite-ui-header
Description: A header view component for Table and Charts.
Author: OECD
Latest version: 2.1.2

# sis-header

A header view component for Table and Charts.

## setup

- install: `npm i sis-header` (with the nexus configuration)
- live: `./node_modules/web-component-env/wce start`

## usage

You can pass other components as children to be rendered inside this component
```javascript
import Header from 'sis-header';
import Share from 'oecd-share';

<div>
  <Header
    subtitle={subtitle}
    title={title}
    toggleInfoRequest={null}
    uprs={uprs}
  >
    <Share {...shareData} />
  </Header>
</div>
```

## api

#### title `<string>`
```javascript
'Key Short-Term Economic Indicators'
```

#### subtitle `<string>`
```javascript
'Measure: Growth previous period - Frequency: Annual - Time: 2015'
```

#### uprs `<object>` subset of data attributes
```javascript
{
  U: {
    "id": "UNIT",
    "name": "Unit",
    "values": [
      {
        "id": "PC",
        "name": "Percentage"
      }
    ],
    role": "UNIT_MEASURE"
  },
  P: { ... },
  R: { ... }
}
```
note: if any of this attributes has more than one value, only the first one will be considered

#### toggleInfoRequest `<function>`
Optional parameter, if present, component will render an information icon next to the title, who will
call this function on click.
npm package: @sis-cc/dotstatsuite-visions
Description: Library of visual components
Author: OECD
Latest version: 12.56.0

# dotstatsuite-visions

Visions is a lib of React components.  
The goal is to collect pure visual UI components, decoupled from business logic.

## setup (dev)

1.  run `yarn`
2.  run `yarn build` to build demo website
3.  run `yarn start` to dev with hot reloading on http://localhost:3000

Others commands are describe in `package.json` below `scripts`.

## usage

1.  run `yarn add @sis-cc/dotstatsuite-ui-components`
1.  `import { MyComponent } from '@sis-cc/dotstatsuite-ui-components`;

## folder structure

```
.
├── demo/src
│   ├── components                    # demo website interface
│   ├── wrappers                      # component specific folder
│   │   ├── SomeComponent.js          # story for to view the component
├── src                               # source code
│   components                        # components
│   ├── SomeComponent                 # component specific folder
│   │   ├── index.js                  # component documentation
│   │   ├── SomeComponent.js          # component definition
│   ├── index.js                      # library interface
│   index.js                          # visions module interface (and entry point)
├── tests                             # tests
|   ├── SomeComponent.test.js         # test implementation of component
```
npm package: @sis-ter/vue3-tools
Description: A library for ready to use vue3 components
Author: Pietro Monsorno
Latest version: 1.2.4

# Vue3 tools

A collection of ready-to-use VueJS 3 components

# List

- [Audioplayer](./docs/Audioplayer.md)
- [QrcodeReader](./docs/QrcodeReader.md)
- [Login](./docs/Login.md)
- [PasswordField](./docs/PasswordField.md)
- [Popup](./docs/Popup.md)
- [RecuperoPassword](./docs/RecuperoPassword.md)
- [ResetPassword](./docs/ResetPassword.md)
- [SubmitButton](./docs/SubmitButton.md)
- [TextField](./docs/TextField.md)

# Getting started

Installation
```
npm install @sis-ter/vue3-tools
```

## Usage

We recomend using this library with a `@vue/cli` project and single file components (SFC -> `.vue`)

It is also possible to include the `common.js` version, `.umd.js` or `.umd.min.js` all of which can be found into the [dist folder](./dist)

## Reading the docs

In the folder `docs` you may find all the documentation regarding every tool of the library.

## @vue/cli

[install package](#Getting%20started)

There are 2 ways to import the plugin:

1. import directly into `.vue` file
1. register components in `src/main.js`

### Case 1 --> direct import

```js
import Vue3Tools from 'vue3-tools';

export default {
  components: { // register one of the components
    'audio-player': Vue3Tools.ToolAudioplayer
  }
};
```

### Case 2 --> register component(s)

```js
// src/main.js

import { install } from "../../src/index.js";

// leave empty to register all the components
const options = 
    [{
      name: "audio-player",
      as: "tool-audio-player",
    },
    "login"]

createApp(App)
  .use(store)
  .use(router)
  .use(install,options)
  .mount("#app");
```

### Use component

```html
<template>

  <audio-player
    :source="[{ url: 'source-url', type: 'audio/mp3' }]"
    type="audio/mp3"
  />

  <!-- DONE, as simple as that! -->

</template>
```

# Support

For any question or issue please write an email to [Pietro Monsorno](<p.monsorno@sis-ter>) or open a GitLab issue onto the library's repository

# Roadmap

// TODO

# Contributing

You're more than welcome to help us out! Reach out to the maintainer to be granted access.

# Authors and acknowledgment

This library is licensed under the MIT license, be free to use it as you like.

## Maintainers

Pietro Monsorno <p.monsorno@sis-ter.it>

## Contributors

```plaintext
404
```

# License

[MIT Licence](./LICENSE)

# Project status

// TODO