@scality/data-browser-library 1.0.7 → 1.0.8

package/dist/components/objects/ObjectDetails/__tests__/ObjectDetails.test.js

@@ -5,7 +5,7 @@ import { cleanup, render, screen } from "@testing-library/react";
 import { MemoryRouter, Route, Routes } from "react-router";
 import { DataBrowserUICustomizationProvider } from "../../../../contexts/DataBrowserUICustomizationContext.js";
 var __webpack_modules__ = {
-    ".." (module) {
+    "../index" (module) {
         module.exports = __rspack_external__index_js_95fdb65a;
     }
 };
@@ -19,7 +19,7 @@ function __webpack_require__(moduleId) {
     __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
     return module.exports;
 }
-var external_index_js_ = __webpack_require__("..");
+var external_index_js_ = __webpack_require__("../index");
 jest.mock('../ObjectSummary', ()=>({
         ObjectSummary: ()=>/*#__PURE__*/ jsx("div", {
                 "data-testid": "object-summary",
@@ -398,7 +398,7 @@ describe('ObjectDetails', ()=>{
             expect(screen.getByTestId('object-summary')).toBeInTheDocument();
         });
         it('should throw error when useObjectDetailsContext is used outside provider', ()=>{
-            const { useObjectDetailsContext } = __webpack_require__("..");
+            const { useObjectDetailsContext } = __webpack_require__("../index");
             const TestComponent = ()=>{
                 useObjectDetailsContext();
                 return null;

package/dist/components/objects/UploadButton.js

@@ -9,7 +9,7 @@ const DropZone = styled_components.div`
   flex: 1;
   display: flex;
   flex-direction: column;
-  height: 300px;
+  height: 400px;
   width: 500px;
   padding: ${spacing.r20};
   border-width: ${spacing.r2};
@@ -18,8 +18,10 @@ const DropZone = styled_components.div`
   border-style: dashed;
 `;
 const Files = styled_components.div`
-  height: 250px;
-  overflow-y: scroll;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
   margin: ${spacing.r8} 0px;
 `;
 const EmptyFile = styled_components.div`
@@ -38,6 +40,10 @@ const FileRow = styled_components.div`
 `;
 const FileInfo = styled_components.div`
   flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 const RemoveButton = styled_components.button`
   background: none;
@@ -52,7 +58,12 @@ const RemoveButton = styled_components.button`
 `;
 const maybePluralize = (count, word)=>1 === count ? `1 ${word}` : `${count} ${word}s`;
 const getTitle = (fileCount)=>0 === fileCount ? 'Upload Files' : `Upload ${maybePluralize(fileCount, 'file')}`;
-const FileList = ({ acceptedFiles, open, removeFile })=>/*#__PURE__*/ jsxs("div", {
+const FileListWrapper = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+const FileList = ({ acceptedFiles, open, removeFile })=>/*#__PURE__*/ jsxs(FileListWrapper, {
         children: [
             /*#__PURE__*/ jsx(Button, {
                 icon: /*#__PURE__*/ jsx(Icon, {
@@ -65,18 +76,17 @@ const FileList = ({ acceptedFiles, open, removeFile })=>/*#__PURE__*/ jsxs("div"
             /*#__PURE__*/ jsx(Files, {
                 children: acceptedFiles.map((file)=>/*#__PURE__*/ jsxs(FileRow, {
                         children: [
-                            /*#__PURE__*/ jsx(FileInfo, {
-                                children: /*#__PURE__*/ jsxs("div", {
-                                    children: [
-                                        file.name,
-                                        /*#__PURE__*/ jsx("br", {}),
-                                        /*#__PURE__*/ jsx("small", {
-                                            children: /*#__PURE__*/ jsx(PrettyBytes, {
-                                                bytes: file.size
-                                            })
+                            /*#__PURE__*/ jsxs(FileInfo, {
+                                title: file.name,
+                                children: [
+                                    file.name,
+                                    /*#__PURE__*/ jsx("br", {}),
+                                    /*#__PURE__*/ jsx("small", {
+                                        children: /*#__PURE__*/ jsx(PrettyBytes, {
+                                            bytes: file.size
                                         })
-                                    ]
-                                })
+                                    })
+                                ]
                             }),
                             /*#__PURE__*/ jsx(RemoveButton, {
                                 onClick: ()=>removeFile(file.name),

package/dist/config/__tests__/resolveBrandingTheme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/config/__tests__/resolveBrandingTheme.test.js

@@ -0,0 +1,96 @@
+import { coreUIAvailableThemes } from "@scality/core-ui/dist/style/theme";
+import { resolveBrandingTheme } from "../resolveBrandingTheme.js";
+describe('resolveBrandingTheme', ()=>{
+    it('loads base preset and returns complete theme', ()=>{
+        const config = {
+            base: 'darkRebrand',
+            logo: '/logo.png',
+            brandPrimary: '#2563EB',
+            brandSecondary: '#1E3A5F'
+        };
+        const result = resolveBrandingTheme(config);
+        expect(result).toHaveProperty('statusHealthy');
+        expect(result).toHaveProperty('statusWarning');
+        expect(result).toHaveProperty('statusCritical');
+        expect(result).toHaveProperty('backgroundLevel1');
+        expect(result.backgroundLevel1).toBe(coreUIAvailableThemes.darkRebrand.backgroundLevel1);
+    });
+    it('applies brandPrimary to selectedActive and buttonPrimary tokens', ()=>{
+        const config = {
+            base: 'darkRebrand',
+            logo: '/logo.png',
+            brandPrimary: '#2563EB',
+            brandSecondary: '#1E3A5F'
+        };
+        const result = resolveBrandingTheme(config);
+        expect(result.selectedActive).toBe('#2563EB');
+        expect(result.buttonPrimary).toBe('#2563EB');
+    });
+    it('derives highlight color from brandPrimary at 20% opacity', ()=>{
+        const config = {
+            base: 'darkRebrand',
+            logo: '/logo.png',
+            brandPrimary: '#2563EB',
+            brandSecondary: '#1E3A5F'
+        };
+        const result = resolveBrandingTheme(config);
+        expect(result.highlight).toBe('rgba(37, 99, 235, 0.2)');
+    });
+    it('applies brandSecondary to navbarBackground', ()=>{
+        const config = {
+            base: 'darkRebrand',
+            logo: '/logo.png',
+            brandPrimary: '#2563EB',
+            brandSecondary: '#1E3A5F'
+        };
+        const result = resolveBrandingTheme(config);
+        expect(result.navbarBackground).toBe('#1E3A5F');
+    });
+    it('applies optional overrides on top of generated theme', ()=>{
+        const config = {
+            base: 'darkRebrand',
+            logo: '/logo.png',
+            brandPrimary: '#2563EB',
+            brandSecondary: '#1E3A5F',
+            overrides: {
+                textLink: '#71AEFF',
+                border: '#333333'
+            }
+        };
+        const result = resolveBrandingTheme(config);
+        expect(result.buttonPrimary).toBe('#2563EB');
+        expect(result.navbarBackground).toBe('#1E3A5F');
+        expect(result.textLink).toBe('#71AEFF');
+        expect(result.border).toBe('#333333');
+    });
+    it('handles 3-character hex shorthand colors', ()=>{
+        const config = {
+            base: 'darkRebrand',
+            logo: '/logo.png',
+            brandPrimary: '#FFF',
+            brandSecondary: '#000'
+        };
+        const result = resolveBrandingTheme(config);
+        expect(result.buttonPrimary).toBe('#FFF');
+        expect(result.highlight).toBe('rgba(255, 255, 255, 0.2)');
+        expect(result.navbarBackground).toBe('#000');
+    });
+    it('throws error when base theme name does not exist', ()=>{
+        const config = {
+            base: 'foobar',
+            logo: '/logo.png',
+            brandPrimary: '#2563EB',
+            brandSecondary: '#1E3A5F'
+        };
+        expect(()=>resolveBrandingTheme(config)).toThrow('Unknown base theme "foobar"');
+    });
+    it('throws error on invalid hex color format', ()=>{
+        const config = {
+            base: 'darkRebrand',
+            logo: '/logo.png',
+            brandPrimary: 'not-a-color',
+            brandSecondary: '#1E3A5F'
+        };
+        expect(()=>resolveBrandingTheme(config)).toThrow('Invalid hex color format');
+    });
+});

package/dist/config/resolveBrandingTheme.d.ts

@@ -0,0 +1,16 @@
+import { type CoreUITheme } from '@scality/core-ui/dist/style/theme';
+import type { BrandingModeConfig } from './types';
+/**
+ * Resolves a lightweight branding configuration into a complete CoreUITheme.
+ *
+ * Takes a base preset and brand colors, then generates a full theme by:
+ * - Loading all tokens from the specified base preset
+ * - Applying brandPrimary to button and active states
+ * - Applying brandSecondary to navbar background
+ * - Auto-deriving highlight color from brandPrimary
+ * - Applying any optional token overrides
+ *
+ * @param config - Branding configuration with base preset, colors, and optional overrides
+ * @returns Complete CoreUITheme ready to use with styled-components ThemeProvider
+ */
+export declare function resolveBrandingTheme(config: BrandingModeConfig): CoreUITheme;

package/dist/config/resolveBrandingTheme.js

@@ -0,0 +1,23 @@
+import { coreUIAvailableThemes } from "@scality/core-ui/dist/style/theme";
+function hexToRgba(hex, opacity) {
+    let cleanHex = hex.replace('#', '');
+    if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)) throw new Error(`Invalid hex color format: "${hex}". Expected format: #RGB or #RRGGBB`);
+    if (3 === cleanHex.length) cleanHex = cleanHex.split('').map((char)=>char + char).join('');
+    const r = Number.parseInt(cleanHex.substring(0, 2), 16);
+    const g = Number.parseInt(cleanHex.substring(2, 4), 16);
+    const b = Number.parseInt(cleanHex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function resolveBrandingTheme(config) {
+    const baseTheme = coreUIAvailableThemes[config.base];
+    if (!baseTheme) throw new Error(`Unknown base theme "${config.base}". Available themes: ${Object.keys(coreUIAvailableThemes).join(', ')}`);
+    return {
+        ...baseTheme,
+        selectedActive: config.brandPrimary,
+        buttonPrimary: config.brandPrimary,
+        highlight: hexToRgba(config.brandPrimary, 0.2),
+        navbarBackground: config.brandSecondary,
+        ...config.overrides
+    };
+}
+export { resolveBrandingTheme };

package/dist/config/types.d.ts

@@ -2,6 +2,7 @@
  * Runtime configuration types
  */
 import type { Bucket } from '@aws-sdk/client-s3';
+import type { CoreUITheme, CoreUIThemeName } from '@scality/core-ui/dist/style/theme';
 import type { TableItem } from '../components/objects/ObjectList';
 /**
  * Proxy configuration for development or custom proxy setups
@@ -264,4 +265,39 @@ export interface DataBrowserUIProps {
 }
 export type S3EventType = 's3:ObjectCreated:*' | 's3:ObjectCreated:Put' | 's3:ObjectCreated:Post' | 's3:ObjectCreated:Copy' | 's3:ObjectCreated:CompleteMultipartUpload' | 's3:ObjectRemoved:*' | 's3:ObjectRemoved:Delete' | 's3:ObjectRemoved:DeleteMarkerCreated' | 's3:ObjectRestore:*' | 's3:ObjectRestore:Post' | 's3:ObjectRestore:Completed' | 's3:ObjectRestore:Delete' | 's3:LifecycleExpiration:*' | 's3:LifecycleExpiration:Delete' | 's3:LifecycleExpiration:DeleteMarkerCreated' | 's3:LifecycleTransition' | 's3:Replication:*' | 's3:Replication:OperationFailedReplication' | 's3:Replication:OperationMissedThreshold' | 's3:Replication:OperationReplicatedAfterThreshold' | 's3:Replication:OperationNotTracked' | 's3:ObjectTagging:*' | 's3:ObjectTagging:Put' | 's3:ObjectTagging:Delete' | 's3:ReducedRedundancyLostObject' | 's3:IntelligentTiering' | 's3:ObjectAcl:Put' | 's3:TestEvent';
 export type S3EventCategory = 'Object Creation' | 'Object Deletion' | 'Object Restoration' | 'Lifecycle' | 'Replication' | 'Object Tagging' | 'Storage & Access' | 'Testing';
+/**
+ * Branding configuration for a single theme mode (dark or light).
+ *
+ * Simplifies theme customization by requiring only a base preset and two brand colors.
+ * The branding engine auto-generates a complete theme by:
+ * - Loading all tokens from the base preset
+ * - Applying brandPrimary to buttons and active states
+ * - Applying brandSecondary to navbar background
+ * - Auto-deriving hover states and highlights
+ * - Allowing optional token overrides for fine-tuning
+ */
+export interface BrandingModeConfig {
+    /** Base theme preset that provides default values for all tokens */
+    base: CoreUIThemeName;
+    /** Path to brand logo displayed in navbar. Supports separate logos for dark/light modes. */
+    logo: string;
+    /** Main brand color applied to buttons, active states, and auto-generates hover color */
+    brandPrimary: string;
+    /** Brand color applied to navbar background for immediate brand recognition */
+    brandSecondary: string;
+    /** Optional overrides for individual design tokens when fine-tuning is needed */
+    overrides?: Partial<CoreUITheme>;
+}
+/**
+ * Complete branding configuration supporting dark and/or light modes.
+ *
+ * At least one mode must be provided (dark, light, or both).
+ */
+export type BrandingConfig = {
+    dark: BrandingModeConfig;
+    light?: BrandingModeConfig;
+} | {
+    dark?: BrandingModeConfig;
+    light: BrandingModeConfig;
+};
 export {};

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './config/factory';
+export * from './config/resolveBrandingTheme';
 export * from './config/types';
 export * from './hooks';
 export * from './types';

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from "./components/index.js";
 export * from "./config/factory.js";
+export * from "./config/resolveBrandingTheme.js";
 export * from "./config/types.js";
 export * from "./hooks/index.js";
 export * from "./types/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/data-browser-library",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A modular React component library for browsing S3 buckets and objects",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -40,7 +40,7 @@
     "react-hook-form": "^7.48.0"
   },
   "peerDependencies": {
-    "@scality/core-ui": ">=0.197.0",
+    "@scality/core-ui": ">=0.198.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-router": ">=7.1.3",