@capillarytech/blaze-ui 0.1.4-alpha.6 → 0.1.5

package/CapUnifiedSelect/styles.js

@@ -0,0 +1,182 @@
+import { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+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};
+      }
+    }
+
+    /* Right slot content styles */
+    .cap-unified-select-right-slot {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: 8px;
+    }
+
+    &.ant-select-focused {
+      .ant-select-selector {
+        border-color: ${styledVars.CAP_G01} !important;
+        box-shadow: none !important;
+      }
+    }
+
+    /* Error state */
+    &.ant-select-status-error {
+      .ant-select-selector {
+        border-color: ${styledVars.CAP_RED};
+      }
+    }
+
+    /* Disabled state */
+    &.ant-select-disabled {
+      .ant-select-selector {
+        background-color: ${styledVars.CAP_G08};
+        cursor: not-allowed;
+      }
+    }
+
+    /* 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;
+          }
+        }
+      }
+    }
+
+    /* 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-select-selection-overflow {
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+    }
+
+    /* 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-switcher {
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+      }
+
+      .ant-select-tree-checkbox {
+        margin: 4px 8px 4px 0;
+      }
+    }
+
+    /* Size variations */
+    &.ant-select-lg {
+      .ant-select-selector {
+        height: 40px;
+        padding: 0 16px;
+      }
+
+      .ant-select-selection-item {
+        height: 28px;
+        line-height: 26px;
+      }
+    }
+
+    &.ant-select-sm {
+      .ant-select-selector {
+        height: 24px;
+        padding: 0 8px;
+      }
+
+      .ant-select-selection-item {
+        height: 20px;
+        line-height: 18px;
+      }
+    }
+
+    /* Loading state */
+    &.ant-select-loading {
+      .ant-select-arrow {
+        .anticon-loading {
+          color: ${styledVars.CAP_PRIMARY.base};
+        }
+      }
+    }
+  }
+`; 

package/LocaleHoc/index.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { injectIntl } from 'react-intl';
+import enTranslation from '../translations/en';
+
+const prefix = `blaze.components`;
+
+const LocaleHoc = (WrapperComponent, customProps) => {
+  const Wrapper = (props) => {
+    const componentName = customProps.key;
+    const translatedDefaults = enTranslation[componentName];
+    const { intl } = props;
+
+    const translatedProps = useMemo(() => {
+      if(!translatedDefaults) return {};
+      return Object.keys(translatedDefaults).reduce((acc, key) => {
+        const id = `${prefix}.${componentName}.${key}`
+        const defaultMessage = translatedDefaults[key]
+        try{
+          acc[key] = intl.formatMessage({ id, defaultMessage });
+        }catch(err){
+          acc[key] = defaultMessage;
+        }
+        return acc;
+      }, {});
+    }, [translatedDefaults, intl]);
+
+    return (
+      <WrapperComponent
+        {...translatedProps}
+        {...props}
+      />
+    );
+  }
+
+  return injectIntl(Wrapper);
+};
+
+export default LocaleHoc;