open-index/open-npm huggingface dataset:
npm package: @pong420/redux-crud
Description: [Demo - Todo Task](https://stackblitz.com/edit/react-redux-crud-todo)
Author: @Pong420
Latest version: 1.4.7

## Redux CRUD

[Demo - Todo Task](https://stackblitz.com/edit/react-redux-crud-todo)

[Demo - Pagination](https://stackblitz.com/edit/react-redux-crud-pagination)

[Demo - with React.useReducer](https://stackblitz.com/edit/react-redux-crud-todo-nyrfms?file=useCRUDReducer.ts)

## Installation

```
yarn add @pong420/redux-crud
```

## Basic Example

`/typings.ts`

```ts
export interface Schema$Todo {
  uniqueID: string;
  task: string;
  completed: boolean;
}
```

`/store/actions.ts`

```ts
import { Schema$Todo } from '../typings';
import { getCRUDActionCreator, UnionCRUDActions } from '@pong420/redux-crud';

// The first value in the array specified, the second value can be any string.
// You can define the action you need only
export const [todoActions, TodoActionTypes] = createCRUDActions<
  Schema$Todo,
  'id'
>()({
  // you could just add the actions that you needs
  createTodo: ['CREATE', 'CREATE_TODO'],
  deleteTodo: ['DELETE', 'DELETE_TODO'],
  updateTodo: ['UPDATE', 'UPDATE_TODO'],
  paginateTodo: ['PAGINATE', 'PAGINATE_TODO'],
  setPageTodo: ['SET_PAGE', 'SET_PAGE_TODO'],
  resetTodo: ['RESET', 'RESET_TODO']
});
```

`/store/reducer.ts`

```ts
import { combineReducers, Reducer, AnyAction } from 'redux';
import { createCRUDReducer } from '@pong420/redux-crud';
import { Schema$Todo } from '../typings';

const [todoInitialState, todoReducer] = createCRUDReducer<Schema$Todo>({
  key: 'uniqueID',
  actions: TodoActionTypes
});

const rootReducer = () =>
  combineReducers({
    todo: todoReducer
  });

export default rootReducer;

export type RootState = ReturnType<ReturnType<typeof rootReducer>>;

```

## Options

You could add initial state here

```ts
const pageSize = 100;
const [state, reducer] = createCRUDReducer({
  // ...other otpions,
  pageNo: 1,
  pageSize,
  ids: new Arrary(pageSize).fill(null),
  list: new Arrary(pageSize).fill({})
});
```

#### prefill

By default, `list` and `ids` in `state` will prefill with `{}` and `null`. You could disable this feature by seting prefill to false

```ts
const [state, reducer] = createCRUDReducer({
  // ...other otpions
  prefill: false
});
```

#### onLocationChanged

If you are using `connected-react-router`. `pageNo` and `params` will initialize from URL search params. And `state` will reset when location changed

[Examples - Handle pageNo or filter on URL search params](src/examples/URLParamsParams)

To disable this feature, you can

```ts
const [state, reducer] = createCRUDReducer({
  // ...other otpions
  onLocationChanged: null
});
```

For **hash router**, you should assgin pathname yourself. Otherwise the `pageNo` and `params` will not initialize from search params

```ts
const [state, reducer] = createCRUDReducer({
  // ...other otpions
  pathname: window.location.hash.slice(1).replace(/\?.*/, '')
});
```

## TODO

- [ ] Add Docs
- [ ] Add Unit Test
npm package: @pongjs/router
Description: Simple router for Cloudflare Workers
Author: Luke Shay
Latest version: 0.0.6

# Cloudflare Worker Router

A simple router for Cloudflare workers.

```ts
import { router } from "@pongjs/router";

export interface Env {
	DB: D1Database;
}

router.add("GET", "/hello/:name", async (request: Request, env: Env) => {
	return Response.json({
		message: `Hello, ${name}`,
	});
});

export default router;
```

See [path-to-regex](https://www.npmjs.com/package/path-to-regex) for how the paths work.
npm package: @pongo-ui/react-accordion
Description: A component used to show and hide nested information.
Latest version: 0.0.4

# Accordion

The Accordion component is used to show and hide nested information.

## Use

1. Install the @pongo-ui/react-accordion component.

Using NPM

```
npm install @pongo-ui/react-accordion
```

Using Yarn

```
yarn add @pongo-ui/react-accordion
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Accordion component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Accordion, ... } from '@pongo-ui/react-accordion'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
        <Accordion >
        ...
        </Accordion>
    <Provider>
  )
}
```

## API

To learn more about the Accordion API take a look at the [Accordion Interface](src/components/Accordion/Accordion.types.ts) file.
npm package: @pongo-ui/react-avatar
Description: An avatar component used to display a users icon.
Latest version: 0.0.11

# Avatar

The Avatar provides a recognizable icon for a user.

## Use

1. Install the @pongo-ui/react-avatar component.

Using NPM

```
npm install @pongo-ui/react-avatar
```

Using Yarn

```
yarn add @pongo-ui/react-avatar
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Avatar component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Avatar } from '@pongo-ui/react-avatar'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
        <Avatar name="Your Name"/>
    <Provider>
  )
}
```

## API

To learn more about the Avatar API take a look at the [Avatar Interface](src/components/Avatar/Avatar.types.ts) file.
npm package: @pongo-ui/react-button
Description: A Button control that allows users to make an action through a press.
Latest version: 1.1.29

# Button

The Button controls allow users to make an action through a press.

## Use

1. Install the @pongo-ui/react-button component.

Using NPM

```
npm install @pongo-ui/react-button
```

Using Yarn

```
yarn add @pongo-ui/react-button
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Button component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Button } from '@pongo-ui/react-button'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Button>Hello World</Button>
    <Provider>
  )
}
```

## API

To learn more about the Button API take a look at the [Button Interface](src/components/Button/Button.types.ts) file.
npm package: @pongo-ui/react-card
Description: The Card component displays content and presents actions to the user.
Latest version: 0.0.21

# Card

The Card component displays content and presents actions to the user.

## Use

1. Install the @pongo-ui/react-card component.

Using NPM

```
npm install @pongo-ui/react-card
```

Using Yarn

```
yarn add @pongo-ui/react-card
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Card component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Card } from '@pongo-ui/react-card'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Card>Hello World</Card>
    <Provider>
  )
}
```

## API

To learn more about the Card API take a look at the [Card Interface](src/components/Card/Card.types.ts) file.
npm package: @pongo-ui/react-carousel
Description: An carousel component used to display a collection of images.
Latest version: 0.0.4

# Carousel

The Carousel component is used to display a collection of images.

## Use

1. Install the @pongo-ui/react-carousel component.

Using NPM

```
npm install @pongo-ui/react-carousel
```

Using Yarn

```
yarn add @pongo-ui/react-carousel
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Carousel component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Carousel } from '@pongo-ui/react-carousel'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
        <Carousel>
          <img src='...'/>
        </Carousel>
    <Provider>
  )
}
```

## API

To learn more about the Carousel API take a look at the [Carousel Interface](src/components/Carousel/Carousel.types.ts) file.
npm package: @pongo-ui/react-checkbox
Description: The Checkbox allows users to toggle a value between an on and off state.
Latest version: 0.0.10

# Components

This the entire suite package of Pongo components.

## Use

1. Install the @pongo-ui/react-components package.

Using NPM

```
npm install @pongo-ui/react-components
```

Using Yarn

```
yarn add @pongo-ui/react-components
```

2. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-components'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate your components.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme, Button } from '@pongo-ui/react-components'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Button>Hello World</Button>
    <Provider>
  )
}
```
npm package: @pongo-ui/react-components
Description: Suite package for Pongo components.
Latest version: 0.0.16

# Components

This the entire suite package of Pongo components.

## Use

1. Install the @pongo-ui/react-components package.

Using NPM

```
npm install @pongo-ui/react-components
```

Using Yarn

```
yarn add @pongo-ui/react-components
```

2. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-components'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate your components.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme, Button } from '@pongo-ui/react-components'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Button>Hello World</Button>
    <Provider>
  )
}
```
npm package: @pongo-ui/react-dialog
Description: A Dialog component that presents a surface that users can either complete tasks or obtain information from.
Latest version: 0.0.4

# Dialog

The Dialog component presents a surface that users can either complete tasks or obtain information from.

## Use

1. Install the @pongo-ui/react-dialog component.

Using NPM

```
npm install @pongo-ui/react-dialog
```

Using Yarn

```
yarn add @pongo-ui/react-dialog
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Dialog component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { web1ghtTheme } from '@pongo-ui/react-theme'
import { Dialog } from '@pongo-ui/react-dialog'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Dialog>...</Dialog>
    <Provider>
  )
}
```

## API

To learn more about the Dialog API take a look at the [Dialog Interface](src/components/Dialog/Dialog.types.ts) file.
npm package: @pongo-ui/react-divider
Description: The divider helps separate content in a site.
Latest version: 0.0.14

# Divider

The Divider helps separate content in a site.

## Use

1. Install the @pongo-ui/react-divider component.

Using NPM

```
npm install @pongo-ui/react-divider
```

Using Yarn

```
yarn add @pongo-ui/react-divider
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Button component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Divider } from '@pongo-ui/react-divider'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Divider>Hello World</Divider>
    <Provider>
  )
}
```

## API

To learn more about the Divider API take a look at the [Divider Interface](src/components/Divider/Divider.types.ts) file.
npm package: @pongo-ui/react-form
Description: A Form control that helps easily set up an accessible form.
Latest version: 0.0.1

# Button

The Button controls allow users to make an action through a press.

## Use

1. Install the @pongo-ui/react-button component.

Using NPM

```
npm install @pongo-ui/react-button
```

Using Yarn

```
yarn add @pongo-ui/react-button
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Button component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Button } from '@pongo-ui/react-button'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Button>Hello World</Button>
    <Provider>
  )
}
```

## API

To learn more about the Button API take a look at the [Button Interface](src/components/Button/Button.types.ts) file.
npm package: @pongo-ui/react-icon
Description: A collection of Icons to provide user's clarity on an action.
Latest version: 0.1.13

# Icon

Icons help provide user's clarity on an action. They are especially helpful in Buttons, Menus, and other controls to further convey a text based definition.

## Use

1. Install the @pongo-ui/react-icon component.

Using NPM

```
npm install @pongo-ui/react-icon
```

Using Yarn

```
yarn add @pongo-ui/react-icon
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate a Icon component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Icon } from '@pongo-ui/react-icon'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Icon />
    <Provider>
  )
}
```

## API

To learn more about the Icon API take a look at the [Icon Interface](src/components/Icon/Icon.types.ts) file.
npm package: @pongo-ui/react-input
Description: A set of components that enable users to input and edit given values.
Latest version: 0.2.9

# Input

A set of components that enable users to input and edit given values.

## Use

1. Install the @pongo-ui/react-input component.

Using NPM

```
npm install @pongo-ui/react-input
```

Using Yarn

```
yarn add @pongo-ui/react-input
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Input component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Input } from '@pongo-ui/react-input'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Input />
    <Provider>
  )
}
```

## API

To learn more about the Input API take a look at the [Input Interface](src/components/Input/Input.types.ts) file.
npm package: @pongo-ui/react-label
Description: A Label that provides a title to a form component.
Latest version: 0.0.13

# Label

The Label component provides a title to a form component.

## Use

1. Install the @pongo-ui/react-label component.

Using NPM

```
npm install @pongo-ui/react-label
```

Using Yarn

```
yarn add @pongo-ui/react-label
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Label component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Label } from '@pongo-ui/react-label'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Label htmlFor="text">This is a Label</Label>
      <input id="text" />
    <Provider>
  )
}
```

## API

The Label API extends off of FluentUI.
npm package: @pongo-ui/react-layout
Description: The layout package provides components to help position content in your site.
Latest version: 0.0.4

# Layout

The Layout component help your develop a standardized application layout.

## Use

1. Install the @pongo-ui/react-layout package.

Using NPM

```
npm install @pongo-ui/react-layout
```

Using Yarn

```
yarn add @pongo-ui/react-layout
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Layout components.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Container, Stack } from '@pongo-ui/react-layout'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Container>
        <Stack>
        ...
        </Stack>
      </Container>
    <Provider>
  )
}
```

## API

To learn more about the Layout API take a look at the [Container](src/components/Container/Container.types.ts) and [Stack Interface](src/components/Stack/Stack.types.ts) files.
npm package: @pongo-ui/react-link
Description: A customizable link that helps with site navigation.
Latest version: 0.1.14

# Link

The Link component allows you to create a standardized anchor elements

## Use

1. Install the @pongo-ui/react-link component.

Using NPM

```
npm install @pongo-ui/react-link
```

Using Yarn

```
yarn add @pongo-ui/react-link
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Link component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Link } from '@pongo-ui/react-link'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Link>Hello World</Link>
    <Provider>
  )
}
```

## API

The Link API extends off of the FluentUI Link.
npm package: @pongo-ui/react-menu
Description: A collection of menu related components used to display information over a given element.
Latest version: 0.1.10

# Menu

The Menu related components allow you to display information over a given element.

## Use

1. Install the @pongo-ui/react-menu component.

Using NPM

```
npm install @pongo-ui/react-menu
```

Using Yarn

```
yarn add @pongo-ui/react-menu
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Menu components.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Menu } from '@pongo-ui/react-menu'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Menu>
      // Add your menu here
      </Menu>
    <Provider>
  )
}
```

## API

The Menu API extends off of the FluentUI Menu.
npm package: @pongo-ui/react-provider
Description: The Pongo provider control that handles theme tokens for the web page.
Latest version: 0.0.5

# Provider

The Provider control is what applies theme tokens to the web page.

## Use

1. Install the @pongo-ui/react-provider component.

Using NPM

```
npm install @pongo-ui/react-provider
```

Using Yarn

```
yarn add @pongo-ui/react-provider
```

2. Install a component @pongo-ui/react-button and our theme tokens from @pongo-ui/react-theme.

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Button component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Button } from '@pongo-ui/react-button'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Button>Hello World</Button>
    <Provider>
  )
}
```

## API

This is a re export of the FluentUI FluentProvider. Both API's are identical. The packages only differ in default styling.
npm package: @pongo-ui/react-radio
Description: A radio button component that allows a user to select a single option from a set.
Latest version: 0.0.10

# RadioButton

The RadioButton component allows a user to select a single option from a set.

## Use

1. Install the @pongo-ui/react-radio component.

Using NPM

```
npm install @pongo-ui/react-radio
```

Using Yarn

```
yarn add @pongo-ui/react-radio
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Radio component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { RadioRadioGroupList, Radio } from '@pongo-ui/react-radio'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <RadioGroup>
        <Radio value="1" label="Value 1" />
        <Radio value="2" label="Value 2" />
        <Radio value="3" label="Value 3" />
      </RadioGroup>
    <Provider>
  )
}
```

## API

The Radio API extends off of FluentUI.
npm package: @pongo-ui/react-switch
Description: The Switch allows users to toggle a value between an on and off state.
Latest version: 0.0.11

# Switch

The Switch allows users to toggle a value between an on and off state.

## Use

1. Install the @pongo-ui/react-switch component.

Using NPM

```
npm install @pongo-ui/react-switch
```

Using Yarn

```
yarn add @pongo-ui/react-switch
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Switch component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Switch } from '@pongo-ui/react-switch'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Switch/>
    <Provider>
  )
}
```

## API

To learn more about the Switch API take a look at the [Switch Interface](src/components/Switch/Switch.types.ts) file.
npm package: @pongo-ui/react-table
Description: The Table component displays sets of data.
Latest version: 0.0.3

# Table

The Table component displays sets of data.

## Use

1. Install the @pongo-ui/react-table component.

Using NPM

```
npm install @pongo-ui/react-table
```

Using Yarn

```
yarn add @pongo-ui/react-table
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Table component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Table, ... } from '@pongo-ui/react-table'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Table>
        ...
      </Table>
    <Provider>
  )
}
```

## API

To learn more about the Table API take a look at the [Table Interface](src/components/Table/Table.types.ts) file.
npm package: @pongo-ui/react-tabs
Description: A Tab component that assists in organizing groups of content.
Latest version: 0.0.11

# Tabs

The Tab component assists in organizing groups of content. This can be especially helpful for landing pages.

## Use

1. Install the @pongo-ui/react-tabs component.

Using NPM

```
npm install @pongo-ui/react-tabs
```

Using Yarn

```
yarn add @pongo-ui/react-tabs
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Tab component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { TabList, Tab } from '@pongo-ui/react-tabs'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <TabList>
        <Tab value="1">First Tab</Tab>
        <Tab value="2">Second Tab</Tab>
      </TabList>
    <Provider>
  )
}
```

## API

The Tab API extends off of FluentUI.
npm package: @pongo-ui/react-text
Description: A Text control that standardizes font styling across a webpage.
Latest version: 0.0.18

# Text

The Text control standardizes font styling across a webpage.

## Use

1. Install the @pongo-ui/react-text component.

Using NPM

```
npm install @pongo-ui/react-text
```

Using Yarn

```
yarn add @pongo-ui/react-text
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Link component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Text } from '@pongo-ui/react-link'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Text>Hello World</Text>
    <Provider>
  )
}
```

## API

To learn more about the Text API take a look at the [Text Interface](src/components/Text/Text.types.ts) file.
npm package: @pongo-ui/react-theme
Description: A set of theme tokens used by Pongo.
Latest version: 0.0.13

# Theme

The Theme package is a set of various theme tokens used by Pongo components.

## Use

1. Install the @pongo-ui/react-theme package.

Using NPM

```
npm install @pongo-ui/react-theme
```

Using Yarn

```
yarn add @pongo-ui/react-theme
```

2. Install the @pongo-ui/react-provider and one of our components.

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Build your app.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Button } from '@pongo-ui/react-button'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Button>Hello World</Button>
    <Provider>
  )
}
```

