From 2c9282b1c71643500bf601dcd5ce5dce7e7d2300 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eva=20Gonz=C3=A1lez?= <evagonzalez.tic@gmail.com>
Date: Thu, 16 Mar 2023 10:17:04 +0100
Subject: [PATCH] icon migration to ts added

---
 frontend/package-lock.json                    | 19 ++++++++++++
 frontend/package.json                         |  1 +
 .../components/atoms/{Icon.jsx => Icon.tsx}   | 30 ++++++++++---------
 3 files changed, 36 insertions(+), 14 deletions(-)
 rename frontend/src/components/atoms/{Icon.jsx => Icon.tsx} (72%)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5ee2de5f..2858f851 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -45,6 +45,7 @@
         "@types/react-router-dom": "^5.3.3",
         "@types/redux-logger": "^3.0.9",
         "@types/styled-components": "^5.1.26",
+        "@types/styled-system": "^5.1.16",
         "@typescript-eslint/eslint-plugin": "5.42.1",
         "@typescript-eslint/parser": "5.42.1",
         "@vitejs/plugin-react": "1.3.0",
@@ -4328,6 +4329,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/styled-system": {
+      "version": "5.1.16",
+      "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.16.tgz",
+      "integrity": "sha512-+dyGs2n2o6QStsexh87NeaRmXYnKOnEe7iOEkcYOwKwI5a1gFL0+Mt/hZKi+4KD1qDMkLkGb0lpDrffb/vSkDQ==",
+      "dev": true,
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.5",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
@@ -23474,6 +23484,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/styled-system": {
+      "version": "5.1.16",
+      "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.16.tgz",
+      "integrity": "sha512-+dyGs2n2o6QStsexh87NeaRmXYnKOnEe7iOEkcYOwKwI5a1gFL0+Mt/hZKi+4KD1qDMkLkGb0lpDrffb/vSkDQ==",
+      "dev": true,
+      "requires": {
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.5",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2cd64918..ca95f969 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,6 +52,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.26",
+    "@types/styled-system": "^5.1.16",
     "@typescript-eslint/eslint-plugin": "5.42.1",
     "@typescript-eslint/parser": "5.42.1",
     "@vitejs/plugin-react": "1.3.0",
diff --git a/frontend/src/components/atoms/Icon.jsx b/frontend/src/components/atoms/Icon.tsx
similarity index 72%
rename from frontend/src/components/atoms/Icon.jsx
rename to frontend/src/components/atoms/Icon.tsx
index a392abf8..49e12876 100644
--- a/frontend/src/components/atoms/Icon.jsx
+++ b/frontend/src/components/atoms/Icon.tsx
@@ -1,9 +1,19 @@
+import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { space, typography } from 'styled-system'
 import { colors } from '../../theme'
 
-const IconStyled = styled.span`
+type TIconStyled = {
+  size: number
+  color: string
+  fill: number
+  wght: number
+  grad: number
+  opsz: number
+  className: string
+}
+
+const IconStyled = styled.span<TIconStyled>`
   font-variation-settings: 'FILL' ${(props) => props.fill}, 'wght' ${(props) => props.wght},
     'GRAD' ${(props) => props.grad}, 'opsz' ${(props) => props.opsz};
   color: ${(props) => props.color};
@@ -11,6 +21,9 @@ const IconStyled = styled.span`
   ${space}
   ${typography}
 `
+type TIcon = {
+  name: string
+} & Partial<TIconStyled>
 
 function Icon({
   name,
@@ -22,7 +35,7 @@ function Icon({
   opsz = 48,
   className = '',
   ...props
-}) {
+}: TIcon) {
   return (
     <IconStyled
       className={`material-symbols-outlined ${className}`}
@@ -39,15 +52,4 @@ function Icon({
   )
 }
 
-Icon.propTypes = {
-  name: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  color: PropTypes.string,
-  fill: PropTypes.number,
-  wght: PropTypes.number,
-  grad: PropTypes.number,
-  opsz: PropTypes.number,
-  className: PropTypes.string,
-}
-
 export default styled(Icon)``