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

package/CapUnifiedSelect/styles.js

@@ -23,200 +23,307 @@ 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 {
-    width: 100%;
-    font-family: ${styledVars.FONT_FAMILY};
-
-    .ant-select-selector {
-      border-radius: ${styledVars.RADIUS_04};
-      transition: ${styledVars.TRANSITION_ALL};
-      padding: 0 12px;
-      min-height: 32px;
+  &.cap-unified-select-container {
+    text-align: justify;
+    .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover{
+      background-color: #42b040;
+    }
+    .ant-tree-select-dropdown{
+      padding: 0px;
+    }
+    .cap-unified-tree-select-s{
+      height: 40px;
+      width: 160px;
+    }
+    .cap-unified-tree-select-m{
+      height: 40px;
+      width: 340px;
+    }
+    .cap-unified-tree-select-l{
+      height: 40px;
+      width: 400px;
+    }
+    .cap-unified-tree-select-xl{
+      height: 40px;
+      width: 480px;
+    }
+    .cap-unified-select-upload-container{
+      cursor: pointer;
       display: flex;
       align-items: center;
-      
-      &:hover {
-        border-color: ${styledVars.CAP_G11};
+      border-bottom: 1px solid #f0f0f0;
+      height: 40px;
+      padding-left: 15px;
+
+      .cap-unified-select-upload-label{
+        margin-left: 12px;
+        color: #2466EA;
       }
     }
-
-    /* Right slot content styles */
-    .cap-unified-select-right-slot {
+    .cap-unified-select-select-all-container{
+      padding: 9px 9px;
+      cursor: pointer;
       display: flex;
       align-items: center;
-      gap: 8px;
-      margin-left: 8px;
+      border-bottom: 1px solid #f0f0f0;
+      height: 40px;
     }
-
-    &.ant-select-focused {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_G01} !important;
-        box-shadow: none !important;
-      }
+    .ant-select-dropdown{
+      margin-top: -5px;
+      border-radius: 4px;
+      box-shadow: 0px 4px 8px -2px #091E4240, 0px 0px 1px 0px #091E424F;
+      max-height: 368px;
     }
-
-    /* Error state */
-    &.ant-select-status-error {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_RED};
-      }
+    .ant-select-prefix{
+      font-size: 14px;
+      font-weight: 400;
+      color: #091E42;
+      line-height: 20px;
     }
-
-    /* Disabled state */
-    &.ant-select-disabled {
-      .ant-select-selector {
-        background-color: ${styledVars.CAP_G08};
-        cursor: not-allowed;
-      }
+    .cap-unified-select-header-label{
+      font-family: ${styledVars.FONT_FAMILY};
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0px;
     }
-
-    /* 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};
-
-        &-option-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
-          color: ${styledVars.CAP_PRIMARY.base};
-          font-weight: 500;
-        }
-
-        &-option-active {
-          background-color: ${styledVars.CAP_G08};
-        }
-      }
-
-      /* Search input styles */
-      .ant-select-search {
-        padding: 8px;
-        
-        input {
-          border-radius: ${styledVars.RADIUS_04};
-          transition: ${styledVars.TRANSITION_ALL};
-          
-          &:focus {
-            border-color: ${styledVars.CAP_G01};
-            box-shadow: none;
-          }
-        }
-      }
+    .cap-unified-select-header-byline-text{
+      font-family: ${styledVars.FONT_FAMILY};
+      font-weight: 400;
+      font-size: 12px;
+      margin-top: -10px;
+      letter-spacing: 0px;
+      color: #97A0AF;
     }
-
-    /* Multiple selection styles */
-    &.ant-select-multiple {
-      .ant-select-selection-item {
-        background-color: ${styledVars.CAP_PRIMARY.light};
-        border-color: ${styledVars.CAP_PRIMARY.light};
-        border-radius: ${styledVars.RADIUS_04};
-        color: ${styledVars.CAP_PRIMARY.base};
-        margin: 2px 4px 2px 0;
-        padding: 0 8px;
-        height: 24px;
-        line-height: 22px;
-
-        &-remove {
-          color: ${styledVars.CAP_PRIMARY.base};
-          
-          &:hover {
-            color: ${styledVars.CAP_PRIMARY.hover};
-          }
-        }
+    .ant-input-affix-wrapper .ant-input-prefix{
+      left: 13px;
+    }
+    .ant-select-tree {
+      .ant-select-tree-node-content-wrapper{
+        background-color: transparent;
       }
-
-      .ant-select-selection-overflow {
-        flex-wrap: wrap;
-        gap: 4px;
+      .ant-select-tree-node-content-wrapper:hover {
+        background-color: transparent;
       }
     }
-
-    /* Tree select styles */
-    .ant-select-tree {
-      padding: 4px 0;
-
-      .ant-select-tree-node-content-wrapper {
-        padding: 4px 8px;
-        border-radius: ${styledVars.RADIUS_04};
-        transition: ${styledVars.TRANSITION_ALL};
-
-        &:hover {
-          background-color: ${styledVars.CAP_G08};
-        }
-
-        &.ant-select-tree-node-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
-          color: ${styledVars.CAP_PRIMARY.base};
-          font-weight: 500;
-        }
+    .ant-select-tree .ant-select-tree-switcher:not(.ant-select-tree-switcher-noop):hover:before{
+      background-color: transparent;
+    }
+    .ant-select-selection-item{
+      background: transparent;
+    }
+    .ant-select-multiple .ant-select-selection-wrap{
+      align-self: center;
+    }
+    .cap-unified-tree-select .ant-select-selector:hover{
+      border: 1px solid #7A869A;
+    }
+    .cap-unified-tree-select .ant-select-selector:focus{
+      border: 1px solid #7A869A;
+    }
+    .cap-unified-tree-select .cap-unified-select-select-all-checkbox{
+      height: 18px;
+      width: 18px;
+      border-color: #B3BAC5;
+      border-radius: 2px;
+    }
+    .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;
+    }
+    .cap-unified-tree-select .multiSelect-popup-container .ant-select-tree-treenode{
+      padding-left: 15px;
+    }
+    .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-treenode{
+      line-height: 40px;
+      margin-bottom: 0px;
+      .ant-select-tree-checkbox .ant-select-tree-checkbox-inner{
+        height: 18px;
+        width: 18px;
+        border: 2px solid #B3BAC5;
       }
-
-      .ant-select-tree-switcher {
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
+      &:hover{
+        background-color: #FFFBE6;
+        border-radius: 4px;
       }
-
-      .ant-select-tree-checkbox {
-        margin: 4px 8px 4px 0;
+      &:not(.ant-select-tree-treenode-disabled) .ant-select-tree-node-content-wrapper:hover{
+        background-color: none;
       }
     }
-
-    /* Size variations */
-    &.ant-select-lg {
-      .ant-select-selector {
-        height: 40px;
-        padding: 0 16px;
+    .ant-tree-select-dropdown .ant-select-tree .ant-select-tree-node-content-wrapper{
+      border-radius: 0px;
+      padding-left: 12px;
+    }
+    .ant-select-tree-treenode.ant-select-tree-treenode-selected{
+      background-color: #E9F0FE;
+      color: #2466EA;
+    }
+    .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;
+    }
+    .ant-tree-select:hover .ant-select-selector {
+      border-color: #7A869A;
+    }
+    .ant-tree-select-focused .ant-select-selector,
+    .ant-tree-select-open .ant-select-selector {
+      border-color: #7A869A;
+      box-shadow: none;
+      outline: none;
+    }
+    .cap-unified-select-search-container{
+      border-bottom: 1px solid #EBECF0 !important;
+      line-height: 40px !important;
+      .ant-input-affix-wrapper{
+        padding-left: 8px;
       }
-
-      .ant-select-selection-item {
-        height: 28px;
-        line-height: 26px;
+    }
+    .cap-unified-select-upload-button{
+      border: none;
+      padding-left: 15px;
+    }
+    .cap-unified-select-confirm-container {
+      display: flex;
+      align-items: center;
+      height: 48px;
+      padding: 7px;
+      border-top: 1px solid #EBECF0;
+    }
+    .cap-unified-select-confirm-button-group {
+      display: flex;
+      padding-left: 8px;
+      align-items: center;
+      width: 100%; /* so it can push the label */
+      button{
+        height: 32px;
+        width: 94px;
+      }
+      .cap-unified-select-confirm-button{
+        background-color: #6ebd6e;
       }
+      .cap-unified-select-cancel-button{
+        border: transparent;
+        box-shadow: none;
+      }
+    }
+    .cap-unified-select-selected-count {
+      display: flex;
+      margin-left: auto; /* pushes to far right */
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
+      color: #5E6C84;
+    }
+    .cap-unified-select-status{
+      color: #E83135;
     }
+    .cap-unified-select-search-container {
+      .ant-input-affix-wrapper {
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+      }
 
-    &.ant-select-sm {
-      .ant-select-selector {
-        height: 24px;
-        padding: 0 8px;
+      .ant-input-affix-wrapper:hover {
+        border: none;
+        box-shadow: none;
+        border-bottom: 1px solid #EBECF0;
       }
 
-      .ant-select-selection-item {
-        height: 20px;
-        line-height: 18px;
+      .ant-input-affix-wrapper:focus-within {
+        border: none;
+        box-shadow: none;
+        border-bottom: 1px solid #091E42;
+        outline: none;
       }
-    }
 
-    /* Loading state */
-    &.ant-select-loading {
-      .ant-select-arrow {
-        .anticon-loading {
-          color: ${styledVars.CAP_PRIMARY.base};
-        }
+      .ant-input {
+        border: none !important;
+        box-shadow: none !important;
       }
     }
   }

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,21 @@
 // Import and export all components
+export { default as CapIcon } from './CapIcon';
 export { default as CapInput } from './CapInput';
+export { default as CapLabel } from './CapLabel';
+export { default as CapRow } from './CapRow';
+export { default as CapSkeleton } from './CapSkeleton';
+export { default as CapSpin } from './CapSpin';
 export { default as CapTable } from './CapTable';
+export { default as CapTooltip } from './CapTooltip';
+export { default as CapTooltipWithInfo } from './CapTooltipWithInfo';
+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.5",
+  "version": "0.1.6-alpha.50",
   "description": "Capillary UI component library with Ant Design v5",
-  "main": "./dist/index.js",
-  "module": "./dist/esm/index.js",
-  "jsnext:main": "./dist/esm/index.js",
+  "main": "./index.js",
   "sideEffects": [
     "*.css",
     "*.less",
@@ -26,16 +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": {
-    "antd": "^5.12.0",
     "@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';