@scality/data-browser-library 1.0.0-preview.11

package/dist/components/ui/FilterFormSection.js

@@ -0,0 +1,159 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FormGroup, FormSection, Stack, Text } from "@scality/core-ui";
+import { convertRemToPixels } from "@scality/core-ui/dist/components/tablev2/TableUtils";
+import { Box, Input, Select } from "@scality/core-ui/dist/next";
+import { ArrayFieldActions } from "./ArrayFieldActions.js";
+const filterTypeOptions = [
+    {
+        value: "none",
+        label: "All objects"
+    },
+    {
+        value: "prefix",
+        label: "Prefix filter"
+    },
+    {
+        value: "tags",
+        label: "Tags filter"
+    },
+    {
+        value: "and",
+        label: "Prefix and tags filter"
+    }
+];
+const shouldShowPrefix = (filterType)=>"prefix" === filterType || "and" === filterType;
+const shouldShowTags = (filterType)=>"tags" === filterType || "and" === filterType;
+function FilterFormSection({ filterType, onFilterTypeChange, prefixRegister, tagFields, tagKeyRegister, tagValueRegister, getTagKeyValue, getTagValueValue, appendTag, removeTag, errors, forceLabelWidth = convertRemToPixels(15) }) {
+    return /*#__PURE__*/ jsxs(FormSection, {
+        title: {
+            name: "Filter"
+        },
+        forceLabelWidth: forceLabelWidth,
+        children: [
+            /*#__PURE__*/ jsx(FormGroup, {
+                label: "Filter",
+                id: "filterType",
+                direction: "horizontal",
+                content: /*#__PURE__*/ jsx(Select, {
+                    id: "filterType",
+                    value: filterType,
+                    onChange: onFilterTypeChange,
+                    children: filterTypeOptions.map((option)=>/*#__PURE__*/ jsx(Select.Option, {
+                            value: option.value,
+                            children: option.label
+                        }, option.value))
+                })
+            }),
+            shouldShowPrefix(filterType) ? /*#__PURE__*/ jsx(FormGroup, {
+                label: "Prefix",
+                id: "prefix",
+                direction: "horizontal",
+                error: errors?.prefix?.message,
+                helpErrorPosition: "bottom",
+                required: "prefix" === filterType,
+                content: /*#__PURE__*/ jsx(Input, {
+                    id: "prefix",
+                    placeholder: "folder/",
+                    ...prefixRegister
+                })
+            }) : /*#__PURE__*/ jsx(Fragment, {}),
+            shouldShowTags(filterType) ? /*#__PURE__*/ jsx(FormGroup, {
+                label: "Tags",
+                id: "tags",
+                direction: "horizontal",
+                error: errors?.tags?.message,
+                helpErrorPosition: "bottom",
+                required: true,
+                content: /*#__PURE__*/ jsxs(Stack, {
+                    direction: "vertical",
+                    gap: "r8",
+                    children: [
+                        /*#__PURE__*/ jsxs(Stack, {
+                            gap: "r8",
+                            children: [
+                                /*#__PURE__*/ jsx(Box, {
+                                    flex: "1",
+                                    children: /*#__PURE__*/ jsx(Text, {
+                                        color: "textSecondary",
+                                        children: "Key"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    flex: "1",
+                                    children: /*#__PURE__*/ jsx(Text, {
+                                        color: "textSecondary",
+                                        children: "Value"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    width: "80px"
+                                })
+                            ]
+                        }),
+                        tagFields.map((field, index)=>/*#__PURE__*/ jsxs(Stack, {
+                                gap: "r8",
+                                children: [
+                                    /*#__PURE__*/ jsx(Input, {
+                                        id: `tag-key-${index}`,
+                                        placeholder: "Key",
+                                        size: "1/2",
+                                        ...tagKeyRegister(index)
+                                    }),
+                                    /*#__PURE__*/ jsx(Input, {
+                                        id: `tag-value-${index}`,
+                                        placeholder: "Value",
+                                        size: "1/2",
+                                        ...tagValueRegister(index)
+                                    }),
+                                    /*#__PURE__*/ jsx(ArrayFieldActions, {
+                                        showAdd: index === tagFields.length - 1,
+                                        onRemove: ()=>removeTag(index),
+                                        onAdd: ()=>appendTag({
+                                                key: "",
+                                                value: ""
+                                            }),
+                                        canRemove: tagFields.length > 1,
+                                        canAdd: !!getTagKeyValue(index) && !!getTagValueValue(index),
+                                        removeLabel: "Remove tag",
+                                        addLabel: "Add tag"
+                                    })
+                                ]
+                            }, field.id))
+                    ]
+                })
+            }) : /*#__PURE__*/ jsx(Fragment, {})
+        ]
+    });
+}
+const createFilterValidationSchema = (Joi)=>({
+        filterType: Joi.string().valid("none", "prefix", "tags", "and").required(),
+        prefix: Joi.when("filterType", {
+            is: "prefix",
+            then: Joi.string().required().min(1).messages({
+                "string.empty": "Prefix is required when using prefix filter",
+                "string.min": "Prefix is required when using prefix filter"
+            }),
+            otherwise: Joi.when("filterType", {
+                is: "and",
+                then: Joi.string().allow("").optional(),
+                otherwise: Joi.any()
+            })
+        }),
+        tags: Joi.when("filterType", {
+            is: Joi.valid("tags", "and"),
+            then: Joi.array().items(Joi.object({
+                key: Joi.string().required().max(128).messages({
+                    "string.empty": "Tag key is required",
+                    "string.max": "Tag key must not exceed 128 characters"
+                }),
+                value: Joi.string().required().max(256).messages({
+                    "string.empty": "Tag value is required",
+                    "string.max": "Tag value must not exceed 256 characters"
+                })
+            })).min(1).messages({
+                "array.min": "At least one tag is required when using tag filter"
+            }),
+            otherwise: Joi.array().optional()
+        })
+    });
+export { FilterFormSection, createFilterValidationSchema };

package/dist/components/ui/Search.elements.d.ts

@@ -0,0 +1,17 @@
+import { IconColor, IconName } from "@scality/core-ui/dist/components/icon/Icon.component";
+export declare const SearchContainer: import("styled-components").StyledComponent<"form", any, {
+    isHidden?: boolean;
+}, never>;
+export declare const SearchInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HintsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HintItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HintsTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+type SearchIcon = {
+    name: IconName;
+    color: IconColor;
+};
+export declare const searchIcon: ({ isMetadata, isError, }: {
+    isMetadata: boolean;
+    isError: boolean;
+}) => SearchIcon;
+export {};

package/dist/components/ui/Search.elements.js

@@ -0,0 +1,59 @@
+import { spacing } from "@scality/core-ui/dist/spacing";
+import styled_components from "styled-components";
+const SearchContainer = styled_components.form`
+  flex: 1 0 auto;
+  display: flex;
+  max-width: 600px;
+  margin-right: ${spacing.r20};
+  visibility: ${(props)=>props.isHidden ? "hidden" : "visible"};
+  gap: ${spacing.r8};
+`;
+const SearchInputContainer = styled_components.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  margin-right: ${spacing.r4};
+  align-items: center;
+`;
+const HintsContainer = styled_components.div`
+  position: absolute;
+  z-index: 1;
+  background-color: ${(props)=>props.theme.backgroundLevel1};
+  padding: ${spacing.r16};
+  margin-top: ${spacing.r40};
+`;
+const HintItem = styled_components.div`
+  padding: ${spacing.r8} ${spacing.r12};
+  cursor: pointer;
+  color: ${(props)=>props.theme.textPrimary};
+  font-size: 0.875rem;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: ${(props)=>props.theme.backgroundLevel2};
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+const HintsTitle = styled_components.div`
+  font-style: italic;
+  padding: ${spacing.r2} 0px ${spacing.r8} ${spacing.r8};
+  color: ${(props)=>props.theme.textSecondary};
+`;
+const searchIcon = ({ isMetadata, isError })=>{
+    if (isError) return {
+        name: "Close",
+        color: "statusCritical"
+    };
+    if (isMetadata) return {
+        name: "Check",
+        color: "statusHealthy"
+    };
+    return {
+        name: "Search",
+        color: "textSecondary"
+    };
+};
+export { HintItem, HintsContainer, HintsTitle, SearchContainer, SearchInputContainer, searchIcon };

package/dist/components/ui/Table.elements.d.ts

@@ -0,0 +1,36 @@
+export declare const Table: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Body: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Group: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const GroupName: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const GroupContent: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Row: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Key: import("styled-components").StyledComponent<"div", any, {
+    principal?: boolean;
+    required?: boolean;
+} & {
+    size?: string;
+}, never>;
+export declare const Value: import("styled-components").StyledComponent<"div", any, {
+    width?: string;
+}, never>;
+export declare const TableContainer: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const GroupValues: import("styled-components").StyledComponent<"div", any, {
+    size?: string;
+}, never>;
+export declare const ExtraCell: import("styled-components").StyledComponent<"div", any, {
+    marginLeft?: string;
+}, never>;

package/dist/components/ui/Table.elements.js

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import { Text, spacing } from "@scality/core-ui";
+import { Box } from "@scality/core-ui/dist/next";
+import styled_components from "styled-components";
+const Table = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
+        height: "100%",
+        overflow: "auto",
+        width: "100%",
+        ...props,
+        children: children
+    });
+const Body = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
+        display: "flex",
+        flexDirection: "column",
+        ...props,
+        children: children
+    });
+const Group = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
+        marginBottom: spacing.r28,
+        ...props,
+        children: children
+    });
+const GroupName = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
+        marginBottom: spacing.r10,
+        ...props,
+        children: /*#__PURE__*/ jsx(Text, {
+            isEmphazed: true,
+            color: "textPrimary",
+            children: children
+        })
+    });
+const GroupContent = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
+        display: "flex",
+        flexDirection: "column",
+        ...props,
+        children: children
+    });
+const Row = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
+        position: "relative",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: spacing.r8,
+        minHeight: spacing.r28,
+        ...props,
+        children: children
+    });
+const RawKey = styled_components.div`
+  color: ${(props)=>props.principal ? props.theme.textPrimary : props.theme?.textSecondary};
+  font-weight: ${(props)=>props.principal ? "bold" : "normal"};
+  ${(props)=>props.required ? `
+        &:after {
+            content: '*';
+        }
+    ` : ""}
+`;
+const Key = styled_components(RawKey)`
+  && {
+    flex: ${(props)=>props.size || "0.35"};
+    min-width: 0;
+  }
+`;
+const Value = styled_components.div`
+  flex: 0.65;
+  flex-direction: column;
+  min-width: 0;
+  color: ${(props)=>props.theme?.textPrimary};
+  width: ${(props)=>props.width};
+`;
+const TableContainer = ({ children, ...props })=>/*#__PURE__*/ jsx(Box, {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        ...props,
+        children: children
+    });
+const GroupValues = styled_components.div`
+  display: flex;
+  flex: ${(props)=>props.size || "0.65"};
+  justify-content: space-between;
+  align-items: center;
+  min-width: 0;
+`;
+const ExtraCell = styled_components.div`
+  margin-left: ${(props)=>props.marginLeft || "1.429rem"};
+`;
+export { Body, ExtraCell, Group, GroupContent, GroupName, GroupValues, Key, Row, Table, TableContainer, Value };

