open-index/open-npm huggingface dataset:
npm package: @freshworks/table
Description: Table component in Nucleus
Latest version: 0.14.1

@freshworks/table
==============================================================================

```
yarn add @freshworks/table
```

The table component is used to display sets of content in rows spanning across multiple pages

Guidelines
------------------------------------------------------------------------------
**Do's**
1. Set a judicious number of columns to be displayed

2. Ensure that the esssential columns cannot be filtered 

3. If an interactive cell element is present, the user must be given cues for understanding.  

**Dont's**

1. Do not clutter the table with many columns
npm package: @freshworks/tabs
Description: tabs component in Nucleus
Latest version: 0.16.1

@freshworks/tabs
==============================================================================
[![npm version](https://badge.fury.io/js/%40freshworks%2Ftabs.svg)](https://www.npmjs.com/package/@freshworks/tabs)
![npm](https://img.shields.io/npm/dm/@freshworks/tabs)

```
ember install @freshworks/tabs
```

Tabs are used to organise content under each section.

Scenario
------------------------------------------------------------------------------
Tabs are most helpful when there is a lot of content to show in a page. Tabs can help in showing content which are under the same level of hierarchy, under each section inside the same page.

Guidelines
------------------------------------------------------------------------------
**Do's**
1. Tabs should be placed in a single row over the content
2. Include all interactive states for the tabs


**Dont's**
1. Dont use tabs for sequential content. Users can navigate to any tab at any time and cannot be expected to do it sequentially.
npm package: @freshworks/toast-message
Description: Toast message component in Nucleus
Latest version: 0.19.1

@freshworks/toast-message
==============================================================================
[![npm version](https://badge.fury.io/js/%40freshworks%2Ftoast-message.svg)](https://www.npmjs.com/package/@freshworks/toast-message)
![npm](https://img.shields.io/npm/dm/@freshworks/toast-message)

```sh
ember install @freshworks/toast-message
```

Toast messages are quick messages that appear after user-driven events to inform the users immediately after said events. These components are mostly used for confirmation or alerts and only require the user’s attention for a span of a few seconds. They can also be closed with the standard close button and may contain buttons or links.

Scenario
------------------------------------------------------------------------------
In Freshdesk, we use toast messages for confirmation of delete actions, creating new objects (eg. tickets, groups) etc. Toast messages are used so that they don’t completely disrupt the user’s workflow but alert them anyway.

Guidelines
------------------------------------------------------------------------------
**DO’s**

1. Keep the message short and to the point
2. Icon to the titles has to be contextual

**DONT’s**

1. Don’t have more than two lines of content
2. Don’t use toast messages on overlays (sliders/modals)
3. Don’t use toast messages for high priority information
npm package: @freshworks/toggle
Description: Toggle component in Nucleus
Latest version: 0.16.1

@freshworks/toggle
==============================================================================
[![npm version](https://badge.fury.io/js/%40freshworks%2Ftoggle.svg)](https://www.npmjs.com/package/@freshworks/toggle)
![npm](https://img.shields.io/npm/dm/@freshworks/toggle)

```
yarn add @freshworks/toggle
```

Toggles in Freshdesk
------------------------------------------------------------------------------
Interactive component that allows to toggle between two choices, checked and unchecked. They are mostly used to represent active/inactive state.

Accessibility
------------------------------------------------------------------------------
When the toggle has focus, pressing the Space key changes the state of the toggle.

Variants
------------------------------------------------------------------------------
Disabled - Prevent hover states from activating

Guidelines
------------------------------------------------------------------------------
**DO’s**

1. Use toggles with labels unless the title is straightforward so the user knows exactly what action he is doing.
2. In case of multiple toggles, align them well so that it is easier to find them on the page.

**DONT’s**

1. Do not redirect the user to a different page on change of the toggle state. 
2. Avoid using multiple toggles on the same page, as much as possible.
3. Toggle actions work immediately. Do not enable them only after a clicking confirm button.
npm package: @fressh/react-native-xtermjs-webview
Description: React Native WebView that embeds [xterm.js](https://xtermjs.org/) with sensible defaults and a bridge for input and output.
Latest version: 0.0.8

## @fressh/react-native-xtermjs-webview

React Native WebView that embeds [xterm.js](https://xtermjs.org/) with sensible
defaults and a bridge for input and output.

[![npm version](https://img.shields.io/npm/v/%40fressh%2Freact-native-xtermjs-webview)](https://www.npmjs.com/package/@fressh/react-native-xtermjs-webview)

### Install

```bash
pnpm add @fressh/react-native-xtermjs-webview react-native-webview
```

Peer dependencies: `react`, `react-native-webview`.

### Usage

For a complete production example, see the mobile app:
https://github.com/EthanShoeDev/fressh/tree/main/apps/mobile

Basic usage:

```tsx
import React, { useRef } from 'react';
import type { XtermWebViewHandle } from '@fressh/react-native-xtermjs-webview';
import { XtermJsWebView } from '@fressh/react-native-xtermjs-webview';

export function Terminal() {
	const termRef = useRef<XtermWebViewHandle | null>(null);

	return (
		<XtermJsWebView
			ref={termRef}
			onInitialized={() => {
				const hello = new TextEncoder().encode('hello');
				termRef.current?.write(hello);
			}}
			onData={(input) => {
				console.log('user input:', input);
			}}
		/>
	);
}
```

#### Props

- `webViewOptions`: subset of `react-native-webview` props (sane defaults
  applied)
- `xtermOptions`: partial `@xterm/xterm` options (theme, font, scrollback, etc.)
- `onInitialized`: called when the terminal is ready
- `onData(str)`: emits user keystrokes
- `size`: `{ cols, rows }` to set terminal size
- `autoFit`: auto-fit after important changes (default: true)

#### Ref API

- `write(bytes)`, `writeMany([bytes...])`, `flush()`
- `clear()`, `focus()`, `fit()`, `resize({ cols, rows })`

### Publishing contents

This package intentionally publishes both `src/` and built `dist/` artifacts for
transparency and debugging.

### Links

- Changelog:
  [`CHANGELOG.md`](https://github.com/EthanShoeDev/fressh/blob/main/packages/react-native-xtermjs-webview/CHANGELOG.md)
- Contributing:
  [`CONTRIBUTING.md`](https://github.com/EthanShoeDev/fressh/blob/main/CONTRIBUTING.md)
- Example app:
  [`apps/mobile`](https://github.com/EthanShoeDev/fressh/tree/main/apps/mobile)
  and source usage:
  [`apps/mobile/src/app/(tabs)/shell/detail.tsx`](<https://github.com/EthanShoeDev/fressh/blob/main/apps/mobile/src/app/(tabs)/shell/detail.tsx>)
- API source:
  [`src/index.tsx`](https://github.com/EthanShoeDev/fressh/blob/main/packages/react-native-xtermjs-webview/src/index.tsx)
- License: MIT
npm package: @freteclick/quasar-dashboard-ui
Description: FreteClick Dashboard Quasar UI Component
Author: Controle Online
Latest version: 1.2.38

# Contract Component

[![npm](https://img.shields.io/npm/v/@freteclick/quasar-dashboard-ui.svg?label=@freteclick/quasar-dashboard-ui)](https://www.npmjs.com/package/@freteclick/quasar-dashboard-ui)
[![npm](https://img.shields.io/npm/dt/@freteclick/quasar-dashboard-ui.svg)](https://www.npmjs.com/package/@freteclick/quasar-dashboard-ui)

# Contract Component
> FreteClick Dashboard Quasar UI Component

# Usage

## Quasar CLI project

Create and register a boot file:

```js
import Vue    from 'vue'
import Plugin from '@freteclick/quasar-dashboard-ui'

Vue.use(Plugin)
```
# Setup
```bash
$ yarn add @freteclick/quasar-dashboard-ui@latest -D
```

# Developing
```bash
# start dev in SPA mode
$ yarn dev

# start dev in UMD mode
$ yarn dev:umd

# start dev in SSR mode
$ yarn dev:ssr

# start dev in Cordova iOS mode
$ yarn dev:ios

# start dev in Cordova Android mode
$ yarn dev:android

# start dev in Electron mode
$ yarn dev:electron
```

# Building package
```bash
$ yarn build
```

# Adding Testing Components
in the `ui/dev/src/pages` you can add Vue files to test your component/directive. When using `yarn dev` to build the UI, any pages in that location will automatically be picked up by dynamic routing and added to the test page.

# Adding Assets
If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the `ui/build/script.javascript.js` file, you will find a couple of commented out commands that call `addAssets`. Uncomment what you need and add your assets to have them be built and put into the `ui/dist` folder.

# Donate
If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).

# License
MIT (c) Francisco Rivera