feat(styles): switch to namespaced styled components

src/components/common/DetailsList.tsx

@@ -1,6 +1,38 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
+const Styled = {
+  Details: styled.table`
+    width: 100%;
+    margin: 0;
+  `,
+  Row: styled.tr`
+    border-bottom: 1px solid rgba(#000, 0.05);
+
+    &:last-child {
+      border-bottom-width: 0;
+    }
+  `,
+  LabelCell: styled.td`
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-right: 0.5rem;
+    font-size: 0.8rem;
+    opacity: 0.8;
+  `,
+  ValueCell: styled.td`
+    font-size: 0.9rem;
+    font-weight: 500;
+    text-align: right;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 200px;
+  `,
+};
+
 interface Props {
   details: {
     label: string;
@@ -8,52 +40,18 @@ interface Props {
   }[];
 }
 
-const StyledDetails = styled.table`
-  width: 100%;
-  margin: 0;
-`;
-
-const StyledRow = styled.tr`
-  border-bottom: 1px solid rgba(#000, 0.05);
-
-  &:last-child {
-    border-bottom-width: 0;
-  }
-`;
-
-const StyledCell = styled.td`
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-`;
-
-const StyledLabel = styled(StyledCell)`
-  padding-right: 0.5rem;
-  font-size: 0.8rem;
-  opacity: 0.8;
-`;
-
-const StyledValue = styled(StyledCell)`
-  font-size: 0.9rem;
-  text-align: right;
-  font-weight: 500;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  max-width: 200px;
-`;
-
 const DetailsList: React.SFC<Props> = ({ details }) => {
   return (
-    <StyledDetails>
+    <Styled.Details>
       <tbody>
         {details.map(d => (
-          <StyledRow key={d.label}>
-            <StyledLabel>{d.label}</StyledLabel>
-            <StyledValue>{d.value}</StyledValue>
-          </StyledRow>
+          <Styled.Row key={d.label}>
+            <Styled.LabelCell>{d.label}</Styled.LabelCell>
+            <Styled.ValueCell>{d.value}</Styled.ValueCell>
+          </Styled.Row>
         ))}
       </tbody>
-    </StyledDetails>
+    </Styled.Details>
   );
 };
 

src/components/common/NavMenu.tsx

@@ -5,14 +5,15 @@ import { Dropdown, Icon, Menu } from 'antd';
 import { useStoreActions } from 'store';
 import { NETWORK } from 'components/routing';
 
-const StyledMenu = styled.div`
-  float: right;
-`;
-
-const StyledIcon = styled(Icon)`
-  font-size: 1.2rem;
-  color: #fff;
-`;
+const Styled = {
+  Menu: styled.div`
+    float: right;
+  `,
+  Icon: styled(Icon)`
+    font-size: 1.2rem;
+    color: #fff;
+  `,
+};
 
 const NavMenu: React.FC = () => {
   const { t } = useTranslation();
@@ -31,11 +32,11 @@ const NavMenu: React.FC = () => {
   );
 
   return (
-    <StyledMenu>
+    <Styled.Menu>
       <Dropdown overlay={menu} trigger={['click']}>
-        <StyledIcon type="menu" />
+        <Styled.Icon type="menu" />
       </Dropdown>
-    </StyledMenu>
+    </Styled.Menu>
   );
 };
 

src/components/designer/CustomNodeInner.tsx

@@ -3,23 +3,25 @@ import styled from '@emotion/styled';
 import { INodeInnerDefaultProps } from '@mrblenny/react-flow-chart';
 import { StatusBadge } from 'components/common';
 
-const Node = styled.div`
-  padding: 20px;
-  text-align: center;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
+const Styled = {
+  Node: styled.div`
+    padding: 20px;
+    text-align: center;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  `,
+};
 
 const CustomNodeInner: React.FC<INodeInnerDefaultProps> = ({ node }) => {
   return (
-    <Node>
+    <Styled.Node>
       <span>
         <StatusBadge text={node.id} status={node.properties.status} />
       </span>
       <img src={node.properties.icon} style={{ width: 24, height: 24 }} alt="" />
-    </Node>
+    </Styled.Node>
   );
 };
 

src/components/home/GetStarted.tsx

@@ -5,29 +5,30 @@ import styled from '@emotion/styled';
 import { Button, Card } from 'antd';
 import { NETWORK } from 'components/routing';
 
-const Welcome = styled.p`
-  text-align: center;
-`;
-
-const Create = styled.p`
-  padding: 16px;
-  text-align: center;
-`;
+const Styled = {
+  Welcome: styled.p`
+    text-align: center;
+  `,
+  Create: styled.p`
+    padding: 16px;
+    text-align: center;
+  `,
+};
 
 const GetStarted: React.FC = () => {
   const { t } = useTranslation();
 
   return (
     <Card title={t('cmps.get-started.title')}>
-      <Welcome>{t('cmps.get-started.welcome-1')}</Welcome>
-      <Welcome>{t('cmps.get-started.welcome-2')}</Welcome>
-      <Create>
+      <Styled.Welcome>{t('cmps.get-started.welcome-1')}</Styled.Welcome>
+      <Styled.Welcome>{t('cmps.get-started.welcome-2')}</Styled.Welcome>
+      <Styled.Create>
         <Link to={NETWORK}>
           <Button type="primary" size="large">
             {t('cmps.get-started.create-btn', 'Create your first Network')}
           </Button>
         </Link>
-      </Create>
+      </Styled.Create>
     </Card>
   );
 };

src/components/home/NetworkCard.tsx

@@ -6,15 +6,17 @@ import { Network } from 'types';
 import { StatusBadge } from 'components/common';
 import { NETWORK_VIEW } from 'components/routing';
 
-const StyledCard = styled(Card)`
-  margin-top: 16px;
-`;
+const Styled = {
+  Card: styled(Card)`
+    margin-top: 16px;
+  `,
+};
 
 const NetworkCard: React.FC<{ network: Network }> = ({ network }) => {
   const { navigateTo } = useStoreActions(s => s.app);
 
   return (
-    <StyledCard
+    <Styled.Card
       title={network.name}
       hoverable
       extra={<StatusBadge status={network.status} />}
@@ -36,7 +38,7 @@ const NetworkCard: React.FC<{ network: Network }> = ({ network }) => {
           />
         </Col>
       </Row>
-    </StyledCard>
+    </Styled.Card>
   );
 };
 

src/components/layouts/AppLayout.tsx

@@ -9,43 +9,39 @@ import LocaleSwitch from './LocaleSwitch';
 
 const { Header, Content, Footer } = Layout;
 
-const StyledLayout = styled(Layout)`
-  min-height: 100vh;
-`;
-
-const StyledHeader = styled(Header)`
-  padding: 0 16px;
-`;
-
-const StyledLogo = styled.div`
-  height: 64px;
-  width: 120px;
-  float: left;
-
-  img {
+const Styled = {
+  Layout: styled(Layout)`
+    min-height: 100vh;
+  `,
+  Header: styled(Header)`
+    padding: 0 16px;
+  `,
+  Logo: styled.div`
+    height: 64px;
+    width: 120px;
+    float: left;
+  `,
+  Image: styled.img`
     height: 16px;
     display: inline-block;
     vertical-align: middle;
     margin-right: 5px;
-  }
-
-  span {
+  `,
+  Brand: styled.span`
     display: inline-block;
     color: #fff;
     font-weight: 600;
     font-size: 18px;
     vertical-align: middle;
-  }
-`;
-
-const StyledContent = styled(Content)`
-  display: flex;
-`;
-
-const StyledFooter = styled(Footer)`
-  text-align: center;
-  padding: 0 50px;
-`;
+  `,
+  Content: styled(Content)`
+    display: flex;
+  `,
+  Footer: styled(Footer)`
+    text-align: center;
+    padding: 0 50px;
+  `,
+};
 
 interface Props {
   children: React.ReactNode;
@@ -53,21 +49,21 @@ interface Props {
 
 const AppLayout: React.FC<Props> = (props: Props) => {
   return (
-    <StyledLayout>
-      <StyledHeader>
-        <StyledLogo>
+    <Styled.Layout>
+      <Styled.Header>
+        <Styled.Logo>
           <Link to={HOME}>
-            <img src={logo} alt="logo" />
-            <span>Polar</span>
+            <Styled.Image src={logo} alt="logo" />
+            <Styled.Brand>Polar</Styled.Brand>
           </Link>
-        </StyledLogo>
+        </Styled.Logo>
         <NavMenu />
-      </StyledHeader>
-      <StyledContent>{props.children}</StyledContent>
-      <StyledFooter>
+      </Styled.Header>
+      <Styled.Content>{props.children}</Styled.Content>
+      <Styled.Footer>
         Polar &copy; 2019 Fomo Bros <LocaleSwitch />
-      </StyledFooter>
-    </StyledLayout>
+      </Styled.Footer>
+    </Styled.Layout>
   );
 };
 

src/components/layouts/LocaleSwitch.tsx

@@ -3,9 +3,11 @@ import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { Button } from 'antd';
 
-const StyledButton = styled(Button)`
-  padding: 0 5px;
-`;
+const Styled = {
+  Button: styled(Button)`
+    padding: 0 5px;
+  `,
+};
 
 const LocaleSwitch: React.FC = () => {
   const { i18n } = useTranslation();
@@ -14,13 +16,13 @@ const LocaleSwitch: React.FC = () => {
 
   return (
     <>
-      <StyledButton type="link" onClick={setEnglish}>
+      <Styled.Button type="link" onClick={setEnglish}>
         EN
-      </StyledButton>
+      </Styled.Button>
       |
-      <StyledButton type="link" onClick={setSpanish}>
+      <Styled.Button type="link" onClick={setSpanish}>
         ES
-      </StyledButton>
+      </Styled.Button>
     </>
   );
 };

src/components/network/NetworkView.tsx

@@ -11,6 +11,14 @@ import NetworkDesigner from 'components/designer/NetworkDesigner';
 import { HOME } from 'components/routing';
 import NetworkActions from './NetworkActions';
 
+const Styled = {
+  PageHeader: styled(PageHeader)`
+    border: 1px solid rgb(235, 237, 240);
+    background-color: #fff;
+    margin-bottom: 10px;
+  `,
+};
+
 interface MatchParams {
   id?: string;
 }
@@ -19,12 +27,6 @@ interface Props {
   network: Network;
 }
 
-const StyledPageHeader = styled(PageHeader)`
-  border: 1px solid rgb(235, 237, 240);
-  background-color: #fff;
-  margin-bottom: 10px;
-`;
-
 const NetworkViewWrap: React.FC<RouteComponentProps<MatchParams>> = ({ match }) => {
   const { networks } = useStoreState(s => s.network);
   if (match.params.id) {
@@ -47,7 +49,7 @@ const NetworkView: React.FC<Props> = ({ network }) => {
 
   return (
     <>
-      <StyledPageHeader
+      <Styled.PageHeader
         title={network.name}
         onBack={() => navigateTo(HOME)}
         tags={<StatusTag status={network.status} />}

src/components/routing/Switch.tsx

@@ -2,6 +2,24 @@ import React from 'react';
 import { AnimatedSwitch, spring } from 'react-router-transition';
 import styled from '@emotion/styled';
 
+const Styled = {
+  AnimatedSwitch: styled(AnimatedSwitch)`
+    position: relative;
+    flex: 1;
+    display: flex;
+
+    & > div {
+      flex: 1;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      padding: 16px;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  `,
+};
+
 const mapStyles = (styles: any) => {
   return {
     opacity: styles.opacity,
@@ -31,27 +49,11 @@ const pageTransitions = {
   },
 };
 
-const StyledSwitch = styled(AnimatedSwitch)`
-  position: relative;
-  flex: 1;
-  display: flex;
-
-  & > div {
-    flex: 1;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    padding: 16px;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-`;
-
 const Switch: React.FC = ({ children }) => {
   return (
-    <StyledSwitch {...pageTransitions} mapStyles={mapStyles}>
+    <Styled.AnimatedSwitch {...pageTransitions} mapStyles={mapStyles}>
       {children}
-    </StyledSwitch>
+    </Styled.AnimatedSwitch>
   );
 };