CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rc-input-number

React input-number component with step controls, validation, and formatting features

92

1.48x

Quality

Pending

Does it follow best practices?

Impact

92%

1.48x

Average score across 10 eval scenarios

Overview
Eval results
Files

rubric.jsonevals/scenario-7/

{
  "context": "This evaluation assesses how effectively an engineer uses @rc-component/input-number's parser and formatter capabilities to build a currency input component. The focus is on correct usage of the parser prop for extracting numeric values from formatted strings and the formatter prop for displaying currency values.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Parser prop implementation",
      "description": "Uses the parser prop to extract numeric values from formatted currency strings, correctly handling dollar signs, commas, and spaces (e.g., parser={(value) => value.replace(/\\$\\s?|(,*)/g, '')})",
      "max_score": 30
    },
    {
      "name": "Formatter prop implementation",
      "description": "Uses the formatter prop to display values in currency format with dollar sign and thousand separators (e.g., formatter={(value) => `$ ${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')})",
      "max_score": 30
    },
    {
      "name": "Precision configuration",
      "description": "Sets the precision prop to 2 to ensure currency values display with exactly 2 decimal places",
      "max_score": 15
    },
    {
      "name": "Value prop usage",
      "description": "Correctly implements controlled mode using value and onChange props, or uncontrolled mode using defaultValue prop, ensuring proper value management",
      "max_score": 10
    },
    {
      "name": "Min/max constraints",
      "description": "Properly passes through min and max props to the InputNumber component for value validation",
      "max_score": 5
    },
    {
      "name": "Disabled state",
      "description": "Correctly passes the disabled prop to the InputNumber component",
      "max_score": 5
    },
    {
      "name": "Component integration",
      "description": "Uses InputNumber as the base component (imports from '@rc-component/input-number') rather than reimplementing numeric input functionality",
      "max_score": 5
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-rc-input-number

tile.json