Migrate to chakra

package.json

@@ -5,15 +5,15 @@
   "version": "0.0.1",
   "author": "Anand Narayan <anand@codebrahma.com>",
   "dependencies": {
+    "@chakra-ui/core": "^0.8.0",
     "@codebrahma/gatsby-theme-blog": "^1.0.12",
-    "@emotion/core": "^10.0.10",
-    "@emotion/styled": "^10.0.11",
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
     "@mdx-js/mdx": "^1.0.20",
     "@mdx-js/react": "^1.0.20",
     "@mdx-js/tag": "^0.20.3",
     "babel-preset-react": "^6.24.1",
-    "bricks": "github:codebrahma/bricks",
-    "emotion-theming": "^10.0.10",
+    "emotion-theming": "^10.0.27",
     "gatsby": "^2.13.15",
     "gatsby-image": "^2.1.2",
     "gatsby-plugin-crisp-chat": "^3.2.1",
@@ -38,8 +38,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-helmet": "^5.2.1",
-    "styled-system": "^5.0.5"
+    "react-helmet": "^5.2.1"
   },
   "devDependencies": {
     "css-loader": "^3.0.0",

solutions/react/react.mdx

@@ -11,7 +11,7 @@ keywords:
 image: ./images/reactjs.png
 link: /react-js-development
 ---
-import { Box, P } from 'bricks';
+import { Box, Text } from '@chakra-ui/core';
 import Title from '../../src/components/title.js';
 import ContactUsButton from '../../src/components/contactUsButton.js';
 import { RipplingProject } from '../../src/components/projects';
@@ -38,7 +38,6 @@ Lets talk!
 
 <RipplingProject />
 
----
 [Here is our ReactJS Development process](/codebrahma-react-application)
 
 We have used the best libraries to develop React JS applications. Some of them are as follows.
@@ -47,14 +46,13 @@ We have used the best libraries to develop React JS applications. Some of them a
 <br />
 
 <Box width={[1, 3 / 4]}>
-  <P>
+  <Text>
     We have the right tools to develop and develop production ready React JS applications with minimum possible bundle sizes.
-  </P>
+  </Text>
 </Box>
 
 > For more info , take a look at our [blogs](/category/react) and [open source contributions](/open-source-contributions).
 
----
 <DevelopmentServices />
 
 ## Contact Us

src/components/button.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Button as Btn } from '@chakra-ui/core';
+
+const Button = (props) => (
+  <Btn 
+    borderRadius={3}
+    variant="outline"
+    bg='transparent'
+    border='3px'
+    py='1'
+    h='auto'
+    px='4'
+    lineHeight='1'
+    fontFamily='body'
+    fontWeight='hairline'
+    {...props}
+  />
+)
+
+export default Button

src/components/categorylink.js

@@ -1,29 +1,29 @@
 import {Link} from 'gatsby'
-import styled from '@emotion/styled'
-import {css} from 'bricks'
+import { PseudoBox } from '@chakra-ui/core';
 
-export default styled(Link)(
-  css({
-    bg: 'tint',
-    color: 'black.1',
-    fontSize:'0',
-    px:'6px',
-    py:'2px',
-    display:'inline-block',
-    borderRadius: '6px',
-    border: '1px solid black',
-    textDecoration: 'none',
+export default (props) => <PseudoBox 
+  as={Link}
+  bg='tint'
+  color='black.1'
+  fontSize='0'
+  px='6px'
+  py='2px'
+  display='inline-block'
+  borderRadius='6px'
+  border='1px solid black'
+  textDecoration='none'
+  lineHeight='0'
+  _hover={{
+      bg:'black.1',
+      color:'tint',
+  }}
+  _visited={{
+    bg:'tint',
+    color:'black.1',
     '&:hover': {
       bg:'black.1',
       color:'tint',
     },
-    ':visited':{
-      bg:'tint',
-      color:'black.1',
-      '&:hover': {
-        bg:'black.1',
-        color:'tint',
-      },
-    }
-})
-)
+  }}
+  {...props}
+/>

src/components/contactForm.js

@@ -1,50 +1,47 @@
 import React from "react"
-import { Flex, Box, InputText, OutlinedButton } from "bricks"
+import { Box, Input  } from '@chakra-ui/core';
+import Button from './button';
 
