Add comprehensive linked live code

[paddymul]

Checks

• [X] I have checked that this enhancement has not already been requested

How would you categorize this request. You can select multiple if not sure

Documentation

Enhancement Description

Buckaroo is a complex widget with multiple levels of abstraction. Writing examples for this is also difficult.

• For any state of buckaroo it should be obvious how to write python or js code to recreate that state
• Any of these states should be live edittable
• Live edittable code should read as naturally as possible
• Live edittable code should be self contained, without importing variables
• Don't use faker type libraries for demos, it obscures what is happening
• For buckaroo maintainers, you shouldn't have to write the same demo in two places, this will be work that is ignored
• All demo code should ideally live in the github repo

Pseudo Code Implementation

There are a couple of features that fall out of this.

The buckaroo widget already formats json for the JS to display. That's it's core reason for existing. Add a method .to_codepen() that generates a codepen link for any buckaroo state. Look here https://github.com/paddymul/buckaroo/blob/main/docs/examples/CodePenButton.tsx#L40-L51

Write some type of code templating system that does the following

1. Have one file, that lays out each example. This should be executable python code. I should also have commented markers that pull out the relevant code snippets. Each snippet should be named.
2. From that templating, call .to_codepen() to generate the codepen link
3. Have a build step to generate an ipynb file with the same step
4. Generate pycafe from the same snippet

Here's an example

Float_col example

###df_var###
float_col = [5, -8, 13.23, -8.01, -999.345245234, None]
float_df = pd.DataFrame({
    'float_obj_displayer': float_col,
    'float_float_displayer_1__3': float_col,
    'float_float_displayer_0__3': float_col,
    'float_float_displayer_3__3': float_col,
    'float_float_displayer_3_13': float_col})
###end_df_var###

###conf_var###
def float_conf_col(min_digits, max_digits):
    return {'displayer_args': { 'displayer': 'float', 'min_fraction_digits':min_digits, 'max_fraction_digits': max_digits}}
float_config = {
        'float_obj_displayer':  {'displayer_args': {'displayer': 'obj'}},      
        'float_float_displayer_1__3' : float_conf_col(1,3),
        'float_float_displayer_0__3' : float_conf_col(0,3),
        'float_float_displayer_3__3' : float_conf_col(3,3),
        'float_float_displayer_3_13' : float_conf_col(3,13)}
###end_conf_var###

Here is what an ipynb cell using this would look like in template form

{{float_ex.df}}
{{float_ex.conf}}
BuckarooWidget(float_df, column_config_override=float_config)

You can write a similar template for solara/pycafe

Prior Art

https://mmomtchev.github.io/react-edit-list/#/simple

[paddymul]

https://py.cafe/paddymul/buckaroo-gallery