refactor(getsize): create 'getSize' util

src/Avatar/Avatar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import propTypes from 'prop-types';
 import styled from 'styled-components';
+import { getSize } from '../common/utils';
 
 const StyledAvatar = styled.div`
   display: inline-block;
@@ -41,22 +42,13 @@ const SlyledAvatarIMG = styled.img`
 `;
 
 const Avatar = React.forwardRef(function Avatar(props, ref) {
-  const {
-    alt,
-    children,
-    noBorder,
-    size: sizeProp,
-    square,
-    src,
-    ...otherProps
-  } = props;
+  const { alt, children, noBorder, size, square, src, ...otherProps } = props;
 
-  const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp;
   return (
     <StyledAvatar
       noBorder={noBorder}
       ref={ref}
-      size={size}
+      size={getSize(size)}
       square={square}
       {...otherProps}
     >

src/Bar/Bar.spec.tsx

@@ -1,6 +1,6 @@
 import { renderWithTheme } from '../../test/utils';
 
-import Bar from './Bar';
+import { Bar } from './Bar';
 
 describe('<Bar />', () => {
   it('should render bar', () => {

src/Bar/Bar.tsx

@@ -1,33 +1,27 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { CommonStyledProps } from '../types';
+import { getSize } from '../common/utils';
 
 type BarProps = {
   size?: string | number;
 } & React.HTMLAttributes<HTMLDivElement> &
   CommonStyledProps;
 
-const StyledBar = styled.div<BarProps & { size?: string }>`
+// TODO: add horizontal variant
+// TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle)
+const Bar = styled.div<BarProps>`
+  ${({ theme, size = '100%' }) => `
   display: inline-block;
   box-sizing: border-box;
-  height: ${({ size }) => size};
+  height: ${getSize(size)};
   width: 5px;
-  border-top: 2px solid ${({ theme }) => theme.borderLightest};
-  border-left: 2px solid ${({ theme }) => theme.borderLightest};
-  border-bottom: 2px solid ${({ theme }) => theme.borderDark};
-  border-right: 2px solid ${({ theme }) => theme.borderDark};
-  background: ${({ theme }) => theme.material};
+  border-top: 2px solid ${theme.borderLightest};
+  border-left: 2px solid ${theme.borderLightest};
+  border-bottom: 2px solid ${theme.borderDark};
+  border-right: 2px solid ${theme.borderDark};
+  background: ${theme.material};
+`}
 `;
 
-// TODO: add horizontal variant
-// TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle)
-const Bar = forwardRef<HTMLDivElement, BarProps>(function Bar(
-  { size: sizeProp = '100%', ...otherProps },
-  ref
-) {
-  const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp;
-
-  return <StyledBar size={size} ref={ref} {...otherProps} />;
-});
-
-export default Bar;
+export { Bar, BarProps };

src/Divider/Divider.tsx

@@ -1,13 +1,11 @@
 import styled from 'styled-components';
+import { getSize } from '../common/utils';
 import { Orientation } from '../types';
 
-function getSize(value: string | number) {
-  return typeof value === 'number' ? `${value}px` : value;
-}
-interface DividerProps {
+type DividerProps = {
   size?: string | number;
   orientation?: Orientation;
-}
+};
 const Divider = styled.div<DividerProps>`
   ${({ orientation, theme, size = '100%' }) =>
     orientation === 'vertical'

src/Slider/Slider.js

@@ -10,7 +10,7 @@ import {
   createDisabledTextStyles,
   createHatchedBackground
 } from '../common';
-import { clamp, roundValueToStep } from '../common/utils';
+import { clamp, getSize, roundValueToStep } from '../common/utils';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
 import useForkRef from '../common/hooks/useForkRef';
 import { useIsFocusVisible } from '../common/hooks/useIsFocusVisible';
@@ -242,7 +242,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     step,
     min,
     max,
-    size: sizeProp,
+    size,
     marks: marksProp,
     onChange,
     onChangeCommitted,
@@ -475,13 +475,12 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     };
   }, [handleTouchEnd, handleTouchMove, handleTouchStart]);
 
-  const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp;
 
   return (
     <Wrapper
       isDisabled={disabled}
       vertical={vertical}
-      size={size}
+      size={getSize(size)}
       onMouseDown={handleMouseDown}
       ref={handleRef}
       isFocused={focusVisible}

src/common/utils/index.ts

@@ -103,3 +103,7 @@ export function roundValueToStep(value: number, step: number, min: number) {
   const nearest = Math.round((value - min) / step) * step + min;
   return Number(nearest.toFixed(getDecimalPrecision(step)));
 }
+
+export function getSize(value: string | number) {
+  return typeof value === 'number' ? `${value}px` : value;
+}