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

package/CapLabel/styles.js

@@ -1,221 +1,259 @@
 import styled, { css } from 'styled-components';
 import * as styledVars from '../styled/variables';
 
-const labels = {
-  label1: {
-    color: styledVars.CAP_G04,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label2: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label3: {
-    color: styledVars.CAP_G05,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label4: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label5: {
-    color: styledVars.CAP_G01,
-    fontSize: '10px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label6: {
-    color: styledVars.CAP_G06,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label7: {
-    color: styledVars.CAP_G04,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label8: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label9: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label10: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label11: {
-    color: styledVars.CAP_G04,
-    fontSize: '10px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label12: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label13: {
-    color: styledVars.CAP_G05,
-    fontSize: '10px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label14: {
-    color: styledVars.CAP_G03,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label15: {
-    color: styledVars.CAP_G01,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label16: {
-    color: styledVars.CAP_G01,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label17: {
-    color: styledVars.CAP_G01,
-    fontSize: '16px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label18: {
-    color: styledVars.CAP_G04,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label19: {
-    color: 'rgba(0, 0, 0, 0.87)',
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label20: {
-    color: styledVars.CAP_SECONDARY.base,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label21: {
-    color: styledVars.CAP_SECONDARY.base,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label22: {
-    color: styledVars.CAP_G04,
-    fontSize: '24px',
-    fontWeight: 'normal',
-    lineHeight: '28px',
-  },
-  label23: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label24: {
-    fontSize: '14px',
-    fontWeight: '400',
-    color: styledVars.CAP_G04,
-    lineHeight: '20px',
-  },
-  label25: {
-    fontSize: '14px',
-    fontWeight: '500',
-    color: styledVars.CAP_G04,
-    lineHeight: '20px',
-  },
-  label26: {
-    fontSize: '10px',
-    fontWeight: '400',
-    color: styledVars.CAP_G01,
-    lineHeight: '12px',
-  },
-  label27: {
-    fontSize: '12px',
-    fontWeight: '500',
-    color: styledVars.CAP_SECONDARY.base,
-    lineHeight: '16px',
-  },
-  label28: {
-    fontSize: '12px',
-    fontWeight: '500',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '16px',
-  },
-  label29: {
-    fontSize: '10px',
-    fontWeight: '400',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '12px',
-  },
-  label30: {
-    fontSize: '10px',
-    fontWeight: '400',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '12px',
-  },
-  label31: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: '400',
-    lineHeight: '16px',
-  },
-  label32: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: '20px',
-  },
-  label33: {
-    color: styledVars.CAP_SECONDARY.base,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: '20px',
-  },
-};
-
-const labelStyles = css`
-  font-size: ${props => labels[props.type].fontSize};
-  font-weight: ${props => props.fontWeight || labels[props.type].fontWeight};
-  color: ${props => labels[props.type].color};
-  line-height: ${props => props.lineHeight || labels[props.type].lineHeight || 'initial'};
+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 LabelWrapper = styled.div`
-  ${labelStyles}
+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 LabelInline = styled.span`
-  ${labelStyles}
-  display: inline-block;
-`;
+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;
+    }
+  }
+`;

package/CapRow/CapRow.js

@@ -1,22 +1,123 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row } from 'antd';
-import classNames from 'classnames';
-import { RowWrapper } from './styles';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import { StyledRow, rowStyles } from './styles';
+import withStyles from '../utils/withStyles';
+
+const CapRow = ({
+  children,
+  className = '',
+  style = {},
+  justify = 'start',
+  align = 'top',
+  gutter = 0,
+  wrap = true,
+  type,
+  width,
+  height,
+  margin,
+  padding,
+  prefixCls = 'ant-row',
+  fullWidth = false,
+  fullHeight = false,
+  fillSpace = false,
+  responsive = true,
+  vertical = false,
+  noWrap = false,
+  gap = null,
+  ...rest
+}) => {
+  // Use either the gap property or gutter for spacing
+  const gutterValue = gap !== null ? null : gutter;
+  const wrapValue = noWrap ? false : wrap;
 
-const CapRow = ({ className, children, ...rest }) => {
   return (
-    <RowWrapper>
-      <Row {...rest} className={classNames('cap-row', className)}>
-        {React.Children.toArray(children)}
-      </Row>
-    </RowWrapper>
+    <StyledRow
+      className={classnames(
+        'cap-row-v2',
+        {
+          'with-custom-width': width,
+          'with-custom-height': height,
+          'fill-space': fillSpace,
+          'full-width': fullWidth,
+          'full-height': fullHeight,
+          'ant-row-no-wrap': noWrap,
+          'with-gap': gap !== null,
+        },
+        className
+      )}
+      style={{
+        ...(gap !== null ? { gap: typeof gap === 'number' ? `${gap}px` : gap } : {}),
+        ...style,
+      }}
+      justify={justify}
+      align={align}
+      gutter={gutterValue}
+      wrap={wrapValue}
+      type={type}
+      width={width}
+      height={height}
+      margin={margin}
+      padding={padding}
+      prefixCls={prefixCls}
+      fullWidth={fullWidth}
+      fullHeight={fullHeight}
+      fillSpace={fillSpace}
+      responsive={responsive}
+      vertical={vertical}
+      {...rest}
+    >
+      {children}
+    </StyledRow>
   );
 };
 
 CapRow.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  style: PropTypes.object,
+  justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly']),
+  align: PropTypes.oneOf(['top', 'middle', 'bottom', 'stretch']),
+  gutter: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.number),
+  ]),
+  wrap: PropTypes.bool,
+  type: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  prefixCls: PropTypes.string,
+  fullWidth: PropTypes.bool,
+  fullHeight: PropTypes.bool,
+  fillSpace: PropTypes.bool,
+  responsive: PropTypes.bool,
+  vertical: PropTypes.bool,
+  noWrap: PropTypes.bool,
+  gap: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.number),
+    PropTypes.string,
+  ]),
+};
+
+CapRow.defaultProps = {
+  className: '',
+  style: {},
+  justify: 'start',
+  align: 'top',
+  gutter: 0,
+  wrap: true,
+  prefixCls: 'ant-row',
+  fullWidth: false,
+  fullHeight: false,
+  fillSpace: false,
+  responsive: true,
+  vertical: false,
+  noWrap: false,
 };
 
-export default CapRow;
+export default withStyles(CapRow, rowStyles);

package/CapRow/index.js

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

package/CapRow/styles.js

@@ -1,9 +1,50 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { Row } from 'antd-v5';
+import * as styledVars from '../styled/variables';
 
-export const RowWrapper = styled.div`
-  .cap-row {
+export const StyledRow = styled(Row)`
+  width: ${({ width, fullWidth }) => (fullWidth ? '100%' : width || 'auto')};
+  height: ${({ height, fullHeight }) => (fullHeight ? '100%' : height || 'auto')};
+  margin: ${({ margin }) => margin || 'inherit'};
+  padding: ${({ padding }) => padding || 'inherit'};
+  ${({ responsive }) => !responsive && css`
     display: flex;
-    flex-flow: row wrap;
-    min-width: 0;
+    flex-wrap: wrap;
+  `};
+  ${({ fillSpace }) => fillSpace && css`
+    flex: 1;
+  `};
+`;
+
+export const rowStyles = css`
+  &.cap-row-v2 {
+    &.with-custom-width {
+      width: auto;
+    }
+    
+    &.with-custom-height {
+      height: auto;
+    }
+    
+    &.fill-space {
+      flex: 1;
+    }
+    
+    &.full-width {
+      width: 100%;
+    }
+    
+    &.full-height {
+      height: 100%;
+    }
+
+    &.ant-row-no-wrap {
+      flex-wrap: nowrap;
+    }
+
+    &.with-gap {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
-`;
+`;

package/CapSkeleton/CapSkeleton.js

@@ -0,0 +1,17 @@
+/**
+ * CapSkeleton - Migrated to Ant Design v5
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Skeleton } from 'antd-v5';
+
+const CapSkeleton = ({ className, ...rest }) => {
+  const combinedClassName = `cap-skeleton-v2 ${className || ''}`.trim();
+  return <Skeleton className={combinedClassName} {...rest} />;
+};
+
+CapSkeleton.propTypes = {
+  className: PropTypes.string
+};
+
+export default CapSkeleton; 

package/CapSkeleton/index.js

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

package/CapSpin/CapSpin.js

@@ -0,0 +1,23 @@
+/**
+ * CapSpin - Migrated to Ant Design v5
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Spin } from 'antd-v5';
+
+const CapSpin = ({ className, ...rest }) => (
+  <Spin 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/CapSpin/index.js

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