@capillarytech/blaze-ui 0.1.6-alpha.9 → 0.1.12

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;

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;
-`;

package/CapInfoNote/CapInfoNote.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Alert } from 'antd';
-import { InfoNoteWrapper } from './styles';
-import CapLabel from '../CapLabel';
-import CapRow from '../CapRow';
-
-const Note = ({ noteText }) => (
-  <CapLabel.Inline type="label4" className="note-text">
-    {noteText}
-  </CapLabel.Inline>
-);
-
-Note.propTypes = {
-  noteText: PropTypes.string,
-};
-
-const CapInfoNote = ({ message, style, noteText, type = 'info', className, ...rest }) => {
-  return (
-    <InfoNoteWrapper>
-      <Alert
-        message={(
-          <CapRow className="note-message-container">
-            <Note noteText={noteText} />:
-            <CapRow className="message-text">{message}</CapRow>
-          </CapRow>
-        )}
-        className={className}
-        type={type}
-        showIcon
-        style={{
-          marginTop: '0.857rem',
-          marginBottom: '0.857rem',
-          ...style,
-        }}
-        {...rest}
-      />
-    </InfoNoteWrapper>
-  );
-};
-
-CapInfoNote.propTypes = {
-  message: PropTypes.node,
-  style: PropTypes.object,
-  noteText: PropTypes.string,
-  type: PropTypes.string,
-  className: PropTypes.string,
-};
-
-CapInfoNote.defaultProps = {
-  type: 'info',
-};
-
-export default CapInfoNote;

package/CapInfoNote/index.js

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

package/CapInfoNote/styles.js

@@ -1,63 +0,0 @@
-import styled from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-export const InfoNoteWrapper = styled.div`
-  .note-text {
-    padding-left: ${styledVars.CAP_SPACE_24};
-    white-space: nowrap;
-    line-height: inherit;
-  }
-
-  .note-message-container {
-    display: flex;
-    .message-text {
-      margin-left: 0.22rem;
-    }
-  }
-
-  .ant-alert {
-    padding: 8px 12px;
-    border-radius: ${styledVars.RADIUS_04};
-    
-    .ant-alert-icon {
-      font-size: ${styledVars.ICON_SIZE_S};
-      top: 9px;
-    }
-
-    &.ant-alert-info {
-      background-color: ${styledVars.CAP_G09};
-      border: 1px solid ${styledVars.CAP_G07};
-
-      .ant-alert-icon {
-        color: ${styledVars.CAP_G01};
-      }
-    }
-
-    &.ant-alert-success {
-      background-color: ${styledVars.CAP_COLOR_01};
-      border: 1px solid ${styledVars.CAP_PRIMARY.base};
-
-      .ant-alert-icon {
-        color: ${styledVars.CAP_PRIMARY.base};
-      }
-    }
-
-    &.ant-alert-warning {
-      background-color: ${styledVars.CAP_COLOR_02};
-      border: 1px solid ${styledVars.CAP_ORANGE};
-
-      .ant-alert-icon {
-        color: ${styledVars.CAP_ORANGE};
-      }
-    }
-
-    &.ant-alert-error {
-      background-color: ${styledVars.CAP_COLOR_05};
-      border: 1px solid ${styledVars.CAP_RED};
-
-      .ant-alert-icon {
-        color: ${styledVars.CAP_RED};
-      }
-    }
-  }
-`;

package/CapInput/loadable.js

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

package/CapUnifiedSelect/loadable.js

@@ -1,3 +0,0 @@
-import loadable from '@loadable/component';
-
-export default loadable(() => import('./CapUnifiedSelect'));