@capillarytech/blaze-ui 0.1.6-alpha.40 → 0.1.6-alpha.42

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/CapLabel/CapLabel.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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);
+
+  return (
+    <StyledLabelDiv
+      className={classnames('cap-label', type, className)}
+      style={style}
+      typeStyles={typeStyles}
+      fontWeight={fontWeight}
+      lineHeight={lineHeight}
+      {...rest}
+    >
+      {children}
+    </StyledLabelDiv>
+  );
+};
+
+CapLabel.propTypes = {
+  children: PropTypes.node,
+  type: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  lineHeight: PropTypes.string,
+};
+
+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 (
+    <StyledLabelSpan
+      className={classnames('cap-label', type, className)}
+      style={style}
+      typeStyles={typeStyles}
+      fontWeight={fontWeight}
+      lineHeight={lineHeight}
+      {...rest}
+    >
+      {children}
+    </StyledLabelSpan>
+  );
+})`
+  ${labelStyles}
+`;
+
+CapLabelInline.propTypes = {
+  children: PropTypes.node,
+  type: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  lineHeight: PropTypes.string,
+};
+
+CapLabelInline.defaultProps = {
+  type: 'label1',
+  className: '',
+  style: {},
+};
+
+// Attach the static method
+CapLabel.CapLabelInline = CapLabelInline;
+
+export default withStyles(CapLabel, labelStyles);

package/CapLabel/index.js

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

package/CapLabel/styles.js

@@ -0,0 +1,259 @@
+import styled, { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const StyledLabelDiv = styled.div`
+  font-family: ${styledVars.FONT_FAMILY};
+  font-size: ${({ typeStyles }) => typeStyles?.fontSize || '12px'};
+  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || 'normal'};
+  color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
+  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
+  margin: 0;
+  padding: 0;
+`;
+
+export const StyledLabelSpan = styled.span`
+  font-family: ${styledVars.FONT_FAMILY};
+  font-size: ${({ typeStyles }) => typeStyles?.fontSize || '12px'};
+  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || 'normal'};
+  color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
+  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
+  margin: 0;
+  padding: 0;
+`;
+
+export const labelStyles = css`
+  &.cap-label {
+    font-family: ${styledVars.FONT_FAMILY};
+    
+    &.label1 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G04};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label2 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G01};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label3 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G05};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label4 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label5 {
+      font-size: 10px;
+      color: ${styledVars.CAP_G01};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label6 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G06};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label7 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G04};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label8 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label9 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G01};
+      line-height: 16px;
+      font-weight: normal;
+    }
+    
+    &.label10 {
+      font-size: 12px;
+      color: ${styledVars.CAP_WHITE};
+      line-height: 16px;
+      font-weight: normal;
+    }
+    
+    &.label11 {
+      font-size: 10px;
+      color: ${styledVars.CAP_G04};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label12 {
+      font-size: 12px;
+      color: ${styledVars.CAP_WHITE};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label13 {
+      font-size: 10px;
+      color: ${styledVars.CAP_G05};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label14 {
+      font-size: 14px;
+      color: #676e7c;
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label15 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G01};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label16 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label17 {
+      font-size: 16px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label18 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G04};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label19 {
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: normal;
+      color: rgba(0, 0, 0, 0.87);
+    }
+    
+    &.label20 {
+      font-size: 14px;
+      color: ${styledVars.CAP_BLUE01};
+      font-weight: 500;
+      line-height: normal;
+    }
+    
+    &.label21 {
+      font-size: 12px;
+      color: ${styledVars.CAP_BLUE01};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label22 {
+      font-size: 24px;
+      color: ${styledVars.CAP_G04};
+      line-height: 28px;
+      font-weight: normal;
+    }
+    
+    &.label23 {
+      font-size: 14px;
+      color: ${styledVars.CAP_WHITE};
+      font-weight: normal;
+      line-height: normal;
+    }
+    
+    &.label24 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G04};
+      font-weight: 400;
+      line-height: 20px;
+    }
+    
+    &.label25 {
+      font-size: 14px;
+      color: ${styledVars.CAP_G04};
+      font-weight: 500;
+      line-height: 20px;
+    }
+    
+    &.label26 {
+      font-size: 10px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 400;
+      line-height: 12px;
+    }
+    
+    &.label27 {
+      font-size: 12px;
+      color: ${styledVars.CAP_BLUE01};
+      font-weight: 500;
+      line-height: 16px;
+    }
+    
+    &.label28 {
+      color: ${styledVars.CAP_WHITE};
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 16px;
+    }
+    
+    &.label29 {
+      color: ${styledVars.CAP_WHITE};
+      font-size: 10px;
+      font-weight: 400;
+      line-height: 12px;
+    }
+    
+    &.label30 {
+      color: ${styledVars.CAP_WHITE};
+      font-size: 10px;
+      font-weight: 400;
+      line-height: 12px;
+    }
+    
+    &.label31 {
+      font-size: 12px;
+      color: ${styledVars.CAP_G01};
+      font-weight: 400;
+      line-height: 16px;
+    }
+    
+    &.label32 {
+      line-height: 20px;
+      font-size: 14px;
+      color: ${styledVars.CAP_WHITE};
+      font-weight: 500;
+    }
+    
+    &.label33 {
+      font-size: 14px;
+      color: ${styledVars.CAP_BLUE01};
+      font-weight: 500;
+      line-height: 20px;
+    }
+  }
+`;