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

package/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/CapTestSelect/index.js

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

package/components/CapInput/CapInput.js

@@ -0,0 +1,67 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+import { WarningOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+const StyledIcon = styled.span`
+  color: ${(props) => props.status === "error" && styledVars.CAP_RED};
+  color: ${(props) => props.status === "success" && styledVars.CAP_PRIMARY.base};
+`;
+
+const CapInput = React.forwardRef((props, ref) => {
+  const { 
+    alwaysShowFocus, 
+    errorMessage, 
+    isVerified, 
+    suffix, 
+    showSuffix = true, 
+    ...rest 
+  } = props;
+  
+  const inputRef = useRef(null);
+  
+  useEffect(() => {
+    if (alwaysShowFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [alwaysShowFocus]);
+  
+  const inputSuffix = (errorMessage && (
+    <StyledIcon status="error">
+      <WarningOutlined />
+    </StyledIcon>
+  )) || (isVerified && (
+    <StyledIcon status="success">
+      <CheckCircleOutlined />
+    </StyledIcon>
+  )) || suffix || null;
+
+  return (
+    <Input
+      {...rest}
+      ref={ref || inputRef}
+      suffix={showSuffix === false ? null : inputSuffix}
+      status={errorMessage ? 'error' : undefined}
+    />
+  );
+});
+
+CapInput.displayName = 'CapInput';
+
+CapInput.propTypes = {
+  alwaysShowFocus: PropTypes.bool,
+  errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  isVerified: PropTypes.bool,
+  size: PropTypes.oneOf(['large', 'middle', 'small']),
+  suffix: PropTypes.node,
+  showSuffix: PropTypes.bool,
+};
+
+CapInput.defaultProps = {
+  size: 'large',
+  showSuffix: true,
+};
+
+export default CapInput; 

package/components/CapInput/Number.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InputNumber } from 'antd';
+
+const CapInputNumber = React.forwardRef((props, ref) => {
+  const { size = 'large', ...rest } = props;
+
+  return (
+    <InputNumber
+      {...rest}
+      ref={ref}
+      size={size}
+    />
+  );
+});
+
+CapInputNumber.displayName = 'CapInputNumber';
+
+CapInputNumber.propTypes = {
+  size: PropTypes.oneOf(['large', 'middle', 'small']),
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  precision: PropTypes.number,
+  decimalSeparator: PropTypes.string,
+  formatter: PropTypes.func,
+  parser: PropTypes.func,
+  controls: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  keyboard: PropTypes.bool,
+  stringMode: PropTypes.bool,
+};
+
+CapInputNumber.defaultProps = {
+  size: 'large',
+  keyboard: true,
+};
+
+export default CapInputNumber; 

package/components/CapInput/Search.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+
+const { Search } = Input;
+
+const CapInputSearch = React.forwardRef((props, ref) => {
+  const { size = 'large', ...rest } = props;
+
+  return (
+    <Search
+      {...rest}
+      ref={ref}
+      size={size}
+    />
+  );
+});
+
+CapInputSearch.displayName = 'CapInputSearch';
+
+CapInputSearch.propTypes = {
+  size: PropTypes.oneOf(['large', 'middle', 'small']),
+  enterButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  loading: PropTypes.bool,
+  onSearch: PropTypes.func,
+};
+
+CapInputSearch.defaultProps = {
+  size: 'large',
+};
+
+export default CapInputSearch; 

package/components/CapInput/TextArea.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+
+const { TextArea } = Input;
+
+const CapInputTextArea = React.forwardRef((props, ref) => {
+  const { size = 'large', ...rest } = props;
+
+  return (
+    <TextArea
+      {...rest}
+      ref={ref}
+      size={size}
+    />
+  );
+});
+
+CapInputTextArea.displayName = 'CapInputTextArea';
+
+CapInputTextArea.propTypes = {
+  size: PropTypes.oneOf(['large', 'middle', 'small']),
+  autoSize: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.shape({
+      minRows: PropTypes.number,
+      maxRows: PropTypes.number,
+    }),
+  ]),
+  rows: PropTypes.number,
+  maxLength: PropTypes.number,
+  showCount: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.shape({
+      formatter: PropTypes.func,
+    }),
+  ]),
+};
+
+CapInputTextArea.defaultProps = {
+  size: 'large',
+  rows: 4,
+};
+
+export default CapInputTextArea; 

package/components/CapInput/index.js

@@ -0,0 +1,10 @@
+import CapInput from './CapInput';
+import Number from './Number';
+import Search from './Search';
+import TextArea from './TextArea';
+
+CapInput.Number = Number;
+CapInput.Search = Search;
+CapInput.TextArea = TextArea;
+
+export default CapInput;

package/components/CapInput/messages.js

