open-index/open-npm huggingface dataset:
npm package: @sib61/react-classnames
Description: ```js  import {Css} from '@sib61/react-classnames'  import styles from './index.module.css'
Author: sib61
Latest version: 1.2.9

```js
 import {Css} from '@sib61/react-classnames'
 import styles from './index.module.css'

 export function MyComponent(){
   return <Css module={styles}>
     {
      //your jsx goes here
      //write your module css classnames as normal string like global css classnames 
     }
  </Css>
 }
```


```js
 import {Css} from '@sib61/react-classnames'
 import styles from './index.module.css'

 export function MyComponent({children}){
   return <Css module={styles} ignore={[children]}>
     {
      //your jsx goes here
      //write your module css classnames as normal string like global css classnames 
     }
   </Css>
 }
```

```css
  .div{

  }
  .li{

  }
  .ul{

  }
```

you can directly style your <element></element> by creating a 
class named .element . such as .div class will be applied for all div in 
that component automatically.
npm package: @sibabale/learnstorybook-design-system
Description: torybook design systems tutorial
Author: zbisj
Latest version: 0.1.0

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/)
npm package: @siberiacancode/apicraft
Description: Generate rest api for your api with one command
Author: SIBERIA CAN CODE 🧊
Latest version: 1.8.0

# 🔮 apicraft

Generate types, requests and hooks for your API with one command.

## Installation

```bash
npm install @siberiacancode/apicraft
```

## Usage

Create `apicraft.config.ts`:

```typescript
import { apicraft } from '@siberiacancode/apicraft';

export default apicraft([
  {
    input: 'api.yaml',
    output: 'generated/api',
    instance: 'fetches',
    nameBy: 'path',
    groupBy: 'tag'
  }
]);
```

Then use:

```bash
npx apicraft generate
```

## CLI

### generate

```bash
npx apicraft generate
```

- `--input, -i` - Path to input OpenAPI specification file (YAML or JSON)
- `--output, -o` - Path to output folder for generated files
- `--config, -c` - Path to a specific `apicraft.config.(js|ts)` file

## Configuration

Apicraft consumes an array of options exported from `apicraft.config.ts`.

### `baseUrl`

`baseUrl` lets you describe the path prefix that every request should strip while generating the
client. This is particularly useful when a reverse-proxy rewrites the upstream path.

```ts
import { apicraft } from '@siberiacancode/apicraft';

export default apicraft([
  {
    input: 'api.yaml',
    output: 'generated/api',
    baseUrl: '/api', // drop /api when generating request paths
    instance: 'fetches'
  }
]);
```

### `runtimeInstance`

Set the `instance` option to an object to keep using an HTTP client you already initialize at runtime
while still benefiting from generated request helpers. The `runtimeInstancePath` is an import that apicraft will use instead of creating a new instance.

```ts
export default apicraft([
  {
    input: 'api.yaml',
    output: 'generated/api',
    baseUrl: '/api',
    instance: {
      name: 'axios',
      runtimeInstancePath: './src/lib/http/axiosInstance' // must export { instance }
    }
  }
]);
```

Also in that file you can define custom request return type/interface that will be used instead of default one:

```ts
export type ApicraftApiResponse<Data, Error> = AxiosResponse<Data | Error>;
```

## Client Instances

Apicraft supports three HTTP client instances:

### Fetches

Uses `@siberiacancode/fetches` for making requests:

```json
{
  "input": "api.yaml",
  "output": "generated/api",
  "instance": "fetches"
}
```

### Axios

Uses `axios` for making requests:

```json
{
  "input": "api.yaml",
  "output": "generated/api",
  "instance": "axios"
}
```

### Ofetch

Uses `ofetch` for making requests:

```json
{
  "input": "api.yaml",
  "output": "generated/api",
  "instance": "ofetch"
}
```

## Plugins

### TanStack Query Plugin

Generate React Query query, mutations and options for your API requests:

```json
{
  "input": "api.yaml",
  "output": "generated/api",
  "instance": "fetches",
  "plugins": ["tanstack"]
}
```
npm package: @siberiacancode/eslint
Description: eslint configs
Author: SIBERIA CAN CODE 🧊
Latest version: 2.16.13

# 🔮 eslint

A shared ESLint configuration for consistent code linting across projects.

## Installation

```bash
npm install @siberiacancode/eslint
```

## Usage

```javascript
import { eslint } from '@siberiacancode/eslint';

