open-index/open-npm huggingface dataset:
npm package: @syner/github
Description: GitHub App authentication and tools for Syner
Latest version: 0.1.1

# @syner/github

GitHub App authentication for syner agents. Generates installation access tokens for the `gh` CLI.

## Usage

Use `gh` directly. If authentication fails, generate a token:

```bash
bunx @syner/github create-app-token | gh auth login --with-token
```

Then retry your `gh` command.

### Examples

```bash
# Authenticate once per session
bunx @syner/github create-app-token | gh auth login --with-token

# Then use gh normally
gh issue create --title "Bug" --body "Description"
gh pr create --title "Feature" --body "Changes"
gh api /user
```

### Programmatic

```typescript
import { getToken, createOctokit } from "@syner/github";

// Get a raw token
const token = await getToken();

// Or get a pre-configured Octokit instance
const octokit = createOctokit();
const { data: user } = await octokit.users.getAuthenticated();
```

## Environment Variables

| Variable | Required | Description |
|----------|----------|-------------|
| `GITHUB_APP_ID` | Yes | The GitHub App ID |
| `GITHUB_APP_INSTALLATION_ID` | Yes | Installation ID for the target org/user |
| `GITHUB_APP_PRIVATE_KEY` | One of these | The private key contents (PEM format) |
| `GITHUB_APP_PEM_PATH` | One of these | Path to the private key file |

## Setup

1. Install the GitHub App on your org/profile
2. Get your `GITHUB_APP_INSTALLATION_ID` from the URL after installation:
   ```
   https://github.com/settings/installations/12345678
                                              ^^^^^^^^
                                              this is your installation ID
   ```
3. Configure the environment variables

## Why GitHub App Auth?

- **Security**: No personal access tokens stored or exposed
- **Scoped permissions**: Apps have fine-grained permissions per installation
- **Audit trail**: Actions are attributed to the app, not a user
- **Rate limits**: App installations have higher rate limits
npm package: @synergycodes/tslint-config
Description: It's recommended code style for Synergy Codes organization
Author: Artur Ptaszek
Latest version: 1.0.1

# @synergycodes/tslint-config

It's recommended code style for Synergy Codes organization

