TypeScript Components for use in Dash

The company I work for has created their own set of Typescript components that is basically a wrap of MUI. I am running into trouble on converting these to use in dash. I have tried using the typescript cookiecutter template but when I execute npm run build I get the following error:

Description for ToggleButtonGroup.onAnimationEnd is missing!

Description for ToggleButtonGroup.onAnimationEndCapture is missing!

Description for ToggleButtonGroup.onAnimationIteration is missing!

Description for ToggleButtonGroup.onAnimationIterationCapture is missing!

Description for ToggleButtonGroup.onTransitionEnd is missing!

Description for ToggleButtonGroup.onTransitionEndCapture is missing!

Description for ToggleButtonGroup.isCentered is missing!

Description for ToggleButtonGroup.key is missing!

File "..\AppData\Local\Programs\Python\Python38\lib\runpy.py", line 194, in _run_module_as_main
    return _run_code(code, main_globals, None,
  File "..\AppData\Local\Programs\Python\Python38\lib\runpy.py", line 87, in _run_code
    exec(code, run_globals)
  File "..\.venv\scripts\dash-generate-components.exe\__main__.py", line 7, in <module>
  File "..\.venv\lib\site-packages\dash\development\component_generator.py", line 244, in cli
    generate_components(
  File "..\.venv\lib\site-packages\dash\development\component_generator.py", line 136, in generate_components
    components = generate_classes_files(project_shortname, metadata, *generator_methods)
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 219, in generate_classes_files
    generator(
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 188, in generate_class_file
    class_string = generate_class_string(
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 81, in generate_class_string
    docstring = create_docstring(
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 292, in create_docstring
    args = "\n".join(
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 293, in <genexpr>
    create_prop_docstring(
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 481, in create_prop_docstring
    py_type_name = js_to_py_type(
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 690, in js_to_py_type
    return js_to_py_types[js_type_name]()
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 592, in <lambda>
    union=lambda: " | ".join(
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 595, in <genexpr>
    if js_to_py_type(subType) != ""
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 690, in js_to_py_type
    return js_to_py_types[js_type_name]()
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 551, in shape_or_exact
    return "dict with keys:\n" + "\n".join(
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 552, in <genexpr>
    create_prop_docstring(
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 481, in create_prop_docstring
    py_type_name = js_to_py_type(
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 690, in js_to_py_type
    return js_to_py_types[js_type_name]()
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 589, in <lambda>
    + ", ".join(str(t["value"]) for t in type_object["value"])
  File "..\.venv\lib\site-packages\dash\development\_py_components_generation.py", line 589, in <genexpr>
    + ", ".join(str(t["value"]) for t in type_object["value"])
KeyError: 'value'

My project looks like this:

|-src/ts
| | - components
| | | -- Accordion
| | | | - Accordion.tsx
| | | | - AccordionDetails.tsx
| | | | - index.tsx
| | | -- Alert
| | | | - Alert.tsx
| | | | - AlertItem.tsx
| | | | - index.tsx
| | - index.ts
| | - props.ts

Am I able to ignore component descriptions with dash-generate-components? Or is there something else I am doing wrong.

You can ignore the warning, but if you add a comment above the prop, it should stop the warning message, but the KeyError: 'value' might be an issue.

Hi,

I thing you should verify that all required prop types in your ToggleButtonGroup (and other components) are correctly defined, especially for the missing ones like onAnimationEnd, onTransitionEnd, etc.