package/dist/config/factory.d.ts

@@ -0,0 +1,63 @@
+import type { S3ClientConfiguration } from "./types";
+import type { S3BrowserConfig, S3Credentials } from "../types";
+import { CoreUIThemeName } from "@scality/core-ui/dist/style/theme";
+interface RuntimeConfig {
+    s3: {
+        endpoint?: string;
+        region: string;
+        forcePathStyle?: boolean;
+    };
+    theme?: CoreUIThemeName;
+    basePath?: string;
+}
+/**
+ * Configuration factory that uses build-time constants
+ * No runtime environment detection or hardcoded values
+ */
+export declare class S3ConfigurationFactory {
+    /**
+     * Load runtime configuration from config.json
+     * Should be called at app startup
+     */
+    static loadRuntimeConfig(configUrl: string): Promise<RuntimeConfig | null>;
+    private static getBuildTimeConfig;
+    /**
+     * Create S3 client configuration based on build-time settings
+     */
+    static createClientConfiguration(credentials: S3Credentials): S3BrowserConfig & {
+        credentials: S3Credentials;
+    };
+    /**
+     * Create proxy middleware configuration
+     */
+    static createProxyConfiguration(): S3ClientConfiguration;
+    /**
+     * Check if proxy middleware should be enabled
+     */
+    static shouldUseProxyMiddleware(): boolean;
+    /**
+     * Get build-time environment info for debugging
+     */
+    static getBuildInfo(): {
+        environment: string;
+        useProxy: boolean;
+        s3Endpoint: string;
+        proxyEndpoint: string | undefined;
+    };
+}
+/**
+ * Convenience functions for common use cases
+ */
+export declare const createS3Config: (credentials: S3Credentials) => S3BrowserConfig & {
+    credentials: S3Credentials;
+};
+export declare const shouldUseProxy: () => boolean;
+export declare const getProxyConfig: () => S3ClientConfiguration;
+export declare const getBuildInfo: () => {
+    environment: string;
+    useProxy: boolean;
+    s3Endpoint: string;
+    proxyEndpoint: string | undefined;
+};
+export declare const loadRuntimeConfig: (configUrl: string) => Promise<RuntimeConfig | null>;
+export {};

