brainly-style-guide - npm Package Compare versions

Comparing version 183.0.2 to 183.1.0

commonjs/components/box/Box.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,8 +10,14 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -61,3 +69,3 @@
  */
-var Box = function Box(_ref) {
+var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _classNames;
@@ -82,7 +90,12 @@
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
-    className: classes
+    className: classes,
+    ref: ref
   }), children);
-};
+});
 
+if (_utils.__DEV__) {
+  Box.displayName = 'Box';
+}
+
 var _default = Box;
 exports.default = _default;

commonjs/components/flex/Flex.js

@@ -40,2 +40,4 @@ "use strict";
 
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -55,3 +57,3 @@
 
-var Flex = function Flex(props) {
+var Flex = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
@@ -88,7 +90,12 @@
   return /*#__PURE__*/React.createElement(Container, _extends({}, otherProps, {
-    className: flexClass
+    className: flexClass,
+    ref: ref
   }), children);
-};
+});
 
+if (_utils.__DEV__) {
+  Flex.displayName = 'Flex';
+}
+
 var _default = Flex;
 exports.default = _default;

esm/components/box/Box.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import React from 'react';
-import classNames from 'classnames'; // TODO get list of colors from design team
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { __DEV__ } from '../utils'; // TODO get list of colors from design team
 
@@ -43,3 +44,3 @@ export var COLOR = {
  */
-var Box = function Box(_ref) {
+var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _classNames;
@@ -64,6 +65,11 @@
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: classes
+    className: classes,
+    ref: ref
   }), children);
-};
+});
 
+if (__DEV__) {
+  Box.displayName = 'Box';
+}
+
 export default Box;

esm/components/flex/Flex.js

@@ -7,5 +7,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { FLEX_DIRECTION, FLEX_JUSTIFY_VALUES, FLEX_ALIGNMENT_VALUES, FLEX_MARGINS } from './FlexConsts';
+import { __DEV__ } from '../utils';
 export { FLEX_DIRECTION, FLEX_JUSTIFY_VALUES, FLEX_ALIGNMENT_VALUES, FLEX_MARGINS };
-
-var Flex = function Flex(props) {
+var Flex = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
@@ -42,6 +42,11 @@
   return /*#__PURE__*/React.createElement(Container, _extends({}, otherProps, {
-    className: flexClass
+    className: flexClass,
+    ref: ref
   }), children);
-};
+});
 
+if (__DEV__) {
+  Flex.displayName = 'Flex';
+}
+
 export default Flex;

package.json

 {
   "name": "brainly-style-guide",
-  "version": "183.0.2",
+  "version": "183.1.0",
   "description": "Brainly Front-End Style Guide",
@@ -5,0 +5,0 @@ "repository": "https://github.com/brainly/style-guide.git",

src/components/box/Box.jsx

 // @flow strict
 
-import React from 'react';
+import React, {forwardRef} from 'react';
 import type {Node} from 'react';
 import classNames from 'classnames';
+import {__DEV__} from '../utils';
 
@@ -118,33 +119,42 @@ // TODO get list of colors from design team
  */
-const Box = ({
-  children,
-  className,
-  color,
-  padding = 'm',
-  border = false,
-  borderColor = 'gray-secondary-lightest',
-  noBorderRadius = false,
-  shadow = false,
-  ...props
-}: BoxPropsType) => {
-  const classes = classNames(
-    'sg-box',
+const Box = forwardRef<BoxPropsType, HTMLDivElement>(
+  (
     {
-      [`sg-box--${String(color)}`]: color,
-      [`sg-box--padding-${String(padding)}`]: padding !== null && padding,
-      [`sg-box--border-color-${String(borderColor)}`]: border && borderColor,
-      'sg-box--border': border,
-      'sg-box--shadow': shadow,
-      'sg-box--no-border-radius': noBorderRadius,
-    },
-    className
-  );
+      children,
+      className,
+      color,
+      padding = 'm',
+      border = false,
+      borderColor = 'gray-secondary-lightest',
+      noBorderRadius = false,
+      shadow = false,
+      ...props
+    }: BoxPropsType,
+    ref
+  ) => {
+    const classes = classNames(
+      'sg-box',
+      {
+        [`sg-box--${String(color)}`]: color,
+        [`sg-box--padding-${String(padding)}`]: padding !== null && padding,
+        [`sg-box--border-color-${String(borderColor)}`]: border && borderColor,
+        'sg-box--border': border,
+        'sg-box--shadow': shadow,
+        'sg-box--no-border-radius': noBorderRadius,
+      },
+      className
+    );
 
-  return (
-    <div {...props} className={classes}>
-      {children}
-    </div>
-  );
-};
+    return (
+      <div {...props} className={classes} ref={ref}>
+        {children}
+      </div>
+    );
+  }
+);
 