## EditorConfig
This package also includes sample .editorconfig for all our projects.
Please copy that into main directory of your project.
To find out what it is and how to integrate with your tools please look [here](http://editorconfig.org/).

## Installation
Open your terminal window and type
```
npm install typescript tslint @synergycodes/tslint-config --save-dev
```

Create `tslint.json` file in main directory of your project and it should look as follows.

```json
{ "extends": "@synergycodes/tslint-config" }
```

## Linting in CI
To lint your project it's nice to intergate that with your existing workflow ex. using webpack plugin.
However, it can be easily run in console using following cmd

```
./node_modules/.bin/tslint --project .
```

## Plugins
There are bunch of plugins that integrates this package with existing workflow

* [tslint-webpack-plugin](https://www.npmjs.com/package/tslint-webpack-plugin)
* [TSLint Visual Studio Plugin](https://marketplace.visualstudio.com/items?itemName=vladeck.TSLint)
* Webstorm support is builtin
npm package: @synergyeffect/react-atom
Description: A higher-order component to enhance JSX elements with tailwind class merging and type-safe props.
Author: SynergyEffect
Latest version: 1.0.4

# atom

A utility function for creating reusable React elements with merged Tailwind classes.

## Installation

```sh
npm install @synergyeffect/react-atom
```

or with Yarn:

```sh
npm install @synergyeffect/react-atom
```

### How It Works

- The `atom` function takes a **React element** as an argument.
- Returns a **curried function** that accepts `props`.
- Merges the `className` attribute using `tailwind-merge`, ensuring class overrides work correctly.

## Example with Multiple Components

```tsx
const Button = atom(<button className="px-4 py-2 rounded bg-blue-500 text-white" />);

function App() {
  return (
    <div>
      <Button className="bg-red-500">Click Me</Button>
    </div>
  );
}
```

## Why Use `atom`?

- **Encapsulates UI Elements**: Define base elements and modify them dynamically.
- **Tailwind-Class Merging**: Prevents class conflicts when overriding styles.
- **TypeScript Support**: Maintains proper types for props.

## TypeScript Support

The function ensures proper type inference for JSX intrinsic elements.

```tsx
const Link = atom<"a">(<a href="#" className="text-blue-500" />);

<Link href="/about" className="font-bold" />;
```

## License

MIT
npm package: @synergyeffect/with-state-match
Description: A higher-order component to decleratively program small stateful components.
Author: SynergyEffect
Latest version: 1.1.3

# `with-state-match`

> 🌀 Minimal, declarative state matcher for React.
> Build async/stateful UI flows with **no boilerplate state machines**.

## ✨ Features

- 🪶 Tiny HOC — no dependencies
- 🔑 Explicit state names (you control the vocabulary)
- 🧩 Simple API: `withStateMatch(defaultState, work, matcher)`
- ⚡ TypeScript-first — state names, props, and context all autocomplete
- 🌀 Curried `chstate`: `chstate("pending")()` or `chstate("success")(data)`
- 🎯 Perfect for buttons, async flows, or lightweight UI state machines

## 🚀 Install

```sh
npm install @synergyeffect/with-state-match
```

or with Yarn:

```sh
yarn add @synergyeffect/with-state-match
```

## 🧑‍💻 Usage

```tsx
import { withStateMatch } from "@synergyeffect/with-state-match";
import { Button } from "./ui/Button";
import { api } from "./api";

// Example async context type
type Invoice = { id: string };

export const ButtonDownloadInvoice = withStateMatch(
  "idle", // 👈 initial state
  ({ props, chstate }) => {
    chstate("pending")();
    api.insurance
      .client({ insurance: props.insurance, price: props.price })
      .fork(chstate("error"), chstate("success"));
  },
  {
    idle: ({ run }) => <Button onClick={run}>Download Invoice</Button>,

    pending: () => (
      <Button disabled className="animate-pulse">
        Downloading…
      </Button>
    ),

    success: ({ stateData }) => (
      <Button className="text-green-500">✅ Invoice #{stateData?.id}</Button>
    ),

    error: ({ stateData, run }) => (
      <Button onClick={run} className="text-red-500">
        ❌ Failed: {String(stateData)}
      </Button>
    ),
  },
);
```

## 📖 API

### `withStateMatch(defaultState, work, matcher)`

- **`defaultState: string`**
  Initial state name (must be one of `matcher`’s keys).

- **`work: (tools, ...args) => void`**
  Effectful function that runs when `run()` is called.
  Receives:
  - `props` (original component props)
  - `chstate(state)(data)` (curried state transition)

- **`matcher: Record<string, (tools) => ReactNode>`**
  Declarative mapping of `state → renderer`.
  Each renderer gets:
  - `stateData`: current context payload
  - `props`: original props
  - `chstate`: curried transition function
  - `run`: executes the `work` function

## 🎯 Why?

Managing async UI in React often leads to:

- Repetitive `useState` boilerplate
- Over-engineered state machines
- Mixing rendering with imperative effects

`with-state-match` gives you:

- Explicit, declarative states
- Separation of **effects** (`work`) from **rendering** (`matcher`)
- Tiny surface area → easy to read & maintain

## 📦 License

MIT © SynergyEffect
npm package: @synerise/faststore-api
Description: <h1 align="center">   Synerise Faststore API </h1>
Latest version: 0.0.3

<h1 align="center">
  Synerise Faststore API
</h1>

## Installation

From the command line in your project directory, run yarn add `@synerise/faststore-api`.

```cmd
yarn add @synerise/faststore-api
```

## Usage

### Import resolvers

```ts
// src/graphql/thirdParty/resolvers/index.ts
import { Resolvers as SyneriseResolvers } from "@synerise/faststore-api";

const resolvers = {
    ...SyneriseResolvers,
};

export default resolvers;
```

After adding the resolvers, ensure you copy the files from the `typeDefs` folder to your project's
`src/graphql/thirdParty/typeDefs` folder. This step is required to integrate the schema definitions properly.

This approach allows you to directly integrate pre-defined resolvers into your application, making it easier to set up
and use the provided functionalities.

#### Required Environment Variables

You can use the provided resolvers by either adding the following environment variables to your `vtex.env` file:

```env
SYNERISE_API_URL=https://api.synerise.com
SYNERISE_API_TRACKER=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
SYNERISE_SEARCH_INDEX=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

or by specifying `indexId`, `apiHost`, and `trackerKey` directly in your GraphQL queries:

```graphql
query SyneriseSearchQuery(
    $apiHost: String,
    $trackerKey: String,
    $indexId: String,
    $query: String!
) {
    syneriseAISearch(indexId: $indexId, apiHost: $apiHost, trackerKey: $trackerKey) {
        search(
            query: $query,
        ) {
            ...
        }
    }
}
```

These variables are necessary for proper configuration and communication with the Synerise API.

### Import Individual Client

Alternatively, you can import and configure a specific client for more granular control:

```ts
import { SyneriseSearchClient } from '@synerise/faststore-api';

const searchClient = new SyneriseSearchClient({
    host: "https://api.synerise.com",
    trackerKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    indexId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
});

// Use the search client as needed
```

This method is suitable when you need to work with a specific service or API client, allowing you to customize the
configuration and use only the functionalities you need.
npm package: @synerty/orb-util
Description: This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.21.
Latest version: 0.0.6

# OrbUtil

This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.21.

## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.

## Deploying to Github Pages

Run `ng github-pages:deploy` to deploy to Github Pages.

## Further help

To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @synerty/peek-client-fe-util
Description: This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.21.
Latest version: 0.1.2

# PeekClientFeUtil

This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.21.

## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.

## Deploying to Github Pages

Run `ng github-pages:deploy` to deploy to Github Pages.

## Further help

To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @synerty/peek-plugin-base-js
Description: Peek plugin base library
Author: Synerty HQ Pty Ltd
Latest version: 16.2.19

# Peek Plugin Base JS

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

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @synesthesia-project/composer
Description: composition tool for synesthesia
Latest version: 0.0.1

# Synesthesia Composer

This is the composer part of the synesthesia project.

## Building / Usage

The main way in which to use this project is as a chrome extension (but the
html files output in `dist/` can also be used directly).

To Build:

* Run `yarn install && yarn run build`

This output of the build is put in `dist/`, and you can either open
`dist/index.html` directly in your browser, or install the `dist/` directory as
a chrome extension (which gives you more functionality such as connecting to
google play music).

## TODO list

Please see the [GitHub issues](https://github.com/synesthesia-project/synesthesia/issues) for the list of
tasks.

## Special Thanks

The style of this app has been heavily inspired by the
[Vertex Theme for GTK](https://github.com/horst3180/vertex-theme)