1075-feuibug-fix-editableitem-type-bug (#1076)

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

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",

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,

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'

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) => {