@capillarytech/blaze-ui 0.1.6-alpha.5 → 0.1.6-alpha.51

package/CapIcon/CapIcon.js

@@ -0,0 +1,183 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import * as AntdIcons from '@ant-design/icons';
+import { IconWrapper, BackgroundWrapper, iconStyles } from './styles';
+import withStyles from '../utils/withStyles';
+
+const StyledIcon = styled.span`
+  ${iconStyles}
+`;
+
+const getSvgIcon = (type, svgProps = {}) => {
+  const icons = {
+    // Add your SVG icons here if needed
+  };
+
+  const IconComponent = icons[type];
+  return IconComponent ? <IconComponent {...svgProps} /> : null;
+};
+
+const getAntIcon = (type) => {
+  // Convert kebab-case to PascalCase for Ant Design icon naming
+  const pascalCase = type
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+    
+  // Try different naming conventions
+  const iconName = `${pascalCase}Outlined`;
+  const iconNameFilled = `${pascalCase}Filled`;
+  const iconNameTwoTone = `${pascalCase}TwoTone`;
+  
+  return AntdIcons[iconName] || AntdIcons[iconNameFilled] || AntdIcons[iconNameTwoTone];
+};
+
+const CapIcon = ({
+  type,
+  size = 'm',
+  style = {},
+  className = '',
+  disabled = false,
+  spin = false,
+  rotate,
+  withBackground = false,
+  backgroundProps = {},
+  onClick,
+  textLabel,
+  component,
+  svgProps = {},
+  allowSvg = true,
+  ...rest
+}) => {
+  const handleClick = (e) => {
+    if (!disabled && onClick) {
+      onClick(e);
+    }
+  };
+
+  // Render custom component if provided
+  if (component) {
+    return (
+      <IconWrapper
+        className={classnames('cap-icon', size, { 'with-text-label': textLabel }, className)}
+        style={style}
+        disabled={disabled}
+        onClick={handleClick}
+        {...rest}
+      >
+        {component}
+        {textLabel}
+      </IconWrapper>
+    );
+  }
+
+  // Try to get SVG icon if allowSvg is true
+  const svgIcon = allowSvg && type ? getSvgIcon(type, svgProps) : null;
+
+  // If SVG icon exists and allowSvg is true, use it
+  if (svgIcon) {
+    const iconComponent = (
+      <IconWrapper
+        className={classnames('cap-icon', size, { spin }, { 'with-text-label': textLabel }, className)}
+        style={{ 
+          ...style,
+          transform: rotate ? `rotate(${rotate}deg)` : undefined 
+        }}
+        disabled={disabled}
+        onClick={handleClick}
+        {...rest}
+      >
+        {svgIcon}
+        {textLabel}
+      </IconWrapper>
+    );
+
+    return withBackground ? (
+      <BackgroundWrapper size={size} {...backgroundProps}>
+        {iconComponent}
+      </BackgroundWrapper>
+    ) : iconComponent;
+  }
+
+  // Try to get Ant Design icon
+  const AntIcon = type ? getAntIcon(type) : null;
+
+  if (AntIcon) {
+    const iconComponent = (
+      <IconWrapper
+        className={classnames('cap-icon', size, { 'with-text-label': textLabel }, className)}
+        style={style}
+        disabled={disabled}
+        onClick={handleClick}
+        {...rest}
+      >
+        <AntIcon 
+          spin={spin} 
+          rotate={rotate}
+        />
+        {textLabel}
+      </IconWrapper>
+    );
+
+    return withBackground ? (
+      <BackgroundWrapper size={size} {...backgroundProps}>
+        {iconComponent}
+      </BackgroundWrapper>
+    ) : iconComponent;
+  }
+
+  // Fallback: render an empty icon container
+  return (
+    <IconWrapper
+      className={classnames('cap-icon', size, { 'with-text-label': textLabel }, className)}
+      style={style}
+      disabled={disabled}
+      onClick={handleClick}
+      {...rest}
+    >
+      {textLabel}
+    </IconWrapper>
+  );
+};
+
+CapIcon.propTypes = {
+  type: PropTypes.string,
+  size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
+  style: PropTypes.object,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  spin: PropTypes.bool,
+  rotate: PropTypes.number,
+  withBackground: PropTypes.bool,
+  backgroundProps: PropTypes.object,
+  onClick: PropTypes.func,
+  textLabel: PropTypes.node,
+  component: PropTypes.node,
+  svgProps: PropTypes.object,
+  allowSvg: PropTypes.bool,
+};
+
+CapIcon.defaultProps = {
+  size: 'm',
+  style: {},
+  className: '',
+  disabled: false,
+  spin: false,
+  withBackground: false,
+  backgroundProps: {},
+  svgProps: {},
+  allowSvg: true,
+};
+
+// Create AntIcon subcomponent for backward compatibility
+const AntIcon = styled.i`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+CapIcon.AntIcon = AntIcon;
+
+export default withStyles(CapIcon, iconStyles);

package/CapIcon/index.js

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

package/CapIcon/styles.js

@@ -0,0 +1,76 @@
+import styled, { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const IconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  
+  &.xs {
+    font-size: 12px;
+    width: 12px;
+    height: 12px;
+  }
+  
+  &.s {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+  
+  &.m {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+  }
+  
+  &.l {
+    font-size: 32px;
+    width: 32px;
+    height: 32px;
+  }
+  
+  &.with-text-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+`;
+
+export const BackgroundWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: ${({ bgColor }) => bgColor || styledVars.CAP_G09};
+  width: ${({ size }) => (size === 'xs' ? '20px' : size === 's' ? '24px' : size === 'l' ? '48px' : '36px')};
+  height: ${({ size }) => (size === 'xs' ? '20px' : size === 's' ? '24px' : size === 'l' ? '48px' : '36px')};
+`;
+
+export const iconStyles = css`
+  &.cap-icon {
+    display: inline-flex;
+    align-items: center;
+    
+    .anticon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    &.spin {
+      animation: rotate 2s linear infinite;
+    }
+  }
+  
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;

