Swtich from rebass to grid-styled (metabase#7838)

* rm rebass * fix spacing * fix import * flow fixes
ixiaconsultancy · Jun 11, 2018 · 20881ca · 20881ca
1 parent 41b947b
commit 20881ca
Show file tree

Hide file tree

Showing 28 changed files with 79 additions and 122 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -9,6 +9,7 @@
 .*/node_modules/resize-observer-polyfill/.*
 .*/node_modules/react-virtualized/.*
 .*/node_modules/styled-components/.*
+.*/node_modules/grid-styled/.*
 .*/node_modules/update-notifier/.*
 .*/node_modules/boxen/.*
 .*/node_modules/libnpx/.*

diff --git a/flow-typed/styled-components.js b/flow-typed/styled-components.js
@@ -0,0 +1,5 @@
+/* For some reason this is needed to suppress flow errros */
+
+declare module 'styled-components' {
+  declare module.exports: any
+}
diff --git a/frontend/src/metabase/app.js b/frontend/src/metabase/app.js
@@ -21,6 +21,7 @@ if (window.MetabaseLocalization) {
 import React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
+import { ThemeProvider } from "styled-components";
 
 import MetabaseAnalytics, {
   registerAnalyticsClickListener,
@@ -46,14 +47,20 @@ const browserHistory = useRouterHistory(createHistory)({
   basename: BASENAME,
 });
 
+const theme = {
+  space: [4, 8, 16, 32, 64, 128],
+};
+
 function _init(reducers, getRoutes, callback) {
   const store = getStore(reducers, browserHistory);
   const routes = getRoutes(store);
   const history = syncHistoryWithStore(browserHistory, store);
 
   ReactDOM.render(
     <Provider store={store}>
-      <Router history={history}>{routes}</Router>
+      <ThemeProvider theme={theme}>
+        <Router history={history}>{routes}</Router>
+      </ThemeProvider>
     </Provider>,
     document.getElementById("root"),
   );

diff --git a/frontend/src/metabase/components/ArchiveCollectionModal.jsx b/frontend/src/metabase/components/ArchiveCollectionModal.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Box, Flex, Text } from "rebass";
+import { Box, Flex } from "grid-styled";
 import { withRouter } from "react-router";
 import { push } from "react-router-redux";
 import { t } from "c-3po";

diff --git a/frontend/src/metabase/components/BrowseApp.jsx b/frontend/src/metabase/components/BrowseApp.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex, Subhead } from "rebass";
+import { Box, Flex } from "grid-styled";
 import { t } from "c-3po";
 
 import EntityItem from "metabase/components/EntityItem";
@@ -13,6 +13,7 @@ import Card from "metabase/components/Card";
 import { Grid, GridItem } from "metabase/components/Grid";
 import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
+import Subhead from "metabase/components/Subhead";
 
 export const DatabaseListLoader = props => (
   <EntityListLoader entityType="databases" {...props} />

diff --git a/frontend/src/metabase/components/CollectionEmptyState.jsx b/frontend/src/metabase/components/CollectionEmptyState.jsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { Box } from "grid-styled";
-import { Text, Subhead } from "rebass";
 import { t } from "c-3po";
 import RetinaImage from "react-retina-image";
+import Subhead from "metabase/components/Subhead";
 
 import { normal } from "metabase/lib/colors";
 
@@ -19,9 +19,9 @@ const CollectionEmptyState = () => {
         <Subhead color={normal.grey2}>
           {t`This collection is empty, like a blank canvas`}
         </Subhead>
-        <Text color={normal.grey2}>
+        <p className="text-paragraph text-grey-2">
           {t`You can use collections to organize and group dashboards, questions and pulses for your team or yourself`}
-        </Text>
+        </p>
       </Box>
     </Box>
   );

diff --git a/frontend/src/metabase/components/CollectionLanding.jsx b/frontend/src/metabase/components/CollectionLanding.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex, Subhead, Truncate } from "rebass";
+import { Box, Flex } from "grid-styled";
 import { t } from "c-3po";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
@@ -17,6 +17,8 @@ import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
 import CollectionEmptyState from "metabase/components/CollectionEmptyState";
 import EntityMenu from "metabase/components/EntityMenu";
+import Subhead from "metabase/components/Subhead";
+import Ellipsified from "metabase/components/Ellipsified";
 
 import CollectionListLoader from "metabase/containers/CollectionListLoader";
 import CollectionItemsLoader from "metabase/containers/CollectionItemsLoader";
@@ -51,7 +53,7 @@ const CollectionItem = ({ collection }) => (
     >
       <Icon name="all" mx={1} />
       <h4>
-        <Truncate>{collection.name}</Truncate>
+        <Ellipsified>{collection.name}</Ellipsified>
       </h4>
     </Flex>
   </Link>

diff --git a/frontend/src/metabase/components/CreateDashboardModal.jsx b/frontend/src/metabase/components/CreateDashboardModal.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Box } from "rebass";
+import { Box } from "grid-styled";
 import { t } from "c-3po";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";

diff --git a/frontend/src/metabase/components/EntityInfo.jsx b/frontend/src/metabase/components/EntityInfo.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex, Heading } from "rebass";
+import { Box, Flex } from "grid-styled";
 import { Link } from "react-router";
 
 import Icon from "metabase/components/Icon";
@@ -9,7 +9,7 @@ import UserAvatar from "metabase/components/UserAvatar";
 const EntityInfo = ({ entity }) => (
   <Box>
     <Box my={4}>
-      <Heading>
+      <h1>
         {entity.displayName() || "Good title"}
         {entity.query().segments().length > 0 && <span> filtered by</span>}
         {entity
@@ -33,7 +33,7 @@ const EntityInfo = ({ entity }) => (
               </Tooltip>
             </div>
           ))}
-      </Heading>
+      </h1>
       <p>{entity.card().description}</p>
 
       {entity.card().creator && (

diff --git a/frontend/src/metabase/components/EntityItem.jsx b/frontend/src/metabase/components/EntityItem.jsx
@@ -1,6 +1,8 @@
 import React from "react";
 
-import { Flex, Box, Truncate } from "rebass";
+import { Flex, Box } from "grid-styled";
+
+import Ellipsified from "metabase/components/Ellipsified";
 import Icon from "metabase/components/Icon";
 
 import { normal } from "metabase/lib/colors";
@@ -29,7 +31,7 @@ const EntityItem = ({ name, iconName, iconColor, item, onPin }) => {
         <Icon name={iconName} color={iconColor} />
       </IconWrapper>
       <h3>
-        <Truncate>{name}</Truncate>
+        <Ellipsified>{name}</Ellipsified>
       </h3>
 
       {onPin && (

diff --git a/frontend/src/metabase/components/EntityLayout.js b/frontend/src/metabase/components/EntityLayout.js
@@ -1,5 +1,6 @@
 import React from "react";
-import { Box, Border, Flex, Subhead, Heading } from "rebass";
+import { Box, Flex } from "grid-styled";
+import Subhead from "metabase/components/Subhead";
 
 export const Wrapper = ({ children }) => (
   <Box w="80%" ml="auto" mr="auto">
@@ -23,17 +24,17 @@ export const Canvas = ({ children }) => (
 export const Section = ({ children }) => <Box py={4}>{children}</Box>;
 
 export const SectionHeading = ({ children }) => (
-  <Border bottom mb={3} pb={2}>
+  <Box bottom mb={3} pb={2}>
     <Flex align="center">
       <Subhead>{children}</Subhead>
     </Flex>
-  </Border>
+  </Box>
 );
 
 export const PageHeading = ({ icon, title }) => (
   <Flex align="center" my={3}>
     {icon}
-    <Heading ml={2}>{title}</Heading>
+    <h1 ml={2}>{title}</h1>
   </Flex>
 );
 

diff --git a/frontend/src/metabase/components/EntityPage.jsx b/frontend/src/metabase/components/EntityPage.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "grid-styled";
 import { Link } from "react-router";
 
 import { PageSidebar, Wrapper, PageLayout } from "./EntityLayout";

diff --git a/frontend/src/metabase/components/EntitySegments.jsx b/frontend/src/metabase/components/EntitySegments.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box } from "rebass";
+import { Box } from "grid-styled";
 import { Link } from "react-router";
 import { t } from "c-3po";
 

diff --git a/frontend/src/metabase/components/Favorites.jsx b/frontend/src/metabase/components/Favorites.jsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { Box, Subhead } from "rebass";
+import { Box } from "grid-styled";
 import { Link } from "react-router";
+import Subhead from "metabase/components/Subhead";
 
 class FavoritesLoader extends React.Component {
   state = {

diff --git a/frontend/src/metabase/components/Subhead.jsx b/frontend/src/metabase/components/Subhead.jsx
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+const Subhead = styled.h2``;
+
+export default Subhead;
diff --git a/frontend/src/metabase/containers/Overworld.jsx b/frontend/src/metabase/containers/Overworld.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex, Subhead } from "rebass";
+import { Box, Flex } from "grid-styled";
 import { connect } from "react-redux";
 import { t } from "c-3po";
 
@@ -13,6 +13,7 @@ import Card from "metabase/components/Card";
 import { Grid, GridItem } from "metabase/components/Grid";
 import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
+import Subhead from "metabase/components/Subhead";
 
 import { getUser } from "metabase/home/selectors";
 

diff --git a/frontend/src/metabase/containers/UndoListing.jsx b/frontend/src/metabase/containers/UndoListing.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import styled from "styled-components";
 import { space } from "styled-system";
-import { Flex } from "rebass";
+import { Flex } from "grid-styled";
 import { t } from "c-3po";
 
 import { normal } from "metabase/lib/colors";

diff --git a/frontend/src/metabase/dashboard/components/DashboardMoveModal.jsx b/frontend/src/metabase/dashboard/components/DashboardMoveModal.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex, Subhead } from "rebass";
+import { Box, Flex } from "grid-styled";
 import cx from "classnames";
 import { withRouter } from "react-router";
 import { connect } from "react-redux";
@@ -13,6 +13,7 @@ import { addUndo, createUndo } from "metabase/redux/undo";
 import Button from "metabase/components/Button";
 import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
+import Subhead from "metabase/components/Subhead";
 
 import CollectionListLoader from "metabase/containers/CollectionListLoader";
 

diff --git a/frontend/src/metabase/home/containers/ArchiveApp.jsx b/frontend/src/metabase/home/containers/ArchiveApp.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { t } from "c-3po";
 
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "grid-styled";
 
 import HeaderWithBack from "metabase/components/HeaderWithBack";
 import Card from "metabase/components/Card";

diff --git a/frontend/src/metabase/home/containers/HomepageApp.jsx b/frontend/src/metabase/home/containers/HomepageApp.jsx
@@ -7,6 +7,7 @@ import { push } from "react-router-redux";
 import Greeting from "metabase/lib/greeting";
 import Modal from "metabase/components/Modal";
 import Card from "metabase/components/Card";
+import Subhead from "metabase/components/Subhead";
 
 import Activity from "../components/Activity";
 import RecentViews from "../components/RecentViews";
@@ -16,7 +17,7 @@ import NextStep from "../components/NextStep";
 import * as homepageActions from "../actions";
 import { getActivity, getRecentViews, getUser } from "../selectors";
 
-import { Box, Flex, Subhead } from "rebass";
+import { Box, Flex } from "grid-styled";
 
 const mapStateToProps = (state, props) => ({
   activity: getActivity(state),

diff --git a/frontend/src/metabase/home/containers/SearchApp.jsx b/frontend/src/metabase/home/containers/SearchApp.jsx
@@ -4,12 +4,13 @@ import { t, jt } from "c-3po";
 import _ from "underscore";
 import Link from "metabase/components/Link";
 
-import { Box, Flex, Subhead, Text } from "rebass";
+import { Box, Flex } from "grid-styled";
 
 import EntityListLoader from "metabase/entities/containers/EntityListLoader";
 
 import Card from "metabase/components/Card";
 import EntityItem from "metabase/components/EntityItem";
+import Subhead from "metabase/components/Subhead";
 
 export default class SearchApp extends React.Component {
   render() {

diff --git a/frontend/src/metabase/internal/components/ColorsApp.jsx b/frontend/src/metabase/internal/components/ColorsApp.jsx
@@ -1,7 +1,8 @@
 import React from "react";
 import cx from "classnames";
-import { Box, Flex, Subhead } from "rebass";
+import { Box, Flex } from "grid-styled";
 import CopyToClipboard from "react-copy-to-clipboard";
+import Subhead from "metabase/components/Subhead";
 
 import { normal, saturated, harmony } from "metabase/lib/colors";
 

diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import { t } from "c-3po";
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "grid-styled";
 import styled from "styled-components";
 import { space, width } from "styled-system";
 

diff --git a/frontend/src/metabase/pulse/components/PulseEditCollection.jsx b/frontend/src/metabase/pulse/components/PulseEditCollection.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box } from "rebass";
+import { Box } from "grid-styled";
 import { t } from "c-3po";
 
 import Select, { Option } from "metabase/components/Select";

diff --git a/frontend/src/metabase/pulse/components/PulseMoveModal.jsx b/frontend/src/metabase/pulse/components/PulseMoveModal.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "grid-styled";
 import cx from "classnames";
 import { withRouter } from "react-router";
 

diff --git a/frontend/src/metabase/questions/components/CollectionButtons.jsx b/frontend/src/metabase/questions/components/CollectionButtons.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex } from "rebass";
+import { Flex } from "grid-styled";
 import { Link } from "react-router";
 import { t } from "c-3po";
 

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "d3": "^3.5.17",
     "dc": "^2.0.0",
     "diff": "^3.2.0",
+    "grid-styled": "^4.1.0",
     "history": "3",
     "humanize-plus": "^1.8.1",
     "icepick": "^1.1.0",
@@ -59,7 +60,6 @@
     "react-textarea-autosize": "^5.2.1",
     "react-transition-group": "1",
     "react-virtualized": "^9.7.2",
-    "rebass": "^1.0.7",
     "recompose": "^0.26.0",
     "redux": "^3.5.2",
     "redux-actions": "^2.0.1",