open-index/open-npm huggingface dataset:
npm package: @rakannimer/render-stream
Description: ``` git clone https://github.com/ts-bps/ts-react-component my-ts-react-component cd my-ts-react-component rm -rf .git yarn yarn start ```
Latest version: 0.1.4

## TypeScript React Component

```
git clone https://github.com/ts-bps/ts-react-component my-ts-react-component
cd my-ts-react-component
rm -rf .git
yarn
yarn start
```
npm package: @rakemoon/eslint-config
Description: Personal preferable eslint config
Author: Rakemoon
Latest version: 2.0.3

# eslint-config

personal preferable eslint-config, its a bit strict actually.

## Features

all of these configs are written in ESlint Flat Config.

- [common](./config/common.mjs) - common javascript rules.
- [typescript](./config/typescript.mjs) - for usage with typescript.
- [stylistic](./config/stylistic.mjs) - for code styling with [ESlint Stylistic](https://eslint.style).
- [node](./config/node.mjs) - for usage with a javascript runtime environment.
- [modules](./config/modules.mjs) - for usage with ESModules.

## Configuration

Create an `eslint.config.mjs` file in the project root,
and just export the rule you want !

Example:

```js
import { common, modules, node, stylistic, typescript } from "@rakemoon/eslint-config";

export default [...common, ...modules, ...node, ...stylistic, ...typescript];
```
npm package: @rakered/errors
Description: Convenient custom errors matching http status code
Author: Stephan Meijer
Latest version: 1.1.0

# @rakered/errors

Convenient custom errors matching http status code

![social image](https://github.com/rakered/rakered/raw/main/packages/errors/docs/social.jpg)

## Usage

```js
import { AuthenticationError } from '@rakered/errors';

throw new AuthenticationError('you need to be logged in');
// » { code: 401, message: 'you need to be logged in' }
```
npm package: @rakered/forms
Description: Tiny helper to help with form submissions
Author: Stephan Meijer
Latest version: 1.5.1

# @rakered/forms

Tiny helper to help with form submissions

![social image](https://github.com/rakered/rakered/raw/main/packages/forms/docs/social.jpg)

## Usage

The most basic helper is `getFormData`, it takes either the `event` directly, or an HTML `form` element. What it returns, is a dictionary holding the values of the form.

```js
import { getFormData } from '@rakered/forms';

const onSubmit = (event) => {
  const data = getFormData(event);
  // » { name: 'smeijer', password: { digest: 'd03…83e', algorithm: 'sha-256' } }
};

<form onSubmit={onSubmit}>
  <input name="user" />
  <input name="password" type="password" />
</form>;
```

Because we often want to wrap submit handlers between `event.preventDefault()` and `return false`, there is a `handleSubmit` helper that does exactly that.

```js
import { handleSubmit } from '@rakered/forms';

const onSubmit = handleSubmit((values) => {
  // » { name: 'smeijer' }
});

<form onSubmit={onSubmit}>
  <input name="user" />
</form>;
```

### Path expansions

Where applicable, input names will be expanded to object structures

```js
<form onSubmit={onSubmit}>
  <input name="user.name" value="Stephan Meijer" />
  <input name="user.age" type="number" value="34" />
  <input name="hobbies[]" value="chess" />
  <input name="hobbies[]" value="art" />
</form>
```

serializes to:

```json5
{
  user: {
    name: 'Stephan Meijer',
    age: 34,
  },
  hobbies: ['chess', 'art'],
}
```

### Type Coercion

A number of specific input types, are coerced to the proper data type.

- **password** _{ digest: String, algorithm: 'sha-256' }_
  This one is important, so let's start with that. Passwords are hashed using [@rakered/hash][rakered/hash], so you won't be reading the password that the user entered. Please don't try to work arround this. Instead, embrace it.

- **datetime-local** _Date_
  The `datetime-local` input stores a full date, so the is converted to a proper Date. Other date-like fields, such as `date`, `time`, or `week` only support partial dates, and are left alone.

- **checkbox** _Boolean_

- **number** _Number_

- **range** _Number_

### Typescript

Both methods are typed and accept a generic to make the `values` a typed object. Together with the typecoercion, this can simplify form handling a lot.

```tsx
interface User {
  name: string;
  age: number;
}

const signup = handleSubmit<User>((values) => {
  // » { name: 'smeijer', age: 34 }
});

<form onSubmit={signup}>
  <input name="user" />
  <input name="age" type="number" />
</form>;
```

[rakered/hash]: https://github.com/rakered/rakered/tree/main/packages/hash
npm package: @rakered/hash
Description: A tiny, zero dependency, SHA256 hashing algorithm that can run in both the browser and in node.
Author: Stephan Meijer
Latest version: 1.0.2

# @rakered/hash

A tiny, zero dependency, SHA256 hashing algorithm that can run in both the browser and in node.

![social image](https://github.com/rakered/rakered/raw/main/packages/hash/docs/social.jpg)

## Usage:

```js
import hash from '@rakered/hash';

const hashedPassword = hash('hunter2');
// » { algorithm: 'sha-256', digest: 'f52f…f6c7' }
```

## Alternatives

If you're looking for something that only needs to run on nodejs, you might want to use the native `crypto` module instead.

```js
import crypto from 'crypto';

function nodeHash(data) {
  return crypto.createHash('sha256').update(data).digest('hex');
}

nodeHash('hunter2');
// » f52f…f6c7
```

If you're looking for something that only needs to run on modern browsers, you might want to use the native `crypto` module instead.

```js
async function browserHash(data) {
  const encoded = new TextEncoder().encode(data);
  const buffer = await crypto.subtle.digest('SHA-256', encoded);
  const array = Array.from(new Uint8Array(buffer));
  return array.map((b) => ('00' + b.toString(16)).slice(-2)).join('');
}

await browserHash('hunter2');
// » f52f…f6c7
```
npm package: @rakesh.rk1/react-timeline-editor
Description: React Video Timeline
Author: Rakesh
Latest version: 0.1.5

# React Timeline Editor
This repo is forked from [xzdarcy/react-timeline-editor](https://github.com/xzdarcy/react-timeline-editor)
[![npm version](https://img.shields.io/npm/v/@rakesh.rk1/react-timeline-editor.svg?style=flat-square)](https://www.npmjs.com/package/@rakesh.rk1/react-timeline-editor)

**[React Timeline Editor](https://zdarcy.com/)** is a react component used to quickly build a timeline animation editor.

## Getting Started

```bash
npm i @rakesh.rk1/react-timeline-editor
```

```ts
import { Timeline, TimelineEffect, TimelineRow } from '@rakesh.rk1/react-timeline-editor';
import React from 'react';

const mockData: TimelineRow[] = [{
    id: "0",
    actions: [
      {
        id: "action00",
        start: 0,
        end: 2,
        effectId: "effect0",
      },
    ],
  },
  {
    id: "1",
    actions: [
      {
        id: "action10",
        start: 1.5,
        end: 5,
        effectId: "effect1",
      }
    ],
}]

const mockEffect: Record<string, TimelineEffect> = {
  effect0: {
    id: "effect0",
    name: "效果0",
  },
  effect1: {
    id: "effect1",
    name: "效果1",
  },
};

const TimelineEditor = () => {
  return (
      <Timeline
        editorData={mockData}
        effects={mockEffect}
      />
  );
};
```

## Documention
Checkout the [Docs](https://zdarcy.com/) for a demonstration of some basic and advanced features.