@capillarytech/blaze-ui 0.3.3 → 0.3.4-beta.0

package/CapIcon/styles.js

@@ -1,76 +0,0 @@
-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: 0.857rem;
-    width: 0.857rem;
-    height: 0.857rem;
-  }
-  
-  &.s {
-    font-size: 1.143rem;
-    width: 1.143rem;
-    height: 1.143rem;
-  }
-  
-  &.m {
-    font-size: 1.714rem;
-    width: 1.714rem;
-    height: 1.714rem;
-  }
-  
-  &.l {
-    font-size: 2.286rem;
-    width: 2.286rem;
-    height: 2.286rem;
-  }
-  
-  &.with-text-label {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.571rem;
-  }
-`;
-
-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' ? '1.429rem' : size === 's' ? '1.714rem' : size === 'l' ? '3.429rem' : '2.571rem')};
-  height: ${({ size }) => (size === 'xs' ? '1.429rem' : size === 's' ? '1.714rem' : size === 'l' ? '3.429rem' : '2.571rem')};
-`;
-
-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,67 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Input } from 'antd-v5';
-import { WarningOutlined, CheckCircleOutlined } from '@ant-design-v5/icons';
-import styled from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-const StyledIcon = styled.span`
-  color: ${(props) => props.status === "error" && styledVars.CAP_RED};
-  color: ${(props) => props.status === "success" && styledVars.CAP_PRIMARY.base};
-`;
-
-const CapInput = React.forwardRef((props, ref) => {
-  const { 
-    alwaysShowFocus, 
-    errorMessage, 
-    isVerified, 
-    suffix, 
-    showSuffix = true, 
-    ...rest 
-  } = props;
-  
-  const inputRef = useRef(null);
-  
-  useEffect(() => {
-    if (alwaysShowFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [alwaysShowFocus]);
-  
-  const inputSuffix = (errorMessage && (
-    <StyledIcon status="error">
-      <WarningOutlined />
-    </StyledIcon>
-  )) || (isVerified && (
-    <StyledIcon status="success">
-      <CheckCircleOutlined />
-    </StyledIcon>
-  )) || suffix || null;
-
-  return (
-    <Input
-      {...rest}
-      ref={ref || inputRef}
-      suffix={showSuffix === false ? null : inputSuffix}
-      status={errorMessage ? 'error' : undefined}
-    />
-  );
-});
-
-CapInput.displayName = 'CapInput';
-
-CapInput.propTypes = {
-  alwaysShowFocus: PropTypes.bool,
-  errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  isVerified: PropTypes.bool,
-  size: PropTypes.oneOf(['large', 'middle', 'small']),
-  suffix: PropTypes.node,
-  showSuffix: PropTypes.bool,
-};
-
-CapInput.defaultProps = {
-  size: 'large',
-  showSuffix: true,
-};
-
-export default CapInput; 

package/CapInput/Number.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { InputNumber } from 'antd-v5';
-
-const CapInputNumber = React.forwardRef((props, ref) => {
-  const { size = 'large', ...rest } = props;
-
-  return (
-    <InputNumber
-      {...rest}
-      ref={ref}
-      size={size}
-    />
-  );
-});
-
-CapInputNumber.displayName = 'CapInputNumber';
-
-CapInputNumber.propTypes = {
-  size: PropTypes.oneOf(['large', 'middle', 'small']),
-  min: PropTypes.number,
-  max: PropTypes.number,
-  step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  precision: PropTypes.number,
-  decimalSeparator: PropTypes.string,
-  formatter: PropTypes.func,
-  parser: PropTypes.func,
-  controls: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  keyboard: PropTypes.bool,
-  stringMode: PropTypes.bool,
-};
-
-CapInputNumber.defaultProps = {
-  size: 'large',
-  keyboard: true,
-};
-
-export default CapInputNumber; 

package/CapInput/Search.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Input } from 'antd-v5';
-
-const { Search } = Input;
-
-const CapInputSearch = React.forwardRef((props, ref) => {
-  const { size = 'large', ...rest } = props;
-
-  return (
-    <Search
-      {...rest}
-      ref={ref}
-      size={size}
-    />
-  );
-});
-
-CapInputSearch.displayName = 'CapInputSearch';
-
-CapInputSearch.propTypes = {
-  size: PropTypes.oneOf(['large', 'middle', 'small']),
-  enterButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
-  loading: PropTypes.bool,
-  onSearch: PropTypes.func,
-};
-
-CapInputSearch.defaultProps = {
-  size: 'large',
-};
-
-export default CapInputSearch; 

package/CapInput/TextArea.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Input } from 'antd-v5';
-
-const { TextArea } = Input;
-
-const CapInputTextArea = React.forwardRef((props, ref) => {
-  const { size = 'large', ...rest } = props;
-
-  return (
-    <TextArea
-      {...rest}
-      ref={ref}
-      size={size}
-    />
-  );
-});
-
-CapInputTextArea.displayName = 'CapInputTextArea';
-
-CapInputTextArea.propTypes = {
-  size: PropTypes.oneOf(['large', 'middle', 'small']),
-  autoSize: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.shape({
-      minRows: PropTypes.number,
-      maxRows: PropTypes.number,
-    }),
-  ]),
-  rows: PropTypes.number,
-  maxLength: PropTypes.number,
-  showCount: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.shape({
-      formatter: PropTypes.func,
-    }),
-  ]),
-};
-
-CapInputTextArea.defaultProps = {
-  size: 'large',
-  rows: 4,
-};
-
-export default CapInputTextArea; 