package/CapInput/CapInput.js

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'antd';
+import { Input } from 'antd-v5';
 import { WarningOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import * as styledVars from '../styled/variables';

package/CapInput/Number.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputNumber } from 'antd';
+import { InputNumber } from 'antd-v5';
 
 const CapInputNumber = React.forwardRef((props, ref) => {
   const { size = 'large', ...rest } = props;

package/CapInput/Search.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'antd';
+import { Input } from 'antd-v5';
 
 const { Search } = Input;
 

package/CapInput/TextArea.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'antd';
+import { Input } from 'antd-v5';
 
 const { TextArea } = Input;
 

package/CapLabel/CapLabel.js

@@ -1,106 +1,126 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { LabelWrapper, LabelInline } from './styles';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import { StyledLabelDiv, StyledLabelSpan, labelStyles } from './styles';
+import withStyles from '../utils/withStyles';
+
+const getLabelTypeStyles = (type) => {
+  const types = {
+    label1: { fontSize: '12px', color: '#5e6c84', fontWeight: 'normal', lineHeight: 'normal' },
+    label2: { fontSize: '12px', color: '#091e42', fontWeight: 'normal', lineHeight: 'normal' },
+    label3: { fontSize: '12px', color: '#97a0af', fontWeight: 'normal', lineHeight: 'normal' },
+    label4: { fontSize: '12px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
+    label5: { fontSize: '10px', color: '#091e42', fontWeight: 'normal', lineHeight: 'normal' },
+    label6: { fontSize: '12px', color: '#b3bac5', fontWeight: 'normal', lineHeight: 'normal' },
+    label7: { fontSize: '14px', color: '#5e6c84', fontWeight: '500', lineHeight: 'normal' },
+    label8: { fontSize: '12px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
+    label9: { fontSize: '12px', color: '#091e42', lineHeight: '16px', fontWeight: 'normal' },
+    label10: { fontSize: '12px', color: '#ffffff', lineHeight: '16px', fontWeight: 'normal' },
+    label11: { fontSize: '10px', color: '#5e6c84', fontWeight: 'normal', lineHeight: 'normal' },
+    label12: { fontSize: '12px', color: '#ffffff', fontWeight: 'normal', lineHeight: 'normal' },
+    label13: { fontSize: '10px', color: '#97a0af', fontWeight: 'normal', lineHeight: 'normal' },
+    label14: { fontSize: '14px', color: '#676e7c', fontWeight: 'normal', lineHeight: 'normal' },
+    label15: { fontSize: '14px', color: '#091e42', fontWeight: 'normal', lineHeight: 'normal' },
+    label16: { fontSize: '14px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
+    label17: { fontSize: '16px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
+    label18: { fontSize: '14px', color: '#5e6c84', fontWeight: 'normal', lineHeight: 'normal' },
+    label19: { fontSize: '12px', lineHeight: '16px', fontWeight: 'normal', color: 'rgba(0, 0, 0, 0.87)' },
+    label20: { fontSize: '14px', color: '#2466ea', fontWeight: '500', lineHeight: 'normal' },
+    label21: { fontSize: '12px', color: '#2466ea', fontWeight: 'normal', lineHeight: 'normal' },
+    label22: { fontSize: '24px', color: '#5f6d85', lineHeight: '28px', fontWeight: 'normal' },
+    label23: { fontSize: '14px', color: '#ffffff', fontWeight: 'normal', lineHeight: 'normal' },
+    label24: { fontSize: '14px', color: '#5e6c84', fontWeight: '400', lineHeight: '20px' },
+    label25: { fontSize: '14px', color: '#5e6c84', fontWeight: '500', lineHeight: '20px' },
+    label26: { fontSize: '10px', color: '#091E42', fontWeight: '400', lineHeight: '12px' },
+    label27: { fontSize: '12px', color: '#2466EA', fontWeight: '500', lineHeight: '16px' },
+    label28: { color: '#FFF', fontSize: '12px', fontWeight: '500', lineHeight: '16px' },
+    label29: { color: '#FFF', fontSize: '10px', fontWeight: '400', lineHeight: '12px' },
+    label30: { color: '#FFF', fontSize: '10px', fontWeight: '400', lineHeight: '12px' },
+    label31: { fontSize: '12px', color: '#091E42', fontWeight: '400', lineHeight: '16px' },
+    label32: { lineHeight: '20px', fontSize: '14px', color: '#ffffff', fontWeight: '500' },
+    label33: { fontSize: '14px', color: '#2466EA', fontWeight: '500', lineHeight: '20px' },
+  };
+  
+  return types[type] || types.label1;
+};
+
+const CapLabel = ({
+  children,
+  type = 'label1',
+  className = '',
+  style = {},
+  fontWeight,
+  lineHeight,
+  ...rest
+}) => {
+  const typeStyles = getLabelTypeStyles(type);
 
-const CapLabel = ({ type = 'label1', children, fontWeight, lineHeight, ...rest }) => {
   return (
-    <LabelWrapper type={type} fontWeight={fontWeight} lineHeight={lineHeight} {...rest}>
+    <StyledLabelDiv
+      className={classnames('cap-label', type, className)}
+      style={style}
+      typeStyles={typeStyles}
+      fontWeight={fontWeight}
+      lineHeight={lineHeight}
+      {...rest}
+    >
       {children}
-    </LabelWrapper>
+    </StyledLabelDiv>
   );
 };
 
 CapLabel.propTypes = {
-  type: PropTypes.oneOf([
-    'label1',
-    'label2',
-    'label3',
-    'label4',
-    'label5',
-    'label6',
-    'label7',
-    'label8',
-    'label9',
-    'label10',
-    'label11',
-    'label12',
-    'label13',
-    'label14',
-    'label15',
-    'label16',
-    'label17',
-    'label18',
-    'label19',
-    'label20',
-    'label21',
-    'label22',
-    'label23',
-    'label24',
-    'label25',
-    'label26',
-    'label27',
-    'label28',
-    'label29',
-    'label30',
-    'label31',
-    'label32',
-    'label33',
-  ]),
   children: PropTypes.node,
+  type: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
   fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   lineHeight: PropTypes.string,
 };
 
-// Inline span version
-const CapLabelInline = ({ type = 'label1', children, fontWeight, lineHeight, ...rest }) => {
+CapLabel.defaultProps = {
+  type: 'label1',
+  className: '',
+  style: {},
+};
+
+// Static method for inline label
+const CapLabelInline = styled(({ children, type = 'label1', className = '', style = {}, fontWeight, lineHeight, ...rest }) => {
+  const typeStyles = getLabelTypeStyles(type);
+  
   return (
-    <LabelInline type={type} fontWeight={fontWeight} lineHeight={lineHeight} {...rest}>
+    <StyledLabelSpan
+      className={classnames('cap-label', type, className)}
+      style={style}
+      typeStyles={typeStyles}
+      fontWeight={fontWeight}
+      lineHeight={lineHeight}
+      {...rest}
+    >
       {children}
-    </LabelInline>
+    </StyledLabelSpan>
   );
-};
+})`
+  ${labelStyles}
+`;
 
 CapLabelInline.propTypes = {
-  type: PropTypes.oneOf([
-    'label1',
-    'label2',
-    'label3',
-    'label4',
-    'label5',
-    'label6',
-    'label7',
-    'label8',
-    'label9',
-    'label10',
-    'label11',
-    'label12',
-    'label13',
-    'label14',
-    'label15',
-    'label16',
-    'label17',
-    'label18',
-    'label19',
-    'label20',
-    'label21',
-    'label22',
-    'label23',
-    'label24',
-    'label25',
-    'label26',
-    'label27',
-    'label28',
-    'label29',
-    'label30',
-    'label31',
-    'label32',
-    'label33',
-  ]),
   children: PropTypes.node,
+  type: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
   fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   lineHeight: PropTypes.string,
 };
 
-CapLabel.Inline = CapLabelInline;
+CapLabelInline.defaultProps = {
+  type: 'label1',
+  className: '',
+  style: {},
+};
+
+// Attach the static method
+CapLabel.CapLabelInline = CapLabelInline;
 
-export default CapLabel;
+export default withStyles(CapLabel, labelStyles);

package/CapLabel/index.js

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