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

package/components/CapInput/CapInput.js

@@ -0,0 +1,51 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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.withConfig({
+  displayName: "StyledIcon",
+  componentId: "sc-1ghbg8a-0"
+})(["color:", ";color:", ";"], props => props.status === "error" && styledVars.CAP_RED, props => props.status === "success" && styledVars.CAP_PRIMARY.base);
+const CapInput = /*#__PURE__*/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 && /*#__PURE__*/React.createElement(StyledIcon, {
+    status: "error"
+  }, /*#__PURE__*/React.createElement(WarningOutlined, null)) || isVerified && /*#__PURE__*/React.createElement(StyledIcon, {
+    status: "success"
+  }, /*#__PURE__*/React.createElement(CheckCircleOutlined, null)) || suffix || null;
+  return /*#__PURE__*/React.createElement(Input, _extends({}, 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,33 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InputNumber } from 'antd';
+const CapInputNumber = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    size = 'large',
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(InputNumber, _extends({}, 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,28 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+const {
+  Search
+} = Input;
+const CapInputSearch = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    size = 'large',
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Search, _extends({}, 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,35 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+const {
+  TextArea
+} = Input;
+const CapInputTextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    size = 'large',
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(TextArea, _extends({}, 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,8 @@
+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,25 @@
+/*
+ * 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,3 @@
+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:", ";border-radius:", ";transition:", ";&:hover{border-color:", ";}&:focus,&.ant-input-affix-wrapper-focused{border-color:", ";box-shadow:none;}&.ant-input-status-error,&.ant-input-affix-wrapper-status-error,&.ant-input-number-status-error{border-color:", ";&:hover{border-color:", ";}&:focus,&.ant-input-affix-wrapper-focused{border-color:", ";box-shadow:none;}}&.ant-input-disabled,&.ant-input-affix-wrapper-disabled{background-color:", ";cursor:not-allowed;}}&.ant-input-lg,&.ant-input-affix-wrapper-lg{font-size:14px;padding:10px 12px;}&.ant-input-textarea{.ant-input{font-family:", ";}}&.ant-input-number{width:100%;.ant-input-number-handler-wrap{opacity:1;}}&.ant-input-search{.ant-input-search-button{background-color:", ";border-color:", ";&:hover{background-color:", ";border-color:", ";}}}"], styledVars.FONT_FAMILY, styledVars.RADIUS_04, styledVars.TRANSITION_ALL, styledVars.CAP_G11, styledVars.CAP_G01, styledVars.CAP_RED, styledVars.CAP_RED, styledVars.CAP_RED, styledVars.CAP_G08, styledVars.FONT_FAMILY, styledVars.CAP_PRIMARY.base, styledVars.CAP_PRIMARY.base, styledVars.CAP_PRIMARY.hover, styledVars.CAP_PRIMARY.hover);

package/components/CapSkeleton/CapSkeleton.js

@@ -0,0 +1,21 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * CapSkeleton - Migrated to Ant Design v5
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Skeleton } from 'antd';
+const CapSkeleton = _ref => {
+  let {
+    className,
+    ...rest
+  } = _ref;
+  const combinedClassName = `cap-skeleton-v2 ${className || ''}`.trim();
+  return /*#__PURE__*/React.createElement(Skeleton, _extends({
+    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,27 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * CapSpin - Migrated to Ant Design v5
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Spin } from 'antd';
+const CapSpin = _ref => {
+  let {
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Spin, _extends({
+    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,124 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * 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 = _ref => {
+  let {
+    id,
+    className,
+    children,
+    infiniteScroll,
+    pagination,
+    dataSource,
+    offset_limit,
+    setPagination,
+    scroll,
+    showLoader,
+    ...rest
+  } = _ref;
+  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 /*#__PURE__*/React.createElement(StyledTable, _extends({
+    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);
+};
+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,2 @@
+import CapTableLoadable from './loadable';
+export default CapTableLoadable;

package/components/CapTable/loadable.js

@@ -0,0 +1,8 @@
+import CapSkeleton from '../CapSkeleton';
+import { loadable } from '@capillarytech/cap-ui-utils';
+import React, { Suspense } from 'react';
+const LoadableComponent = loadable(() => import('./CapTable'));
+const CapTableLoadable = props => /*#__PURE__*/React.createElement(Suspense, {
+  fallback: /*#__PURE__*/React.createElement(CapSkeleton, null)
+}, /*#__PURE__*/React.createElement(LoadableComponent, props));
+export default CapTableLoadable;

package/components/CapTable/styles.js

@@ -0,0 +1,17 @@
+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).withConfig({
+  displayName: "StyledTable",
+  componentId: "sc-1ldu1k4-0"
+})(["&.cap-table-v2{.ant-table{border:1px solid ", ";}}&.show-loader{.ant-table-body > table > tbody::after{content:'", "';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 ", ";}}.ant-table{border:1px solid ", ";.ant-table-thead > tr > th{color:", ";font-size:", ";line-height:", ";background-color:", ";text-align:left;}.ant-table-thead > tr > th,.ant-table-tbody > tr > td{padding:", " ", ";}.ant-table-tbody > tr > td{border-bottom:1px solid ", ";}.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:", ";}.ant-table-thead > tr > th .ant-table-column-sorter-up,.ant-table-thead > tr > th .ant-table-column-sorter-down{&.active{color:", ";}&:not(.active){color:", ";}}.ant-table-thead{.table-children{padding:6px ", " 16px;position:relative;}.table-parent{padding-bottom:0;padding-left:", ";}.table-children.show-separator:not(:last-child)::after{content:'';height:8px;width:1px;right:0;top:30%;background-color:", ";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_G07, props => props.loadMoreData, CAP_G07, CAP_G07, CAP_G01, FONT_SIZE_S, SPACING_16, CAP_G10, SPACING_16, SPACING_24, CAP_G07, CAP_G09, CAP_G01, CAP_G06, SPACING_24, SPACING_24, CAP_G07, CAP_G01);

package/components/CapTestSelect/CapTestSelect.js

@@ -0,0 +1,34 @@
+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 /*#__PURE__*/React.createElement(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/components/CapTestSelect/index.js

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