refactor: move icons to /Icons and add typed properties

HathorNetwork · May 23, 2024 · 6c9c73e · 6c9c73e
1 parent c0e8ef0
commit 6c9c73e
Show file tree

Hide file tree

Showing 20 changed files with 144 additions and 216 deletions.
diff --git a/src/components/Icon/ActionDot.icon.js b/src/components/Icon/ActionDot.icon.js
diff --git a/src/components/Icon/CircleCheck.icon.js b/src/components/Icon/CircleCheck.icon.js
diff --git a/src/components/Icon/CircleClock.icon.js b/src/components/Icon/CircleClock.icon.js
diff --git a/src/components/Icon/CircleError.icon.js b/src/components/Icon/CircleError.icon.js
diff --git a/src/components/Icons/ActionDot.icon.js b/src/components/Icons/ActionDot.icon.js
@@ -11,6 +11,11 @@ import { COLORS } from '../../styles/themes'
 import { DEFAULT_ICON_SIZE } from './constants'
 import { getScale, getViewBox } from './helper'
 
+/**
+ * @param {object} props
+ * @property {number} props.size
+ * @property {StyleSheet} props.color
+ */
 export const ActionDot = ({ size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'

diff --git a/src/components/Icon/ArrowDown.icon.js → src/components/Icons/ArrowDown.icon.js b/src/components/Icon/ArrowDown.icon.js → src/components/Icons/ArrowDown.icon.js
@@ -8,16 +8,20 @@
 import * as React from 'react'
 import { View, Image, StyleSheet } from 'react-native';
 import chevronDown from '../../assets/icons/chevron-down.png';
+import { DEFAULT_ICON_SIZE } from './constants';
 
 /**
- * @typedef {Object} Properties prop
- * @property {StyleSheet} prop.style
- *
- * @param {Properties} properties
+ * @param {object} props
+ * @property {number} props.size
+ * @property {StyleSheet} props.style
  */
-export const ArrowDownIcon = ({ style }) => (
+export const ArrowDownIcon = ({ size = DEFAULT_ICON_SIZE, style }) => (
   <View style={[styles.wrapper, style]}>
-    <Image source={chevronDown} width={24} height={24} />
+    <Image
+      source={chevronDown}
+      width={size}
+      height={size}
+    />
   </View>
 );
 

diff --git a/src/components/Icon/ArrowUp.icon.js → src/components/Icons/ArrowUp.icon.js b/src/components/Icon/ArrowUp.icon.js → src/components/Icons/ArrowUp.icon.js
@@ -8,16 +8,20 @@
 import * as React from 'react'
 import { View, Image, StyleSheet } from 'react-native';
 import chevronUp from '../../assets/icons/chevron-up.png';
+import { DEFAULT_ICON_SIZE } from './constants';
 
 /**
- * @typedef {Object} Properties prop
- * @property {StyleSheet} prop.style
- *
- * @param {Properties} properties
+ * @param {object} props
+ * @property {number} props.size
+ * @property {StyleSheet} props.style
  */
-export const ArrowUpIcon = ({ style }) => (
+export const ArrowUpIcon = ({ size = DEFAULT_ICON_SIZE, style }) => (
   <View style={[styles.wrapper, style]}>
-    <Image source={chevronUp} width={24} height={24} />
+    <Image
+      source={chevronUp}
+      width={size}
+      height={size}
+    />
   </View>
 );
 

diff --git a/src/components/Icon/Base.icon.js → src/components/Icons/Base.icon.js b/src/components/Icon/Base.icon.js → src/components/Icons/Base.icon.js
@@ -9,14 +9,12 @@ import { StyleSheet, View } from 'react-native';
 import { COLORS } from '../../styles/themes';
 
 /**
- * @typedef {Object} Base base
- * @property {'default'|'outline'|'fill'} base.type
- * @property {StyleSheet} base.style
- * @property {ReactNode} base.children
- *
- * @param {Base}
+ * @param {object} props
+ * @property {'default'|'outline'|'fill'} props.type
+ * @property {StyleSheet} props.style
+ * @property {ReactNode} props.children
  */
-export const BaseIcon = ({ type, style, children }) => (
+export const BaseIcon = ({ type = 'default', style, children }) => (
   <View style={[
     styles[type],
     style

diff --git a/src/components/Icons/CircleCheck.icon.js b/src/components/Icons/CircleCheck.icon.js
@@ -11,6 +11,14 @@ import { COLORS } from '../../styles/themes'
 import { DEFAULT_ICON_SIZE } from './constants'
 import { getScale, getViewBox } from './helper'
 
+/**
+ * @param {object} props
+ * @property {number} props.size
+ * @property {StyleSheet} props.color
+ *
+ * @description
+ * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true
+ */
 export const CircleCheck = ({ size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'

diff --git a/src/components/Icons/CircleClock.icon.js b/src/components/Icons/CircleClock.icon.js
@@ -11,6 +11,14 @@ import { COLORS } from '../../styles/themes'
 import { DEFAULT_ICON_SIZE } from './constants'
 import { getScale, getViewBox } from './helper'
 
+/**
+ * @param {object} props
+ * @property {number} props.size
+ * @property {StyleSheet} props.color
+ *
+ * @description
+ * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true
+ */
 export const CircleClock = ({ size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'

diff --git a/src/components/Icons/CircleError.icon.js b/src/components/Icons/CircleError.icon.js
@@ -11,6 +11,14 @@ import { COLORS } from '../../styles/themes'
 import { DEFAULT_ICON_SIZE } from './constants'
 import { getScale, getViewBox } from './helper'
 
+/**
+ * @param {object} props
+ * @property {number} props.size
+ * @property {StyleSheet} props.color
+ *
+ * @description
+ * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true
+ */
 export const CircleError = ({ size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'

diff --git a/src/components/Icon/CircleInfo.icon.js → src/components/Icons/CircleInfo.icon.js b/src/components/Icon/CircleInfo.icon.js → src/components/Icons/CircleInfo.icon.js
@@ -7,8 +7,17 @@
 
 import * as React from 'react'
 import Svg, { G, Path, Defs, ClipPath } from 'react-native-svg'
+import { COLORS } from '../../styles/themes';
 
-export const CircleInfoIcon = ({ size = 20, color = '#000' }) => (
+/**
+ * @param {object} props
+ * @property {number} props.size
+ * @property {StyleSheet} props.color
+ *
+ * @description
+ * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true
+ */
+export const CircleInfoIcon = ({ size = 20, color = COLORS.white }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'
     width={size}
@@ -25,7 +34,7 @@ export const CircleInfoIcon = ({ size = 20, color = '#000' }) => (
     </G>
     <Defs>
       <ClipPath id='a'>
-        <Path fill='#fff' d='M0 0h20v20H0z' />
+        <Path fill={color} d='M0 0h20v20H0z' />
       </ClipPath>
     </Defs>
   </Svg>

diff --git a/src/components/Icon/NanoContract.icon.js → src/components/Icons/NanoContract.icon.js b/src/components/Icon/NanoContract.icon.js → src/components/Icons/NanoContract.icon.js
@@ -7,25 +7,31 @@
 
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
+import { COLORS } from '../../styles/themes';
 import { BaseIcon } from './Base.icon';
+import { DEFAULT_ICON_SIZE } from './constants';
 
 /**
- * @param {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ * @param {object} props
+ * @property {SvgProps|{type: 'default'|'outline'|'fill'}} props.type
+ * @property {number} props.size
+ * @property {StyleSheet} props.color
  *
  * @description
  * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true
  */
-export const NanoContractIcon = (props) => (
-  <BaseIcon type={props.type || 'default'}>
+export const NanoContractIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
+  <BaseIcon type={type}>
     <Svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width={size}
+      height={size}
+      viewBox={getViewBox(size)}
+      transform={getScale(size, DEFAULT_ICON_SIZE)}
       fill='none'
-      {...props}
     >
       <Path
-        fill={props.color || '#000'}
+        fill={color}
         d='M6.101 21.298a2.33 2.33 0 0 1-1.697-.69 2.278 2.278 0 0 1-.702-1.689v-1.198c0-.47.167-.871.501-1.205a1.644 1.644 0 0 1 1.206-.502H6.5V4.41c0-.47.167-.871.501-1.206a1.643 1.643 0 0 1 1.206-.501H18.59c.47 0 .871.167 1.206.501.334.335.501.736.501 1.206v14.51c0 .665-.234 1.228-.702 1.688a2.33 2.33 0 0 1-1.697.691H6.101ZM17.899 19.9c.283 0 .52-.094.712-.282a.938.938 0 0 0 .288-.698V4.41a.3.3 0 0 0-.087-.221.3.3 0 0 0-.22-.087H8.206a.3.3 0 0 0-.221.087.3.3 0 0 0-.087.22v11.606h7.314c.469 0 .87.168 1.205.502.334.334.501.736.501 1.205v1.198c0 .278.094.51.282.698.188.188.42.282.698.282ZM9.894 8.49a.676.676 0 0 1-.496-.205.674.674 0 0 1-.206-.494c0-.193.069-.357.206-.494a.677.677 0 0 1 .496-.206h7.015a.67.67 0 0 1 .49.206.671.671 0 0 1 .207.492c0 .194-.069.36-.206.496a.672.672 0 0 1-.491.205H9.894Zm0 2.885a.676.676 0 0 1-.496-.206.674.674 0 0 1-.206-.494c0-.192.069-.357.206-.494a.677.677 0 0 1 .496-.205h7.015a.67.67 0 0 1 .49.206.671.671 0 0 1 .207.491c0 .194-.069.36-.206.497a.671.671 0 0 1-.491.205H9.894Zm-3.791 8.524h9.417v-2.178a.3.3 0 0 0-.086-.221.3.3 0 0 0-.221-.087H5.409a.3.3 0 0 0-.221.087.3.3 0 0 0-.087.221v1.198c0 .278.096.51.288.698a.98.98 0 0 0 .714.282Zm-.005 0h-.997 10.42-9.423Z'
       />
     </Svg>

diff --git a/src/components/Icon/Oracle.icon.js → src/components/Icons/Oracle.icon.js b/src/components/Icon/Oracle.icon.js → src/components/Icons/Oracle.icon.js
@@ -7,29 +7,35 @@
 
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
+import { COLORS } from '../../styles/themes';
 import { BaseIcon } from './Base.icon';
+import { DEFAULT_ICON_SIZE } from './constants';
 
 /**
- * @param {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ * @param {object} props
+ * @property {SvgProps|{type: 'default'|'outline'|'fill'}} props.type
+ * @property {number} props.size
+ * @property {StyleSheet} props.color
  *
  * @description
  * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true
  */
-export const OracleIcon = (props) => (
-  <BaseIcon type={props.type || 'default'}>
+export const OracleIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
+  <BaseIcon type={type}>
     <Svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width={size}
+      height={size}
+      viewBox={getViewBox(size)}
+      transform={getScale(size, DEFAULT_ICON_SIZE)}
       fill='none'
-      {...props}
     >
       <Path
-        fill={props.color || '#000'}
+        fill={color}
         d='M12 20.5c-.096 0-.189-.008-.28-.024a1.45 1.45 0 0 1-.261-.072c-1.98-.708-3.552-1.954-4.715-3.738C5.581 14.882 5 12.95 5 10.872V6.637c0-.34.098-.648.295-.924a1.66 1.66 0 0 1 .764-.596l5.367-2.011C11.62 3.036 11.81 3 12 3c.19 0 .383.035.579.106l5.367 2.011c.31.122.563.32.76.596.196.276.294.584.294.924v4.235c0 2.079-.581 4.01-1.744 5.794-1.163 1.784-2.734 3.03-4.712 3.738A1.558 1.558 0 0 1 12 20.5Zm0-1.302c1.64-.527 2.993-1.569 4.06-3.127 1.068-1.558 1.602-3.289 1.602-5.193v-4.25a.3.3 0 0 0-.193-.276L12.1 4.355A.27.27 0 0 0 12 4.337a.27.27 0 0 0-.101.018L6.53 6.352a.3.3 0 0 0-.193.276v4.25c0 1.904.534 3.635 1.602 5.193 1.067 1.558 2.42 2.6 4.06 3.127Z'
       />
       <Path
-        fill={props.color || '#000'}
+        fill={color}
         d='M11.339 13.422c.202-.062.423-.093.662-.093.23 0 .45.031.658.093.208.061.4.15.574.268.17.083.348.12.532.113a.683.683 0 0 0 .475-.211.607.607 0 0 0 .19-.464.507.507 0 0 0-.228-.415 3.693 3.693 0 0 0-2.206-.71c-.404-.001-.785.057-1.145.175-.36.117-.704.293-1.032.527a.509.509 0 0 0-.24.414.587.587 0 0 0 .194.469.68.68 0 0 0 .47.214c.183.008.36-.03.531-.116.174-.114.363-.202.565-.264ZM10.072 10.497a5.364 5.364 0 0 1 1.923-.336c.693 0 1.335.112 1.926.336.591.224 1.118.52 1.582.886.154.116.323.17.506.165a.671.671 0 0 0 .469-.204.587.587 0 0 0 .187-.467.597.597 0 0 0-.236-.441 7.195 7.195 0 0 0-2.032-1.177 6.697 6.697 0 0 0-2.4-.426c-.854 0-1.653.142-2.398.426a7.247 7.247 0 0 0-2.032 1.175.592.592 0 0 0-.037.912c.13.129.284.196.463.202a.776.776 0 0 0 .5-.165c.464-.366.99-.662 1.579-.886Z'
       />
     </Svg>