docs: update main readme (#26)

* chore: bump nx version Signed-off-by: Raí Siqueira <[email protected]> * chore: bump nx version Signed-off-by: Raí Siqueira <[email protected]> * chore: dependecies cleanup Signed-off-by: Raí Siqueira <[email protected]> * chore: remove unused env file Signed-off-by: Raí Siqueira <[email protected]> * feat: add Jest report Signed-off-by: Raí Siqueira <[email protected]> * feat: add Jest report Signed-off-by: Raí Siqueira <[email protected]> * chore: try jest coverage Signed-off-by: Raí Siqueira <[email protected]> * chore: try jest coverage Signed-off-by: Raí Siqueira <[email protected]> * chore: add next to deps Signed-off-by: Raí Siqueira <[email protected]> * chore: update size CI Signed-off-by: Raí Siqueira <[email protected]> * docs: update main readme Signed-off-by: Raí Siqueira <[email protected]> * chore: bump headless-stepper version Signed-off-by: Raí Siqueira <[email protected]> Signed-off-by: Raí Siqueira <[email protected]>
raisiqueira · Dec 24, 2022 · eb5c496 · eb5c496
1 parent ba4dd3b
commit eb5c496
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 20 deletions.
diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
@@ -49,7 +49,7 @@ jobs:
  with:
  output: report-markdown
  package-manager: pnpm
- test-script: pnpm test
+ test-script: pnpm test --skip-nx-cache
 
  - uses: marocchino/sticky-pull-request-comment@v2
  with:

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Production ready React hook to create awesome stepper components. Effortless to
 
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/headless-stepper?style=flat-square)
 
