feat: added prefix uc to styles

Author: Egor Didenko

examples/composition/package-lock.json

@@ -112,7 +112,7 @@ export class UnsplashSource extends UploaderBlock {
     <uc-activity-header>
       <button
         type="button"
-        class="mini-btn close-btn"
+        class="uc-mini-btn uc-close-btn"
         set="onclick: *historyBack"
       >
         <uc-icon name="back"></uc-icon>
@@ -123,30 +123,30 @@ export class UnsplashSource extends UploaderBlock {
       </div>
       <button
         type="button"
-        class="mini-btn close-btn"
+        class="uc-mini-btn uc-close-btn"
         set="onclick: *historyBack"
       >
         <uc-icon name="close"></uc-icon>
       </button>
     </uc-activity-header>
-    <div class="content">
-      <div ref="slider" class="splide">
-        <div class="splide__track">
-          <ul class="splide__list"></ul>
+    <div class="uc-content">
+      <div ref="slider" class="uc-splide">
+        <div class="uc-splide__track">
+          <ul class="uc-splide__list"></ul>
         </div>
       </div>
     </div>
-    <div class="toolbar">
+    <div class="uc-toolbar">
       <button
         type="button"
-        class="done-btn primary-btn w-30"
+        class="uc-done-btn uc-primary-btn w-30"
         set="onclick: handlePick"
       >
         Pick
       </button>
       <button
         type="button"
-        class="cancel-btn secondary-btn"
+        class="uc-cancel-btn uc-secondary-btn"
         set="onclick: handleNext"
       >
         Next →

examples/composition/package.json

@@ -17,51 +17,51 @@ uc-modal uc-unsplash-source {
   height: var(--modal-content-height-fill, 100%);
   max-height: var(--modal-max-content-height);}
 
-uc-unsplash-source .toolbar {
+uc-unsplash-source .uc-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: var(--uc-padding);
 }
 
-uc-unsplash-source .content {
+uc-unsplash-source .uc-content {
   display: flex;
   overflow: hidden;
   flex: 1 1 0;
   min-height: 0;
 }
 
-uc-unsplash-source .image-slider {
+uc-unsplash-source .uc-image-slider {
   display: flex;
   height: 100%;
   width: 100%;
   transition: all 0.3s;
 }
 
-uc-unsplash-source .image-slider img {
+uc-unsplash-source .uc-image-slider img {
   max-width: 100%;
   max-height: 100%;
   object-fit: cover;
   flex: 0 0 100%;
 }
 
-uc-unsplash-source .splide {
+uc-unsplash-source .uc-splide {
   width: 100%;
 }
 
-uc-unsplash-source .splide__track {
+uc-unsplash-source .uc-splide__track {
   height: 100%;
 }
 
-uc-unsplash-source .splide__slide {
+uc-unsplash-source .uc-splide__slide {
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
 
-uc-unsplash-source .splide__slide img {
+uc-unsplash-source .uc-splide__slide img {
   height: 100%;
   object-fit: cover;
   flex: 0 1 100%;

examples/js-custom-tab/src/UnsplashSource.js

@@ -96,8 +96,10 @@ export default function FileUploader({ files, uploaderClassName, uploaderCtxName
 
       See more: https://uploadcare.com/docs/file-uploader/api/
      */
-    const api = ctxProviderRef.current.getAPI()
-    const resetUploaderState = () => api.removeAllFiles();
+    const resetUploaderState = () => {
+      const api = ctxProviderRef.current.getAPI()
+      api.removeAllFiles()
+    };
 
     const handleModalCloseEvent = () => {
       resetUploaderState();

examples/js-custom-tab/src/unsplash-source.css

@@ -6,8 +6,7 @@
   "scripts": {
     "install-deps": "for dir in ./examples/*; do npm install --prefix \"${dir}\"; done",
     "install-ci-deps": "for dir in ./examples/*; do npm ci --prefix \"${dir}\"; done",
-    "build": "for dir in ./examples/*; do npm run build --prefix \"${dir}\"; done",
-    "install-file-upload": "for dir in ./examples/*; do npm install  @uploadcare/[email protected] --prefix \"${dir}\"; done"
+    "build": "for dir in ./examples/*; do npm run build --prefix \"${dir}\"; done"
   },
   "author": "Uploadcare",
   "license": "MIT"