Merge pull request #20 from uploadcare/feature/implement-styles

feat(react-uploader): updated @uploadcare/blocks and implement styles

packages/react-adapter/src/customElementToReactComponent.ts

@@ -10,7 +10,7 @@ export type Options<
 > = {
   react: typeof React;
   tag: string;
-  elClass: { new (): I };
+  elClass: { new(): I };
   schemaEvents?: E;
 };
 
@@ -54,7 +54,7 @@ export const customElementToReactComponent = <
         Record<string, unknown>,
         Set<string>,
         I
-        // @ts-ignore
+      // @ts-ignore
       >(props, eventKeyOfProps, elClass);
 
       React.useLayoutEffect(() => {

packages/react-adapter/src/utils/registerPropAndEvent.ts

@@ -1,4 +1,5 @@
 const listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();
+type THandleEvent = (e?: Event) => void;
 
 type TRegisterEvent<E> = {
   node: E;
@@ -12,7 +13,7 @@ const ensureEventMapForNode = (
   node: Element,
 ): Map<string, EventListenerObject> => {
   let events = listenedEvents.get(node);
-  if (!events) {
+  if (events === undefined) {
     events = new Map();
     listenedEvents.set(node, events);
   }
@@ -27,24 +28,28 @@ export const registerPropAndEvent = <E extends Element>({
   event,
 }: TRegisterEvent<E>) => {
   // Subscribe to the event if it is defined
-  if (event !== undefined && valueProp !== prevValueProp) {
-    const events = ensureEventMapForNode(node);
-    const handlerExists = events.has(event);
+  if (event !== undefined) {
+    if (valueProp !== prevValueProp) {
+      const events = ensureEventMapForNode(node);
+      const handlerExists = events.has(event);
+      let handler = events.get(event) as EventListenerObject;
 
-    if (valueProp) {
-      const handler: EventListenerObject = {
-        handleEvent: valueProp as (e?: Event) => void,
-      };
-      if (!handlerExists) {
-        node.addEventListener(event, handler);
+      if (valueProp !== undefined) {
+        if (!handlerExists) {
+          handler = { handleEvent: valueProp as THandleEvent };
+          events.set(event, handler);
+          // @ts-ignore
+          node.addEventListener(event, (event: CustomEvent) =>
+            handler.handleEvent(event.detail),
+          );
+        } else {
+          handler.handleEvent = valueProp as THandleEvent;
+        }
+      } else if (handlerExists) {
+        events.delete(event);
+        node.removeEventListener(event, handler);
       }
-      events.set(event, handler);
-    } else if (handlerExists) {
-      const handler = events.get(event);
-      node.removeEventListener(event, handler!);
-      events.delete(event);
     }
-
     return;
   }
 

packages/react-uploader/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uploadcare/react-uploader",
   "description": "React component for file uploads using Uploadcare",
-  "version": "0.3.0",
+  "version": "0.3.0-alpha.2",
   "private": false,
   "type": "module",
   "files": [
@@ -14,7 +14,8 @@
     ".": {
       "import": "./dist/react-uploader.js",
       "require": "./dist/react-uploader.cjs"
-    }
+    },
+    "./core.css": "./dist/libs.css"
   },
   "scripts": {
     "dev": "tsc && vite build --watch",
@@ -26,8 +27,8 @@
     "@types/react": "17 || 18"
   },
   "dependencies": {
-    "@uploadcare/blocks": "^0.36.1-alpha.1",
-    "@uploadcare/react-adapter": "^0.0.1-alpha.1"
+    "@uploadcare/blocks": "^0.39.1",
+    "@uploadcare/react-adapter": "0.2.0"
   },
   "repository": {
     "type": "git",

packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx

@@ -1,12 +1,12 @@
 import React, { type FC, useMemo } from "react";
 import * as LR from "@uploadcare/blocks";
+import "@uploadcare/blocks/web/lr-file-uploader-inline.min.css";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
 import type { TProps } from "../types";
-import { getStyleSource } from "../default";
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
-import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration.ts";
+import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
 
 LR.registerBlocks(LR);
 
@@ -16,10 +16,10 @@ const AdapterFileUploaderInline = customElementToReactComponent({
   elClass: LR.FileUploaderMinimal,
 });
 
-const CSS_SRC_INLINE = getStyleSource("inline");
 export const FileUploaderInline: FC<TProps> = ({
   ctxName,
   className,
+  classNameUploader,
   apiRef,
   ...props
 }) => {
@@ -41,7 +41,8 @@ export const FileUploaderInline: FC<TProps> = ({
         {...eventHandlers}
       />
 
-      <AdapterFileUploaderInline ctx-name={CTX_NAME} css-src={CSS_SRC_INLINE} />
+      {/* @ts-ignore */}
+      <AdapterFileUploaderInline class={classNameUploader} ctx-name={CTX_NAME} />
     </div>
   );
 };

packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx

@@ -1,12 +1,12 @@
 import React, { type FC, useMemo } from "react";
 import * as LR from "@uploadcare/blocks";
+import "@uploadcare/blocks/web/lr-file-uploader-minimal.min.css"
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
 import type { TProps } from "../types";
-import { getStyleSource } from "../default";
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
-import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration.ts";
+import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
 
 LR.registerBlocks(LR);
 
@@ -16,11 +16,11 @@ const AdapterFileUploaderMinimal = customElementToReactComponent({
   elClass: LR.FileUploaderMinimal,
 });
 
-const CSS_SRC_MINIMAL = getStyleSource("minimal");
 
 export const FileUploaderMinimal: FC<TProps> = ({
   ctxName,
   className,
+  classNameUploader,
   apiRef,
   ...props
 }) => {
@@ -41,10 +41,8 @@ export const FileUploaderMinimal: FC<TProps> = ({
         ctx-name={CTX_NAME}
         {...eventHandlers}
       />
-      <AdapterFileUploaderMinimal
-        ctx-name={CTX_NAME}
-        css-src={CSS_SRC_MINIMAL}
-      />
+      {/* @ts-ignore */}
+      <AdapterFileUploaderMinimal class={classNameUploader} ctx-name={CTX_NAME} />
     </div>
   );
 };

packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx

@@ -3,11 +3,10 @@ import * as LR from "@uploadcare/blocks";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
-import { getStyleSource } from "../default";
 import type { TProps } from "../types";
 
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
-import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration.ts";
+import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
 
 LR.registerBlocks(LR);
 
@@ -17,11 +16,10 @@ const AdapterFileUploaderRegular = customElementToReactComponent({
   elClass: LR.FileUploaderRegular,
 });
 
-const CSS_SRC_REGULAR = getStyleSource("regular");
-
 export const FileUploaderRegular: FC<TProps> = ({
   ctxName,
   className,
+  classNameUploader,
   apiRef,
   ...props
 }) => {
@@ -42,10 +40,8 @@ export const FileUploaderRegular: FC<TProps> = ({
         ctx-name={CTX_NAME}
         {...eventHandlers}
       />
-      <AdapterFileUploaderRegular
-        ctx-name={CTX_NAME}
-        css-src={CSS_SRC_REGULAR}
-      />
+      {/* @ts-ignore */}
+      <AdapterFileUploaderRegular class={classNameUploader} ctx-name={CTX_NAME} />
     </div>
   );
 };

packages/react-uploader/src/Uploader/types.ts

@@ -14,7 +14,9 @@ type TExtraPrefixOn<S extends string> = `on${Capitalize<S>}`;
 type TPrefixOnAndCamelCase<S extends string> = TExtraPrefixOn<TToCamelCase<S>>;
 
 export type TEventsSchema = {
-  [K in keyof EventMap as TPrefixOnAndCamelCase<K>]: EventMap[K];
+  [K in keyof EventMap as TPrefixOnAndCamelCase<K>]: (
+    event: EventMap[K]["detail"],
+  ) => void;
 };
 
 type TRefUploadCtxProvider = {
@@ -27,6 +29,7 @@ type TPropsWithConfig = Partial<ConfigType>;
 
 type TDefaultProps = {
   className?: string;
+  classNameUploader?: string;
   ctxName?: string;
 };
 

packages/react-uploader/src/libs.ts

@@ -3,3 +3,6 @@ export { FileUploaderMinimal } from "./Uploader/Minimal/FileUploaderMinimal";
 export { FileUploaderInline } from "./Uploader/Inline/FileUploaderInline";
 
 export { type TProps, UploadCtxProvider } from "./Uploader/types";
+export { type TEventsSchema } from './Uploader/types'
+
+export { defineLocale } from "@uploadcare/blocks"

packages/react-uploader/vite.config.js

@@ -5,8 +5,11 @@ import dts from "vite-plugin-dts";
 
 export default defineConfig({
   build: {
+    cssCodeSplit: true,
     lib: {
-      entry: [resolve(__dirname, "src/libs.ts")],
+      entry: [
+        resolve(__dirname, "src/libs.ts"),
+      ],
       name: "@uploadcare/react-uploader",
 
       formats: ["es", "cjs"],
@@ -22,5 +25,7 @@ export default defineConfig({
       },
     },
   },
-  plugins: [dts({ rollupTypes: true, insertTypesEntry: true })],
+  plugins: [
+    dts({ rollupTypes: true, insertTypesEntry: true }),
+  ],
 });