chore: changed material ui to react-icons

bottable · Oct 9, 2020 · 924792c · 924792c
1 parent 4ad8c43
commit 924792c
Show file tree

Hide file tree

Showing 31 changed files with 450 additions and 427 deletions.
diff --git a/README.md b/README.md
@@ -7,31 +7,41 @@
 ## Install
 
 ### Install Peer Dependancies
+
 ```bash
-yarn add react react-dom styled-components styled-system styled-normalize @material-ui/core @material-ui/icons
+yarn add react react-dom styled-components styled-system styled-normalize react-icons
 ```
 
 ### Load the Works Sans font:
+
 Add this to your HTML head
+
 ```html
-<link href='https://fonts.googleapis.com/css2?family=Work+Sans&display=swap' rel='stylesheet'/>
+<link
+  href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap"
+  rel="stylesheet"
+/>
 ```
+
 or download `typeface-work-sans` and type `require('typeface-work-sans')` in your project's entry file.
 
 ### Install package
+
 ```bash
-yarn add @bottable/fiber-ui
+yarn add fiber-ui
 ```
 
 ## Usage
 
 ### Wrap your React project with our UIProvider.
+
 example:
+
 ```js
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import { UIProvider } from '@bottable/fiber-ui';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import { UIProvider } from 'fiber-ui'
 
 ReactDOM.render(
   <React.StrictMode>
@@ -40,8 +50,7 @@ ReactDOM.render(
     </UIProvider>
   </React.StrictMode>,
   document.getElementById('root')
-);
-
+)
 ```
 
 ## Development

diff --git a/package.json b/package.json
@@ -51,11 +51,9 @@
     }
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "react-icons": ">=3.2.0",
+    "react-icons": "^3.11.0",
     "styled-components": "^5.2.0",
     "styled-normalize": "^8.0.7",
     "styled-system": "^5.1.5"
@@ -65,8 +63,6 @@
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
     "@babel/preset-typescript": "^7.10.1",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@types/enzyme": "^3.10.5",
@@ -112,6 +108,7 @@
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
     "react-helmet-async": "^1.0.6",
+    "react-icons": "^3.11.0",
     "react-scripts": "^3.4.1",
     "react-test-renderer": "^16.13.1",
     "rimraf": "^3.0.2",
@@ -129,7 +126,6 @@
   },
   "dependencies": {
     "polished": "^3.6.4",
-    "rc-util": "^5.0.6",
-    "react-icons": "^3.11.0"
+    "rc-util": "^5.0.6"
   }
 }
diff --git a/src/Button/__tests__/Button.spec.tsx b/src/Button/__tests__/Button.spec.tsx
@@ -2,7 +2,7 @@ import { Button } from '..'
 
 import React from 'react'
 import { render } from 'test/utils'
