The IncrementNumberField component in goobs-frontend is a specialized input field for numeric values with increment and decrement buttons. It provides a user-friendly interface for adjusting numeric values with various styling options.

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

import { IncrementNumberField } from 'goobs-frontend';

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

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

const IncrementNumberFieldExample: React.FC = () => {
  return (
    <IncrementNumberField
      initialValue="0"
      label="Quantity"
      onChange={() => console.log('Value changed')}
    />
  );
};

export default IncrementNumberFieldExample;

The IncrementNumberField component accepts the following props:

• initialValue: string (optional, default: '0') - The initial value of the field.
• onChange: () => void (optional) - Callback function triggered when the value changes.
• backgroundcolor: string (optional) - Background color of the input field.
• outlinecolor: string (optional) - Color of the input field outline.
• fontcolor: string (optional) - Color of the text inside the input field.
• label: string (optional) - Label for the input field.

Additionally, it supports all standard Material-UI TextField props except for onChange.

1. Increment/Decrement Buttons: Provides buttons to easily increase or decrease the numeric value.
2. Manual Input: Allows direct input of numeric values.
3. Customizable Styling: Supports custom colors for background, outline, and font.
4. Minimum Value: Prevents the value from going below zero.
5. Accessibility: Includes proper labeling and ARIA attributes for screen readers.

You can customize the appearance of the IncrementNumberField component using the provided props. Here's an example with custom styling:

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

const StyledIncrementNumberFieldExample: React.FC = () => {
  return (
    <IncrementNumberField
      initialValue="5"
      label="Custom Styled Quantity"
      backgroundcolor="#f0f0f0"
      outlinecolor="#3f51b5"
      fontcolor="#333"
      onChange={() => console.log('Value changed')}
    />
  );
};

export default StyledIncrementNumberFieldExample;

You can use the IncrementNumberField component with state management to track and use the value:

import React, { useState } from 'react';
import { IncrementNumberField } from 'goobs-frontend';

const StatefulIncrementNumberFieldExample: React.FC = () => {
  const [value, setValue] = useState(0);

  const handleChange = () => {
    // The new value is available in the input field directly
    const newValue = parseInt(document.querySelector('input[type="text"]').value, 10);
    setValue(newValue);
    console.log('New value:', newValue);
  };

  return (
    <div>
      <IncrementNumberField
        initialValue={value.toString()}
        label="Quantity"
        onChange={handleChange}
      />
      <p>Current value: {value}</p>
    </div>
  );
};

export default StatefulIncrementNumberFieldExample;

While the component doesn't directly support a custom step size, you can implement this behavior in the parent component:

import React, { useState } from 'react';
import { IncrementNumberField } from 'goobs-frontend';

const CustomStepIncrementNumberFieldExample: React.FC = () => {
  const [value, setValue] = useState(0);
  const stepSize = 5;

  const handleChange = () => {
    const newValue = parseInt(document.querySelector('input[type="text"]').value, 10);
    setValue(newValue);
  };

  const handleIncrement = () => {
    setValue(prevValue => prevValue + stepSize);
  };

  const handleDecrement = () => {
    setValue(prevValue => Math.max(0, prevValue - stepSize));
  };

  return (
    <div>
      <IncrementNumberField
        initialValue={value.toString()}
        label={`Quantity (Step: ${stepSize})`}
        onChange={handleChange}
      />
      <button onClick={handleDecrement}>-{stepSize}</button>
      <button onClick={handleIncrement}>+{stepSize}</button>
    </div>
  );
};

export default CustomStepIncrementNumberFieldExample;

The IncrementNumberField component is designed with accessibility in mind:

• It uses proper labeling to describe the input field's purpose.
• The increment and decrement buttons are keyboard navigable.
• It supports screen readers for announcing the current value and changes.

To further enhance accessibility, consider providing clear instructions or context around the field when necessary.

1. Clear Labels: Use descriptive labels to indicate the purpose of the numeric field.
2. Appropriate Initial Values: Set initial values that make sense for your use case.
3. Validation: Implement additional validation if specific ranges or formats are required.
4. Error Handling: Provide clear error messages for invalid inputs.
5. Consider Context: Use IncrementNumberField for values that make sense to increment/decrement, like quantities or ratings.

The IncrementNumberField component is generally lightweight, but keep in mind:

• For forms with many IncrementNumberField components, consider implementing virtualization or lazy loading.
• Be cautious with the frequency of state updates if you're using the component in a performance-sensitive context.

1. Value Not Updating: Ensure you're properly handling the onChange event and updating any relevant state or form values.
2. Styling Issues: Check the specificity of your CSS if custom styles are not applying correctly.
3. Unexpected Behavior: Make sure you're not conflicting with the component's internal state management if you're implementing custom increment/decrement logic.

By leveraging these features and following the best practices, you can effectively use the IncrementNumberField component in your goobs-frontend projects to create user-friendly numeric input interfaces.