@capillarytech/blaze-ui 0.1.6-alpha.28 → 0.1.6-alpha.3

package/components/CapTable/styles.js

@@ -1,134 +0,0 @@
-import { Table } from 'antd';
-import styled from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-const {
-  CAP_G09,
-  CAP_G01,
-  CAP_G06,
-  CAP_G07,
-  CAP_G10,
-  SPACING_16,
-  SPACING_24,
-  FONT_SIZE_S,
-} = styledVars;
-
-export const StyledTable = styled(Table)`
-  &.cap-table-v2 {
-    .ant-table {
-      border: 1px solid ${CAP_G07};
-    }
-  }
-
-  &.show-loader {
-    .ant-table-body > table > tbody::after {
-      content: '${(props) => props.loadMoreData}';
-      display: flex;
-      justify-content: center;
-      position: absolute;
-      width: 100%;
-      align-items: center;
-      height: 60px;
-      text-align: center;
-      font-size: 16px;
-      color: gray;
-      border-top: 1px solid ${CAP_G07};
-    }
-  }
-
-  .ant-table {
-    border: 1px solid ${CAP_G07};
-
-    .ant-table-thead > tr > th {
-      color: ${CAP_G01};
-      font-size: ${FONT_SIZE_S};
-      line-height: ${SPACING_16};
-      background-color: ${CAP_G10};
-      text-align: left;
-    }
-
-    .ant-table-thead > tr > th,
-    .ant-table-tbody > tr > td {
-      padding: ${SPACING_16} ${SPACING_24};
-    }
-
-    .ant-table-tbody > tr > td {
-      border-bottom: 1px solid ${CAP_G07};
-    }
-
-    .ant-table-tbody > tr:last-child > td {
-      border-bottom: none;
-    }
-
-    .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
-    .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
-    .ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,
-    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
-      background-color: ${CAP_G09};
-    }
-
-    .ant-table-thead > tr > th .ant-table-column-sorter-up,
-    .ant-table-thead > tr > th .ant-table-column-sorter-down {
-      &.active {
-        color: ${CAP_G01};
-      }
-      &:not(.active) {
-        color: ${CAP_G06};
-      }
-    }
-
-    .ant-table-thead {
-      .table-children {
-        padding: 6px ${SPACING_24} 16px;
-        position: relative;
-      }
-
-      .table-parent {
-        padding-bottom: 0;
-        padding-left: ${SPACING_24};
-      }
-
-      .table-children.show-separator:not(:last-child)::after {
-        content: '';
-        height: 8px;
-        width: 1px;
-        right: 0;
-        top: 30%;
-        background-color: ${CAP_G07};
-        position: absolute;
-      }
-    }
-
-    .ant-table-thead > tr > th .ant-table-column-sorter {
-      vertical-align: unset;
-    }
-
-    .ant-table-body table {
-      table-layout: fixed;
-      width: 100%;
-    }
-  }
-
-  &.no-pagination-loader {
-    .ant-table-body > table > tbody::after {
-      content: '';
-      height: unset;
-      display: none;
-    }
-  }
-
-  &.hide-hover {
-    .ant-table {
-      .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
-      .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
-      .ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,
-      .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
-        background: none;
-      }
-    }
-  }
-
-  a {
-    color: ${CAP_G01};
-  }
-`;

package/components/CapTestSelect/CapTestSelect.js

@@ -1,47 +0,0 @@
-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

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

package/components/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,374 +0,0 @@
-// 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

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

package/components/CapUnifiedSelect/messages.js

@@ -1,24 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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;
-    }
-  }
-`;