open-index/open-npm huggingface dataset:
npm package: @stackcraft.io/qwik-voby
Description: QwikVoby allows adding Voby components into existing Qwik application
Latest version: 0.1.5

# qwik-voby ⚡️

QwikVoby allows adding [Voby](https://github.com/vobyjs/voby) components into existing Qwik application

> **NOTE**: voby is a focused on the client component, so here we ignore all SSR and hydrate related options.


**WARN: qwik@1.2.4 vite plugin has bug?**
![](assets/image.png)

## How to Integrate into a Qwik app

Integration is pretty much the same as <https://qwik.builder.io/docs/integrations/react/>.

First, install `@stackcraft-io/qwik-voby` with npm, pnpm or yarn. Instead of `react` and `react-dom`, you will need to install `voby`. And don't forgot `/** @jsxImportSource voby */`

```sh
pnpm add @stackcraft-io/qwik-voby
```

create `counter.tsx`

```tsx
/** @jsxImportSource voby */
import { qwikify$, observable } from '@qwikdev/qwik-voby';

// Create Voby component standard way
function Counter() {
  const count = observable(0);
  const incr = () => count((i) => i + 1);
  return (
    <button className="voby" onClick={incr}>
      Count: {count}
    </button>
  );
}

// Convert Voby component to Qwik component
export const QCounter = qwikify$(Counter, { eagerness: 'hover' });
```

index.tsx

```tsx
import { component$ } from '@builder.io/qwik';
import { QCounter } from './counter';

export default component$(() => {
  return (
    <main>
      <QCounter />
    </main>
  );
});
```

vite.config.ts

```ts
// vite.config.ts
import { qwikVoby } from '@qwikdev/qwik-voby/vite';

export default defineConfig(() => {
   return {
     ...,
     plugins: [
       ...,
       // The important part
       qwikVoby()
     ],
   };
});
```

Please keep in mind that this is an experimental implementation based on [`qwik-preact`](https://github.com/QwikDev/qwik-preact) implementation. So, there might be bugs and unwanted behaviours.

---

## Related

- [Qwik Docs](https://qwik.builder.io/docs/)
- [Qwik on GitHub](https://github.com/BuilderIO/qwik)
- [@QwikDev](https://twitter.com/QwikDev)
- [Discord](https://qwik.builder.io/chat)
- [Vite](https://vitejs.dev/)
- [Partytown](https://partytown.builder.io/)
- [Mitosis](https://github.com/BuilderIO/mitosis)
- [Builder.io](https://www.builder.io/)
- [qwik-preact](https://github.com/QwikDev/qwik-preact)
npm package: @stackedactors/rivn-common
Description: Made with create-react-library
Author: johnkay
Latest version: 1.1.3

# Rivn Common Components

> Made with create-react-library

## Description
This repository is a Storybook project that holds all of our Rivn Common Components. These components are bundled up into a NPM package that can be installed and imported to any other application.

## Install and start Storybook

```bash
yarn && yarn storybook
```

## Build NPM Package
```bash
yarn build:prod && npm pack
```

## Usage
npm package: @stacker/alfred-utils
Description: Offer some utils to improve alfred workflow development
Author: Alan He
Latest version: 0.1.60

> Offer some utils to improve alfred workflow development

[![npm version](https://badge.fury.io/js/%40stacker%2Falfred-utils.svg)](https://badge.fury.io/js/%40stacker%2Falfred-utils)

## install

```shell

$ npm i @stacker/alfred-utils

# cli usage
$ npx @stacker/alfred-utils init
$ npx @stacker/alfred-utils new <filename>



```
npm package: @stacker/just-test
Description: Offer some utils to improve alfred workflow development
Author: Alan He
Latest version: 0.1.55-alpha.2

> Offer some utils to improve alfred workflow development

[![npm version](https://badge.fury.io/js/%40stacker%2Falfred-utils.svg)](https://badge.fury.io/js/%40stacker%2Falfred-utils)

## install

```shell

$ npm i @stacker/alfred-utils

# cli usage
$ npx @stacker/alfred-utils init
$ npx @stacker/alfred-utils new <filename>



```
npm package: @stackextend/keys-4-react
Description: Keyboard listener for react
Author: StackExtend
Latest version: 1.0.0

# @stackextend/keys-4-react

> Keyboard listener for react

[![NPM](https://img.shields.io/npm/v/@stackextend/keys-4-react.svg)](https://www.npmjs.com/package/@stackextend/keys-4-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @stackextend/keys-4-react
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from '@stackextend/keys-4-react'
import '@stackextend/keys-4-react/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [StackExtend](https://github.com/StackExtend)
npm package: @stackflow/basic-ui
Description: Render the UI within the activity using the global stack state. It provides `cupertino` and `android` themes by default.
Latest version: 0.14.0

# @stackflow/basic-ui

Render the UI within the activity using the global stack state. It provides `cupertino` and `android` themes by default.

- [Documentation](https://stackflow.so)

## Usage

```tsx
import { AppScreen } from "@stackflow/basic-ui";

const Something: React.FC = () => {
  return (
    <AppScreen theme="cupertino" appBar={{ title: "Home" }}>
      <div>Hello, World</div>
    </AppScreen>
  );
};
```
npm package: @stackflow/core
Description: `@stackflow/core` contains the core logic to calculate the stack state based on domain events.
Latest version: 1.3.2

# @stackflow/core

`@stackflow/core` contains the core logic to calculate the stack state based on domain events.

- `src/aggregate.ts`
- `src/produceEffects.ts`

`@stackflow/core` cannot be used alone. Install and use the following integrations.

- [`@stackflow/react`](https://www.npmjs.com/package/@stackflow/react)

> If you need integration with other front-end frameworks such as Vue.js, Svelte, etc., you can contribute using this core module.

- [Documentation](https://stackflow.so)
npm package: @stackflow/link
Description: It mimics the `<Link />` component behavior provided by Gatsby or Next.js.
Latest version: 1.6.1

# @stackflow/link

It mimics the `<Link />` component behavior provided by Gatsby or Next.js.

## Dependencies

It can be used only when both `@stackflow/plugin-history-sync` and `@stackflow/plugin-preload` are set.

- `@stackflow/plugin-history-sync`
- `@stackflow/plugin-preload`

## Usage

```typescript
/**
 * stackflow.ts
 */
import { stackflow } from "@stackflow/react";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { preloadPlugin } from "@stackflow/plugin-preload";

const { Stack, useFlow, activities } = stackflow({
  activities: {
    // ...
  },
  plugins: [
    historySyncPlugin({
      //...
    }),
    preloadPlugin({
      // ...
    }),
    // ...
  ],
});

export type TypeActivities = typeof activities;
```

```typescript
/**
 * Link.ts
 */
import { createLinkComponent } from "@stackflow/link";
import type { TypeActivities } from "./stackflow";

export const { Link } = createLinkComponent<TypeActivities>();
```

```tsx
/**
 * MyComponent.ts
 */
import { Link } from './Link'

const MyComponent = () => {
  return (
    <div>
      <Link
        className={...}
        activityName="MyActivity"
        activityParams={{}}
      >
        {/* ... */}
      </Link>
    </div>
  )
}
```
npm package: @stackflow/plugin-basic-ui
Description: Render the UI within the activity using the global stack state. It provides `cupertino` and `android` themes by default.
Latest version: 1.18.1

# @stackflow/plugin-basic-ui

Render the UI within the activity using the global stack state. It provides `cupertino` and `android` themes by default.

- [Documentation](https://stackflow.so)

## Usage

```typescript
/**
 * stackflow.ts
 */
import { stackflow } from "@stackflow/react";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";

const { Stack, useFlow } = stackflow({
  // ...
  plugins: [
    // ...
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
});
```

```tsx
import { AppScreen } from "@stackflow/plugin-basic-ui";

const Something: React.FC = () => {
  return (
    <AppScreen appBar={{ title: "Home" }}>
      <div>Hello, World</div>
    </AppScreen>
  );
};
```

```tsx
import { Modal } from "@stackflow/plugin-basic-ui";

const Something: React.FC = () => {
  return (
    <Modal>
      <div>Hello, World</div>
    </Modal>
  );
};
```

```tsx
import { BottomSheet } from "@stackflow/plugin-basic-ui";

const Something = () => {
  return (
    <BottomSheet>
      <div>Hello, World</div>
    </BottomSheet>
  );
};
```
npm package: @stackflow/plugin-devtools
Description: Enables Stackflow Devtools (Chrome extension)
Latest version: 0.1.11

# @stackflow/plugin-devtools

Enables Stackflow Devtools (Chrome extension)

- [Documentation](https://stackflow.so)

## Usage

```typescript
import { stackflow } from "@stackflow/react";
import { devtoolsPlugin } from "@stackflow/plugin-devtools";

const { Stack, useFlow } = stackflow({
  activities: {
    // ...
  },
  plugins: [
    devtoolsPlugin(),
    // ...
  ],
});
```
npm package: @stackflow/plugin-history-sync
Description: Synchronizes the stack state with the current browser's history
Latest version: 1.10.0

# @stackflow/plugin-history-sync

Synchronizes the stack state with the current browser's history

- [Documentation](https://stackflow.so)

## Usage

```typescript
import { stackflow } from "@stackflow/react";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { MyHome } from "./MyHome";
import { MyArticle } from "./MyArticle";
import { NotFoundPage } from "./NotFoundPage";

const { Stack, useFlow } = stackflow({
  activities: {
    MyHome,
    MyArticle,
    NotFoundPage,
  },
  plugins: [
    // ...
    historySyncPlugin({
      routes: {
        /**
         * You can link the registered activity with the URL template.
         */
        MyHome: "/",
        MyArticle: "/articles/:articleId",
        NotFoundPage: "/404",
      },
      /**
       * If a URL that does not correspond to the URL template is given, it moves to the `fallbackActivity`.
       */
      fallbackActivity: ({ context }) => "NotFoundPage",
      /**
       * Uses the hash portion of the URL (i.e. window.location.hash)
       */
      useHash: false,
    }),
  ],
});
```
npm package: @stackflow/plugin-preload
Description: Preload required remote data by activity name.
Latest version: 1.4.4

# @stackflow/plugin-preload

Preload required remote data by activity name.

- [Documentation](https://stackflow.so)

## Usage

```typescript
/**
 * stackflow.ts
 */
import { stackflow } from "@stackflow/react";
import { preloadPlugin } from "@stackflow/plugin-preload";
import { MyHome } from "./MyHome";
import { MyArticle } from "./MyArticle";
import { NotFoundPage } from "./NotFoundPage";

const { Stack, useFlow, activities } = stackflow({
  activities: {
    MyHome,
    MyArticle,
    NotFoundPage,
  },
  plugins: [
    // ...
    preloadPlugin({
      loaders: {
        MyHome({ activityParams }) {
          // implement your own preload function using activity information
          // when activity pushed, loader is automatically triggered before rendering
        },
        MyArticle() {
          // ...
        },
        NotFoundPage() {
          // ...
        },
      },
    }),
  ],
});

export type TypeActivities = typeof activities;
```

```typescript
/**
 * usePreloader.ts
 */
import { createPreloader } from "@stackflow/plugin-preload";
import type { TypeActivities } from "./stackflow";

export const { usePreloader } = createPreloader<TypeActivities>();
```

```tsx
/**
 * MyComponent.tsx
 */
import { usePreloader } from "./usePreloader";

const MyComponent = () => {
  const { preload } = usePreloader();

  useEffect(() => {
    // imperatively preload
    preload("MyArticle", {
      /* ... */
    });
  }, []);

  return <div>{/* ... */}</div>;
};
```
npm package: @stackflow/plugin-sentry
Description: Stackflow plugin for Sentry browser tracing. Automatically creates navigation spans and breadcrumbs for activity transitions (`push`, `pop`, `replace`) and step transitions (`stepPush`, `stepPop`, `stepReplace`).
Latest version: 0.1.0

# plugin-sentry

Stackflow plugin for Sentry browser tracing. Automatically creates navigation spans and breadcrumbs for activity transitions (`push`, `pop`, `replace`) and step transitions (`stepPush`, `stepPop`, `stepReplace`).

## Setup

1. Initialize Sentry with the `stackflowBrowserTracingIntegration`:

```typescript
import * as Sentry from "@sentry/browser";
import { stackflowBrowserTracingIntegration } from "@stackflow/plugin-sentry";

Sentry.init({
  dsn: "https://xxx.ingest.us.sentry.io/xxx",
  integrations: [
    stackflowBrowserTracingIntegration(),
    // ... other integrations
  ],
});
```

2. Add `sentryPlugin()` to your stackflow configuration:

```typescript
import { stackflow } from "@stackflow/react";
import { sentryPlugin } from "@stackflow/plugin-sentry";

const { Stack, useFlow } = stackflow({
  activities: {
    // ...
  },
  plugins: [
    sentryPlugin(),
    // ... other plugins
  ],
});
```
npm package: @stackflow/plugin-stack-depth-change
Description: Monitors a depth change in the stack.
Latest version: 1.1.5

# @stackflow/plugin-stack-depth-change

Monitors a depth change in the stack.

- [Documentation](https://stackflow.so)

## Usage

```typescript
import { stackflow } from "@stackflow/react";
import { stackDepthChangePlugin } from "@stackflow/plugin-stack-depth-change";

const { Stack, useFlow } = stackflow({
  activities: {
    // ...
  },
  plugins: [
    // ...
    stackDepthChangePlugin({
      /**
       * Initial loading
       * @param depth
       * @param activeActivities
       * @param activities
       */
      onInit: ({ depth, activities, activeActivities }) => {},
      /**
       * When the depth changes
       * @param depth
       * @param activeActivities
       * @param activities
       */
      onDepthChanged: ({ depth, activities, activeActivities }) => {},
    }),
  ],
});
```
npm package: @stackflow/react
Description: An integration layer for using Stackflow in React applications. Returns a `<Stack />` component for rendering the application and a `useFlow` hook for navigation.
Latest version: 1.12.0

# @stackflow/react

An integration layer for using Stackflow in React applications. Returns a `<Stack />` component for rendering the application and a `useFlow` hook for navigation.

- [Documentation](https://stackflow.so)

## Usage

```tsx
import { stackflow } from '@stackflow/react'

const { Stack, useFlow } = stackflow({
  activities: {
    // ...
  },
  plugins: [
    // ...
  ],
})

ReactDOM.render(<Stack />, ...)
```
npm package: @stackframe-app/react-icons
Description: Icons mapping package, based on vscode-icons
Author: StackFrame
Latest version: 1.2.3

# stackframe-react-icons
NPM package that allows you to find the corresponding icon based on a file or directory name.

> Based on [`vscode-icons`](https://github.com/vscode-icons/vscode-icons), MIT licensed.

## Installation
```bash
npm install @stackframe/react-icons
```

## Usage
### JavaScript
```javascript
const { FileIcon } = require("@stackframe/react-icons")

const MyComponent = () => {
  return (<FileIcon name="my-file.js" isFolder={false} />)
}

module.export = MyComponent
```

### TypeScript
```typescript
import React from "react"
import { FileIcon } from "@stackframe/react-icons"

const MyComponent: React.FC = () => {
  return (<FileIcon name="my-file.js" isFolder={false} />)
}

export default MyComponent
```

## License
Copyright (c) 2016 Roberto Huertas (vscode-icons)

Copyright (c) 2025 StackFrame
npm package: @stackframe/init-stack
Description: The setup wizard for Stack. https://stack-auth.com
Latest version: 2.8.81

# Stack Auth Initialization Tool

This package provides a command-line tool to initialize Stack Auth in your project.

## Usage

```bash
npx init-stack [project-path] [options]
```

## Options

- `--help`, `-h`: Show help message
- `--dry-run`: Run without making any changes
- `--neon`: Use Neon database
- `--js`: Initialize for JavaScript project
- `--next`: Initialize for Next.js project
- `--npm`: Use npm as package manager
- `--yarn`: Use yarn as package manager
- `--pnpm`: Use pnpm as package manager
- `--bun`: Use bun as package manager
- `--client`: Initialize client-side only
- `--server`: Initialize server-side only
- `--no-browser`: Don't open browser for environment variable setup

## Environment Variables

- `STACK_DISABLE_INTERACTIVE`: Set to any value to disable interactive prompts. Useful for CI/CD environments.

## Examples

Initialize Stack Auth in a Next.js project without opening the browser:

```bash
npx init-stack --next --no-browser
```

Initialize Stack Auth in a JavaScript project with npm:

```bash
npx init-stack --js --npm
```

For more information, please visit [Stack Auth Documentation](https://docs.stack-auth.com/getting-started/setup).