@capillarytech/blaze-ui 0.1.6-alpha.3 → 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/{CapInput → components/CapInput}/Number.js

@@ -1,21 +1,18 @@
+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 = React.forwardRef((props, ref) => {
-  const { size = 'large', ...rest } = props;
-
-  return (
-    <InputNumber
-      {...rest}
-      ref={ref}
-      size={size}
-    />
-  );
+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,
@@ -27,12 +24,10 @@ CapInputNumber.propTypes = {
   parser: PropTypes.func,
   controls: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   keyboard: PropTypes.bool,
-  stringMode: PropTypes.bool,
+  stringMode: PropTypes.bool
 };
-
 CapInputNumber.defaultProps = {
   size: 'large',
-  keyboard: true,
+  keyboard: true
 };
-
-export default CapInputNumber; 
+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/{CapInput → components/CapInput}/messages.js

@@ -4,24 +4,22 @@
  * 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...',
+    defaultMessage: 'Enter text...'
   },
   searchPlaceholder: {
     id: `${scope}.searchPlaceholder`,
-    defaultMessage: 'Search...',
+    defaultMessage: 'Search...'
   },
   textAreaPlaceholder: {
     id: `${scope}.textAreaPlaceholder`,
-    defaultMessage: 'Enter your text here...',
+    defaultMessage: 'Enter your text here...'
   },
   numberPlaceholder: {
     id: `${scope}.numberPlaceholder`,
-    defaultMessage: 'Enter number...',
-  },
-}); 
+    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/{CapTable → components/CapTable}/CapTable.js

@@ -1,3 +1,4 @@
+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:
@@ -11,29 +12,27 @@ 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 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;
@@ -41,43 +40,33 @@ const CapTable = ({
         ...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]
-  );
+  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;
+    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();
@@ -99,37 +88,25 @@ const CapTable = ({
       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>
-  );
+  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,
@@ -140,7 +117,8 @@ CapTable.propTypes = {
   offset_limit: PropTypes.object,
   setPagination: PropTypes.func,
   scroll: PropTypes.object,
-  showLoader: PropTypes.bool,
+  showLoader: PropTypes.bool
 };
-
-export default LocaleHoc(CapTable, { key: 'CapTable' });
+export default LocaleHoc(CapTable, {
+  key: 'CapTable'
+});

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