Skip to content

Commit

Permalink
Merge pull request #71 from damianricobelli/chore/update-readme-and-a…
Browse files Browse the repository at this point in the history
…dd-contributing-file

chore: update readme and add contributing file
  • Loading branch information
damianricobelli authored Oct 6, 2024
2 parents cfd71ec + dba3049 commit 8085af5
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 30 deletions.
35 changes: 35 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# Contributing to Stepperize

We're glad you're interested in contributing to our project! Here are some guidelines to help you get started.

## Getting Started

1. Fork the repository
2. Clone your fork: `git clone https://github.com/damianricobelli/stepperize.git`
3. Create a new branch: `git checkout -b your-feature-name`
4. Make your changes
5. Commit your changes: `git commit -m "Add some feature"`
6. Push to the branch: `git push origin your-feature-name`
7. Create a pull request

## Development Setup

1. Install dependencies: `pnpm i`
2. Run the development docs server: `pnpm dev --filter docs`

## Code Style

We use Biome for code formatting. Please ensure your code is formatted before submitting a pull request.

## Submitting Pull Requests

1. Ensure your code adheres to the existing style.
2. Include tests for any new functionality.
3. Update documentation if necessary.
4. Describe your changes in detail in the pull request description.

## Reporting Issues

Use the GitHub issue tracker to report bugs or suggest features.

Thank you for contributing!
82 changes: 53 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,56 +1,80 @@

<p align="center">
<img src="https://stepperize.vercel.app/og.png" />
<img src="https://stepperize.vercel.app/og.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 applications.
A library for creating step-by-step workflows in your apps

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

## Installation

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

## Understanding the steps

The main idea is that we can define our IDs that will identify each step.
When we define the steps, we get an object that contains everything we need to build our stepper.

## Usage
## Quick Start

### Import the constructor

In order to create our steps we need to import the `defineSteps` from the library.
1. Import the constructor:

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

### Create the steps

`defineStepper` is a function that allows us to get a Provider, a hook and the array of steps we are using.
The only mandatory value for each step is the `id`. Then, we can add whatever we need and this will be typesafe when we use the hook.
2. Define your steps:

```tsx
const { Scoped, useStepper, steps } = defineStepper(
{ id: "step-1", title: "Label 1", description: "Description 1" },
{ id: "step-2", title: "Label 2", description: "Description 2" },
{ id: "step-3", title: "Label 3", description: "Description 3" },
{ id: "step-4", title: "Label 4", description: "Description 4" }
{ 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" }
);
```

### Next steps
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

The only required field for each step is the `id`. You can add any additional properties you need, and they'll be fully typesafe 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

Visit the [documentation](https://stepperize.vercel.app/docs/getting-started/use-stepper) to see more details.
Stepperize is [MIT licensed](LICENSE).
3 changes: 2 additions & 1 deletion turbo.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
},
"dev": {
"cache": false,
"persistent": true
"persistent": true,
"dependsOn": ["^build"]
},
"clean": {
"cache": false
Expand Down

0 comments on commit 8085af5

Please sign in to comment.