open-index/open-npm huggingface dataset:
npm package: @peachy/core
Description: Base peachy CLI
Author: Angelo Verlain
Latest version: 0.0.14

# @peachy/core

This packages contains a CLI tool for writing, building and running GJS applications, and several other nice utilities.

It allows you to build, run, and develop GJS applications faster.

## Commands:

### Build

`peachy build` will compile your application into the `dist` folder. This will bundle any Node modules you might be using
as well, and you can distribute the folder to things like flatpak, or install it globally.

You should be able to run the resulting file with:

```bash
gjs -m dist/main.js
```

### Run

`peachy run` will build and run your application. This is a shortcut for `peachy build && gjs -m dist/main.js`.

### Develop

`peachy dev` will compile your application into the `dist` folder, and watch for changes. When combined with plugins like `@peachy/plugin-react`, you can develop your application in React with HMR without having to rebuild it every time.
npm package: @peachy/hooks
Description: Useful hooks for React applications.
Latest version: 0.0.14

# @peachy/hooks

Useful hooks for React applications.

## Installation

```bash
npm install @peachy/hooks
```

## Usage

There are different categories of hooks you can use:

### Gio

#### `useNetworkMonitor`

Returns information about the network connection.

```tsx
import { useNetworkMonitor } from "@peachy/hooks";

const App = () => {
  const { connected } = useNetworkMonitor();

  return <Gtk.Label>{connected ? "Connected" : "Disconnected"}</Gtk.Label>;
};
```

Provided values:

- `connected`: A boolean indicating whether the device is connected to _internet_.
- `available`: A boolean indicating whether this internet is connected to any network like WiFI, mobile data, ethernet, etc. This does not mean that it can access the internet.
- `state`: The type of connectivity. One of `local`, `limited`, `portal`, and `full`. Check https://gjs-docs.gnome.org/gio20~2.0/gio.networkconnectivity to learn more.
- `metered`: A boolean indicating whether the device is metered. When `true`, the device is metered, meaning that the user is charged for data usage and bandwidth is limited.

#### `useSetting`

Get the value of a setting while listening for changes, and change gsettings.

```tsx
import { useSetting } from "@peachy/hooks";

const App = () => {
  const [value, changeValue] = useSetting("org.gnome.desktop.interface", "gtk-theme");

  return (
    <Gtk.Box>
      <Gtk.Label>Theme: {value}</Gtk.Label>
      <Gtk.Button onClick={() => changeValue("Adwaita-dark")}>Change Theme</Gtk.Button>
    </Gtk.Box>
  );
};
```

### GObject

#### `useBinding`

Bind to a property, and listen for changes.

NOTE: You can provide a default value for the hook as third parameter

```tsx
import Adw from "gi://Adw?version=1";

import { useBinding } from "@peachy/hooks";

const App = () => {
  const styleManager = Adw.StyleManager.get_default();

  const [darkMode] = useBinding(styleManager, "dark");
  const [accentColor] = useBinding(styleManager, "accentColor");

  return (
    <Gtk.Box>
      <Gtk.Label>Theme: {darkMode ? "Dark" : "Light"}</Gtk.Label>

      <Gtk.Label>Accent Color: {accentColor}</Gtk.Label>
    </Gtk.Box>
  );
};
```

### Adwaita

#### `useDarkMode`

Allows checking the current dark mode state and setting it.

```ts
import { useDarkMode } from "@peachy/hooks";

const [darkMode, setDarkMode] = useDarkMode();
```

#### `useAccentColor`

Allows checking the current accent color if set.

```ts
import { useAccentColor } from "@peachy/hooks";

const [accentColor] = useAccentColor();

// NOTE: returns `null` if accent colors are unsupported
```
npm package: @peachy/plugin-css
Description: Import CSS files into your GJS applications
Author: Angelo Verlain
Latest version: 0.0.14

# @peachy/plugin-css

A Rolldown plugin that allows you to import CSS modules.

## Usage

First, create your CSS module:

```css
/* styles.css */
.heroImage {
  border-radius: 12px;
  border: 1px solid;
}
```

Then you can import it in your code and use it:

```ts
/* app.ts */

import Gtk from "gi://Gtk?version=4.0";

import styles from "./styles.css";

const picture = new Gtk.Picture({
  cssClasses: [styles.heroImage],
});
```

