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

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,121 +0,0 @@
-// CapUnifiedSelect component using Ant Design v5 Select and TreeSelect directly
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Select, TreeSelect } from 'antd';
-import { SelectWrapper, HeaderWrapper, StyledInfoIcon } from './styles';
-import CapLabel from '../CapLabel';
-import CapTooltip from '../CapTooltip';
-
-function CapUnifiedSelect({
-  type,
-  options = [],
-  treeData,
-  value,
-  onChange,
-  placeholder = 'Select an option',
-  className,
-  style,
-  allowClear = false,
-  showSearch = false,
-  label,
-  tooltip,
-  disabled = false,
-}) {
-  const selectVirtualizationProps = {
-    listHeight: 256,
-  };
-
-  const treeSelectVirtualizationProps = {
-    listHeight: 256,
-    listItemHeight: 32,
-  };
-
-  const renderHeader = () => {
-    if (!label && !tooltip) return null;
-    
-    return (
-      <HeaderWrapper className={disabled ? 'disabled' : ''}>
-        {label && (
-          <CapLabel type="label16" className={disabled ? 'disabled' : ''}>
-            {label}
-          </CapLabel>
-        )}
-        {tooltip && (
-          <CapTooltip title={tooltip}>
-            <StyledInfoIcon className={disabled ? 'disabled' : ''} />
-          </CapTooltip>
-        )}
-      </HeaderWrapper>
-    );
-  };
-
-  const renderDropdown = () => {
-    if (type === 'treeSelect' || type === 'multiTreeSelect') {
-      return (
-        <TreeSelect
-          treeData={treeData || options}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          className={className}
-          style={style}
-          allowClear={allowClear}
-          showSearch={showSearch}
-          multiple={type === 'multiTreeSelect' ? true : false}
-          virtual
-          treeDefaultExpandAll
-          disabled={disabled}
-          {...treeSelectVirtualizationProps}
-        />
-      );
-    }
-
-    return (
-      <Select
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        className={className}
-        style={style}
-        allowClear={allowClear}
-        showSearch={showSearch}
-        options={options}
-        mode={type === 'multiSelect' ? 'multiple' : undefined}
-        virtual
-        disabled={disabled}
-        {...selectVirtualizationProps}
-      />
-    );
-  };
-
-  return (
-    <SelectWrapper>
-      {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,
-  showSearch: PropTypes.bool,
-  label: PropTypes.string,
-  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  disabled: PropTypes.bool,
-};
-
-CapUnifiedSelect.defaultProps = {
-  type: 'select',
-  allowClear: false,
-  showSearch: false,
-};
-
-export default CapUnifiedSelect;

package/CapUnifiedSelect/index.js

@@ -1,4 +0,0 @@
-import CapUnifiedSelect from './CapUnifiedSelect';
-import CapUnifiedSelectLoadable from './loadable';
-
-export default CapUnifiedSelectLoadable; 

package/CapUnifiedSelect/loadable.js

@@ -1,3 +0,0 @@
-import loadable from '@loadable/component';
-
-export default loadable(() => import('./CapUnifiedSelect')); 

package/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/CapUnifiedSelect/styles.js

@@ -1,223 +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 StyledInfoIcon = styled.span`
-  color: ${styledVars.CAP_G2};
-  font-size: 16px;
-  cursor: help;
-
-  &:hover {
-    color: ${styledVars.CAP_G1};
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    &:hover {
-      color: ${styledVars.CAP_G2};
-    }
-  }
-`;
-
-export const selectStyles = css`
-  &.cap-unified-select {
-    width: 100%;
-    font-family: ${styledVars.FONT_FAMILY};
-
-    .ant-select-selector {
-      border-radius: ${styledVars.RADIUS_04};
-      transition: ${styledVars.TRANSITION_ALL};
-      padding: 0 12px;
-      min-height: 32px;
-      display: flex;
-      align-items: center;
-      
-      &:hover {
-        border-color: ${styledVars.CAP_G11};
-      }
-    }
-
-    /* Right slot content styles */
-    .cap-unified-select-right-slot {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-left: 8px;
-    }
-
-    &.ant-select-focused {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_G01} !important;
-        box-shadow: none !important;
-      }
-    }
-
-    /* Error state */
-    &.ant-select-status-error {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_RED};
-      }
-    }
-
-    /* Disabled state */
-    &.ant-select-disabled {
-      .ant-select-selector {
-        background-color: ${styledVars.CAP_G08};
-        cursor: not-allowed;
-      }
-    }
-
-    /* Dropdown styles */
-    .ant-select-dropdown {
-      padding: 4px;
-      border-radius: ${styledVars.RADIUS_04};
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-
-      .ant-select-item {
-        border-radius: ${styledVars.RADIUS_04};
-        padding: 8px 12px;
-        transition: ${styledVars.TRANSITION_ALL};
-
-        &-option-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
-          color: ${styledVars.CAP_PRIMARY.base};
-          font-weight: 500;
-        }
-
-        &-option-active {
-          background-color: ${styledVars.CAP_G08};
-        }
-      }
-
-      /* Search input styles */
-      .ant-select-search {
-        padding: 8px;
-        
-        input {
-          border-radius: ${styledVars.RADIUS_04};
-          transition: ${styledVars.TRANSITION_ALL};
-          
-          &:focus {
-            border-color: ${styledVars.CAP_G01};
-            box-shadow: none;
-          }
-        }
-      }
-    }
-
-    /* Multiple selection styles */
-    &.ant-select-multiple {
-      .ant-select-selection-item {
-        background-color: ${styledVars.CAP_PRIMARY.light};
-        border-color: ${styledVars.CAP_PRIMARY.light};
-        border-radius: ${styledVars.RADIUS_04};
-        color: ${styledVars.CAP_PRIMARY.base};
-        margin: 2px 4px 2px 0;
-        padding: 0 8px;
-        height: 24px;
-        line-height: 22px;
-
-        &-remove {
-          color: ${styledVars.CAP_PRIMARY.base};
-          
-          &:hover {
-            color: ${styledVars.CAP_PRIMARY.hover};
-          }
-        }
-      }
-
-      .ant-select-selection-overflow {
-        flex-wrap: wrap;
-        gap: 4px;
-      }
-    }
-
-    /* Tree select styles */
-    .ant-select-tree {
-      padding: 4px 0;
-
-      .ant-select-tree-node-content-wrapper {
-        padding: 4px 8px;
-        border-radius: ${styledVars.RADIUS_04};
-        transition: ${styledVars.TRANSITION_ALL};
-
-        &:hover {
-          background-color: ${styledVars.CAP_G08};
-        }
-
-        &.ant-select-tree-node-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
-          color: ${styledVars.CAP_PRIMARY.base};
-          font-weight: 500;
-        }
-      }
-
-      .ant-select-tree-switcher {
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
-      }
-
-      .ant-select-tree-checkbox {
-        margin: 4px 8px 4px 0;
-      }
-    }
-
-    /* Size variations */
-    &.ant-select-lg {
-      .ant-select-selector {
-        height: 40px;
-        padding: 0 16px;
-      }
-
-      .ant-select-selection-item {
-        height: 28px;
-        line-height: 26px;
-      }
-    }
-
-    &.ant-select-sm {
-      .ant-select-selector {
-        height: 24px;
-        padding: 0 8px;
-      }
-
-      .ant-select-selection-item {
-        height: 20px;
-        line-height: 18px;
-      }
-    }
-
-    /* Loading state */
-    &.ant-select-loading {
-      .ant-select-arrow {
-        .anticon-loading {
-          color: ${styledVars.CAP_PRIMARY.base};
-        }
-      }
-    }
-  }
-`; 

package/LocaleHoc/index.js

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