Fixes to popover behavior and builds

.storybook/main.ts

@@ -1,10 +1,41 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-undef */
 import { createRequire } from "node:module";
 import { dirname, join } from "node:path";
 const require = createRequire(import.meta.url);
 export default {
 	stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
 	addons: [getAbsolutePath("@storybook/addon-links"), getAbsolutePath("@storybook/addon-docs")],
-	framework: getAbsolutePath("@storybook/web-components-vite")
+	framework: getAbsolutePath("@storybook/web-components-vite"),
+	viteFinal: (config: any, env: any) => {
+		// Only apply source aliases in dev mode for hot reload support
+		if (env.configType === "DEVELOPMENT") {
+			config.resolve.alias = config.resolve.alias || {};
+			config.resolve.alias["@nonfx/flow-core"] =
+				`${dirname(__dirname)}/packages/flow-core/src/index.ts`;
+			config.resolve.alias["@nonfx/flow-core-config"] =
+				`${dirname(__dirname)}/packages/flow-core-config/src/index.ts`;
+			config.resolve.alias["@nonfx/flow-icons"] =
+				`${dirname(__dirname)}/packages/flow-icons/src/index.ts`;
+			config.resolve.alias["@nonfx/flow-log"] =
+				`${dirname(__dirname)}/packages/flow-log/src/index.ts`;
+			config.resolve.alias["@nonfx/flow-code-editor"] =
+				`${dirname(__dirname)}/packages/flow-code-editor/src/index.ts`;
+			config.resolve.alias["@nonfx/flow-table"] =
+				`${dirname(__dirname)}/packages/flow-table/src/index.ts`;
+			config.resolve.alias["@nonfx/flow-md-editor"] =
+				`${dirname(__dirname)}/packages/flow-md-editor/src/index.ts`;
+			config.resolve.alias["@nonfx/flow-text-editor"] =
+				`${dirname(__dirname)}/packages/flow-text-editor/src/index.ts`;
+			config.resolve.alias["@nonfx/flow-form-builder"] =
+				`${dirname(__dirname)}/packages/flow-form-builder/src/index.ts`;
+			config.resolve.alias["@nonfx/flow-lineage"] =
+				`${dirname(__dirname)}/packages/flow-lineage/src/index.ts`;
+			config.resolve.alias["@nonfx/flow-dashboard"] =
+				`${dirname(__dirname)}/packages/flow-dashboard/src/index.ts`;
+		}
+		return config;
+	}
 };
 
 function getAbsolutePath(value: string) {

.storybook/preview.ts

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
-import { register } from "@nonfx/flow-icons/src";
-import { ConfigUtil } from "@nonfx/flow-core-config";
+import { ConfigUtil } from "@nonfx/flow-core";
+import { register } from "@nonfx/flow-icons";
 import { changeRoute } from "./utils";
 import "@nonfx/flow-core";
 import "@nonfx/flow-log";

.storybook/tsconfig.json

@@ -0,0 +1,3 @@
+{
+	"extends": "@nonfx/tsconfig"
+}

Makefile

@@ -24,6 +24,13 @@ build-storybook: install
 .PHONY: build
 build: build-lib build-storybook
 
+.PHONY: clean
+clean:
+	@echo "🧹 Cleaning repo"
+	git clean -dfx
+	git gc --prune
+	@echo "✅ All clean!"
+
 .PHONY: test
 test: build-lib
 	bun run --bun --filter "*" test

package.json

@@ -74,6 +74,7 @@
     "@nonfx/flow-text-editor": "workspace:*",
     "@nonfx/tsconfig": "workspace:*",
     "d3": "^7.9.0",
+    "globals": "^16.5.0",
     "lit": "^3.2.1",
     "vite-bundle-analyzer": "^1.1.0"
   },

packages/flow-code-editor/CHANGELOG.md

@@ -1,5 +1,14 @@
 <h4 className="margin-btm-8">Release Notes</h4>
 
+## 1.3.2
+
+### Patch Changes
+
+- build cleanup
+- Updated dependencies
+  - @nonfx/flow-core-config@1.3.3
+  - @nonfx/flow-core@6.0.2
+
 ## 1.3.1
 
 ### Patch Changes

packages/flow-code-editor/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nonfx/flow-code-editor",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Code editor component for flow library",
   "type": "module",
   "module": "dist/flow-code-editor.es.js",
-  "types": "dist/src/index.d.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "bash ./compile.sh",
     "build:watch": "concurrently --kill-others \"vite build --emptyOutDir --watch\" \"tsc --watch\"",

packages/flow-code-editor/tsconfig.json

