chore: v1.8.0 (#29)

* chore: update project dev dependencies

Signed-off-by: Raí Siqueira <[email protected]>

* chore(lib): fixed esm warning

Signed-off-by: Raí Siqueira <[email protected]>

* chore(project): added ts-node again

Signed-off-by: Raí Siqueira <[email protected]>

* feat(lib): add support to NextJS 13

Signed-off-by: Raí Siqueira <[email protected]>

* chore: fixed the storybook

Signed-off-by: Raí Siqueira <[email protected]>

* ci: improvements on GH CI

Signed-off-by: Raí Siqueira <[email protected]>

* chore: fix pnpm workspace

Signed-off-by: Raí Siqueira <[email protected]>

* ci: new action to the size

* ci: fix build command on size action

* ci: size action without cache

* ci: size action without cache

* docs: update readme

* docs: update readme

* test: replace Jest with Vitest

Signed-off-by: Raí Siqueira <[email protected]>

* test: add coverage reporter

Signed-off-by: Raí Siqueira <[email protected]>

* docs: update nextra and components example

* docs: update legacy options

* chore: update types

Signed-off-by: Raí Siqueira <[email protected]>

* chore(lib): bump version

---------

Signed-off-by: Raí Siqueira <[email protected]>

.eslintignore

@@ -0,0 +1 @@
+node_modules

.github/workflows/ci.yml

@@ -1,5 +1,11 @@
 name: CI
 on: [push]
+
+# cancel in-progress runs on new commits to same PR (gitub.event.number)
+concurrency:
+ group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+ cancel-in-progress: true
+
 jobs:
  build:
  name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
@@ -12,26 +18,36 @@ jobs:
 
  steps:
  - name: Checkout repo
- uses: actions/checkout@v2
+ uses: actions/checkout@v3
 
- - name: Use Node ${{ matrix.node }}
- uses: actions/setup-node@v1
+ - name: Install PNPM
+ uses: pnpm/[email protected]
  with:
- node-version: ${{ matrix.node }}
+ version: 7
 
- - name: Install deps and build (with cache)
- uses: bahmutov/npm-install@v1
+ - run: pnpm install --frozen-lockfile
+
+ - name: Cache node_modules
+ uses: actions/cache@v3
+ id: pnpm-cache
  with:
- useLockFile: false
+ path: '**/node_modules'
+ key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ ${{ runner.os }}-node-
 
- - name: Install PNPM
- run: npm i -g pnpm
+ - name: Setup Node and install project dependencies
+ uses: actions/setup-node@v3
+ with:
+ node-version: ${{ matrix.node }}
+ check-latest: true
+ cache: 'pnpm'
 
  - name: Lint
- run: npm run nx run headless-stepper:lint
+ run: pnpm run nx run headless-stepper:lint
 
  - name: Test
- run: npm run nx run headless-stepper:test
+ run: pnpm run nx run headless-stepper:test
 
  - name: Build
- run: pnpm run build:lib
+ run: pnpm run build:all

.github/workflows/coverage.yml

@@ -1,4 +1,4 @@
-name: "Coverage"
+name: 'Coverage'
 on:
  pull_request:
  branches:
@@ -7,41 +7,40 @@ on:
 jobs:
  coverage:
  runs-on: ubuntu-22.04
+
  strategy:
  matrix:
  node: ['16.x']
  os: [ubuntu-latest]
  env:
  CI_JOB_NUMBER: 1
+
  steps:
- - uses: actions/checkout@v3
+ - name: Checkout repo
+ uses: actions/checkout@v3
 
- - name: Set Up Node ${{ matrix.node }}
- uses: actions/setup-node@v3
+ - name: Install PNPM
+ uses: pnpm/[email protected]
  with:
- node-version: ${{ matrix.node }}
+ version: 7
 
- - name: Cache npm
- uses: actions/cache@v3
- with:
- path: ~/.npm
- key: npm-${{ hashFiles('pnpm-lock.yaml') }}
- restore-keys: npm-
+ - run: pnpm install --frozen-lockfile
 
  - name: Cache node_modules
  uses: actions/cache@v3
- id: cache-node-modules
+ id: pnpm-cache
  with:
- path: |
- node_modules
- packages/*/node_modules
- key: modules-${{ hashFiles('pnpm-lock.yaml') }}
-
- - name: Install PNPM
- run: npm i -g pnpm
+ path: '**/node_modules'
+ key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ ${{ runner.os }}-node-
 
- - name: Install dependencies
- run: pnpm i
+ - name: Setup Node and install project dependencies
+ uses: actions/setup-node@v3
+ with:
+ node-version: ${{ matrix.node }}
+ check-latest: true
+ cache: 'pnpm'
 
  - name: Jest coverage report
  uses: ArtiomTr/jest-coverage-report-action@v2

.github/workflows/size.yml

@@ -10,33 +10,22 @@ jobs:
  env:
  CI_JOB_NUMBER: 1
  steps:
- - uses: actions/checkout@v3
+ - name: Checkout repo
+ uses: actions/checkout@v3
 
- - name: Set Up Node ${{ matrix.node }}
- uses: actions/setup-node@v3
+ - name: Install PNPM
+ uses: pnpm/[email protected]
  with:
- node-version: ${{ matrix.node }}
+ version: 7
 
- - name: Cache npm
- uses: actions/cache@v3
- with:
- path: ~/.npm
- key: npm-${{ hashFiles('pnpm-lock.yaml') }}
- restore-keys: npm-
+ - run: pnpm install --frozen-lockfile
 
- - name: Cache node_modules
- uses: actions/cache@v3
- id: cache-node-modules
+ - name: Setup Node and install project dependencies
+ uses: actions/setup-node@v3
  with:
- path: |
- node_modules
- packages/*/node_modules
- key: modules-${{ hashFiles('pnpm-lock.yaml') }}
-
- - name: Install PNPM
- run: npm i -g pnpm
+ node-version: ${{ matrix.node }}
 
- - uses: andresz1/size-limit-action@v1
+ - uses: preactjs/compressed-size-action@v2
  with:
- github_token: ${{ secrets.GITHUB_TOKEN }}
- build_script: "build:lib"
+ repo-token: ${{ secrets.GITHUB_TOKEN }}
+ build-script: 'build:lib'

.storybook/main.js

@@ -1,6 +1,4 @@
 module.exports = {
- stories: [],
- addons: ['@storybook/addon-essentials'],
  core: {
  disableTelemetry: true,
  },

README.md

@@ -37,7 +37,7 @@ The headless-stepper library provide two ways to build your stepper component:
 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';
+import { Stepper, Step } from 'headless-stepper/components';
 
 const MyAwesomeStepper = () => {
  return (

docs/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

docs/components/Container/index.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-type Props = {
- children: React.ReactNode;
-};
+type Props = React.PropsWithChildren<any>;
 
 export default function Container({ children }: Props) {
  return <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">{children}</div>;

docs/components/Features/index.tsx

@@ -51,9 +51,7 @@ const Features = () => {
  />
  </div>
  <div>
- <div className="my-0 font-medium dark:text-white">
- {feat?.name}
- </div>
+ <div className="my-0 font-medium">{feat?.name}</div>
  </div>
  </div>
  );

docs/components/examples/StepperBasic.tsx

@@ -4,7 +4,7 @@ import '@codesandbox/sandpack-react/dist/index.css';
 
 const Sandbox = () => {
  const code = `
- import { Stepper, Step } from 'headless-stepper';
+ import { Stepper, Step } from 'headless-stepper/components';
 
 const MyAwesomeStepper = () => {
  return (

docs/components/examples/StepperWithAsProps.tsx

@@ -4,7 +4,7 @@ import '@codesandbox/sandpack-react/dist/index.css';
 
 const Sandbox = () => {
  const code = `
- import { Stepper, Step } from 'headless-stepper';
+ import { Stepper, Step } from 'headless-stepper/components';
  import { MantineProvider, Button, Group, Container, Box } from "@mantine/core";
 
  const MyAwesomeStepper = () => {