@capillarytech/blaze-ui 0.1.6-alpha.1 → 0.1.6-alpha.10

package/CapIcon/CapIcon.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as AntIcons from '@ant-design/icons';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import * as styledVars from '../styled/variables';
+
+const getFontSizeFromProps = (size) => {
+  switch (size) {
+    case 'xs':
+      return styledVars.ICON_SIZE_XS;
+    case 's':
+      return styledVars.ICON_SIZE_S;
+    case 'm':
+      return styledVars.ICON_SIZE_M;
+    case 'l':
+      return styledVars.ICON_SIZE_L;
+    default:
+      return styledVars.ICON_SIZE_M;
+  }
+};
+
+const IconWrapper = styled.span`
+  font-size: ${props => getFontSizeFromProps(props.size)};
+  color: ${props => props.color || 'inherit'};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  opacity: ${props => props.disabled ? 0.5 : 1};
+  transition: all 0.3s;
+
+  &:hover {
+    opacity: ${props => props.disabled ? 0.5 : 0.8};
+  }
+`;
+
+const CapIcon = ({
+  type,
+  className,
+  disabled,
+  size = 'm',
+  color,
+  ...rest
+}) => {
+  // Convert type to AntD icon name (e.g., 'close' -> 'CloseOutlined')
+  const getIconComponent = (iconType) => {
+    const iconMap = {
+      'close': AntIcons.CloseOutlined,
+      'chevron-down': AntIcons.DownOutlined,
+      'tick': AntIcons.CheckOutlined,
+      'info': AntIcons.InfoCircleOutlined,
+      // Add more icon mappings as needed
+    };
+    return iconMap[iconType] || AntIcons[iconType];
+  };
+
+  const IconComponent = getIconComponent(type);
+
+  if (!IconComponent) {
+    console.warn(`Icon type "${type}" not found`);
+    return null;
+  }
+
+  return (
+    <IconWrapper
+      className={classNames('cap-icon', className, { disabled })}
+      disabled={disabled}
+      size={size}
+      color={color}
+      {...rest}
+    >
+      <IconComponent />
+    </IconWrapper>
+  );
+};
+
+CapIcon.propTypes = {
+  type: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
+  color: PropTypes.string,
+};
+
+export default CapIcon;

package/CapIcon/index.js

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

package/CapSelect/CapSelect.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Select } from 'antd';
+import { CloseOutlined, DownOutlined, CheckOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import ComponentWithLabelHOC from '../hoc/ComponentWithLabelHOC';
+import { SelectWrapper } from './styles';
+
+const CapSelect = ({
+  componentClassName,
+  dropdownClassName,
+  options,
+  propToBeMadeLabel,
+  getMenuOptionsProps = () => ({}),
+  ...rest
+}) => {
+  const items = options.map(option => ({
+    ...option,
+    key: option.value,
+    label: option.label,
+    title: option[propToBeMadeLabel] || option.label,
+    ...getMenuOptionsProps(option)
+  }));
+
+  return (
+    <SelectWrapper>
+      <Select
+        removeIcon={<CloseOutlined />}
+        suffixIcon={<DownOutlined />}
+        menuItemSelectedIcon={<CheckOutlined />}
+        dropdownClassName={classNames('cap-select-dropdown', dropdownClassName)}
+        className={classNames('cap-select', componentClassName)}
+        options={items}
+        {...rest}
+      />
+    </SelectWrapper>
+  );
+};
+
+CapSelect.defaultProps = {
+  size: 'large',
+  getMenuOptionsProps: () => ({}),
+};
+
+CapSelect.propTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  labelPosition: PropTypes.string,
+  errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  className: PropTypes.string,
+  componentClassName: PropTypes.string,
+  dropdownClassName: PropTypes.string,
+  isRequired: PropTypes.bool,
+  inductiveText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  options: PropTypes.array.isRequired,
+  size: PropTypes.string,
+  getMenuOptionsProps: PropTypes.func,
+  propToBeMadeLabel: PropTypes.string,
+};
+
+const CapSelectWithLabel = ComponentWithLabelHOC(CapSelect);
+
+export default CapSelectWithLabel;

