open-index/open-npm huggingface dataset:
npm package: @meumobi/ngx-youtube-provider
Description: A angular service to fetch channel youtube videos and playlist
Latest version: 0.0.2

# @meumobi/ngx-youtube-provider

A angular service to fetch Youtube channel videos, playlists and latest videos.

## Dependencies
- apiKey: YouTube Data API v3 key, generated [here](https://console.developers.google.com/apis/library/youtube.googleapis.com)
- apiURL: `https://www.googleapis.com/youtube/v3`


## Installation
```bash
$ npm install @meumobi/ngx-youtube-provider --save
```

## Use 
On app.module.js
```ts
...
import { YoutubeService, YoutubeModule } from '@meumobi/ngx-youtube-provider';

@NgModule({
  declarations: [...],
  imports: [
      YoutubeModule.forRoot(
      {
        apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        apiURL: 'https://www.googleapis.com/youtube/v3'
      }
    ),
    ...
  ],
  bootstrap: [...],
  entryComponents: [...],
  providers: [
    YoutubeService,
    ...
  ]
})
export class AppModule {}
```
your-component.module.ts
```ts
...
import { YoutubeService } from '@meumobi/ngx-youtube-provider';

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    YoutubeService,
    ...
  ]
})
export class YoutComponentModule {}
```
you-component.ts
```ts
...
import { YoutubeService } from '@meumobi/ngx-youtube-provider';
@Component({
  selector: 'your-component',
  templateUrl: 'your-component',
})
export class YoutComponent  {

  constructor(
    private youtubeService: YoutubeService,
    ...
  ) {}

  fetchPlaylists(channelId: string) {
    this.youtubeService.fetchPlaylists(channelId)
    .then(
      data => console.log(data)
    );
  }

  fetchVideos(channelId: string, playlistId: string) {
    this.youtubeService.fetchVideos(channelId, playlistId)
    .then(
      data => console.log(data)
    );
  }

}
```

## Functions
### fetchPlaylists
It returns an array of all channel playlists.  
If there is no playlist it returns `[]`
`this.youtubeService.fetchPlaylists(channelId)`
- channelId: string like `UCZZPgUIorPao48a1tBYSDgg`  
Playlist [Object](https://developers.google.com/youtube/v3/docs/playlists)


### fetchVideos
It returns an array of the latest 20 playlist vides.   
If not pass a playlistId, it returns the latest 20 channel videos.  
If there is no video on channel/playlist it returns `[]`.  
`this.youtubeService.fetchVideos(channelId, playlistId)`
- channelId: string like `UCZZPgUIorPao48a1tBYSDgg`  
- playlistId: string like `PLNFwX8PVq5q6CHLk0tLCiyh96nALzi3_x`

Video [Object](https://developers.google.com/youtube/v3/docs/videos)
npm package: @meursyphus/flitter-chart
Description: A chart library built with the flitter library, designed as a universal framework compatible with both Svelte and React.
Author: meursyphus
Latest version: 0.0.9

FlitterChart is an innovative charting library that stands out for its use of SVG technology, offering a versatile and interactive experience in data visualization. Developed with precision, it aims to provide users with a tool that not only delivers stunning visual representations but also ensures accessibility and compatibility across different devices and browsers.

One of the core strengths of FlitterChart is its foundation in SVG (Scalable Vector Graphics), which guarantees that charts render crisply at any resolution or screen size, bringing an unparalleled level of clarity and detail to data visualization. This SVG-powered excellence is complemented by the library's support for server-side rendering, allowing charts to be generated on the server and seamlessly integrated into web pages, ensuring they are accessible to all users.

At the heart of FlitterChart's design philosophy is its use of Flitter, an ingenious framework that emulates the Flutter widget interface with SVG. This choice facilitates a smooth transition for those familiar with Flutter, enabling them to leverage their existing skills to create complex and dynamic charts. Furthermore, the library's customization capabilities are enhanced by FlutterJS widgets, allowing for extensive personalization of charts to meet specific needs, from adjusting colors and fonts to modifying layouts.
npm package: @meursyphus/flitter-react
Description: Flitter-React is a library designed to simplify the integration of Flitter, a widget-based SVG manipulation framework, with React applications. It enables developers to easily incorporate Flitter's declarative, Flutter-like syntax for data visualization w
Latest version: 0.0.8

##  What is this?

Flitter-React is a library designed to simplify the integration of Flitter, a widget-based SVG manipulation framework, with React applications. It enables developers to easily incorporate Flitter's declarative, Flutter-like syntax for data visualization within React projects.

For more details, visit [here](https://flitter.pages.dev).

```bash
npm i @meursyphus/flitter @meursyphus/flitter-react
```
Example of using Flitter widgets in a React component:

```javascript
import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';
import Widget from '@meursyphus/flitter-react';

const App = () => {
  return (
    <Widget
      width="600px"
      height="300px"
      widget={Container({
        alignment: Alignment.center,
        color: 'lightblue',
        child: Text("Hello, Flitter!", style: TextStyle({ fontSize: 30, weight: 'bold' }))
      })}
    />
  );
};
```
npm package: @meursyphus/flitter-solid
Description: SolidJS integration for Flitter - a Flutter-like UI framework for JavaScript.
Author: meursyphus
Latest version: 0.0.1

# @meursyphus/flitter-solid

SolidJS integration for Flitter - a Flutter-like UI framework for JavaScript.

## Installation

```bash
npm install @meursyphus/flitter-solid @meursyphus/flitter solid-js
```

## Usage

```tsx
import { createSignal } from 'solid-js';
import Widget from '@meursyphus/flitter-solid';
import { Container, Text, Center } from '@meursyphus/flitter';

function App() {
  const [count, setCount] = createSignal(0);

  const flitterWidget = Center({
    child: Container({
      width: 200,
      height: 200,
      color: 'lightblue',
      child: Text(`Count: ${count()}`, {
        style: { fontSize: 24 }
      })
    })
  });

  return (
    <div>
      <Widget 
        widget={flitterWidget}
        width="400px"
        height="400px"
        renderer="svg" // or "canvas"
      />
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
}

export default App;
```

## API

### Widget Component Props

- `widget` (Widget): The Flitter widget to render
- `width` (string): Width of the container (default: "100%")
- `height` (string): Height of the container (default: "300px")
- `renderer` ("canvas" | "svg"): Rendering backend (default: "svg")

## Features

- Seamless integration with SolidJS reactive system
- Support for both Canvas and SVG rendering
- Automatic cleanup on unmount
- TypeScript support

## License

MIT
npm package: @meursyphus/flitter-svelte
Description: Flitter-Svelte is a library designed to simplify the integration of Flitter, a widget-based SVG manipulation framework, with Svelte applications. It enables developers to easily incorporate Flitter's declarative, Flutter-like syntax for data visualization
Latest version: 2.0.0-alpha.2

## What is this?

Flitter-Svelte is a library designed to simplify the integration of Flitter, a widget-based SVG manipulation framework, with Svelte applications. It enables developers to easily incorporate Flitter's declarative, Flutter-like syntax for data visualization within Svelte projects.

For more details, visit [here](https://flitter.pages.dev).

```bash
npm i @meursyphus/flitter @meursyphus/flitter-svelte
```

```svelte
<script>
  import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';
  import Widget from '@meursyphus/flitter-svelte';
</script>

<Widget
  width="600px"
  height="300px"
  widget={Container({
    alignment: Alignment.center,
    color: 'lightblue',
    child: Text("Hello, Flitter!", style: TextStyle({ fontSize: 30, weight: 'bold' }))
  })}
/>
```
npm package: @meursyphus/headless-chart
Description: Highly customizable chart library built on top of Flitter framework
Author: meursyphus
Latest version: 0.0.10

# Headless Chart

A powerful chart library built on top of the [Flitter](https://flitter.dev) framework that provides a headless way to define and compose charts. Unlike traditional chart libraries where you are constrained by predefined components, headless-chart gives you building blocks that you can shape and style to meet your exact needs.

## Why Headless Chart?

- **Full Control**: Instead of tweaking chart options, you directly modify widget structures using Flitter's widget system
- **Framework Agnostic**: Works seamlessly with vanilla JavaScript/TypeScript or any UI framework
- **Flexible Rendering**: Supports both SVG and Canvas rendering out of the box
- **React Integration**: Easy integration with React through `@meursyphus/flitter-react`

## Quick Start

```bash
# Create a new Vite project
npm create vite@latest my-chart-app -- --template react
cd my-chart-app

# Install dependencies
npm install @meursyphus/flitter @meursyphus/headless-chart @meursyphus/flitter-react
```

### Basic Usage

```jsx
import ReactWidget from "@meursyphus/flitter-react";
import { BarChart } from "@meursyphus/headless-chart";

export default function App() {
  const chart = BarChart({
    data: {
      labels: ["January", "February", "March"],
      datasets: [
        { legend: "Sales", values: [150, 200, 170] }
      ],
    },
    title: "Monthly Sales"
  });

  return (
    <ReactWidget 
      width="600px" 
      height="400px" 
      widget={chart} 
      renderer="svg" 
    />
  );
}
```

### Custom Chart Example

```jsx
import { BarChart } from "@meursyphus/headless-chart";
import { Text, Container, BoxDecoration } from "@meursyphus/flitter";

const customConfig = {
  bar: ({ value, label, legend }) => {
    return Container({
      width: 20,
      height: value * 2,
      decoration: new BoxDecoration({ 
        color: legend === "Sales" ? "blue" : "gray" 
      }),
      child: Text(`${value}`, { 
        style: { fill: "white" } 
      })
    });
  },
  title: ({ name }) => {
    return Text(name, { 
      style: { fontSize: 18, fontWeight: "bold" } 
    });
  }
};

const chart = BarChart({
  data: {
    labels: ["Jan", "Feb", "Mar"],
    datasets: [
      { legend: "Sales", values: [150, 200, 170] }
    ]
  },
  title: "Customized Sales Chart",
  custom: customConfig
});
```

## Documentation

Visit our [documentation](https://headless-chart.codeium.com/docs/getting-started/introduction) to learn more about:
- Detailed installation guides
- Framework integrations
- Chart customization
- Advanced examples

## Examples

Check out our [interactive examples](https://headless-chart.codeium.com/charts) to see what you can build with headless-chart.

## License

MIT