@capillarytech/blaze-ui 0.1.6-alpha.21 → 0.1.6-alpha.23

package/components/CapTestSelect/CapTestSelect.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Select } from 'antd';
+
+/**
+ * Test component to verify Ant Design v5 Select integration
+ * This is a simple wrapper for testing purposes only
+ */
+const CapTestSelect = (props) => {
+  return <Select {...props} />;
+};
+
+CapTestSelect.propTypes = {
+  // Common Select props from antd
+  allowClear: PropTypes.bool,
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+  ]),
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  mode: PropTypes.oneOf(['multiple', 'tags']),
+  placeholder: PropTypes.string,
+  showSearch: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+  ]),
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      disabled: PropTypes.bool
+    })
+  )
+};
+
+CapTestSelect.defaultProps = {
+  allowClear: false,
+  disabled: false,
+  loading: false,
+  showSearch: false
+};
+
+export default CapTestSelect; 

package/components/CapTestSelect/index.js

@@ -0,0 +1 @@
+export { default } from './CapTestSelect'; 

package/components/CapUnifiedSelect/CapUnifiedSelect.js

@@ -0,0 +1,374 @@
+// Enhanced CapUnifiedSelect supporting 4 scenarios with advanced features
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Select, TreeSelect, Tooltip, Input, Button } from 'antd';
+import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from '@ant-design/icons';
+import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
+import withStyles from '../../utils/withStyles';
+import styled from 'styled-components';
+
+const CapUnifiedSelect = ({
+  type,
+  options = [],
+  treeData,
+  value,
+  onChange,
+  placeholder = 'Select an option',
+  className,
+  style,
+  status,
+  statusMessage,
+  allowClear = false,
+  label,
+  tooltip,
+  disabled = false,
+  treeCheckable = false,
+  customPopupRender = false,
+  onConfirm,
+  onCancel
+}) => {
+  const StyledSelect = styled(Select)`
+    ${selectStyles}
+  `;
+  const StyledTreeSelect = styled(TreeSelect)`
+    ${selectStyles}
+  `;
+
+  const [searchText, setSearchText] = useState('');
+  const [tempValue, setTempValue] = useState(value);
+  const [allSelected, setAllSelected] = useState(false);
+  
+  // Update tempValue when value changes
+  useEffect(() => {
+    setTempValue(value);
+  }, [value]);
+ 
+  const selectVirtualizationProps = {
+    listHeight: 256,
+  };
+
+  const treeSelectVirtualizationProps = {
+    listHeight: 256,
+    listItemHeight: 32,
+  };
+
+  // No results component
+  const NoResult = () => (
+    <div style={{
+      display: 'flex', 
+      flexDirection: 'column', 
+      alignItems: 'center', 
+      justifyContent: 'center',
+      height: 200, 
+      color: '#8c8c8c', 
+      fontSize: 14
+    }}>
+      <WarningFilled style={{ fontSize: 36, marginBottom: 8, color: '#bfbfbf' }} />
+      <div style={{ fontWeight: 500 }}>No results found</div>
+    </div>
+  );
+
+  // Filter tree data based on search text
+  const getFilteredTreeData = (data, search) => {
+    if (!search) return data;
+    
+    const filterNode = node => {
+      const titleText = node.title?.toLowerCase() || '';
+      const labelText = node.label?.toLowerCase() || '';
+      return titleText.includes(search.toLowerCase()) || labelText.includes(search.toLowerCase());
+    };
+    
+    const loop = data =>
+      data.map(item => {
+        const children = item.children ? loop(item.children) : [];
+        if (filterNode(item) || children.length) {
+          return { ...item, children };
+        }
+        return null;
+      }).filter(Boolean);
+      
+    return loop(data);
+  };
+
+  // Get all leaf node values from tree data
+  const flattenedLeafValues = (nodes) =>
+    nodes?.flatMap((node) =>
+      node.children ? flattenedLeafValues(node.children) : [node.value]
+    ) || [];
+
+  const filteredTree = getFilteredTreeData(treeData || options, searchText);
+  const filteredOptions = !searchText ? options : options.filter(opt => 
+    opt.label?.toLowerCase().includes(searchText.toLowerCase())
+  );
+  
+  // All available leaf values for the current filtered tree data
+  const leafValues = flattenedLeafValues(filteredTree);
+
+  // Handles select all checkbox click
+  const handleSelectAll = (isTree = false) => {
+    const availableValues = isTree ? leafValues : filteredOptions.map(opt => opt.value);
+    
+    if (allSelected) {
+      setTempValue([]);
+    } else {
+      setTempValue(availableValues);
+    }
+    
+    setAllSelected(!allSelected);
+  };
+  
+  // Update allSelected state when value changes
+  useEffect(() => {
+    const isMultipleMode = type === 'multiSelect' || type === 'multiTreeSelect';
+    if (isMultipleMode && Array.isArray(tempValue)) {
+      const availableValues = type.includes('tree') ? leafValues : filteredOptions.map(opt => opt.value);
+      setAllSelected(tempValue.length > 0 && tempValue.length === availableValues.length);
+    }
+  }, [tempValue, filteredOptions, leafValues, type]);
+  
+  // Handle confirmation
+  const handleConfirm = () => {
+    if (onConfirm) {
+      onConfirm(tempValue);
+    } else {
+      onChange(tempValue);
+    }
+    setSearchText('');
+  };
+  
+  // Handle cancellation
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    }
+    setTempValue(value);
+    setSearchText('');
+  };
+  
+  // Handle temporary value change
+  const handleTempChange = (newValue) => {
+    setTempValue(newValue);
+  };
+
+  const suffix =
+  (type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 1 ? (
+    <>
+      <span>
+        +{value.length - 1} more
+        <DownOutlined />
+      </span>
+    </>
+  ) : (
+    <DownOutlined />
+  );
+
+  const prefix = () => {
+    if((type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 0) {
+      const selectedLabels = options
+      .filter((opt) => value.includes(opt.value))
+      .map((opt) => opt.label);
+
+      return selectedLabels[0];
+    } else {
+      return null;
+    }
+  }
+
+  const renderHeader = () => {
+    if (!label && !tooltip) return null;
+    return (
+      <HeaderWrapper className={disabled ? 'disabled' : ''}>
+        {label && <label type="label16" className={disabled ? 'disabled' : ''}>{label}</label>}
+        {tooltip && (
+          <Tooltip title={tooltip}>
+            <InfoCircleOutlined className={disabled ? 'disabled' : ''} style={{ color: '#B3BAC5' }}/>
+          </Tooltip>
+        )}
+      </HeaderWrapper>
+    );
+  };
+
+  const renderDropdown = () => {
+    const isMultipleSelect = type === 'multiSelect' || type === 'multiTreeSelect';
+    const isTreeMode = type === 'treeSelect' || type === 'multiTreeSelect';
+    const currentItems = isTreeMode ? filteredTree : filteredOptions;
+    const selectedCount = Array.isArray(tempValue) ? tempValue.length : (tempValue ? 1 : 0);
+    
+    // Custom dropdown render for both Select and TreeSelect
+    const renderCustomDropdown = (menu) => {
+      if (!customPopupRender) return menu;
+      
+      return (
+        <>
+          <div style={{ borderBottom: '1px solid #f0f0f0'}}>
+            <Input
+              prefix={<SearchOutlined style={{ color: "#B3BAC5" }} />}
+              placeholder="Search"
+              variant="borderless"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+          
+          {isMultipleSelect && currentItems.length > 0 && (
+            <div style={{
+              padding: '8px 12px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              borderBottom: '1px solid #f0f0f0'
+            }} 
+            onClick={(e) => {
+              // Prevent event propagation to keep dropdown open
+              e.stopPropagation();
+              handleSelectAll(isTreeMode);
+            }}>
+              <input 
+                type="checkbox" 
+                checked={allSelected} 
+                readOnly 
+                style={{ cursor: 'pointer' }}
+                onClick={(e) => e.stopPropagation()}
+              />
+              <label style={{ marginLeft: 8, cursor: 'pointer' }}>Select all</label>
+            </div>
+          )}
+          
+          {currentItems.length === 0 ? <NoResult /> : menu}
+          
+          {currentItems.length > 0 && isMultipleSelect && (
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: '8px 12px',
+              borderTop: '1px solid #f0f0f0'
+            }}>
+              <div>
+                <Button 
+                  type="primary" 
+                  size="small" 
+                  style={{ marginRight: 8 }} 
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleConfirm();
+                  }}>
+                  Confirm
+                </Button>
+                <Button 
+                  type="text" 
+                  size="small" 
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleCancel();
+                  }}>
+                  Cancel
+                </Button>
+              </div>
+              {selectedCount > 0 && (
+                <span style={{ color: '#8c8c8c', fontSize: '14px' }}>
+                  {selectedCount} selected
+                </span>
+              )}
+            </div>
+          )}
+        </>
+      );
+    };
+
+    if (type === 'treeSelect' || type === 'multiTreeSelect') {
+      return (
+        <>
+          <StyledTreeSelect
+            treeData={filteredTree}
+            value={customPopupRender ? tempValue : value}
+            onChange={customPopupRender ? handleTempChange : onChange}
+            placeholder={placeholder}
+            maxTagCount={0}
+            maxTagPlaceholder={() => null} 
+            prefix={type === "multiTreeSelect" && value.length > 0 && prefix()}
+            suffixIcon={suffix}
+            className={classnames(`cap-unified-tree-select ${className || ''}`)}
+            style={style}
+            status={status}
+            allowClear={allowClear}
+            showSearch={false}
+            multiple={type === 'multiTreeSelect'}
+            treeCheckable={treeCheckable}
+            showCheckedStrategy={TreeSelect.SHOW_PARENT}
+            virtual
+            disabled={disabled}
+            filterTreeNode={false}
+            {...treeSelectVirtualizationProps}
+            popupRender={renderCustomDropdown}
+            />
+            {status === 'error' && <div style={{ color: '#E83135' }} className="cap-unified-select-status">{statusMessage}</div>}
+        </>
+      );
+    }
+
+    return (
+      <>
+        <StyledSelect
+          options={filteredOptions}
+          value={customPopupRender ? tempValue : value}
+          onChange={customPopupRender ? handleTempChange : onChange}
+          placeholder={placeholder}
+          maxTagCount={0}
+          maxTagPlaceholder={() => null} 
+          prefix={type === "multiSelect" && value.length > 0 && prefix()}
+          suffixIcon={suffix}
+          className={classnames('cap-unified-select', className)}
+          style={style}
+          allowClear={allowClear}
+          showSearch={false}
+          mode={type === 'multiSelect' ? 'multiple' : undefined}
+          virtual
+          disabled={disabled}
+          status={status}
+          {...selectVirtualizationProps}
+          popupRender={renderCustomDropdown}
+        />
+        {status === 'error' && <div style={{ color: '#E83135' }} className="cap-unified-select-status">{statusMessage}</div>}
+      </>
+    );
+  }; 
+
+  return (
+    <SelectWrapper className={classnames(`cap-unified-select-container ${className || ''}`)}>
+      {renderHeader()}
+      {renderDropdown()}
+    </SelectWrapper>
+  );
+};
+
+CapUnifiedSelect.propTypes = {
+  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
+  options: PropTypes.array,
+  treeData: PropTypes.array,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  allowClear: PropTypes.bool,
+  label: PropTypes.string,
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  disabled: PropTypes.bool,
+  treeCheckable: PropTypes.bool,
+  customPopupRender: PropTypes.bool,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+CapUnifiedSelect.defaultProps = {
+  type: 'select',
+  allowClear: false,
+  customPopupRender: false,
+  treeCheckable: false,
+  className: '',
+};
+
+export default withStyles(CapUnifiedSelect, selectStyles);

package/components/CapUnifiedSelect/index.js

@@ -0,0 +1 @@
+export { default } from './CapUnifiedSelect'; 

package/components/CapUnifiedSelect/messages.js

@@ -0,0 +1,24 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  selectPlaceholder: {
+    id: 'cap.unified.select.placeholder',
+    defaultMessage: 'Select an option',
+  },
+  searchPlaceholder: {
+    id: 'cap.unified.select.search.placeholder',
+    defaultMessage: 'Search...',
+  },
+  noData: {
+    id: 'cap.unified.select.no.data',
+    defaultMessage: 'No data',
+  },
+  loading: {
+    id: 'cap.unified.select.loading',
+    defaultMessage: 'Loading...',
+  },
+  selected: {
+    id: 'cap.unified.select.selected',
+    defaultMessage: '{count} items selected',
+  },
+}); 

