@capillarytech/blaze-ui 0.1.6-alpha.6 → 0.1.6-alpha.60

package/CapTable/loadable.js

@@ -1,12 +1,12 @@
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapSkeleton from '../CapSkeleton';
 import { loadable } from '@capillarytech/cap-ui-utils';
 import React, { Suspense } from 'react';
 
 const LoadableComponent = loadable(() => import('./CapTable'));
 
-const CapTableLoadable = () => (
-  <Suspense fallback={<CapSpin />}>
-    <LoadableComponent />
+const CapTableLoadable = (props) => (
+  <Suspense fallback={<CapSkeleton />}>
+    <LoadableComponent {...props} />
   </Suspense>
 );
 

package/CapTable/styles.js

@@ -1,4 +1,4 @@
-import { Table } from 'antd';
+import { Table } from 'antd-v5';
 import styled from 'styled-components';
 import * as styledVars from '../styled/variables';
 

package/CapTestSelect/CapTestSelect.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Select } from 'antd-v5';
+
+/**
+ * Test component to verify Ant Design v5 Select integration
+ * This is a simple wrapper for testing purposes only
+ */
+const CapTestSelect = (props) => {
+  return <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/CapTestSelect/index.js

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

package/CapTooltip/CapTooltip.js

@@ -1,36 +1,98 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Tooltip } from 'antd';
-import classNames from 'classnames';
-import { TooltipWrapper } from './styles';
+import { Tooltip } from 'antd-v5';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import { tooltipStyles } from './styles';
+import withStyles from '../utils/withStyles';
 
