From 712bd6bf968db3197588cf9f116ea936918ebe1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nat=C3=A0lia?=
 <92027716+NataliaR-BCN@users.noreply.github.com>
Date: Thu, 14 Mar 2024 09:24:37 +0100
Subject: [PATCH] 1075-feuibug-fix-editableitem-type-bug (#1076)

---
 packages/ui/CHANGELOG.md                      |  6 ++++
 packages/ui/package.json                      |  2 +-
 .../src/components/molecules/EditableItem.tsx | 24 ++++++++--------
 packages/ui/src/components/molecules/index.ts |  1 +
 .../molecules/editableItem/index.stories.tsx  | 28 +++++++------------
 5 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index dac9c6ce6..03e8f4e7f 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.29.3] - 2024-03-13
+
+### Fixed
+
+- Fixed type in EditableItem
+
 ## [0.29.2] - 2024-03-07
 
 ### Fixed
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 02b228506..224650eb3 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@itacademy/ui",
-  "version": "0.29.2",
+  "version": "0.29.3",
   "description": "React FE components for ITAcademy projects.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.es.js",
diff --git a/packages/ui/src/components/molecules/EditableItem.tsx b/packages/ui/src/components/molecules/EditableItem.tsx
index 4848c1a8e..461daf6ca 100644
--- a/packages/ui/src/components/molecules/EditableItem.tsx
+++ b/packages/ui/src/components/molecules/EditableItem.tsx
@@ -76,27 +76,29 @@ export type TItem = {
   categoryId?: string
 }
 
-export type TItemRow = {
-  handleErrorMessage: (message: string) => void
-  handleItemChange: (actionItem: string, changedItem: TItem) => void
-  rowStatus: 'available' | 'editing' | 'deleting' | 'disabled'
-  placeholderTxt: string
-  newPlaceholderTxt: string
-  cancelTxt: string
-  confirmEditTxt: string
-  cancelEditTxt: string
-} & TItemAvailable
+export type TRowStatus = 'available' | 'editing' | 'deleting' | 'disabled'
 
 export type TItemAvailable = {
   id: string
   name: string
-  handleRowStatus: (selectedStatus: string, id: string) => void
+  handleRowStatus: (selectedStatus: TRowStatus, id: string) => void
   newItemTxt: string
   editTxt: string
   deleteTxt: string
   deleteIcon: string
 }
 
+export type TItemRow = {
+  handleErrorMessage: (message: string) => void
+  handleItemChange: (actionItem: string, changedItem: TItem) => void
+  rowStatus: TRowStatus
+  placeholderTxt: string
+  newPlaceholderTxt: string
+  cancelTxt: string
+  confirmEditTxt: string
+  cancelEditTxt: string
+} & TItemAvailable
+
 const AvailableMode: FC<TItemAvailable> = ({
   id,
   name,
diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts
index 5626b24a1..76f434d0a 100644
--- a/packages/ui/src/components/molecules/index.ts
+++ b/packages/ui/src/components/molecules/index.ts
@@ -16,6 +16,7 @@ export {
   type TItem,
   type TItemAvailable,
   type TItemRow,
+  type TRowStatus,
 } from './EditableItem'
 export { InputGroup, type TInputGroup } from './InputGroup'
 export { Modal, type TModal } from './Modal'
diff --git a/packages/ui/src/stories/molecules/editableItem/index.stories.tsx b/packages/ui/src/stories/molecules/editableItem/index.stories.tsx
index 560894cdd..15581b6a2 100644
--- a/packages/ui/src/stories/molecules/editableItem/index.stories.tsx
+++ b/packages/ui/src/stories/molecules/editableItem/index.stories.tsx
@@ -2,7 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { FC, useState } from 'react'
 import { FlexBox } from '../../../styles'
 import { ValidationMessage } from '../../../components/atoms'
-import { TItem, TItemRow, EditableItem } from '../../../components/molecules'
+import {
+  TItem,
+  TItemRow,
+  TRowStatus,
+  EditableItem,
+} from '../../../components/molecules'
 import deleteIcon from './delete-icon.svg'
 
 const newItemTxt = '+ Create new item'
@@ -17,7 +22,7 @@ const deleteTxt = 'Delete item'
 type TMockedEditableItem = {
   id: string
   name: string
-  rowStatus: 'available' | 'editing' | 'deleting' | 'disabled'
+  rowStatus: TRowStatus
 } & TItemRow
 
 const MockedEditableItem: FC<TMockedEditableItem> = ({
@@ -27,24 +32,11 @@ const MockedEditableItem: FC<TMockedEditableItem> = ({
 }) => {
   const [itemId, setItemId] = useState(id)
   const [itemTxt, setItemTxt] = useState(name)
-  const [statusRow, setStatusRow] = useState<
-    'available' | 'editing' | 'deleting' | 'disabled'
-  >(rowStatus)
+  const [statusRow, setStatusRow] = useState<TRowStatus>(rowStatus)
   const [errorMessage, setErrorMessage] = useState('')
 
-  const handleRowStatus = (rowStatusReceived: string) => {
-    if (rowStatusReceived === 'disabled') {
-      setStatusRow('disabled')
-    }
-    if (rowStatusReceived === 'editing') {
-      setStatusRow('editing')
-    }
-    if (rowStatusReceived === 'deleting') {
-      setStatusRow('deleting')
-    }
-    if (rowStatusReceived === 'available') {
-      setStatusRow('available')
-    }
+  const handleRowStatus = (rowStatusReceived: TRowStatus) => {
+    setStatusRow(rowStatusReceived)
   }
 
   const handleErrorMessage = (message: string) => {