-import DeleteIcon from '@material-ui/icons/Delete'
+import { MdDelete } from 'react-icons/md'
 
 describe('Button', () => {
   it('renders correctly', () => {
@@ -61,16 +61,16 @@ describe('Button', () => {
           </Button>
         </div>
         <div>
-          <Button icon={<DeleteIcon />} />
-          <Button icon={<DeleteIcon />} shape='circle' />
-          <Button icon={<DeleteIcon />} shape='round' />
+          <Button icon={<MdDelete />} />
+          <Button icon={<MdDelete />} shape='circle' />
+          <Button icon={<MdDelete />} shape='round' />
         </div>
         <div>
-          <Button icon={<DeleteIcon />} size='lg'>
+          <Button icon={<MdDelete />} size='lg'>
             Trash
           </Button>
-          <Button icon={<DeleteIcon />}>Trash</Button>
-          <Button icon={<DeleteIcon />} size='sm'>
+          <Button icon={<MdDelete />}>Trash</Button>
+          <Button icon={<MdDelete />} size='sm'>
             Trash
           </Button>
         </div>

diff --git a/src/Button/__tests__/__snapshots__/Button.spec.tsx.snap b/src/Button/__tests__/__snapshots__/Button.spec.tsx.snap
@@ -174,10 +174,18 @@ Array [
         className="sc-fujyUd dUvHjO"
       >
         <svg
-          aria-hidden={true}
-          className="MuiSvgIcon-root"
-          focusable="false"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
           viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
@@ -195,10 +203,18 @@ Array [
         className="sc-fujyUd dUvHjO"
       >
         <svg
-          aria-hidden={true}
-          className="MuiSvgIcon-root"
-          focusable="false"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
           viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
@@ -216,10 +232,18 @@ Array [
         className="sc-fujyUd dUvHjO"
       >
         <svg
-          aria-hidden={true}
-          className="MuiSvgIcon-root"
-          focusable="false"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
           viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
@@ -239,10 +263,18 @@ Array [
         className="sc-fujyUd dUvHjO"
       >
         <svg
-          aria-hidden={true}
-          className="MuiSvgIcon-root"
-          focusable="false"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
           viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
@@ -262,10 +294,18 @@ Array [
         className="sc-fujyUd dUvHjO"
       >
         <svg
-          aria-hidden={true}
-          className="MuiSvgIcon-root"
-          focusable="false"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
           viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
@@ -286,10 +326,18 @@ Array [
         className="sc-fujyUd dUvHjO"
       >
         <svg
-          aria-hidden={true}
-          className="MuiSvgIcon-root"
-          focusable="false"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
           viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"

diff --git a/src/Card/__test__/Card.spec.tsx b/src/Card/__test__/Card.spec.tsx
@@ -2,9 +2,7 @@ import { Card } from '..'
 
 import React from 'react'
 import { render } from 'test/utils'
-import SettingsIcon from '@material-ui/icons/Settings'
-import CreateIcon from '@material-ui/icons/Create'
-import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
+import { MdSettings, MdCreate, MdMoreHoriz } from 'react-icons/md'
 
 describe('Card', () => {
   it('renders correctly', () => {
@@ -68,9 +66,9 @@ describe('Card', () => {
             title='Actions'
             style={{ width: 300 }}
             actions={[
-              <SettingsIcon key={1} />,
-              <CreateIcon key={2} />,
-              <MoreHorizIcon key={3} />
+              <MdSettings key={1} />,
+              <MdCreate key={2} />,
+              <MdMoreHoriz key={3} />
             ]}
           >
             <p style={{ margin: 0 }}>Card content</p>

diff --git a/src/Card/__test__/__snapshots__/Card.spec.tsx.snap b/src/Card/__test__/__snapshots__/Card.spec.tsx.snap
@@ -341,39 +341,62 @@ Array [
           className="sc-crzoUp fwFaUB"
         >
           <svg
-            aria-hidden={true}
-            className="MuiSvgIcon-root"
-            focusable="false"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            strokeWidth="0"
+            style={
+              Object {
+                "color": undefined,
+              }
+            }
             viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"
-              transform="scale(1.2, 1.2)"
+              d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
             />
           </svg>
         </div>
         <div
           className="sc-crzoUp fwFaUB"
         >
           <svg
-            aria-hidden={true}
-            className="MuiSvgIcon-root"
-            focusable="false"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            strokeWidth="0"
+            style={
+              Object {
+                "color": undefined,
+              }
+            }
             viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
             />
           </svg>
         </div>
         <div
           className="sc-crzoUp fwFaUB"
         >
           <svg
-            aria-hidden={true}
-            className="MuiSvgIcon-root"
-            focusable="false"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            strokeWidth="0"
+            style={
+              Object {
+                "color": undefined,
+              }
+            }
             viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
               d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"

diff --git a/src/Collapse/Panel.tsx b/src/Collapse/Panel.tsx
@@ -10,7 +10,7 @@ import {
 } from './styles'
 
 import React, { FC } from 'react'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import { MdExpandMore } from 'react-icons/md'
 
 export type PanelProps = {
   header?: string | React.ReactNode
@@ -45,7 +45,7 @@ const Panel: FC<PanelProps> = ({
       <PanelHeaderContainer onClick={() => setCollapsed(panelKey!)}>
         <HeaderContainer>{header}</HeaderContainer>
         <ExpandIconSpan collapsed={collapsed}>
-          <ExpandMoreIcon />
+          <MdExpandMore />
         </ExpandIconSpan>
         <ExtraIconSpan>{extra}</ExtraIconSpan>
       </PanelHeaderContainer>