@brftech/filex-react 0.1.56

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 BRF Tech
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# @brftech/filex-react
+
+React adapter for the [filex](https://github.com/brf-tech/filex)
+file manager. Thin wrapper around `<filex-explorer>` (the
+`@brftech/filex` Web Component) — gives you proper React props and
+camelCased event handlers via `@lit/react`'s `createComponent`.
+
+## Install
+
+```bash
+npm i @brftech/filex-react react react-dom
+```
+
+## Use
+
+```jsx
+import { FileManager } from '@brftech/filex-react';
+
+export function App() {
+  return (
+    <FileManager
+      config={{
+        apiBase: 'https://files.example.com',
+        auth: { kind: 'bearer', token: '<jwt>' },
+        locale: 'tr',
+        theme: 'auto',
+      }}
+      onError={(e) => console.error(e.detail)}
+      onShareCreated={(e) => navigator.clipboard.writeText(e.detail.url)}
+      onFileOpened={(e) => console.log('opened', e.detail.basename)}
+      onUploadProgress={(e) => console.log(e.detail.percent + '%')}
+      onSelectionChange={(e) => console.log(e.detail.length, 'selected')}
+    />
+  );
+}
+```
+
+The `config` prop accepts the full `ExplorerConfig` (re-exported from
+`@brftech/filex-core` for convenience). Event handlers receive native
+`CustomEvent`s — payload is on `event.detail`.
+
+## Build
+
+```bash
+pnpm build      # tsc check + vite lib build → dist/filex-react.{js,cjs}
+```
+
+## License
+
+MIT

package/dist/filex-react.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),a=require("@lit/react");require("@brftech/filex");function l(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const c=l(o),s=typeof customElements<"u"&&customElements.get("filex-explorer")||class{},i=a.createComponent({react:c,tagName:"filex-explorer",elementClass:s,events:{onError:"error",onShareCreated:"share-created",onFileOpened:"file-opened",onUploadProgress:"upload-progress",onSelectionChange:"selection-change"}});exports.FileManager=i;
+//# sourceMappingURL=filex-react.cjs.map

package/dist/filex-react.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filex-react.cjs","sources":["../src/index.ts"],"sourcesContent":["/**\r\n * @brftech/filex-react — React adapter around the `<filex-explorer>`\r\n * Web Component.\r\n *\r\n * Uses `@lit/react`'s `createComponent` to map element attributes /\r\n * properties / events into idiomatic React props (camelCased event\r\n * handlers like `onError`, real prop assignment for the `config`\r\n * object, no need to imperatively reach for `.addEventListener`).\r\n *\r\n * Side-effect: importing this module also imports `@brftech/filex`\r\n * which registers the underlying custom element.\r\n */\r\n\r\nimport * as React from 'react';\r\nimport { createComponent } from '@lit/react';\r\nimport '@brftech/filex'; // side-effect: registers `<filex-explorer>`\r\nimport type { ExplorerConfig } from '@brftech/filex';\r\n\r\n/**\r\n * Resolve the registered class. We do this lazily inside a getter so\r\n * tree-shaking-time evaluation in some bundlers doesn't trip the\r\n * `customElements.get(…)` lookup before the side-effect import has run\r\n * (it has, but TS analysers can be jumpy). At runtime this evaluates\r\n * once at module load.\r\n */\r\nconst FilexElementClass =\r\n  (typeof customElements !== 'undefined' && customElements.get('filex-explorer')) ||\r\n  // Fallback for SSR — the element class is irrelevant on the server\r\n  // because createComponent only renders the tag string. Provide an\r\n  // empty class shim so types resolve.\r\n  (class {} as unknown as CustomElementConstructor);\r\n\r\n/**\r\n * Idiomatic React component — used like a normal JSX tag with native\r\n * props.\r\n *\r\n *   <FileManager\r\n *     config={{ apiBase: 'https://files.example.com',\r\n *               auth: { kind: 'bearer', token } }}\r\n *     onError={(e) => console.error(e.detail)}\r\n *   />\r\n */\r\nexport const FileManager = createComponent({\r\n  react: React,\r\n  tagName: 'filex-explorer',\r\n  elementClass: FilexElementClass,\r\n  events: {\r\n    onError: 'error',\r\n    onShareCreated: 'share-created',\r\n    onFileOpened: 'file-opened',\r\n    onUploadProgress: 'upload-progress',\r\n    onSelectionChange: 'selection-change',\r\n  },\r\n});\r\n\r\n/**\r\n * Re-export the config types so React consumers don't need a second\r\n * dependency on `@brftech/filex-core` just to type the `config` prop.\r\n */\r\nexport type {\r\n  ExplorerConfig,\r\n  AuthConfig,\r\n  ThemeMode,\r\n  LocaleCode,\r\n  FileNode,\r\n  ShareInfo,\r\n  Capabilities,\r\n  UploadInitResponse,\r\n  UploadFinalizeResponse,\r\n  ArchiveEntry,\r\n  ViewMode,\r\n} from '@brftech/filex-core';\r\n\r\n/**\r\n * Helper-typed payloads the events carry — matches the SFC's emit\r\n * declarations so consumers get autocomplete on `event.detail`.\r\n */\r\nexport interface FilexErrorDetail {\r\n  message: string;\r\n  context?: unknown;\r\n}\r\n\r\nexport interface FilexShareCreatedDetail {\r\n  path: string;\r\n  url: string;\r\n  pin: string | null;\r\n}\r\n\r\nexport interface FilexFileOpenedDetail {\r\n  path: string;\r\n  basename: string;\r\n}\r\n\r\nexport interface FilexUploadProgressDetail {\r\n  uploadId: string;\r\n  percent: number;\r\n  done: boolean;\r\n}\r\n\r\nexport type FilexSelectionChangeDetail = Array<{\r\n  path: string;\r\n  basename: string;\r\n  type: 'file' | 'dir';\r\n}>;\r\n"],"names":["FilexElementClass","FileManager","createComponent","React"],"mappings":"qbAyBMA,EACH,OAAO,eAAmB,KAAe,eAAe,IAAI,gBAAgB,GAI5E,KAAM,CAAC,EAYGC,EAAcC,EAAAA,gBAAgB,CACzC,MAAOC,EACP,QAAS,iBACT,aAAcH,EACd,OAAQ,CACN,QAAS,QACT,eAAgB,gBAChB,aAAc,cACd,iBAAkB,kBAClB,kBAAmB,kBAAA,CAEvB,CAAC"}

package/dist/filex-react.js

@@ -0,0 +1,23 @@
+import * as e from "react";
+import { createComponent as o } from "@lit/react";
+import "@brftech/filex";
+const r = typeof customElements < "u" && customElements.get("filex-explorer") || // Fallback for SSR — the element class is irrelevant on the server
+// because createComponent only renders the tag string. Provide an
+// empty class shim so types resolve.
+class {
+}, s = o({
+  react: e,
+  tagName: "filex-explorer",
+  elementClass: r,
+  events: {
+    onError: "error",
+    onShareCreated: "share-created",
+    onFileOpened: "file-opened",
+    onUploadProgress: "upload-progress",
+    onSelectionChange: "selection-change"
+  }
+});
+export {
+  s as FileManager
+};
+//# sourceMappingURL=filex-react.js.map

package/dist/filex-react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filex-react.js","sources":["../src/index.ts"],"sourcesContent":["/**\r\n * @brftech/filex-react — React adapter around the `<filex-explorer>`\r\n * Web Component.\r\n *\r\n * Uses `@lit/react`'s `createComponent` to map element attributes /\r\n * properties / events into idiomatic React props (camelCased event\r\n * handlers like `onError`, real prop assignment for the `config`\r\n * object, no need to imperatively reach for `.addEventListener`).\r\n *\r\n * Side-effect: importing this module also imports `@brftech/filex`\r\n * which registers the underlying custom element.\r\n */\r\n\r\nimport * as React from 'react';\r\nimport { createComponent } from '@lit/react';\r\nimport '@brftech/filex'; // side-effect: registers `<filex-explorer>`\r\nimport type { ExplorerConfig } from '@brftech/filex';\r\n\r\n/**\r\n * Resolve the registered class. We do this lazily inside a getter so\r\n * tree-shaking-time evaluation in some bundlers doesn't trip the\r\n * `customElements.get(…)` lookup before the side-effect import has run\r\n * (it has, but TS analysers can be jumpy). At runtime this evaluates\r\n * once at module load.\r\n */\r\nconst FilexElementClass =\r\n  (typeof customElements !== 'undefined' && customElements.get('filex-explorer')) ||\r\n  // Fallback for SSR — the element class is irrelevant on the server\r\n  // because createComponent only renders the tag string. Provide an\r\n  // empty class shim so types resolve.\r\n  (class {} as unknown as CustomElementConstructor);\r\n\r\n/**\r\n * Idiomatic React component — used like a normal JSX tag with native\r\n * props.\r\n *\r\n *   <FileManager\r\n *     config={{ apiBase: 'https://files.example.com',\r\n *               auth: { kind: 'bearer', token } }}\r\n *     onError={(e) => console.error(e.detail)}\r\n *   />\r\n */\r\nexport const FileManager = createComponent({\r\n  react: React,\r\n  tagName: 'filex-explorer',\r\n  elementClass: FilexElementClass,\r\n  events: {\r\n    onError: 'error',\r\n    onShareCreated: 'share-created',\r\n    onFileOpened: 'file-opened',\r\n    onUploadProgress: 'upload-progress',\r\n    onSelectionChange: 'selection-change',\r\n  },\r\n});\r\n\r\n/**\r\n * Re-export the config types so React consumers don't need a second\r\n * dependency on `@brftech/filex-core` just to type the `config` prop.\r\n */\r\nexport type {\r\n  ExplorerConfig,\r\n  AuthConfig,\r\n  ThemeMode,\r\n  LocaleCode,\r\n  FileNode,\r\n  ShareInfo,\r\n  Capabilities,\r\n  UploadInitResponse,\r\n  UploadFinalizeResponse,\r\n  ArchiveEntry,\r\n  ViewMode,\r\n} from '@brftech/filex-core';\r\n\r\n/**\r\n * Helper-typed payloads the events carry — matches the SFC's emit\r\n * declarations so consumers get autocomplete on `event.detail`.\r\n */\r\nexport interface FilexErrorDetail {\r\n  message: string;\r\n  context?: unknown;\r\n}\r\n\r\nexport interface FilexShareCreatedDetail {\r\n  path: string;\r\n  url: string;\r\n  pin: string | null;\r\n}\r\n\r\nexport interface FilexFileOpenedDetail {\r\n  path: string;\r\n  basename: string;\r\n}\r\n\r\nexport interface FilexUploadProgressDetail {\r\n  uploadId: string;\r\n  percent: number;\r\n  done: boolean;\r\n}\r\n\r\nexport type FilexSelectionChangeDetail = Array<{\r\n  path: string;\r\n  basename: string;\r\n  type: 'file' | 'dir';\r\n}>;\r\n"],"names":["FilexElementClass","FileManager","createComponent","React"],"mappings":";;;AAyBA,MAAMA,IACH,OAAO,iBAAmB,OAAe,eAAe,IAAI,gBAAgB;AAAA;AAAA;AAI5E,MAAM;AAAC,GAYGC,IAAcC,EAAgB;AAAA,EACzC,OAAOC;AAAA,EACP,SAAS;AAAA,EACT,cAAcH;AAAA,EACd,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,EAAA;AAEvB,CAAC;"}

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import { ArchiveEntry } from '@brftech/filex-core';
+import { AuthConfig } from '@brftech/filex-core';
+import { Capabilities } from '@brftech/filex-core';
+import { ExplorerConfig } from '@brftech/filex-core';
+import { FileNode } from '@brftech/filex-core';
+import { LocaleCode } from '@brftech/filex-core';
+import { ReactWebComponent } from '@lit/react';
+import { ShareInfo } from '@brftech/filex-core';
+import { ThemeMode } from '@brftech/filex-core';
+import { UploadFinalizeResponse } from '@brftech/filex-core';
+import { UploadInitResponse } from '@brftech/filex-core';
+import { ViewMode } from '@brftech/filex-core';
+
+export { ArchiveEntry }
+
+export { AuthConfig }
+
+export { Capabilities }
+
+export { ExplorerConfig }
+
+/**
+ * Idiomatic React component — used like a normal JSX tag with native
+ * props.
+ *
+ *   <FileManager
+ *     config={{ apiBase: 'https://files.example.com',
+ *               auth: { kind: 'bearer', token } }}
+ *     onError={(e) => console.error(e.detail)}
+ *   />
+ */
+export declare const FileManager: ReactWebComponent<HTMLElement, {
+onError: string;
+onShareCreated: string;
+onFileOpened: string;
+onUploadProgress: string;
+onSelectionChange: string;
+}>;
+
+export { FileNode }
+
+/**
+ * Helper-typed payloads the events carry — matches the SFC's emit
+ * declarations so consumers get autocomplete on `event.detail`.
+ */
+export declare interface FilexErrorDetail {
+    message: string;
+    context?: unknown;
+}
+
+export declare interface FilexFileOpenedDetail {
+    path: string;
+    basename: string;
+}
+
+export declare type FilexSelectionChangeDetail = Array<{
+    path: string;
+    basename: string;
+    type: 'file' | 'dir';
+}>;
+
+export declare interface FilexShareCreatedDetail {
+    path: string;
+    url: string;
+    pin: string | null;
+}
+
+export declare interface FilexUploadProgressDetail {
+    uploadId: string;
+    percent: number;
+    done: boolean;
+}
+
+export { LocaleCode }
+
+export { ShareInfo }
+
+export { ThemeMode }
+
+export { UploadFinalizeResponse }
+
+export { UploadInitResponse }
+
+export { ViewMode }
+
+export { }

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@brftech/filex-react",
+  "version": "0.1.56",
+  "description": "filex React adapter — wraps <filex-explorer> for React idiom (props + camelCase event handlers)",
+  "type": "module",
+  "main": "./dist/filex-react.cjs",
+  "module": "./dist/filex-react.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/filex-react.js",
+      "require": "./dist/filex-react.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@lit/react": "^1.0.5",
+    "@brftech/filex": "0.1.56",
+    "@brftech/filex-core": "0.1.56"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "filex",
+    "file-manager",
+    "react",
+    "brftech"
+  ],
+  "author": "BRF Tech <hello@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brf-tech/filex.git",
+    "directory": "packages/react"
+  },
+  "scripts": {
+    "build": "tsc --noEmit && vite build",
+    "build:no-dts": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist"
+  }
+}