chore: integrate lerna

.github/actions/check-quality/action.yml

@@ -3,9 +3,6 @@ description: 'Checks code quality: formatter, linters, build and test'
 runs:
   using: 'composite'
   steps:
-    - shell: bash
-      run: pnpm format-check
-
     - shell: bash
       run: pnpm type-check
 

.gitignore

@@ -44,4 +44,5 @@ build
 .local/
 .history/
 
-.vscode/pinned-files.json
+.vscode/pinned-files.json
+.nx/cache

README.md

@@ -65,7 +65,7 @@ pnpm add -D @storylite/storylite vite @storylite/vite-plugin
 ```
 
 For the next steps, please check the
-[example React](https://github.com/itsjavi/storylite/tree/main/packages/examples/react) directory to
+[example React](https://github.com/itsjavi/storylite/tree/main/examples/react) directory to
 learn how to integrate it in your project.
 
 ## Adding MDX support

packages/examples/react/.storylite/canvas.tsx → examples/react/.storylite/canvas.tsx

@@ -1,14 +1,14 @@
 import '@storylite/storylite/styles.css'
 //
+import '../src/styles/components.css'
+//
 import '../src/styles/storylite-iframe.css'
 import '../src/styles/storylite-ui.css'
-//
-import '../src/styles/components.css'
 
 // import iframe-scope styles here
 
-import { renderStoryLiteApp } from '@storylite/storylite'
 import stories from '@storylite/vite-plugin:stories'
+import { renderStoryLiteApp } from '@storylite/storylite'
 
 import config from './config'
 

packages/examples/react/.storylite/index.tsx → examples/react/.storylite/index.tsx

@@ -3,8 +3,8 @@ import '../src/styles/storylite-ui.css'
 
 // import other StoryLite UI styles here
 
-import { renderStoryLiteApp } from '@storylite/storylite'
 import stories from '@storylite/vite-plugin:stories'
+import { renderStoryLiteApp } from '@storylite/storylite'
 
 import config from './config'
 

packages/examples/react/tsconfig.json → examples/react/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../../tsconfig.json",
+  "extends": "../../tsconfig.json",
   "include": ["*.ts", "*.tsx", "src/**/*", "stories/**/*", ".storylite/**/*"],
   "compilerOptions": {
     "jsx": "react-jsx",

lerna.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "version": "0.0.0",
+  "npmClient": "pnpm",
+  "packages": ["packages/*", "examples/*"]
+}

nx.json

@@ -0,0 +1,30 @@
+{
+  "targetDefaults": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "outputs": ["{projectRoot}/examples/*/dist", "{projectRoot}/packages/*/dist"]
+    },
+    "dev": {
+      "dependsOn": []
+    },
+    "preview": {
+      "dependsOn": ["^build"]
+    },
+    "lint": {
+      "cache": true,
+      "dependsOn": ["^lint"]
+    },
+    "lint-fix": {
+      "dependsOn": []
+    },
+    "publint-check": {
+      "cache": true,
+      "dependsOn": []
+    },
+    "type-check": {
+      "cache": true,
+      "dependsOn": []
+    }
+  }
+}

package.json

@@ -9,48 +9,40 @@
   "license": "MIT",
   "author": "Javi Aguilar https://itsjavi.com",
   "scripts": {
-    "build": "pnpm -r build",
+    "build": "lerna run build",
     "clear-cache": "rm -rf packages/*/.next && jest --clearCache",
-    "dev": "pnpm run -r --parallel dev",
-    "format": "pnpm lint-fix && pnpm format-fix",
-    "format-check": "biome format .",
-    "format-fix": "pnpm format-pkg && biome format . --write",
-    "format-pkg": "pnpm sort-package-json package.json packages/*/package.json packages/examples/*/package.json",
-    "postinstall": "pnpm lint-staged || echo 'postinstall failed'",
-    "lint": "biome lint .",
-    "lint-fix": "biome lint --apply .",
+    "dev": "lerna run dev --parallel",
+    "format": "pnpm lint-fix",
+    "format-pkg": "pnpm sort-package-json package.json packages/*/package.json examples/*/package.json",
+    "lint": "pnpm lint-biome",
+    "lint-biome": "biome lint . --max-diagnostics 50",
+    "lint-biome-fix": "biome check --max-diagnostics 50 --apply .",
+    "lint-fix": "pnpm format-pkg && pnpm lint-biome-fix",
     "prepare": "pnpm format-pkg",
     "pretty": "pnpm run format",
-    "preview": "pnpm build && npx -y http-server ./packages/examples/react/dist",
-    "publint": "pnpm -r publint-check",
-    "quality-checks": "pnpm format-check && pnpm type-check && pnpm lint && pnpm build && pnpm publint && pnpm test:ci",
+    "preview": "pnpm build && http-server ./examples/react/dist",
+    "publint": "lerna run publint-check",
+    "quality-checks": "pnpm type-check && pnpm lint && pnpm build && pnpm publint && pnpm test:ci",
     "test": "jest",
     "test:ci": "jest --ci --coverage",
     "test:coverage": "jest --coverage",
-    "type-check": "pnpm -r type-check",
-    "version:bump": "semver-release version:bump",
-    "version:publish": "semver-release version:release --tags --npm --filter '@storylite/*'",
-    "version:publish-notes": "semver-release version:release --github",
+    "type-check": "lerna run type-check",
+    "version:bump": "lerna version --no-private",
+    "version:publish": "lerna publish --no-private",
     "version:release": "pnpm version:publish"
   },
-  "lint-staged": {
-    "*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}": ["biome lint --apply ."],
-    "*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,json}": ["biome format . --write"]
-  },
   "devDependencies": {
     "@biomejs/biome": "^1.6.3",
-    "@itsjavi/semver-release": "^0.7.2",
     "@swc/core": "^1.4.11",
     "@swc/jest": "^0.2.36",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.30",
-    "changelogen": "^0.5.5",
+    "http-server": "^14.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.2.2",
-    "semver": "^7.6.0",
+    "lerna": "^8.1.2",
     "sort-package-json": "^2.9.0",
     "typescript": "^5.4.3"
   },

packages/docs/.storylite/canvas.tsx

@@ -1,14 +1,14 @@
 import '@storylite/storylite/styles.css'
 //
+import '../src/styles/components.css'
+//
 import '../src/styles/storylite-iframe.css'
 import '../src/styles/storylite-ui.css'
-//
-import '../src/styles/components.css'
 
 // import iframe-scope styles here
 
-import { renderStoryLiteApp } from '@storylite/storylite'
 import stories from '@storylite/vite-plugin:stories'
+import { renderStoryLiteApp } from '@storylite/storylite'
 
 import config from './config'
 

packages/docs/.storylite/index.tsx

@@ -3,8 +3,8 @@ import '../src/styles/storylite-ui.css'
 
 // import other StoryLite UI styles here
 
-import { renderStoryLiteApp } from '@storylite/storylite'
 import stories from '@storylite/vite-plugin:stories'
+import { renderStoryLiteApp } from '@storylite/storylite'
 
 import config from './config'
 

packages/storylite/src/services/messenger/useWindowMessenger.ts

@@ -4,9 +4,9 @@ import { useStoryLiteStore } from '@/app/stores/global'
 
 import { registerWindowMessageListener, sendWindowMessage } from './windowMessaging'
 import {
+  type CrossDocumentMessage,
   CrossDocumentMessageSource,
   CrossDocumentMessageType,
-  type CrossDocumentMessage,
 } from './windowMessaging.types'
 
 export function useWindowMessenger() {

packages/storylite/src/services/messenger/windowMessaging.ts

@@ -1,4 +1,4 @@
-import { CrossDocumentMessageSource, WindowMessageOrigin, type CrossDocumentMessage } from './windowMessaging.types'
+import { type CrossDocumentMessage, CrossDocumentMessageSource, WindowMessageOrigin } from './windowMessaging.types'
 
 export const sendWindowMessageToRoot = (message: CrossDocumentMessage) => {
   sendWindowMessage(message, CrossDocumentMessageSource.Iframe, window.parent)