-const CapTooltip = ({ overlayClassName, children, ...rest }) => {
+const StyledTooltip = styled(Tooltip)`
+  ${tooltipStyles}
+`;
+
+const CapTooltip = ({
+  title,
+  children,
+  placement = 'top',
+  visible,
+  defaultVisible = false,
+  trigger = 'hover',
+  destroyTooltipOnHide = false,
+  mouseEnterDelay = 0.1,
+  mouseLeaveDelay = 0.1,
+  overlayClassName = '',
+  overlayStyle,
+  onVisibleChange,
+  align,
+  arrowPointAtCenter = false,
+  autoAdjustOverflow = true,
+  getPopupContainer,
+  className = '',
+  ...rest
+}) => {
   return (
-    <TooltipWrapper>
-      <Tooltip
-        overlayClassName={classNames('cap-tooltip', overlayClassName)}
-        {...rest}
-      >
-        {children}
-      </Tooltip>
-    </TooltipWrapper>
+    <StyledTooltip
+      title={title}
+      placement={placement}
+      open={visible}
+      defaultOpen={defaultVisible}
+      trigger={trigger}
+      destroyTooltipOnHide={destroyTooltipOnHide}
+      mouseEnterDelay={mouseEnterDelay}
+      mouseLeaveDelay={mouseLeaveDelay}
+      overlayClassName={classnames('cap-tooltip-overlay-v2', overlayClassName)}
+      overlayStyle={overlayStyle}
+      onOpenChange={onVisibleChange}
+      align={align}
+      arrow={{ pointAtCenter: arrowPointAtCenter }}
+      autoAdjustOverflow={autoAdjustOverflow}
+      getPopupContainer={getPopupContainer}
+      className={classnames('cap-tooltip-v2', className)}
+      {...rest}
+    >
+      {children}
+    </StyledTooltip>
   );
 };
 
-/*
-  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,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   children: PropTypes.node,
+  placement: PropTypes.oneOf([
+    'top', 'left', 'right', 'bottom',
+    'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
+    'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
+  ]),
+  visible: PropTypes.bool,
+  defaultVisible: PropTypes.bool,
+  trigger: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  destroyTooltipOnHide: PropTypes.bool,
+  mouseEnterDelay: PropTypes.number,
+  mouseLeaveDelay: PropTypes.number,
+  overlayClassName: PropTypes.string,
+  overlayStyle: PropTypes.object,
+  onVisibleChange: PropTypes.func,
+  align: PropTypes.object,
+  arrowPointAtCenter: PropTypes.bool,
+  autoAdjustOverflow: PropTypes.bool,
+  getPopupContainer: PropTypes.func,
+  className: PropTypes.string,
+};
+
+CapTooltip.defaultProps = {
+  placement: 'top',
+  defaultVisible: false,
+  trigger: 'hover',
+  destroyTooltipOnHide: false,
+  mouseEnterDelay: 0.1,
+  mouseLeaveDelay: 0.1,
+  overlayClassName: '',
+  arrowPointAtCenter: false,
+  autoAdjustOverflow: true,
+  className: '',
 };
 
-export default CapTooltip;
+export default withStyles(CapTooltip, tooltipStyles);

package/CapTooltip/index.js

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

package/CapTooltip/styles.js

@@ -1,42 +1,34 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import * as styledVars from '../styled/variables';
 
-export const TooltipWrapper = styled.span`
-  .cap-tooltip {
-    max-width: 324px;
-
+export const tooltipStyles = css`
+  &.cap-tooltip-overlay-v2 {
     .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;
+      background-color: ${styledVars.CAP_G01};
+      color: ${styledVars.CAP_WHITE};
+      padding: 8px 12px;
+      font-size: 14px;
+      line-height: 20px;
       border-radius: ${styledVars.RADIUS_04};
+      max-width: 300px;
+      word-wrap: break-word;
     }
 
-    &.cap-bgcolor-tooltip {
-      .ant-tooltip-inner {
-        background-color: ${styledVars.FONT_COLOR_05};
-      }
-    }
-
-    &.hide-tooltip-pointer {
-      .ant-tooltip-arrow {
-        display: none;
-      }
+    .ant-tooltip-arrow::before {
+      background-color: ${styledVars.CAP_G01};
     }
   }
 
   .button-disabled-tooltip-wrapper {
-    display: inline-flex;
+    display: inline-block;
     cursor: not-allowed;
 
-    .cap-button.ant-btn[disabled] {
+    .ant-btn[disabled] {
       pointer-events: none;
-      & > * {
-        pointer-events: auto;
-        cursor: not-allowed;
-      }
     }
   }
-`;
+`;
+
+export const StyledTooltipWrapper = styled.div`
+  display: inline-block;
+`;

package/CapTooltipWithInfo/CapTooltipWithInfo.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CapTooltip, CapIcon } from '../';
+import withStyles from '../utils/withStyles';
+import { tooltipWithInfoStyles } from './styles';
+
+/**
+ * CapTooltipWithInfo - A component that combines an info icon with a tooltip
+ * for displaying additional information on hover or other trigger events.
+ */
+const CapTooltipWithInfo = ({
+  title,
+  iconSize = 's',
+  iconType = 'info-circle',
+  placement = 'top',
+  trigger = 'hover',
+  className = '',
+  tooltipProps = {},
+  iconProps = {},
+  ...rest
+}) => {
+  return (
+    <span 
+      className={classnames('cap-tooltip-with-info', className)} 
+      {...rest}
+    >
+      <CapTooltip
+        title={title}
+        placement={placement}
+        trigger={trigger}
+        {...tooltipProps}
+      >
+        <span className="cap-tooltip-with-info-icon">
+          <CapIcon 
+            type={iconType}
+            size={iconSize}
+            {...iconProps}
+          />
+        </span>
+      </CapTooltip>
+    </span>
+  );
+};
+
+CapTooltipWithInfo.propTypes = {
+  /** Content to display in the tooltip */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  /** Size of the info icon */
+  iconSize: PropTypes.oneOf(['xs', 's', 'm', 'l']),
+  /** Type of icon to display */
+  iconType: PropTypes.string,
+  /** Placement of the tooltip relative to the icon */
+  placement: PropTypes.oneOf([
+    'top', 'left', 'right', 'bottom',
+    'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
+    'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
+  ]),
+  /** How the tooltip is triggered */
+  trigger: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  /** Additional class name */
+  className: PropTypes.string,
+  /** Additional props passed to the CapTooltip component */
+  tooltipProps: PropTypes.object,
+  /** Additional props passed to the CapIcon component */
+  iconProps: PropTypes.object,
+};
+
+CapTooltipWithInfo.defaultProps = {
+  iconSize: 's',
+  iconType: 'info-circle',
+  placement: 'top',
+  trigger: 'hover',
+  className: '',
+  tooltipProps: {},
+  iconProps: {},
+};
+
+export default withStyles(CapTooltipWithInfo, tooltipWithInfoStyles);

package/CapTooltipWithInfo/index.js

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

package/CapTooltipWithInfo/styles.js

@@ -0,0 +1,22 @@
+import { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const tooltipWithInfoStyles = css`
+  &.cap-tooltip-with-info {
+    display: inline-flex;
+    align-items: center;
+    cursor: default;
+    
+    .cap-tooltip-with-info-icon {
+      color: ${styledVars.CAP_G06};
+      margin-left: 4px;
+      cursor: help;
+      
+      &:hover {
+        color: ${styledVars.CAP_G07};
+      }
+    }
+  }
+`;
+
+export default tooltipWithInfoStyles;