open-index/open-npm huggingface dataset:
npm package: @pcd/pcd-collection
Description: This package contains an implementation of a data structure that contains all the PCDs and all the PCD packages, and enables convenient retrieval and serialization of these PCDs.
Latest version: 0.15.1

# `@pcd/pcd-collection`

This package contains an implementation of a data structure that contains all the PCDs and all the PCD packages, and enables convenient retrieval and serialization of these PCDs.
npm package: @pcd/pcd-types
Description: Perhaps the most important package of all the `@pcd/` family of packages. This package carefully defines what a `PCD` and `PCDPackage` are via typescript interfaces.
Latest version: 0.15.0

# `@pcd/pcd-types`

Perhaps the most important package of all the `@pcd/` family of packages. This package carefully defines what a `PCD` and `PCDPackage` are via typescript interfaces.
npm package: @pcdummy/qx
Description: pcdummy's dev version of qooxdoo
Latest version: 5.0.4

# pcdummy's qooxdoo

This is a **unofficial version** of qooxdoo. I made it to test NPM integration
with [grunt-qx](https://www.npmjs.com/package/grunt-qx).

### License

MIT

### Authors

- The qooxdoo developers
- René Jochum <rene@jochums.at>
npm package: @pces-vn/r-orgchart
Description: R-orgchart is a simple library for displaying and creating orgcharts in React.
Author: Kristina Sičaja
Latest version: 0.0.9

# R-orgchart

R-orgchart is simple library for displaying and creating orgcharts in React.


### Installation:

```sh
$ npm install -s r-orgchart
```

### Use:
```javascript
import Rorgchart from 'r-orgchart';
...
<Rorgchart />
```

### Props:
| Prop | Default | Description
| ------ | ------ | ------
| data |  array with root object: *[{id: 1, title: 'Root', ParentId: null}]* | Array of objects you wish to display. Each object must contain id, title and ParentId.
| readonly | false | By default, orgchart can be edited and nodes deleted. If you send this props, it will be readonly.
| disableRootEdit | false | Disable edit of root node.
| addNewChild | default function | There is default function for adding new node, but you can send your own if you wish - argument: parentId.
| deleteNode | default function | There is default function for deleting node, but you can send your own if you wish - argument: node.
| editNode | default function | There is default function for editing node, but you can send your own if you wish - argument: node (edited).
| animation | true | Turn on/off animation (visible when there is only a root node).
| nodeStyle | - | Custom style for node box.
| nodeClassName | - | CSS className for node box.
| btnsStyle | - | Custom style for buttons box.
| btnsClassName | - | CSS className for buttons box.
| lineColor | - | Custom color for lines connecting nodes.


### Exporting data:
To get back data array with all changes, you can call function exportData using a ref:

```javascript
    ...
    this.refs.rorgchart.exportData();
    ...
    <Rorgchart ref="rorgchart" />
    ...
```
npm package: @pcgbros/header-bar
Description: Basic header bar with RWD.
Author: Pi-Yin Hsiao
Latest version: 2.5.6

# header-bar
Basic header bar with RWD.

### Installation
```bash
npm install --save-dev header-bar
```
### Usage
#### Javascript
```js
import React from 'react';
import HeaderBar from 'header-bar';

class App extends React.Component {
    return <div className='app'>
        <HeaderBar
          hamburger={{ src:'/img/hamburger.svg', title:'Menu' }}
        >
            <a href='//localhost' data-logo={true}><img src='/img/logo.svg' title='logo'/></a>
            <a href='//nav.link.href' data-nav={true} data-color='rgb(64, 124, 156)' data-match='nav.link.href'>nav-link-1</a>
            <a href='//localhost' data-nav={true} data-color='goldenrod' data-match='local(.*)'>nav-link-2</a>
            <a href='//facebook.com' data-subnav={true} data-color='rgb(62, 86, 155)'><img src='/img/facebook.svg'/></a>
            <a href='//sub.nav.link' data-subnav={true} data-color='rgb(229, 26, 0)'>sub-nav-link</a>
            <div data-submenu_button={true} data-submenu_key='login'>
                <img src='/img/facebook.svg' style={{height: '1.8em', borderRadius: '0.9em'}}/>
                <span title='login'>設定</span>
            </div>
            <div data-submenu_button={true} data-submenu_key='logpeople'><span title='logpeople'>紀錄</span></div>
            <div data-submenu_item={true}  data-submenu_key='login' data-submenu_position='header'>
                <div style={{color: 'rgb(24, 155, 202)'}}>VIP會員</div>
            </div>
            <div data-submenu_item={true}  data-submenu_key='login' data-submenu_position='body'>
                <a href='/user-info' title='User Info'>修改個人資訊</a>
            </div>
            <div data-submenu_item={true}  data-submenu_key='login' data-submenu_position='body'>
                <a href='/change-password' title='User Info'>更改密碼</a>
            </div>
            <div data-submenu_item={true}  data-submenu_key='login' data-submenu_position='footer'>
                <a href='/logout' title='Logout'>登出</a>
            </div>
            <div data-submenu_item={true} data-submenu_key='logpeople'>
                <a href='/pay-history' title='Pay History'>購買紀錄</a>
            </div>
        </HeaderBar>
    </div>;
}
```
#### LESS
```less
@import (inline) '../node_modules/header-bar/lib/css/index.css';
```

### Demo
```bash
cd node_module/header-bar/demo
npm install
npm start
```
Open demo page on *http://localhost:3000*

### privacy agree panel
* Use `privacyagree` and `token_id` in cookie to determine whether to show privacy panel.
* If token_id is not found in cookie, the panel will always be showed when refresh the page.
* This panel will not be showed, when url is `*/privacy` (ex: www.pbplus.me/privacy, tw.pbplus.me/privacy)
npm package: @pcgbros/pbplus-member-sdk
Description: API sdk of PBPlus member plugin.
Author: Pi-Yin Hsiao
Latest version: 2.14.9

# pbplus-member-sdk
API sdk of PBPlus member plugin.

## Behaviors ##
* Update `getState().pbplusMemberCenter.userUuid` by url (token_id) or cookie.
* Dock to pbplus `auth`, `member` and `memberCenter` api, with url passed by store.

## You can ##
* Display member center by `dispatch(PbplusMemberCenter.Actions.display())`.
* Update active tab by `dispatch(PbplusMemberCenter.Actions.updateActiveTab('TAB_NAME'))`.
  - Possible `TAB_NAME`s are `notice-center`, `calendar`, `point-counter`, `buying-logs` and `personal-data`.
  - See [MemberCenterComonent](https://bitbucket.org/pbplus/pbplus-member-ui/src/7598548195277d6a740f395e19b1e48a501f4bb9/src/js/PbplusMemberCenter.react.js?at=master&fileviewer=file-view-default) for furtuer information.
* Check auth state by `dispatch(PbplusMemberCenter.Actions.checkAuthState({ clientId }))`.
* Update user uuid in cookie and store by `dispatch(PbplusMemberCenter.Actions.updateUserUUID({ uuid }))`.
* Renew user uuid in cookie and store randomly by `dispatch(PbplusMemberCenter.Actions.renewUserUUID())`.

## These values in redux store will be read. ##
```js
const store = createStore(
    reducer,
    {   
        pbplusMemberCenter: {
            baseUrl: {
                auth: process.env.AUTH_BASE_URL,
                member: process.env.MEMBER_BASE_URL,
                memberCenter: process.env.MEMBER_CENTER_BASE_URL,
            }   
        }  
    }
);
```

## Start demo server ##
```sh
cd demo/
npm install
npm start
```

## Publish package ##
```sh
cd /pbplus-member-sdk
npm version
npm publish
```

## Before bundle ##
* Check `react`, `react-redux`, `react-dom` have been installed in your project.
This package is not bundled with above packages.
npm package: @pcgbros/pbplus-member-ui
Description: User interface of PBPlus member plugin.
Author: Pi-Yin Hsiao
Latest version: 2.18.5

# pbplus-member-ui
User interface of PBPlus member plugin.

* There is only *view* part in this repo, which means no `container` or `reducer`.

## Start demo server ##
```sh
cd demo/
npm install
npm start
```
npm package: @pcgnpm/bar-chart
Description: Display bar chart
Author: PcgVersion
Latest version: 1.0.0

<!-- @format -->

#bar-chart

## Usage

## Simple bar chart with default currency format

<BarChart
data={[
{
y: 445744,
x: 1,
xLabel: 'Previous Week',
xSubLabel: 'MAY 1 - MAY 7',
},
{
y: 460121,
x: 2,
xLabel: 'Current Week',
xSubLabel: 'MAY 8 - MAY 14',
},
]}
width={360}
height={360}
trendColor="#CD6263"
labelFormatType="currency"
labelFormatOptions={{
    symbol: '$',
    thousand: ',',
    precision: 0,
    format: '%s%v',
  }}
/>

## Simple bar chart with default number format

<BarChart
data={[
{
y: 445744,
x: 1,
xLabel: 'Previous Week',
xSubLabel: 'MAY 1 - MAY 7',
},
{
y: 460121,
x: 2,
xLabel: 'Current Week',
xSubLabel: 'MAY 8 - MAY 14',
},
]}
width={360}
height={360}
trendColor="#CD6263"
labelFormatType="number"
labelFormatOptions={{
    thousand: ',',
    precision: 0,
  }}
/>
npm package: @pcgnpm/display-card
Description: Display card with the icon along with the content
Author: PcgVersion
Latest version: 1.1.0

<!-- @format -->

#display-card

## Usage

<DisplyCard
component={() => {
return (
<>
<View style={{justifyContent: 'center', alignSelf: 'center'}}>
<Text></Text>
<Text>Something asfdsafasfdsfdsa</Text>
<Text>Something asfdsafasfdsfdsa 3 4</Text>
</View>
<BarChart
data={[
{
y: 445744,
x: 1,
xLabel: 'Previous Week',
xSubLabel: 'MAY 1 - MAY 7',
},
{
y: 460121,
x: 2,
xLabel: 'Current Week',
xSubLabel: 'MAY 8 - MAY 14',
},
]}
width={300}
height={200}
trendColor="#CD6263"
labelFormatType="number"
labelFormatOptions={{
      thousand: ',',
      precision: 0,
    }}
/>
</>
);
}}
iconComponent={() => {
return (
<FontAwesomeIcon
name="user"
size={21}
color="#CD6263"
style={{alignSelf: 'center'}}></FontAwesomeIcon>
);
}}
color="#CD6263"
/>
npm package: @pcgnpm/icon-display
Description: Display any number along with lable inside icon
Author: PcgVersion
Latest version: 1.0.0

<!-- @format -->

#icon-display

## Usage

Default icon
<IconDisplay
metricValue={5454555}
metricLabel="Out-of-Stocks"
metricType="currency"
iconComponent={() => {
return (
<FontAwesome5Icon
name="box"
size={30}
color="#fff"
style={{ opacity: 0.5, paddingTop: 14, position: "absolute" }}
/>
);
}}
/>

Store level icon
<IconDisplay
metricValue={5454555}
metricLabel="Out-of-Stocks"
metricType="currency"
iconComponent={() => {
return (
<FontAwesomeIcon
name="dollar"
size={30}
color="#fff"
style={{ opacity: 0.5, paddingTop: 14, position: "absolute" }}
/>
);
}}
/>
npm package: @pcgnpm/pie-chart
Description: Display pie chart
Author: PcgVersion
Latest version: 1.0.0

<!-- @format -->

#pie-chart

## Usage

## Simple pie chart with default currency format

<PieChart
label="Mark's"
data={[
{x: 1, y: 129069, dataLabel: 'Rick Murphy'},
{x: 2, y: 51596, dataLabel: 'Kathy Kimbers'},
{x: 3, y: 7961, dataLabel: 'Twaine Wayne'},
{x: 4, y: 5114, dataLabel: 'Zachary Newbs'},
{x: 5, y: 4806, dataLabel: 'Steve Smith'},
{x: 6, y: 4468, dataLabel: 'Peter Carillo'},
{x: 7, y: 1109, dataLabel: 'Mackenzie'},
]}
cutOff={3}
showLegend={true}
size={340}
supressRest={true}
labelFormatType="currency"
labelFormatOptions={{
    symbol: '$',
    thousand: ',',
    precision: 0,
    format: '%s%v',
  }}
/>

## Simple pie chart with default number format

<PieChart
label="Mark's"
data={[
{x: 1, y: 129069, dataLabel: 'Rick Murphy'},
{x: 2, y: 51596, dataLabel: 'Kathy Kimbers'},
{x: 3, y: 7961, dataLabel: 'Twaine Wayne'},
{x: 4, y: 5114, dataLabel: 'Zachary Newbs'},
{x: 5, y: 4806, dataLabel: 'Steve Smith'},
{x: 6, y: 4468, dataLabel: 'Peter Carillo'},
{x: 7, y: 1109, dataLabel: 'Mackenzie'},
]}
cutOff={3}
showLegend={true}
size={340}
supressRest={true}
labelFormatType="number"
labelFormatOptions={{
    thousand: ',',
    precision: 0,
  }}
/>