@capillarytech/blaze-ui 0.1.4-alpha.5 → 0.1.5

package/CapInput/index.js

@@ -1,11 +1,10 @@
 import CapInput from './CapInput';
+import Number from './Number';
 import Search from './Search';
 import TextArea from './TextArea';
-import Number from './Number';
 
-// Attach subcomponents to the main component
+CapInput.Number = Number;
 CapInput.Search = Search;
 CapInput.TextArea = TextArea;
-CapInput.Number = Number;
 
-export default CapInput; 
+export default CapInput;

package/CapInput/loadable.js

@@ -4,6 +4,6 @@
 
 import { loadable } from '@capillarytech/cap-ui-utils';
 
-const CapInputLoadable = loadable(() => import('./index'));
+const CapInputLoadable = loadable(() => import('./CapInput'));
 
 export default CapInputLoadable; 

package/CapTable/CapTable.js

@@ -0,0 +1,147 @@
+/**
+ * CapTable - Migrated to Ant Design v5
+ * A table component that supports:
+ * - Infinite scrolling with virtualization
+ * - Sequential data loading
+ * - Optimized scroll performance
+ */
+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 LocaleHoc from '../LocaleHoc';
+
+const SCROLL_THRESHOLD = 80; // Percentage of scroll to trigger load
+const DEBOUNCE_DELAY = 250; // ms to wait between scroll events
+const DEFAULT_ROW_HEIGHT = 54;
+const DEFAULT_SCROLL_HEIGHT = 400;
+
+const CapTable = ({
+  id,
+  className,
+  children,
+  infiniteScroll,
+  pagination,
+  dataSource,
+  offset_limit,
+  setPagination,
+  scroll,
+  showLoader,
+  ...rest
+}) => {
+  const scrollRef = useRef(null);
+  const [hasMore, setHasMore] = useState(true);
+  const currentOffsetRef = useRef(0);
+
+  const loadMore = useCallback(() => {
+    if (!showLoader && hasMore) {
+      const nextOffset = currentOffsetRef.current + 1;
+      const newOffsetLimit = {
+        ...offset_limit,
+        offset: nextOffset
+      };
+      
+      currentOffsetRef.current = nextOffset;
+      setPagination(newOffsetLimit);
+    }
+  }, [showLoader, hasMore, setPagination, offset_limit]);
+
+  const handleScroll = useCallback(
+    debounce((event) => {
+      const target = event.target;
+      if (!target || !infiniteScroll || !hasMore || showLoader) return;
+
+      const scrollTop = Math.ceil(target.scrollTop);
+      const visibleHeight = target.clientHeight;
+      const totalHeight = target.scrollHeight;
+      
+      const scrolledPercentage = (scrollTop + visibleHeight) / totalHeight * 100;
+
+      if (scrolledPercentage >= SCROLL_THRESHOLD) {
+        loadMore();
+      }
+    }, DEBOUNCE_DELAY),
+    [infiniteScroll, showLoader, hasMore, loadMore]
+  );
+
+  // Setup scroll listener and handle initial load
+  useEffect(() => {
+    const tableBody = document.querySelector(`#${id} .ant-table-body`);
+    if (!tableBody) return;
+
+    scrollRef.current = tableBody;
+    tableBody.addEventListener('scroll', handleScroll, { passive: true });
+    
+    // Check if initial load needed
+    const shouldLoadInitially = tableBody.scrollHeight <= tableBody.clientHeight 
+      && !showLoader 
+      && hasMore;
+
+    if (shouldLoadInitially) {
+      currentOffsetRef.current = 0;
+      loadMore();
+    }
+
+    // Cleanup
+    return () => {
+      scrollRef.current?.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel();
+    };
+  }, [id, handleScroll, showLoader, hasMore, loadMore]);
+
+  // Handle data changes
+  useEffect(() => {
+    if (!dataSource?.length) {
+      currentOffsetRef.current = 0;
+      setHasMore(true);
+    } else {
+      setHasMore(true);
+    }
+  }, [dataSource]);
+
+  const tableClassName = classNames(
+    'cap-table-v2',
+    className,
+    {
+      'show-loader': showLoader,
+      'infinite-scroll': infiniteScroll,
+      'has-more': hasMore
+    }
+  );
+
+  return (
+    <StyledTable
+      id={id}
+      className={tableClassName}
+      dataSource={dataSource}
+      pagination={false}
+      scroll={{ 
+        x: scroll?.x,
+        y: scroll?.y || DEFAULT_SCROLL_HEIGHT,
+        scrollToFirstRowOnChange: false
+      }}
+      virtual={infiniteScroll}
+      rowHeight={DEFAULT_ROW_HEIGHT}
+      {...rest}
+    >
+      {children}
+    </StyledTable>
+  );
+};
+
+CapTable.propTypes = {
+  id: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  infiniteScroll: PropTypes.bool,
+  pagination: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+  dataSource: PropTypes.array,
+  offset_limit: PropTypes.object,
+  setPagination: PropTypes.func,
+  scroll: PropTypes.object,
+  showLoader: PropTypes.bool,
+};
+
+export default LocaleHoc(withStyles(CapTable, styles), { key: 'CapTable' });

