The NumberField component in goobs-frontend is a specialized input field designed for numeric input. It provides a user-friendly interface for entering numbers with built-in validation and formatting options.

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

import { NumberField } from 'goobs-frontend';

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

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

const NumberFieldExample: React.FC = () => {
  return (
    <NumberField
      label="Enter a number"
      initialValue="0"
      onChange={() => console.log('Number changed')}
    />
  );
};

export default NumberFieldExample;

The NumberField component accepts the following props:

• initialValue: string (optional, default: '') - 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.
• min: number (optional) - Minimum allowed value.
• max: number (optional) - Maximum allowed value.

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

1. Numeric Input: Allows only numeric input, automatically filtering out non-numeric characters.
2. Min/Max Validation: Supports setting minimum and maximum allowed values.
3. Customizable Styling: Supports custom colors for background, outline, and font.
4. Empty State Handling: Allows the field to be empty, useful for optional number inputs.
5. Accessibility: Includes proper labeling and ARIA attributes for screen readers.

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

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

const StyledNumberFieldExample: React.FC = () => {
  return (
    <NumberField
      label="Custom Styled Number"
      initialValue="10"
      backgroundcolor="#f0f0f0"
      outlinecolor="#3f51b5"
      fontcolor="#333"
      onChange={() => console.log('Number changed')}
      min={0}
      max={100}
    />
  );
};

export default StyledNumberFieldExample;

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

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

const StatefulNumberFieldExample: React.FC = () => {
  const [value, setValue] = useState<number | null>(null);

  const handleChange = () => {
    const newValue = parseInt(document.querySelector('input[type="text"]').value, 10);
    setValue(isNaN(newValue) ? null : newValue);
    console.log('New value:', newValue);
  };

  return (
    <div>
      <NumberField
        initialValue={value?.toString() || ''}
        label="Enter a number"
        onChange={handleChange}
        min={0}
        max={100}
      />
      <p>Current value: {value !== null ? value : 'No value'}</p>
    </div>
  );
};

export default StatefulNumberFieldExample;

While the component has built-in min/max validation, you can implement additional custom validation:

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

const CustomValidationNumberFieldExample: React.FC = () => {
  const [error, setError] = useState<string | null>(null);

  const handleChange = () => {
    const newValue = parseInt(document.querySelector('input[type="text"]').value, 10);
    if (isNaN(newValue)) {
      setError('Please enter a valid number');
    } else if (newValue % 2 !== 0) {
      setError('Please enter an even number');
    } else {
      setError(null);
    }
  };

  return (
    <div>
      <NumberField
        label="Enter an even number"
        onChange={handleChange}
        error={!!error}
        helperText={error}
      />
    </div>
  );
};

export default CustomValidationNumberFieldExample;

The NumberField component is designed with accessibility in mind:

• It uses proper labeling to describe the input field's purpose.
• The component is keyboard accessible.
• 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, especially regarding any constraints (e.g., min/max values).

1. Clear Labels: Use descriptive labels to indicate the purpose of the numeric field.
2. Appropriate Constraints: Set min and max values when there are logical limits to the expected input.
3. Error Handling: Provide clear error messages for invalid inputs, including those outside the min/max range.
4. Formatting: Consider the format of the number (e.g., decimal places, thousands separators) and communicate this to the user if necessary.
5. Default Values: Provide sensible default values when applicable.

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

• For forms with many NumberField 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. Validation Problems: Verify that your min and max values are set correctly and that any custom validation logic is functioning as expected.

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