open-index/open-npm huggingface dataset:
npm package: @stepperize/react
Description: The library for building step-by-step workflows for React and React Native apps
Author: damianricobelli
Latest version: 6.1.0

<p align="center">
  <img src="https://stepperize.vercel.app/banner.png" alt="Stepperize Logo" />
</p>

[![Build Size](https://img.shields.io/bundlephobia/minzip/@stepperize/react@latest?label=bundle%20size&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=@stepperize/react@latest)
[![Version](https://img.shields.io/npm/v/@stepperize/react?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@stepperize/react)
[![Downloads](https://img.shields.io/npm/dt/@stepperize/react.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@stepperize/react)

A library for creating step-by-step workflows in your apps

- 🚀 Fast and efficient
- 🔥 Powerful and flexible
- 📦 Lightweight (1.1kB gzipped)
- 🪄 Fully type-safe
- 🔗 Composable architecture
- 🎨 Unstyled for maximum customization

## Installation

```bash
npm install @stepperize/react
```

## Quick Start

1. Import the constructor:

```tsx
import { defineStepper } from "@stepperize/react";
```

2. Define your steps (as arguments):

```tsx
const { Scoped, useStepper, steps, Stepper } = defineStepper(
  { id: "step-1", title: "Step 1", description: "Description for step 1" },
  { id: "step-2", title: "Step 2", description: "Description for step 2" },
  { id: "step-3", title: "Step 3", description: "Description for step 3" },
  { id: "step-4", title: "Step 4", description: "Description for step 4" }
);
```

3. Use the hook:

```tsx
function StepperComponent() {
  const stepper = useStepper();

  return (
    <div>
      <h2>{stepper.state.current.data.title}</h2>
      <p>{stepper.state.current.data.description}</p>
      <button onClick={() => stepper.navigation.prev()}>Previous</button>
      <button onClick={() => stepper.navigation.next()}>Next</button>
    </div>
  );
}
```

## How It Works

Stepperize allows you to define a series of steps with unique IDs. When you create your steps using `defineStepper`, you get:

- A `Scoped` component for context management
- A `useStepper` hook for step control
- An array of `steps` for rendering
- Type-safe `Stepper` primitives for building UI

The only required field for each step is the `id`. You can add any additional properties you need, and they'll be fully type-safe when using the hook.

## Documentation

For more detailed information on usage, configuration, and advanced features, visit our [full documentation](https://stepperize.vercel.app).

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.

## License

Stepperize is [MIT licensed](LICENSE).
npm package: @stepperize/solid
Description: The library for building step-by-step workflows for Solid JS apps
Author: damianricobelli
Latest version: 1.0.7

<p align="center">
  <img src="https://stepperize.vercel.app/banner.png" alt="Stepperize Logo" />
</p>

[![Build Size](https://img.shields.io/bundlephobia/minzip/@stepperize/solid@latest?label=bundle%20size&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=@stepperize/solid@latest)
[![Version](https://img.shields.io/npm/v/@stepperize/solid?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@stepperize/solid)
[![Downloads](https://img.shields.io/npm/dt/@stepperize/solid.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@stepperize/solid)

A library for creating step-by-step workflows in your apps

- 🚀 Fast and efficient
- 🔥 Powerful and flexible
- 📦 Lightweight (<1kB gzipped)
- 🪄 Fully type-safe
- 🔗 Composable architecture
- 🎨 Unstyled for maximum customization

## Installation

```bash
npm install @stepperize/solid
```

## Quick Start

1. Import the constructor:

```tsx
import { defineStepper } from "@stepperize/solid";
```

2. Define your steps:

```tsx
const { Scoped, useStepper, steps } = defineStepper(
  { id: "step-1", title: "Step 1", description: "Description for step 1" },
  { id: "step-2", title: "Step 2", description: "Description for step 2" },
  { id: "step-3", title: "Step 3", description: "Description for step 3" },
  { id: "step-4", title: "Step 4", description: "Description for step 4" }
);
```

3. Use the hook in your components:

```tsx
function StepperComponent() {
  const { currentStep, nextStep, prevStep } = useStepper();

  return (
    <div>
      <h2>{currentStep.title}</h2>
      <p>{currentStep.description}</p>
      <button onClick={prevStep}>Previous</button>
      <button onClick={nextStep}>Next</button>
    </div>
  );
}
```

## How It Works

Stepperize allows you to define a series of steps with unique IDs. When you create your steps using `defineStepper`, you get:

- A `useStepper` hook for step control
- An array of `steps` for rendering
- An `utils` object with useful functions

The only required field for each step is the `id`. You can add any additional properties you need, and they'll be fully type-safe when using the hook.

## Documentation

For more detailed information on usage, configuration, and advanced features, visit our [full documentation](https://stepperize.vercel.app).

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.

## License

Stepperize is [MIT licensed](LICENSE).
npm package: @stepperize/vue
Description: The library for building step-by-step workflows for Vue apps
Author: damianricobelli
Latest version: 2.0.9

<p align="center">
  <img src="https://stepperize.vercel.app/banner.png" alt="Stepperize Logo" />
</p>

[![Build Size](https://img.shields.io/bundlephobia/minzip/@stepperize/vue@latest?label=bundle%20size&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=@stepperize/vue@latest)
[![Version](https://img.shields.io/npm/v/@stepperize/vue?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@stepperize/vue)
[![Downloads](https://img.shields.io/npm/dt/@stepperize/vue.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@stepperize/vue)

A library for creating step-by-step workflows in your apps

- 🚀 Fast and efficient
- 🔥 Powerful and flexible
- 📦 Lightweight (1kB gzipped)
- 🪄 Fully type-safe
- 🔗 Composable architecture
- 🎨 Unstyled for maximum customization

## Installation

```bash
npm install @stepperize/vue
```

## Quick Start

1. Import the constructor:

```tsx
import { defineStepper } from "@stepperize/vue";
```

2. Define your steps:

```tsx
const { Scoped, useStepper, steps } = defineStepper(
  { id: "step-1", title: "Step 1", description: "Description for step 1" },
  { id: "step-2", title: "Step 2", description: "Description for step 2" },
  { id: "step-3", title: "Step 3", description: "Description for step 3" },
  { id: "step-4", title: "Step 4", description: "Description for step 4" }
);
```

3. Use the hook in your components:

```tsx
function StepperComponent() {
  const { currentStep, nextStep, prevStep } = useStepper();

  return (
    <div>
      <h2>{currentStep.title}</h2>
      <p>{currentStep.description}</p>
      <button onClick={prevStep}>Previous</button>
      <button onClick={nextStep}>Next</button>
    </div>
  );
}
```

## How It Works

Stepperize allows you to define a series of steps with unique IDs. When you create your steps using `defineStepper`, you get:

- A `Scoped` component for context management
- A `useStepper` hook for step control
- An array of `steps` for rendering
- An `utils` object with useful functions

The only required field for each step is the `id`. You can add any additional properties you need, and they'll be fully type-safe when using the hook.

## Documentation

For more detailed information on usage, configuration, and advanced features, visit our [full documentation](https://stepperize.vercel.app).

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.

## License

Stepperize is [MIT licensed](LICENSE).
npm package: @steps/core
Description: [![Version](https://badge.fury.io/js/%40steps%2Fcore.svg)](https://www.npmjs.com/package/@steps/core) [![Build](https://travis-ci.org/cadgerfeast/steps-core.svg?branch=master)](https://travis-ci.org/cadgerfeast/steps-core) [![Downloads](https://img.shield
Author: Jérémie Pichon
Latest version: 0.0.3

# @steps/core

[![Version](https://badge.fury.io/js/%40steps%2Fcore.svg)](https://www.npmjs.com/package/@steps/core)
[![Build](https://travis-ci.org/cadgerfeast/steps-core.svg?branch=master)](https://travis-ci.org/cadgerfeast/steps-core)
[![Downloads](https://img.shields.io/npm/dt/@steps/core.svg)](https://www.npmjs.com/package/@steps/core)
[![Coverage Status](https://coveralls.io/repos/github/cadgerfeast/steps-core/badge.svg?branch=master)](https://coveralls.io/github/cadgerfeast/steps-core?branch=master)
[![License](https://img.shields.io/npm/l/@steps/core.svg)](https://github.com/cadgerfeast/steps-core/blob/master/LICENSE)

> Step by step tour generator

## Installation

``` bash
npm install -g steps-core
```

## Usage

Command line arguments:

| Name     | Description                 | Arg    |
|:---------|:----------------------------|:-------|
| init     | Initializes a project       | `N/A`  |
| go       | Goes to step-<id>           | `<id>` |
| next     | Go to the next step         | `N/A`  |
| previous | Go to the previous step     | `N/A`  |
| reset    | Resets current progression  | `N/A`  |
| set      | Sets patch for step-<id>    | `<id>` |
| serve    | Serves the tour             | `N/A`  |

## Contributors

<table>
  <tbody>
    <tr>
      <td align="center">
        <a href="https://github.com/cadgerfeast">
          <img src="https://github.com/cadgerfeast.png?size=100" alt="cadgerfeast" width="100px">
          <br/>
          <span>cadgerfeast</span>
        </a>
      </td>
      <td align="center">
        <a href="https://github.com/Gosunet">
          <img src="https://github.com/Gosunet.png?size=100" alt="Gosunet" width="100px">
          <br/>
          <span>Gosunet</span>
        </a>
      </td>
    </tr>
  </tbody>
</table>

## License

MIT
npm package: @stepsapp/hailstormjs
Description: A real react static website generate
Author: Andreas Gruber
Latest version: 1.0.0-beta.18

<p align="center">
  <img width="150" height="150" src="./docs/images/hailstorm.png">
</p>

# Hailstormjs ![Downloads](https://img.shields.io/npm/dm/@stepsapp//hailstormjs) ![Version](https://img.shields.io/npm/v/@stepsapp/hailstormjs)

A real react static website generator

### Headbanging with:

-   🏎 Express
-   😱 React
-   👽 PostCSS
-   ⭐️ Tailwindcss
-   🔝 esbuild
-   🔥 Firebase
-   🙊 Internationalization
-   📡 Livereload
-   ❤️‍🔥 Hot-Reload

### Coming up next:

-   Typescript
-   Crazy tests

## Installation

```
$ npm install @stepsapp/hailstormjs
```

## Getting Started

1. Initialize Hailstorm

```
$ npm exec hailstorm init
```

2. Start Hailstorm

```
$ npm exec hailstorm watch
```

3. Open http://localhost:3000 in your browser.
4. Start editing src/pages/index.jsx
5. Generate Static Files

```
$ npm exec hailstorm build
```

## Documentation
Coming Soon. Meanwhile check /src/pages