open-index/open-npm huggingface dataset:
npm package: @multiapi-client/api-angular
Description: Servicios Angular tipados para consumir las APIs OTT.
Latest version: 1.0.0

# @multiapi-client/api-angular

Servicios Angular tipados para consumir las APIs OTT.

## Instalación

```bash
npm install @multiapi-client/api-angular
```

**Peer dependencies:** `@angular/core`, `@angular/common`

## Setup

```ts
// app.config.ts
import { provideApi } from '@multiapi-client/api-angular';

export const appConfig = {
  providers: [
    provideApi({
      baseURL: 'https://api.example.com',
      userName: 'lleidatv',
    }),
  ],
};
```

## Servicios disponibles

### ApiService (genérico)

```ts
import { ApiService } from '@multiapi-client/api-angular';

@Component({ ... })
export class MyComponent {
  data$ = this.api.get<MyType[]>('/my/endpoint');
  constructor(private api: ApiService) {}
}
```

### OttFamiliesService

```ts
import { OttFamiliesService, FmFamilias } from '@multiapi-client/api-angular';

@Component({
  selector: 'app-families',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    @if (families$ | async; as families) {
      <ul>
        @for (f of families; track f.idFamilia) {
          <li>{{ f.fmDescripcion }}</li>
        }
      </ul>
    }
  `,
})
export class FamiliesComponent {
  families$ = this.familiesApi.getAll({ PageNumber: 1, PageSize: 20 });
  constructor(private familiesApi: OttFamiliesService) {}
}
```

### OttVideosService

```ts
import { OttVideosService } from '@multiapi-client/api-angular';

// Listar videos
videos$ = this.videosApi.getAll({ PageNumber: 1, PageSize: 20 });

// Un video por UUID
video$ = this.videosApi.getById('uuid');

// Más vistos
top$ = this.videosApi.getMostViewed({
  from: '2024-01-01T00:00:00Z',
  to: '2024-12-31T23:59:59Z',
  PageNumber: 1,
  PageSize: 10,
});
```

### OttPlayersService

```ts
import { OttPlayersService } from '@multiapi-client/api-angular';

players$ = this.playersApi.getAll({ PageNumber: 1, PageSize: 20 });
player$  = this.playersApi.getById(123);
```

### OttEpgService

```ts
import { OttEpgService } from '@multiapi-client/api-angular';

ratings$ = this.epgApi.getAgeRatings();
epg$     = this.epgApi.getById(1);
items$   = this.epgApi.getItems(1, { PageNumber: 1, PageSize: 50 });
```

## Estructura

```
libs/api-angular/src/lib/
├── api.service.ts            # Cliente HTTP genérico
├── api.provider.ts           # provideApi()
├── types.ts                  # Todos los tipos OTT
├── ott-families.service.ts   # OttFamiliesService
├── ott-videos.service.ts     # OttVideosService
├── ott-players.service.ts    # OttPlayersService
└── ott-epg.service.ts        # OttEpgService
```
npm package: @multichoice/core
Description: Core utilities, tokens, and types for Multichoice Design System
Latest version: 1.0.4

# @multichoice/core

Core utilities, tokens, and types for the Multichoice Design System.

## Installation

```bash
npm install @multichoice/core
```

## What's Included

This package provides the foundational elements for the Multichoice Design System:

### 🎨 Design Tokens
- **Colors**: Brand colors, semantic colors, and theme variations
- **Typography**: Font families, sizes, weights, and line heights
- **Spacing**: Consistent spacing scale for margins, padding, and layouts

### 🔧 Utilities
- Helper functions for working with design tokens
- Common utility functions used across components

### 📝 Types
- TypeScript type definitions for all design system elements
- Type-safe interfaces for components and tokens

## Usage

```typescript
import { colors, typography, spacing } from '@multichoice/core';

// Using design tokens
const primaryColor = colors.primary;
const headingFont = typography.heading.fontFamily;
const mediumSpacing = spacing.md;
```

## API Reference

### Colors
Access brand and semantic colors:
```typescript
import { colors } from '@multichoice/core';

// Brand colors
colors.primary
colors.secondary

// Semantic colors
colors.success
colors.warning
colors.error
colors.info
```

### Typography
Use consistent typography tokens:
```typescript
import { typography } from '@multichoice/core';

// Font families
typography.heading.fontFamily
typography.body.fontFamily

// Font sizes
typography.heading.sizes.large
typography.body.sizes.medium
```

### Spacing
Apply consistent spacing:
```typescript
import { spacing } from '@multichoice/core';

// Spacing scale
spacing.xs  // Extra small
spacing.sm  // Small
spacing.md  // Medium
spacing.lg  // Large
spacing.xl  // Extra large
```

## Requirements

- TypeScript 5.0+
- Node.js 18+

## License

MIT
npm package: @multichoice/gotv-gluestack
Description: GOTV GlueStack components for Multichoice Design System
Latest version: 1.0.4

# @multichoice/gotv-gluestack

GOTV GlueStack components for the Multichoice Design System. This package provides React Native components built with GlueStack UI for the GOTV brand.

## Installation

```bash
npm install @multichoice/gotv-gluestack
```

## Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install react react-native @multichoice/core @gluestack-ui/core @gluestack-ui/themed @gluestack-ui/utils nativewind react-native-svg react-native-reanimated
```

