chore: fix readme

damianricobelli · Oct 6, 2024 · 6b7939f · 6b7939f
1 parent 44aa6a2
commit 6b7939f
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,4 @@
+
 <p align="center">
   <img src="https://stepperize.vercel.app/banner.png" alt="Stepperize Logo" />
 </p>
@@ -6,75 +7,50 @@
 [![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
+A library for creating step-by-step workflows in your applications.
 
-- 🚀 Fast and efficient
-- 🔥 Powerful and flexible
-- 📦 Lightweight (< 1kB gzipped)
-- 🪄 Fully typesafe
-- 🔗 Composable architecture
-- 🎨 Unstyled for maximum customization
+- 🚀 Fast
+- 🔥 Powerful
+- 📦 Lightweight, < 1kB (gzip)
+- 🪄 Typesafe
+- 🔗 Composable
+- 🎨 Unstyled
 
 ## Installation
 
 ```bash
-npm install @stepperize/react
+npm i @stepperize/react
 ```
 
-## Quick Start
+## 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
 
-1. Import the constructor:
+### Import the constructor
+
+In order to create our steps we need to import the `defineSteps` from the library.
 
 ```tsx
 import { defineStepper } from "@stepperize/react";
 ```
 
-2. Define your steps:
+### 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.
 
 ```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" }
+  { 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" }
 );
 ```
 
-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
+### Next steps
 
-Stepperize is [MIT licensed](LICENSE).
+Visit the [documentation](https://stepperize.vercel.app/docs/getting-started/use-stepper) to see more details.
diff --git a/apps/docs/app/public/robots.txt → apps/docs/app/robots.txt b/apps/docs/app/public/robots.txt → apps/docs/app/robots.txt
diff --git a/packages/react/README.md b/packages/react/README.md
@@ -2,23 +2,23 @@
   <img src="https://stepperize.vercel.app/banner.png" alt="Stepperize Logo" />
 </p>
 
-# Stepperize
+[![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 powerful, lightweight library for creating step-by-step workflows in React applications.
+A library for creating step-by-step workflows in your apps
 
-## Features
-
-- 🚀 Fast
-- 🔥 Powerful
+- 🚀 Fast and efficient
+- 🔥 Powerful and flexible
 - 📦 Lightweight (< 1kB gzipped)
-- 🪄 Typesafe
-- 🔗 Composable
-- 🎨 Unstyled
+- 🪄 Fully typesafe
+- 🔗 Composable architecture
+- 🎨 Unstyled for maximum customization
 
 ## Installation
 
 ```bash
-npm i @stepperize/react
+npm install @stepperize/react
 ```
 
 ## Quick Start
@@ -33,19 +33,19 @@ import { defineStepper } from "@stepperize/react";
 
 ```tsx
 const { Scoped, useStepper, steps } = defineStepper(
-  { id: "step-1", title: "Step 1", description: "Description 1" },
-  { id: "step-2", title: "Step 2", description: "Description 2" },
-  { id: "step-3", title: "Step 3", description: "Description 3" },
-  { id: "step-4", title: "Step 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" }
 );
 ```
 
 3. Use the hook in your components:
 
 ```tsx
-function MyComponent() {
+function StepperComponent() {
   const { currentStep, nextStep, prevStep } = useStepper();
-  
+
   return (
     <div>
       <h2>{currentStep.title}</h2>
@@ -59,20 +59,22 @@ function MyComponent() {
 
 ## How It Works
 
-Stepperize allows you to define a series of steps with unique IDs. The `defineStepper` function returns:
+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
 
-- `Scoped`: A Provider component to wrap your stepper
-- `useStepper`: A hook to access and control the current step
-- `steps`: An array of the defined steps
+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 detailed usage instructions and API reference, visit our [documentation](https://stepperize.vercel.app/docs/getting-started/use-stepper).
+For more detailed information on usage, configuration, and advanced features, visit our [full documentation](https://stepperize.vercel.app).
 
 ## Contributing
 
-We welcome contributions! Please open an issue or submit a pull request on our [GitHub repository](https://github.com/yourusername/stepperize).
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.
 
 ## License
 
-Stepperize is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+Stepperize is [MIT licensed](LICENSE).