open-index/open-npm huggingface dataset:
npm package: @mertsolak/canvas-image-visualizer
Description: It visualizes images with given texts or shapes
Latest version: 1.2.0

## Canvas Image Visualizer

It visualizes images with given texts or shapes

![npm](https://img.shields.io/npm/v/@mertsolak/canvas-image-visualizer)
![license](https://img.shields.io/npm/l/@mertsolak/canvas-image-visualizer)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/canvas-image-visualizer)
![issue](https://img.shields.io/github/issues/mert-solak/canvas-image-visualizer)

## Installation

Use node package manager to install @mertsolak/canvas-image-visualizer.

```bash
npm i @mertsolak/canvas-image-visualizer
```

## Basic Usage

```typescript
import { CanvasImageVisualizer } from '@mertsolak/canvas-image-visualizer';

const App = () => (
  <div>
    <CanvasImageVisualizer
      src="/image.png"
      particleNumberMultiplier={15}
      drawerColor="#03A062"
      drawer={{ textOptions: ['0', '1'], type: 'text' }}
    />
  </div>
);
```
npm package: @mertsolak/canvas-make-visible
Description: It makes background image visible at mouse coordinates with given options.
Latest version: 1.0.6

## Canvas Make Visible

It makes background image visible at mouse coordinates with given options.

![npm](https://img.shields.io/npm/v/@mertsolak/canvas-make-visible)
![license](https://img.shields.io/npm/l/@mertsolak/canvas-make-visible)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/canvas-make-visible)
![issue](https://img.shields.io/github/issues/mert-solak/canvas-make-visible)

## Installation

Use node package manager to install @mertsolak/canvas-make-visible.

```bash
npm i @mertsolak/canvas-make-visible
```

## Basic Usage

```typescript
import { CanvasMakeVisible } from '@mertsolak/canvas-make-visible';

const App = () => <CanvasMakeVisible width={500} height={500} backgroundImage={backgroundImagePath} />;
```
npm package: @mertsolak/canvas-words
Description: When cursor hover over the words, letters are separated in the canvas.
Latest version: 1.0.1

## Canvas Words

When cursor hover over the words, letters are separated in the canvas.

![npm](https://img.shields.io/npm/v/@mertsolak/canvas-words)
![license](https://img.shields.io/npm/l/@mertsolak/canvas-words)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/canvas-words)
![issue](https://img.shields.io/github/issues/mert-solak/canvas-words)

## Installation

Use node package manager to install @mertsolak/canvas-words.

```bash
npm i @mertsolak/canvas-words
```

## Basic Usage

```typescript
import { CanvasWords } from '@mertsolak/canvas-words';

const App = () => (
  <CanvasWords
    canvasWidth={500}
    canvasHeight={1080}
    characterSpeed={5}
    sentences={[
      {
        coordinates: { x: 100, y: 300 },
        fontFamily: 'sans-serif',
        fontSize: '20px',
        text: 'Test sentence',
        color: 'black',
        printOption: 'fillText',
      },
    ]}
  />
);
```
npm package: @mertsolak/class-name-helper
Description: Package to manage class names for css-in-js
Latest version: 1.0.0

## Class Name Helper

Package to manage class names for css-in-js

![npm](https://img.shields.io/npm/v/@mertsolak/class-name-helper)
![license](https://img.shields.io/npm/l/@mertsolak/class-name-helper)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/class-name-helper)
![issue](https://img.shields.io/github/issues/mert-solak/class-name-helper)

## Installation

Use node package manager to install @mertsolak/class-name-helper.

```bash
npm i @mertsolak/class-name-helper
```

## Basic Usage

```typescript
const App = () => {
  import { mergeClassNames, shouldMergeClassNames } from '@mertsolak/class-name-helper';
  import styles from './App.module.scss';

  const shouldMerge = true;

  return (
    <div>
      <div className={mergeClassNames(styles.container, styles.hidden)}></div>
      <div className={shouldMergeClassNames(shouldMerge, 1, styles.container, styles.hidden)}></div>
    </div>
  );
};
```
npm package: @mertsolak/console
Description: Virtual console that visualizes typing and executing commands.
Latest version: 1.0.3

## Console

Virtual console that visualizes typing and executing commands.

![npm](https://img.shields.io/npm/v/@mertsolak/console)
![license](https://img.shields.io/npm/l/@mertsolak/console)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/console)
![issue](https://img.shields.io/github/issues/mert-solak/console)

## Installation

Use node package manager to install @mertsolak/console.

```bash
npm i @mertsolak/console
```

## Usage

```typescript
import { Console } from '@mertsolak/console';

const App = () => {
  const commands = [
    { speed: 25, command: 'console.log("command1");', isExecutable: true },
    { speed: 50, command: 'console.log("command2");', isExecutable: false },
  ];

  return <Console commands={commands} containerClassName="container" terminalClassName="terminal" />;
};
```
npm package: @mertsolak/custom-error
Description: Developed to select pre-defined error properties easily.
Latest version: 2.0.0

## Custom Error

Developed to select pre-defined error properties easily.

![npm](https://img.shields.io/npm/v/@mertsolak/custom-error)
![license](https://img.shields.io/npm/l/@mertsolak/custom-error)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/custom-error)
![issue](https://img.shields.io/github/issues/mert-solak/custom-error)

## Installation

Use node package manager to install @mertsolak/custom-error.

```bash
npm i @mertsolak/custom-error
```

## Usage

Create an instance in any file.

```typescript
// custom-error.ts

enum ErrorTypes {
  INTERNAL_SERVER_ERROR,
  BAD_REQUEST,
}

const properties = [
  {
    errorCode: ErrorTypes.INTERNAL_SERVER_ERROR,
    status: 500,
    message: 'Internal Server Error',
  },
  {
    errorCode: ErrorTypes.BAD_REQUEST,
    status: 400,
    message: 'The field ${ arg.fieldName } has to be type of ${ arg.fieldType }',
  },
];

export const customError = new CustomError(ErrorTypes, properties);
```

Import and use custom-error in everywhere.

```typescript
// any-file.ts

import { customError } from './custom-error';

throw customError.select('BAD_REQUEST', { fieldName: 'email', fieldType: 'string' });
// OR
throw customError.select('INTERNAL_SERVER_ERROR');
// OR pre-defined error properties can be overwritten
throw customError.select('INTERNAL_SERVER_ERROR').setName('updatedName').setStatus(404);
```
npm package: @mertsolak/custom-event
Description: Developed to use CustomEvents easily.
Latest version: 1.0.2

## Custom Event

Developed to use CustomEvents easily.

![npm](https://img.shields.io/npm/v/@mertsolak/custom-event)
![license](https://img.shields.io/npm/l/@mertsolak/custom-event)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/custom-event)
![issue](https://img.shields.io/github/issues/mert-solak/custom-event)

## Installation

Use node package manager to install @mertsolak/custom-event.

```bash
npm i @mertsolak/custom-event
```

## Usage

```typescript
import { on, off, once, trigger, broadcast, respond, request } from '@mertsolak/custom-event';

const handleUsernameChange = (data) => console.log(data);

const dataHandler = (incomingData: any) => {
  const { id } = incomingData;

  const user = users.find((id) => id === id);

  return user.username;
};

on('username-change', handleUsernameChange);
off('username-change', handleUsernameChange);
once('username-change', handleUsernameChange);
trigger('username-change', { username });
request('user-name-provider', { id: userId }, 'user-name', handleUsernameChange); // request only one time
respond('user-name', 'user-name-provider', dataHandler); // respond only one time.
broadcast('user-name', 'user-name-provider', dataHandler);
```
npm package: @mertsolak/dom-map
Description: Developed to create dom map easily.
Latest version: 1.0.1

## dom-map

Developed to create dom map easily.

![npm](https://img.shields.io/npm/v/@mertsolak/dom-map)
![license](https://img.shields.io/npm/l/@mertsolak/dom-map)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/dom-map)
![issue](https://img.shields.io/github/issues/mert-solak/dom-map)

## Installation

Use node package manager to install @mertsolak/dom-map.

```bash
npm i @mertsolak/dom-map
```

## Usage

```typescript
import { create } from '@mertsolak/dom-map';

create({ baseURL: 'siteURL', outputPath: './public' });
```
npm package: @mertsolak/file-helper
Description: Package for file management/conversion/download in javascript/typescript
Latest version: 1.0.0

## File Helper

Package for file management/conversion/download in javascript/typescript

![npm](https://img.shields.io/npm/v/@mertsolak/file-helper)
![license](https://img.shields.io/npm/l/@mertsolak/file-helper)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/file-helper)
![issue](https://img.shields.io/github/issues/mert-solak/file-helper)

## Installation

Use node package manager to install @mertsolak/file-helper.

```bash
npm i @mertsolak/file-helper
```

## Basic Usage

```typescript
import { convertBase64ToFile, convertFileToBase64, download } from '@mertsolak/file-helper';

// if base64Data does not include mimeType,
// mimeType has to be provided
const imageInFileFormat = await convertBase64ToFile({
  base64Data: 'data:image/jpeg;base64,...',
  fileName: 'image.jpg',
});
const imageInBase64Format = await convertFileToBase64(imageInFileFormat);

// it can download both format
download(imageInFileFormat);
download(imageInBase64Format);
```
npm package: @mertsolak/permission-manager
Description: Developed for permission management using hexadecimal numbers with typescript support
Latest version: 1.2.1

## Permission Manager

Developed for permission management using hexadecimal numbers with typescript support

![npm](https://img.shields.io/npm/v/@mertsolak/permission-manager)
![license](https://img.shields.io/npm/l/@mertsolak/permission-manager)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/permission-manager)
![issue](https://img.shields.io/github/issues/mert-solak/permission-manager)

## Installation

Use node package manager to install @mertsolak/permission-manager.

```bash
npm i @mertsolak/permission-manager
```

## Basic Usage

```typescript
import { Permissions, createPermissionNames } from '@mertsolak/permission-manager';

const permissionNames = createPermissionNames('login', 'logout', 'profile', 'settings');
const initialPermissionNumber = '0x0'; // this is optional, default is 0x0;

const permissions = new Permissions(permissionNames, initialPermissionNumber);

permission.addPermissions(['login', 'logout']); // adds login and logout as permissions
permission.removePermissions(['login']); // removes login from the permissions if it exists
permission.verifyPermissions(['login', 'logout'], '&'); // verifies permissions with '&' operator. default operator is '|'.
```
npm package: @mertsolak/react-drop-zone
Description: Package to upload and convert files with drop zone
Latest version: 2.2.2

## React Drop Zone

Package to upload and convert files with drop zone

![npm](https://img.shields.io/npm/v/@mertsolak/react-drop-zone)
![license](https://img.shields.io/npm/l/@mertsolak/react-drop-zone)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/react-drop-zone)
![issue](https://img.shields.io/github/issues/mert-solak/react-drop-zone)

## Installation

Use node package manager to install @mertsolak/react-drop-zone.

```bash
npm i @mertsolak/react-drop-zone
```

## Basic Usage

```typescript
import { DropZone, useDropZone } from '@mertsolak/react-drop-zone';

const App = () => {
  // converted files will be available in files array
  // fileInDropZone can be used to style component when any file drag over the drop zone
  // fileList is the original list that comes from event
  // control needs to be given to the component to get updated states
  // 'File' is the default value for the getFilesAs, if it is not provided
  const { files, control, fileList, totalFileSize, errors, fileInDropZone } = useDropZone({
    getFilesAs: 'base64',
  });

  // default components can be overwritten with buttonComponent
  // and contentComponent or container style can be updated via className
  return <DropZone multiple accept={['.png']} control={control} />;
};
```
npm package: @mertsolak/render-by-scroll
Description: It renders components, when they are in viewport.
Latest version: 5.0.0

## Render By Scroll

It renders components, when they are in viewport.

![npm](https://img.shields.io/npm/v/@mertsolak/render-by-scroll)
![license](https://img.shields.io/npm/l/@mertsolak/render-by-scroll)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/render-by-scroll)
![issue](https://img.shields.io/github/issues/mert-solak/render-by-scroll)

## Installation

Use node package manager to install @mertsolak/render-by-scroll.

```bash
npm i @mertsolak/render-by-scroll
```

## Usage

```typescript
import { RenderByScroll } from '@mertsolak/render-by-scroll';

const App = () => (
  <RenderByScroll>
    <p>This p tag will be rendered when it is in viewport</p>
  </RenderByScroll>
);

export default App;
```
npm package: @mertsolak/sitemap-crawler
Description: Developed to create sitemap easily.
Latest version: 1.0.2

## Sitemap Crawler

Developed to create sitemap easily.

![npm](https://img.shields.io/npm/v/@mertsolak/sitemap-crawler)
![license](https://img.shields.io/npm/l/@mertsolak/sitemap-crawler)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/sitemap-crawlert)
![issue](https://img.shields.io/github/issues/mert-solak/sitemap-crawler)

## Installation

Use node package manager to install @mertsolak/sitemap-crawler.

```bash
npm i @mertsolak/sitemap-crawler
```

## Usage

```typescript
import { crawl } from '@mertsolak/sitemap-crawler';

crawl({ baseURL: 'siteURL', outputPath: './public' });
```
npm package: @mertsolak/translator
Description: Lightweight translator to switch between multiple language files with **auto complete** and **input validation** for React.
Latest version: 3.0.1

## Translator

Lightweight translator to switch between multiple language files with **auto complete** and **input validation** for React.

![npm](https://img.shields.io/npm/v/@mertsolak/translator)
![license](https://img.shields.io/npm/l/@mertsolak/translator)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/translator)
![issue](https://img.shields.io/github/issues/mert-solak/translator)

## Installation

Use node package manager to install @mertsolak/translator

```bash
npm i @mertsolak/translator
```

## Basic Usage

Create a language file

```typescript
  // languageFiles.ts

  export const languageFiles = {
    language1: {
      homePage: {
        title: 'title',
      }
    }
    language2: {
      homePage: {
        title: 'title'
      }
    }
  };
```

Create a config file

```typescript
// config.ts

export const options = {
  validateLanguageFiles: true,
};
```

Export type of the language file

```typescript
// types.ts

import { languageFiles } from './languageFiles';

export type LanguageFiles = typeof languageFiles;
```

Initialize it in the root component

```typescript
// Root.tsx

import { useState } from 'react';

import { TranslatorProvider } from '@mertsolak/translator';

import { languageFiles } from './languageFiles';
import { options } from './config';

const Root = () => {
  const [currentLanguage, setCurrentLanguage] = useState('language1'); // Also redux can be used

  return (
    <TranslatorProvider languageFiles={languageFiles} languagePreference={currentLanguage} options={options}>
      <App />
    </TranslatorProvider>
  );
};

export default Root;
```

Use it everywhere

```typescript
// AnyComponent.tsx

import { useTranslator } from '@mertsolak/translator';

import { LanguageFiles } from './types'; // Type is needed for auto completion

const HomePage = () => {
  const translator = useTranslator<LanguageFiles>('homePage');

  return (
    <div>
      <p>{translator.title}</p>
    </div>
  );
};

export default HomePage;
```

## Additional

languageFiles and languagePreference can be updated in everywhere.

```typescript
// HomePage.tsx

import { useEffect, useState, useContext } from 'react';

import { TranslatorContext } from '@mertsolak/translator';

import { newLanguageFiles } from './newLanguageFiles';

const HomePage = () => {
  const [newLanguagePreference, setNewLanguagePreference] = useState('language1');

  const { setLanguageFiles, setLanguagePreference } = useContext(TranslatorContext);

  useEffect(() => {
    setLanguageFiles(newLanguageFiles);
    setLanguagePreference(newLanguagePreference);
  }, []);

  return <p>Home Page</p>;
};

export default HomePage;
```
npm package: @mertsolak/use-immutable-ref
Description: It sets the element in immutable way.
Latest version: 1.0.3

## Use Immutable Ref

It sets the element in immutable way.

![npm](https://img.shields.io/npm/v/@mertsolak/use-immutable-ref)
![license](https://img.shields.io/npm/l/@mertsolak/use-immutable-ref)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/use-immutable-ref)
![issue](https://img.shields.io/github/issues/mert-solak/use-immutable-ref)

## Installation

Use node package manager to install @mertsolak/use-immutable-ref.

```bash
npm i @mertsolak/use-immutable-ref
```

## Usage

```typescript
import { useImmutableRef } from '@mertsolak/use-immutable-ref';

const App = () => {
  const [element, setRef] = useImmutableRef<HTMLDivElement>();

  return <div ref={setRef} />;
};

export default App;
```
npm package: @mertsolak/web-socket
Description: Package for web socket management.
Latest version: 1.0.0

## Web Socket

Package for web socket management.

![npm](https://img.shields.io/npm/v/@mertsolak/web-socket)
![license](https://img.shields.io/npm/l/@mertsolak/web-socket)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/web-socket)
![issue](https://img.shields.io/github/issues/mert-solak/web-socket)

## Installation

Use node package manager to install @mertsolak/web-socket.

```bash
npm i @mertsolak/web-socket
```

## Basic Usage

```typescript
import React, { useEffect } from 'react';
import { Socket } from '@mertsolak/web-socket';

export const App = () => {
  useEffect(() => {
    const socket = new Socket('ws://localhost:4000');

    socket.onError = (event) => {
      console.log('error', event);
    };
    socket.onMessage = (event) => {
      console.log('message', event);
    };
    socket.onClose = (event) => {
      console.log('close', event);
    };
    socket.onOpen = (event) => {
      console.log('open', event);
    };

    socket.connect();
    socket.listen((data) => {
      console.log('second listen', data);
    });
  }, []);

  return <p>App</p>;
};
```
npm package: @mertsolak/web-worker-helper
Description: Developed to use web workers easier.
Latest version: 1.0.0

## Web Worker Helper

Developed to use web workers easier.

![npm](https://img.shields.io/npm/v/@mertsolak/web-worker-helper)
![license](https://img.shields.io/npm/l/@mertsolak/web-worker-helper)
![size](https://img.shields.io/bundlephobia/min/@mertsolak/web-worker-helper)
![issue](https://img.shields.io/github/issues/mert-solak/web-worker-helper)

## Installation

Use node package manager to install @mertsolak/web-worker-helper.

```bash
npm i @mertsolak/web-worker-helper
```

## Basic Usage

```typescript
// callback that processes the data
const add = (rawData: number[]) => {
  return rawData[0] + rawData[1];
};

// callback that gets the result as a parameter.
const getResult = (result: number) => {
  console.log(result);
};

createWebWorker([1, 2], add, getResult);
```
npm package: @meru/ml-levenberg-marquardt
Description: Curve fitting method in javascript
Author: Miguel Asencio
Latest version: 1.0.4

# levenberg-marquardt

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][codecov-image]][codecov-url]
[![David deps][david-image]][david-url]
[![npm download][download-image]][download-url]

Curve fitting method in javascript

## Installation

`$ npm install ml-levenberg-marquardt`

## [API Documentation](https://mljs.github.io/levenberg-marquardt/)

This algorithm is based on the article [Brown, Kenneth M., and J. E. Dennis. "Derivative free analogues of the Levenberg-Marquardt and Gauss algorithms for nonlinear least squares approximation." Numerische Mathematik 18.4 (1971): 289-297.](https://doi.org/10.1007/BF01404679)

In order to get a general idea of the problem you could also check the [Wikipedia article](https://en.wikipedia.org/wiki/Levenberg%E2%80%93Marquardt_algorithm).

## Example

```js
// import library
import LM from 'ml-levenberg-marquardt';
// const LM = require('ml-levenberg-marquardt').default;

// function that receives the parameters and returns
// a function with the independent variable as a parameter
function sinFunction([a, b]) {
  return (t) => a * Math.sin(b * t);
}

// array of points to fit
let data = {
  x: [
    /* x1, x2, ... */
  ],
  y: [
    /* y1, y2, ... */
  ]
};

// array of initial parameter values
let initialValues = [
  /* a, b, c, ... */
];

const options = {
  damping: 1.5,
  initialValues: initialValues,
  gradientDifference: 10e-2,
  maxIterations: 100,
  errorTolerance: 10e-3
};

let fittedParams = LM(data, sinFunction, options);
```

Or test it in [Runkit](https://runkit.com/npm/ml-levenberg-marquardt)

## License

[MIT](./LICENSE)

[npm-image]: https://img.shields.io/npm/v/ml-levenberg-marquardt.svg?style=flat-square
[npm-url]: https://npmjs.org/package/ml-levenberg-marquardt
[travis-image]: https://img.shields.io/travis/mljs/levenberg-marquardt/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/mljs/levenberg-marquardt
[codecov-image]: https://img.shields.io/codecov/c/github/mljs/levenberg-marquardt.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/mljs/levenberg-marquardt
[david-image]: https://img.shields.io/david/mljs/levenberg-marquardt.svg?style=flat-square
[david-url]: https://david-dm.org/mljs/levenberg-marquardt
[download-image]: https://img.shields.io/npm/dm/ml-levenberg-marquardt.svg?style=flat-square
[download-url]: https://npmjs.org/package/ml-levenberg-marquardt
npm package: @meru2802/nexus-modscript-composer
Description: Compose multi-layer deployment scripts for NexusEPM agents (L0 → L1 → L2 pipeline)
Latest version: 1.0.0

# modular_scripts_testing

To install dependencies:

```bash
bun install
```

To run:

```bash
bun run index.ts
```

This project was created using `bun init` in bun v1.3.5. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
npm package: @meruem117/vue-seamless-scroll
Description: A simple vue seamless scroll component.
Author: Meruem117
Latest version: 0.1.8

# vue-seamless-scroll

> github: https://github.com/Meruem117/vue-seamless-scroll



[Document for vue2](https://github.com/Meruem117/vue-seamless-scroll/tree/vue2#readme)



## Install

```shell
# vue3
# yarn
yarn add @meruem117/vue-seamless-scroll@latest --dev
# npm
npm i @meruem117/vue-seamless-scroll@latest --save-dev

# vue2
# yarn
yarn add @meruem117/vue-seamless-scroll@latest-v2 --dev
# npm
npm i @meruem117/vue-seamless-scroll@latest-v2 --save-dev
```



## Use

`main.ts`

```ts
import { createApp } from 'vue'
import App from './App.vue'
import { VueSeamlessScroll } from '@meruem117/vue-seamless-scroll'

const app = createApp(App)
app.use(VueSeamlessScroll)
app.mount('#app')
```



`env.d.ts`

```ts
declare module '@meruem117/vue-seamless-scroll'
```



`App.vue`

```vue
<template>
    <div class="box">
        <vue-seamless-scroll class="list" :data="data" direction="top" :steep="0.5" roller :distance="20">
            <div class="list-item" v-for="item, index in data" :key="index">{{ item.text }}</div>
        </vue-seamless-scroll>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let data = ref([
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
    { text: 'test' },
])
</script>

<style scoped>
.box {
    width: 100%;
    padding-top: 50px;
    display: flex;
    justify-content: center;
}

.list {
    height: 300px;
    overflow: hidden;
}

.list-item {
    width: 500px;
    height: 100px;
    margin-bottom: 20px;
    color: #000;
    font-size: 14px;
    background-color: aliceblue;
}
</style>
```



## Api

| 属性          | 说明                         | 类型                                   | 默认值 |
| ------------- | ---------------------------- | -------------------------------------- | ------ |
| **direction** | 滚动的方向                   | 'top' \| 'bottom' \| 'left' \| 'right' | 'top'  |
| **steep**     | 滚动的速率                   | number                                 | 0.5    |
| **roller**    | 是否可以使用滚轮滚动         | boolean                                | true   |
| **distance**  | 滚轮滚动的速率               | number                                 | 20     |
| **data**      | 接收异步数据，同步任务可不传 | array                                  | -      |



## Tips

- 如没有显示请为嵌入的标签设置字体大小
- 当 `direction` 为 `top` 或 `bottom` 时，要为组件设置高度；当 `direction` 为 `left` 或 `right` 时，要为组件设置宽度
- reference: [@david-j/vue-j-scroll](https://github.com/DavidJ-0/vue-j-scroll.js)
npm package: @merutech/react-design-system
Description: Meru's design system React implementation
Author: Meru Technology
Latest version: 0.1.13

# Ixchel
Meru's design system React implementation

## Stack used
* Typescript
* Vanilla-extract
* radix-ui
* Storybook
* Jest, testing-library/react

## Implementation things to know

1. Generally, wrap your component in `React.forwardRef`
2. Use the right element for the job, don't use a div with onClick if what you want is a button
3. Allow common dom properties to be passed to underlying component (eg. custom data attributes, aria attributes, common events)

## Important things to know

1. Directory naming and file structure may be a little different to what you're used to. Following rules apply:
    * Directories and files must be named in **lower-kebab-case**
    * Collocation is desired and expected inside each componente folder, for example, if you were creating a button component:
    ```
    button/
      button.tsx <- component lives here
      button.styles.ts <- if you need to take style specific code outside main componente file
      button.stories.tsx <- component stories
      button.test.tsx <- component tests
      index.ts <- barrel file, must export only public api of this component
    ```
2. Commit messages must follow convetional commits format (https://www.conventionalcommits.org/en/v1.0.0/), this is enforced through a `commit-msg` hook
3. Aim for the best DX, typescript config is set to `strict: true` to enforce everything to be fully typed, this is a dev to dev project and complete and correct types eases the implementation.
4. Implement a design system may look like just writing css at first, but there are many things going on behind scenes:
    * Component API definition: This one is really important and must not be taken lightly, take time to think, research, and discuss with others which approach it's best. Why it's important? Changes to a componente APIs means changes in every project using the component.
    * Research: We are in the way of becoming DS experts, but not quite there yet, take time to investigate existing design systems implemented in react. Some nice examples are [Orbit](https://orbit.kiwi/components/), [Braid](https://seek-oss.github.io/braid-design-system/), [Primer](https://primer.style/react/) and [Vibe](https://style.monday.com/)
    * Typings: It reflects your componente API and enables autocompletion and typesafety in consumer projects.
    * Tests: Always important, a bug in this components library it's a bug in every consumer library.
npm package: @merviihq/react-native-cube-lite
Description: React-native cube 
Author: Mervii Technologies LTD
Latest version: 0.1.2

# react-native-cube-lite

react native cube sdk for delivery and payment

## Installation

```sh
npm install '@merviihq/react-native-cube-lite'
```

## Usage

```js
import { View, StyleSheet } from 'react-native';
import CubeLite from '@merviihq/react-native-cube-lite';

// ...

export default function App() {
  return (
    <View style={[styles.container,{alignItems:'center'}]}>

      <CubeLite
        publicKey='CU_PK_TEST-T'
        amount={200.90}
        customerEmail="developers@mervii.com"
        customerName="Mervii Developer"
        customerPhone="07045417072"
        handleDelivery={true}
        chargeDelivery={true}
        onCancel={(data:any)=>console.log(JSON.stringify(data))}
        onFailed={(data:any)=>console.log(JSON.stringify(data))}
        onError={(data:any)=>console.log(JSON.stringify(data))}
        onSuccess={(data:any)=>console.log(JSON.stringify(data))}
        buttonTitle="Pay Now !"
        pickupLocation={{
        region: {
          latitude: 7.427026700000001,
          longitude: 3.8900142,
        },
        city: "Ibadan",
        state_code: "YO",
        country_code: "NG",
        contacts: {
          name: "John Done",
          phone_number: "07045417072",
          phone_number_2: "",
          email: "sales@mervii.com",
        },
        pickup_date: "09-07-2024",
        pickup_time: "03:40PM",
        pickup_note: "Ask for John",
        formattedAddress: "95 Poly Road Sango, Ibadan 200132, Oyo, Nigeria",
      }}

      />
    </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)