@contember/react-devbar 2.0.0-alpha.5 → 2.0.0-alpha.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-devbar",
   "license": "Apache-2.0",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.8",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -17,28 +17,18 @@
         "types": "./dist/types/index.d.ts",
         "development": "./dist/development/index.cjs",
         "production": "./dist/production/index.cjs",
+        "typescript": "./src/index.ts",
         "default": "./dist/production/index.cjs"
       }
     },
     "./index.css": {
-      "development": "./src/index.css",
-      "production": "./dist/assets/index.css",
-      "default": "./dist/assets/index.css"
+      "default": "./src/index.css"
     }
   },
-  "files": [
-    "dist/",
-    "src/"
-  ],
   "typings": "./dist/types/index.d.ts",
   "scripts": {
-    "build": "yarn build:js:dev && yarn build:js:prod && yarn build:css",
-    "build:js:dev": "NODE_ENV=development vite build --mode development",
-    "build:js:prod": "vite build --mode production",
-    "build:css": "vite build --config vite.config.css.js",
     "ae:build": "api-extractor run --local",
-    "ae:test": "api-extractor run",
-    "test": "vitest"
+    "ae:test": "api-extractor run"
   },
   "repository": {
     "type": "git",
@@ -46,8 +36,8 @@
     "directory": "packages/react-devbar"
   },
   "dependencies": {
-    "@contember/react-utils": "2.0.0-alpha.5",
-    "@contember/utilities": "2.0.0-alpha.5",
+    "@contember/react-utils": "2.0.0-alpha.8",
+    "@contember/utilities": "2.0.0-alpha.8",
     "buffer": "6.0.3"
   },
   "peerDependencies": {
@@ -59,6 +49,5 @@
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
-  },
-  "stableVersion": "0.0.0"
+  }
 }