package/dist/config/factory.js

@@ -0,0 +1,74 @@
+let runtimeConfig = null;
+class S3ConfigurationFactory {
+    static async loadRuntimeConfig(configUrl) {
+        try {
+            const response = await fetch(configUrl);
+            if (response.ok) {
+                const data = await response.json();
+                runtimeConfig = data;
+                if (runtimeConfig?.s3?.endpoint === "origin") runtimeConfig.s3.endpoint = window.location.origin;
+                console.log("Loaded runtime configuration:", runtimeConfig);
+                return data;
+            }
+            return null;
+        } catch (error) {
+            console.warn("Could not load runtime config, using build-time config:", error);
+            return null;
+        }
+    }
+    static getBuildTimeConfig() {
+        return {
+            s3: __S3_CONFIG__,
+            dev: __DEV_CONFIG__,
+            isDevelopment: __IS_DEVELOPMENT__,
+            isProduction: __IS_PRODUCTION__
+        };
+    }
+    static createClientConfiguration(credentials) {
+        const buildConfig = this.getBuildTimeConfig();
+        const s3Config = buildConfig.isProduction && runtimeConfig?.s3 ? runtimeConfig.s3 : buildConfig.s3;
+        const baseConfig = {
+            credentials,
+            region: s3Config.region,
+            forcePathStyle: s3Config.forcePathStyle ?? true,
+            endpoint: s3Config.endpoint
+        };
+        if (buildConfig.isDevelopment && buildConfig.dev.useProxy && buildConfig.dev.proxyEndpoint) baseConfig.endpoint = buildConfig.dev.proxyEndpoint;
+        return baseConfig;
+    }
+    static createProxyConfiguration() {
+        const buildConfig = this.getBuildTimeConfig();
+        const config = {
+            endpoint: buildConfig.s3.endpoint,
+            region: buildConfig.s3.region,
+            forcePathStyle: buildConfig.s3.forcePathStyle,
+            useProxy: buildConfig.isDevelopment && buildConfig.dev.useProxy
+        };
+        if (config.useProxy) config.proxyConfig = {
+            realHost: buildConfig.s3.realHost,
+            proxyBasePath: buildConfig.dev.proxyBasePath,
+            proxyHost: buildConfig.dev.proxyHost,
+            proxyPort: buildConfig.dev.proxyPort
+        };
+        return config;
+    }
+    static shouldUseProxyMiddleware() {
+        const buildConfig = this.getBuildTimeConfig();
+        return buildConfig.isDevelopment && buildConfig.dev.useProxy;
+    }
+    static getBuildInfo() {
+        const buildConfig = this.getBuildTimeConfig();
+        return {
+            environment: buildConfig.isDevelopment ? "development" : "production",
+            useProxy: buildConfig.dev.useProxy,
+            s3Endpoint: buildConfig.s3.endpoint,
+            proxyEndpoint: buildConfig.dev.proxyEndpoint
+        };
+    }
+}
+const createS3Config = (credentials)=>S3ConfigurationFactory.createClientConfiguration(credentials);
+const shouldUseProxy = ()=>S3ConfigurationFactory.shouldUseProxyMiddleware();
+const getProxyConfig = ()=>S3ConfigurationFactory.createProxyConfiguration();
+const getBuildInfo = ()=>S3ConfigurationFactory.getBuildInfo();
+const loadRuntimeConfig = (configUrl)=>S3ConfigurationFactory.loadRuntimeConfig(configUrl);
+export { S3ConfigurationFactory, createS3Config, getBuildInfo, getProxyConfig, loadRuntimeConfig, shouldUseProxy };

