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

package/CapUnifiedSelect/styles.js

@@ -23,26 +23,142 @@ export const HeaderWrapper = styled.div`
   }
 `;
 
+export const DropdownFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-top: 1px solid #f0f0f0;
+  
+  .footer-buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .total-count {
+    color: #8c8c8c;
+    font-size: 12px;
+  }
+`;
+
+export const SearchInputWrapper = styled.div`
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+`;
+
+export const SelectAllCheckbox = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 1px solid #f0f0f0;
+  user-select: none;
+  
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
+`;
+
+export const NoResultWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #8c8c8c;
+  font-size: 14px;
+`;
+
 
 
 export const StyledInfoIcon = styled.span`
-  color: ${styledVars.CAP_G2};
+  color: ${styledVars.CAP_G05};
   font-size: 16px;
   cursor: help;
+  margin-left: 4px;
+  display: flex;
+  align-items: center;
 
   &:hover {
-    color: ${styledVars.CAP_G1};
+    color: ${styledVars.CAP_G03};
   }
 
   &.disabled {
     cursor: not-allowed;
     &:hover {
-      color: ${styledVars.CAP_G2};
+      color: ${styledVars.CAP_G05};
     }
   }
 `;
 
 export const selectStyles = css`
+  &.cap-unified-select-container {
+    .cap-unified-tree-select{
+      height: 32px !important;
+      width: 340px !important;
+    }
+    .ant-select-prefix{
+      font-size: 14px !important;
+      font-weight: 400 !important;
+      color: #091E42 !important;
+      line-height: 20px !important;
+    }
+    .cap-unified-select-header-label{
+      font-family: ${styledVars.FONT_FAMILY} !important;
+      font-weight: 500 !important;
+      font-size: 14px !important;
+      line-height: 20px !important;
+      letter-spacing: 0px !important;
+    }
+    .cap-unified-select-header-tooltip{
+      width: 16px !important;
+      height: 16px !important;
+      color: #B3BAC5 !important;
+    }
+    .cap-unified-select-header-byline-text{
+      font-family: ${styledVars.FONT_FAMILY} !important;
+      font-weight: 400 !important;
+      font-size: 12px !important;
+      margin-top: -10px;
+      letter-spacing: 0px !important;
+      color: #97A0AF !important;
+    }
+    .cap-unified-tree-select .ant-select-selector:hover{
+      border: 1px solid #7A869A !important;
+    }
+    .cap-unified-tree-select .select-popup-container .ant-select-tree-switcher-noop,
+    .cap-unified-tree-select .multiSelect-popup-container .ant-select-tree-switcher-noop {
+      display: none !important;
+    }
+    .ant-tree-select-dropdown .treeSelect-popup-container .ant-select-tree .ant-select-tree-treenode{
+      margin: 0px !important;
+    }
+    .cap-unified-tree-select .multiSelect-popup-container .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-treenode{
+      margin-left: 10px !important;
+    }
+    .multiSelect-popup-container .ant-select-tree-treenode{
+      margin-left: 10px !important;
+    }
+    .cap-unified-select-no-result{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 200px;
+      color: #8c8c8c;
+      font-size: 14px;
+    }
+    .cap-unified-select-no-result-icon{
+      font-size: 36px;
+      margin-bottom: 8px;
+      color: #bfbfbf;
+    }
+    .cap-unified-select-no-result-text{
+      font-weight: 500;
+    }
+  }
   &.cap-unified-select {
     width: 100%;
     font-family: ${styledVars.FONT_FAMILY};
@@ -91,30 +207,54 @@ export const selectStyles = css`
     }
 
     /* Dropdown styles */
-    .ant-select-dropdown {
-      padding: 4px;
-      border-radius: ${styledVars.RADIUS_04};
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-
-      .ant-select-item {
-        border-radius: ${styledVars.RADIUS_04};
-        padding: 8px 12px;
-        transition: ${styledVars.TRANSITION_ALL};
+    .ant-select-dropdown, 
+    &.ant-select-dropdown,
+    &.ant-select-dropdown-placement-bottomLeft {
+      padding: 0;
+      border-radius: 12px !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+
+      /* Option base style - no background */
+      .ant-select-item-option {
+        padding: 10px 16px;
+        font-size: 14px;
+        color: #1c2530;
+        font-weight: 500;
+        background-color: transparent !important;
+
+        /* Hover state only */
+        &:not(.ant-select-item-option-disabled):hover {
+          background-color: #fffbe6 !important;
+          border-radius: 4px;
+          color: #1c2530 !important;
+        }
+        
+        /* Ensure unselected hover has proper background even after removal */
+        &:hover:not(.ant-select-item-option-disabled):not(.ant-select-item-option-selected) {
+          background-color: #fffbe6 !important;
+          color: #1c2530 !important;
+          border-radius: 4px;
+        }
 
-        &-option-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
-          color: ${styledVars.CAP_PRIMARY.base};
+        /* Selected state */
+        &-selected:not(.ant-select-item-option-disabled) {
+          background-color: #e9f0fe !important;
+          color: #1c2530 !important;
           font-weight: 500;
         }
 
-        &-option-active {
-          background-color: ${styledVars.CAP_G08};
+        /* Remove active state background unless hovered */
+        &-active:not(:hover):not(.ant-select-item-option-disabled) {
+          background-color: transparent !important;
         }
       }
 
       /* Search input styles */
+      .ant-select-dropdown-search,
       .ant-select-search {
-        padding: 8px;
+        padding: 8px 12px;
+        border-bottom: 1px solid #f0f0f0;
         
         input {
           border-radius: ${styledVars.RADIUS_04};
@@ -126,15 +266,90 @@ export const selectStyles = css`
           }
         }
       }
