@capillarytech/blaze-ui 0.1.3 → 0.1.4-alpha.1

package/CapInput/CapInput.js

@@ -0,0 +1,67 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+import { WarningOutlined, CheckCircleOutlined } from '@ant-design/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

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InputNumber } from 'antd';
+
+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

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+
+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

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+
+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

@@ -0,0 +1,11 @@
+import CapInput from './CapInput';
+import Search from './Search';
+import TextArea from './TextArea';
+import Number from './Number';
+
+// Attach subcomponents to the main component
+CapInput.Search = Search;
+CapInput.TextArea = TextArea;
+CapInput.Number = Number;
+
+export default CapInput; 

package/CapInput/loadable.js

@@ -0,0 +1,9 @@
+/**
+ * Asynchronously loads the CapInput component
+ */
+
+import { loadable } from '@capillarytech/cap-ui-utils';
+
+const CapInputLoadable = loadable(() => import('./index'));
+
+export default CapInputLoadable; 

package/CapInput/messages.js

@@ -0,0 +1,27 @@
+/*
+ * 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

@@ -0,0 +1,81 @@
+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: 14px;
+    padding: 10px 12px;
+  }
+  
+  /* 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/index.js

@@ -0,0 +1,6 @@
+// Import and export all components
+export { default as CapInput } from './CapInput';
+
+// Export styled utilities
+export * as styledVars from './styled/variables';
+export { default as styled } from './styled'; 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.3",
+  "version": "0.1.4-alpha.1",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -18,11 +18,12 @@
   },
   "license": "ISC",
   "files": [
-    "dist/",
-    "!dist/**/*.test.js",
-    "!dist/**/*.spec.js",
-    "!dist/**/__tests__",
-    "!dist/**/__snapshots__"
+    "*",
+    "!*.test.js",
+    "!*.spec.js",
+    "!**/__tests__",
+    "!**/__snapshots__",
+    "!**/tests"
   ],
   "homepage": "https://github.com/Capillary/blaze-ui",
   "peerDependencies": {

package/styled/index.js

@@ -0,0 +1,6 @@
+import * as styledVars from './variables';
+
+export default styledVars;
+
+// Re-export all variables for easier access
+export * from './variables'; 

package/styled/variables.js

@@ -0,0 +1,89 @@
+/* Color Palette */
+//========================
+
+// Primary colors
+export const CAP_PRIMARY = {
+  base: "#47af46",
+  hover: "#1f9a1d",
+  disabled: "#a1d8a0",
+};
+
+// Secondary colors
+export const CAP_SECONDARY = {
+  base: "#2466ea",
+  light: 'rgba("#2466ea", 0.1)',
+};
+
+// Custom colors
+export const CAP_ORANGE = "#f87d23";
+export const CAP_ORANGE01 = "#ffe5d2";
+export const CAP_ORANGE02 = "#fa7d02";
+export const CAP_YELLOW = "#fec52e";
+export const CAP_YELLOW01 = "#e8bc25";
+export const CAP_YELLOW02 = "#f9d438";
+export const CAP_BLUE = "#23cccc";
+export const CAP_PURPLE = "#8517e5";
+export const CAP_PINK = "#e51fa3";
+export const CAP_RED = "#ea213a";
+export const CAP_ICON = "#7a869a";
+export const CAP_PALE_GREY = "#e9f0fe";
+export const CAP_BLUE01 = "#2466eb";
+export const CAP_BLUE02 = "#1d61ee";
+export const CAP_RED01 = "#e51fa3";
+export const CAP_RED02 = "#f5222d";
+export const CAP_RED03 = "#ed1b34";
+export const CAP_PURPLE01 = "#6563ff";
+export const CAP_PURPLE02 = "#a451ff";
+export const CAP_PURPLE03 = "#f2e7fe";
+export const CAP_PURPLE04 = "#d4e1fc";
+export const CAP_GREEN01 = "#6bb56b";
+export const CAP_GREEN02 = "#ecf7ec";
+
+// Grey colors
+export const CAP_G01 = "#091e42";
+export const CAP_G02 = "#253858";
+export const CAP_G03 = "#42526e";
+export const CAP_G04 = "#5e6c84";
+export const CAP_G05 = "#97a0af";
+export const CAP_G06 = "#b3bac5";
+export const CAP_G07 = "#dfe2e7";
+export const CAP_G08 = "#ebecf0";
+export const CAP_G09 = "#f4f5f7";
+export const CAP_G10 = "#fafbfc";
+export const CAP_G11 = "#7a869a";
+export const CAP_G12 = "#e8e8e8";
+export const CAP_G13 = "#ecece7";
+export const CAP_G14 = "#e9f0fd";
+export const CAP_G15 = "#efefef";
+export const CAP_G16 = "#2a2a2a";
+export const CAP_G17 = "#7F8185";
+export const CAP_G18 = "#dcdee2";
+export const CAP_G19 = "#8a9ab2";
+export const CAP_G20 = "#c2c2c2";
+
+export const CAP_WHITE = "#ffffff";
+export const CAP_BLACK = "#000000";
+
+/* Fonts */
+// ==============
+export const FONT_FAMILY = '"Roboto", sans-serif';
+export const FONT_WEIGHT_REGULAR = 400;
+export const FONT_WEIGHT_MEDIUM = 500;
+
+/* Spacing */
+// ==============
+export const SPACING_04 = "4px";
+export const SPACING_08 = "8px";
+export const SPACING_12 = "12px";
+export const SPACING_16 = "16px";
+export const SPACING_24 = "24px";
+export const SPACING_32 = "32px";
+
+/* Border Radius */
+// ==============
+export const RADIUS_04 = "4px";
+export const RADIUS_08 = "8px";
+
+/* Transition */
+// ==============
+export const TRANSITION_ALL = "all 0.3s ease";