feat(Text): New Text component; upgrade to styled-system@v5 (#79)

heydoctor · Sep 16, 2019 · 82c8b32 · 82c8b32
1 parent 96bebb9
commit 82c8b32
Show file tree

Hide file tree

Showing 21 changed files with 417 additions and 235 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "release": "standard-version"
   },
   "dependencies": {
+    "@styled-system/prop-types": "^5.1.2",
     "@testing-library/react": "^9.1.3",
     "cleave.js": "~1.4.10",
     "libphonenumber-js": "^1.7.13",
@@ -41,12 +42,12 @@
     "react-popper": "^1.3.3",
     "react-portal": "^4.2.0",
     "react-transition-group": "^2.5.3",
-    "styled-system": "^3.2.1"
+    "styled-components": "^4.0.0",
+    "styled-system": "^5.1.2"
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "styled-components": "^4.0.0"
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.3.3",
@@ -81,8 +82,8 @@
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-filesize": "^6.0.1",
+    "rollup-plugin-node-resolve": "^5.2.0",
     "standard-version": "^4.4.0",
-    "styled-components": "^4.1.3",
     "yup": "^0.26.10"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,7 @@
 import babel from 'rollup-plugin-babel';
 import filesize from 'rollup-plugin-filesize';
 import cjs from 'rollup-plugin-commonjs';
+import resolve from 'rollup-plugin-node-resolve';
 import pkg from './package.json';
 
 export default {
@@ -15,11 +16,18 @@ export default {
       format: 'es',
     },
   ],
-  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
+  external: [
+    ...Object.keys(pkg.dependencies || {}).filter(dep => dep !== 'styled-components'),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
   plugins: [
     babel({
       babelrc: true,
     }),
+    resolve({
+      only: ['styled-components'],
+      dedupe: ['react', 'react-dom', 'styled-components'],
+    }),
     cjs({
       include: 'node_modules/**',
     }),

diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from 'styled-components';
 import { space } from 'styled-system';
+import propTypes from '@styled-system/prop-types';
 import { getComponentVariant, createComponent } from '../utils';
 
 const StyledAlert = createComponent({
@@ -29,10 +30,11 @@ const StyledAlert = createComponent({
 });
 
 /** Alerts are typically used to display meaningful copy to users - typically notifying the user of an important message. */
-const Alert = props => <StyledAlert {...props} />;
+const Alert = React.forwardRef((props, ref) => <StyledAlert {...props} ref={ref} />);
 
 Alert.propTypes = {
   variant: PropTypes.string,
+  ...propTypes.space,
 };
 
 Alert.defaultProps = {

diff --git a/src/Badge/Badge.js b/src/Badge/Badge.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from 'styled-components';
 import { space } from 'styled-system';
+import propTypes from '@styled-system/prop-types';
 import { getComponentVariant, createComponent, getComponentSize } from '../utils';
 
 const StyledBadge = createComponent({
@@ -22,11 +23,12 @@ const StyledBadge = createComponent({
   },
 });
 
-const Badge = props => <StyledBadge {...props} />;
+const Badge = React.forwardRef((props, ref) => <StyledBadge {...props} ref={ref} />);
 
 Badge.propTypes = {
   variant: PropTypes.string,
   size: PropTypes.string,
+  ...propTypes.space,
 };
 
 Badge.defaultProps = {

diff --git a/src/Box/Box.js b/src/Box/Box.js
@@ -1,50 +1,28 @@
-import { css } from 'styled-components';
-import {
-  display,
-  space,
-  color,
-  height,
-  width,
-  fontSize,
-  fontWeight,
-  textAlign,
-  lineHeight,
-  alignSelf,
-  justifySelf,
-  flex,
-} from 'styled-system';
+import { compose, space, color, typography, layout, flexbox, position, background } from 'styled-system';
+import propTypes from '@styled-system/prop-types';
 import { createComponent } from '../utils';
 
 const Box = createComponent({
   name: 'Box',
-  style: css`
-  ${display}
-  ${space}
-  ${color}
-  ${fontSize}
-  ${fontWeight}
-  ${textAlign}
-  ${lineHeight}
-  ${height}
-  ${width}
-  ${flex}
-  ${alignSelf}
-  ${justifySelf}
-  `,
+  style: compose(
+    space,
+    color,
+    typography,
+    layout,
+    flexbox,
+    position,
+    background
+  ),
 });
 
 Box.propTypes = {
-  ...display.propTypes,
-  ...space.propTypes,
-  ...color.propTypes,
-  ...width.propTypes,
-  ...fontSize.propTypes,
-  ...fontWeight.propTypes,
-  ...textAlign.propTypes,
-  ...lineHeight.propTypes,
-  ...flex.propTypes,
-  ...alignSelf.propTypes,
-  ...justifySelf.propTypes,
+  ...propTypes.space,
+  ...propTypes.color,
+  ...propTypes.typography,
+  ...propTypes.layout,
+  ...propTypes.flexbox,
+  ...propTypes.position,
+  ...propTypes.background,
 };
 
 export default Box;
diff --git a/src/Button/Button.js b/src/Button/Button.js
@@ -128,10 +128,10 @@ Button.defaultProps = {
   loading: false,
 };
 
-const verticalCss = ({ sizes, vertical, borderRadius }) => {
+const verticalCss = ({ breakpoints, vertical, borderRadius }) => {
   const maybeNumber = parseInt(vertical, 10);
-  const fallback = sizes[vertical] || sizes.sm;
-  const breakpoint = Number.isInteger(maybeNumber) ? `${maybeNumber}px` : `${fallback}px`;
+  const fallback = breakpoints[vertical] || breakpoints.sm;
+  const breakpoint = Number.isInteger(maybeNumber) ? `${maybeNumber}px` : fallback;
 
   return css`
     @media (max-width: ${breakpoint}) {
@@ -154,15 +154,7 @@ const verticalCss = ({ sizes, vertical, borderRadius }) => {
 Button.Group = createComponent({
   name: 'ButtonGroup',
   as: Flex,
-  style: ({
-    vertical = false,
-    theme: {
-      radius,
-      grid: { sizes },
-    },
-    borderRadius = radius || 2,
-    connected = false,
-  }) => css`
+  style: ({ vertical = false, theme: { radius, breakpoints }, borderRadius = radius || 2, connected = false }) => css`
     & > button:not(:first-child) {
       margin-left: 1rem;
     }
@@ -184,7 +176,7 @@ Button.Group = createComponent({
         }
       `}
 
-    ${vertical && verticalCss({ sizes, vertical, borderRadius })};
+    ${vertical && verticalCss({ breakpoints, vertical, borderRadius })};
   `,
 });
 

diff --git a/src/Dropdown/Dropdown.stories.js b/src/Dropdown/Dropdown.stories.js
@@ -9,21 +9,22 @@ export default {
   component: Dropdown,
 };
 
-export const Basic = () => {
-  const [ placement, setPlacement ] = useState('bottom-start')
+function BasicExample() {
+  const [placement, setPlacement] = useState('bottom-start');
   return (
     <Flex justifyContent="center">
       <Flex mr={5}>
         <RadioGroup
           label={<strong>Placement</strong>}
           value={placement}
-          choices={Object.keys(PLACEMENT_TRANSITION_ORIGINS).map(placement => ({
-            value: placement,
-            label: placement,
+          choices={Object.keys(PLACEMENT_TRANSITION_ORIGINS).map(p => ({
+            value: p,
+            label: p,
           }))}
           onChange={(_, val) => setPlacement(val)}
         />
       </Flex>
+
       <Flex alignSelf="center">
         <Dropdown
           placement={placement}
@@ -42,13 +43,17 @@ export const Basic = () => {
       </Flex>
     </Flex>
   );
-};
+}
+
+export const Basic = () => <BasicExample />;
 
 export const WithTitles = () => (
   <Flex>
     <Dropdown placement="bottom-start" width={250} trigger={<Button variant="danger">Dropdown w/Titles</Button>}>
       <Dropdown.Title>Section Title</Dropdown.Title>
-      <Dropdown.Item selected closeOnClick={false}>Dropdown Item</Dropdown.Item>
+      <Dropdown.Item selected closeOnClick={false}>
+        Dropdown Item
+      </Dropdown.Item>
       <Dropdown.Item>Dropdown Item</Dropdown.Item>
       <Dropdown.Item>Dropdown Item</Dropdown.Item>
       <Dropdown.Divider />
@@ -80,7 +85,9 @@ export const WithIcons = () => (
       <Dropdown.Divider />
       <Dropdown.Item icon="settings">Dropdown Item</Dropdown.Item>
       <Dropdown.Divider />
-      <Dropdown.Item icon="trash-can" color="red">Cancel</Dropdown.Item>
+      <Dropdown.Item icon="trash-can" color="red">
+        Cancel
+      </Dropdown.Item>
     </Dropdown>
   </Flex>
 );
diff --git a/src/Flex/Flex.js b/src/Flex/Flex.js
@@ -1,35 +1,24 @@
 import React from 'react';
 import { css } from 'styled-components';
-import { flexWrap, flexDirection, alignSelf, alignItems, justifyContent } from 'styled-system';
 import Box from '../Box';
 import { createComponent } from '../utils';
 
-const BaseFlex = createComponent({
+const StyledFlex = createComponent({
   name: 'Flex',
   as: Box,
   style: () => css`
     display: flex;
-
-    ${flexWrap};
-    ${flexDirection};
-    ${alignItems};
-    ${alignSelf};
-    ${justifyContent};
   `,
 });
 
 /** Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
  */
-const Flex = React.forwardRef((props, ref) => <BaseFlex {...props} ref={ref} />);
+const Flex = React.forwardRef((props, ref) => <StyledFlex {...props} ref={ref} />);
 
 Flex.displayName = 'Flex';
 
 Flex.propTypes = {
-  ...flexWrap.propTypes,
-  ...flexDirection.propTypes,
-  ...alignItems.propTypes,
-  ...alignSelf.propTypes,
-  ...justifyContent.propTypes,
+  ...Box.propTypes,
 };
 
 export default Flex;