Merge pull request #35 from raisiqueira/chore/update-nx

chore: housekeeping

.eslintrc.json

@@ -1,35 +1,59 @@
 {
   "root": true,
-  "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "ignorePatterns": [
+    "**/*"
+  ],
+  "plugins": [
+    "@nx"
+  ],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
             "allow": [],
             "depConstraints": [
               {
                 "sourceTag": "*",
-                "onlyDependOnLibsWithTags": ["*"]
+                "onlyDependOnLibsWithTags": [
+                  "*"
+                ]
               }
             ]
           }
         ]
       }
     },
     {
-      "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "extends": [
+        "plugin:@nx/typescript"
+      ],
       "rules": {}
     },
     {
-      "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "extends": [
+        "plugin:@nx/javascript"
+      ],
       "rules": {}
     }
+  ],
+  "extends": [
+    "plugin:storybook/recommended"
   ]
 }

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['16.x']
+        node: ['16', '18']
         os: [ubuntu-latest]
 
     steps:

.nvmrc

@@ -1 +1 @@
-16
+18

.storybook/main.js

@@ -6,4 +6,11 @@ module.exports = {
   // webpackFinal: async (config, { configType }) => {
   //   return config;
   // },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: false,
+  },
 };

README.md

@@ -127,7 +127,7 @@ The Storybook will be available on the localhost:4400 and refresh when you chang
 
 ### Running unit tests
 
-Run `nx test headless-stepper` to execute the unit tests via [Jest](https://jestjs.io).
+Run `nx test headless-stepper` to execute the unit tests via [Vitest](https://vitest.dev).
 
 ## Sponsors
 

docs/components/CustomSandBox/index.tsx

@@ -0,0 +1,32 @@
+import {
+  SandpackProvider,
+  SandpackLayout,
+  SandpackPreview,
+  SandpackCodeEditor,
+  SandpackFileExplorer,
+} from '@codesandbox/sandpack-react';
+
+import { type SandpackProviderProps } from '@codesandbox/sandpack-react';
+
+export const CustomSandBox = ({
+  files,
+  options,
+  customSetup,
+  ...rest
+}: SandpackProviderProps) => {
+  return (
+    <SandpackProvider
+      template="react-ts"
+      files={files}
+      options={options}
+      customSetup={customSetup}
+      {...rest}
+    >
+      <SandpackLayout>
+        <SandpackFileExplorer />
+        <SandpackCodeEditor showTabs showLineNumbers />
+      </SandpackLayout>
+      <SandpackPreview style={{ height: 400 }} showNavigator />
+    </SandpackProvider>
+  );
+};

docs/components/examples/Basic.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Sandpack } from '@codesandbox/sandpack-react';
-import '@codesandbox/sandpack-react/dist/index.css';
+import { CustomSandBox } from '../CustomSandBox';
 
 const Sandbox = () => {
   const code = `
@@ -52,16 +51,11 @@ const Sandbox = () => {
     );
   }`;
   return (
-    <Sandpack
-      template="react-ts"
+    <CustomSandBox
       customSetup={{ dependencies: { 'headless-stepper': 'next' } }}
       files={{
         '/App.tsx': code,
       }}
-      options={{
-        showNavigator: true,
-        showTabs: true,
-      }}
     />
   );
 };

docs/components/examples/StepperBasic.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Sandpack } from '@codesandbox/sandpack-react';
-import '@codesandbox/sandpack-react/dist/index.css';
+import { CustomSandBox } from '../CustomSandBox';
 
 const Sandbox = () => {
   const code = `
@@ -24,16 +23,11 @@ export default MyAwesomeStepper;
 `;
 
   return (
-    <Sandpack
-      template="react-ts"
+    <CustomSandBox
       customSetup={{ dependencies: { 'headless-stepper': 'next' } }}
       files={{
         '/App.tsx': code,
       }}
-      options={{
-        showNavigator: true,
-        showTabs: true,
-      }}
     />
   );
 };

docs/components/examples/StepperWithAsProps.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Sandpack } from '@codesandbox/sandpack-react';
-import '@codesandbox/sandpack-react/dist/index.css';
+import { CustomSandBox } from '../CustomSandBox';
 
 const Sandbox = () => {
   const code = `
@@ -35,8 +34,7 @@ const Sandbox = () => {
 `;
 
   return (
-    <Sandpack
-      template="react-ts"
+    <CustomSandBox
       customSetup={{
         dependencies: {
           'headless-stepper': 'next',
@@ -48,11 +46,6 @@ const Sandbox = () => {
       files={{
         '/App.tsx': code,
       }}
-      options={{
-        showNavigator: true,
-        showTabs: true,
-        showLineNumbers: true,
-      }}
     />
   );
 };

docs/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^0.15.0",
+    "@codesandbox/sandpack-react": "^2.6.9",
     "next": "13.2.4",
     "next-seo": "^5.1.0",
     "nextra": "^2.2.20",

docs/pages/getting-started/installation.mdx

@@ -2,28 +2,29 @@
 title: Installation
 ---
 
-import { Callout } from 'nextra-theme-docs';
+import { Callout, Tabs, Tab } from 'nextra-theme-docs';
 
 # Installation
 
 You can install using [NPM](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/en/docs/install) or [PNPM](https://pnpm.io/).
 
-Headless Stepper is compatible with **React 16.8.0** and up.
-
-## NPM
-
-```bash
-npm install --save headless-stepper
-```
-
-## Yarn
-
-```bash
-yarn add headless-stepper
-```
-
-## PNPM
-
-```bash
-pnpm install --save headless-stepper
-```
+Headless Stepper is compatible with **React 16.8.0** and up
+
+<Tabs items={['npm', 'yarn', 'pnpm']}>
+  <Tab>
+  ```bash
+  npm run dev
+  ```
+  </Tab>
+  <Tab>
+  ```bash
+  yarn dev
+  ```
+</Tab>
+
+  <Tab>
+  ```bash
+  pnpm dev
+  ```
+  </Tab>
+</Tabs>

docs/tailwind.config.js

@@ -1,4 +1,4 @@
-// const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
+// const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
 // const { join } = require('path');
 
 module.exports = {