@@ -1,8 +1,8 @@
 {
 	"extends": "@nonfx/tsconfig",
 	"compilerOptions": {
-		"rootDir": ".",
-		"outDir": "./dist"
+		"rootDir": "src",
+		"declarationDir": "./dist"
 	},
 	"include": ["src/**/*"],
 	"exclude": ["**/*.test.ts", "**/dist", "dist"]

packages/flow-core-config/CHANGELOG.md

@@ -1,5 +1,11 @@
 <h4 class="margin-btm-8">Release Notes</h4>
 
+## 1.3.3
+
+### Patch Changes
+
+- build cleanup
+
 ## 1.3.2
 
 ### Patch Changes

packages/flow-core-config/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nonfx/flow-core-config",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Shared configuration for the Flow UI library",
   "type": "module",
-  "module": "dist/index.es.js",
-  "types": "dist/src/index.d.ts",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "build": "vite build --emptyOutDir"
+    "build": "tsc --outDir dist --declaration true --emitDeclarationOnly false"
   },
   "dependencies": {},
   "devDependencies": {

packages/flow-core-config/tsconfig.json

@@ -1,8 +1,8 @@
 {
 	"extends": "@nonfx/tsconfig",
 	"compilerOptions": {
-		"rootDir": ".",
-		"outDir": "./dist"
+		"rootDir": "src",
+		"declarationDir": "./dist"
 	},
 	"include": ["src/**/*"],
 	"exclude": ["**/*.test.ts", "**/dist", "dist"]

packages/flow-core/CHANGELOG.md

@@ -1,5 +1,19 @@
 <h4 className="margin-btm-8">Release Notes</h4>
 
+## 6.0.2
+
+### Patch Changes
+
+- build cleanup
+- Updated dependencies
+  - @nonfx/flow-core-config@1.3.3
+
+## 6.0.1
+
+### Patch Changes
+
+- fixes
+
 ## 6.0.0
 
 ### Major Changes

packages/flow-core/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nonfx/flow-core",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "description": "Core package of flow design system",
   "type": "module",
   "module": "dist/flow-core.es.js",
-  "types": "dist/src/index.d.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "bash ./compile.sh",
     "build:watch": "concurrently --kill-others \"vite build --emptyOutDir --watch\" \"tsc --watch\"",
@@ -56,7 +56,7 @@
     "web-component-analyzer": "^2.0.0"
   },
   "peerDependencies": {
-    "@nonfx/flow-core-config": "^1.3.2"
+    "@nonfx/flow-core-config": "^1.3.3"
   },
   "repository": {
     "type": "git",

packages/flow-core/src/components/f-color-picker/f-color-picker.ts

@@ -175,11 +175,12 @@ export class FColorPicker extends FRoot {
 				<f-div slot="icon-tooltip"><slot name="icon-tooltip"></slot></f-div>
 				<f-div slot="help"><slot name="help"></slot></f-div>
 			</f-form-field>
+
 			<f-popover
 				id="f-color-picker-popover"
 				@overlay-click=${this.handleOverlayClick}
 				@keydown=${this.handleKeydown}
-				.overlay=${false}
+				.overlay=${true}
 				.open=${this.isOpen}
 				size="small"
 			>

packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts

@@ -366,32 +366,12 @@ export class FEmojiPicker extends FRoot {
 	}
 
 	/**
-	 *
-	 * @param e mMouseEvent
-	 * @param element emoji-picker component
+	 * Handle overlay click from popover
 	 */
-	closeEmojiPicker(e: MouseEvent, element: FEmojiPicker) {
-		if (!element.contains(e.target as HTMLInputElement) && element.emojiPickerPopover.open) {
-			element.emojiPickerPopover.open = false;
-		}
-	}
-
-	outsideClick = (e: MouseEvent) => {
-		this.closeEmojiPicker(e, this);
+	handleOverlayClick = () => {
+		this.toggleEmojiPicker(false);
 	};
 
-	connectedCallback(): void {
-		super.connectedCallback();
-		/**
-		 * click outside the f-select wrapper area
-		 */
-		window.addEventListener("mouseup", this.outsideClick);
-	}
-	disconnectedCallback(): void {
-		super.disconnectedCallback();
-
-		window.removeEventListener("mouseup", this.outsideClick);
-	}
 	protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.willUpdate(changedProperties);
 		this.role = "textbox";
@@ -508,12 +488,15 @@ export class FEmojiPicker extends FRoot {
 				</div>
 				<f-div direction="column" id="f-emoji-picker-error"><slot name="help"></slot> </f-div>
 			</f-div>
+
 			<f-popover
 				data-qa-emoji-popover=${this.getAttribute("data-qa-element-id")}
 				class="f-emoji-picker-popover"
-				.overlay=${false}
-				><f-div>${this.picker}</f-div></f-popover
+				.overlay=${true}
+				@overlay-click=${this.handleOverlayClick}
 			>
+				<f-div>${this.picker}</f-div>
+			</f-popover>
 		`;
 	}