-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #71 from damianricobelli/chore/update-readme-and-a…
…dd-contributing-file chore: update readme and add contributing file
- Loading branch information
Showing
3 changed files
with
90 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters