ui(components): migrates to new toolbar ui components and Numeric for Input InputRange and InputDoubleRange (#4728)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

platform/ui/src/components/SplitButton/SplitButton.tsx

@@ -31,7 +31,7 @@ const classes = {
       isActive
         ? isExpanded
           ? 'border-primary-dark !bg-primary-dark hover:border-primary-dark !text-primary-light'
-          : 'border-primary-light bg-primary-light rounded-md'
+          : 'border-primary-light bg-primary-light !text-black rounded-md'
         : `focus:!text-black focus:!rounded-md focus:!border-primary-light focus:!bg-primary-light ${isExpanded ? 'border-primary-dark bg-primary-dark !text-primary-light' : 'border-secondary-dark bg-secondary-dark group-hover/button:border-primary-dark group-hover/button:text-primary-light hover:!bg-primary-dark hover:border-primary-dark focus:!text-black'}`
     ),
   Secondary: ({ isExpanded, primary }) =>

platform/ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -76,6 +76,7 @@ ToolbarButton.propTypes = {
   commands: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
   onInteraction: PropTypes.func,
   icon: PropTypes.string.isRequired,
+  disabledText: PropTypes.string,
   label: PropTypes.string.isRequired,
   /** Tooltip content can be replaced for a customized content by passing a node to this value. */
   dropdownContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),

platform/ui/src/components/Toolbox/Toolbox.tsx

@@ -31,7 +31,7 @@ function Toolbox({
 
   useEffect(() => {
     const currentButtonIdsStr = JSON.stringify(
-      toolbarButtons.map(button => {
+      toolbarButtons?.map(button => {
         const { id, componentProps } = button;
         if (componentProps.items?.length) {
           return componentProps.items.map(item => `${item.id}-${item.disabled}`);

platform/ui/src/components/Toolbox/ToolboxUI.tsx

@@ -55,7 +55,7 @@ function ToolboxUI(props: withAppTypes) {
       <>
         <div className="flex flex-col bg-black">
           <div className="bg-primary-dark mt-0.5 flex flex-wrap py-2">
-            {toolbarButtons.map((toolDef, index) => {
+            {toolbarButtons?.map((toolDef, index) => {
               if (!toolDef) {
                 return null;
               }

platform/ui/src/contextProviders/Toolbox/toolboxReducer.ts

@@ -1,52 +0,0 @@
-export function toolboxReducer(state, action) {
-  let newState = { ...state };
-
-  const { payload } = action;
-
-  switch (action.type) {
-    case 'SET_ACTIVE_TOOL':
-      newState = {
-        ...state,
-        activeTool: payload.activeTool,
-      };
-      break;
-    case 'UPDATE_TOOL_OPTION':
-      newState = {
-        ...state,
-        toolOptions: {
-          ...state.toolOptions,
-          [payload.toolName]: state.toolOptions[payload.toolName].map(option =>
-            option.id === payload.optionName ? { ...option, value: payload.value } : option
-          ),
-        },
-      };
-      break;
-    case 'INITIALIZE_TOOL_OPTIONS':
-      // eslint-disable-next-line no-case-declarations
-      const newToolOptions = Object.keys(payload?.toolOptions || {}).reduce((acc, toolId) => {
-        const tool = payload.toolOptions[toolId];
-        if (state.toolOptions[toolId]) {
-          // Preserve existing options, potentially merging with new ones if necessary
-          acc[toolId] = state.toolOptions[toolId].map(existingOption => {
-            const initialOption = tool.find(option => option.id === existingOption.id);
-            return initialOption
-              ? { ...initialOption, value: existingOption.value }
-              : existingOption;
-          });
-        } else {
-          acc[toolId] = tool;
-        }
-        return acc;
-      }, {});
-
-      newState = {
-        ...state,
-        toolOptions: newToolOptions,
-      };
-      break;
-    default:
-      break;
-  }
-
-  return newState;
-}