open-index/open-npm huggingface dataset:
npm package: @softpak/frontend-components-react
Description: @softpak/frontend-components-react
Latest version: 0.0.87

# stencil-ds-react-template

This is an example repo of building plugins.

## Step 1.

- Update the `package.json` to have the correct package name for this repo.
- Replace `component-library` under `dependencies` with your core stencil package name.

## Step 2.

- Build your core stencil package.

## Step 3.

- Run build on this package.
npm package: @softpak/ng-components
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0.
Latest version: 5.0.11

# NgComponents

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0.

## Code scaffolding

Run `ng generate component component-name --project ng-components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-components`.
> Note: Don't forget to add `--project ng-components` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build ng-components` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build ng-components`, go to the dist folder `cd dist/ng-components` and run `npm publish`.

## Running unit tests

Run `ng test ng-components` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @softprobe/softprobe-web-record-sdk
Description: This is the official SDK for the Softprobe Frontend Record API.
Latest version: 0.0.25

### SOFTPROBE RECORD SDK

This is the official SDK for the Softprobe Frontend Record API.

#### Installation

```bash
npm install @softprobe/softprobe-web-record-sdk
```

#### Basic Usage

##### CDN

Add the following script to the head tag.

```html
  <script>
    (function (w, d, c) {
      var a = d.getElementsByTagName('head')[0];
      var s = document.createElement('script');
      s.src = c;
      s.onload = function () {
        w.SoftprobeRecordSdk.init({
          appId: 'appId123',
          tenantId: 'tenant123',
          tags: {
            userId: 'userId123',
            clientId: 'clientId1234567890',
            email: 'test@test.com',
            phoneNo: '1234567890',
          }
        });
      }
      a.appendChild(s);
    })(window, document, 'http://localhost:4173/softprobe-web-record-sdk.umd.js', 'SoftprobeRecordSdk', 'init');
    </script>
    ```

##### npm

```javascript
import RecordSdk from '@softprobe/softprobe-web-record-sdk';

// The only required parameter are appId and tenantId
new RecordSdk({
    appId: '<appId>',
    tenantId: '<tenantId>'
});
```

#### Advanced Usage

Custom tags are simple key-value pairs that you can use to add additional information to the recording. 
They are useful for adding user information, or any other information that you want to record with the recording.

```javascript
import RecordSdk from '@softprobe/softprobe-web-record-sdk';

const skd = new RecordSdk({
  tenantId: '<tenantId>',
  appId: '<appId>',
  timeout: 10000, // 10s
  manual: true, // manual control record start and stop

  // You can set custom tags here
  tags: {
    userId: '<userId>',
    clientId: '<clientId>',
    mobileNo: '<mobileNo>'
  },

  maskAllInputs: true
});

// set custom tags
skd.setTags({
  country: 'US',
  state: 'CA',
});

// or you can add tags when you record
const { stop } = skd.record({
  tags: {
    'address.street': '123 Main St',
    'address.city': 'San Francisco',
    'address.state': 'CA',
    'address.zip': '94101'
  }
});

// stop record after 10s
setTimeout(() => {
  stop();
  console.log('Stop record!');
}, 20000);
```

#### Development

```bash
npm install
npm run dev
npm run build # build sdk
npm run build:demo # build demo project
npm run build:dem-cdn # build demo project for cdn usage
npm run preview # preview demo project
```