+      
+      /* Scrollbar */
+      .rc-virtual-list-scrollbar-thumb {
+        background-color: #dcdcdc;
+        border-radius: 4px;
+      }
+
+      /* Divider */
+      .ant-divider-horizontal {
+        margin: 0;
+      }
+      
+      /* No result UI */
+      .no-result {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+        color: #8c8c8c;
+        font-size: 14px;
+      }
+      
+      /* Dropdown search inside custom popup */
+      .dropdown-search {
+        padding: 8px;
+        border-bottom: 1px solid #f0f0f0;
+      }
+      
+      /* Select all checkbox */
+      .select-all-checkbox {
+        display: flex;
+        align-items: center;
+        padding: 8px 12px;
+        cursor: pointer;
+        font-weight: 500;
+        border-bottom: 1px solid #f0f0f0;
+        user-select: none;
+        
+        input[type="checkbox"] {
+          cursor: pointer;
+        }
+      }
+      
+      /* Footer buttons */
+      .dropdown-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px;
+        border-top: 1px solid #f0f0f0;
+      }
+      
+      /* Selected counter */
+      .selected-count {
+        color: #8c8c8c;
+        font-size: 12px;
+      }
+
+      /* Unchecked border color */
+      .ant-checkbox-inner {
+        border-color: #42b040; /* Your desired border color */
+      }
+
+      /* When checked - change background and border */
+      .ant-checkbox-checked .ant-checkbox-inner {
+        background-color: #42b040; /* Fill color when checked */
+        border-color: #42b040;
+      }
+
+      /* Checkmark color */
+      .ant-checkbox-checked .ant-checkbox-inner::after {
+        border-color: #42b040; /* The checkmark tick color */
+      }
     }
 
     /* Multiple selection styles */
     &.ant-select-multiple {
       .ant-select-selection-item {
-        background-color: ${styledVars.CAP_PRIMARY.light};
-        border-color: ${styledVars.CAP_PRIMARY.light};
+        background-color: #e9f0fe !important;
+        border: none;
         border-radius: ${styledVars.RADIUS_04};
-        color: ${styledVars.CAP_PRIMARY.base};
+        color: #1c2530;
+        font-weight: 500;
         margin: 2px 4px 2px 0;
         padding: 0 8px;
         height: 24px;
@@ -162,15 +377,17 @@ export const selectStyles = css`
       .ant-select-tree-node-content-wrapper {
         padding: 4px 8px;
         border-radius: ${styledVars.RADIUS_04};
-        transition: ${styledVars.TRANSITION_ALL};
+        background-color: transparent !important;
+        transition: background 0.3s;
 
         &:hover {
-          background-color: ${styledVars.CAP_G08};
+          background-color: #fffbe6 !important;
+          color: #1c2530 !important;
+          border-radius: 4px;
         }
 
         &.ant-select-tree-node-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
-          color: ${styledVars.CAP_PRIMARY.base};
+          color: #1c2530;
           font-weight: 500;
         }
       }
@@ -184,6 +401,25 @@ export const selectStyles = css`
       .ant-select-tree-checkbox {
         margin: 4px 8px 4px 0;
       }
+      
+      .ant-select-tree-treenode {
+        padding: 2px 0;
+        
+        &:hover {
+          background-color: transparent;
+        }
+      }
+      
+      .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
+        background-color: #42b040;
+        border-color: #42b040;
+      }
+
+      .ant-select-tree-checkbox-checked .ant-select-tree-node-content-wrapper {
+        background-color: #e9f0fe !important;
+        color: #1c2530 !important;
+        font-weight: 500;
+      }
     }
 
     /* Size variations */