+if (__DEV__) {
+  Box.displayName = 'Box';
+}
+
 export default Box;

src/components/flex/Flex.jsx

@@ -12,2 +12,3 @@ // @flow strict
 } from './FlexConsts';
+import {__DEV__} from '../utils';
 
@@ -236,59 +237,65 @@ type FlexContainerType =
 
-const Flex = (props: FlexPropsType) => {
-  const {
-    htmlTag: Container = 'div',
-    fullWidth,
-    fullHeight,
-    noShrink,
-    inlineFlex,
-    alignItems,
-    alignContent,
-    justifyContent,
-    wrap,
-    wrapReverse,
-    alignSelf,
-    direction,
-    margin,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    children,
-    className,
-    ...otherProps
-  } = props;
+const Flex = React.forwardRef<FlexPropsType, HTMLElement>(
+  (props: FlexPropsType, ref) => {
+    const {
+      htmlTag: Container = 'div',
+      fullWidth,
+      fullHeight,
+      noShrink,
+      inlineFlex,
+      alignItems,
+      alignContent,
+      justifyContent,
+      wrap,
+      wrapReverse,
+      alignSelf,
+      direction,
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      children,
+      className,
+      ...otherProps
+    } = props;
 
-  const flexClass = classNames(
-    'sg-flex',
-    {
-      'sg-flex--full-width': fullWidth,
-      'sg-flex--full-height': fullHeight,
-      'sg-flex--no-shrink': noShrink,
-      'sg-flex--inline': inlineFlex,
-      [`sg-flex--align-items-${alignItems || ''}`]: alignItems,
-      [`sg-flex--align-content-${alignContent || ''}`]: alignContent,
-      [`sg-flex--align-self-${alignSelf || ''}`]: alignSelf,
-      [`sg-flex--justify-content-${justifyContent || ''}`]: justifyContent,
-      'sg-flex--wrap': wrap,
-      'sg-flex--wrap-reverse': wrapReverse,
-      'sg-flex--column': direction === FLEX_DIRECTION.COLUMN,
-      'sg-flex--column-reverse': direction === FLEX_DIRECTION.COLUMN_REVERSE,
-      'sg-flex--row': direction === FLEX_DIRECTION.ROW,
-      'sg-flex--row-reverse': direction === FLEX_DIRECTION.ROW_REVERSE,
-      [`sg-flex--margin-${margin || ''}`]: margin,
-      [`sg-flex--margin-top-${marginTop || ''}`]: marginTop,
-      [`sg-flex--margin-right-${marginRight || ''}`]: marginRight,
-      [`sg-flex--margin-bottom-${marginBottom || ''}`]: marginBottom,
-      [`sg-flex--margin-left-${marginLeft || ''}`]: marginLeft,
-    },
-    className
-  );
+    const flexClass = classNames(
+      'sg-flex',
+      {
+        'sg-flex--full-width': fullWidth,
+        'sg-flex--full-height': fullHeight,
+        'sg-flex--no-shrink': noShrink,
+        'sg-flex--inline': inlineFlex,
+        [`sg-flex--align-items-${alignItems || ''}`]: alignItems,
+        [`sg-flex--align-content-${alignContent || ''}`]: alignContent,
+        [`sg-flex--align-self-${alignSelf || ''}`]: alignSelf,
+        [`sg-flex--justify-content-${justifyContent || ''}`]: justifyContent,
+        'sg-flex--wrap': wrap,
+        'sg-flex--wrap-reverse': wrapReverse,
+        'sg-flex--column': direction === FLEX_DIRECTION.COLUMN,
+        'sg-flex--column-reverse': direction === FLEX_DIRECTION.COLUMN_REVERSE,
+        'sg-flex--row': direction === FLEX_DIRECTION.ROW,
+        'sg-flex--row-reverse': direction === FLEX_DIRECTION.ROW_REVERSE,
+        [`sg-flex--margin-${margin || ''}`]: margin,
+        [`sg-flex--margin-top-${marginTop || ''}`]: marginTop,
+        [`sg-flex--margin-right-${marginRight || ''}`]: marginRight,
+        [`sg-flex--margin-bottom-${marginBottom || ''}`]: marginBottom,
+        [`sg-flex--margin-left-${marginLeft || ''}`]: marginLeft,
+      },
+      className
+    );
 
-  return (
-    <Container {...otherProps} className={flexClass}>
-      {children}
-    </Container>
-  );
-};
+    return (
+      <Container {...otherProps} className={flexClass} ref={ref}>
+        {children}
+      </Container>
+    );
+  }
+);
 
+if (__DEV__) {
+  Flex.displayName = 'Flex';
+}
+
 export default Flex;

No alert changes

Improved metrics

Total package byte prevSize

2350676

increased by0.11%

Number of package files

961

increased by0.31%

Lines of code

30975

increased by0.16%

No dependency changes