Merge pull request #34 from uploadcare/feat/BLOCKS-469/replace-from-lr-to-uc

feat: replace from lr to uc

Author: nd0ut

examples/angular-uploader/README.md

@@ -38,7 +38,7 @@ $ npm run start
 
 ## Installation
 
-All you need to do is to install [`@uploadcare/blocks`](https://www.npmjs.com/package/@uploadcare/blocks) from npm
+All you need to do is to install [`@uploadcare/file-uploader`](https://www.npmjs.com/package/@uploadcare/file-uploader) from npm
 via your favorite Node package manager.
 
 [Read more about installation](https://uploadcare.com/docs/file-uploader/installation/) in the Uploadcare documentation.
@@ -65,7 +65,7 @@ if you want to know more about using custom elements in Angular.
 ### Styling
 
 If your styling solution may provide class string or style object, feel free to use them on blocks like
-`lr-file-uploader-regular` and override default class using CSS variables.
+`uc-file-uploader-regular` and override default class using CSS variables.
 
 Otherwise you may go “full override” way and pass a string with styles to a File Uploader type of your choice.
 
@@ -75,7 +75,7 @@ Otherwise you may go “full override” way and pass a string with styles to a
 
 You’re always welcome to contribute:
 
-* Create [issues](https://github.com/uploadcare/blocks/issues) every time you feel something is missing or goes wrong.
+* Create [issues](https://github.com/uploadcare/file-uploader/issues) every time you feel something is missing or goes wrong.
 * Provide your feedback or drop us a support request at <a href="mailto:[email protected]">[email protected]</a>.
 * Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well.
 * Star this repo if you like it ⭐️

examples/angular-uploader/package-lock.json

@@ -17,7 +17,7 @@
     "@angular/platform-browser": "17.0.9",
     "@angular/platform-browser-dynamic": "17.0.9",
     "@angular/router": "17.0.9",
-    "@uploadcare/blocks": "0.44.0",
+    "@uploadcare/file-uploader": "^1.2.0",
     "rxjs": "7.4.0",
     "tslib": "2.3.1",
     "zone.js": "0.14.4"

examples/angular-uploader/package.json

@@ -1,17 +1,17 @@
 <div class="root">
   <!--
-    Note: `lr-config` is the main block we use to configure File Uploader.
+    Note: `uc-config` is the main block we use to configure File Uploader.
     It's important to all the context-related blocks to have the same `ctx-name` attribute.
 
     See more: https://uploadcare.com/docs/file-uploader/configuration/
     Available options: https://uploadcare.com/docs/file-uploader/options/
 
-    Also note: Some options currently are not available via `lr-config`,
+    Also note: Some options currently are not available via `uc-config`,
     but may be set via CSS properties or CSS classes. E.g. accent colors or darkmode
 
     Here they are: https://uploadcare.com/docs/file-uploader/styling/
   -->
-  <lr-config
+  <uc-config
     #config
     [attr.ctx-name]="uploaderCtxName"
     pubkey="a6ca334c3520777c0045"
@@ -20,19 +20,19 @@
     confirmUpload="false"
     removeCopyright="true"
     imgOnly="true"
-  ></lr-config>
+  ></uc-config>
 
-  <lr-file-uploader-regular
+  <uc-file-uploader-regular
     [attr.ctx-name]="uploaderCtxName"
     [class]="uploaderClassName"
     [class.uc-dark]="theme === 'dark'"
     [class.uc-light]="theme === 'light'"
-  ></lr-file-uploader-regular>
+  ></uc-file-uploader-regular>
 
-  <lr-upload-ctx-provider
+  <uc-upload-ctx-provider
     #ctxProvider
     [attr.ctx-name]="uploaderCtxName"
-  ></lr-upload-ctx-provider>
+  ></uc-upload-ctx-provider>
 
   <div class="previews">
     @for (file of files; track file.cdnUrl) {

examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.html

@@ -50,7 +50,7 @@
   object-fit: cover;
 }
 
-.root::ng-deep lr-simple-btn button {
+.root::ng-deep uc-simple-btn button {
   height: auto;
   padding: 10px 12px !important;
   font-family: monospace;
@@ -63,16 +63,16 @@
   color: var(--ui-control-text-color);
 }
 
-.root::ng-deep lr-simple-btn lr-icon {
+.root::ng-deep uc-simple-btn uc-icon {
   display: none;
 }
 
-.root::ng-deep lr-simple-btn button:hover,
-.root::ng-deep lr-simple-btn button:focus {
+.root::ng-deep uc-simple-btn button:hover,
+.root::ng-deep uc-simple-btn button:focus {
   background: var(--ui-control-background-color);
   outline: 3px solid var(--ui-control-outline-color-focus);
 }
 
-.root::ng-deep lr-simple-btn button:active {
+.root::ng-deep uc-simple-btn button:active {
   border-color: var(--ui-control-border-color-focus);
 }

examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.scss

@@ -7,10 +7,10 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import * as LR from '@uploadcare/blocks';
-import { OutputFileEntry } from '@uploadcare/blocks';
+import * as UC from '@uploadcare/file-uploader';
+import { OutputFileEntry } from '@uploadcare/file-uploader';
 
-LR.registerBlocks(LR);
+UC.defineComponents(UC);
 
 @Component({
   selector: 'file-uploader',
@@ -29,11 +29,11 @@ export class FileUploaderComponent {
 
   uploadedFiles: OutputFileEntry<'success'>[] = [];
   @ViewChild('ctxProvider', { static: true }) ctxProviderRef!: ElementRef<
-    InstanceType<LR.UploadCtxProvider>
+    InstanceType<UC.UploadCtxProvider>
   >;
 
   @ViewChild('config', { static: true }) configRef!: ElementRef<
-    InstanceType<LR.Config>
+    InstanceType<UC.Config>
   >;
 
   ngOnInit() {
@@ -100,14 +100,14 @@ export class FileUploaderComponent {
     See more: https://uploadcare.com/docs/file-uploader/api/
    */
   resetUploaderState() {
-    this.ctxProviderRef.nativeElement.uploadCollection.clearAll();
+    this.ctxProviderRef.nativeElement.getAPI().removeAllFiles();
   }
 
   handleRemoveClick(uuid: OutputFileEntry['uuid']) {
     this.filesChange.emit(this.files.filter((f) => f.uuid !== uuid));
   }
 
-  handleChangeEvent = (e: LR.EventMap['change']) => {
+  handleChangeEvent = (e: UC.EventMap['change']) => {
     this.uploadedFiles = e.detail.allEntries.filter(f => f.status === 'success') as OutputFileEntry<'success'>[];
   };
 

examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { JsonPipe } from '@angular/common';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { OutputFileEntry } from '@uploadcare/blocks';
+import { OutputFileEntry } from '@uploadcare/file-uploader';
 
 import { FileUploaderComponent } from '../../components/file-uploader/file-uploader.component';
 

examples/angular-uploader/src/app/views/form-view/form-view.component.ts

@@ -1,4 +1,4 @@
-import { OutputFileEntry } from '@uploadcare/blocks';
+import { OutputFileEntry } from '@uploadcare/file-uploader';
 
 type MocksType = {
   title: string;

examples/angular-uploader/src/app/views/form-view/mocks.ts

@@ -1,14 +1,14 @@
-<lr-config
+<uc-config
   ctx-name="my-uploader-2"
   pubkey="a6ca334c3520777c0045"
-></lr-config>
-<lr-file-uploader-minimal
+></uc-config>
+<uc-file-uploader-minimal
   ctx-name="my-uploader-2"
-></lr-file-uploader-minimal>
-<lr-upload-ctx-provider
+></uc-file-uploader-minimal>
+<uc-upload-ctx-provider
   ctx-name="my-uploader-2"
   #ctxProvider
-></lr-upload-ctx-provider>
+></uc-upload-ctx-provider>
 
 <div class="previews">
   @for (file of files; track file.cdnUrl) {

examples/angular-uploader/src/app/views/minimal-view/minimal-view.component.html

@@ -7,10 +7,10 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import * as LR from '@uploadcare/blocks';
-import { OutputFileEntry } from '@uploadcare/blocks';
+import * as UC from '@uploadcare/file-uploader';
+import { OutputFileEntry } from '@uploadcare/file-uploader';
 
-LR.registerBlocks(LR);
+UC.defineComponents(UC);
 
 @Component({
   selector: 'minimal-view',
@@ -24,7 +24,7 @@ export class MinimalViewComponent {
   @Output() filesChange = new EventEmitter<OutputFileEntry<'success'>[]>();
 
   @ViewChild('ctxProvider', { static: true }) ctxProviderRef!: ElementRef<
-    InstanceType<LR.UploadCtxProvider>
+    InstanceType<UC.UploadCtxProvider>
   >;
 
   ngOnInit() {
@@ -47,7 +47,7 @@ export class MinimalViewComponent {
     );
   }
 
-  handleChangeEvent = (e: LR.EventMap['change']) => {
+  handleChangeEvent = (e: UC.EventMap['change']) => {
     console.log('change event payload:', e);
 
     this.files = e.detail.allEntries.filter(f => f.status === 'success') as OutputFileEntry<'success'>[];

examples/angular-uploader/src/app/views/minimal-view/minimal-view.component.ts

@@ -1,15 +1,15 @@
-<lr-config
+<uc-config
   ctx-name="my-uploader-3"
   pubkey="a6ca334c3520777c0045"
   source-list="local, url, camera, dropbox"
-></lr-config>
-<lr-file-uploader-regular
+></uc-config>
+<uc-file-uploader-regular
   ctx-name="my-uploader-3"
-></lr-file-uploader-regular>
-<lr-upload-ctx-provider
+></uc-file-uploader-regular>
+<uc-upload-ctx-provider
   ctx-name="my-uploader-3"
   #ctxProvider
-></lr-upload-ctx-provider>
+></uc-upload-ctx-provider>
 
 <div class="previews">
   @for (file of files; track file.cdnUrl) {

examples/angular-uploader/src/app/views/regular-view/regular-view.component.html

@@ -1,8 +1,8 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import * as LR from '@uploadcare/blocks';
-import { OutputFileEntry } from '@uploadcare/blocks';
+import * as UC from '@uploadcare/file-uploader';
+import { OutputFileEntry } from '@uploadcare/file-uploader';
 
-LR.registerBlocks(LR);
+UC.defineComponents(UC);
 
 @Component({
   selector: 'regular-view',
@@ -16,7 +16,7 @@ export class RegularViewComponent {
   @Output() filesChange = new EventEmitter<OutputFileEntry<'success'>[]>();
 
   @ViewChild('ctxProvider', { static: true }) ctxProviderRef!: ElementRef<
-    InstanceType<LR.UploadCtxProvider>
+    InstanceType<UC.UploadCtxProvider>
   >;
 
   ngOnInit() {
@@ -39,7 +39,7 @@ export class RegularViewComponent {
     );
   }
 
-  handleChangeEvent = (e: LR.EventMap['change']) => {
+  handleChangeEvent = (e: UC.EventMap['change']) => {
     console.log('change event payload:', e);
 
     this.files = e.detail.allEntries.filter(f => f.status === 'success') as OutputFileEntry<'success'>[];