package/CapSelect/index.js

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

package/CapSelect/styles.js

@@ -0,0 +1,119 @@
+import styled from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const SelectWrapper = styled.div`
+  .cap-select {
+    width: 100%;
+    font-family: ${styledVars.FONT_FAMILY};
+
+    .ant-select-arrow {
+      right: 4px;
+      margin-top: 0;
+      transform: translateY(-50%);
+      color: ${styledVars.CAP_G01};
+
+      .ant-select-arrow-icon {
+        line-height: 16px;
+      }
+    }
+
+    &.ant-select-open .ant-select-arrow-icon svg {
+      transform: none;
+    }
+
+    .ant-select-selector {
+      border: 1px solid ${styledVars.CAP_G06};
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: ${styledVars.CAP_G11};
+      }
+    }
+
+    &.ant-select-disabled {
+      .ant-select-selector {
+        background-color: ${styledVars.CAP_G08};
+        border-color: ${styledVars.CAP_G07};
+      }
+    }
+
+    .ant-select-selection-placeholder {
+      color: ${styledVars.CAP_G04};
+      font-size: ${styledVars.FONT_SIZE_M};
+    }
+
+    &.ant-select-multiple {
+      .ant-select-selection-item {
+        background-color: ${styledVars.CAP_G08};
+        border: none;
+        border-radius: ${styledVars.RADIUS_04};
+        padding: 0 25px 0 8px;
+        margin: 2px 4px 2px 0;
+        font-size: ${styledVars.FONT_SIZE_S};
+      }
+
+      .ant-select-selection-item-remove {
+        color: ${styledVars.CAP_G04};
+        &:hover {
+          color: ${styledVars.CAP_G01};
+        }
+      }
+    }
+
+    &.ant-select-focused:not(.ant-select-disabled) {
+      .ant-select-selector {
+        border-color: ${styledVars.CAP_G01};
+        box-shadow: none;
+      }
+    }
+
+    .ant-select-clear {
+      right: 6px;
+      background: transparent;
+      color: ${styledVars.CAP_G04};
+      &:hover {
+        color: ${styledVars.CAP_G01};
+      }
+    }
+  }
+
+  .cap-select-dropdown {
+    .ant-select-item {
+      padding: 8px 12px;
+      color: ${styledVars.FONT_COLOR_02};
+
+      &:hover {
+        background-color: ${styledVars.CAP_G08};
+      }
+
+      &-option-selected {
+        background-color: ${styledVars.CAP_SECONDARY.light};
+        color: ${styledVars.CAP_SECONDARY.base};
+        font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+        position: relative;
+
+        &::before {
+          content: " ";
+          width: 2px;
+          height: 100%;
+          left: 0;
+          top: 0;
+          position: absolute;
+          background-color: ${styledVars.CAP_SECONDARY.base};
+        }
+      }
+
+      &-option-active {
+        background-color: ${styledVars.CAP_G08};
+      }
+    }
+
+    &.ant-select-dropdown-multiple {
+      .ant-select-item-option-selected {
+        .ant-select-item-option-state {
+          color: ${styledVars.CAP_SECONDARY.base};
+        }
+      }
+    }
+  }
+`;

package/CapTable/CapTable.js