package/components/CapUnifiedSelect/styles.js

@@ -0,0 +1,111 @@
+import styled, { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const SelectWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export const DropdownFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-top: 1px solid #f0f0f0;
+  
+  .footer-buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .total-count {
+    color: #8c8c8c;
+    font-size: 12px;
+  }
+`;
+
+export const SearchInputWrapper = styled.div`
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+`;
+
+export const SelectAllCheckbox = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 1px solid #f0f0f0;
+  user-select: none;
+  
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
+`;
+
+export const NoResultWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #8c8c8c;
+  font-size: 14px;
+`;
+
+
+
+export const StyledInfoIcon = styled.span`
+  color: ${styledVars.CAP_G05};
+  font-size: 16px;
+  cursor: help;
+  margin-left: 4px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: ${styledVars.CAP_G03};
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    &:hover {
+      color: ${styledVars.CAP_G05};
+    }
+  }
+`;
+
+export const selectStyles = css`
+  &.cap-unified-select {
+    width: 100%;
+    font-family: ${styledVars.FONT_FAMILY};
+
+  }
+  &.cap-unified-select-container {
+    .ant-select-prefix{
+      margin-left: -5px !important;
+      font-size: 14px !important;
+      font-weight: 400 !important;
+      color: #091E42 !important;
+      line-height: 20px !important;
+    }
+  }
+`; 

package/components/LocaleHoc/index.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { injectIntl } from 'react-intl';
+import enTranslation from '../translations/en';
+
+const prefix = `blaze.components`;
+
+const LocaleHoc = (WrapperComponent, customProps) => {
+  const Wrapper = (props) => {
+    const componentName = customProps.key;
+    const translatedDefaults = enTranslation[componentName];
+    const { intl } = props;
+
+    const translatedProps = useMemo(() => {
+      if(!translatedDefaults) return {};
+      return Object.keys(translatedDefaults).reduce((acc, key) => {
+        const id = `${prefix}.${componentName}.${key}`
+        const defaultMessage = translatedDefaults[key]
+        try{
+          acc[key] = intl.formatMessage({ id, defaultMessage });
+        }catch(err){
+          acc[key] = defaultMessage;
+        }
+        return acc;
+      }, {});
+    }, [translatedDefaults, intl]);
+
+    return (
+      <WrapperComponent
+        {...translatedProps}
+        {...props}
+      />
+    );
+  }
+
+  return injectIntl(Wrapper);
+};
+
+export default LocaleHoc; 

package/components/index.js

@@ -0,0 +1,14 @@
+// Import and export all components
+export { default as CapInput } from './CapInput';
+export { default as CapTable } from './CapTable';
+export { default as CapTestSelect } from './CapTestSelect';  // Test component for Ant Design v5 integration
+
+// Export utilities
+export { default as LocaleHoc } from './LocaleHoc';
+
+// Export styled utilities
+export * as styledVars from './styled/variables';
+export { default as styled } from './styled';
+
+// Export utils
+export * from '../utils'; 

package/components/styled/index.js

@@ -0,0 +1,6 @@
+import * as styledVars from './variables';
+
+export default styledVars;
+
+// Re-export all variables for easier access
+export * from './variables';