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

package/CapLabel/styles.js

@@ -1,259 +1,221 @@
 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;
-`;
+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',
+  },
+};
 
-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'};
+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'};
   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;
-    }
-  }
+export const LabelWrapper = styled.div`
+  ${labelStyles}
 `;
+
+export const LabelInline = styled.span`
+  ${labelStyles}
+  display: inline-block;
+`;

package/CapRow/CapRow.js

@@ -1,123 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-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;
+import { Row } from 'antd';
+import classNames from 'classnames';
+import { RowWrapper } from './styles';
 
+const CapRow = ({ className, children, ...rest }) => {
   return (
-    <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>
+    <RowWrapper>
+      <Row {...rest} className={classNames('cap-row', className)}>
+        {React.Children.toArray(children)}
+      </Row>
+    </RowWrapper>
   );
 };
 
 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 withStyles(CapRow, rowStyles);
+export default CapRow;

package/CapRow/index.js

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

package/CapRow/styles.js

@@ -1,50 +1,9 @@
-import styled, { css } from 'styled-components';
-import { Row } from 'antd-v5';
-import * as styledVars from '../styled/variables';
+import styled from 'styled-components';
 
-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`
+export const RowWrapper = styled.div`
+  .cap-row {
     display: flex;
-    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));
-    }
+    flex-flow: row wrap;
+    min-width: 0;
   }
-`;
+`;

package/CapTable/loadable.js

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

package/CapTable/styles.js

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