## API

To learn more about the Theme API take a look at the [Theme Interface](src/types.ts) file.
npm package: @pongo-ui/react-theme-generator
Description: A tool used to easily and quickly create themes.
Latest version: 0.1.2

# Theme Generator

The theme generator package is a tool used to easily and quickly create themes.

## Use

1. Install the @pongo-ui/react-theme-generator package.

Using NPM

```
npm install @pongo-ui/react-theme-generator
```

Using Yarn

```
yarn add @pongo-ui/react-theme-generator
```

2. Set up the themeGenerator in your app:

```jsx
import { themeGenerator } from './themeGenerator';

const hcTheme = themeGenerator({
  canvasColor: '#000000',
  semanticColors: {
    inherit: '#ffff00',
    brand: '#0029ff',
    success: '#278536',
    danger: '#de3309',
  },
});
```

4. Integrate your theme in your provider and components

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Button } from '@pongo-ui/react-button'

const hcTheme = themeGenerator({
  canvasColor: '#000000',
  semanticColors: {
    inherit: '#ffff00',
    brand: '#0029ff',
    success: '#278536',
    danger: '#de3309',
  },

const MyApp = () => {
  return (
    <Provider theme={hcTheme}>
      <Button>Hello World</Button>
    <Provider>
  )
}
```

## API

To learn more about the ThemeGenerator API take a look at the [ThemeGenerator Interface](src/theme-generator/themeGenerator.types.ts) file.
npm package: @pongo-ui/react-toolbar
Description: A toolbar component that displays important information and actions for an application.
Latest version: 0.0.19

# Toolbar

The Toolbar component displays important information and actions for an application.

## Use

1. Install the @pongo-ui/react-toolbar component.

Using NPM

```
npm install @pongo-ui/react-toolbar
```

Using Yarn

```
yarn add @pongo-ui/react-toolbar
```

2. Install the @pongo-ui/react-provider and our theme tokens from @pongo-ui/react-theme

3. Set up the provider in your app:

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
    <Provider>
  )
}
```

4. Integrate the Toolbar component.

```jsx
import { Provider } from '@pongo-ui/react-provider'
import { webLightTheme } from '@pongo-ui/react-theme'
import { Toolbar } from '@pongo-ui/react-toolbar'

const MyApp = () => {
  return (
    <Provider theme={webLightTheme}>
      <Toolbar>Hello World</Toolbar>
    <Provider>
  )
}
```

## API

To learn more about the Toolbar API take a look at the [Toolbar Interface](src/components/Toolbar/Toolbar.types.ts) file.
npm package: @pongsatt/k8sclient
Description: Kubernetes client in Typescript (Support 1.7 to 1.11)
Latest version: 1.0.0

# k8sclient

Kubernetes client in Typescript (Support 1.7 to 1.11)

## Description

This client is generated from [Kubernetes Swagger Spec](https://kubernetes.io/docs/concepts/overview/kubernetes-api/#openapi-and-swagger-definitions).

### Installing

```
npm install @pongsatt/k8sclient
```

or

```
yarn add @pongsatt/k8sclient
```

### Cluster configuration
It will automatically detect if run inside or outside a cluster. In case of running outside a cluster, user configuration under ~/.kube will be used.

### Usage example

Talking to kubernetes 1.10 - Core api.

```
import {client110} from '@pongsatt/k8sclient';

const core = new client110.CoreV1Api();

...run inside an async function

// Reading a service in default namespace
const result = await core.readCoreV1NamespacedService('a service name', 'default');

// Listing pods with a name from default namespace
const podList = await core.listCoreV1NamespacedPod('default', undefined, undefined, undefined, false, `name=${name}`);
```
npm package: @pongsatt/nuxt-auth
Description: Authentication module for Nuxt.js
Latest version: 4.2.0

<h1 align="center" >🔑 Auth Module</h1>
<p align="center">Authentication module for Nuxt.js</p>

<p align="center">
<a href="https://david-dm.org/nuxt-community/auth-module">
    <img alt="" src="https://david-dm.org/nuxt-community/auth-module/status.svg?style=flat-square">
</a>
<a href="https://standardjs.com">
    <img alt="" src="https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square">
</a>
<a href="https://circleci.com/gh/nuxt-community/auth-module">
    <img alt="" src="https://img.shields.io/circleci/project/github/nuxt-community/auth-module.svg?style=flat-square">
</a>
<a href="https://codecov.io/gh/nuxt-community/auth-module">
    <img alt="" src="https://img.shields.io/codecov/c/github/nuxt-community/auth-module.svg?style=flat-square">
</a>
<br>
<a href="https://npmjs.com/package/@nuxtjs/auth">
    <img alt="" src="https://img.shields.io/npm/v/@nuxtjs/auth/latest.svg?style=flat-square">
</a>
<a href="https://npmjs.com/package/@nuxtjs/auth">
    <img alt="" src="https://img.shields.io/npm/dt/@nuxtjs/auth.svg?style=flat-square">
</a>
</p>

<p align="center">
<a href="https://auth.nuxtjs.org">Read Documentation</a>
</p>


## Development 

Running demo for development:

```bash
$ yarn install
$ yarn dev
```

## License

[MIT License](./LICENSE) - Copyright (c) Nuxt Community