## Components

### Button
A customizable button component with GOTV branding.

```typescript
import { GOTVButton } from '@multichoice/gotv-gluestack';

<GOTVButton variant="primary" size="md">
  Click me
</GOTVButton>
```

### Input
Form input components with GOTV styling.

```typescript
import { GOTVInput } from '@multichoice/gotv-gluestack';

<GOTVInput 
  placeholder="Enter your email"
  variant="outline"
  size="md"
/>
```

### Card
Card components for displaying content.

```typescript
import { GOTVCard } from '@multichoice/gotv-gluestack';

<GOTVCard variant="elevated" size="md">
  <GOTVCard.Header>
    <Text>Card Title</Text>
  </GOTVCard.Header>
  <GOTVCard.Body>
    <Text>Card content goes here</Text>
  </GOTVCard.Body>
</GOTVCard>
```

### GlueStack UI Provider
Required provider component for GlueStack UI functionality.

```typescript
import { GluestackUIProvider } from '@multichoice/gotv-gluestack';

function App() {
  return (
    <GluestackUIProvider>
      {/* Your app content */}
    </GluestackUIProvider>
  );
}
```

## Setup

1. Install the package and its dependencies
2. Wrap your app with the `GluestackUIProvider`
3. Import and use the components

```typescript
import React from 'react';
import { GluestackUIProvider } from '@multichoice/gotv-gluestack';

export default function App() {
  return (
    <GluestackUIProvider>
      {/* Your app components */}
    </GluestackUIProvider>
  );
}
```

## Styling

This package uses NativeWind (Tailwind CSS for React Native) for styling. Make sure to configure NativeWind in your project:

1. Install NativeWind: `npm install nativewind`
2. Configure your `tailwind.config.js`
3. Set up the babel plugin

## Storybook

View all components in Storybook:

```bash
npm run storybook
```

## Requirements

- React 18+
- React Native 0.72+
- Node.js 18+

## License

MIT
npm package: @multichoice/gotv-materialui
Description: GOTV Material UI components for Multichoice Design System
Latest version: 1.0.4

# @multichoice/gotv-materialui

GOTV Material UI components for the Multichoice Design System. This package provides web components built with Material-UI for the GOTV brand.

## Installation

```bash
npm install @multichoice/gotv-materialui
```

## Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install react react-dom @multichoice/core @mui/material @emotion/react @emotion/styled
```

## Components

### Button
A customizable button component with GOTV branding and Material-UI styling.

```typescript
import { GOTVButton } from '@multichoice/gotv-materialui';

<GOTVButton variant="contained" color="primary" size="medium">
  Click me
</GOTVButton>
```

## Setup

1. Install the package and its dependencies
2. Import and use the components in your React application

```typescript
import React from 'react';
import { GOTVButton } from '@multichoice/gotv-materialui';

function App() {
  return (
    <div>
      <GOTVButton variant="contained">
        GOTV Button
      </GOTVButton>
    </div>
  );
}
```

## Theming

The components are built on top of Material-UI and support Material-UI's theming system. You can customize the appearance using Material-UI's theme provider:

```typescript
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { GOTVButton } from '@multichoice/gotv-materialui';

const theme = createTheme({
  // Your custom theme
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GOTVButton variant="contained">
        Themed Button
      </GOTVButton>
    </ThemeProvider>
  );
}
```

## Storybook

View all components in Storybook:

```bash
npm run storybook
```

## Requirements

- React 18+
- Node.js 18+

## License

MIT
npm package: @multichoice/mydstv-gluestack
Description: MyDSTV GlueStack components for Multichoice Design System
Latest version: 1.0.4

# @multichoice/mydstv-gluestack

MyDSTV GlueStack components for the Multichoice Design System. This package provides React Native components built with GlueStack UI for the MyDSTV brand.

## Installation

```bash
npm install @multichoice/mydstv-gluestack
```

## Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install react react-native @multichoice/core @gluestack-ui/core @gluestack-ui/themed @gluestack-ui/utils nativewind react-native-svg react-native-reanimated
```

## Components

### Button
A customizable button component with MyDSTV branding.

```typescript
import { MyDSTVButton } from '@multichoice/mydstv-gluestack';

<MyDSTVButton variant="primary" size="md">
  Click me
</MyDSTVButton>
```

### Input
Form input components with MyDSTV styling.

```typescript
import { MyDSTVInput } from '@multichoice/mydstv-gluestack';

<MyDSTVInput 
  placeholder="Enter your email"
  variant="outline"
  size="md"
/>
```

### Card
Card components for displaying content.

```typescript
import { MyDSTVCard } from '@multichoice/mydstv-gluestack';

<MyDSTVCard variant="elevated" size="md">
  <MyDSTVCard.Header>
    <Text>Card Title</Text>
  </MyDSTVCard.Header>
  <MyDSTVCard.Body>
    <Text>Card content goes here</Text>
  </MyDSTVCard.Body>
</MyDSTVCard>
```

