chore: bump @uploadcare/blocks to 0.25.0

uploadcare · Jul 24, 2023 · d9c49e0 · d9c49e0
1 parent 294f429
commit d9c49e0
Show file tree

Hide file tree

Showing 13 changed files with 4,514 additions and 3,664 deletions.
diff --git a/examples/angular-uploader/package.json b/examples/angular-uploader/package.json
@@ -10,32 +10,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~15.2.7",
-    "@angular/common": "~15.2.7",
-    "@angular/compiler": "~15.2.7",
-    "@angular/core": "~15.2.7",
-    "@angular/forms": "~15.2.7",
-    "@angular/platform-browser": "~15.2.7",
-    "@angular/platform-browser-dynamic": "~15.2.7",
-    "@angular/router": "~15.2.7",
-    "@uploadcare/blocks": "^0.20.1",
-    "@uploadcare/upload-client": "^6.4.1",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.5.0",
-    "zone.js": "~0.13.0"
+    "@angular/animations": "~16.1.3",
+    "@angular/common": "~16.1.3",
+    "@angular/compiler": "~16.1.3",
+    "@angular/core": "~16.1.3",
+    "@angular/forms": "~16.1.3",
+    "@angular/platform-browser": "~16.1.3",
+    "@angular/platform-browser-dynamic": "~16.1.3",
+    "@angular/router": "~16.1.3",
+    "@uploadcare/blocks": "file:../../../blocks",
+    "@uploadcare/upload-client": "^6.6.1",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.0",
+    "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~15.2.6",
-    "@angular/cli": "~15.2.6",
-    "@angular/compiler-cli": "~15.2.7",
-    "@types/jasmine": "~4.3.1",
-    "@types/node": "^18.15.11",
-    "jasmine-core": "~4.6.0",
-    "karma": "~6.4.1",
-    "karma-chrome-launcher": "~3.1.1",
-    "karma-coverage": "~2.2.0",
+    "@angular-devkit/build-angular": "~16.1.2",
+    "@angular/cli": "~16.1.2",
+    "@angular/compiler-cli": "~16.1.3",
+    "@types/jasmine": "~4.3.4",
+    "@types/node": "^20.3.2",
+    "jasmine-core": "~5.0.1",
+    "karma": "~6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.9.5"
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.1.5"
   }
 }
diff --git a/examples/angular-uploader/src/app/app.component.css b/examples/angular-uploader/src/app/app.component.css
@@ -11,17 +11,3 @@
   width: 100%;
   max-width: 1000px;
 }
-.uploader-cfg {
-  --ctx-name: "uploader";
-
-  /* DO NOT FORGET TO USE YOUR OWN PUBLIC KEY */
-  --cfg-pubkey: "demopublickey";
-  --cfg-multiple: 1;
-  --cfg-confirm-upload: 1;
-  --cfg-img-only: 0;
-  --cfg-accept: "";
-  --cfg-store: 1;
-  --cfg-camera-mirror: 0;
-  --cfg-source-list: "local, url, camera, dropbox, gdrive";
-  --cfg-max-files: 10;
-}
diff --git a/examples/angular-uploader/src/app/app.component.html b/examples/angular-uploader/src/app/app.component.html
@@ -2,17 +2,25 @@
 <!-- Moreover Angular binds dynamic attributes async and we can't catch `css-src` value on connectedCallback -->
 <!-- TODO: we should make a feature of awaiting for css-src before render of ShadowWrapper -->
 <div class="wrapper">
+  <lr-config
+    ctx-name="my-uploader"
+    pubkey="demopublickey"
+    multiple="true"
+    multipleMax="10"
+    confirmUpload="true"
+    sourceList="local, url, camera, dropbox, gdrive"
+  ></lr-config>
   <lr-file-uploader-regular
-    class="uploader-cfg"
-    css-src="https://unpkg.com/@uploadcare/[email protected]/web/file-uploader-regular.min.css"
+    ctx-name="my-uploader"
+    [attr.css-src]="cssSrc"
   >
-    <lr-data-output
-      (lr-data-output)="handleUploaderEvent($event)"
-      use-event
-      hidden
-      class="uploader-cfg"
-    ></lr-data-output>
   </lr-file-uploader-regular>
+  <lr-data-output
+    ctx-name="my-uploader"
+    (lr-data-output)="handleUploaderEvent($event)"
+    use-event
+    hidden
+  ></lr-data-output>
 
   <div class="output">
     <img

diff --git a/examples/angular-uploader/src/app/app.component.ts b/examples/angular-uploader/src/app/app.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import * as LR from '@uploadcare/blocks';
 import type { UploadcareFile } from '@uploadcare/upload-client';