Your image will now have a border and rounded corners.
npm package: @peachy/polyfills
Description: Polyfills for Peachy
Author: Angelo Verlain
Latest version: 0.0.14

# @peachy/polyfills

This package includes polyfills for modern JavaScript features to GJS.

## Usage

Import the polyfill package at the top of your entry file (usually `src/index.ts` or `src/index.js`).

```js
// This will load all polyfills
import "@peachy/polyfills";

// you can also import individual polyfills
import "@peachy/polyfills/performance";
```

## Available Polyfills

### Performance/High Resolution Time

Docs: https://developer.mozilla.org/en-US/docs/Web/API/Performance

For now, only `performance.now()` is supported.
npm package: @peachy/react
Description: Run GJS applications with react
Author: Angelo Verlain
Latest version: 0.0.14

# @peachy/react

This package contains a React renderer for GTK.

It implements a custom react-reconciler, which is responsible for rendering React components into the GTK "DOM".

## Installation

You can install this package with npm:

```bash
npm install @peachy/react @peachy/core
```

For typescript, you will need to install the GTK types:

```bash
npm install @peachy/types
```

Then setup your config file

```json
// tsconfig.json
{
  "extends": "@peachy/react/tsconfig.lib",
  "include": ["@peachy/types"]
}
```

## Usage

Here is a basic example that creates a GTK application window with a label:

```tsx
import Gtk from "gi://Gtk?version=4.0";
import { render } from "@peachy/react";

const app = Gtk.Application.new("com.hello.world", Gio.ApplicationFlags.DEFAULT_FLAGS);

app.connect("activate", () => {
  const app_window = Gtk.ApplicationWindow.new(app);

  render(<Gtk.Label label="Hello, World!" />, app_window);

  app_window.present();
});

app.run([]);
```

You can also create reusable components using React's component system. For example, you can create a custom button component:

```tsx
import Gtk from "gi://Gtk?version=4.0";
import { render } from "@peachy/react";

const Button = ({ label, onClick }) => <Gtk.Button label={label} onClick={onClick} />;

const app = Gtk.Application.new("com.hello.world", Gio.ApplicationFlags.DEFAULT_FLAGS);

app.connect("activate", () => {
  const app_window = Gtk.ApplicationWindow.new(app);

  render(<Button label="Click me!" onClick={() => console.log("Button clicked")} />, app_window);

  app_window.present();
});

app.run([]);
```

### Signals

To connect signals, you can use the `on` prefix followed by the signal name and detail. For example:

> Note: For details, we use one colon (`onNotify:hasFocus`) instead of two colons as is otherwise done in GJS/GObject (`notify::has-focus`).

```tsx
import Gtk from "gi://Gtk?version=4.0";
import { render } from "@peachy/react";

const Button = () => {
  const onClicked = () => console.log("Button clicked");
  const onFocused = () => console.log("Button focused/unfocused");

  return <Gtk.Button label="Hello World" onClicked={onClicked} onNotify:hasFocus={onFocused} />;
};

app.run([]);
```

## References

- https://github.com/VisualElectric/pixi-react
- react-reconciler
- https://github.com/samuelscheit/react-native-skia-list
- https://github.com/jiayihu/react-tiny-dom
npm package: @peacockcss/solid
Description: <a href="https://github.com/your-author-name/your-repository-name/tree/main/packages/hello#readme"> <p>   <img width="100%" src="https://assets.solidjs.com/banner?type=your-repository-name&background=tiles&project=Hello" alt="your-repository-name Hello"> 
Latest version: 0.0.4

<a href="https://github.com/your-author-name/your-repository-name/tree/main/packages/hello#readme">
<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=your-repository-name&background=tiles&project=Hello" alt="your-repository-name Hello">
</p>

# Hello

Example hello world package in the your-repository-name repository.

## Installation

```bash
npm install @your-repository-name/hello
# or
yarn add @your-repository-name/hello
# or
pnpm add @your-repository-name/hello
```

## How to use it

```ts
import { createHello } from '@your-repository-name/hello'

const [hello, setHello] = createHello()

hello() // => "Hello World!"

setHello('Solid')

hello() // => "Hello Solid!"
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md).
npm package: @peacockcss/vite
Description: ## Vite
Latest version: 1.0.2

# Peacock CSS

## Vite

### install dependencies
```shell
pnpm install @peacockcss/core @linaria/vite @linaria/core 
```

Create a `system.css.ts`, and set up your design system:
```ts
// system.css.ts