package/dist/config/types.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Build-time configuration types injected by RSBuild
+ */
+export interface S3Configuration {
+    endpoint: string;
+    region: string;
+    realHost: string;
+    forcePathStyle: boolean;
+}
+export interface DevelopmentConfiguration {
+    useProxy: boolean;
+    proxyEndpoint?: string;
+    proxyBasePath: string;
+    proxyHost: string;
+    proxyPort: number;
+}
+export interface BuildTimeConfig {
+    s3: S3Configuration;
+    dev: DevelopmentConfiguration;
+    isDevelopment: boolean;
+    isProduction: boolean;
+}
+/**
+ * Runtime configuration for S3 client
+ */
+export interface S3ClientConfiguration {
+    endpoint: string;
+    region: string;
+    forcePathStyle: boolean;
+    useProxy: boolean;
+    proxyConfig?: {
+        realHost: string;
+        proxyBasePath: string;
+        proxyHost: string;
+        proxyPort: number;
+    };
+}
+/**
+ * Global type declarations for build-time constants
+ */
+declare global {
+    const __S3_CONFIG__: S3Configuration;
+    const __DEV_CONFIG__: DevelopmentConfiguration;
+    const __IS_DEVELOPMENT__: boolean;
+    const __IS_PRODUCTION__: boolean;
+}

package/dist/hooks/__tests__/useISVBucketDetection.test.d.ts

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