@@ -0,0 +1,27 @@
+/*
+ * CapInput Messages
+ *
+ * This contains all the text for the CapInput component.
+ */
+import { defineMessages } from 'react-intl';
+
+const scope = 'blaze.components.CapInput';
+
+export default defineMessages({
+  placeholder: {
+    id: `${scope}.placeholder`,
+    defaultMessage: 'Enter text...',
+  },
+  searchPlaceholder: {
+    id: `${scope}.searchPlaceholder`,
+    defaultMessage: 'Search...',
+  },
+  textAreaPlaceholder: {
+    id: `${scope}.textAreaPlaceholder`,
+    defaultMessage: 'Enter your text here...',
+  },
+  numberPlaceholder: {
+    id: `${scope}.numberPlaceholder`,
+    defaultMessage: 'Enter number...',
+  },
+}); 

package/components/CapInput/styles.js

@@ -0,0 +1,81 @@
+import { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const inputStyles = css`
+  &.ant-input,
+  &.ant-input-affix-wrapper,
+  &.ant-input-number,
+  &.ant-input-textarea {
+    font-family: ${styledVars.FONT_FAMILY};
+    border-radius: ${styledVars.RADIUS_04};
+    transition: ${styledVars.TRANSITION_ALL};
+    
+    &:hover {
+      border-color: ${styledVars.CAP_G11};
+    }
+    
+    &:focus,
+    &.ant-input-affix-wrapper-focused {
+      border-color: ${styledVars.CAP_G01};
+      box-shadow: none;
+    }
+    
+    &.ant-input-status-error,
+    &.ant-input-affix-wrapper-status-error,
+    &.ant-input-number-status-error {
+      border-color: ${styledVars.CAP_RED};
+      
+      &:hover {
+        border-color: ${styledVars.CAP_RED};
+      }
+      
+      &:focus,
+      &.ant-input-affix-wrapper-focused {
+        border-color: ${styledVars.CAP_RED};
+        box-shadow: none;
+      }
+    }
+    
+    &.ant-input-disabled,
+    &.ant-input-affix-wrapper-disabled {
+      background-color: ${styledVars.CAP_G08};
+      cursor: not-allowed;
+    }
+  }
+  
+  /* Size variations */
+  &.ant-input-lg,
+  &.ant-input-affix-wrapper-lg {
+    font-size: 14px;
+    padding: 10px 12px;
+  }
+  
+  /* TextArea specific */
+  &.ant-input-textarea {
+    .ant-input {
+      font-family: ${styledVars.FONT_FAMILY};
+    }
+  }
+  
+  /* Number input specific */
+  &.ant-input-number {
+    width: 100%;
+    
+    .ant-input-number-handler-wrap {
+      opacity: 1;
+    }
+  }
+  
+  /* Search input specific */
+  &.ant-input-search {
+    .ant-input-search-button {
+      background-color: ${styledVars.CAP_PRIMARY.base};
+      border-color: ${styledVars.CAP_PRIMARY.base};
+      
+      &:hover {
+        background-color: ${styledVars.CAP_PRIMARY.hover};
+        border-color: ${styledVars.CAP_PRIMARY.hover};
+      }
+    }
+  }
+`; 

package/components/CapSkeleton/CapSkeleton.js

@@ -0,0 +1,17 @@
+/**
+ * CapSkeleton - Migrated to Ant Design v5
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Skeleton } from 'antd';
+
+const CapSkeleton = ({ className, ...rest }) => {
+  const combinedClassName = `cap-skeleton-v2 ${className || ''}`.trim();
+  return <Skeleton className={combinedClassName} {...rest} />;
+};
+
+CapSkeleton.propTypes = {
+  className: PropTypes.string
+};
+
+export default CapSkeleton; 

package/components/CapSkeleton/index.js

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

package/components/CapSpin/CapSpin.js

@@ -0,0 +1,23 @@
+/**
+ * CapSpin - Migrated to Ant Design v5
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Spin } from 'antd';
+
+const CapSpin = ({ className, ...rest }) => (
+  <Spin className={className} {...rest} />
+);
+
+CapSpin.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'default', 'large']),
+  spinning: PropTypes.bool,
+  tip: PropTypes.string,
+  delay: PropTypes.number,
+  indicator: PropTypes.node,
+  fullscreen: PropTypes.bool,
+  wrapperClassName: PropTypes.string
+};
+
+export default CapSpin; 

package/components/CapSpin/index.js

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

package/components/CapTable/CapTable.js

@@ -0,0 +1,146 @@
+/**
+ * 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 { 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(CapTable, { key: 'CapTable' });

package/components/CapTable/index.js

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

package/components/CapTable/loadable.js

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

package/components/CapTable/styles.js

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