-| [Documentation](https://headless-stepper.netlify.app/) | [Issues](https://github.com/raisiqueira/headless-stepper-monorepo/issues)
+[Documentation](https://headless-stepper.netlify.app/) | [Issues](https://github.com/raisiqueira/headless-stepper-monorepo/issues)
 
 ## Quick features
 
@@ -15,17 +15,48 @@ Production ready React hook to create awesome stepper components. Effortless to
 
 ## Start
 
-Install using NPM or Yarn:
+Install the `headless-stepper` library using your favorite package manager:
 
 ```bash
 npm install headless-stepper
 # or using yarn
 yarn add headless-stepper
+# or using pnpm
+pnpm install headless-stepper
 ```
 
 ## Using
 
-**Basic example:**
+The headless-stepper library provide two ways to build your stepper component:
+
+- Using the `Stepper` and `Step` components. See the [documentation](https://headless-stepper.netlify.app/getting-started/using-stepper) for more details.
+- Using the `useStepper` hook. See the [documentation](https://headless-stepper.netlify.app/getting-started/using) for more details.
+
+### Using the `Stepper` and `Step` components
+
+To use the `Stepper` and `Step` components, you need to import the `Stepper` and `Step` components from the `headless-stepper` library.
+
+```tsx
+import { Stepper, Step } from 'headless-stepper';
+
+const MyAwesomeStepper = () => {
+ return (
+ <Stepper currentStep={0}>
+ <Step label="Step 1">Step 1 content</Step>
+
+ <Step label="Step 2">Step 2 content</Step>
+
+ <Step label="Step 3">Step 3 content</Step>
+ </Stepper>
+ );
+};
+
+export default MyAwesomeStepper;
+```
+
+Under the hood, the `Stepper` component will use the `useStepper` hook to manage the state of the stepper. You can use the `useStepper` hook to build your own stepper component.
+
+### Using the `useStepper` hook
 
 ```tsx
 import React from 'react';
@@ -80,24 +111,24 @@ export function HeadlessStepper(props: HeadlessStepperProps) {
 export default HeadlessStepper;
 ```
 
-More examples on [documentation](https://headless-stepper.netlify.app/).
-
-## Running unit tests
-
-Run `nx test headless-stepper` to execute the unit tests via [Jest](https://jestjs.io).
+You can find more examples on [documentation](https://headless-stepper.netlify.app/).
 
 ## Contribute
 
 This project was started with [Nx](https://nx.dev) to manage the monorepo. To learn more about Nx, read the [Nx documentation](https://nx.dev/).
 
-The `headless-stepper` library and the documentation is under _packages_ folder. If you're runing on local, execute the following command to start the development server:
+The `headless-stepper` library and the documentation is under _packages_ folder. If you're running on local, execute the following command to start the development server:
 
 ```bash
 npm run dev
 ```
 
 The Storybook will be available on the localhost:4400 and refresh when you change the `useStepper` code.
 
+### Running unit tests
+
+Run `nx test headless-stepper` to execute the unit tests via [Jest](https://jestjs.io).
+
 ## Sponsors
 
 [![Sponsors](https://cdn.jsdelivr.net/gh/raisiqueira/static/sponsors.svg)](https://headless-stepper.netlify.app/sponsors)

diff --git a/packages/headless-stepper/README.md b/packages/headless-stepper/README.md
@@ -4,7 +4,7 @@ Production ready React hook to create awesome stepper components. Effortless to
 
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/headless-stepper?style=flat-square)
 
-| [Documentation](https://headless-stepper.netlify.app/) | [Issues](https://github.com/raisiqueira/headless-stepper-monorepo/issues)
+[Documentation](https://headless-stepper.netlify.app/) | [Issues](https://github.com/raisiqueira/headless-stepper-monorepo/issues)
 
 ## Quick features
 
@@ -15,17 +15,48 @@ Production ready React hook to create awesome stepper components. Effortless to
 
 ## Start
 
-Install using NPM or Yarn:
+Install the `headless-stepper` library using your favorite package manager:
 
 ```bash
 npm install headless-stepper
 # or using yarn
 yarn add headless-stepper
+# or using pnpm
+pnpm install headless-stepper
 ```
 
 ## Using
 
-**Basic example:**
+The headless-stepper library provide two ways to build your stepper component:
+
+- Using the `Stepper` and `Step` components. See the [documentation](https://headless-stepper.netlify.app/getting-started/using-stepper) for more details.
+- Using the `useStepper` hook. See the [documentation](https://headless-stepper.netlify.app/getting-started/using) for more details.
+
+### Using the `Stepper` and `Step` components
+
+To use the `Stepper` and `Step` components, you need to import the `Stepper` and `Step` components from the `headless-stepper` library.
+
+```tsx
+import { Stepper, Step } from 'headless-stepper';
+
+const MyAwesomeStepper = () => {
+ return (
+ <Stepper currentStep={0}>
+ <Step label="Step 1">Step 1 content</Step>
+
+ <Step label="Step 2">Step 2 content</Step>
+
+ <Step label="Step 3">Step 3 content</Step>
+ </Stepper>
+ );
+};
+
+export default MyAwesomeStepper;
+```
+
+Under the hood, the `Stepper` component will use the `useStepper` hook to manage the state of the stepper. You can use the `useStepper` hook to build your own stepper component.
+
+### Using the `useStepper` hook
 
 ```tsx
 import React from 'react';
@@ -80,24 +111,24 @@ export function HeadlessStepper(props: HeadlessStepperProps) {
 export default HeadlessStepper;
 ```
 
-More examples on [documentation](https://headless-stepper.netlify.app/).
-
-## Running unit tests
-
-Run `nx test headless-stepper` to execute the unit tests via [Jest](https://jestjs.io).
+You can find more examples on [documentation](https://headless-stepper.netlify.app/).
 
 ## Contribute
 
 This project was started with [Nx](https://nx.dev) to manage the monorepo. To learn more about Nx, read the [Nx documentation](https://nx.dev/).
 
-The `headless-stepper` library and the documentation is under _packages_ folder. If you're runing on local, execute the following command to start the development server:
+The `headless-stepper` library and the documentation is under _packages_ folder. If you're running on local, execute the following command to start the development server:
 
 ```bash
 npm run dev
 ```
 
 The Storybook will be available on the localhost:4400 and refresh when you change the `useStepper` code.
 
+### Running unit tests
+
+Run `nx test headless-stepper` to execute the unit tests via [Jest](https://jestjs.io).
+
 ## Sponsors
 
 [![Sponsors](https://cdn.jsdelivr.net/gh/raisiqueira/static/sponsors.svg)](https://headless-stepper.netlify.app/sponsors)

diff --git a/packages/headless-stepper/package.json b/packages/headless-stepper/package.json
@@ -1,7 +1,7 @@
 {
  "name": "headless-stepper",
  "description": "Production ready React hook to create awesome stepper components. Effortless to use, easy to customize.",
- "version": "1.6.0",
+ "version": "1.7.0",
  "main": "./dist/index.cjs.js",
  "module": "./dist/index.esm.js",
  "types": "./dist/index.d.ts",