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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.28",
+  "version": "0.1.6-alpha.29",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./dist/components/index.js",
   "module": "./dist/esm/components/index.js",

package/CapInput/CapInput.js

@@ -1,67 +0,0 @@
-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/CapInput/Number.js

@@ -1,38 +0,0 @@
-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/CapInput/Search.js

@@ -1,32 +0,0 @@
-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/CapInput/TextArea.js

@@ -1,45 +0,0 @@
-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/CapInput/index.js

@@ -1,10 +0,0 @@
-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/CapInput/messages.js

@@ -1,27 +0,0 @@
-/*
- * 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/CapInput/styles.js

@@ -1,81 +0,0 @@
-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/CapSkeleton/CapSkeleton.js

@@ -1,17 +0,0 @@
-/**
- * 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/CapSkeleton/index.js

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

package/CapSpin/CapSpin.js

@@ -1,23 +0,0 @@
-/**
- * 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/CapSpin/index.js

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

package/CapTable/CapTable.js

@@ -1,146 +0,0 @@
-/**
- * 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/CapTable/index.js

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

package/CapTable/loadable.js

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