open-index/open-npm huggingface dataset:
npm package: @irosgrim/fetch-interceptor
Latest version: 1.0.0

# Fetch interceptor


Implements interceptors for requests or responses from fetch requests.

## Usage

```typescript
const request = new FetchInterceptor();

// create a request interceptor
// example usage: maybe you want to modify headers before the request is sent
request.useRequestInterceptor((url, config) => {
  console.log("Intercepted request to: ", url)
  return [url, config];
});

// create response interceptor
// example usage: transform data to camelCase or error handling
request.useResponseInterceptor(async (response) => {
  if (!response.ok ) {
    throw new Error("Network response was not ok");
  }

  const data = await response.clone().json();
  let modifiedData;
  if (Array.isArray(data)) {
    modifiedData = data.map(x => ({title: x.title, intercepted: "xxxx"}))
  } else {
     modifiedData = {title: data.title, intercepted: "xxxx"}
  }
 
  const modifiedResponse = new Response(JSON.stringify(modifiedData), {
    status: response.status,
    statusText: response.statusText,
    headers: response.headers
  });

  
  console.log('Intercepted and modified response');
  return modifiedResponse;
});


request.fetch('https://jsonplaceholder.typicode.com/todos/2')
  .then(r => r.json())
  .then(d => console.log(d))
  .catch(error => console.log('Fetch Error', error));
```
npm package: @irosgrim/react-state-manager
Description: A simple state manager using the observer pattern
Latest version: 0.0.10

A simple state manager using the observer pattern

`npm install @irosgrim/react-state-manager`

or

`yarn add @irosgrim/react-state-manager`


[Check the live example](https://irosgrim.github.io/state-management/)

[Source of the example](https://github.com/irosgrim/state-management)

## How to use it with React.js?

Define your default state and the store. 
You can create multiple:

```ts
// store.ts
import { Store, createHook } from "@irosgrim/react-state-manager"

// define your app state type
export type AppState = {
  profile: { name: string } | null;
  greet: (name: string) => string;
  login: () => void;
  logout: () => void;
  currentState: () => AppState,
};

// initialize the store
const globalStore = new Store();

// create your default state and actions
const appState: AppState = {
  profile: null,
  greet: (name: string) => `Hello ${name}`,
  login: async () => {
    const req = await fetch("https://jsonplaceholder.typicode.com/users");
    if (!req.ok) {
        throw new Error("Can't get profile");
    }
    const data: any[] = await req.json();

    globalStore.setState({
      profile: {
        name: data[Math.floor(Math.random() * data.length)].name,
      }
    })
  },
  logout: () => {
    globalStore.setState({ profile: null });
  },
  // if you want to use the current state in order to create the next state
  currentState: () => globalStore.getState() as AppState,
};

// assign your default state
globalStore.setState(appState);

export const useGlobalStore = createHook(globalStore);
```
Use the store in your components:

```tsx
// in your components
import { useState, useEffect } from "react";
import { useGlobalStore, AppState } from "./store";

export const Profile = () => {
  // take only what you need
  const { profile, login, logout, currentState } = useGlobalStore<Pick<AppState, "profile" | "login" | "logout" | "currentState">>((state) => (
    {
      profile: state.profile,
      login: state.login,
      logout: state.logout,
      currentState: state.currentState
    }
  ));

  useEffect(() => {
    // calling login state action
    login();
  },[])

  return (
    <div>
      {
        profile && `Welcome, ${profile.name}`
      }
      <button onClick={() => {
        if (profile) {
          logout();
        } else {
          login();
        }
      }}>
        {profile ? "Logout" : "Login"}
      </button>
    </div>
  );
};
```
npm package: @irpyc/k7-ui
Description: K7 UI Component Library for Angular
Author: Jerem
Latest version: 0.0.6

# K7Ui

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build k7-ui
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:

   ```bash
   cd dist/k7-ui
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @irrasoft/cra-template-antd-pro
Description: Antd Pro template for Create React App
Latest version: 0.1.113

# cra-template-antd-pro

Antd Pro template for Create React App


### Quick Start

```sh
npx create-react-app my-app --template @irrasoft/antd-pro
cd my-app
npm start
```

> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` or `yarn global remove create-react-app` to ensure that `npx` always uses the latest version.

_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_


Then open [http://localhost:4000/](http://localhost:4000/) to see your app.



## Creating an App

**You’ll need to have Node >= 10 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

### npx

```sh
npx create-react-app my-app --template @irrasoft/antd-pro
```

_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_

### npm

```sh
npm init react-app my-app --template @irrasoft/antd-pro
```

_`npm init <initializer>` is available in npm 6+_

### Yarn

```sh
yarn create react-app my-app --template @irrasoft/antd-pro
```

_`yarn create` is available in Yarn 0.25+_


## Output

Running any of these commands will create a directory called `my-app` inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

```
my-app
├── README.md
├── node_modules
├── package.json
├── craco.config.js
├── .env
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── assets
    ├── components
    ├── config
    ├── context
    ├── layouts
    ├── pages
    ├── router
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js
```

## Scripts

Inside the newly created project, you can run some built-in commands:

### `npm start` or `yarn start`

Runs the app in development mode. Open [http://localhost:4000](http://localhost:4000) to view it in the browser.
npm package: @irreal/darex-models
Description: Data Transfer Objects for the Darex API
Author: Milos Spasojevic
Latest version: 1.1.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/1223799/50992071-73562500-1516-11e9-99fa-9f73b0f0eee2.png" width="597" alt="darex-models">
</p>

# darex-models

> Data Transfer Objects for the Darex API

---

## ✨ Features

- feature one
- feature two

## 🔧 Installation

```sh
npm install @irreal/darex-models --save
```

## 🎬 Getting started

Let's demonstrate simple usage with ... example:

```ts
// your code example
```

## 🎭 Examples

Go checkout [examples](./examples) !

## 📜 API

> Document your API here

### `publicMethodOne(value:string): string`

This methods does foo bar moo...

**Example:**

```ts
// example
```

## 🎓 Guides

<details>
<summary>How to do Foo</summary>
Today we're gonna build Foo....
</details>

### 🕵️ Troubleshooting

## 🥂 License

[MIT](./LICENSE.md) as always