@northlight/ui 2.40.0 → 2.41.1

package/lib/utils/luminosity/index.ts

@@ -0,0 +1,21 @@
+export const luminosity = (hexcolor: string) => {
+  if (!hexcolor || typeof hexcolor !== 'string') return Number.NaN
+
+  let color = hexcolor.trim()
+
+  if (!/^#?[0-9a-f]{3}([0-9a-f]{3})?$/i.test(color)) {
+    return Number.NaN
+  }
+
+  if (color[0] === '#') color = color.slice(1)
+  if (color.length === 3) {
+    color = color.split('').map((h) => h + h).join('')
+  }
+
+  const r = parseInt(color.substring(0, 2), 16)
+  const g = parseInt(color.substring(2, 4), 16)
+  const b = parseInt(color.substring(4, 6), 16)
+
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  return brightness
+}

package/lib/utils/ring/index.ts

@@ -0,0 +1,10 @@
+import { CSSObject } from '@emotion/react'
+
+export const ring:CSSObject = {
+  _focusVisible: {
+    outline: 'none',
+    ring: '2px',
+    ringColor: 'border.wcag',
+    ringOffset: '1px',
+  },
+}

package/lib/utils/use-current-theme/index.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react'
+
+export type CurrentTheme = 'webappTheme' | 'tottTheme' | 'camphouseLightTheme'
+
+export const CustomTheme = createContext<CurrentTheme>('webappTheme')
+
+export const useCurrentTheme = () => {
+  const theme = useContext(CustomTheme)
+  return theme
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@northlight/ui",
-  "version": "2.40.0",
+  "version": "2.41.1",
   "description": "Northlight UI library, based on Chakra-ui",
   "license": "MIT",
   "author": "Camphouse",
@@ -11,17 +11,24 @@
       "types": "./dist/es/northlight.d.ts",
       "import": "./dist/es/northlight.js",
       "require": "./dist/umd/northlight.cjs"
-    }
+    },
+    "./sandbox": "./sandbox/lib/index.ts"
+  },
+  "bin": {
+    "sandbox": "./sandbox/bin/sandbox.sh"
   },
   "main": "./dist/es/northlight.js",
   "types": "./dist/es/northlight.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "lib",
+    "sandbox"
   ],
   "scripts": {
     "clean": "rm -rf dist",
-    "lint": "eslint --ext ts,tsx lib/ test/",
+    "lint": "eslint --ext ts,tsx lib/ test/ sandbox/ northlight-sandbox/",
     "prepublishOnly": "yarn clean && yarn transpile",
+    "sandbox": "./sandbox/bin/sandbox.sh northlight-sandbox/scenarios.tsx",
     "test": "yarn mtft test",
     "transpile": "rollup -c",
     "watch": "yarn transpile -w"
@@ -51,7 +58,7 @@
     "@react-aria/calendar": "^3.5.0",
     "@react-aria/checkbox": "^3.11.0",
     "@react-aria/datepicker": "^3.7.0",
-    "@react-aria/focus": "^3.14.1",
+    "@react-aria/focus": "3.14.1",
     "@react-aria/i18n": "^3.8.2",
     "@react-aria/radio": "^3.8.0",
     "@react-aria/utils": "^3.20.0",
@@ -65,6 +72,7 @@
     "@types/react-router-dom": "^5.3.2",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
+    "@vitejs/plugin-react": "^4.3.0",
     "chakra-react-select": "4.7.2",
     "framer-motion": "^4",
     "joi": "^17.11.0",
@@ -78,6 +86,8 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "sinon": "^15.2.0",
+    "tsx": "^4.21.0",
+    "vite": "^6.0.0",
     "yafu": "^2.1.4"
   },
   "devDependencies": {
@@ -101,12 +111,13 @@
     "rollup-plugin-dts": "^5.2.0",
     "rollup-plugin-esbuild": "^5.0.0",
     "sinon": "^15.2.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vitest": "^2.0.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-router-dom": "^5.0.0"
   },
-  "gitHead": "be842f0a8e2c4e7f67a5120dc8af4500ecf90686"
+  "gitHead": "98deec7d88787e4b57e82f38273d460f5708062a"
 }

package/sandbox/bin/sandbox.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+DIR="$(dirname "$0")"
+exec pnpx tsx "$DIR/sandbox.ts" "$@"

package/sandbox/bin/sandbox.ts