### GlueStack UI Provider
Required provider component for GlueStack UI functionality.

```typescript
import { GluestackUIProvider } from '@multichoice/mydstv-gluestack';

function App() {
  return (
    <GluestackUIProvider>
      {/* Your app content */}
    </GluestackUIProvider>
  );
}
```

## Setup

1. Install the package and its dependencies
2. Wrap your app with the `GluestackUIProvider`
3. Import and use the components

```typescript
import React from 'react';
import { GluestackUIProvider } from '@multichoice/mydstv-gluestack';

export default function App() {
  return (
    <GluestackUIProvider>
      {/* Your app components */}
    </GluestackUIProvider>
  );
}
```

## Styling

This package uses NativeWind (Tailwind CSS for React Native) for styling. Make sure to configure NativeWind in your project:

1. Install NativeWind: `npm install nativewind`
2. Configure your `tailwind.config.js`
3. Set up the babel plugin

## Storybook

View all components in Storybook:

```bash
npm run storybook
```

## Requirements

- React 18+
- React Native 0.72+
- Node.js 18+

## License

MIT
npm package: @multichoice/mydstv-materialui
Description: MyDSTV Material UI components for Multichoice Design System
Latest version: 1.0.4

# @multichoice/mydstv-materialui

MyDSTV Material UI components for the Multichoice Design System. This package provides web components built with Material-UI for the MyDSTV brand.

## Installation

```bash
npm install @multichoice/mydstv-materialui
```

## Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install react react-dom @multichoice/core @mui/material @emotion/react @emotion/styled
```

## Components

### Button
A customizable button component with MyDSTV branding and Material-UI styling.

```typescript
import { MyDSTVButton } from '@multichoice/mydstv-materialui';

<MyDSTVButton variant="contained" color="primary" size="medium">
  Click me
</MyDSTVButton>
```

## Setup

1. Install the package and its dependencies
2. Import and use the components in your React application

```typescript
import React from 'react';
import { MyDSTVButton } from '@multichoice/mydstv-materialui';

function App() {
  return (
    <div>
      <MyDSTVButton variant="contained">
        MyDSTV Button
      </MyDSTVButton>
    </div>
  );
}
```

## Theming

The components are built on top of Material-UI and support Material-UI's theming system. You can customize the appearance using Material-UI's theme provider:

```typescript
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { MyDSTVButton } from '@multichoice/mydstv-materialui';

const theme = createTheme({
  // Your custom theme
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyDSTVButton variant="contained">
        Themed Button
      </MyDSTVButton>
    </ThemeProvider>
  );
}
```

## Storybook

View all components in Storybook:

```bash
npm run storybook
```

## Requirements

- React 18+
- Node.js 18+

## License

MIT
npm package: @multidrop/multidrop-design-system
Description: This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Latest version: 1.5.4

# Multidrop-Design-System
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

# Informations

The app use:

1. Vue 3
2. Ts
3. Vite
4. Storybook
5. Jest
6. Quasar
7. Prettier
8. Lint
9. Husky

# Important commands

* "npm run dev" to run app
* "npm run build" to build app
* "npm run storybook" to view Design System
* "npm run build-storybook" to build Design System
* "npm run lint:fix" to check and fix code errors
* "npm run format" to format code
* "npm run test" to run tests with jest

# To publish package
1. add this line in package.json 
* "types": "./dist/main.d.ts"
2. npm run build
3. set github token in your system variables
* MAC OS
* export GITHUBTOKEN="YOUR_TOKEN"
* echo $GITHUBTOKEN
4. npm publish
5. Remove types line of package.json

# To install 
* npm install @multidrop/multidrop-design-system@latest
npm package: @multidrop/tao-design-system
Description: This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Latest version: 0.1.5

# Tao-Design-System
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

# Informations

The app use:

1. Vue 3
2. Ts
3. Vite
4. Storybook
5. Jest
6. Quasar
7. Prettier
8. Lint
9. Husky

# Important commands

* "npm run dev" to run app
* "npm run build" to build app
* "npm run storybook" to view Design System
* "npm run build-storybook" to build Design System
* "npm run lint:fix" to check and fix code errors
* "npm run format" to format code
* "npm run test" to run tests with jest

# To publish package
1. add this line in package.json 
* "types": "./dist/main.d.ts"
2. npm run build
3. set github token in your system variables
* MAC OS
* export GITHUBTOKEN="YOUR_TOKEN"
* echo $GITHUBTOKEN
4. npm publish
5. Remove types line of package.json

# To install 
* npm install @multidrop/tao-design-system@latest
npm package: @multiface.js/inputs
Description: Input components (Chat, Voice, GUI) for Multiface.js SDK
Latest version: 0.1.0

# @multiface.js/inputs

Input components for the Multiface.js SDK.

## Components
- `ChatInput`: Text chat input
- `VoiceInput`: Voice input (Web Speech API)
- `GUIControls`: GUI controls (button, slider)

## Usage
```tsx
import { ChatInput, VoiceInput, GUIControls } from '@multiface.js/inputs';
```