package/CapInput/index.js

@@ -1,10 +0,0 @@
-import CapInput from './CapInput';
-import Number from './Number';
-import Search from './Search';
-import TextArea from './TextArea';
-
-CapInput.Number = Number;
-CapInput.Search = Search;
-CapInput.TextArea = TextArea;
-
-export default CapInput;

package/CapInput/messages.js

@@ -1,27 +0,0 @@
-/*
- * CapInput Messages
- *
- * This contains all the text for the CapInput component.
- */
-import { defineMessages } from 'react-intl';
-
-const scope = 'blaze.components.CapInput';
-
-export default defineMessages({
-  placeholder: {
-    id: `${scope}.placeholder`,
-    defaultMessage: 'Enter text...',
-  },
-  searchPlaceholder: {
-    id: `${scope}.searchPlaceholder`,
-    defaultMessage: 'Search...',
-  },
-  textAreaPlaceholder: {
-    id: `${scope}.textAreaPlaceholder`,
-    defaultMessage: 'Enter your text here...',
-  },
-  numberPlaceholder: {
-    id: `${scope}.numberPlaceholder`,
-    defaultMessage: 'Enter number...',
-  },
-}); 

package/CapInput/styles.js

@@ -1,81 +0,0 @@
-import { css } from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-export const inputStyles = css`
-  &.ant-input,
-  &.ant-input-affix-wrapper,
-  &.ant-input-number,
-  &.ant-input-textarea {
-    font-family: ${styledVars.FONT_FAMILY};
-    border-radius: ${styledVars.RADIUS_04};
-    transition: ${styledVars.TRANSITION_ALL};
-    
-    &:hover {
-      border-color: ${styledVars.CAP_G11};
-    }
-    
-    &:focus,
-    &.ant-input-affix-wrapper-focused {
-      border-color: ${styledVars.CAP_G01};
-      box-shadow: none;
-    }
-    
-    &.ant-input-status-error,
-    &.ant-input-affix-wrapper-status-error,
-    &.ant-input-number-status-error {
-      border-color: ${styledVars.CAP_RED};
-      
-      &:hover {
-        border-color: ${styledVars.CAP_RED};
-      }
-      
-      &:focus,
-      &.ant-input-affix-wrapper-focused {
-        border-color: ${styledVars.CAP_RED};
-        box-shadow: none;
-      }
-    }
-    
-    &.ant-input-disabled,
-    &.ant-input-affix-wrapper-disabled {
-      background-color: ${styledVars.CAP_G08};
-      cursor: not-allowed;
-    }
-  }
-  
-  /* Size variations */
-  &.ant-input-lg,
-  &.ant-input-affix-wrapper-lg {
-    font-size: 1rem;
-    padding: 0.714rem 0.857rem;
-  }
-  
-  /* TextArea specific */
-  &.ant-input-textarea {
-    .ant-input {
-      font-family: ${styledVars.FONT_FAMILY};
-    }
-  }
-  
-  /* Number input specific */
-  &.ant-input-number {
-    width: 100%;
-    
-    .ant-input-number-handler-wrap {
-      opacity: 1;
-    }
-  }
-  
-  /* Search input specific */
-  &.ant-input-search {
-    .ant-input-search-button {
-      background-color: ${styledVars.CAP_PRIMARY.base};
-      border-color: ${styledVars.CAP_PRIMARY.base};
-      
-      &:hover {
-        background-color: ${styledVars.CAP_PRIMARY.hover};
-        border-color: ${styledVars.CAP_PRIMARY.hover};
-      }
-    }
-  }
-`; 

package/CapLabel/CapLabel.js

@@ -1,83 +0,0 @@
-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 CapLabel = ({
-  children,
-  type = 'label1',
-  className = '',
-  style = {},
-  fontWeight,
-  lineHeight,
-  ...rest
-}) => {
-
-  return (
-    <StyledLabelDiv
-      className={classnames('cap-label', type, className)}
-      style={style}
-      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 }) => {
-  
-  return (
-    <StyledLabelSpan
-      className={classnames('cap-label', type, className)}
-      style={style}
-      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

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