@capillarytech/blaze-ui 0.3.3-alpha.1 → 0.3.4-beta.0

package/CapLabel/styles.js

@@ -1,259 +0,0 @@
-import styled, { css } from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-export const StyledLabelDiv = styled.div`
-  font-family: ${styledVars.FONT_FAMILY};
-  font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.857rem'};
-  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
-  color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
-  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || styledVars.NORMAL_LINE_HEIGHT};
-  margin: 0;
-  padding: 0;
-`;
-
-export const StyledLabelSpan = styled.span`
-  font-family: ${styledVars.FONT_FAMILY};
-  font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.857rem'};
-  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
-  color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
-  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || styledVars.NORMAL_LINE_HEIGHT};
-  margin: 0;
-  padding: 0;
-`;
-
-export const labelStyles = css`
-  &.cap-label {
-    font-family: ${styledVars.FONT_FAMILY};
-    
-    &.label1 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_G04};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label2 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_G01};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label3 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_G05};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label4 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_G01};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      line-height: normal;
-    }
-    
-    &.label5 {
-      font-size: 0.714rem;
-      color: ${styledVars.CAP_G01};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label6 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_G06};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label7 {
-      font-size: 1rem;
-      color: ${styledVars.CAP_G04};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      line-height: normal;
-    }
-    
-    &.label8 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_G01};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      line-height: normal;
-    }
-    
-    &.label9 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_G01};
-      line-height: 1.143rem;
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-    }
-    
-    &.label10 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_WHITE};
-      line-height: 1.143rem;
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-    }
-    
-    &.label11 {
-      font-size: 0.714rem;
-      color: ${styledVars.CAP_G04};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label12 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_WHITE};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label13 {
-      font-size: 0.714rem;
-      color: ${styledVars.CAP_G05};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label14 {
-      font-size: 1rem;
-      color: #676e7c;
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label15 {
-      font-size: 1rem;
-      color: ${styledVars.CAP_G01};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label16 {
-      font-size: 1rem;
-      color: ${styledVars.CAP_G01};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      line-height: normal;
-    }
-    
-    &.label17 {
-      font-size: 1.143rem;
-      color: ${styledVars.CAP_G01};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      line-height: normal;
-    }
-    
-    &.label18 {
-      font-size: 1rem;
-      color: ${styledVars.CAP_G04};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label19 {
-      font-size: 0.857rem;
-      line-height: 1.143rem;
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      color: rgba(0, 0, 0, 0.87);
-    }
-    
-    &.label20 {
-      font-size: 1rem;
-      color: ${styledVars.CAP_BLUE01};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      line-height: normal;
-    }
-    
-    &.label21 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_BLUE01};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label22 {
-      font-size: 1.714rem;
-      color: ${styledVars.CAP_G04};
-      line-height: 2rem;
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-    }
-    
-    &.label23 {
-      font-size: 1rem;
-      color: ${styledVars.CAP_WHITE};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: normal;
-    }
-    
-    &.label24 {
-      font-size: 1rem;
-      color: ${styledVars.CAP_G04};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: 1.429rem;
-    }
-    
-    &.label25 {
-      font-size: 1rem;
-      color: ${styledVars.CAP_G04};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      line-height: 1.429rem;
-    }
-    
-    &.label26 {
-      font-size: 0.714rem;
-      color: ${styledVars.CAP_G01};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: 0.857rem;
-    }
-    
-    &.label27 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_BLUE01};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      line-height: 1.143rem;
-    }
-    
-    &.label28 {
-      color: ${styledVars.CAP_WHITE};
-      font-size: 0.857rem;
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      line-height: 1.143rem;
-    }
-    
-    &.label29 {
-      color: ${styledVars.CAP_WHITE};
-      font-size: 0.714rem;
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: 0.857rem;
-    }
-    
-    &.label30 {
-      color: ${styledVars.CAP_WHITE};
-      font-size: 0.714rem;
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: 0.857rem;
-    }
-    
-    &.label31 {
-      font-size: 0.857rem;
-      color: ${styledVars.CAP_G01};
-      font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
-      line-height: 1.143rem;
-    }
-    
-    &.label32 {
-      line-height: 1.429rem;
-      font-size: 1rem;
-      color: ${styledVars.CAP_WHITE};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-    }
-    
-    &.label33 {
-      font-size: 1rem;
-      color: ${styledVars.CAP_BLUE01};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      line-height: 1.429rem;
-    }
-  }
-`;

