@capillarytech/blaze-ui 0.1.6-alpha.6 → 0.1.6-alpha.61

package/CapUnifiedSelect/styles.js

@@ -1,17 +1,6 @@
 import styled, { css } from 'styled-components';
 import * as styledVars from '../styled/variables';
 
-export const SelectWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-`;
-
 export const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -23,201 +12,344 @@ export const HeaderWrapper = styled.div`
   }
 `;
 
-
-
-export const StyledInfoIcon = styled.span`
-  color: ${styledVars.CAP_G2};
-  font-size: 16px;
-  cursor: help;
-
-  &:hover {
-    color: ${styledVars.CAP_G1};
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    &:hover {
-      color: ${styledVars.CAP_G2};
-    }
-  }
-`;
-
 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;
-      display: flex;
-      align-items: center;
-      
-      &:hover {
-        border-color: ${styledVars.CAP_G11};
-      }
+  &.cap-unified-select-container {
+    text-align: justify;
+    &.disabled {
+      cursor: not-allowed;
     }
-
-    /* Right slot content styles */
-    .cap-unified-select-right-slot {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-left: 8px;
+    .cap-unified-select-suffix-icon {
+      color: ${styledVars.CAP_G01};
     }
-
-    &.ant-select-focused {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_G01} !important;
-        box-shadow: none !important;
+    .ant-select-outlined {
+      &:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) {
+        &:hover {
+          .ant-select-selector {
+            border-color: #7A869A;
+          }
+        }
       }
     }
-
-    /* Error state */
-    &.ant-select-status-error {
-      .ant-select-selector {
-        border-color: ${styledVars.CAP_RED};
-      }
+    .ant-select-selector .ant-select-selection-placeholder{
+      pointer-events: unset;
     }
-
-    /* Disabled state */
-    &.ant-select-disabled {
-      .ant-select-selector {
-        background-color: ${styledVars.CAP_G08};
-        cursor: not-allowed;
-      }
+    .ant-select-prefix {
+      font-size: 14px;
+      font-weight: 400;
+      color: #091e42;
+      line-height: 20px;
+    }
+    .cap-unified-select-header-label {
+      font-family: ${styledVars.FONT_FAMILY};
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0px;
+    }
+    .cap-unified-select-header-byline-text {
+      font-family: ${styledVars.FONT_FAMILY};
+      font-weight: 400;
+      font-size: 12px;
+      margin-top: -5px;
+      letter-spacing: 0px;
+      color: #97a0af;
+    }
+    .ant-input-affix-wrapper .ant-input-prefix {
+      left: 12px;
+    }
+    .cap-tooltip-with-info-icon {
+      margin-top: 2px;
     }
 
-    /* Dropdown styles */
+    .cap-unified-tree-select {
+      min-width: 200px;
+    }
+    
+    .ant-select.ant-select-focused.ant-select-outlined:not(.ant-select-disabled)
+    .ant-select-selector {
+      border-color: #7a869a !important;
+      box-shadow: none;
+      outline: 0;
+    }
+    
+    .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover {
+      background-color: #42b040;
+    }
     .ant-select-dropdown {
-      padding: 4px;
-      border-radius: ${styledVars.RADIUS_04};
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      margin-top: -8px !important;
+      border-radius: 4px;
+      box-shadow:
+      0px 4px 8px -2px #091e4240,
+      0px 0px 1px 0px #091e424f;
+      max-height: 360px;
+      overflow: visible;
+    }
+    
+    .ant-select-selection-item {
+      background: transparent;
+    }
+    .ant-select-multiple .ant-select-selection-wrap {
+      align-self: center;
+    }
+    .cap-unified-tree-select .ant-select-selector:focus {
+      border: 1px solid #7a869a;
+    }
+    .cap-unified-tree-select .ant-select-tree-treenode {
+      padding-left: 4px;
+    }
+    .cap-unified-select-status {
+      color: #e83135;
+    }
+  }
 
-      .ant-select-item {
-        border-radius: ${styledVars.RADIUS_04};
-        padding: 8px 12px;
-        transition: ${styledVars.TRANSITION_ALL};
+  /* Common styles for all types */
+  &.custom-popup-container {
+    width: max-content !important;
 
-        &-option-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
-          color: ${styledVars.CAP_PRIMARY.base};
-          font-weight: 500;
+    .ant-select-tree {
+      .ant-select-tree-node-content-wrapper {
+        background-color: transparent;
+      }
+      .ant-select-tree-node-content-wrapper:hover {
+        background-color: transparent;
+      }
+      .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;
+          border-radius: 4px;
         }
-
-        &-option-active {
-          background-color: ${styledVars.CAP_G08};
+        &:hover {
+          background-color: #fffbe6;
+        }
+        &:not(.ant-select-tree-treenode-disabled)
+          .ant-select-tree-node-content-wrapper:hover {
+          background-color: none;
         }
       }
-
-      /* 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;
-          }
+      .ant-select-tree-node-content-wrapper {
+        border-radius: 0px;
+        padding-left: 3px;
+      }
+      .ant-select-tree-indent {
+        margin-left: 12px;
+      }
+      .ant-select-tree-switcher:not(
+          .ant-select-tree-switcher-noop
+        ):hover:before {
+        background-color: transparent;
+      }
+      .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
+        background-color: #42b040;
+        border: 2px solid #42b040 !important;
+        &:hover {
+          background-color: #42b040;
+          border: 2px solid #42b040 !important;
         }
       }
+      .ant-select-tree-switcher .ant-select-tree-switcher-icon {
+        font-size: 12px;
+      }
+    }
+    .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
+      .ant-select-tree-checkbox-inner {
+      background-color: #42b040 !important;
+      border-color: #42b040 !important;
     }
 
-    /* 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;
+    .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
+      .ant-select-tree-checkbox-inner::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 10px;
+      height: 2px;
+      background-color: #fff;
+      transform: translate(-50%, -50%);
+      border-radius: 1px;
+    }
+    .cap-unified-select-upload-container {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #f0f0f0;
+      height: 40px;
+      padding-left: 16px;
 
-        &-remove {
-          color: ${styledVars.CAP_PRIMARY.base};
-          
-          &:hover {
-            color: ${styledVars.CAP_PRIMARY.hover};
-          }
+      .cap-unified-select-upload-label {
+        margin-left: 12px;
+        color: #2466ea;
+      }
+    }
+    .cap-unified-select-select-all-container {
+      padding: 9px 15px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #f0f0f0;
+      height: 40px;
+      .cap-unified-select-select-all-checkbox {
+        display: contents !important;
+        .ant-checkbox-inner {
+          height: 18px;
+          width: 18px;
+          border: 2px solid #b3bac5;
+          border-radius: 4px;
         }
       }
-
-      .ant-select-selection-overflow {
-        flex-wrap: wrap;
-        gap: 4px;
+      .ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover
+        .ant-checkbox-checked:not(.ant-checkbox-disabled)
+        .ant-checkbox-inner {
+        background-color: #42b040;
+        border: 2px solid #42b040 !important;
+      }
+      .ant-checkbox-indeterminate .ant-checkbox-inner {
+        background-color: #42b040 !important;
+        border-color: #42b040 !important;
+      }
+      .ant-checkbox-indeterminate .ant-checkbox-inner::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 10px;
+        height: 2px;
+        background-color: #fff;
+        transform: translate(-50%, -50%);
+        border-radius: 1px;
       }
     }
-
-    /* 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-treenode.ant-select-tree-treenode-selected {
+      background-color: #e9f0fe;
+    }
+    .ant-select-tree-list-holder-inner {
+      width: fit-content !important;
+      min-width: 100%;
+    }
+    .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-tree-switcher {
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
+    }
+    .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;
       }
-
-      .ant-select-tree-checkbox {
-        margin: 4px 8px 4px 0;
+      .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-search-container {
+      .ant-input-affix-wrapper {
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+        border-bottom: 1px solid transparent;
+        transition: border-color 0.2s ease;
+      }
 
-    /* Size variations */
-    &.ant-select-lg {
-      .ant-select-selector {
-        height: 40px;
-        padding: 0 16px;
+      .ant-input-affix-wrapper:hover {
+        border-bottom: 1px solid #7a869a !important;
+        box-shadow: none;
       }
 
-      .ant-select-selection-item {
-        height: 28px;
-        line-height: 26px;
+      .ant-input-affix-wrapper:focus-within {
+        border-bottom: 1px solid #091e42 !important;
+        box-shadow: none;
+        outline: none;
       }
-    }
 
-    &.ant-select-sm {
-      .ant-select-selector {
-        height: 24px;
-        padding: 0 8px;
+      .ant-input {
+        border: none !important;
+        box-shadow: none !important;
       }
+    }
+  }
 
-      .ant-select-selection-item {
-        height: 20px;
-        line-height: 18px;
+  &.custom-popup-container {
+    /* Multi Select */
+    .multiSelect-popup-container {
+      .ant-select-tree-list {
+        .ant-select-tree-treenode-leaf {
+          .ant-select-tree-switcher-noop {
+            display: none;
+          }
+        }
+      }
+      .ant-select-tree-indent {
+        margin-left: 15px;
       }
     }
 
-    /* Loading state */
-    &.ant-select-loading {
-      .ant-select-arrow {
-        .anticon-loading {
-          color: ${styledVars.CAP_PRIMARY.base};
+    /* Single Select */
+    .select-popup-container {
+      .ant-select-tree-list {
+        .ant-select-tree-treenode-leaf {
+          .ant-select-tree-switcher-noop {
+            display: none;
+          }
         }
       }
     }
   }
-`; 
+`;

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.6",
+  "version": "0.1.6-alpha.61",
   "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",
+    "@ant-design-v5/icons": "npm:@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/withMemo.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const withMemo = (Component, isEqual, log = false) => {
+  const defaultIsEqual = (prevProps, nextProps) => {
+    const prevKeys = Object.keys(prevProps).filter((key) => key !== 'intl');
+    const changedProps = [];
+    const isEqual = prevKeys.every((key) => {
+      const areEqual = prevProps[key] === nextProps[key];
+      if (!areEqual) {
+        changedProps.push({
+          key,
+          prevValue: prevProps[key],
+          nextValue: nextProps[key],
+        });
+      }
+      return areEqual;
+    });
+
+    if (log && changedProps.length > 0) {
+      // eslint-disable-next-line no-console
+      console.log('Props changed:', changedProps);
+    }
+
+    return isEqual;
+  };
+
+  if (typeof isEqual !== 'function') {
+    return React.memo(Component, defaultIsEqual);
+  }
+  return React.memo(Component, isEqual);
+};
+
+export default withMemo;

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;