package/CapTable/index.js

@@ -0,0 +1,3 @@
+import CapTableLoadable from './loadable';
+
+export default CapTableLoadable; 

package/CapTable/loadable.js

@@ -0,0 +1,13 @@
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import { loadable } from '@capillarytech/cap-ui-utils';
+import React, { Suspense } from 'react';
+
+const LoadableComponent = loadable(() => import('./CapTable'));
+
+const CapTableLoadable = () => (
+  <Suspense fallback={<CapSpin />}>
+    <LoadableComponent />
+  </Suspense>
+);
+
+export default CapTableLoadable;

package/CapTable/styles.js

@@ -0,0 +1,140 @@
+import { Table } from 'antd';
+import styled, { css } 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};
+    }
+  }
+`;
+export default css`
+  .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/CapUnifiedSelect/CapUnifiedSelect.js

@@ -0,0 +1,159 @@
+import React, { useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Select, TreeSelect } from 'antd';
+import styled from 'styled-components';
+import { selectStyles } from './styles';
+import { useIntl } from 'react-intl';
+import messages from './messages';
+
+const StyledSelect = styled(Select)`${selectStyles}`;
+const StyledTreeSelect = styled(TreeSelect)`${selectStyles}`;
+
+const CapUnifiedSelect = ({
+  type,
+  options,
+  treeData,
+  value,
+  onChange,
+  onSearch,
+  placeholder,
+  disabled,
+  loading,
+  allowClear,
+  enableSearch,
+  maxTagCount,
+  size,
+  status,
+  className,
+  style,
+  rightSlotContent,
+  virtualized,
+  ...restProps
+}) => {
+  const intl = useIntl();
+
+  const handleChange = useCallback((newValue, option) => {
+    if (onChange) {
+      onChange(newValue, option);
+    }
+  }, [onChange]);
+
+  const handleSearch = useCallback((searchText) => {
+    if (onSearch) {
+      onSearch(searchText);
+    }
+  }, [onSearch]);
+
+  const mergedClassName = useMemo(() => {
+    const classes = ['cap-unified-select'];
+    if (className) classes.push(className);
+    return classes.join(' ');
+  }, [className]);
+
+  // Common props for both Select and TreeSelect
+  const commonProps = {
+    value,
+    onChange: handleChange,
+    onSearch: enableSearch ? handleSearch : undefined,
+    placeholder: placeholder || intl.formatMessage(messages.selectPlaceholder),
+    disabled,
+    loading,
+    allowClear,
+    showSearch: enableSearch,
+    maxTagCount,
+    size,
+    status,
+    className: mergedClassName,
+    style,
+    virtual: virtualized,
+    notFoundContent: loading 
+      ? intl.formatMessage(messages.loading)
+      : intl.formatMessage(messages.noData),
+    ...restProps
+  };
+
+  // Render right slot content if provided
+  const suffixIcon = rightSlotContent && (
+    <div className="cap-unified-select-right-slot">
+      {rightSlotContent}
+    </div>
+  );
+
+  // For tree-based selects
+  if (type === 'treeSelect' || type === 'multiTreeSelect') {
+    return (
+      <StyledTreeSelect
+        {...commonProps}
+        treeData={treeData}
+        multiple={type === 'multiTreeSelect'}
+        suffixIcon={suffixIcon}
+      />
+    );
+  }
+
+  // For regular selects
+  return (
+    <StyledSelect
+      {...commonProps}
+      mode={type === 'multiSelect' ? 'multiple' : undefined}
+      options={options}
+      suffixIcon={suffixIcon}
+    />
+  );
+};
+
+CapUnifiedSelect.propTypes = {
+  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']).isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.any,
+      disabled: PropTypes.bool,
+    })
+  ),
+  treeData: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.node,
+      value: PropTypes.any,
+      children: PropTypes.array,
+      disabled: PropTypes.bool,
+    })
+  ),
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  onSearch: PropTypes.func,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  allowClear: PropTypes.bool,
+  enableSearch: PropTypes.bool,
+  maxTagCount: PropTypes.number,
+  size: PropTypes.oneOf(['small', 'middle', 'large']),
+  status: PropTypes.oneOf(['error', 'warning']),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  rightSlotContent: PropTypes.node,
+  virtualized: PropTypes.bool,
+};
+
+CapUnifiedSelect.defaultProps = {
+  options: [],
+  treeData: [],
+  value: undefined,
+  onChange: undefined,
+  onSearch: undefined,
+  placeholder: '',
+  disabled: false,
+  loading: false,
+  allowClear: true,
+  enableSearch: false,
+  maxTagCount: undefined,
+  size: 'middle',
+  status: undefined,
+  className: '',
+  style: {},
+  rightSlotContent: null,
+  virtualized: true,
+};
+
+export default CapUnifiedSelect; 

package/CapUnifiedSelect/index.js

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

package/CapUnifiedSelect/loadable.js

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

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

@@ -0,0 +1,182 @@
+import { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+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};
+        }
+      }
+    }
+  }
+`;