package/CapRow/CapRow.js

@@ -1,123 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import styled from 'styled-components';
-import { StyledRow, rowStyles } from './styles';
-import withStyles from '../utils/withStyles';
-
-const CapRow = ({
-  children,
-  className = '',
-  style = {},
-  justify = 'start',
-  align = 'top',
-  gutter = 0,
-  wrap = true,
-  type,
-  width,
-  height,
-  margin,
-  padding,
-  prefixCls = 'ant-row',
-  fullWidth = false,
-  fullHeight = false,
-  fillSpace = false,
-  responsive = true,
-  vertical = false,
-  noWrap = false,
-  gap = null,
-  ...rest
-}) => {
-  // Use either the gap property or gutter for spacing
-  const gutterValue = gap !== null ? null : gutter;
-  const wrapValue = noWrap ? false : wrap;
-
-  return (
-    <StyledRow
-      className={classnames(
-        'cap-row-v2',
-        {
-          'with-custom-width': width,
-          'with-custom-height': height,
-          'fill-space': fillSpace,
-          'full-width': fullWidth,
-          'full-height': fullHeight,
-          'ant-row-no-wrap': noWrap,
-          'with-gap': gap !== null,
-        },
-        className
-      )}
-      style={{
-        ...(gap !== null ? { gap: typeof gap === 'number' ? `${gap}px` : gap } : {}),
-        ...style,
-      }}
-      justify={justify}
-      align={align}
-      gutter={gutterValue}
-      wrap={wrapValue}
-      type={type}
-      width={width}
-      height={height}
-      margin={margin}
-      padding={padding}
-      prefixCls={prefixCls}
-      fullWidth={fullWidth}
-      fullHeight={fullHeight}
-      fillSpace={fillSpace}
-      responsive={responsive}
-      vertical={vertical}
-      {...rest}
-    >
-      {children}
-    </StyledRow>
-  );
-};
-
-CapRow.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly']),
-  align: PropTypes.oneOf(['top', 'middle', 'bottom', 'stretch']),
-  gutter: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.object,
-    PropTypes.arrayOf(PropTypes.number),
-  ]),
-  wrap: PropTypes.bool,
-  type: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  prefixCls: PropTypes.string,
-  fullWidth: PropTypes.bool,
-  fullHeight: PropTypes.bool,
-  fillSpace: PropTypes.bool,
-  responsive: PropTypes.bool,
-  vertical: PropTypes.bool,
-  noWrap: PropTypes.bool,
-  gap: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.arrayOf(PropTypes.number),
-    PropTypes.string,
-  ]),
-};
-
-CapRow.defaultProps = {
-  className: '',
-  style: {},
-  justify: 'start',
-  align: 'top',
-  gutter: 0,
-  wrap: true,
-  prefixCls: 'ant-row',
-  fullWidth: false,
-  fullHeight: false,
-  fillSpace: false,
-  responsive: true,
-  vertical: false,
-  noWrap: false,
-};
-
-export default withStyles(CapRow, rowStyles);

package/CapRow/index.js

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

package/CapRow/styles.js

@@ -1,50 +0,0 @@
-import styled, { css } from 'styled-components';
-import { Row } from 'antd-v5';
-import * as styledVars from '../styled/variables';
-
-export const StyledRow = styled(Row)`
-  width: ${({ width, fullWidth }) => (fullWidth ? '100%' : width || 'auto')};
-  height: ${({ height, fullHeight }) => (fullHeight ? '100%' : height || 'auto')};
-  margin: ${({ margin }) => margin || 'inherit'};
-  padding: ${({ padding }) => padding || 'inherit'};
-  ${({ responsive }) => !responsive && css`
-    display: flex;
-    flex-wrap: wrap;
-  `};
-  ${({ fillSpace }) => fillSpace && css`
-    flex: 1;
-  `};
-`;
-
-export const rowStyles = css`
-  &.cap-row-v2 {
-    &.with-custom-width {
-      width: auto;
-    }
-    
-    &.with-custom-height {
-      height: auto;
-    }
-    
-    &.fill-space {
-      flex: 1;
-    }
-    
-    &.full-width {
-      width: 100%;
-    }
-    
-    &.full-height {
-      height: 100%;
-    }
-
-    &.ant-row-no-wrap {
-      flex-wrap: nowrap;
-    }
-
-    &.with-gap {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-  }
-`;

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-v5';
-
-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-v5';
-
-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;