@@ -217,7 +453,17 @@ export const selectStyles = css`
         .anticon-loading {
           color: ${styledVars.CAP_PRIMARY.base};
         }
-      }
+      } 
+    }
+
+    &.cap-unified-tree-select .ant-select-selection-overflow {
+      display: none; /* hides pill wrapper */
+    }
+
+    &.cap-unified-tree-select .suffix-counter {
+      color: #1c2530;
+      font-weight: 500;
+      margin-right: 12px; /* optional, adjust spacing */
     }
   }
 `; 

package/assets/upload.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00031 13.0631V3.79511L4.46431 6.33111C4.07431 6.72111 3.44131 6.72111 3.05031 6.33111C2.65931 5.94011 2.65931 5.30711 3.05031 4.91611L7.29331 0.674109C7.68331 0.283109 8.31631 0.283109 8.70731 0.674109L12.9493 4.91611C13.3403 5.30711 13.3403 5.94011 12.9493 6.33111C12.5593 6.72111 11.9263 6.72111 11.5353 6.33111L9.00031 3.79511V13.0631C9.00031 13.5761 8.55231 13.9911 8.00031 13.9911C7.44731 13.9911 7.00031 13.5761 7.00031 13.0631ZM14.9975 12.9942C15.5495 12.9942 15.9975 13.4412 15.9975 13.9942V16.9302C15.9985 16.9502 15.9995 16.9712 15.9995 16.9912C15.9995 17.0342 15.9965 17.0772 15.9895 17.1192C15.9285 17.6122 15.5075 17.9942 14.9975 17.9942C14.9565 17.9942 14.9175 17.9922 14.8785 17.9872C14.8405 17.9902 14.8015 17.9912 14.7625 17.9912H1.23751C1.21394 17.9912 1.19217 17.9861 1.1704 17.981C1.15245 17.9768 1.13449 17.9726 1.11551 17.9712C1.10076 17.9725 1.0868 17.9767 1.07275 17.9809C1.05538 17.986 1.03786 17.9912 1.01851 17.9912C0.606512 17.9912 0.253512 17.7412 0.101512 17.3852C0.0365117 17.2642 -0.000488281 17.1312 -0.000488281 16.9912C-0.000488281 16.9769 0.00426292 16.9638 0.00903728 16.9506C0.013294 16.9388 0.017569 16.9269 0.0185117 16.9142V13.9912C0.0185117 13.4382 0.466512 12.9912 1.01851 12.9912C1.57151 12.9912 2.01851 13.4382 2.01851 13.9912V15.9912H13.9975V13.9942C13.9975 13.4412 14.4455 12.9942 14.9975 12.9942Z" fill="#2466EA"/>
+</svg>

package/index.js

@@ -1,10 +1,16 @@
 // Import and export all components
 export { default as CapInput } from './CapInput';
+export { default as CapSkeleton } from './CapSkeleton';
+export { default as CapSpin } from './CapSpin';
 export { default as CapTable } from './CapTable';
+export { default as CapUnifiedSelect } from './CapUnifiedSelect';
 
 // Export utilities
 export { default as LocaleHoc } from './LocaleHoc';
 
 // Export styled utilities
 export * as styledVars from './styled/variables';
-export { default as styled } from './styled'; 
+export { default as styled } from './styled';
+
+// Export utils
+export * as Utils from './utils';

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.4",
-  "description": "Capillary UI component library",
-  "main": "./dist/index.js",
-  "module": "./dist/esm/index.js",
-  "jsnext:main": "./dist/esm/index.js",
+  "version": "0.1.6-alpha.40",
+  "description": "Capillary UI component library with Ant Design v5",
+  "main": "./index.js",
   "sideEffects": [
     "*.css",
     "*.less",
@@ -26,14 +24,12 @@
     "!**/tests"
   ],
   "homepage": "https://github.com/Capillary/blaze-ui",
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
   "dependencies": {
+    "@ant-design/icons": "^5.2.6",
     "@capillarytech/cap-ui-utils": "^3.0.4",
+    "antd-v5": "npm:antd@^5.26.7",
     "prop-types": "^15.8.1",
-    "styled-components": "^5.3.11",
-    "react-intl": "^6.5.0"
+    "react-intl": "2.7.2",
+    "styled-components": "^5.3.11"
   }
 }

package/utils/index.js

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