+import { PACKAGE_VERSION } from '@uploadcare/blocks';
 
 LR.registerBlocks(LR);
 
@@ -16,6 +17,7 @@ type UploadcareBlocksFile = UploadcareFile & {
 })
 export class AppComponent {
   files: UploadcareBlocksFile[] = [];
+  cssSrc = `https://unpkg.com/@uploadcare/blocks@${PACKAGE_VERSION}/web/file-uploader-regular.min.css`
 
   handleUploaderEvent(e: Event) {
     const { data: files } = (e as CustomEvent).detail;

diff --git a/examples/composition/package.json b/examples/composition/package.json
@@ -14,6 +14,6 @@
     "vite": "^4.2.1"
   },
   "dependencies": {
-    "@uploadcare/blocks": "^0.20.1"
+    "@uploadcare/blocks": "0.25.0"
   }
 }
diff --git a/examples/react-uploader/package.json b/examples/react-uploader/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@uploadcare/blocks": "^0.20.1",
+    "@uploadcare/blocks": "0.25.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/react-uploader/src/App.module.css b/examples/react-uploader/src/App.module.css
@@ -10,18 +10,4 @@
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   width: 100%;
   max-width: 1000px;
-}
-.uploaderCfg {
-  --ctx-name: 'uploader';
-
-  /* DO NOT FORGET TO USE YOUR OWN PUBLIC KEY */
-  --cfg-pubkey: "demopublickey";
-  --cfg-multiple: 1;
-  --cfg-confirm-upload: 1;
-  --cfg-img-only: 0;
-  --cfg-accept: "";
-  --cfg-store: 1;
-  --cfg-camera-mirror: 0;
-  --cfg-source-list: "local, url, camera, dropbox, gdrive";
-  --cfg-max-files: 10;
-}
+}
diff --git a/examples/react-uploader/src/App.tsx b/examples/react-uploader/src/App.tsx
@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import * as LR from "@uploadcare/blocks";
 import st from "./App.module.css";
-import { PACKAGE_VERSION } from "@uploadcare/blocks/env";
+import { PACKAGE_VERSION } from "@uploadcare/blocks";
 
 LR.registerBlocks(LR);
 
@@ -16,36 +16,30 @@ function App() {
     setFiles(data);
   }, []);
 
