@capillarytech/blaze-ui 0.1.6-alpha.3 → 0.1.6-alpha.32

package/CapLabel/styles.js

@@ -1,221 +0,0 @@
-import styled, { css } from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-const labels = {
-  label1: {
-    color: styledVars.CAP_G04,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label2: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label3: {
-    color: styledVars.CAP_G05,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label4: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label5: {
-    color: styledVars.CAP_G01,
-    fontSize: '10px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label6: {
-    color: styledVars.CAP_G06,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label7: {
-    color: styledVars.CAP_G04,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label8: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label9: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label10: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label11: {
-    color: styledVars.CAP_G04,
-    fontSize: '10px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label12: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label13: {
-    color: styledVars.CAP_G05,
-    fontSize: '10px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label14: {
-    color: styledVars.CAP_G03,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label15: {
-    color: styledVars.CAP_G01,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label16: {
-    color: styledVars.CAP_G01,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label17: {
-    color: styledVars.CAP_G01,
-    fontSize: '16px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label18: {
-    color: styledVars.CAP_G04,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label19: {
-    color: 'rgba(0, 0, 0, 0.87)',
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label20: {
-    color: styledVars.CAP_SECONDARY.base,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label21: {
-    color: styledVars.CAP_SECONDARY.base,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label22: {
-    color: styledVars.CAP_G04,
-    fontSize: '24px',
-    fontWeight: 'normal',
-    lineHeight: '28px',
-  },
-  label23: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label24: {
-    fontSize: '14px',
-    fontWeight: '400',
-    color: styledVars.CAP_G04,
-    lineHeight: '20px',
-  },
-  label25: {
-    fontSize: '14px',
-    fontWeight: '500',
-    color: styledVars.CAP_G04,
-    lineHeight: '20px',
-  },
-  label26: {
-    fontSize: '10px',
-    fontWeight: '400',
-    color: styledVars.CAP_G01,
-    lineHeight: '12px',
-  },
-  label27: {
-    fontSize: '12px',
-    fontWeight: '500',
-    color: styledVars.CAP_SECONDARY.base,
-    lineHeight: '16px',
-  },
-  label28: {
-    fontSize: '12px',
-    fontWeight: '500',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '16px',
-  },
-  label29: {
-    fontSize: '10px',
-    fontWeight: '400',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '12px',
-  },
-  label30: {
-    fontSize: '10px',
-    fontWeight: '400',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '12px',
-  },
-  label31: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: '400',
-    lineHeight: '16px',
-  },
-  label32: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: '20px',
-  },
-  label33: {
-    color: styledVars.CAP_SECONDARY.base,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: '20px',
-  },
-};
-
-const labelStyles = css`
-  font-size: ${props => labels[props.type].fontSize};
-  font-weight: ${props => props.fontWeight || labels[props.type].fontWeight};
-  color: ${props => labels[props.type].color};
-  line-height: ${props => props.lineHeight || labels[props.type].lineHeight || 'initial'};
-  margin: 0;
-  padding: 0;
-`;
-
-export const LabelWrapper = styled.div`
-  ${labelStyles}
-`;
-
-export const LabelInline = styled.span`
-  ${labelStyles}
-  display: inline-block;
-`;

package/CapRow/CapRow.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Row } from 'antd';
-import classNames from 'classnames';
-import { RowWrapper } from './styles';
-
-const CapRow = ({ className, children, ...rest }) => {
-  return (
-    <RowWrapper>
-      <Row {...rest} className={classNames('cap-row', className)}>
-        {React.Children.toArray(children)}
-      </Row>
-    </RowWrapper>
-  );
-};
-
-CapRow.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
-
-export default CapRow;

package/CapRow/index.js

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

package/CapRow/styles.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-export const RowWrapper = styled.div`
-  .cap-row {
-    display: flex;
-    flex-flow: row wrap;
-    min-width: 0;
-  }
-`;

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 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

@@ -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};
-  }
-`;

package/CapTooltip/CapTooltip.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Tooltip } from 'antd';
-import classNames from 'classnames';
-import { TooltipWrapper } from './styles';
-
-const CapTooltip = ({ overlayClassName, children, ...rest }) => {
-  return (
-    <TooltipWrapper>
-      <Tooltip
-        overlayClassName={classNames('cap-tooltip', overlayClassName)}
-        {...rest}
-      >
-        {children}
-      </Tooltip>
-    </TooltipWrapper>
-  );
-};
-
-/*
-  NOTE:
-    While using a disabled button with tooltip, wrap the button with an element with className "button-disabled-tooltip-wrapper".
-
-    <CapTooltip title="disabled button with tooltip">
-      <span className="button-disabled-tooltip-wrapper">
-        <CapButton disabled>Button</CapButton>
-      </span>
-    </CapTooltip>
-*/
-
-CapTooltip.propTypes = {
-  overlayClassName: PropTypes.string,
-  children: PropTypes.node,
-};
-
-export default CapTooltip;

package/CapTooltip/index.js

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

package/CapTooltip/styles.js

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-export const TooltipWrapper = styled.span`
-  .cap-tooltip {
-    max-width: 324px;
-
-    .ant-tooltip-inner {
-      background-color: ${styledVars.FONT_COLOR_01};
-      font-size: ${styledVars.FONT_SIZE_M};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      padding: 6px 8px;
-      min-height: 32px;
-      border-radius: ${styledVars.RADIUS_04};
-    }
-
-    &.cap-bgcolor-tooltip {
-      .ant-tooltip-inner {
-        background-color: ${styledVars.FONT_COLOR_05};
-      }
-    }
-
-    &.hide-tooltip-pointer {
-      .ant-tooltip-arrow {
-        display: none;
-      }
-    }
-  }
-
-  .button-disabled-tooltip-wrapper {
-    display: inline-flex;
-    cursor: not-allowed;
-
-    .cap-button.ant-btn[disabled] {
-      pointer-events: none;
-      & > * {
-        pointer-events: auto;
-        cursor: not-allowed;
-      }
-    }
-  }
-`;