package/utils/withStyles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+/**
+ * Enhances a React component with additional styles using styled-components.
+ * @param {React.ComponentType} WrappedComponent - The React component to enhance.
+ * @param {TemplateStringsArray} styles - CSS styles as a TemplateStringsArray.
+ * @returns {React.ComponentType} Returns the enhanced styled component.
+ */
+const withStyledComponent = (WrappedComponent, styles) => {
+  /**
+   * A styled component generated by combining WrappedComponent with additional styles.
+   * @type {React.ComponentType}
+   */
+  const StyledComponent = styled(WrappedComponent)`
+    ${styles};
+  `;
+
+  // Set default props from the original component to the styled component
+  StyledComponent.defaultProps = WrappedComponent.defaultProps;
+
+  return StyledComponent;
+};
+
+export default withStyledComponent;

package/CapHeading/CapHeading.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { HeadingWrapper, HeadingSpan } from './styles';
-
-const CapHeading = ({ type = 'h5', children, as, ...rest }) => {
-  return (
-    <HeadingWrapper type={type} as={as || 'div'} {...rest}>
-      {children}
-    </HeadingWrapper>
-  );
-};
-
-CapHeading.propTypes = {
-  type: PropTypes.oneOf([
-    'h0',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'h7',
-    'h8',
-    'h9',
-    'h10',
-    'label1',
-    'label2',
-    'label3',
-    'label4',
-    'label5',
-    'label6',
-  ]),
-  children: PropTypes.node,
-  as: PropTypes.string,
-};
-
-// Inline span version
-const CapHeadingSpan = ({ type = 'h5', children, ...rest }) => {
-  return (
-    <HeadingSpan type={type} {...rest}>
-      {children}
-    </HeadingSpan>
-  );
-};
-
-CapHeadingSpan.propTypes = {
-  type: PropTypes.oneOf([
-    'h0',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'h7',
-    'h8',
-    'h9',
-    'h10',
-    'label1',
-    'label2',
-    'label3',
-    'label4',
-    'label5',
-    'label6',
-  ]),
-  children: PropTypes.node,
-};
-
-CapHeading.Span = CapHeadingSpan;
-
-export default CapHeading;

package/CapHeading/index.js

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

package/CapHeading/styles.js

@@ -1,125 +0,0 @@
-import styled, { css } from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-const headings = {
-  h0: {
-    fontSize: '28px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '36px',
-  },
-  h1: {
-    fontSize: '24px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '32px',
-  },
-  h2: {
-    fontSize: '20px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '28px',
-  },
-  h3: {
-    fontSize: '16px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '24px',
-  },
-  h4: {
-    fontSize: '14px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '20px',
-  },
-  h5: {
-    fontSize: '14px',
-    fontWeight: 'normal',
-    color: styledVars.CAP_G01,
-    lineHeight: '20px',
-  },
-  h6: {
-    color: styledVars.CAP_G04,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: '20px',
-  },
-  h7: {
-    fontSize: '20px',
-    fontWeight: '500',
-    color: styledVars.CAP_G04,
-    lineHeight: '28px',
-  },
-  h8: {
-    fontSize: '14px',
-    fontWeight: '400',
-    color: styledVars.CAP_G01,
-    lineHeight: '20px',
-  },
-  h9: {
-    fontSize: '14px',
-    fontWeight: '500',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '20px',
-  },
-  h10: {
-    fontSize: '12px',
-    fontWeight: '500',
-    color: styledVars.CAP_G01,
-    lineHeight: '16px',
-  },
-  label1: {
-    color: styledVars.CAP_G04,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '20px',
-  },
-  label2: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '20px',
-  },
-  label3: {
-    color: styledVars.CAP_G05,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '20px',
-  },
-  label4: {
-    color: styledVars.CAP_G04,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label5: {
-    color: styledVars.CAP_G04,
-    fontSize: '16px',
-    fontWeight: 'normal',
-    lineHeight: '24px',
-  },
-  label6: {
-    color: styledVars.CAP_G01,
-    fontSize: '16px',
-    fontWeight: 'normal',
-    lineHeight: '24px',
-  },
-};
-
-const headingStyles = css`
-  font-size: ${props => headings[props.type].fontSize};
-  font-weight: ${props => headings[props.type].fontWeight};
-  color: ${props => headings[props.type].color};
-  line-height: ${props => headings[props.type].lineHeight};
-  margin: 0;
-  padding: 0;
-`;
-
-export const HeadingWrapper = styled.div`
-  ${headingStyles}
-`;
-
-export const HeadingSpan = styled.span`
-  ${headingStyles}
-  display: inline-block;
-`;