export default eslint({
  typescript: true
});
```
npm package: @siberiacancode/fetches
Description: fetch instance
Author: SIBERIA CAN CODE 🧊
Latest version: 1.14.1

# 🔮 fetches

A lightweight and flexible HTTP client for making API requests.

## Installation

```bash
npm install @siberiacancode/fetches
```

## Usage

```typescript
import fetches from '@siberiacancode/fetches';

const response = await fetches.get<User[]>('/users');
```

## Custom instance

```typescript
const api = fetches.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json'
  }
});

api.interceptors.request.use(
  (config) => {
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  (error) => Promise.reject(error)
);
```

## Request wrapper

```typescript
interface GetUsersParams {
  limit: number;
  page: number;
}

const getUsers: ApiFetchesRequest<GetUsersParams, any[]> = ({ params, config }) =>
  fetches.get('/users', {
    ...config,
    params: { ...config?.params, ...params }
  });
```

## Response parse

The fetches library provides flexible response parsing options to handle different types of responses. You can specify how to parse the response body using predefined modes or custom functions. If no parse mode is specified, the response will be automatically parsed based on the `Content-Type` header:

```typescript
const response = await fetches.get('/users', { parse: 'json' });
```

### Custom parse functions

You can provide a custom function that takes a Response object and returns a Promise with parsed data. This is useful for handling special response formats or custom parsing logic.

```typescript
const response = await fetches.get('/users', { parse: (data) => data.json() });
```

### Raw response

To get the raw response body without any parsing, use the `'raw'` parse mode. This is useful when you need to handle the response manually or when working with binary data.

```typescript
const response = await fetches.get('/binary-file', { parse: 'raw' });
```

## Base URL

You can set the base URL when creating a new instance:

```typescript
import { Fetches } from '@siberiacancode/fetches';

const api = new Fetches({
  baseURL: '/api'
});

await api.get('/users'); // /api/users
```

You can override the base URL for individual requests using the `baseURL` option:

```typescript
await api.get('/users', { baseUrl: '/api' });
```

## Context

The library supports a context system that allows you to pass data through the entire request lifecycle.

```typescript
const response = await fetches.get('/users', { context: 'data' });

console.log('response', response.options.context); // 'data'
```
npm package: @siberiacancode/prettier
Description: prettier configs
Author: SIBERIA CAN CODE 🧊
Latest version: 1.6.1

# 🔮 prettier

A shared prettier configuration for consistent code formatting across projects.

## Installation

```bash
npm install @siberiacancode/prettier
```

## Usage

```javascript
import { prettier } from '@siberiacancode/prettier';

export default prettier;
```
npm package: @siberiacancode/reactuse
Description: The ultimate collection of react hooks
Author: SIBERIA CAN CODE 🧊
Latest version: 0.3.19

<div align="center">
  <a href="https://siberiacancode.github.io/reactuse/">
    <picture>
      <img alt="React Use logo" src="https://siberiacancode.github.io/reactuse/logo.svg" height="128">
    </picture>
  </a>
  <h1>React Use</h1>

<a href="https://www.npmjs.com/package/@siberiacancode/reactuse"><img alt="NPM version" src="https://img.shields.io/npm/v/@siberiacancode/reactuse.svg?style=for-the-badge&labelColor=000000"></a>
<a href="https://github.com/siberiacancode/reactuse/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/npm/l/@siberiacancode/reactuse.svg?style=for-the-badge&labelColor=000000"></a>
<a href="https://github.com/siberiacancode/reactuse/discussions"><img alt="Join the community on GitHub" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&logo=React&labelColor=000000&logoWidth=20"></a>

</div>

React Use delivers **production-ready hooks** that solve real-world problems. Built with **TypeScript-first** approach, **SSR compatibility**, and **tree-shaking optimization** - everything you need to build modern React applications. Improve your react applications with our library 📦 designed for comfort and speed.

## Documentation

Visit https://siberiacancode.github.io/reactuse to view the full documentation.

## Getting Started

```bash
npm install @siberiacancode/reactuse
```

```tsx
import { useCounter } from '@siberiacancode/reactuse';

const App = () => {
  const counter = useCounter(0);

  return (
    <div>
      <h1>Count: {counter.value}</h1>
      <button onClick={() => counter.inc()}>+1</button>
      <button onClick={() => counter.dec()}>-1</button>
    </div>
  );
};
```

## CLI installation

Use the CLI to add hooks to your project with [useverse](https://www.npmjs.com/package/useverse).

```bash
npx useverse@latest init
```

```bash
npx useverse@latest add [hook]
```

You will be presented with a list of hooks to choose from:

```bash
Which hooks would you like to add? › Space to select. A to toggle all.
Enter to submit.

◯  useActiveElement
◯  useAsync
◯  useBattery
◯  useBluetooth
◯  useBoolean
◯  useBreakpoints
◯  useBrowserLanguage
◯  useClickOutside
◯  useClipboard
◯  useConst
```
npm package: @siberiacancode/vitest
Description: vitest config
Author: SIBERIA CAN CODE 🧊
Latest version: 2.4.1

# 🔮 vitest

A shared Vitest configuration for consistent testing across projects.

## Installation

```bash
npm install @siberiacancode/vitest
```

## Usage

```javascript
import { vitest } from '@siberiacancode/vitest';

export default vitest;
```
npm package: @siberiacancode/yandex-metrika
Description: Yandex Metrika integration helpers
Author: SIBERIA CAN CODE 🧊
Latest version: 1.0.1

# 🔮 yandex-metrika

Helpers for integrating Yandex Metrika into your app.

## Installation

```bash
npm add @siberiacancode/yandex-metrika
```

## Script setup

Inject the Metrika tag with `getYandexMetrikaScript`.

```typescript
import { getYandexMetrikaScript } from '@siberiacancode/yandex-metrika';

const counterId = 'your-counter-id';

<script dangerouslySetInnerHTML={{ __html: getYandexMetrikaScript(counterId) }} />;
```

## NoScript image

If JavaScript is disabled, you can render the tracking pixel:

```typescript
import { YandexMetrikaNoScript } from '@siberiacancode/yandex-metrika';

const counterId = 'your-counter-id';

<YandexMetrikaNoScript counterId={counterId} />;
```

## Create typed metrika instance

Use `createYandexMetrika` to create a typed tracker function for your counter.

```typescript
import { createYandexMetrika } from '@siberiacancode/yandex-metrika';

const counterId = 'your-counter-id';

interface YandexMetrikaEventBadgeClick {
  eventName: 'reachGoal';
  params: { type: 'javascript' | 'typescript' };
  target: 'badge-click';
}

interface YandexMetrikaEventSearch {
  eventName: 'reachGoal';
  params: { value: string };
  target: 'search';
}

const yandexMetrika = createYandexMetrika<YandexMetrikaEventBadgeClick | YandexMetrikaEventSearch>(
  counterId
);
```

## Send events

```typescript
yandexMetrika({
  eventName: 'reachGoal',
  target: 'badge-click',
  params: { type: 'javascript' }
});
```
npm package: @siberianmh/gitlab-api
Description: A minimal GitLab API wrapper
Latest version: 0.0.4

# GitLab API

> 🚦 This project implements API endpoints what are we would to use itself, if
> you need other API endpoints, feel free to contribute or open issue

## Installing

```sh
yarn add @siberianmh/gitlab-api
# or
npm install @siberianmh/gitlab-api
```

## Usage

```ts
import { GitLab } from '@siberianmh/gitlab-api'

const gitlab = new GitLab({
  hostname: 'https://gitlab.example.com',
  token: 'XXXXX',
})

async function main() {
  const { data } = await gitlab.mergeRequest.getMergeRequest({
    project_id: 1,
    merge_request_iid: 1,
  })

  console.log(data)
}

main().catch((err) => {
  console.log(err)
  process.exit(1)
})
```

## License

[MIT](https://github.com/siberianmh/siberianmh/blob/master/LICENSE.md)