@@ -0,0 +1,133 @@
+/* eslint-disable no-restricted-syntax */
+import { existsSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+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)
+    return existsSync(absolutePath) ? absolutePath : undefined
+  }
+  for (const path of DEFAULT_SCENARIOS_PATHS) {
+    const absolutePath = resolve(cwd, path)
+    if (existsSync(absolutePath)) return absolutePath
+  }
+  return undefined
+}
+
+async function main () {
+  const cwd = process.cwd()
+  const scenariosArg = process.argv[2]
+  const absoluteScenariosPath = findScenariosFile(cwd, scenariosArg)
+
+  if (!absoluteScenariosPath) {
+    console.error('Scenarios file not found.')
+    console.error(
+      scenariosArg
+        ? `Please check the path: ${resolve(cwd, scenariosArg)}`
+        : `Create one of: ${DEFAULT_SCENARIOS_PATHS.join(', ')}`
+    )
+    process.exit(1)
+  }
+
+  const sandboxPackageDir = resolve(__dirname, '..')
+
+  const virtualEntryId = 'virtual:sandbox-entry.tsx'
+  const resolvedVirtualEntryId = `\0${virtualEntryId}`
+
+  const virtualHtmlId = 'virtual:sandbox-html'
+
+  const server = await createServer({
+    configFile: false,
+    root: cwd,
+    server: {
+      port: 5000,
+      strictPort: false,
+    },
+    plugins: [
+      react(),
+      {
+        name: 'sandbox-virtual-entry',
+        resolveId (id) {
+          if (id === virtualEntryId) return resolvedVirtualEntryId
+          if (id === '/' || id === '/index.html') return virtualHtmlId
+          return undefined
+        },
+        load (id) {
+          if (id === resolvedVirtualEntryId) {
+            return `
+              import { createElement } from 'react'
+              import { createRoot } from 'react-dom/client'
+              import { SandboxViewer } from '${sandboxPackageDir}/lib/viewer/sandbox-viewer.tsx'
+              import { scenarios } from '${absoluteScenariosPath}'
+
+              const root = document.getElementById('root')
+              createRoot(root).render(createElement(SandboxViewer, { scenarios }))
+            `
+          }
+          if (id === virtualHtmlId) {
+            return `
+              <!DOCTYPE html>
+              <html>
+                <head>
+                  <meta charset="UTF-8" />
+                  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                  <title>Sandbox</title>
+                </head>
+                <body>
+                  <div id="root"></div>
+                  <script type="module" src="/@id/__x00__${virtualEntryId}"></script>
+                </body>
+              </html>
+            `
+          }
+          return undefined
+        },
+      },
+      {
+        name: 'sandbox-html-middleware',
+        configureServer (devServer) {
+          devServer.middlewares.use((req, res, next) => {
+            const url = req.url ?? ''
+            const isAsset =
+              url.startsWith('/@') || url.startsWith('/node_modules') || url.includes('.')
+
+            if (!isAsset) {
+              const html = `
+                <!DOCTYPE html>
+                <html>
+                  <head>
+                    <meta charset="UTF-8" />
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                    <title>Sandbox</title>
+                  </head>
+                  <body>
+                    <div id="root"></div>
+                    <script type="module" src="/@id/__x00__${virtualEntryId}"></script>
+                  </body>
+                </html>
+              `
+              devServer.transformIndexHtml(url, html).then((transformed) => {
+                res.setHeader('Content-Type', 'text/html')
+                res.end(transformed)
+              })
+              return
+            }
+            next()
+          })
+        },
+      },
+    ],
+  })
+
+  await server.listen()
+  server.printUrls()
+}
+
+main()

package/sandbox/lib/index.ts

@@ -0,0 +1,3 @@
+export { runScenarios } from './run-scenarios'
+export type { ComponentScenarios, PlayContext, Scenario } from './types.ts'
+export { SandboxViewer } from './viewer/sandbox-viewer'

package/sandbox/lib/run-scenarios.ts

@@ -0,0 +1,60 @@
+/* eslint-disable no-restricted-syntax */
+import { cleanup, render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { createElement } from 'react'
+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
+
+if (typeof window !== 'undefined' && !window.matchMedia) {
+  window.matchMedia = (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  })
+}
+
+function runScenarios (allScenarios: ComponentScenarios[]): void {
+  for (const componentScenarios of allScenarios) {
+    const { name: componentName, component: defaultComponent, scenarios } = componentScenarios
+
+    describe(componentName, () => {
+      for (const scenario of scenarios) {
+        const { name: scenarioName, props, component: scenarioComponent, play } = scenario
+        const component = scenarioComponent ?? defaultComponent
+
+        it(scenarioName, async () => {
+          const user = userEvent.setup()
+          const { container } = render(
+            createElement(
+              MediatoolThemeProvider,
+              { theme },
+              createElement(component, props as Record<string, unknown>)
+            )
+          )
+
+          if (play) {
+            const context: PlayContext = {
+              screen: within(container),
+              documentScreen: screen,
+              user,
+              container,
+            }
+            await play(context)
+          }
+
+          cleanup()
+        })
+      }
+    })
+  }
+}
+
+export { runScenarios }

package/sandbox/lib/types.ts

@@ -0,0 +1,35 @@
+import type { screen, within } from '@testing-library/react'
+import type userEvent from '@testing-library/user-event'
+import type { ComponentType } from 'react'
+
+type PlayContext = {
+  /** Queries scoped to the scenario container - use for non-portaled content */
+  screen: ReturnType<typeof within>
+  /** Queries scoped to document.body - use for portaled content (dropdowns, modals) */
+  documentScreen: typeof screen
+  user: ReturnType<typeof userEvent.setup>
+  container: HTMLElement
+}
+
+type Scenario<P> =
+  | {
+    name: string
+    props: P
+    component?: undefined
+    play?: (context: PlayContext) => Promise<void>
+  }
+  | {
+    name: string
+    props: Record<string, unknown>
+    component: ComponentType<any>
+    play?: (context: PlayContext) => Promise<void>
+  }
+
+type ComponentScenarios<P = any> = {
+  name: string
+  component: ComponentType<P>
+  scenarios: Scenario<P>[]
+  inline?: boolean
+}
+
+export type { PlayContext, Scenario, ComponentScenarios }

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

@@ -0,0 +1,34 @@
+import { Component, type ComponentType, type ReactNode, createElement } from 'react'
+
+type ErrorBoundaryProps = {
+  children: ReactNode
+  fallback: ComponentType<{ error: Error }>
+}
+
+type ErrorBoundaryState = {
+  error: Error | null
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor (props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { error: null }
+  }
+
+  static getDerivedStateFromError (error: Error): ErrorBoundaryState {
+    return { error }
+  }
+
+  render () {
+    const { error } = this.state
+    const { children, fallback } = this.props
+
+    if (error) {
+      return createElement(fallback, { error })
+    }
+
+    return children
+  }
+}
+
+export { ErrorBoundary }