upgrade deps and fix linting issues

.gitignore

@@ -45,4 +45,4 @@ build
 .history/
 
 .vscode/pinned-files.json
-.nx/cache
+.nx/

.vscode/settings.json

@@ -22,7 +22,7 @@
     "quickfix.biome": "explicit"
   },
   "[markdown]": {
-    "editor.defaultFormatter": "vscode.markdown-language-features",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.fontSize": 14,
     "editor.lineHeight": 18,
     "editor.wordWrap": "off",

README.md

@@ -14,14 +14,14 @@
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/storylite-demo?file=stories/index.stories.tsx)
 
 StoryLite is a modern and lightweight toolkit for crafting and managing design systems and
-components with ease. Inspired by the popular StoryBook UI and powered by Vite⚡️, StoryLite offers
+React components with ease. Inspired by the popular StoryBook UI and powered by Vite⚡️, StoryLite offers
 a streamlined and familiar developer experience, thanks to the story format compatible with
 [Component Story Format (CSF) 3.0](https://storybook.js.org/docs/react/api/csf).
 
-With StoryLite, you can quickly create, test, and refine UI components in isolation, ensuring that
+With StoryLite, you can quickly create, test, and refine React-based UI components in isolation, ensuring that
 your application maintains a consistent look and feel.
 
-Tailored for smaller projects that crave simplicity without the overhead of a full StoryBook setup,
+Tailored for smaller React projects that crave simplicity without the overhead of a full StoryBook setup,
 StoryLite provides an intuitive UI that's customizable to your unique needs.
 
 ![StoryLite](https://raw.githubusercontent.com/itsjavi/storylite/main/packages/storylite/screenshot.png)
@@ -101,11 +101,11 @@ looking to:
 - Better story interoperability with StoryBook.
 - Better extensibility and configuration options.
 - Expand addons to support multiple resizable viewports, and tools for zoom, accessibility, etc.
-- Extend examples to frameworks like Vue, Svelte, Solid, and Qwik.
 - Ability to generate code snippets for each story.
 - Ability to edit component props and state in the UI.
 - Improve documentation and mobile experience of the UI.
 - Full test coverage.
+- Study the possibility of supporting other frameworks (Vue, Svelte, Solid, etc.)
 
 ## Contributing
 

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.6.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
   "organizeImports": {
     "enabled": true
   },

examples/react/package.json

@@ -15,10 +15,10 @@
   "devDependencies": {
     "@storylite/storylite": "workspace:*",
     "@storylite/vite-plugin": "workspace:*",
-    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.77",
+    "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.6"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8"
   }
 }

examples/react/vite.config.ts

@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-import { resolve } from 'path'
+import { resolve } from 'node:path'
 
 /**
  * @see https://vitejs.dev/config

jest.config.js

@@ -11,7 +11,7 @@ module.exports = {
     {
       displayName: 'DOM',
       coveragePathIgnorePatterns,
-      testEnvironment: __dirname + '/jest.env-browser.js',
+      testEnvironment: `${__dirname}/jest.env-browser.js`,
       testMatch: ['**/*.test.ts', '**/*.test.tsx'],
       testPathIgnorePatterns: ['/node_modules/', '/.local/', '/.ignore/', '/dist/'],
       // setupFilesAfterEnv: ['./jest.setup-browser.js'],

jest.env-browser.js

@@ -15,18 +15,18 @@ class BrowserEnvironment extends JSDOMEnvironment {
     this.global.Response = Response
 
     // TextEncoder and TextDecoder are not available in JSDOM
-    const commonJsUtils = require('util')
+    const commonJsUtils = require('node:util')
     this.global.TextEncoder = commonJsUtils.TextEncoder
     this.global.TextDecoder = commonJsUtils.TextDecoder
 
     // Some stream classes are different in JSDOM
-    const commonJsBuffer = require('buffer')
+    const commonJsBuffer = require('node:buffer')
     this.global.ArrayBuffer = ArrayBuffer
     this.global.Blob = commonJsBuffer.Blob
     this.global.File = commonJsBuffer.File
 
     // URL implementation is different in JSDOM
-    this.global.URL = require('url').URL
+    this.global.URL = require('node:url').URL
 
     // Match Crypto implementation in Node.js
     // globalThis.crypto = require('crypto').webcrypto

lerna.json

@@ -2,8 +2,5 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "version": "0.15.1",
   "npmClient": "pnpm",
-  "packages": [
-    "packages/*",
-    "examples/*"
-  ]
+  "packages": ["packages/*", "examples/*"]
 }

package.json

@@ -32,19 +32,19 @@
     "type-check": "lerna run type-check"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.6.3",
-    "@swc/core": "^1.4.11",
+    "@biomejs/biome": "^1.6.4",
+    "@swc/core": "^1.4.13",
     "@swc/jest": "^0.2.36",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "^15.0.1",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.30",
+    "@types/node": "^20.12.7",
     "http-server": "^14.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lerna": "^8.1.2",
-    "sort-package-json": "^2.9.0",
-    "typescript": "^5.4.3"
+    "sort-package-json": "^2.10.0",
+    "typescript": "^5.4.5"
   },
   "packageManager": "pnpm@8.8.0",
   "engines": {

packages/docs/package.json

@@ -10,20 +10,20 @@
     "preview": "vite --base=/storylite/ preview --port=7088 --host=0.0.0.0 --open"
   },
   "dependencies": {
-    "lucide-react": "^0.363.0",
+    "lucide-react": "^0.367.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@mdx-js/rollup": "^3.0.1",
     "@storylite/storylite": "workspace:*",
     "@storylite/vite-plugin": "workspace:*",
-    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.77",
+    "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^4.0.0",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.6"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8"
   }
 }

packages/docs/vite.config.ts

@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-import { resolve } from 'path'
+import { resolve } from 'node:path'
 
 import mdx from '@mdx-js/rollup'
 import storylite from '@storylite/vite-plugin'

packages/storylite/package.json

@@ -14,11 +14,7 @@
   },
   "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
+  "files": ["dist", "README.md", "LICENSE"],
   "scripts": {
     "build": "tsup --clean",
     "dev": "tsup --watch",
@@ -33,14 +29,14 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.22",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.77",
+    "@types/react-dom": "^18.2.25",
     "publint": "^0.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {
     "@types/node": "^20.4.9",

packages/storylite/src/components/Story.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 import { useStoryLiteStore } from '@/app/stores/global'
 import { renderStory } from '@/services/renderer/react'

packages/storylite/src/components/sidebar/Sidebar.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import type React from 'react'
+import { useState } from 'react'
 
 import { useStoryLiteStore } from '@/app/stores/global'
 import bookmarkIcon from '@/assets/lucide/svg/bookmark.svg'

packages/storylite/src/components/toolbar/ToolbarAddon.tsx

@@ -33,7 +33,7 @@ export function ToolbarAddon(props: SLAddonProps<false>) {
   } = props
   const [active, setActive] = useState(isActive ? isActive(ctx) : false)
   const defaultNode = defaultContent ?? '⬜️'
-  const activeNode = activeContent ?? defaultContent ?? `🔳`
+  const activeNode = activeContent ?? defaultContent ?? '🔳'
 
   const handleOnClick = () => {
     if (onClick) {
@@ -98,7 +98,7 @@ export function ToolbarStatefulAddon(props: SLAddonProps<true>) {
     buttonProps,
   } = props
   const defaultNode = defaultContent ?? '⬜️'
-  const activeNode = activeContent ?? defaultContent ?? `🔳`
+  const activeNode = activeContent ?? defaultContent ?? '🔳'
   const [state, setState] = useState<StoryLiteParamValue | undefined>(
     persistent ? (ctx.parameters[id].value as any) : undefined,
   )

packages/storylite/src/services/csf-api/navigation.tsx

@@ -24,14 +24,14 @@ export function getStoryUrl(
   const { standalone, target } = options
   const isIframe = target === 'iframe'
 
-  const targetBasePath = isIframe ? getStoryLiteBaseCanvasPath() + '#' : '#'
+  const targetBasePath = isIframe ? `${getStoryLiteBaseCanvasPath()}#` : '#'
   const targetHashBasePath = isIframe ? 'preview/' : ''
   const baseStr = [getStoryLiteBasePath(), targetBasePath, targetHashBasePath].join('').replace(/\/\//g, '/')
 
   let url = storyId === undefined ? baseStr : `${baseStr}/stories/${storyId}`
 
   if (standalone) {
-    url += `/?standalone=true`
+    url += '/?standalone=true'
   }
 
   return url.replace(/\/\//g, '/')

packages/storylite/src/services/router/router.component.tsx

@@ -22,7 +22,7 @@ export function RouteRenderer({ route, fallback, ...rest }: RouteRendererProps):
   }
 
   if (!Component) {
-    throw new Error(`No route found for current path`)
+    throw new Error('No route found for current path')
   }
 
   return <Component {..._props} />

packages/storylite/src/services/router/router.parser.ts

@@ -18,16 +18,13 @@ export function parseUri(uri: string): ParsedUri {
 }
 
 export function cleanHashPath(hashPath: string): string {
-  return (
-    '/' +
-    hashPath
-      .trim()
-      .replace(/^(\/?#\/?)/g, '')
-      .replace(/\/$/g, '')
-      .split('/')
-      .filter(Boolean)
-      .join('/')
-  )
+  return `/${hashPath
+    .trim()
+    .replace(/^(\/?#\/?)/g, '')
+    .replace(/\/$/g, '')
+    .split('/')
+    .filter(Boolean)
+    .join('/')}`
 }
 
 export function parsePathParams(pattern: string, path: string): URLSearchParams {

packages/vite-plugin/package.json

@@ -18,19 +18,11 @@
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "virtual": [
-        "dist/virtual-modules.d.ts"
-      ]
+      "*": ["dist/index.d.ts"],
+      "virtual": ["dist/virtual-modules.d.ts"]
     }
   },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
+  "files": ["dist", "README.md", "LICENSE"],
   "scripts": {
     "build": "tsup --clean",
     "dev": "tsup --watch",
@@ -41,12 +33,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "vite": "^5.2.6"
+    "vite": "^5.2.8"
   },
   "devDependencies": {
-    "@types/node": "^20.11.30",
+    "@types/node": "^20.12.7",
     "publint": "^0.2.7",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.5"
   }
 }