package/src/DevErrorManager.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react'
 import { useProcessedError } from './hooks/useParsedStacktrace'
 
 export class ErrorBus {
-	private queue: { error: ErrorType, source: string }[] = []
-	private listener: null | ((error: { error: ErrorType, source: string }) => void) = null
+	private queue: { error: ErrorType; source: string }[] = []
+	private listener: null | ((error: { error: ErrorType; source: string }) => void) = null
 
 	async handleError(source: string, error: ErrorType) {
 		const boxedError = { error, source }
@@ -23,7 +23,7 @@ export class ErrorBus {
 		}
 	}
 
-	register(listener: (error: { error: ErrorType, source: string }) => void): () => void {
+	register(listener: (error: { error: ErrorType; source: string }) => void): () => void {
 		this.listener = listener
 		this.queue.forEach(listener)
 		this.queue = []
@@ -38,7 +38,7 @@ export interface DevErrorManagerProps {
 }
 
 export function DevErrorManager(props: DevErrorManagerProps) {
-	const [errors, setErrors] = useState<{ error: ErrorType, source: string }[]>([])
+	const [errors, setErrors] = useState<{ error: ErrorType; source: string }[]>([])
 	const [errIndex, setErrorIndex] = useState(0)
 	const [open, setOpen] = useState(false)
 

package/src/index.css

@@ -1,2 +1,385 @@
-@import "./ui/DevBar/index.css";
-@import "./ui/DevError/index.css";
+.cui-devBar {
+    align-items: center;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    opacity: 1;
+    padding: 1rem;
+    transition-property: opacity, transform;
+    transition-duration: 200ms;
+    transition-timing-function: ease-in-out;
+}
+
+.cui-devBar-content,
+.cui-devBar-panel-content {
+    background: #eee;
+    color: #002251;
+}
+
+.cui-devBar-content {
+    align-self: center;
+    align-items: center;
+    border-radius: 1rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    display: flex;
+    gap: 1rem;
+    padding: 0.5rem;
+    margin: 0 auto;
+}
+
+
+.cui-devBar-close,
+.cui-devBar-trigger-label,
+.cui-devBar-brand {
+    align-items: center;
+    height: 2rem;
+    border-radius: 0.5rem;
+    justify-content: center;
+    max-height: 2rem;
+    min-height: 2rem;
+    white-space: nowrap;
+}
+
+.cui-devBar-close {
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    max-width: 2rem;
+    width: 2rem;
+    order: 999;
+}
+
+
+.cui-devBar-brand {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+    text-align: right;
+}
+
+.cui-devBar-brand svg {
+    max-height: 2rem;
+}
+
+
+.cui-devBar-panels {
+    display: flex;
+    gap: 1rem;
+}
+
+.cui-devBar-trigger {
+    display: flex;
+}
+
+.cui-devBar-trigger-label {
+    align-items: center;
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    font-weight: normal;
+    gap: 0.3rem;
+    padding: 0 0.2rem;
+}
+
+.cui-devBar-trigger-label:hover {
+    background-color: #e0e0e0;
+}
+
+
+.cui-devBar-panel {
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    left: 0;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: 2rem;
+    transform: translateY(-1rem);
+}
+
+.cui-devBar-trigger:not([data-expanded]) > .cui-devBar-panel {
+    display: none;
+}
+
+.cui-devBar-panel-content {
+    background: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    border-radius: 0.5rem;
+    display: flex;
+    min-width: min(20rem, 100%);
+    max-width: 100%;
+    flex-direction: column;
+    flex-shrink: 1;
+}
+
+.cui-devBar-panel-content h2 {
+    font-weight: bold;
+    margin-bottom: 0;
+    padding: 0.4rem 1rem;
+    border-radius: 0.5rem 0.5rem 0 0;
+    background: #f8f8f8;
+}
+
+@media screen and (min-width: 768px) {
+    .cui-devBar-trigger {
+        position: relative;
+    }
+
+    .cui-devBar-panel-content {
+        min-width: unset;
+        max-width: unset;
+    }
+
+    .cui-devBar-panel-body {
+        min-width: 20rem;
+    }
+}
+
+.cui-devBar-panel-body {
+    border-top: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+}
+
+.cui-devBar:not([data-expanded]) {
+    transform: translateY(2rem);
+    opacity: 0;
+    max-width: 5rem;
+    margin: auto;
+}
+
+
+.cui-devBar:not([data-expanded]):hover,
+.cui-devBar:not([data-expanded]):focus-within {
+    transform: unset;
+    opacity: unset;
+}
+
+[id^="dev-bar-panel"]:not([data-expanded]) > * {
+    display: none;
+}
+
+.cui-devBar-panel .cui-table-wrapper {
+    overflow: auto;
+}
+
+
+.cui-devError {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background: rgba(212, 212, 212, 0.66);
+    font-family: Poppins, Roboto, sans-serif;
+}
+
+.cui-devError-in {
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    color: #333;
+    background: #222;
+    box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.5);
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.cui-devError-header {
+    background: #CD1818;
+    color: #FFF;
+    padding: 0.5em 1em;
+}
+
+.cui-devError-errorMessage,
+.cui-devError-errorName,
+.cui-devError-errorDetails {
+    margin: 0;
+    flex: 0 0 auto;
+    font-weight: 300;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    line-height: 130%;
+}
+
+.cui-devError-errorMessage {
+    font-family: monospace;
+    margin-top: 0.5em;
+    font-size: 1.7em;
+}
+
+.cui-devError-errorDetails {
+    font-family: monospace;
+    margin-top: 0.5em;
+    font-size: 1em;
+    white-space: pre;
+    overflow-x: scroll;
+}
+
+.cui-devError-causeLink {
+    color: #FFCC00;
+    text-decoration: underline;
+}
+
+.cui-devError-stack {
+    flex: 1 1 auto;
+}
+
+.cui-devError-stack-dump {
+    color: #fff;
+    margin-top: 1em;
+    padding: 1em;
+    white-space: pre-wrap;
+}
+
+.cui-devError-bar {
+    padding: 0.2em 0.2em 0.2em 1em;
+    background: #ac1616;
+    color: #eee;
+    display: flex;
+}
+
+.cui-devError-causedBy {
+    padding: 0.2em 0.2em 0.2em 1em;
+    background: #FFCC00;
+    color: #000;
+    display: flex;
+}
+
+.cui-devError-actions {
+    margin-left: auto;
+    display: flex;
+}
+
+.cui-devError-actions .cui-button {
+    color: #fff;
+    border-color: #cbcbcb;
+}
+
+.cui-devError-actions .cui-button:hover {
+    color: #fff;
+}
+
+.cui-devError-close {
+    margin-left: 1em;
+}
+
+.cui-devError-close .cui-button {
+    border-color: transparent;
+}
+
+.cui-devError-switcher {
+    display: flex;
+    align-items: center;
+    margin-left: 2em;
+}
+
+
+.cui-devError-switcherButtons {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
+
+.cui-devError-closeButton,
+.cui-devError-switcherButton {
+    border: 1px solid #cbcbcb;
+    border-radius: 0.2em;
+    padding: 0.2em 0.5em;
+}
+
+.cui-devError-errorCount {
+    margin: 0;
+    margin-right: 0.5em;
+}
+
+.cui-devError-stackFrame {
+    font-family: monospace;
+}
+
+.cui-devError-stackFrame:last-child {
+    border-bottom: 1px solid #666;
+}
+
+.cui-devError-stackFrameHeader {
+    display: flex;
+    padding: 0.5em 1em;
+    background: #333;
+    color: #fff;
+    border-bottom: 1px solid #666;
+    border-top: 1px solid #666;
+}
+
+.cui-devError-stackFrameSource {
+    margin-left: 0.2em;
+}
+
+.cui-devError-stackFrameCallee {
+    margin-left: 1em;
+    color: #a4ffa4;
+}
+
+.cui-devError-stackFrameCode {
+    background: #222;
+    color: #D5D5D5;
+}
+
+.cui-devError-stackFrameLine {
+    display: flex;
+}
+
+.cui-devError-stackFrameLine.is-active {
+    color: #fff;
+    background: #CD1818;
+}
+
+.cui-devError-stackFrameLine.is-active .cui-devError-stackFrameLineNumber {
+    color: #fff;
+}
+
+.cui-devError-stackFrameLineNumber {
+    color: #888;
+    flex: 0 0 50px;
+    text-align: right;
+    padding: 0.2em;
+}
+
+.cui-devError-stackFrameLineCode {
+    padding: 0.2em 1em;
+    white-space: pre-wrap;
+    tab-size: 4;
+}
+
+
+:where(.cui-devErrorBadge) {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+}
+
+:where(.cui-devErrorBadge-button) {
+    display: block;
+    background: #CD1818;
+    color: #fff;
+    font-weight: 600;
+    box-shadow: 3px 3px 7px rgba(50, 50, 50, 0.5);
+    border-radius: 10px;
+    padding: 1em 2em;
+    cursor: pointer;
+}

package/src/tsconfig.json

@@ -1,10 +1,13 @@
 {
 	"extends": "../../../tsconfig.settings.json",
 	"compilerOptions": {
-		"outDir": "../dist/types"
+		"outDir": "../dist/types",
+		"types": [
+			"vite/client"
+		]
 	},
 	"references": [
 		{ "path": "../../react-utils/src" },
-		{ "path": "../../utilities/src" },
+		{ "path": "../../utilities/src" }
 	]
 }

package/src/ui/DevBar/DevBar.tsx

@@ -15,8 +15,8 @@ export const DevBar = ({
 	children,
 	brand,
 }: PropsWithChildren<{
-	brand?: ReactNode;
-	breakpoint?: number;
+	brand?: ReactNode
+	breakpoint?: number
 }>) => {
 	const [expanded, setExpanded] = useState(true)
 	const isSmallScreen = useWindowSize().width < breakpoint
@@ -117,9 +117,9 @@ export const DevBar = ({
 }
 
 export const DevPanel = ({ heading, icon, children, preview }: {
-	icon: ReactNode;
-	heading: ReactNode,
-	children: ReactNode,
+	icon: ReactNode
+	heading: ReactNode
+	children: ReactNode
 	preview?: ReactNode
 }) => {
 	const id = `cui-devBar-panel-${useId()}`

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"include": [],
+	"references": [
+		{ "path": "./src" },
+	],
+}

package/tsdoc.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
+	"extends": [
+		"../../tsdoc.json"
+	]
+}