-const ContactForm = ({ referrer }) => {
-  return (
-    <form action="https://api.formik.com/submit/codebrahma/contact" method="post">
-      <input
-        type="hidden"
-        name="_next"
-        value="https://codebrahma.com/thank-you"
+const ContactForm = ({ referrer }) => (
+  <form action="https://api.formik.com/submit/codebrahma/contact" method="post">
+    <input
+      type="hidden"
+      name="_next"
+      value="https://codebrahma.com/thank-you"
+    />
+    <input type="hidden" name="referrer" value={referrer} />
+    <Box width={[1, 1 / 2]}>
+      <Input
+        size="25"
+        rows="5"
+        required
+        as="textarea"
+        name="msg"
+        backgroundColor="black.4"
+        borderWidth={0}
+        borderRadius={3}
+        placeholder="&#128172; Tell us about your idea"
+        padding={1}
       />
-      <input type="hidden" name="referrer" value={referrer} />
-      <Flex flexWrap="wrap" flexDirection="column">
-        <Box width={[1, 1 / 2]}>
-          <InputText
-            size="25"
-            rows="5"
-            width={1}
-            required
-            as="textarea"
-            name="msg"
-            backgroundColor="black.4"
-            borderWidth={0}
-            borderRadius={3}
-            placeholder="&#128172; Tell us about your idea"
-          />
-        </Box>
-        <Box width={[1, 1 / 2]} mt={1}>
-          <InputText
-            width={1}
-            name="email"
-            type="email"
-            required
-            backgroundColor="black.4"
-            borderWidth={0}
-            borderRadius={3}
-            placeholder="@ Email address"
-          />
-        </Box>
-        <Box width={[1, 1 / 3]} mt={1}>
-          <OutlinedButton borderRadius={3}>
-            Submit
-          </OutlinedButton>
-        </Box>
-      </Flex>
-    </form>
-  )
-}
+    </Box>
+    <Box width={[1, 1 / 2]} mt={1}>
+      <Input
+        name="email"
+        type="email"
+        required
+        backgroundColor="black.4"
+        borderWidth={0}
+        borderRadius={3}
+        placeholder="@ Email address"
+        lineHeight='1'
+        padding={1}
+        height='auto'
+      />
+    </Box>
+    <Box width={[1, 1 / 3]} mt={1}>
+      <Button variant='outline'>Submit</Button>
+    </Box>
+  </form>
+)
 
 export default ContactForm

src/components/contactUsButton.js

@@ -1,14 +1,18 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { navigate } from "gatsby"
-import { InputButton } from "bricks"
+import Button from './button';
 
 const ContactUsButton = ({ text }) => (
-  <InputButton
-    borderRadius={3}
-    value={text}
-    onClick={() => navigate("/contact")}  
-  />
+  <Button
+    variant='solid'
+    color='tint'
+    bg='primary'
+    borderColor='primary'
+    onClick={() => navigate("/contact")}
+  >
+    {text}
+  </Button>
 );
 
 ContactUsButton.defaultProps = {

src/components/developmentServices.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Box, P } from 'bricks';
+import { Box, Text } from '@chakra-ui/core';
 
 import Title from './title';
 
 export default () => (
-  <Box width={[1, 4 / 5 ]}>
+  <Box width={['100%', 4 / 5 ]}>
     <Title>Reliable ReactJS Development Services</Title>
     <br />
     <br />
@@ -16,9 +16,9 @@ export default () => (
     >
       Fast, modular and Bug free React JS development service
     </Title>
-    <P>
+    <Text>
       We develop your application with atleast 30% faster than other development companies.
-    </P>
+    </Text>
 
     <Title
       fontSize={[2, 'desktop.2']}
@@ -28,9 +28,9 @@ export default () => (
     >
       Javascript Lovers
     </Title>
-    <P>
+    <Text>
       We specialise in servicing modern JavaScript based web & mobile applications. We are experts in developing applications in React.js, AngularJS, Node.js
-    </P>
+    </Text>
 
     <Title
       fontSize={[2, 'desktop.2']}
@@ -40,9 +40,9 @@ export default () => (
     >
       Expert React JS Developers
     </Title>
-    <P>
+    <Text>
       We have a set of skilful React JS developers who are updated with current React Eco System
-    </P>
+    </Text>
 
     <Title
       fontSize={[2, 'desktop.2']}
@@ -52,8 +52,8 @@ export default () => (
     >
       Best React JS development Service history
     </Title>
-    <P>
+    <Text>
       We have 15+ React projects delivered to clients in quick time
-    </P>
+    </Text>
   </Box>
 );

src/components/icons/React.js

@@ -0,0 +1,38 @@
+import React from 'react'
+
+const ReactIcon = (props) => (
+  <svg width={props.width} height={props.height} version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
+	  viewBox="0 0 841.9 595.3" enableBackground="new 0 0 841.9 595.3" >
+  <g>
+    <path fill="#333333" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
+      c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9
+      c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6
+      c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11
+      c-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6
+      c-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4
+      c6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6
+      c28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5
+      c-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2
+      c-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8
+      c6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9
+      c8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3
+      c5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z
+      M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z
+      M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z
+      M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z
+      M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z
+      M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9
+      c-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7
+      c1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9
+      C316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6
+      c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1
+      c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6
+      C644,312.2,621.1,332.1,585.7,347.1z"/>
+    <polygon fill="#333333" points="320.8,78.4 320.8,78.4 320.8,78.4 	"/>
+    <circle fill="#333333" cx="420.9" cy="296.5" r="45.7"/>
+    <polygon fill="#333333" points="520.5,78.1 520.5,78.1 520.5,78.1 	"/>
+  </g>
+</svg>
+)
+
+export default ReactIcon