The Toolbar component in goobs-frontend is a customizable and flexible container for buttons, dropdowns, and a search bar. It provides a consistent and intuitive interface for users to interact with various actions and filters within an application.

To use the Toolbar component in your project, import it from the goobs-frontend package:

import { CustomToolbar } from 'goobs-frontend';

Here's a basic example of how to use the Toolbar component:

import React from 'react';
import { CustomToolbar } from 'goobs-frontend';

const ToolbarExample: React.FC = () => {
  const buttons = [
    { text: 'Button 1', onClick: () => console.log('Button 1 clicked') },
    { text: 'Button 2', onClick: () => console.log('Button 2 clicked') },
  ];

  const dropdowns = [
    {
      label: 'Dropdown 1',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
      ],
    },
  ];

  const searchbarProps = {
    label: 'Search',
    onChange: () => console.log('Search changed'),
  };

  return (
    <CustomToolbar
      buttons={buttons}
      dropdowns={dropdowns}
      searchbarProps={searchbarProps}
    />
  );
};

export default ToolbarExample;

The Toolbar component accepts the following props:

• buttons: CustomButtonProps[] (optional) - An array of button configurations for the toolbar.
• dropdowns: DropdownProps[] (optional) - An array of dropdown configurations for the toolbar.
• searchbarProps: SearchbarProps (optional) - Configuration for the search bar in the toolbar.

Each button in the buttons array can have the following properties:

• text: string - The text to display on the button.
• onClick: () => void - Callback function to be called when the button is clicked.
• Additional props from the CustomButtonProps interface.

Each dropdown in the dropdowns array can have the following properties:

• label: string - The label for the dropdown.
• options: { value: string, label: string }[] - An array of options for the dropdown.
• Additional props from the DropdownProps interface.

The searchbarProps object can have the following properties:

• label: string - The label for the search bar.
• onChange: () => void - Callback function to be called when the search bar value changes.
• Additional props from the SearchbarProps interface.

1. Button Support: The Toolbar component allows you to add multiple buttons with customizable text and click handlers.
2. Dropdown Menus: You can include dropdown menus in the toolbar to provide additional options and filters.
3. Search Bar: The toolbar can include a search bar for users to search and filter data.
4. Responsive Design: The Toolbar component is designed to be responsive and adapt to different screen sizes.
5. Customizable Styling: The appearance of the toolbar can be customized using CSS or styled-components.

The Toolbar component can be styled using CSS or styled-components. The component uses Material-UI's styling system, so you can leverage the sx prop to apply custom styles.

Here's an example of custom styling:

import React from 'react';
import { CustomToolbar } from 'goobs-frontend';

const StyledToolbarExample: React.FC = () => {
  // ...

  return (
    <CustomToolbar
      buttons={buttons}
      dropdowns={dropdowns}
      searchbarProps={searchbarProps}
      sx={{
        backgroundColor: 'primary.main',
        color: 'white',
        padding: '16px',
        '& .MuiButton-root': {
          marginRight: '8px',
        },
      }}
    />
  );
};

export default StyledToolbarExample;

You can customize the rendering of buttons in the toolbar by providing a custom render function:

import React from 'react';
import { CustomToolbar, IconButton } from 'goobs-frontend';
import { Delete } from '@mui/icons-material';

const ToolbarExample: React.FC = () => {
  const buttons = [
    {
      render: () => (
        <IconButton onClick={() => console.log('Delete clicked')}>
          <Delete />
        </IconButton>
      ),
    },
    // ...
  ];

  // ...

  return (
    <CustomToolbar
      buttons={buttons}
      dropdowns={dropdowns}
      searchbarProps={searchbarProps}
    />
  );
};

export default ToolbarExample;

The Toolbar component can be used in conjunction with data grid components to provide filtering and actions:

import React from 'react';
import { CustomToolbar, DataGrid } from 'goobs-frontend';

const DataGridExample: React.FC = () => {
  const buttons = [
    { text: 'Add', onClick: () => console.log('Add clicked') },
    { text: 'Delete', onClick: () => console.log('Delete clicked') },
  ];

  const dropdowns = [
    {
      label: 'Filter',
      options: [
        { value: 'all', label: 'All' },
        { value: 'active', label: 'Active' },
        { value: 'inactive', label: 'Inactive' },
      ],
    },
  ];

  const searchbarProps = {
    label: 'Search users',
    onChange: () => console.log('Search changed'),
  };

  // ...

  return (
    <div>
      <CustomToolbar
        buttons={buttons}
        dropdowns={dropdowns}
        searchbarProps={searchbarProps}
      />
      <DataGrid
        // ...
      />
    </div>
  );
};

export default DataGridExample;

1. Clear Actions: Provide clear and concise labels for buttons and dropdowns to indicate their purpose.
2. Consistent Styling: Maintain consistent styling for the toolbar across different pages or sections of your application.
3. Responsive Design: Ensure that the toolbar adapts well to different screen sizes and devices.
4. Keyboard Accessibility: Make sure that the toolbar actions are accessible using keyboard navigation.
5. Performance: Be mindful of the number of elements in the toolbar and their impact on performance, especially when dealing with large datasets.

To ensure that the Toolbar component is accessible, consider the following guidelines:

1. Button Labels: Provide descriptive labels for buttons to convey their purpose to screen reader users.
2. Dropdown Labels: Use clear and meaningful labels for dropdown menus to indicate their functionality.
3. Keyboard Navigation: Ensure that the toolbar elements are navigable using keyboard commands, such as Tab and Enter keys.
4. Focus Management: Manage the focus state of the toolbar elements appropriately, especially when using custom rendering.

1. Button Clicks Not Working: Verify that the onClick handlers for buttons are correctly defined and triggered. Check the console for any error messages.
2. Dropdown Options Not Showing: Ensure that the options array for dropdowns is properly formatted and contains valid values and labels.
3. Search Bar Not Updating: Confirm that the onChange handler for the search bar is correctly implemented and handles the search input value.
4. Styling Issues: Check the custom styles applied to the Toolbar component and its sub-components. Ensure that the styles are properly scoped and not conflicting with other styles in the application.

• CustomButton: Used for rendering buttons within the toolbar.
• Dropdown: Used for creating dropdown menus in the toolbar.
• Searchbar: Provides search functionality within the toolbar.
• DataGrid: Can be used in combination with the Toolbar component for data filtering and actions.

Some potential future enhancements for the Toolbar component could include:

1. Customizable Icons: Allow the use of custom icons for buttons and dropdowns to enhance visual representation.
2. Toolbar Variants: Introduce different variants of the toolbar, such as a compact version or a version with additional layout options.
3. Drag and Drop: Implement drag and drop functionality to allow users to customize the order of toolbar elements.
4. Responsive Collapse: Automatically collapse or hide certain toolbar elements on smaller screens to optimize space utilization.

These enhancements would further improve the flexibility, usability, and user experience of the Toolbar component in future versions of goobs-frontend.