open-index/open-npm huggingface dataset:
npm package: @mohamedelghandour/stepflow
Description: A lightweight onboarding and user tour library for modern web apps
Author: Mohamed Elghandour
Latest version: 1.0.2

<h1>
  <img src="./public/asset/favicon.svg" alt="Stepflow" width="28" height="28" style="vertical-align: middle;" />
  Stepflow
</h1>

[![npm version](https://img.shields.io/npm/v/@mohamedelghandour/stepflow.svg)](https://www.npmjs.com/package/@mohamedelghandour/stepflow)
[![npm downloads](https://img.shields.io/npm/dm/@mohamedelghandour/stepflow.svg)](https://www.npmjs.com/package/@mohamedelghandour/stepflow)
[![Demo](https://img.shields.io/badge/demo-live-blue.svg)](https://mohamedelghandour.github.io/Stepflow/public/)
[![GitHub stars](https://img.shields.io/github/stars/MohamedElGhandour/Stepflow.svg)](https://github.com/MohamedElGhandour/Stepflow/stargazers)
[![GitHub forks](https://img.shields.io/github/forks/MohamedElGhandour/Stepflow.svg)](https://github.com/MohamedElGhandour/Stepflow/network/members)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](./licence)

> A lightweight onboarding and user tour library for modern web apps — build guided tours with highlights, tooltips, overlays, and step navigation.

![](./doc/assets/hero.png)

Live demo: https://mohamedelghandour.github.io/Stepflow/public/

---

## Installation

```bash
npm i @mohamedelghandour/stepflow
# or pnpm add @mohamedelghandour/stepflow
# or yarn add @mohamedelghandour/stepflow
```

## Quick Start

```ts
import { start } from "@mohamedelghandour/stepflow";

await start({
  steps: [
    {
      target: "#stepflow-target-1",
      content: {
        header: "First step",
        body: "Explain the first UI element.",
      },
    },
  ],
});
```

## Documentation

📚 Full Documentation: [./doc/README.md](./doc/README.md)

Quick links:

- Getting Started: [./doc/getting-started/quick-start.md](./doc/getting-started/quick-start.md)
- Configuration / Options: [./doc/guides/configuration.md](./doc/guides/configuration.md)
- API Reference: [./doc/api/index.md](./doc/api/index.md)
- Examples: [./doc/examples/hello-world.md](./doc/examples/hello-world.md)
- Styling and Theming: [./doc/guides/styling-and-theming.md](./doc/guides/styling-and-theming.md)

## Features

- Step-based tours anchored to DOM targets.
- Tooltip and highlight UI that track the current target.
- Optional overlay with click-to-cancel behavior.
- Built-in navigation buttons with per-step and global callbacks.
- Keyboard controls (ArrowLeft/ArrowRight/Escape) when enabled.
- Progress indicator styles (dots, counter, of, percentage, custom).
- Configurable styling via CSS classes and variables.

## Browser Support / Requirements

- Requires a real browser DOM (uses layout APIs like `getBoundingClientRect` and `scrollBy`).
- Include the Stepflow stylesheet from the published package (see docs).

## Contributing

See [./doc/developers/contributing.md](./doc/developers/contributing.md).

## License

MIT License. See [./licence](./licence).
npm package: @mohamedwael/mongo-seeder
Description: Advanced MongoDB seeder CLI with schema and relationships
Author: Mohamed Wael
Latest version: 1.0.0

# Mongo Seeder

Advanced CLI tool to generate fake data and seed MongoDB with:

- Custom schemas
- Relationships (refs)
- Embedded documents
- Arrays
- Auto dependency resolution
- Faker-powered data generation

---

# Installation

```bash
npm install
npm link
```

---

# Usage

```bash
mongo-seeder seed --config ./config.json --uri mongodb://localhost:27017/testdb
```

---

# Config File Structure

```json
{
  "collections": {
    "collectionName": {
      "count": 10,
      "schema": {}
    }
  }
}
```

---

# Schema Types

## 1. Basic Faker Fields

```json
{
  "name": "name",
  "email": "email",
  "age": "number"
}
```

---

## 2. Relationships (References)

```json
{
  "userId": { "ref": "users" }
}
```

✔ Automatically links documents using `_id`
✔ Order of collections does NOT matter

---

## 3. Embedded Objects

```json
{
  "profile": {
    "age": "number",
    "address": {
      "city": "city",
      "country": "country"
    }
  }
}
```

---

## 4. Arrays

```json
{
  "tags": {
    "type": "array",
    "length": 3,
    "of": "word"
  }
}
```

---

## Full Example

```json
{
  "collections": {
    "posts": {
      "count": 20,
      "schema": {
        "title": "sentence",
        "authorId": { "ref": "users" }
      }
    },
    "users": {
      "count": 10,
      "schema": {
        "name": "name",
        "email": "email",
        "profile": {
          "age": "number",
          "address": {
            "city": "city",
            "country": "country"
          }
        },
        "tags": {
          "type": "array",
          "length": 3,
          "of": "word"
        }
      }
    }
  }
}
```

---

# Available Faker Types

| Type      | Description     |
| --------- | --------------- |
| name      | Full name       |
| firstName | First name      |
| lastName  | Last name       |
| email     | Email           |
| username  | Username        |
| password  | Password        |
| sentence  | Random sentence |
| paragraph | Paragraph       |
| word      | Single word     |
| number    | Integer         |
| float     | Float           |
| boolean   | true/false      |
| uuid      | UUID            |
| date      | Past date       |
| city      | City name       |
| country   | Country         |
| street    | Street address  |
| company   | Company name    |
| jobTitle  | Job title       |
| phone     | Phone number    |
| url       | URL             |
| image     | Image URL       |

---

# How It Works

1. Reads config file
2. Detects relationships (`ref`)
3. Builds dependency graph
4. Sorts collections automatically
5. Generates fake data
6. Inserts into MongoDB

---

# Errors

### Circular dependency

```
Circular dependency detected
```

### Missing reference

```
Missing reference data: users
```

---

# Development

```bash
npm start
```