@northlight/ui 2.42.0 → 2.42.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@northlight/ui",
-  "version": "2.42.0",
+  "version": "2.42.2",
   "description": "Northlight UI library, based on Chakra-ui",
   "license": "MIT",
   "author": "Camphouse",
@@ -12,7 +12,10 @@
       "import": "./dist/es/northlight.js",
       "require": "./dist/umd/northlight.cjs"
     },
-    "./sandbox": "./sandbox/lib/index.ts"
+    "./sandbox": {
+      "types": "./dist/sandbox/index.d.ts",
+      "import": "./dist/sandbox/index.js"
+    }
   },
   "bin": {
     "sandbox": "./sandbox/bin/sandbox.sh"
@@ -111,6 +114,7 @@
     "rollup": "^3.17.2",
     "rollup-plugin-dts": "^5.2.0",
     "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "sinon": "^15.2.0",
     "typescript": "^5.2.2",
     "vitest": "^2.0.0"
@@ -120,5 +124,5 @@
     "react-dom": ">=18.0.0",
     "react-router-dom": "^5.0.0"
   },
-  "gitHead": "d31008fa6256e7145c086f5a2f826d8245b6ea4c"
+  "gitHead": "3c091316a421709cfffd946b6956b4ef9c4d578c"
 }

package/sandbox/bin/sandbox.ts

@@ -1,14 +1,11 @@
 /* eslint-disable no-restricted-syntax */
 import { existsSync } from 'node:fs'
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
+import { resolve } from 'node:path'
 import react from '@vitejs/plugin-react'
 import { createServer } from 'vite'
 
 const DEFAULT_SCENARIOS_PATHS = [ 'sandbox/scenarios.ts', 'sandbox/scenarios.tsx' ]
 
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
 function findScenariosFile (cwd: string, scenariosArg?: string): string | undefined {
   if (scenariosArg) {
     const absolutePath = resolve(cwd, scenariosArg)
@@ -36,8 +33,6 @@ async function main () {
     process.exit(1)
   }
 
-  const sandboxPackageDir = resolve(__dirname, '..')
-
   const virtualEntryId = 'virtual:sandbox-entry.tsx'
   const resolvedVirtualEntryId = `\0${virtualEntryId}`
 
@@ -64,7 +59,7 @@ async function main () {
             return `
               import { createElement } from 'react'
               import { createRoot } from 'react-dom/client'
-              import { SandboxViewer } from '${sandboxPackageDir}/lib/viewer/sandbox-viewer.tsx'
+              import { SandboxViewer } from '@northlight/ui/sandbox'
               import { scenarios } from '${absoluteScenariosPath}'
 
               const root = document.getElementById('root')

package/sandbox/lib/run-scenarios.ts

@@ -6,7 +6,8 @@ import { MediatoolThemeProvider, theme } from '../../lib'
 import type { ComponentScenarios, PlayContext } from './types.ts'
 
 declare const describe: (name: string, fn: () => void) => void
-declare const it: (name: string, fn: () => void | Promise<void>) => void
+type TimeoutSetter = { timeout: (ms: number) => void }
+declare const it: ((name: string, fn: () => void | Promise<void>) => TimeoutSetter)
 
 if (typeof window !== 'undefined' && !window.matchMedia) {
   window.matchMedia = (query: string) => ({
@@ -21,6 +22,8 @@ if (typeof window !== 'undefined' && !window.matchMedia) {
   })
 }
 
+const CI_TIMEOUT_SAFETY_NET = 30_000
+
 function runScenarios (allScenarios: ComponentScenarios[]): void {
   for (const componentScenarios of allScenarios) {
     const { name: componentName, component: defaultComponent, scenarios } = componentScenarios
@@ -35,6 +38,7 @@ function runScenarios (allScenarios: ComponentScenarios[]): void {
           const { container } = render(
             createElement(
               MediatoolThemeProvider,
+              // @ts-expect-error children passed as 3rd arg to satisfy react/no-children-prop
               { theme },
               createElement(component, props as Record<string, unknown>)
             )
@@ -51,7 +55,7 @@ function runScenarios (allScenarios: ComponentScenarios[]): void {
           }
 
           cleanup()
-        })
+        }).timeout(CI_TIMEOUT_SAFETY_NET)
       }
     })
   }

package/sandbox/lib/types.ts

@@ -30,7 +30,6 @@ type ComponentScenarios<P = any> = {
   component: ComponentType<P>
   scenarios: Scenario<P>[]
   inline?: boolean
-  layout?: 'stacked' | 'tabbed'
 }
 
 export type { PlayContext, Scenario, ComponentScenarios }

package/sandbox/lib/viewer/sandbox-viewer.tsx

@@ -820,14 +820,7 @@ function SandboxViewerContent ({
     setPlayingScenario(null)
   }
 
-  const getLayoutMode = (): 'stacked' | 'tabbed' => {
-    if (!selectedComponent) return 'stacked'
-    if (selectedComponent.layout) return selectedComponent.layout
-    if (selectedComponent.name.toLowerCase() === 'tabs') return 'tabbed'
-    return 'stacked'
-  }
-
-  const layoutMode = getLayoutMode()
+  const isInline = selectedComponent?.inline ?? false
 
   return (
     <div className="sandbox-viewer">
@@ -853,7 +846,7 @@ function SandboxViewerContent ({
           ) }
 
           { view.type === 'detail' && selectedComponent && (
-            layoutMode === 'tabbed' ? (
+            !isInline ? (
               <TabbedDetailView
                 component={ selectedComponent }
                 onBack={ handleBack }

package/sandbox/package.json

@@ -1,4 +1,4 @@
 {
-  "main": "./lib/index.ts",
-  "types": "./lib/index.ts"
+  "main": "../dist/sandbox/index.js",
+  "types": "../dist/sandbox/index.d.ts"
 }