-  useEffect(() => {
-    const el = dataOutputRef.current;
-
-    // TODO: Augment global custom event types
-    el?.addEventListener(
-      "lr-data-output",
-      handleUploaderEvent as EventListenerOrEventListenerObject
-    );
-    return () => {
-      el?.removeEventListener(
-        "lr-data-output",
-        handleUploaderEvent as EventListenerOrEventListenerObject
-      );
-    };
-  }, [handleUploaderEvent]);
-
   return (
     <div className={st.wrapper}>
+      <lr-config
+        ctx-name="my-uploader"
+        pubkey="demopublickey"
+        multiple={true}
+        confirm-upload={true}
+        source-list="local, url, camera, dropbox, gdrive"
+        multiple-max={10}
+      ></lr-config>
+
       <lr-file-uploader-regular
-        class={st.uploaderCfg}
+        ctx-name="my-uploader"
         css-src={`https://unpkg.com/@uploadcare/blocks@${PACKAGE_VERSION}/web/file-uploader-regular.min.css`}
-      >
-        <lr-data-output
-          ref={dataOutputRef}
-          use-event
-          hidden
-          class={st.uploaderCfg}
-          onEvent={handleUploaderEvent}
-        ></lr-data-output>
-      </lr-file-uploader-regular>
+      ></lr-file-uploader-regular>
+
+      <lr-data-output
+        ctx-name="my-uploader"
+        ref={dataOutputRef}
+        use-event
+        hidden
+        class={st.uploaderCfg}
+        onEvent={handleUploaderEvent}
+      ></lr-data-output>
 
       <div className={st.output}>
         {files.map((file) => (

diff --git a/examples/svelte-uploader/package.json b/examples/svelte-uploader/package.json
@@ -22,7 +22,7 @@
     "svelte": "^3.58.0"
   },
   "dependencies": {
-    "@uploadcare/blocks": "^0.20.1",
+    "@uploadcare/blocks": "0.25.0",
     "sirv-cli": "^2.0.2"
   }
 }
diff --git a/examples/svelte-uploader/src/App.svelte b/examples/svelte-uploader/src/App.svelte
@@ -1,11 +1,6 @@
 <script>
-  /*
-   * Use minified version because codesandbox can't bundle raw css with relative imports.
-   * It's better to use '@uploadcare/blocks/blocks/themes/lr-basic/index.css' instead
-   */
-  import "@uploadcare/blocks/web/lr-basic.min.css";
   import * as LR from "@uploadcare/blocks";
-  import { PACKAGE_VERSION } from "@uploadcare/blocks/env";
+  import { PACKAGE_VERSION } from "@uploadcare/blocks";
 
   LR.registerBlocks(LR);
 
@@ -17,17 +12,25 @@
 </script>
 
 <div class="wrapper">
+  <lr-config
+    ctx-name="my-uploader"
+    pubkey="demopublickey"
+    multiple="true"
+    multipleMax="10"
+    confirmUpload="true"
+    sourceList="local, url, camera, dropbox, gdrive"
+  />
   <lr-file-uploader-regular
-    class="uploader-cfg"
+    ctx-name="my-uploader"
     css-src="https://unpkg.com/@uploadcare/blocks@{PACKAGE_VERSION}/web/file-uploader-regular.min.css"
-  >
-    <lr-data-output
-      use-event
-      hidden
-      class="uploader-cfg"
-      on:lr-data-output={handleUploaderEvent}
-    />
-  </lr-file-uploader-regular>
+  />
+  <lr-data-output
+    ctx-name="my-uploader"
+    use-event
+    hidden
+    class="uploader-cfg"
+    on:lr-data-output={handleUploaderEvent}
+  />
   <div class="output">
     {#each files as file}
       <img
@@ -54,18 +57,4 @@
     width: 100%;
     max-width: 1000px;
   }
-  .uploader-cfg {
-    --ctx-name: "uploader";
-
-    /* DO NOT FORGET TO USE YOUR OWN PUBLIC KEY */
-    --cfg-pubkey: "demopublickey";
-    --cfg-multiple: 1;
-    --cfg-confirm-upload: 1;
-    --cfg-img-only: 0;
-    --cfg-accept: "";
-    --cfg-store: 1;
-    --cfg-camera-mirror: 0;
-    --cfg-source-list: "local, url, camera, dropbox, gdrive";
-    --cfg-max-files: 10;
-  }
 </style>
diff --git a/examples/vue-uploader/package.json b/examples/vue-uploader/package.json
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@uploadcare/blocks": "^0.20.1",
+    "@uploadcare/blocks": "0.25.0",
     "core-js": "^3.30.0",
     "vue": "^3.2.47"
   },

diff --git a/examples/vue-uploader/src/components/Uploader.vue b/examples/vue-uploader/src/components/Uploader.vue
@@ -1,16 +1,25 @@
 <template>
   <div class="wrapper">
+    <lr-config
+      ctx-name="my-uploader"
+      pubkey="demopublickey"
+      :multiple="true"
+      :multipleMax="10"
+      :confirmUpload="true"
+      sourceList="local, url, camera, dropbox, gdrive"
+    ></lr-config>
     <lr-file-uploader-regular
-      class="uploader-cfg"
+      ctx-name="my-uploader"
       :css-src="`https://unpkg.com/@uploadcare/blocks@${PACKAGE_VERSION}/web/file-uploader-regular.min.css`"
     >
-      <lr-data-output
-        @lr-data-output="handleUploaderEvent"
-        use-event
-        hidden
-        class="uploader-cfg"
-      ></lr-data-output>
     </lr-file-uploader-regular>
+    <lr-data-output
+      ctx-name="my-uploader"
+      @lr-data-output="handleUploaderEvent"
+      use-event
+      hidden
+      class="uploader-cfg"
+    ></lr-data-output>
 
     <div class="output">
       <img
@@ -32,7 +41,7 @@
  */
 import "@uploadcare/blocks/web/lr-basic.min.css";
 import * as LR from "@uploadcare/blocks";
-import { PACKAGE_VERSION } from "@uploadcare/blocks/env";
+import { PACKAGE_VERSION } from "@uploadcare/blocks";
 
 LR.registerBlocks(LR);
 
@@ -70,19 +79,4 @@ export default {
   width: 100%;
   max-width: 1000px;
 }
-
-.uploader-cfg {
-  --ctx-name: "uploader";
-
-  /* DO NOT FORGET TO USE YOUR OWN PUBLIC KEY */
-  --cfg-pubkey: "demopublickey";
-  --cfg-multiple: 1;
-  --cfg-confirm-upload: 1;
-  --cfg-img-only: 0;
-  --cfg-accept: "";
-  --cfg-store: 1;
-  --cfg-camera-mirror: 0;
-  --cfg-source-list: "local, url, camera, dropbox, gdrive";
-  --cfg-max-files: 10;
-}
 </style>