import { createSystem, defaultSystem } from "@peacockcss/core"

export const system = createSystem({
  ...defaultSystem,
  theme: {
    colors: {
      red: {
        500: "#5b1616"
      },
      slate: "#282c34",
      white: "#ffffff"
    },
    space: {
      large: "50px"
    }
  },
  transforms: {
    ...defaultSystem.transforms,
    mx: (v) => `margin-left: ${v}; margin-right: ${v}`,
    my: (v) => `margin-top: ${v}; margin-bottom: ${v}`
  }
})

export const {prefix, screens, transforms, theme, themeMap } = system
```
Set vite's configuration:

```ts
// vite.config.js

import { defineConfig } from "vite"
import linaria from "@linaria/vite"
import { peacock } from "@peacockcss/core"
import { system } from "./src/system.css"

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        ...peacock({ designSystem: system }),
      ],
    },
  },
  plugins: [
    linaria({
      classNameSlug: process.env.NODE_ENV === "production" ? `[hash]` : `[name]-[hash]`, // easier to debug classnames when developing
      preprocessor: "none", // this is important as postcss takes care of everything, instead of the default stylis
    }),
  ],
  build: {
    target: "esnext",
    cssMinify: false // since peacock is using lightningcss as an autoprefixer and minifier, we disable vite's default
  }
})

```
npm package: @peacockng/components
Description: Peacock NG : UI Components for Angular  ## Installation
Author: Sabri BAHRINI
Latest version: 0.1.2

## @peacockng/components
Peacock NG : UI Components for Angular 
## Installation

To install this library, run:

```bash
$ npm install bootstrap@4.1.1 --save
$ npm install ngx-pagination@3.1.1 --save
```

```bash
$ npm install @peacockng/components --save
```

## Consuming

Once you have installed the library, you can import it in any Angular application:

1 - Import PeacockNg Style in `.angular-cli.json`:


```json
....
 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/@peacockng/components/css/style.css",
        ....
      ],
...
```

2- In your Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import UI componenets modules from @peacockng/components
import { LoaderModule } from '@peacockng/components';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify the module as an import
    LoaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

3- Once the module is imported, you can use its components, directives and pipes in your Angular application:

```xml
<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<pe-basic-loader [visible]="true"
                 [loadingLabel]="'LOADING'"></pe-basic-loader>
```

## Development

To generate all `*.js`, `*.d.ts`, `*.css` and `*.metadata.json` files:

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

## Consuming in a local application during development
To consume the library in a local application in development mode, you can follow the following steps:

1- Compile the PeacockNg components library
```bash
$ npm run build
```
2- Create a symlink in the global node_modules directory to the dist directory.
```bash
$ cd dist
$ npm link
```

3- Create a new Angular app. Let's assume you use angular-cli:
```bash
$ cd /your-projects-path
$ ng new my-app
```

4- Navigate to the my-app directory:
```bash
$ cd my-app
```

5- From the my-app directory, link the global sample-library directory to node_modules of the my-app directory:
```bash
$ npm link sample-library
```

6- Import modules and `consuming`


7- Run the server
```bash
$ ng serve --preserve-symlinks
```
To make sure the consuming application searches for the peer dependencies in the application's node_modules directory.


## License

MIT © [Sabri BAHRINI](mailto:sabri.bahrini@gmail.com)
npm package: @peacockproject/body-parser
Description: Node.js body parsing middleware [Peacock fork]
Latest version: 3.0.0-peacock.1

# body-parser Peacock Fork

Changes made:

- Clean out the package to only it's base
- Add TypeScript type definitions
- Update iconv-lite to 0.6
- Remove extra dependencies on `depd`, `debug`, `raw-body` (see `lib/rawBody.js`), `qs`
- Add prototype pollution protection to JSON body-parser middleware
- Switch dev setup to use Yarn 4, remove tests
- Require Node 16 or newer
- Add TypeScript and types packages to dev dependencies for extra IDE completion and other features

## Why does this exist?

Peacock bundles all dependencies into chunks before being distributed to users.
We want a smaller version of this library (fewer dependencies, smaller bundle size).
We are putting it as an open source project mostly for convenience, and don't suggest you use this package.