@@ -9,8 +9,7 @@ import React, { useEffect, useCallback, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 import classNames from 'classnames';
-import { withStyles } from '@capillarytech/vulcan-react-sdk/utils';
-import styles, { StyledTable } from './styles';
+import { StyledTable } from './styles';
 import LocaleHoc from '../LocaleHoc';
 
 const SCROLL_THRESHOLD = 80; // Percentage of scroll to trigger load
@@ -144,4 +143,4 @@ CapTable.propTypes = {
   showLoader: PropTypes.bool,
 };
 
-export default LocaleHoc(withStyles(CapTable, styles), { key: 'CapTable' });
+export default LocaleHoc(CapTable, { key: 'CapTable' });

package/CapTable/styles.js

@@ -1,6 +1,5 @@
 import { Table } from 'antd';
-import styled, { css } from 'styled-components';
-
+import styled from 'styled-components';
 import * as styledVars from '../styled/variables';
 
 const {
@@ -36,8 +35,7 @@ export const StyledTable = styled(Table)`
       border-top: 1px solid ${CAP_G07};
     }
   }
-`;
-export default css`
+
   .ant-table {
     border: 1px solid ${CAP_G07};
 
@@ -121,12 +119,8 @@ export default css`
 
   &.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.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;

package/CapTreeSelect/CapTreeSelect.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TreeSelect } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import CapRow from '../CapRow';
+import CapHeading from '../CapHeading';
+import CapLabel from '../CapLabel';
+import CapTooltip from '../CapTooltip';
+import CapInfoNote from '../CapInfoNote';
+import { TreeSelectWrapper, CustomRow } from './styles';
+
+const CapTreeSelect = ({
+  treeData,
+  className,
+  headerTitle,
+  headerDescription,
+  treeSelectSideLabel,
+  disabledTooltip,
+  infoNote,
+  noteText,
+  infoNoteWidth,
+  ...rest
+}) => {
+  const renderTreeSelect = () => (
+    <TreeSelect
+      treeData={treeData}
+      className={classNames('cap-tree-select', className)}
+      style={{ width: '100%' }}
+      switcherIcon={<DownOutlined />}
+      {...rest}
+    />
+  );
+
+  return (
+    <TreeSelectWrapper className="cap-tree-select-container">
+      {headerTitle && (
+        <CapHeading type="h3">
+          {headerTitle}
+        </CapHeading>
+      )}
+      {headerDescription && (
+        <CapLabel type="label3" className="margin-t-4">
+          {headerDescription}
+        </CapLabel>
+      )}
+      {infoNote && (
+        <CapInfoNote
+          message={infoNote}
+          style={{ width: infoNoteWidth || '60%' }}
+          noteText={noteText}
+        />
+      )}
+      <CustomRow className="margin-t-4">
+        {treeSelectSideLabel && (
+          <CapHeading type="h4" className="margin-r-12">
+            {treeSelectSideLabel}
+          </CapHeading>
+        )}
+        {disabledTooltip ? (
+          <CapTooltip title={disabledTooltip}>
+            <div style={{ width: '100%' }}>
+              {renderTreeSelect()}
+            </div>
+          </CapTooltip>
+        ) : (
+          renderTreeSelect()
+        )}
+      </CustomRow>
+    </TreeSelectWrapper>
+  );
+};
+
+CapTreeSelect.propTypes = {
+  treeData: PropTypes.array.isRequired,
+  className: PropTypes.string,
+  headerTitle: PropTypes.node,
+  headerDescription: PropTypes.node,
+  treeSelectSideLabel: PropTypes.node,
+  disabledTooltip: PropTypes.node,
+  infoNote: PropTypes.node,
+  noteText: PropTypes.string,
+  infoNoteWidth: PropTypes.string,
+};
+
+export default CapTreeSelect;

package/CapTreeSelect/index.js

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

package/CapTreeSelect/styles.js

@@ -0,0 +1,122 @@
+import styled from 'styled-components';
+import CapRow from '../CapRow';
+import * as styledVars from '../styled/variables';
+
+export const TreeSelectWrapper = styled.div`
+  .cap-tree-select {
+    width: 100%;
+    font-family: ${styledVars.FONT_FAMILY};
+
+    .ant-select-selector {
+      border: 1px solid ${styledVars.CAP_G06};
+      border-radius: ${styledVars.RADIUS_04};
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: ${styledVars.CAP_G11};
+      }
+    }
+
+    &.ant-select-disabled {
+      .ant-select-selector {
+        background-color: ${styledVars.CAP_G08};
+        border-color: ${styledVars.CAP_G07};
+      }
+    }
+
+    .ant-select-selection-placeholder {
+      color: ${styledVars.CAP_G04};
+    }
+
+    &.ant-select-focused:not(.ant-select-disabled) {
+      .ant-select-selector {
+        border-color: ${styledVars.CAP_G01};
+        box-shadow: none;
+      }
+    }
+
+    /* Tree Node Styles */
+    .ant-select-tree {
+      .ant-select-tree-node-content-wrapper {
+        padding: 4px 8px;
+        border-radius: ${styledVars.RADIUS_04};
+        transition: all 0.3s;
+
+        &:hover {
+          background-color: ${styledVars.CAP_G08};
+        }
+
+        &.ant-select-tree-node-selected {
+          background-color: ${styledVars.CAP_SECONDARY.light};
+          color: ${styledVars.CAP_SECONDARY.base};
+          font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+        }
+      }
+
+      .ant-select-tree-switcher {
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        color: ${styledVars.CAP_G04};
+
+        &:hover {
+          color: ${styledVars.CAP_G01};
+        }
+      }
+
+      .ant-select-tree-checkbox {
+        margin: 4px 8px 4px 0;
+
+        &-inner {
+          border-radius: 2px;
+          border-color: ${styledVars.CAP_G04};
+        }
+
+        &-checked .ant-select-tree-checkbox-inner {
+          background-color: ${styledVars.CAP_SECONDARY.base};
+          border-color: ${styledVars.CAP_SECONDARY.base};
+        }
+
+        &-indeterminate .ant-select-tree-checkbox-inner {
+          background-color: ${styledVars.CAP_WHITE};
+          border-color: ${styledVars.CAP_SECONDARY.base};
+          &::after {
+            background-color: ${styledVars.CAP_SECONDARY.base};
+          }
+        }
+      }
+
+      .ant-select-tree-treenode {
+        padding: 0 4px;
+        
+        &.ant-select-tree-treenode-disabled {
+          color: ${styledVars.CAP_G06};
+          cursor: not-allowed;
+
+          .ant-select-tree-node-content-wrapper {
+            color: ${styledVars.CAP_G06};
+          }
+        }
+      }
+    }
+  }
+
+  /* Spacing Classes */
+  .margin-t-4 {
+    margin-top: 4px;
+  }
+
+  .margin-r-12 {
+    margin-right: 12px;
+  }
+`;
+
+export const CustomRow = styled(CapRow)`
+  display: flex;
+  align-items: center;
+
+  &.ant-row {
+    display: flex;
+    align-items: center;
+  }
+`;

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,12 +1,11 @@
 // 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';
+import CapSelect from '../CapSelect';
+import CapTreeSelect from '../CapTreeSelect';
+import { SelectWrapper } from './styles';
 
-function CapUnifiedSelect({
+const CapUnifiedSelect = ({
   type,
   options = [],
   treeData,
@@ -20,7 +19,8 @@ function CapUnifiedSelect({
   label,
   tooltip,
   disabled = false,
-}) {
+  props,
+}) => {
   const selectVirtualizationProps = {
     listHeight: 256,
   };
@@ -30,67 +30,42 @@ function CapUnifiedSelect({
     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 = () => {
+    const commonProps = {
+      value,
+      onChange,
+      placeholder,
+      className,
+      style,
+      allowClear,
+      showSearch,
+      disabled,
+      label,
+      ...props
+    };
 
-  const renderDropdown = () => {
     if (type === 'treeSelect' || type === 'multiTreeSelect') {
       return (
-        <TreeSelect
+        <CapTreeSelect
+          {...commonProps}
           treeData={treeData || options}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          className={className}
-          style={style}
-          allowClear={allowClear}
-          showSearch={showSearch}
-          multiple={type === 'multiTreeSelect' ? true : false}
-          virtual
+          multiple={type === 'multiTreeSelect'}
           treeDefaultExpandAll
-          disabled={disabled}
-          {...treeSelectVirtualizationProps}
         />
       );
     }
 
     return (
-      <Select
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        className={className}
-        style={style}
-        allowClear={allowClear}
-        showSearch={showSearch}
+      <CapSelect
+        {...commonProps}
         options={options}
         mode={type === 'multiSelect' ? 'multiple' : undefined}
-        virtual
-        disabled={disabled}
-        {...selectVirtualizationProps}
       />
     );
   };
 
   return (
     <SelectWrapper>
-      {renderHeader()}
       {renderDropdown()}
     </SelectWrapper>
   );

package/CapUnifiedSelect/index.js

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